@chartiq/react-components - npm Package Compare versions

Comparing version 8.6.1 to 8.8.0

ActiveTrader/index.js

 import { default as Workstation, CIQ } from "./Workstation";
 import tfcHtml from "chartiq/plugins/tfc/tfcHtml";
 import { getConfig, getCustomConfig } from "./resources"; // ChartIQ library resources
-
 import WorkstationExample from "./WorkstationExample";
 export { Workstation as default, WorkstationExample, CIQ, getConfig, getCustomConfig, tfcHtml };

ActiveTrader/resources.js

 import 'chartiq/examples/feeds/symbolLookupChartIQ';
 import quoteFeed from "chartiq/examples/feeds/quoteFeedSimulator";
-import defaultConfig from 'chartiq/js/defaultConfiguration'; // Uncomment the following for the L2 simulator (required for the crypto sample and MarketDepth addOn)
+import defaultConfig from 'chartiq/js/defaultConfiguration';
 
-import 'chartiq/examples/feeds/L2_simulator';
-/* for use with cryptoiq */
+// Uncomment the following for the L2 simulator (required for the crypto sample and MarketDepth addOn)
+import 'chartiq/examples/feeds/L2_simulator'; /* for use with cryptoiq */
+
 // Creates a complete customised configuration object
-
 function getConfig(resources = {}) {
   if (!resources.quoteFeed && resources.quoteFeed !== null) resources.quoteFeed = quoteFeed;
   return defaultConfig(resources);
-} // Creates a complete customised configuration object
+}
 
-
+// Creates a complete customised configuration object
 function getCustomConfig({
@@ -21,8 +21,10 @@ chartId,
 } = {}) {
-  const config = getConfig(resources); // Update chart configuration by modifying default configuration
+  const config = getConfig(resources);
 
+  // Update chart configuration by modifying default configuration
   config.chartId = chartId || "_active-trader-chart";
   config.initialSymbol = symbol || "^USDAUD";
-  config.onChartReady = onChartReady; // Enable / disable addOns here before creating the chart
+  config.onChartReady = onChartReady;
 
+  // Enable / disable addOns here before creating the chart
   config.enabledAddOns.animation = true;
@@ -32,4 +34,4 @@ const {
     tfc
-  } = config.plugins; // Select only plugin configurations that needs to be active for this chart
-
+  } = config.plugins;
+  // Select only plugin configurations that needs to be active for this chart
   config.plugins = {
@@ -48,6 +50,5 @@ marketDepth,
   config.menuChartPreferences = config.menuChartPreferences.filter(item => item.label !== "Market Depth" && item.label !== "Extended Hours");
-  config.addOns.tableView.coverContainer = "#mainChartGroup .chartContainer";
+  config.addOns.tableView.coverContainer = ".ciq-chart-area";
   return config;
 }
-
 export { getConfig, getCustomConfig };

ActiveTrader/Template.js

 import React from "react";
 export default function () {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "ciq-nav full-screen-hide"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("cq-chart-instructions", {
+    role: "contentinfo"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ciq-nav full-screen-hide",
+    role: "navigation"
   }, /*#__PURE__*/React.createElement("div", {
@@ -13,8 +16,20 @@ className: "sidenav-toggle ciq-toggles"
     "keyboard-navigation": "false"
-  }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("cq-tooltip", null, "More"))), /*#__PURE__*/React.createElement("cq-menu", {
-    class: "ciq-search"
-  }, /*#__PURE__*/React.createElement("cq-lookup", {
-    "cq-keystroke-claim": true,
-    "cq-uppercase": true
-  })), /*#__PURE__*/React.createElement("cq-side-nav", {
+  }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("cq-tooltip", null, "More"))), /*#__PURE__*/React.createElement("cq-clickable", {
+    role: "button",
+    class: "symbol-search",
+    "cq-selector": "cq-lookup-dialog",
+    "cq-method": "open",
+    delay: "true"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ciq-lookup-icon"
+  }), /*#__PURE__*/React.createElement("cq-tooltip", null, "Symbol Search")), /*#__PURE__*/React.createElement("cq-clickable", {
+    role: "button",
+    class: "symbol-search",
+    "cq-selector": "cq-lookup-dialog",
+    "cq-method": "open",
+    comparison: "true",
+    delay: "true"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ciq-comparison-icon"
+  }), /*#__PURE__*/React.createElement("cq-tooltip", null, "Add Comparison")), /*#__PURE__*/React.createElement("cq-side-nav", {
     "cq-on": "sidenavOn"
@@ -56,3 +71,5 @@ }, /*#__PURE__*/React.createElement("div", {
     class: "ciq-DT tableview-ui",
-    "cq-member": "tableView"
+    "cq-member": "tableView",
+    role: "button",
+    "aria-pressed": "false"
   }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("cq-tooltip", null, "Table View")))), /*#__PURE__*/React.createElement("div", {
@@ -89,52 +106,39 @@ className: "ciq-menu-section"
     "cq-focus": "input"
-  }, /*#__PURE__*/React.createElement("span", null, "Studies"), /*#__PURE__*/React.createElement("cq-menu-dropdown", null, /*#__PURE__*/React.createElement("cq-study-legend", {
+  }, /*#__PURE__*/React.createElement("span", null, "Studies"), /*#__PURE__*/React.createElement("cq-menu-dropdown", null, /*#__PURE__*/React.createElement("cq-study-menu-manager", null))), /*#__PURE__*/React.createElement("cq-menu", {
+    class: "ciq-menu stx-markers collapse"
+  }, /*#__PURE__*/React.createElement("span", null, "Events"), /*#__PURE__*/React.createElement("cq-menu-dropdown", null, /*#__PURE__*/React.createElement("div", {
+    className: "markers-ui"
+  }, /*#__PURE__*/React.createElement("cq-heading", null, "Chart Events"), /*#__PURE__*/React.createElement("cq-item", {
+    stxtap: "Markers.showMarkers('square')",
     "cq-no-close": true
-  }, /*#__PURE__*/React.createElement("cq-section-dynamic", null, /*#__PURE__*/React.createElement("cq-heading", null, "Current Studies"), /*#__PURE__*/React.createElement("cq-study-legend-content", null, /*#__PURE__*/React.createElement("template", {
-    "cq-study-legend": "true"
-  }, /*#__PURE__*/React.createElement("cq-item", null, /*#__PURE__*/React.createElement("cq-label", {
-    class: "click-to-edit"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "ciq-icon ciq-close"
-  })))), /*#__PURE__*/React.createElement("cq-placeholder", null, /*#__PURE__*/React.createElement("div", {
-    stxtap: "Layout.clearStudies()",
-    className: "ciq-btn sm",
-    "keyboard-selectable": "true"
-  }, "Clear All")))), /*#__PURE__*/React.createElement("div", {
-    className: "scriptiq-ui"
-  }, /*#__PURE__*/React.createElement("cq-heading", null, "ScriptIQ"), /*#__PURE__*/React.createElement("cq-item", null, /*#__PURE__*/React.createElement("cq-clickable", {
-    "cq-selector": "cq-scriptiq-editor",
-    "cq-method": "open"
-  }, "New Script")), /*#__PURE__*/React.createElement("cq-scriptiq-menu", null), /*#__PURE__*/React.createElement("cq-separator", null)), /*#__PURE__*/React.createElement("cq-heading", {
-    "cq-filter": "",
-    "cq-filter-min": "-1"
-  }, "Studies"), /*#__PURE__*/React.createElement("cq-studies", null))), /*#__PURE__*/React.createElement("cq-menu", {
-    class: "ciq-menu stx-markers collapse"
-  }, /*#__PURE__*/React.createElement("span", null, "Events"), /*#__PURE__*/React.createElement("cq-menu-dropdown", null, /*#__PURE__*/React.createElement("cq-heading", null, "Chart Events"), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers('square')"
   }, "Simple Square", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers('circle')"
+    stxtap: "Markers.showMarkers('circle')",
+    "cq-no-close": true
   }, "Simple Circle", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers('callout')"
+    stxtap: "Markers.showMarkers('callout')",
+    "cq-no-close": true
   }, "Callouts", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
     class: "ta_markers-ui",
-    stxtap: "Markers.showMarkers('trade')"
+    stxtap: "Markers.showMarkers('trade')",
+    "cq-no-close": true
   }, "Trade", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
     class: "video_markers-ui",
-    stxtap: "Markers.showMarkers('video')"
+    stxtap: "Markers.showMarkers('video')",
+    "cq-no-close": true
   }, "Video", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
-  }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-separator", null), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers()",
-    class: "ciq-active"
-  }, "None", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
-  }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("div", {
+    className: "ciq-switch"
+  }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
+    stxtap: "Markers.showMarkers('helicopter')",
+    "cq-no-close": true
+  }, "Abstract", /*#__PURE__*/React.createElement("span", {
+    className: "ciq-switch"
+  }, /*#__PURE__*/React.createElement("span", null)))), /*#__PURE__*/React.createElement("div", {
     className: "timespanevent-ui"
@@ -146,3 +150,3 @@ }, /*#__PURE__*/React.createElement("cq-separator", null), /*#__PURE__*/React.createElement("cq-heading", null, "Panel Events"), /*#__PURE__*/React.createElement("cq-item", {
   }, "Order", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-checkbox ciq-active"
+    className: "ciq-switch ciq-active"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
@@ -153,3 +157,3 @@ class: "span-event",
   }, "CEO", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-checkbox ciq-active"
+    className: "ciq-switch ciq-active"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
@@ -160,3 +164,3 @@ class: "span-event",
   }, "News", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-checkbox ciq-active"
