Views web component <cq-views>
.
Displays a menu containing available saved chart views and provides a dialog for saving new views.
Example
<cq-menu class="ciq-menu ciq-views collapse">
<span>Views</span>
<cq-menu-dropdown>
<cq-views>
<cq-heading>Saved Views</cq-heading>
<cq-views-content>
<template cq-view>
<cq-item>
<cq-label></cq-label>
<div class="ciq-icon ciq-close"></div>
</cq-item>
</template>
</cq-views-content>
<cq-separator cq-partial></cq-separator>
<cq-view-save>
<cq-item>
<cq-plus></cq-plus>Save View
</cq-item>
</cq-view-save>
</cq-views>
</cq-menu-dropdown>
</cq-menu>
Methods
-
Views#initialize( [params])
-
Initializes the views menu.
Parameters:
Name Type Argument Description params
object <optional>
Parameters used to initialize the menu.
Properties
Name Type Argument Default Description viewObj
object <optional>
{ views: [] } Contains the menu items; that is, an array of objects that contain the specifications for saved views of the chart.
nameValueStore
object <optional>
The class or constructor function that saves and retrieves the chart views by means of a name/value store. See the custom storage class example below. Defaults to the
nameValueStore
property of the chart configuration if available (see the Chart Configuration tutorial); otherwise, defaults to CIQ.NameValueStore.renderCB
object <optional>
null A callback function executed on the menu after the menu has been rendered. Takes the menu as an argument.
cb
object <optional>
A callback function called when the saved views have been retrieved from the name/value store. No arguments are passed to the callback function.
- Since:
-
- 3.0.7 Added the
params.cb
parameter. - 4.1.0 The
ViewMenu
helper has been deprecated. Calldocument.querySelector("cq-views").initialize()
instead.
- 3.0.7 Added the
Examples
// Set the custom name/value store as the storage location for the web component. document.querySelector("cq-views").initialize({ nameValueStore: MyNameValueStore }); // Create the custom name/value store. const MyNameValueStore = function () {}; // Create custom storage functions using the same signatures and callback requirements as those in CIQ.NameValueStore. // For the cq-views web component, the data that is saved and retrieved is the array represented by params.viewObj.views. MyNameValueStore.prototype.set = function (name, value, cb) { // Add code here to send the view object (value) to your repository and store it under the provided key (name). if (cb) cb(error); }; MyNameValueStore.prototype.get = function (name, cb) { // Add code here to get the view object for the provided key (name) from your repository and pass it to the callback. cb(error, viewObj); }; MyNameValueStore.prototype.remove = function (name, cb) { // Add code here to remove the view object associated with the provided key (name) from your repository. if (cb) cb(error); };
let self = document.querySelector("cq-views"); self.params.nameValueStore.get("stx-views", function (err, obj) { if (!err && obj) self.params.viewObj.views = obj; else self.params.viewObj = { views: [] }; if (self.params.cb) self.params.cb.call(self); self.renderMenu(); });
-
Views#renderMenu()
-
Creates the menu.