8.3.0 to 8.4.0

Version 8.4.0 adds interactive help for drawing tools, an upgraded x-axis, and other improvments to enhance the user experience. See release notes for more information.

Fonts bundled in the library package

As a performance enhancement, fonts are now bundled in the library package rather than fetched remotely from Google. If you want to continue using Google as the source for fonts:

  1. Open /htdocs/css/chartiq.scss
  2. Replace the line @import "ciq-fonts"; with /* PT Sans Narrow is used only in table view */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700,500,100,300,400italic%7CRoboto+Condensed:400,700,300%7CPT+Sans+Narrow:400,700');

Framework updates

React, Angular, and Vue framework applications now require the @open-wc/webpack-import-meta-loader plugin processing in webpack.

If you want to continue using your existing template, but want 8.4.0 core library enhancements to work with the existing template, refer to the corresponding framework instructions below. Your app will not have any new functionality that requires a new UI (e.g., the Import selection on the Display menu, keyboard navigation in dialogs, interactive help for drawing tool), but it will have the new x-axis as part of the core library.

React

The React framework requires the following upgrade changes:

  1. Uninstall 8.3.

  2. Install 8.4.0.

  3. Install @open-wc/webpack-import-meta-loader and url-loader as a dependency.

    • npm i @open-wc/webpack-import-meta-loader url-loader -D

  4. Add webpack processing rules.

  5. Update by removing /node_modules/

Angular

The Angular framework requires the following upgrade changes:

  1. Uninstall 8.3.

  2. Install 8.4.0.

  3. Install @open-wc/webpack-import-meta-loader as a dependency.

    • npm i @open-wc/webpack-import-meta-loader -D

  4. Add the webpack processing rule.

  5. To gain access to webpack customization, use the following npm package:

Vue

The Vue framework requires the following upgrade changes:

  1. Uninstall 8.3.

  2. Install 8.4.0.

  3. Install @open-wc/webpack-import-meta-loader as a dependency.

    • npm i @open-wc/webpack-import-meta-loader -D

  4. Add the webpack processing rule.

Keyboard navigation for dialogs and UI controls

If you are upgrading a ChartIQ 8.3.0 template for enhanced keyboard navigation, make the following change:

  • In the Options menu <cq-menu-dropdown-section class="chart-locale">, enable keyboard-selectable overrides for the Change Timezone item as follows:
    <cq-item keyboard-selectable="false"><cq-clickable cq-selector="cq-timezone-dialog" cq-method="open" keyboard-selectable="true">Change Timezone</cq-clickable></cq-item>

Interactive help for drawing tools

The interactive help tool feature is hidden by default and needs to be uncommented in the template in order for it to appear in the UI. Uncomment the following import statement to enable help for drawing tools.

import "./examples/help/helpContent.js";

When the feature is enabled, a question mark icon appears in the UI. Selecting the icon activates glowing dots for drawing tools indicating help is available for the tool. A long press opens the help.

Template modifications

If you are upgrading a ChartIQ 8.3.0 template to include interactive help, make the following changes:

  1. Add the Help button to the footer. In class ciq-footer full-screen-hide, add the following:

    <div class="help-ui ciq-help-button" stxtap="Layout.toggleHelp()" title="Toggle Interactive Help"></div>

  2. For every item in helpContent.js, add a corresponding <cq-help> element in the HTML template. For example, change the drawing tools toggle to the following:

    <cq-toggle class="ciq-draw" cq-member="drawing"><cq-help help-id="drawing_tools_toggle"></cq-help><span></span><cq-tooltip>Draw</cq-tooltip></cq-toggle>

  3. Upgrade the default config to inject the <cq-help> elements into the drawing palette. In htdocs/chartiq/js/defaultConfiguration.js line 384, under menuRendering, locate dt (for "drawing tools") where it outputs the <cq-item> element for the tool with the embedded help element. Add the following:

    <cq-help help-id="drawing_palette_${tool}"></cq-help>

Plug-ins

For the plug-ins listed below:

  • .json file extensions were changed to .js as the esm module loader is not able to load JSON files.
  • CSS file names were changed to be unique in order to distinguish them when both plug-ins are enabled.

Analyst views

  • htdocs/chartiq/plugins/analystviews/ folder
    • line-info.json renamed to line-info.js
    • ui.css renamed to analystviews-ui.css

Technical insights

  • htdocs/chartiq/plugins/technicalinsights/ folder
    • lexicon.json renamed to lexicon.js
    • ui.css renamed to technicalinsights-ui.css

X-axis labeling based on calendar priority

X-axis labeling for ChartIQ 8.4.0 templates is based on calendar priority by default. To continue using the legacy x-axis with upgraded templates, re-enable as follows:

  1. Import deprecated JavaScript functions into the template you are using.

    import "./js/deprecated.js";

  2. After creating the chart instance in your template, set CIQ.ChartEngine.XAxis.fitLeftToRight to true.

    stxx.chart.xAxis.fitLeftToRight = true;