+    className: "ciq-switch ciq-active"
   }, /*#__PURE__*/React.createElement("span", null)))))), /*#__PURE__*/React.createElement("cq-menu", {
@@ -208,3 +212,4 @@ class: "ciq-menu ciq-preferences collapse"
   }), /*#__PURE__*/React.createElement("div", {
-    className: "ciq-chart-area"
+    className: "ciq-chart-area",
+    role: "main"
   }, /*#__PURE__*/React.createElement("div", {
@@ -284,4 +289,7 @@ chartarea: "true"
     "cq-marker": true,
-    "cq-browser-tab": true
-  }), /*#__PURE__*/React.createElement("cq-comparison-lookup", null), /*#__PURE__*/React.createElement("cq-chart-legend", null))))))), /*#__PURE__*/React.createElement("cq-attribution", null), /*#__PURE__*/React.createElement("div", {
+    "cq-browser-tab": true,
+    "cq-activate-symbol-search-on-click": true
+  }), /*#__PURE__*/React.createElement("cq-chart-legend", null))))))), /*#__PURE__*/React.createElement("cq-abstract-marker", {
+    "cq-type": "helicopter"
+  }), /*#__PURE__*/React.createElement("cq-attribution", null), /*#__PURE__*/React.createElement("div", {
     className: "ciq-footer full-screen-hide"
@@ -288,0 +296,0 @@ }, /*#__PURE__*/React.createElement("cq-share-button", null), /*#__PURE__*/React.createElement("div", {

ActiveTrader/Workstation.js

 import React from "react";
+import "chartiq/js/standard";
 import { CIQ } from "chartiq/js/components";
-import "chartiq/js/extras/svgcharts/piechart"; // Crypto, L2 Heat Map, Market Depth,
+import "chartiq/js/extras/svgcharts/piechart";
 
+// Crypto, L2 Heat Map, Market Depth,
 import "chartiq/plugins/activetrader/cryptoiq";
-import "chartiq/plugins/activetrader/cryptoiq.css"; // TFC plugin
+import "chartiq/plugins/activetrader/cryptoiq.css";
 
+// TFC plugin
 import "chartiq/plugins/tfc/tfc-loader";
@@ -17,3 +20,2 @@ import "chartiq/plugins/tfc/tfc.css";
 import { getCustomConfig } from "./resources"; // ChartIQ library resources
-
 const {
@@ -30,3 +32,2 @@ channelWrite
  */
-
 export default class Workstation extends React.Component {
@@ -53,6 +54,6 @@ /**
     this.stx = null;
-    this.UIContext = null;
+    this.uiContext = null;
   }
-
   componentDidMount() {
+    if (this.init) return;
     const container = this.container.current;
@@ -65,3 +66,3 @@ const {
     } = this;
-    const uiContext = this.UIContext = new CIQ.UI.Chart().createChartAndUI({
+    const uiContext = this.uiContext = new CIQ.UI.Chart().createChartAndUI({
       container,
@@ -71,15 +72,13 @@ config
     const chartEngine = this.stx = uiContext.stx;
-    this.cryptoSetup(uiContext.stx);
-
+    this.cryptoSetup(this.stx);
     if (window["d3"]) {
-      this.setUpMoneyFlowChart(uiContext.stx);
+      this.setUpMoneyFlowChart(this.stx);
     } else {
       CIQ.loadScript("https://d3js.org/d3.v5.min.js", () => {
-        this.setUpMoneyFlowChart(uiContext.stx);
+        this.setUpMoneyFlowChart(this.stx);
       });
-    } // Request TFC channel open
+    }
 
-
-    channelWrite(config.channels.tfc, true, uiContext.stx);
-
+    // Request TFC channel open
+    channelWrite(config.channels.tfc, true, this.stx);
     if (chartInitialized) {
@@ -91,13 +90,20 @@ chartInitialized({
     }
+    this.init = true;
+    this.rendered = false;
+    this.setState({
+      mounted: true
+    });
   }
-
   componentWillUnmount() {
     // Destroy the ChartEngine instance when unloading the component.
     // This will stop internal processes such as quotefeed polling.
-    this.stx.moneyFlowChart.destroy();
+    // this.rendered ensures it is not test only unmount call
+    if (!this.stx || !this.rendered) return;
+    if (this.stx.moneyFlowChart) {
+      this.stx.moneyFlowChart.destroy();
+    }
     this.stx.destroy();
-
     this.stx.draw = () => {};
+    this.stx = null;
   }
-
   cryptoSetup(stx) {
@@ -115,4 +121,5 @@ stx.setChartType("line");
     });
-    stx.changeOccurred("layout"); // Simulate L2 data using https://documentation.chartiq.com/CIQ.ChartEngine.html#updateCurrentMarketData
+    stx.changeOccurred("layout");
 
+    // Simulate L2 data using https://documentation.chartiq.com/CIQ.ChartEngine.html#updateCurrentMarketData
     CIQ.simulateL2({
@@ -124,6 +131,4 @@ stx,
   }
-
   setUpMoneyFlowChart(stx) {
     stx.moneyFlowChart = moneyFlowChart(stx);
-
     function moneyFlowChart(stx) {
@@ -153,3 +158,2 @@ const initialPieData = {
         var d = {};
-
         for (var i = 0; i < items.length; i++) {
@@ -164,3 +168,2 @@ const item = items[i];
         }
-
         if (i) pieChart.updateData(d, "add");
@@ -175,4 +178,4 @@ last = items[0];
   }
-
   render() {
+    this.rendered = true;
     let chartTemplate = /*#__PURE__*/React.createElement(ChartTemplate, {
@@ -186,3 +189,2 @@ config: this.config
   }
-
 }
@@ -193,2 +195,13 @@ /**
  * @param {CIQ.UI.Context} uiContext
- */
+ */
+
+// Adjustments to compensate for when webpack config is not available
+(function initDynamicShare() {
+  // Decorate the library function to avoid copying html2canvas.min.js to distribution to js/thirdparty directory
+  const fullChart2PNG = CIQ.Share.fullChart2PNG;
+  CIQ.Share.fullChart2PNG = function (stx, params, cb) {
+    import("chartiq/js/thirdparty/html2canvas.min.js").then(() => {
+      fullChart2PNG(stx, params, cb);
+    });
+  };
+})();

ActiveTrader/WorkstationExample.js

@@ -5,4 +5,5 @@ import React, { useState } from "react";
 import PerfectScrollbar from "chartiq/js/thirdparty/perfect-scrollbar.esm.js";
-import marker from "chartiq/examples/markers/markersSample"; // Callback function where you can access both the chartEngine and the UIContext.
+import marker from "chartiq/examples/markers/markersSample";
 
+// Callback function where you can access both the chartEngine and the UIContext.
 const chartInitialized = ({
@@ -17,13 +18,11 @@ chartEngine,
   });
-}; // Callback to execute when chart is loaded for first time
+};
 
-
+// Callback to execute when chart is loaded for first time
 const onChartReady = chartEngine => {};
-
 const exampleResources = {
-  markerSample: marker.MarkersSample,
+  markerFeed: marker.MarkersSample,
   quoteFeed: quoteFeedSimulator,
   scrollStyle: PerfectScrollbar
 };
-
 function getExampleConfig() {
@@ -33,17 +32,20 @@ return {
   };
-} // ChartIQ example resources for markets and translations.
+}
+
+// ChartIQ example resources for markets and translations.
 // Replace it with your own or feel free to use ours.
+
 // Symbol mapping to market definition
-
-
 import "chartiq/examples/markets/marketDefinitionsSample";
-import "chartiq/examples/markets/marketSymbologySample"; // Translation file
+import "chartiq/examples/markets/marketSymbologySample";
 
-import "chartiq/examples/translations/translationSample"; // Example Marker files
+// Translation file
+import "chartiq/examples/translations/translationSample";
 
-import "chartiq/examples/markers/videoSample"; // Import tfc-demo account
+// Example Marker files
+import "chartiq/examples/markers/videoSample";
 
+// Import tfc-demo account
 import "chartiq/plugins/tfc/tfc-demo";
-import "chartiq/examples/feeds/L2_simulator";
-/* for use with cryptoiq */
+import "chartiq/examples/feeds/L2_simulator"; /* for use with cryptoiq */
 
@@ -59,3 +61,4 @@ export default function WorkstationExample(props) {
       config,
-      resources: { ...exampleResources,
+      resources: {
+        ...exampleResources,
         ...props.resources
@@ -71,2 +74,12 @@ }
   });
-}
+}
+
+// Adjustments to compensate for when webpack config is not available
+(function processCss() {
+  // webpack processing can introduce extra 2 spaces for each translation line remove them here
+  if (!CIQ.I18N.csv) return;
+  const lines = CIQ.I18N.csv.split("\n");
+  const translationHasExtraSpace = lines[1][0] === ' ';
+  if (!translationHasExtraSpace) return;
+  CIQ.I18N.csv = lines.map((line, i) => i ? line.slice(2) : line).join('\n');
+})();

Chart/Advanced.js

