Namespace: WebComponents

WebComponents

The following is a set of web components used in our sample templates to illustrate how the API can be leveraged to build a full featured UI to control the chart.

Feel free to use them as provided, or modify the web components to meet your needs. You can find all of the source code for these components in js/components.js and js/componentUI.js.

This implementation assumes the chart is attached to to a quote feed for interactive data loading. If you will not be using a quote feed, you will need to adjust these components accordingly.

Two special tags are required to run the framework:

cq-ui-manager is a component that manages all menus and dialogs on the page. It does so by attaching itself to the HTML body element, monitoring touch and mouse events, and then instantiating menus and dialogs. For instance, when a user taps on the screen, they expect that any open menus will be closed. This is one of the responsibilities that cq-ui-manager assumes.
One cq-ui-manager tag is allowed for the entire page, even when multiple charts are instantiated.

cq-context is a special tag that groups a set of components to a particular chart. Any component that is nested within a cq-context will look to that context in order to find its chart. For instance, menu items within a cq-context will interact with the chart engine that is attached to the context.

Performance considerations: These web components include dynamically updating modules that will react to every data change and redraw certain elements. Although visually pleasing, they can sometimes cause performance issues on slow devices or when multiple charts are displayed. See CIQ.UI.animatePrice for setting options.

See CIQ.UI.ContextTag, which provides a model and base functionality for many components

See the following tutorial for further details on how to work with and customize the included web components: Web Component Interface.

Namespaces

cq-abstract-marker
cq-advertisement
cq-aggregation-dialog
cq-analystviews
cq-attribution
cq-chart-legend
cq-chart-title
cq-chartcontrol-group
cq-clickable
cq-close
cq-color-picker
cq-comparison
cq-comparison-lookup
cq-comparison-tap-capture
cq-curve-comparison
cq-cvp-controller
cq-datepicker
cq-dialog
cq-drawing-context
cq-drawing-palette
cq-drawing-settings
cq-fib-settings-dialog
cq-freshness-dialog
cq-grid-size-picker
cq-historical-comparison-dialog
cq-hu-dynamic
cq-hu-static
cq-info-toggle
cq-language-dialog
cq-loader
cq-lookup
cq-menu
cq-menu-container
cq-menu-dropdown
cq-menu-item-filter
cq-orderbook
cq-palette
cq-palette-dock
cq-redo
cq-scriptiq
cq-scriptiq-editor
cq-scriptiq-menu
cq-scroll
cq-share-button
cq-share-dialog
cq-show-range
cq-side-nav
cq-side-panel
cq-studies
cq-study-context
cq-study-dialog
cq-study-input
cq-study-legend
cq-study-output
cq-study-parameter
cq-swatch
cq-technicalinsights
cq-theme-dialog
cq-theme-piece
cq-themes
cq-timezone-dialog
cq-toggle
cq-toolbar
cq-tradehistory
cq-undo
cq-view-dialog
cq-views