@@ -5,2 +5,3 @@ // Import necessary ChartIQ library files
 import { getConfig, getCustomConfig } from "./resources";
+
 /**
@@ -7,0 +8,0 @@ * This is a fully functional example showing how to load a chart with complete user interface.

Chart/AdvancedExample.js

 import React, { useState } from "react";
 import { CIQ } from "chartiq/js/advanced";
 import Chart from "./ChartExample";
-export { CIQ }; // Callback to execute when chart is loaded for first time
+export { CIQ };
 
+// Callback to execute when chart is loaded for first time
 const onChartReady = chartEngine => {};
-
 function getExampleConfig() {
@@ -18,14 +18,23 @@ return {
   };
-} // Plugins
+}
+
+// Plugins
+
 // Crypto, L2 Heat Map, Market Depth,
 // Important: Uncomment marketDepth in config.plugins below when enabling this plug-in.
 // import "chartiq/plugins/activetrader/cryptoiq";
+
 // ScriptIQ
 // import "chartiq/plugins/scriptiq/scriptiq";
+
 // SignalIQ
+import "chartiq/plugins/signaliq/signaliqDialog";
+import "chartiq/plugins/signaliq/signaliq-marker";
+import "chartiq/plugins/signaliq/signaliq-paintbar";
 
+// import "chartiq/plugins/studybrowser";
 
-import "chartiq/plugins/signaliq/signaliqDialog";
-import "chartiq/plugins/signaliq/signaliq-marker"; // Trading Central: Technical Insights
+// Trading Central: Technical Insights
 // import "chartiq/plugins/technicalinsights/components";
+
 // TFC plugin
@@ -35,2 +44,3 @@ // Important: Uncomment tfc in config.plugins below when enabling this plug-in.
 // import "chartiq/plugins/tfc/tfc-demo"; /* if using demo account class */
+
 // Time Span Events
@@ -40,7 +50,10 @@ // Important: Uncomment timeSpanEventPanel in config.plugins below when enabling this plug-in.
 // import "chartiq/plugins/timespanevent/examples/timeSpanEventSample"; /* if using sample */
+
 // Trading Central: Analyst Views
 // import "chartiq/plugins/analystviews/components";
+
 // Visual Earnings
 // Important: Uncomment visualEarnings in config.plugins below when enabling this plug-in.
 // import "chartiq/plugins/visualearnings/visualearnings";
+
 // Uncomment the following for the L2 simulator (required for the crypto sample and MarketDepth addOn)
@@ -59,3 +72,3 @@ // import "chartiq/examples/feeds/L2_simulator"; /* for use with cryptoiq */
     chartInitialized: props.chartInitialized
-  });
+  }, props.children);
 }

Chart/ChartExample.js

@@ -5,5 +5,7 @@ import React, { useState } from "react";
 import PerfectScrollbar from "chartiq/js/thirdparty/perfect-scrollbar.esm.js";
+import EmojiPopover from "chartiq/js/thirdparty/emoji-popover.es.js";
 import marker from "chartiq/examples/markers/markersSample";
-export { CIQ }; // Callback function where you can access both the chartEngine and the UIContext.
+export { CIQ };
 
+// Callback function where you can access both the chartEngine and the UIContext.
 const chartInitialized = ({
@@ -18,14 +20,13 @@ chartEngine,
   });
-}; // Callback to execute when chart is loaded for first time
+};
 
-
+// Callback to execute when chart is loaded for first time
 const onChartReady = chartEngine => {};
-
 const exampleResources = {
   quoteFeed: quoteFeedSimulator,
-  markerSample: marker.MarkersSample,
-  scrollStyle: PerfectScrollbar // use improved component scrollbar appearance https://perfectscrollbar.com
-
+  markerFeed: marker.MarkersSample,
+  scrollStyle: PerfectScrollbar,
+  // use improved component scrollbar appearance https://perfectscrollbar.com
+  emojiPicker: EmojiPopover
 };
-
 function getExampleConfig() {
@@ -43,24 +44,35 @@ return {
   };
-} // ChartIQ example resources for markets and translations.
+}
+
+// ChartIQ example resources for markets and translations.
 // Replace it with your own or feel free to use ours.
+
 // Symbol mapping to market definition
+import "chartiq/examples/markets/marketDefinitionsSample";
+import "chartiq/examples/markets/marketSymbologySample";
 
+// Translation file
+import "chartiq/examples/translations/translationSample";
 
-import "chartiq/examples/markets/marketDefinitionsSample";
-import "chartiq/examples/markets/marketSymbologySample"; // Translation file
+// Example Marker files
+import "chartiq/examples/markers/tradeAnalyticsSample";
+import "chartiq/examples/markers/videoSample";
 
-import "chartiq/examples/translations/translationSample"; // Example Marker files
+// Plugins
 
-import "chartiq/examples/markers/tradeAnalyticsSample";
-import "chartiq/examples/markers/videoSample"; // Plugins
 // Crypto, L2 Heat Map, Market Depth,
 // Important: Uncomment marketDepth in config.plugins below when enabling this plug-in.
 // import "chartiq/plugins/activetrader/cryptoiq";
+
 // ScriptIQ
 // import "chartiq/plugins/scriptiq/scriptiq";
+
 // SignalIQ
 // import "chartiq/plugins/signaliq/signaliqDialog";
 // import "chartiq/plugins/signaliq/signaliq-marker";
+// import "chartiq/plugins/signaliq/signaliq-paintbar";
+
 // Trading Central: Technical Insights
 // import "chartiq/plugins/technicalinsights/components";
+
 // TFC plugin
@@ -70,2 +82,3 @@ // Important: Uncomment tfc in config.plugins below when enabling this plug-in.
 // import "chartiq/plugins/tfc/tfc-demo"; /* if using demo account class */
+
 // Time Span Events
@@ -75,7 +88,10 @@ // Important: Uncomment timeSpanEventPanel in config.plugins below when enabling this plug-in.
 // import "chartiq/plugins/timespanevent/examples/timeSpanEventSample"; /* if using sample */
+
 // Trading Central: Analyst Views
 // import "chartiq/plugins/analystviews/components";
+
 // Visual Earnings
 // Important: Uncomment visualEarnings in config.plugins below when enabling this plug-in.
 // import "chartiq/plugins/visualearnings/visualearnings";
+
 // Uncomment the following for the L2 simulator (required for the crypto sample and MarketDepth addOn)
@@ -93,3 +109,4 @@ // import "chartiq/examples/feeds/L2_simulator"; /* for use with cryptoiq */
       config,
-      resources: { ...exampleResources,
+      resources: {
+        ...exampleResources,
         ...props.resources
@@ -104,3 +121,13 @@ }
     chartInitialized: initialized
-  });
-}
+  }, props.children);
+}
+
+// Adjustments to compensate for when webpack config is not available
+(function processCss() {
+  // webpack processing can introduce extra 2 spaces for each translation line remove them here
+  if (!CIQ.I18N.csv) return;
+  const lines = CIQ.I18N.csv.split("\n");
+  const translationHasExtraSpace = lines[1][0] === ' ';
+  if (!translationHasExtraSpace) return;
+  CIQ.I18N.csv = lines.map((line, i) => i ? line.slice(2) : line).join('\n');
+})();

Chart/Core.js

@@ -1,13 +0,13 @@
-import React from "react"; // Import necessary ChartIQ library files
+import React from "react";
 
+// Import necessary ChartIQ library files
 import { CIQ } from "chartiq/js/standard";
 import "chartiq/js/components";
 import "chartiq/js/addOns";
-import ChartTemplate from "./Template"; // Base styles required by the library to render color correctly.
+import ChartTemplate from "./Template";
 
+// Base styles required by the library to render color correctly.
 import "chartiq/css/normalize.css";
 import "chartiq/css/stx-chart.css"; // Chart API
-
 import "chartiq/css/chartiq.css"; // Chart UI
-
 import "./library-overrides.css";
@@ -17,2 +17,3 @@ import { getCustomConfig } from "./resources"; // ChartIQ library resources
 export { CIQ };
+
 /**
@@ -25,3 +26,2 @@ * This is a fully functional example showing how to load a chart with complete user interface.
  */
-
 export default class Core extends React.Component {
@@ -47,9 +47,7 @@ /**
     this.config = configObj;
-    this.state = {
-      stx: null,
-      UIContext: null
-    };
+    this.stx = null;
+    this.uiContext = null;
   }
-
   componentDidMount() {
+    if (this.init) return;
     const container = this.container.current;
@@ -62,11 +60,11 @@ const {
     } = this;
-    portalizeContextDialogs(container); // Delay the call to createChartAndUI so any other chart components on the page
+    portalizeContextDialogs(container);
+    // Delay the call to createChartAndUI so any other chart components on the page
     // using multi chart setup have a chance to call portalizeContextDialogs
-
     window.setTimeout(() => {
-      const uiContext = this.createChartAndUI({
+      const uiContext = this.uiContext = this.createChartAndUI({
         container,
         config
       });
-      const chartEngine = uiContext.stx;
+      const chartEngine = this.stx = uiContext.stx;
       this.setState({
@@ -76,3 +74,2 @@ stx: chartEngine,
       });
-
       if (chartInitialized) {
@@ -85,15 +82,12 @@ chartInitialized({
     }, 0);
+    this.init = true;
+    this.rendered = false;
   }
-
   componentWillUnmount() {
     // Destroy the ChartEngine instance when unloading the component.
     // This will stop internal processes such as quotefeed polling.
-    const {
-      stx
-    } = this.state;
-    stx.destroy();
-
-    stx.draw = () => {};
+    if (!this.stx || !this.rendered) return;
+    this.stx.destroy();
+    this.stx.draw = () => {};
   }
-
   createChartAndUI({
@@ -108,12 +102,27 @@ container,
   }
-
   render() {
+    this.rendered = true;
+    const {
+      props: {
+        children
+      },
+      config
+    } = this;
+    let template = /*#__PURE__*/React.createElement(ChartTemplate, {
+      config: config
+    });
+    const childrenCount = React.Children.count(children);
+    if (childrenCount === 1) {
+      template = /*#__PURE__*/React.cloneElement(children, {
+        config
+      });
+    } else if (childrenCount > 1) {
+      template = children;
+    }
     return /*#__PURE__*/React.createElement("cq-context", {
       ref: this.container
-    }, this.props.children || /*#__PURE__*/React.createElement(ChartTemplate, {
-      config: this.config
-    }));
+    }, template);
   }
+}
 
-}
 /**
@@ -123,7 +132,5 @@ * For applications that have more then one chart, keep single dialog of the same type
  */
-
 function portalizeContextDialogs(container) {
   container.querySelectorAll("cq-dialog").forEach(dialog => {
     dialog.remove();
-
     if (!dialogPortalized(dialog)) {
@@ -134,3 +141,2 @@ document.body.appendChild(dialog);
 }
-
 function dialogPortalized(el) {
@@ -141,2 +147,3 @@ const tag = el.firstChild.nodeName.toLowerCase();
 }
+
 /**
@@ -146,2 +153,13 @@ * @callback Core~chartInitialized
  * @param {CIQ.UI.Context} uiContext
- */
+ */
+
+// Adjustments to compensate for when webpack config is not available
+(function initDynamicShare() {
+  // Decorate the library function to avoid copying html2canvas.min.js to distribution to js/thirdparty directory
+  const fullChart2PNG = CIQ.Share.fullChart2PNG;
+  CIQ.Share.fullChart2PNG = function (stx, params, cb) {
+    import("chartiq/js/thirdparty/html2canvas.min.js").then(() => {
+      fullChart2PNG(stx, params, cb);
+    });
+  };
+})();

Chart/index.js

 import { default as Chart, CIQ } from "./Core";
 import { getConfig, getCustomConfig } from "./resources"; // ChartIQ library resources
-
 import ChartExample from "./ChartExample";
 export { Chart as default, ChartExample, CIQ, getConfig, getCustomConfig };

Chart/resources.js

 import 'chartiq/examples/feeds/symbolLookupChartIQ';
 import quoteFeed from "chartiq/examples/feeds/quoteFeedSimulator";
-import defaultConfig from 'chartiq/js/defaultConfiguration'; // Creates a complete customised configuration object
+import defaultConfig from 'chartiq/js/defaultConfiguration';
 
+// Creates a complete customised configuration object
 function getConfig(resources = {}) {
   if (!resources.quoteFeed && resources.quoteFeed !== null) resources.quoteFeed = quoteFeed;
   return defaultConfig(resources);
-} // Creates a complete customised configuration object
+}
 
-
+// Creates a complete customised configuration object
 function getCustomConfig({
@@ -24,9 +25,9 @@ chartId,
   };
-  config.onChartReady = onChartReady; // Disable crossSection plugins by default
+  config.onChartReady = onChartReady;
+
+  // Disable crossSection plugins by default
   // It can throw errors if when loaded with time series charts.
-
   config.plugins.crossSection = null;
   return config;
 }
-
 export { getConfig, getCustomConfig };

Chart/Template.js

@@ -0,1 +1,2 @@
+import { CIQ } from "chartiq";
 import React from "react";
@@ -6,4 +7,7 @@ export default function ({
 }) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "ciq-nav full-screen-hide"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("cq-chart-instructions", {
+    role: "contentinfo"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ciq-nav full-screen-hide",
+    role: "navigation"
   }, /*#__PURE__*/React.createElement("div", {
@@ -16,8 +20,20 @@ className: "sidenav-toggle ciq-toggles"
     "cq-toggle-classes": "active,"
-  }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("cq-tooltip", null, "More"))), /*#__PURE__*/React.createElement("cq-menu", {
-    class: "ciq-search"
-  }, /*#__PURE__*/React.createElement("cq-lookup", {
-    "cq-keystroke-claim": true,
-    "cq-uppercase": true
-  })), /*#__PURE__*/React.createElement("cq-side-nav", {
+  }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("cq-tooltip", null, "More"))), /*#__PURE__*/React.createElement("cq-clickable", {
+    role: "button",
+    class: "symbol-search",
+    "cq-selector": "cq-lookup-dialog",
+    "cq-method": "open",
+    delay: "true"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ciq-lookup-icon"
+  }), /*#__PURE__*/React.createElement("cq-tooltip", null, "Symbol Search")), /*#__PURE__*/React.createElement("cq-clickable", {
+    role: "button",
+    class: "symbol-search",
+    "cq-selector": "cq-lookup-dialog",
+    "cq-method": "open",
+    comparison: "true",
+    delay: "true"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ciq-comparison-icon"
+  }), /*#__PURE__*/React.createElement("cq-tooltip", null, "Add Comparison")), /*#__PURE__*/React.createElement("cq-side-nav", {
     "cq-on": "sidenavOn"
@@ -59,3 +75,5 @@ }, /*#__PURE__*/React.createElement("div", {
     class: "ciq-DT tableview-ui",
-    "cq-member": "tableView"
+    "cq-member": "tableView",
+    role: "button",
+    "aria-pressed": "false"
   }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("cq-tooltip", null, "Table View")))), /*#__PURE__*/React.createElement("div", {
@@ -92,23 +110,3 @@ className: "ciq-menu-section"
     "cq-focus": "input"
-  }, /*#__PURE__*/React.createElement("span", null, "Studies"), /*#__PURE__*/React.createElement("cq-menu-dropdown", null, /*#__PURE__*/React.createElement("cq-study-legend", {
-    "cq-no-close": true
-  }, /*#__PURE__*/React.createElement("cq-section-dynamic", null, /*#__PURE__*/React.createElement("cq-heading", null, "Current Studies"), /*#__PURE__*/React.createElement("cq-study-legend-content", null, /*#__PURE__*/React.createElement("template", {
-    "cq-study-legend": "true"
-  }, /*#__PURE__*/React.createElement("cq-item", null, /*#__PURE__*/React.createElement("cq-label", {
-    class: "click-to-edit"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "ciq-icon ciq-close"
-  })))), /*#__PURE__*/React.createElement("cq-placeholder", null, /*#__PURE__*/React.createElement("div", {
-    stxtap: "Layout.clearStudies()",
-    className: "ciq-btn sm",
-    "keyboard-selectable": "true"
-  }, "Clear All")))), /*#__PURE__*/React.createElement("div", {
-    className: "scriptiq-ui"
-  }, /*#__PURE__*/React.createElement("cq-heading", null, "ScriptIQ"), /*#__PURE__*/React.createElement("cq-item", null, /*#__PURE__*/React.createElement("cq-clickable", {
-    "cq-selector": "cq-scriptiq-editor",
-    "cq-method": "open"
-  }, "New Script")), /*#__PURE__*/React.createElement("cq-scriptiq-menu", null), /*#__PURE__*/React.createElement("cq-separator", null)), /*#__PURE__*/React.createElement("cq-heading", {
-    "cq-filter": "",
-    "cq-filter-min": "-1"
-  }, "Studies"), /*#__PURE__*/React.createElement("cq-studies", null))), config && config.eventMarkersImplementation && /*#__PURE__*/React.createElement("cq-menu", {
+  }, /*#__PURE__*/React.createElement("span", null, "Studies"), /*#__PURE__*/React.createElement("cq-menu-dropdown", null, /*#__PURE__*/React.createElement("cq-study-menu-manager", null))), config && (config.eventMarkersImplementation || CIQ.SignalIQ || CIQ.UI.TimeSpanEvent) && /*#__PURE__*/React.createElement("cq-menu", {
     class: "ciq-menu stx-markers collapse"
@@ -129,34 +127,37 @@ }, /*#__PURE__*/React.createElement("span", null, "Events"), /*#__PURE__*/React.createElement("cq-menu-dropdown", null, /*#__PURE__*/React.createElement("div", {
     className: "ciq-icon ciq-close"
-  }))))), /*#__PURE__*/React.createElement("cq-separator", null))), /*#__PURE__*/React.createElement("cq-heading", null, "Chart Events"), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers('square')"
+  }))))), /*#__PURE__*/React.createElement("cq-separator", null))), config && config.eventMarkersImplementation && /*#__PURE__*/React.createElement("div", {
+    className: "markers-ui"
+  }, /*#__PURE__*/React.createElement("cq-heading", null, "Chart Events"), /*#__PURE__*/React.createElement("cq-item", {
+    stxtap: "Markers.showMarkers('square')",
+    "cq-no-close": true
   }, "Simple Square", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers('circle')"
+    stxtap: "Markers.showMarkers('circle')",
+    "cq-no-close": true
   }, "Simple Circle", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers('callout')"
+    stxtap: "Markers.showMarkers('callout')",
+    "cq-no-close": true
   }, "Callouts", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
     class: "ta_markers-ui",
-    stxtap: "Markers.showMarkers('trade')"
+    stxtap: "Markers.showMarkers('trade')",
+    "cq-no-close": true
   }, "Trade", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
     class: "video_markers-ui",
-    stxtap: "Markers.showMarkers('video')"
+    stxtap: "Markers.showMarkers('video')",
+    "cq-no-close": true
   }, "Video", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
+    className: "ciq-switch"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers('abstract')"
+    stxtap: "Markers.showMarkers('helicopter')",
+    "cq-no-close": true
   }, "Abstract", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
-  }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-separator", null), /*#__PURE__*/React.createElement("cq-item", {
-    stxtap: "Markers.showMarkers()",
-    class: "ciq-active"
-  }, "None", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-radio"
-  }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("div", {
+    className: "ciq-switch"
+  }, /*#__PURE__*/React.createElement("span", null)))), /*#__PURE__*/React.createElement("div", {
     className: "timespanevent-ui"
@@ -168,3 +169,3 @@ }, /*#__PURE__*/React.createElement("cq-separator", null), /*#__PURE__*/React.createElement("cq-heading", null, "Panel Events"), /*#__PURE__*/React.createElement("cq-item", {
   }, "Order", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-checkbox ciq-active"
+    className: "ciq-switch ciq-active"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
@@ -175,3 +176,3 @@ class: "span-event",
   }, "CEO", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-checkbox ciq-active"
+    className: "ciq-switch ciq-active"
   }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("cq-item", {
@@ -182,3 +183,3 @@ class: "span-event",
   }, "News", /*#__PURE__*/React.createElement("span", {
-    className: "ciq-checkbox ciq-active"
+    className: "ciq-switch ciq-active"
   }, /*#__PURE__*/React.createElement("span", null)))))), /*#__PURE__*/React.createElement("cq-menu", {
@@ -230,3 +231,4 @@ class: "ciq-menu ciq-preferences collapse"
   }), /*#__PURE__*/React.createElement("div", {
-    className: "ciq-chart-area"
+    className: "ciq-chart-area",
+    role: "main"
   }, /*#__PURE__*/React.createElement("div", {
@@ -255,13 +257,27 @@ className: "ciq-chart"
     className: "chartContainer"
-  }, /*#__PURE__*/React.createElement("stx-hu-tooltip", null, /*#__PURE__*/React.createElement("stx-hu-tooltip-field", {
-    field: "DT"
-  }, /*#__PURE__*/React.createElement("stx-hu-tooltip-field-name", null, "Date/Time"), /*#__PURE__*/React.createElement("stx-hu-tooltip-field-value", null)), /*#__PURE__*/React.createElement("stx-hu-tooltip-field", {
-    field: "Close"
-  }, /*#__PURE__*/React.createElement("stx-hu-tooltip-field-name", null), /*#__PURE__*/React.createElement("stx-hu-tooltip-field-value", null))), /*#__PURE__*/React.createElement("cq-chart-title", {
+  }, /*#__PURE__*/React.createElement("table", {
+    className: "hu-tooltip"
+  }, /*#__PURE__*/React.createElement("caption", null, "Tooltip"), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
+    "hu-tooltip-field": "",
+    className: "hu-tooltip-sr-only"
+  }, /*#__PURE__*/React.createElement("th", null, "Field"), /*#__PURE__*/React.createElement("th", null, "Value")), /*#__PURE__*/React.createElement("tr", {
+    "hu-tooltip-field": "DT"
+  }, /*#__PURE__*/React.createElement("td", {
+    className: "hu-tooltip-name"
+  }, "Date/Time"), /*#__PURE__*/React.createElement("td", {
+    className: "hu-tooltip-value"
+  })), /*#__PURE__*/React.createElement("tr", {
+    "hu-tooltip-field": "Close"
+  }, /*#__PURE__*/React.createElement("td", {
+    className: "hu-tooltip-name"
+  }), /*#__PURE__*/React.createElement("td", {
+    className: "hu-tooltip-value"
+  })))), /*#__PURE__*/React.createElement("cq-chart-title", {
     "cq-marker": true,
-    "cq-browser-tab": true
+    "cq-browser-tab": true,
+    "cq-activate-symbol-search-on-click": true
   }), /*#__PURE__*/React.createElement("cq-chartcontrol-group", {
     class: "full-screen-show",
     "cq-marker": true
-  }), /*#__PURE__*/React.createElement("cq-comparison-lookup", null), /*#__PURE__*/React.createElement("cq-chart-legend", null), /*#__PURE__*/React.createElement("cq-loader", null)))), /*#__PURE__*/React.createElement("cq-abstract-marker", {
+  }), /*#__PURE__*/React.createElement("cq-chart-legend", null), /*#__PURE__*/React.createElement("cq-loader", null)))), /*#__PURE__*/React.createElement("cq-abstract-marker", {
     "cq-type": "helicopter"
@@ -268,0 +284,0 @@ }), /*#__PURE__*/React.createElement("cq-attribution", null), /*#__PURE__*/React.createElement("div", {

CrossSection/Chart.js

@@ -17,2 +17,3 @@ import React from "react";
 export { CIQ };
+
 /**
@@ -25,3 +26,2 @@ * An example of a cross section chart for non time series data.
  */
-
 export default class TermStructure extends React.Component {
@@ -47,9 +47,7 @@ /**
     this.config = configObj;
-    this.state = {
-      stx: null,
-      UIContext: null
-    };
+    this.stx = null;
+    this.uiContext = null;
   }
-
   componentDidMount() {
+    if (this.init) return;
     const container = this.container.current;
@@ -63,12 +61,7 @@ const {
     window.setTimeout(() => {
-      const uiContext = new CIQ.UI.Chart().createChartAndUI({
+      const uiContext = this.uiContext = new CIQ.UI.Chart().createChartAndUI({
         container,
         config
       });
-      const chartEngine = uiContext.stx;
-      this.setState({
-        stx: chartEngine,
-        UIContext: uiContext
-      });
-
+      const chartEngine = this.stx = uiContext.stx;
       if (chartInitialized) {
@@ -81,16 +74,15 @@ chartInitialized({
     }, 0);
+    this.init = true;
+    this.rendered = false;
   }
-
   componentWillUnmount() {
     // Destroy the ChartEngine instance when unloading the component.
     // This will stop internal processes such as quotefeed polling.
-    const {
-      stx
-    } = this.state;
-    stx.destroy();
-
-    stx.draw = () => {};
+    if (!this.stx || !this.rendered) return;
+    this.stx.destroy();
+    this.stx.draw = () => {};
+    this.stx = null;
   }
-
   render() {
+    this.rendered = true;
     return /*#__PURE__*/React.createElement("cq-context", {
@@ -100,4 +92,4 @@ ref: this.container
   }
+}
 
-}
 /**
@@ -104,0 +96,0 @@ * @callback CrossSection~chartInitialized

CrossSection/ChartExample.js

 import React, { useState } from "react";
-import CrossSection, { CIQ } from "./Chart"; // Import sample shading or use your own
+import CrossSection, { CIQ } from "./Chart";
 
+// Import sample shading or use your own
 import "chartiq/plugins/crosssection/sample.css";
@@ -9,8 +10,7 @@ import PerfectScrollbar from "chartiq/js/thirdparty/perfect-scrollbar.esm.js";
 };
-
 function getExampleConfig() {
   return {};
-} // Callback function where you can access both the chartEngine and the UIContext.
+}
 
-
+// Callback function where you can access both the chartEngine and the UIContext.
 const chartInitialized = ({
@@ -26,3 +26,2 @@ chartEngine,
 };
-
 import "chartiq/examples/markets/marketDefinitionsSample";
@@ -39,3 +38,4 @@ import "chartiq/examples/markets/marketSymbologySample";
       config,
-      resources: { ...exampleResources,
+      resources: {
+        ...exampleResources,
         ...props.resources
@@ -42,0 +42,0 @@ }

CrossSection/resources.js

 import "chartiq/examples/feeds/symbolLookupChartIQ";
 import quoteFeed from "chartiq/examples/feeds/termstructureDataSimulator";
-import defaultConfig from "chartiq/js/defaultConfiguration"; // Creates a complete customised configuration object
+import defaultConfig from "chartiq/js/defaultConfiguration";
 
+// Creates a complete customised configuration object
 function getConfig(resources = {}) {
   if (!resources.quoteFeed && resources.quoteFeed !== null) resources.quoteFeed = quoteFeed;
   return defaultConfig(resources);
-} // Creates a complete customised configuration object
+}
 
-
+// Creates a complete customised configuration object
 function getCustomConfig({
@@ -66,7 +67,6 @@ chartId,
   }];
-
   config.plugins.crossSection.sortFunction = (l, r) => {
     let weight = ["DY", "WK", "MO", "YR", "ST", "MT", "LT"];
     let l1 = l.split(" "),
-        r1 = r.split(" ");
+      r1 = r.split(" ");
     let diff = weight.indexOf(l1[l1.length - 1]) - weight.indexOf(r1[r1.length - 1]);
@@ -80,7 +80,6 @@ if (diff) return diff > 0 ? 1 : -1;
   };
-
   const {
     crossSection
-  } = config.plugins; // Select only plugin configurations that needs to be active for this chart
-
+  } = config.plugins;
+  // Select only plugin configurations that needs to be active for this chart
   config.plugins = {
@@ -91,3 +90,2 @@ crossSection
 }
-
 export { getConfig, getCustomConfig };

package.json

 {
   "name": "@chartiq/react-components",
-  "version": "8.6.1",
+  "version": "8.8.0",
   "description": "React Components for ChartIQ library",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -22,3 +22,3 @@ # ChartIQ React Components
 
-This package simplifies ChartIQ library use in the React framework. It requires ChartIQ library v8.6.0 or later.
+This package simplifies ChartIQ library use in the React framework. It requires ChartIQ library v8.8.0 or later.
 
@@ -50,3 +50,3 @@ **If you do not have a copy of the library, please contact your account manager or send an email to <[e-mail]> or you may evaluate one from [here](https://cosaic.io/chartiq-sdk-library-download/).**
 ```js
-npm install chartiq-8.6.0.tgz // or whatever version you are using from your copy of the ChartIQ library!
+npm install ./chartiq-8.8.0.tgz // or whatever version you are using from your copy of the ChartIQ library!
 ```
@@ -229,2 +229,2 @@
 
-Additional documentation on web components in the ChartIQ library can be found at [documentation.chartiq.com](https://documentation.chartiq.com/tutorial-Web%20Component%20Interface.html).
+Additional documentation on web components in the ChartIQ library can be found at [documentation.chartiq.com](https://documentation.chartiq.com/tutorial-Web%20Component%20Interface.html).

src/ActiveTrader/resources.js

@@ -49,3 +49,3 @@ import 'chartiq/examples/feeds/symbolLookupChartIQ';
 
-	config.addOns.tableView.coverContainer = "#mainChartGroup .chartContainer";
+	config.addOns.tableView.coverContainer = ".ciq-chart-area";
 
@@ -52,0 +52,0 @@ return config;

src/ActiveTrader/Template.jsx

@@ -6,3 +6,5 @@ import React from "react";
 		<>
-			<div className='ciq-nav full-screen-hide'>
+			<cq-chart-instructions role='contentinfo'></cq-chart-instructions>
+
+			<div className='ciq-nav full-screen-hide' role='navigation'>
 				<div className='sidenav-toggle ciq-toggles'>
@@ -21,6 +23,19 @@ <cq-toggle
 
-				<cq-menu class='ciq-search'>
-					<cq-lookup cq-keystroke-claim cq-uppercase></cq-lookup>
-				</cq-menu>
+				<cq-clickable role="button" class="symbol-search" cq-selector="cq-lookup-dialog" cq-method="open" delay="true">
+					<span className="ciq-lookup-icon"></span>
+					<cq-tooltip>Symbol Search</cq-tooltip>
+				</cq-clickable>
 
+				<cq-clickable
+					role="button"
+					class="symbol-search"
+					cq-selector="cq-lookup-dialog"
+					cq-method="open"
+					comparison="true"
+					delay="true"
+				>
+					<span className="ciq-comparison-icon"></span>
+					<cq-tooltip>Add Comparison</cq-tooltip>
+				</cq-clickable>
+
 				<cq-side-nav cq-on='sidenavOn'>
@@ -83,3 +98,3 @@ <div className='icon-toggles ciq-toggles'>
 
-						<cq-toggle class='ciq-DT tableview-ui' cq-member='tableView'>
+						<cq-toggle class='ciq-DT tableview-ui' cq-member='tableView' role='button' aria-pressed='false'>
 							<span></span>
@@ -134,41 +149,3 @@ <cq-tooltip>Table View</cq-tooltip>
 							<cq-menu-dropdown>
-								<cq-study-legend cq-no-close>
-									<cq-section-dynamic>
-										<cq-heading>Current Studies</cq-heading>
-										<cq-study-legend-content>
-											<template cq-study-legend='true'>
-												<cq-item>
-													<cq-label class='click-to-edit'></cq-label>
-													<div className='ciq-icon ciq-close'></div>
-												</cq-item>
-											</template>
-										</cq-study-legend-content>
-										<cq-placeholder>
-											<div
-												stxtap='Layout.clearStudies()'
-												className='ciq-btn sm'
-												keyboard-selectable='true'
-											>
-												Clear All
-											</div>
-										</cq-placeholder>
-									</cq-section-dynamic>
-								</cq-study-legend>
-								<div className='scriptiq-ui'>
-									<cq-heading>ScriptIQ</cq-heading>
-									<cq-item>
-										<cq-clickable
-											cq-selector='cq-scriptiq-editor'
-											cq-method='open'
-										>
-											New Script
-										</cq-clickable>
-									</cq-item>
-									<cq-scriptiq-menu></cq-scriptiq-menu>
-									<cq-separator></cq-separator>
-								</div>
-								<cq-heading cq-filter='' cq-filter-min='-1'>
-									Studies
-								</cq-heading>
-								<cq-studies></cq-studies>
+								<cq-study-menu-manager></cq-study-menu-manager>
 							</cq-menu-dropdown>
@@ -180,46 +157,49 @@ </cq-menu>
 							<cq-menu-dropdown>
-								<cq-heading>Chart Events</cq-heading>
-								<cq-item stxtap="Markers.showMarkers('square')">
-									Simple Square
-									<span className='ciq-radio'>
-										<span></span>
-									</span>
-								</cq-item>
-								<cq-item stxtap="Markers.showMarkers('circle')">
-									Simple Circle
-									<span className='ciq-radio'>
-										<span></span>
-									</span>
-								</cq-item>
-								<cq-item stxtap="Markers.showMarkers('callout')">
-									Callouts
-									<span className='ciq-radio'>
-										<span></span>
-									</span>
-								</cq-item>
-								<cq-item
-									class='ta_markers-ui'
-									stxtap="Markers.showMarkers('trade')"
-								>
-									Trade
-									<span className='ciq-radio'>
-										<span></span>
-									</span>
-								</cq-item>
-								<cq-item
-									class='video_markers-ui'
-									stxtap="Markers.showMarkers('video')"
-								>
-									Video
-									<span className='ciq-radio'>
-										<span></span>
-									</span>
-								</cq-item>
-								<cq-separator></cq-separator>
-								<cq-item stxtap='Markers.showMarkers()' class='ciq-active'>
-									None
-									<span className='ciq-radio'>
-										<span></span>
-									</span>
-								</cq-item>
+								<div className="markers-ui">
+									<cq-heading>Chart Events</cq-heading>
+									<cq-item stxtap="Markers.showMarkers('square')" cq-no-close>
+										Simple Square
+										<span className='ciq-switch'>
+											<span></span>
+										</span>
+									</cq-item>
+									<cq-item stxtap="Markers.showMarkers('circle')" cq-no-close>
+										Simple Circle
+										<span className='ciq-switch'>
+											<span></span>
+										</span>
+									</cq-item>
+									<cq-item stxtap="Markers.showMarkers('callout')" cq-no-close>
+										Callouts
+										<span className='ciq-switch'>
+											<span></span>
+										</span>
+									</cq-item>
+									<cq-item
+										class='ta_markers-ui'
+										stxtap="Markers.showMarkers('trade')"
+										cq-no-close
+									>
+										Trade
+										<span className='ciq-switch'>
+											<span></span>
+										</span>
+									</cq-item>
+									<cq-item
+										class='video_markers-ui'
+										stxtap="Markers.showMarkers('video')"
+										cq-no-close
+									>
+										Video
+										<span className='ciq-switch'>
+											<span></span>
+										</span>
+									</cq-item>
+									<cq-item stxtap="Markers.showMarkers('helicopter')" cq-no-close>
+										Abstract
+										<span className='ciq-switch'>
+											<span></span>
+										</span>
+									</cq-item>
+								</div>
 								<div className='timespanevent-ui'>
@@ -234,3 +214,3 @@ <cq-separator></cq-separator>
 										Order
-										<span className='ciq-checkbox ciq-active'>
+										<span className='ciq-switch ciq-active'>
 											<span></span>
@@ -245,3 +225,3 @@ </span>
 										CEO
-										<span className='ciq-checkbox ciq-active'>
+										<span className='ciq-switch ciq-active'>
 											<span></span>
@@ -256,3 +236,3 @@ </span>
 										News
-										<span className='ciq-checkbox ciq-active'>
+										<span className='ciq-switch ciq-active'>
 											<span></span>
@@ -341,3 +321,3 @@ </span>
 
-			<div className='ciq-chart-area'>
+			<div className='ciq-chart-area' role='main'>
 				<div chartarea='true'>
@@ -424,5 +404,4 @@ <div id='flexContainer'>
 								<div className='chartContainer'>
-									<cq-chart-title cq-marker cq-browser-tab></cq-chart-title>
+									<cq-chart-title cq-marker cq-browser-tab cq-activate-symbol-search-on-click></cq-chart-title>
 
-									<cq-comparison-lookup></cq-comparison-lookup>
 									<cq-chart-legend></cq-chart-legend>
@@ -436,2 +415,4 @@ </div>
 
+			<cq-abstract-marker cq-type='helicopter'></cq-abstract-marker>
+
 			<cq-attribution></cq-attribution>
@@ -438,0 +419,0 @@

src/ActiveTrader/Workstation.jsx

 import React from "react";
+import "chartiq/js/standard";
 import { CIQ } from "chartiq/js/components";
@@ -53,6 +54,7 @@
 		this.stx = null;
-		this.UIContext = null;
+		this.uiContext = null;
 	}
 
 	componentDidMount() {
+		if (this.init) return;
 		const container = this.container.current;
@@ -62,3 +64,3 @@ const { chartInitialized } = this.props;
 
-		const uiContext = (this.UIContext = new CIQ.UI.Chart().createChartAndUI({
+		const uiContext = (this.uiContext = new CIQ.UI.Chart().createChartAndUI({
 			container,
@@ -69,9 +71,9 @@ config
 
-		this.cryptoSetup(uiContext.stx);
+		this.cryptoSetup(this.stx);
 
 		if (window["d3"]) {
-			this.setUpMoneyFlowChart(uiContext.stx);
+			this.setUpMoneyFlowChart(this.stx);
 		} else {
 			CIQ.loadScript("https://d3js.org/d3.v5.min.js", () => {
-				this.setUpMoneyFlowChart(uiContext.stx);
+				this.setUpMoneyFlowChart(this.stx);
 			});
@@ -81,3 +83,3 @@ }
 		// Request TFC channel open
-		channelWrite(config.channels.tfc, true, uiContext.stx);
+		channelWrite(config.channels.tfc, true, this.stx);
 
@@ -87,2 +89,5 @@ if (chartInitialized) {
 		}
+		this.init = true;
+		this.rendered = false;
+		this.setState({ mounted: true });
 	}
@@ -93,5 +98,11 @@
 		// This will stop internal processes such as quotefeed polling.
-		this.stx.moneyFlowChart.destroy();
+		// this.rendered ensures it is not test only unmount call
+		if (!this.stx || !this.rendered) return;
+
+		if (this.stx.moneyFlowChart) {
+			this.stx.moneyFlowChart.destroy();
+		}
 		this.stx.destroy();
 		this.stx.draw = () => {};
+		this.stx = null;
 	}
@@ -165,2 +176,3 @@
 	render() {
+		this.rendered = true;
 		let chartTemplate = <ChartTemplate config={this.config} />;
@@ -177,1 +189,11 @@ if (this.props.children) chartTemplate = this.props.children;
  */
+
+// Adjustments to compensate for when webpack config is not available
+(function initDynamicShare() { // Decorate the library function to avoid copying html2canvas.min.js to distribution to js/thirdparty directory
+	const fullChart2PNG = CIQ.Share.fullChart2PNG;
+	CIQ.Share.fullChart2PNG = function (stx, params, cb) {
+		import("chartiq/js/thirdparty/html2canvas.min.js").then(() => {
+			fullChart2PNG(stx, params, cb);
+		});
+	}
+})();

src/ActiveTrader/WorkstationExample.jsx

@@ -18,3 +18,3 @@ import React, { useState } from "react";
 const exampleResources = {
-	markerSample: marker.MarkersSample,
+	markerFeed: marker.MarkersSample,
 	quoteFeed: quoteFeedSimulator,
@@ -62,1 +62,10 @@ scrollStyle: PerfectScrollbar
 }
+
+// Adjustments to compensate for when webpack config is not available
+(function processCss() { // webpack processing can introduce extra 2 spaces for each translation line remove them here
+	if (!CIQ.I18N.csv) return;
+	const lines = CIQ.I18N.csv.split("\n");
+	const translationHasExtraSpace = lines[1][0] === ' ';
+	if (!translationHasExtraSpace) return;
+	CIQ.I18N.csv = lines.map((line, i) => (i ? line.slice(2) : line)).join('\n')
+})();

src/Chart/AdvancedExample.jsx

@@ -34,3 +34,6 @@ import React, { useState } from "react";
 import "chartiq/plugins/signaliq/signaliq-marker";
+import "chartiq/plugins/signaliq/signaliq-paintbar";
 
+// import "chartiq/plugins/studybrowser";
+
 // Trading Central: Technical Insights
@@ -71,4 +74,6 @@ // import "chartiq/plugins/technicalinsights/components";
 			chartInitialized={props.chartInitialized}
-		/>
+		>
+		{props.children}
+	</Chart>
 	);
 }

src/Chart/ChartExample.jsx

@@ -6,2 +6,4 @@ import React, { useState } from "react";
 import PerfectScrollbar from "chartiq/js/thirdparty/perfect-scrollbar.esm.js";
+import EmojiPopover from "chartiq/js/thirdparty/emoji-popover.es.js";
+
 import marker from "chartiq/examples/markers/markersSample";
@@ -22,4 +24,5 @@
 	quoteFeed: quoteFeedSimulator,
-	markerSample: marker.MarkersSample,
-	scrollStyle: PerfectScrollbar // use improved component scrollbar appearance https://perfectscrollbar.com
+	markerFeed: marker.MarkersSample,
+	scrollStyle: PerfectScrollbar, // use improved component scrollbar appearance https://perfectscrollbar.com
+	emojiPicker: EmojiPopover
 };
@@ -66,2 +69,3 @@
 // import "chartiq/plugins/signaliq/signaliq-marker";
+// import "chartiq/plugins/signaliq/signaliq-paintbar";
 
@@ -105,4 +109,16 @@ // Trading Central: Technical Insights
 			chartInitialized={initialized}
-		/>
+		>
+			{props.children}
+		</Chart>
 	);
 }
+
+
+// Adjustments to compensate for when webpack config is not available
+(function processCss() { // webpack processing can introduce extra 2 spaces for each translation line remove them here
+	if (!CIQ.I18N.csv) return;
+	const lines = CIQ.I18N.csv.split("\n");
+	const translationHasExtraSpace = lines[1][0] === ' ';
+	if (!translationHasExtraSpace) return;
+	CIQ.I18N.csv = lines.map((line, i) => (i ? line.slice(2) : line)).join('\n')
+})();

src/Chart/Core.jsx

@@ -45,9 +45,8 @@ import React from "react";
 
-		this.state = {
-			stx: null,
-			UIContext: null
-		};
+		this.stx = null;
+		this.uiContext = null;
 	}
 
 	componentDidMount() {
+		if (this.init) return;
 		const container = this.container.current;
@@ -61,4 +60,4 @@ const { chartInitialized } = this.props;
 		window.setTimeout(() => {
-			const uiContext = this.createChartAndUI({ container, config });
-			const chartEngine = uiContext.stx;
+			const uiContext = this.uiContext = this.createChartAndUI({ container, config });
+			const chartEngine = this.stx = uiContext.stx;
 
@@ -71,2 +70,4 @@ this.setState({ stx: chartEngine, UIContext: uiContext });
 		}, 0);
+		this.init = true;
+		this.rendered = false;
 	}
@@ -77,5 +78,6 @@
 		// This will stop internal processes such as quotefeed polling.
-		const { stx } = this.state;
-		stx.destroy();
-		stx.draw = () => {};
+		if (!this.stx || !this.rendered) return;
+
+		this.stx.destroy();
+		this.stx.draw = () => {};
 	}
@@ -88,5 +90,18 @@
 	render() {
+		this.rendered = true;
+		const {
+			props: { children },
+			config
+		} = this;
+
+		let template = <ChartTemplate config={config} />;
+		const childrenCount = React.Children.count(children);
+		if (childrenCount === 1) {
+			template = React.cloneElement(children, { config });
+		} else if (childrenCount > 1) {
+			template = children;
+		}
 		return (
 			<cq-context ref={this.container}>
-				{this.props.children || <ChartTemplate config={this.config} />}
+				{template}
 			</cq-context>
@@ -123,1 +138,12 @@ );
  */
+
+// Adjustments to compensate for when webpack config is not available
+(function initDynamicShare() {
+	// Decorate the library function to avoid copying html2canvas.min.js to distribution to js/thirdparty directory
+	const fullChart2PNG = CIQ.Share.fullChart2PNG;
+	CIQ.Share.fullChart2PNG = function (stx, params, cb) {
+		import("chartiq/js/thirdparty/html2canvas.min.js").then(() => {
+			fullChart2PNG(stx, params, cb);
+		});
+	};
+})();

src/Chart/Template.jsx

@@ -0,1 +1,2 @@
+import { CIQ } from "chartiq";
 import React from "react";
@@ -6,3 +7,5 @@
 		<>
-			<div className='ciq-nav full-screen-hide'>
+			<cq-chart-instructions role='contentinfo'></cq-chart-instructions>
+
+			<div className='ciq-nav full-screen-hide' role='navigation'>
 				<div className='sidenav-toggle ciq-toggles'>
@@ -20,6 +23,19 @@ <cq-toggle
 
-				<cq-menu class='ciq-search'>
-					<cq-lookup cq-keystroke-claim cq-uppercase></cq-lookup>
-				</cq-menu>
+				<cq-clickable role="button" class="symbol-search" cq-selector="cq-lookup-dialog" cq-method="open" delay="true">
+				<span className="ciq-lookup-icon"></span>
+					<cq-tooltip>Symbol Search</cq-tooltip>
+				</cq-clickable>
 
+				<cq-clickable
+					role="button"
+					class="symbol-search"
+					cq-selector="cq-lookup-dialog"
+					cq-method="open"
+					comparison="true"
+					delay="true"
+				>
+					<span className="ciq-comparison-icon"></span>
+					<cq-tooltip>Add Comparison</cq-tooltip>
+				</cq-clickable>
+
 				<cq-side-nav cq-on='sidenavOn'>
@@ -82,3 +98,3 @@ <div className='icon-toggles ciq-toggles'>
 
-						<cq-toggle class='ciq-DT tableview-ui' cq-member='tableView'>
+						<cq-toggle class='ciq-DT tableview-ui' cq-member='tableView' role='button' aria-pressed='false'>
 							<span></span>
@@ -133,45 +149,7 @@ <cq-tooltip>Table View</cq-tooltip>
 							<cq-menu-dropdown>
-								<cq-study-legend cq-no-close>
-									<cq-section-dynamic>
-										<cq-heading>Current Studies</cq-heading>
-										<cq-study-legend-content>
-											<template cq-study-legend='true'>
-												<cq-item>
-													<cq-label class='click-to-edit'></cq-label>
-													<div className='ciq-icon ciq-close'></div>
-												</cq-item>
-											</template>
-										</cq-study-legend-content>
-										<cq-placeholder>
-											<div
-												stxtap='Layout.clearStudies()'
-												className='ciq-btn sm'
-												keyboard-selectable='true'
-											>
-												Clear All
-											</div>
-										</cq-placeholder>
-									</cq-section-dynamic>
-								</cq-study-legend>
-								<div className='scriptiq-ui'>
-									<cq-heading>ScriptIQ</cq-heading>
-									<cq-item>
-										<cq-clickable
-											cq-selector='cq-scriptiq-editor'
-											cq-method='open'
-										>
-											New Script
-										</cq-clickable>
-									</cq-item>
-									<cq-scriptiq-menu></cq-scriptiq-menu>
-									<cq-separator></cq-separator>
-								</div>
-								<cq-heading cq-filter='' cq-filter-min='-1'>
-									Studies
-								</cq-heading>
-								<cq-studies></cq-studies>
+								<cq-study-menu-manager></cq-study-menu-manager>
 							</cq-menu-dropdown>
 						</cq-menu>
 
-						{config && config.eventMarkersImplementation && (
+						{config && (config.eventMarkersImplementation || CIQ.SignalIQ || CIQ.UI.TimeSpanEvent) && (
 							<cq-menu class='ciq-menu stx-markers collapse'>
@@ -205,52 +183,51 @@ <span>Events</span>
 									</div>
-									<cq-heading>Chart Events</cq-heading>
-									<cq-item stxtap="Markers.showMarkers('square')">
-										Simple Square
-										<span className='ciq-radio'>
-											<span></span>
-										</span>
-									</cq-item>
-									<cq-item stxtap="Markers.showMarkers('circle')">
-										Simple Circle
-										<span className='ciq-radio'>
-											<span></span>
-										</span>
-									</cq-item>
-									<cq-item stxtap="Markers.showMarkers('callout')">
-										Callouts
-										<span className='ciq-radio'>
-											<span></span>
-										</span>
-									</cq-item>
-									<cq-item
-										class='ta_markers-ui'
-										stxtap="Markers.showMarkers('trade')"
-									>
-										Trade
-										<span className='ciq-radio'>
-											<span></span>
-										</span>
-									</cq-item>
-									<cq-item
-										class='video_markers-ui'
-										stxtap="Markers.showMarkers('video')"
-									>
-										Video
-										<span className='ciq-radio'>
-											<span></span>
-										</span>
-									</cq-item>
-									<cq-item stxtap="Markers.showMarkers('abstract')">
-										Abstract
-										<span className='ciq-radio'>
-											<span></span>
-										</span>
-									</cq-item>
-									<cq-separator></cq-separator>
-									<cq-item stxtap='Markers.showMarkers()' class='ciq-active'>
-										None
-										<span className='ciq-radio'>
-											<span></span>
-										</span>
-									</cq-item>
+									{config && config.eventMarkersImplementation &&  (
+										<div className="markers-ui">
+											<cq-heading>Chart Events</cq-heading>
+											<cq-item stxtap="Markers.showMarkers('square')" cq-no-close>
+												Simple Square
+												<span className='ciq-switch'>
+													<span></span>
+												</span>
+											</cq-item>
+											<cq-item stxtap="Markers.showMarkers('circle')" cq-no-close>
+												Simple Circle
+												<span className='ciq-switch'>
+													<span></span>
+												</span>
+											</cq-item>
+											<cq-item stxtap="Markers.showMarkers('callout')" cq-no-close>
+												Callouts
+												<span className='ciq-switch'>
+													<span></span>
+												</span>
+											</cq-item>
+											<cq-item
+												class='ta_markers-ui'
+												stxtap="Markers.showMarkers('trade')"
+												cq-no-close
+											>
+												Trade
+												<span className='ciq-switch'>
+													<span></span>
+												</span>
+											</cq-item>
+											<cq-item
+												class='video_markers-ui'
+												stxtap="Markers.showMarkers('video')"
+												cq-no-close
+											>
+												Video
+												<span className='ciq-switch'>
+													<span></span>
+												</span>
+											</cq-item>
+											<cq-item stxtap="Markers.showMarkers('helicopter')" cq-no-close>
+												Abstract
+												<span className='ciq-switch'>
+													<span></span>
+												</span>
+											</cq-item>
+										</div>
+									)}
 									<div className='timespanevent-ui'>
@@ -265,3 +242,3 @@ <cq-separator></cq-separator>
 											Order
-											<span className='ciq-checkbox ciq-active'>
+											<span className='ciq-switch ciq-active'>
 												<span></span>
@@ -276,3 +253,3 @@ </span>
 											CEO
-											<span className='ciq-checkbox ciq-active'>
+											<span className='ciq-switch ciq-active'>
 												<span></span>
@@ -287,3 +264,3 @@ </span>
 											News
-											<span className='ciq-checkbox ciq-active'>
+											<span className='ciq-switch ciq-active'>
 												<span></span>
@@ -373,3 +350,3 @@ </span>
 
-			<div className='ciq-chart-area'>
+			<div className='ciq-chart-area' role='main'>
 				<div className='ciq-chart'>
@@ -403,14 +380,21 @@ <cq-message-toaster
 					<div className='chartContainer'>
-						<stx-hu-tooltip>
-							<stx-hu-tooltip-field field='DT'>
-								<stx-hu-tooltip-field-name>Date/Time</stx-hu-tooltip-field-name>
-								<stx-hu-tooltip-field-value></stx-hu-tooltip-field-value>
-							</stx-hu-tooltip-field>
-							<stx-hu-tooltip-field field='Close'>
-								<stx-hu-tooltip-field-name></stx-hu-tooltip-field-name>
-								<stx-hu-tooltip-field-value></stx-hu-tooltip-field-value>
-							</stx-hu-tooltip-field>
-						</stx-hu-tooltip>
+						<table className="hu-tooltip">
+							<caption>Tooltip</caption>
+							<tbody>
+							<tr hu-tooltip-field="" className="hu-tooltip-sr-only">
+								<th>Field</th>
+								<th>Value</th>
+							</tr>
+							<tr hu-tooltip-field="DT">
+								<td className="hu-tooltip-name">Date/Time</td>
+								<td className="hu-tooltip-value"></td>
+							</tr>
+							<tr hu-tooltip-field="Close">
+								<td className="hu-tooltip-name"></td>
+								<td className="hu-tooltip-value"></td>
+							</tr>
+							</tbody>
+						</table>
 
-						<cq-chart-title cq-marker cq-browser-tab></cq-chart-title>
+						<cq-chart-title cq-marker cq-browser-tab cq-activate-symbol-search-on-click></cq-chart-title>
 
@@ -422,4 +406,2 @@ <cq-chartcontrol-group
 
-						<cq-comparison-lookup></cq-comparison-lookup>
-
 						<cq-chart-legend></cq-chart-legend>
@@ -426,0 +408,0 @@

src/CrossSection/Chart.jsx

@@ -47,9 +47,8 @@ import React from "react";
 
-		this.state = {
-			stx: null,
-			UIContext: null
-		};
+		this.stx = null;
+		this.uiContext = null;
 	}
 
 	componentDidMount() {
+		if (this.init) return;
 		const container = this.container.current;
@@ -60,10 +59,8 @@ const { chartInitialized } = this.props;
 		window.setTimeout(() => {
-			const uiContext = new CIQ.UI.Chart().createChartAndUI({
+			const uiContext = this.uiContext = new CIQ.UI.Chart().createChartAndUI({
 				container,
 				config
 			});
-			const chartEngine = uiContext.stx;
+			const chartEngine = this.stx = uiContext.stx;
 
-			this.setState({ stx: chartEngine, UIContext: uiContext });
-
 			if (chartInitialized) {
@@ -73,2 +70,4 @@ chartInitialized({ chartEngine, uiContext });
 		}, 0);
+		this.init = true;
+		this.rendered = false;
 	}
@@ -79,8 +78,11 @@
 		// This will stop internal processes such as quotefeed polling.
-		const { stx } = this.state;
-		stx.destroy();
-		stx.draw = () => {};
+		if (!this.stx || !this.rendered) return;
+
+		this.stx.destroy();
+		this.stx.draw = () => {};
+		this.stx = null;
 	}
 
 	render() {
+		this.rendered = true;
 		return (
@@ -87,0 +89,0 @@ <cq-context ref={this.container}>

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

153365

increased by2.84%

Lines of code

3728

increased by4.46%

Number of lines in readme file

228

increased by0.44%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes