@oanda/labs-crowd-view-widget 1.0.54 → 1.0.55

package/CHANGELOG.md

@@ -3,6 +3,230 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.55 (2025-12-09)
+
+
+
+## 1.0.236 (2025-12-05)
+
+
+
+## 1.0.235 (2025-12-04)
+
+
+
+## 1.0.234 (2025-11-27)
+
+
+
+## 1.0.233 (2025-11-27)
+
+
+
+## 1.0.232 (2025-11-27)
+
+
+
+## 1.0.231 (2025-11-07)
+
+
+
+## 1.0.230 (2025-11-05)
+
+
+
+## 1.0.229 (2025-11-05)
+
+
+
+## 1.0.228 (2025-11-05)
+
+
+
+## 1.0.227 (2025-10-31)
+
+
+
+## 1.0.226 (2025-10-29)
+
+
+
+## 1.0.225 (2025-10-09)
+
+
+
+## 1.0.224 (2025-09-29)
+
+
+
+## 1.0.223 (2025-09-29)
+
+
+
+## 1.0.222 (2025-09-17)
+
+
+
+## 1.0.221 (2025-09-11)
+
+
+
+## 1.0.220 (2025-09-09)
+
+
+
+## 1.0.219 (2025-09-02)
+
+
+
+## 1.0.218 (2025-09-01)
+
+
+
+## 1.0.217 (2025-08-25)
+
+
+
+## 1.0.216 (2025-08-18)
+
+
+
+## 1.0.215 (2025-08-18)
+
+
+
+## 1.0.214 (2025-08-14)
+
+
+
+## 1.0.213 (2025-08-12)
+
+
+
+## 1.0.212 (2025-08-05)
+
+
+
+## 1.0.211 (2025-08-05)
+
+
+
+## 1.0.210 (2025-07-31)
+
+
+
+## 1.0.209 (2025-07-31)
+
+
+
+## 1.0.208 (2025-07-24)
+
+
+
+## 1.0.207 (2025-07-18)
+
+
+
+## 1.0.206 (2025-07-18)
+
+
+
+## 1.0.205 (2025-07-17)
+
+
+
+## 1.0.204 (2025-07-09)
+
+
+
+## 1.0.203 (2025-06-16)
+
+
+
+## 1.0.202 (2025-06-04)
+
+
+
+## 1.0.201 (2025-06-02)
+
+
+
+## 1.0.200 (2025-05-30)
+
+
+
+## 1.0.199 (2025-05-29)
+
+
+
+## 1.0.198 (2025-05-26)
+
+
+
+## 1.0.197 (2025-05-23)
+
+
+
+## 1.0.196 (2025-05-22)
+
+
+
+## 1.0.195 (2025-05-21)
+
+
+
+## 1.0.194 (2025-05-21)
+
+
+
+## 1.0.193 (2025-05-15)
+
+
+
+## 1.0.192 (2025-05-14)
+
+
+
+## 1.0.191 (2025-04-30)
+
+
+
+## 1.0.190 (2025-04-28)
+
+
+
+## 1.0.189 (2025-04-23)
+
+
+
+## 1.0.188 (2025-04-22)
+
+
+
+## 1.0.187 (2025-04-18)
+
+
+
+## 1.0.186 (2025-04-10)
+
+
+
+## 1.0.185 (2025-04-09)
+
+
+
+## 1.0.184 (2025-04-08)
+
+
+
+## 1.0.183 (2025-04-04)
+
+**Note:** Version bump only for package @oanda/labs-crowd-view-widget
+
+
+
+
+
 ## 1.0.54 (2025-12-05)
 
 

package/dist/main/CrowdViewWidget/components/Chart/Chart.js

@@ -10,11 +10,11 @@ var _charts = require("echarts/charts");
 var _components = require("echarts/components");
 var echarts = _interopRequireWildcard(require("echarts/core"));
 var _renderers = require("echarts/renderers");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _usehooksTs = require("usehooks-ts");
 var _constants = require("../../constants");
 var _chartUtils = require("./chartUtils");
 var _getOption = require("./getOption");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 echarts.use([_components.GridSimpleComponent, _components.GraphicComponent, _renderers.CanvasRenderer, _components.DataZoomInsideComponent, _charts.CustomChart, _components.TooltipComponent, _charts.CandlestickChart, _components.MarkLineComponent, _charts.LineChart, _components.VisualMapComponent, _components.DatasetComponent]);
 echarts.registerTheme('dark_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Dark));
@@ -23,7 +23,8 @@ const Chart = _ref => {
   let {
     mainData,
     additionalData,
-    isDesktop
+    isDesktop,
+    isLoading
   } = _ref;
   const {
     isDark
@@ -31,68 +32,48 @@ const Chart = _ref => {
   const {
     lang
   } = (0, _monoI18n.useLocale)();
+  const canHover = (0, _usehooksTs.useMediaQuery)('(hover: hover)');
+  const labelTimerRef = (0, _react.useRef)(null);
+  const isGreaterThanTwoWeeksRef = (0, _react.useRef)(null);
+  const zoomTimerRef = (0, _react.useRef)(null);
+  const tooltipVisibleRef = (0, _react.useRef)(true);
+  const initialIsGreaterThanTwoWeeks = (0, _react.useMemo)(() => {
+    const {
+      dates
+    } = mainData;
+    const initialStartZoom = isDesktop ? _constants.CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP : _constants.CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;
+    const visibleXAxisData = dates.slice(dates.length * initialStartZoom / 100, dates.length * _constants.CHART_CONFIG.INITIAL_END_ZOOM / 100);
+    if (visibleXAxisData.length === 0) {
+      return false;
+    }
+    return (0, _chartUtils.isDifferenceGreaterThanTwoWeeks)(visibleXAxisData[0], visibleXAxisData[visibleXAxisData.length - 1]);
+  }, [mainData, isDesktop]);
+  (0, _react.useEffect)(() => {
+    isGreaterThanTwoWeeksRef.current = initialIsGreaterThanTwoWeeks;
+  }, [initialIsGreaterThanTwoWeeks]);
+  const chartOption = (0, _react.useMemo)(() => (0, _getOption.getOption)({
+    mainData,
+    additionalData,
+    isDark,
+    isDesktop,
+    isLoading,
+    labelCallback: lang
+  }), [mainData, additionalData, isDark, isDesktop, isLoading, lang]);
+  const handleDataZoom = (0, _react.useCallback)((_params, instance) => {
+    (0, _chartUtils.handleTooltipUpdate)(instance, zoomTimerRef, tooltipVisibleRef, canHover);
+    (0, _chartUtils.handleLabelUpdate)(instance, mainData, labelTimerRef, isGreaterThanTwoWeeksRef);
+  }, [mainData, canHover]);
   return _react.default.createElement(_labsWidgetCommon.BaseChart, {
     chartHeight: _constants.CHART_CONFIG.HEIGHT,
     echarts: echarts,
     isDark: isDark,
     lazyUpdate: true,
-    option: (0, _getOption.getOption)({
-      mainData,
-      additionalData,
-      isDark,
-      isDesktop,
-      labelCallback: lang
-    }),
+    option: chartOption,
     opts: {
       renderer: 'canvas'
     },
     onEvents: {
-      datazoom: (params, instance) => {
-        var _params$batch, _;
-        if (!((_params$batch = params.batch) !== null && _params$batch !== void 0 && _params$batch[0])) {
-          return;
-        }
-        const {
-          dates
-        } = mainData;
-        const {
-          dataZoom,
-          xAxis
-        } = instance.getOption();
-        if (!Array.isArray(dataZoom) || dataZoom.length === 0 || !dataZoom[0] || typeof dataZoom[0].startValue !== 'number' || typeof dataZoom[0].endValue !== 'number') {
-          return;
-        }
-        const {
-          startValue,
-          endValue
-        } = dataZoom[0];
-        if (!dates[startValue] || !dates[endValue]) {
-          return;
-        }
-        const isGreaterThanTwoWeeks = (0, _chartUtils.isDifferenceGreaterThanTwoWeeks)(dates[startValue], dates[endValue]);
-        const wasGreaterThanTwoWeeks = Array.isArray(xAxis) && xAxis.length > 0 && ((_ = xAxis[0]) === null || _ === void 0 ? void 0 : _.name) === 'xAxis-greater-than-two-weeks';
-        if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {
-          const labelsData = (0, _chartUtils.getLabelData)({
-            dates,
-            isGreaterThanTwoWeeks
-          });
-          instance.setOption({
-            xAxis: {
-              id: 'main-xAxis',
-              name: isGreaterThanTwoWeeks ? 'xAxis-greater-than-two-weeks' : 'xAxis-less-than-two-weeks',
-              axisLabel: {
-                formatter: value => (0, _chartUtils.formatXAxisLabel)(value, isGreaterThanTwoWeeks)
-              }
-            },
-            series: [{
-              id: 'candlestick',
-              markPoint: {
-                data: labelsData
-              }
-            }]
-          });
-        }
-      }
+      datazoom: handleDataZoom
     }
   });
 };

package/dist/main/CrowdViewWidget/components/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_monoI18n","_charts","_components","echarts","_interopRequireWildcard","_renderers","_react","_interopRequireDefault","_constants","_chartUtils","_getOption","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","use","GridSimpleComponent","GraphicComponent","CanvasRenderer","DataZoomInsideComponent","CustomChart","TooltipComponent","CandlestickChart","MarkLineComponent","LineChart","VisualMapComponent","DatasetComponent","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","mainData","additionalData","isDesktop","isDark","useLayoutProvider","lang","useLocale","createElement","BaseChart","chartHeight","CHART_CONFIG","HEIGHT","lazyUpdate","option","getOption","labelCallback","opts","renderer","onEvents","datazoom","params","instance","_params$batch","_","batch","dates","dataZoom","xAxis","Array","isArray","length","startValue","endValue","isGreaterThanTwoWeeks","isDifferenceGreaterThanTwoWeeks","wasGreaterThanTwoWeeks","name","labelsData","getLabelData","setOption","id","axisLabel","formatter","value","formatXAxisLabel","series","markPoint","data","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport type { EChartsType } from 'echarts';\nimport { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkLineComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React from 'react';\n\nimport { CHART_CONFIG } from '../../constants';\nimport {\n  formatXAxisLabel,\n  getLabelData,\n  isDifferenceGreaterThanTwoWeeks,\n} from './chartUtils';\nimport { getOption } from './getOption';\nimport type {\n  ChartProps,\n  DataZoomArray,\n  DataZoomEvent,\n  XAxisArray,\n} from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkLineComponent,\n  LineChart,\n  VisualMapComponent,\n  DatasetComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n  const { lang } = useLocale();\n\n  return (\n    <BaseChart\n      chartHeight={CHART_CONFIG.HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={getOption({\n        mainData,\n        additionalData,\n        isDark,\n        isDesktop,\n        labelCallback: lang,\n      })}\n      opts={{ renderer: 'canvas' }}\n      onEvents={{\n        datazoom: (params: DataZoomEvent, instance: EChartsType) => {\n          if (!params.batch?.[0]) {\n            return;\n          }\n\n          const { dates } = mainData;\n\n          const { dataZoom, xAxis } = instance.getOption();\n          if (\n            !Array.isArray(dataZoom) ||\n            dataZoom.length === 0 ||\n            !dataZoom[0] ||\n            typeof dataZoom[0].startValue !== 'number' ||\n            typeof dataZoom[0].endValue !== 'number'\n          ) {\n            return;\n          }\n\n          const { startValue, endValue } = dataZoom[0] as DataZoomArray[0];\n\n          if (!dates[startValue] || !dates[endValue]) {\n            return;\n          }\n\n          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n            dates[startValue],\n            dates[endValue]\n          );\n\n          const wasGreaterThanTwoWeeks =\n            Array.isArray(xAxis) &&\n            xAxis.length > 0 &&\n            (xAxis as XAxisArray)[0]?.name === 'xAxis-greater-than-two-weeks';\n\n          if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {\n            const labelsData = getLabelData({\n              dates,\n              isGreaterThanTwoWeeks,\n            });\n\n            instance.setOption({\n              xAxis: {\n                id: 'main-xAxis',\n                name: isGreaterThanTwoWeeks\n                  ? 'xAxis-greater-than-two-weeks'\n                  : 'xAxis-less-than-two-weeks',\n                axisLabel: {\n                  formatter: (value: string) =>\n                    formatXAxisLabel(value, isGreaterThanTwoWeeks),\n                },\n              },\n              series: [\n                {\n                  id: 'candlestick',\n                  markPoint: {\n                    data: labelsData,\n                  },\n                },\n              ],\n            });\n          }\n        },\n      }}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_monoI18n","_charts","_components","echarts","_interopRequireWildcard","_renderers","_react","_usehooksTs","_constants","_chartUtils","_getOption","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","use","GridSimpleComponent","GraphicComponent","CanvasRenderer","DataZoomInsideComponent","CustomChart","TooltipComponent","CandlestickChart","MarkLineComponent","LineChart","VisualMapComponent","DatasetComponent","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","mainData","additionalData","isDesktop","isLoading","isDark","useLayoutProvider","lang","useLocale","canHover","useMediaQuery","labelTimerRef","useRef","isGreaterThanTwoWeeksRef","zoomTimerRef","tooltipVisibleRef","initialIsGreaterThanTwoWeeks","useMemo","dates","initialStartZoom","CHART_CONFIG","INITIAL_START_ZOOM_DESKTOP","INITIAL_START_ZOOM_MOBILE","visibleXAxisData","slice","length","INITIAL_END_ZOOM","isDifferenceGreaterThanTwoWeeks","useEffect","current","chartOption","getOption","labelCallback","handleDataZoom","useCallback","_params","instance","handleTooltipUpdate","handleLabelUpdate","createElement","BaseChart","chartHeight","HEIGHT","lazyUpdate","option","opts","renderer","onEvents","datazoom","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport type { EChartsType } from 'echarts';\nimport { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkLineComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useMediaQuery } from 'usehooks-ts';\n\nimport { CHART_CONFIG } from '../../constants';\nimport {\n  handleLabelUpdate,\n  handleTooltipUpdate,\n  isDifferenceGreaterThanTwoWeeks,\n} from './chartUtils';\nimport { getOption } from './getOption';\nimport type { ChartProps, DataZoomEvent } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkLineComponent,\n  LineChart,\n  VisualMapComponent,\n  DatasetComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({\n  mainData,\n  additionalData,\n  isDesktop,\n  isLoading,\n}: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n  const { lang } = useLocale();\n  const canHover = useMediaQuery('(hover: hover)');\n  const labelTimerRef = useRef<NodeJS.Timeout | null>(null);\n  const isGreaterThanTwoWeeksRef = useRef<boolean | null>(null);\n  const zoomTimerRef = useRef<NodeJS.Timeout | null>(null);\n  const tooltipVisibleRef = useRef<boolean>(true);\n\n  const initialIsGreaterThanTwoWeeks = useMemo(() => {\n    const { dates } = mainData;\n    const initialStartZoom = isDesktop\n      ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP\n      : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;\n\n    const visibleXAxisData = dates.slice(\n      (dates.length * initialStartZoom) / 100,\n      (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100\n    );\n\n    if (visibleXAxisData.length === 0) {\n      return false;\n    }\n\n    return isDifferenceGreaterThanTwoWeeks(\n      visibleXAxisData[0],\n      visibleXAxisData[visibleXAxisData.length - 1]\n    );\n  }, [mainData, isDesktop]);\n\n  useEffect(() => {\n    isGreaterThanTwoWeeksRef.current = initialIsGreaterThanTwoWeeks;\n  }, [initialIsGreaterThanTwoWeeks]);\n\n  const chartOption = useMemo(\n    () =>\n      getOption({\n        mainData,\n        additionalData,\n        isDark,\n        isDesktop,\n        isLoading,\n        labelCallback: lang,\n      }),\n    [mainData, additionalData, isDark, isDesktop, isLoading, lang]\n  );\n\n  // Memoize event handler to prevent unnecessary re-renders\n  const handleDataZoom = useCallback(\n    (_params: DataZoomEvent, instance: EChartsType) => {\n      handleTooltipUpdate(instance, zoomTimerRef, tooltipVisibleRef, canHover);\n      handleLabelUpdate(\n        instance,\n        mainData,\n        labelTimerRef,\n        isGreaterThanTwoWeeksRef\n      );\n    },\n    [mainData, canHover]\n  );\n\n  return (\n    <BaseChart\n      chartHeight={CHART_CONFIG.HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={chartOption}\n      opts={{ renderer: 'canvas' }}\n      onEvents={{\n        datazoom: handleDataZoom,\n      }}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/ChartWithData.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartWithData = void 0;
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _usehooksTs = require("usehooks-ts");
 var _Chart = require("./Chart");
 var _useCrowdViewData = require("./useCrowdViewData");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ChartWithData = _ref => {
   let {
     instrument,
@@ -19,11 +20,13 @@ const ChartWithData = _ref => {
   const {
     size
   } = (0, _labsWidgetCommon.useLayoutProvider)();
+  const [debouncedLoading, setDebouncedLoading] = (0, _react.useState)(true);
   const isDesktop = size === _labsWidgetCommon.Size.DESKTOP;
   const {
     mainData,
     additionalData,
     loading,
+    priceCandlesLoading,
     error
   } = (0, _useCrowdViewData.useCrowdViewData)({
     instrument,
@@ -31,20 +34,30 @@ const ChartWithData = _ref => {
     division,
     granularity
   });
+  const hideLoading = (0, _usehooksTs.useDebounceCallback)(() => setDebouncedLoading(false), 500);
+  (0, _react.useEffect)(() => {
+    if (loading === false) {
+      hideLoading();
+    }
+    if (loading === true) {
+      setDebouncedLoading(true);
+    }
+  }, [loading, hideLoading]);
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
     className: "lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden"
   }, error && _react.default.createElement("div", {
     className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary"
-  }, _react.default.createElement(_labsWidgetCommon.ChartError, null)), loading && _react.default.createElement("div", {
-    className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary"
-  }, _react.default.createElement(_labsWidgetCommon.Spinner, {
-    size: _labsWidgetCommon.SpinnerSize.lg
-  })), !loading && !error && !!mainData && !!additionalData && _react.default.createElement("div", {
+  }, _react.default.createElement(_labsWidgetCommon.ChartError, null)), !priceCandlesLoading && !error && !!mainData && !!additionalData && _react.default.createElement("div", {
     className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
   }, _react.default.createElement(_Chart.Chart, {
     additionalData: additionalData,
     isDesktop: isDesktop,
+    isLoading: debouncedLoading,
     mainData: mainData
+  })), loading && _react.default.createElement("div", {
+    className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary lw-bg-bg-transparent-50"
+  }, _react.default.createElement(_labsWidgetCommon.Spinner, {
+    size: _labsWidgetCommon.SpinnerSize.lg
   }))));
 };
 exports.ChartWithData = ChartWithData;

package/dist/main/CrowdViewWidget/components/Chart/ChartWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["_labsWidgetCommon","require","_react","_interopRequireDefault","_Chart","_useCrowdViewData","e","__esModule","default","ChartWithData","_ref","instrument","bookType","division","granularity","size","useLayoutProvider","isDesktop","Size","DESKTOP","mainData","additionalData","loading","error","useCrowdViewData","createElement","Fragment","className","ChartError","Spinner","SpinnerSize","lg","Chart","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import {\n  ChartError,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport React from 'react';\n\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { useCrowdViewData } from './useCrowdViewData';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n  division,\n  granularity,\n}: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const { mainData, additionalData, loading, error } = useCrowdViewData({\n    instrument,\n    bookType,\n    division,\n    granularity,\n  });\n\n  return (\n    <>\n      <div className=\"lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden\">\n        {error && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {!loading && !error && !!mainData && !!additionalData && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart\n              additionalData={additionalData}\n              isDesktop={isDesktop}\n              mainData={mainData}\n            />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAOA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,iBAAA,GAAAJ,OAAA;AAAsD,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtD,MAAMG,aAAa,GAAGC,IAAA,IAKI;EAAA,IALH;IACrBC,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACkB,CAAC,GAAAJ,IAAA;EACnB,MAAM;IAAEK;EAAK,CAAC,GAAG,IAAAC,mCAAiB,EAAC,CAAC;EACpC,MAAMC,SAAS,GAAGF,IAAI,KAAKG,sBAAI,CAACC,OAAO;EAEvC,MAAM;IAAEC,QAAQ;IAAEC,cAAc;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAG,IAAAC,kCAAgB,EAAC;IACpEb,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,OACEZ,MAAA,CAAAM,OAAA,CAAAiB,aAAA,CAAAvB,MAAA,CAAAM,OAAA,CAAAkB,QAAA,QACExB,MAAA,CAAAM,OAAA,CAAAiB,aAAA;IAAKE,SAAS,EAAC;EAAuD,GACnEJ,KAAK,IACJrB,MAAA,CAAAM,OAAA,CAAAiB,aAAA;IAAKE,SAAS,EAAC;EAAiJ,GAC9JzB,MAAA,CAAAM,OAAA,CAAAiB,aAAA,CAACzB,iBAAA,CAAA4B,UAAU,MAAE,CACV,CACN,EACAN,OAAO,IACNpB,MAAA,CAAAM,OAAA,CAAAiB,aAAA;IAAKE,SAAS,EAAC;EAAiJ,GAC9JzB,MAAA,CAAAM,OAAA,CAAAiB,aAAA,CAACzB,iBAAA,CAAA6B,OAAO;IAACd,IAAI,EAAEe,6BAAW,CAACC;EAAG,CAAE,CAC7B,CACN,EACA,CAACT,OAAO,IAAI,CAACC,KAAK,IAAI,CAAC,CAACH,QAAQ,IAAI,CAAC,CAACC,cAAc,IACnDnB,MAAA,CAAAM,OAAA,CAAAiB,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEzB,MAAA,CAAAM,OAAA,CAAAiB,aAAA,CAACrB,MAAA,CAAA4B,KAAK;IACJX,cAAc,EAAEA,cAAe;IAC/BJ,SAAS,EAAEA,SAAU;IACrBG,QAAQ,EAAEA;EAAS,CACpB,CACE,CAEJ,CACL,CAAC;AAEP,CAAC;AAACa,OAAA,CAAAxB,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"file":"ChartWithData.js","names":["_labsWidgetCommon","require","_react","_interopRequireWildcard","_usehooksTs","_Chart","_useCrowdViewData","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChartWithData","_ref","instrument","bookType","division","granularity","size","useLayoutProvider","debouncedLoading","setDebouncedLoading","useState","isDesktop","Size","DESKTOP","mainData","additionalData","loading","priceCandlesLoading","error","useCrowdViewData","hideLoading","useDebounceCallback","useEffect","createElement","Fragment","className","ChartError","Chart","isLoading","Spinner","SpinnerSize","lg","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import {\n  ChartError,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport React, { useEffect, useState } from 'react';\nimport { useDebounceCallback } from 'usehooks-ts';\n\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { useCrowdViewData } from './useCrowdViewData';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n  division,\n  granularity,\n}: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const [debouncedLoading, setDebouncedLoading] = useState(true);\n  const isDesktop = size === Size.DESKTOP;\n\n  const { mainData, additionalData, loading, priceCandlesLoading, error } =\n    useCrowdViewData({\n      instrument,\n      bookType,\n      division,\n      granularity,\n    });\n\n  const hideLoading = useDebounceCallback(\n    () => setDebouncedLoading(false),\n    500\n  );\n\n  useEffect(() => {\n    if (loading === false) {\n      hideLoading();\n    }\n    if (loading === true) {\n      setDebouncedLoading(true);\n    }\n  }, [loading, hideLoading]);\n\n  return (\n    <>\n      <div className=\"lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden\">\n        {error && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        )}\n        {!priceCandlesLoading && !error && !!mainData && !!additionalData && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart\n              additionalData={additionalData}\n              isDesktop={isDesktop}\n              isLoading={debouncedLoading}\n              mainData={mainData}\n            />\n          </div>\n        )}\n        {loading && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary lw-bg-bg-transparent-50\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getDataZoomConfig.js

@@ -5,14 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDataZoomConfig = void 0;
 var _constants = require("../../../constants");
-const getDataZoomConfig = () => ({
-  type: 'inside',
-  id: 'main',
-  xAxisIndex: [0, 1],
-  start: _constants.CHART_CONFIG.INITIAL_START_ZOOM,
-  end: _constants.CHART_CONFIG.INITIAL_END_ZOOM,
-  filterMode: 'filter',
-  minSpan: 10
-});
+const getDataZoomConfig = _ref => {
+  let {
+    isDesktop
+  } = _ref;
+  return {
+    type: 'inside',
+    id: 'main',
+    xAxisIndex: [0, 1],
+    start: isDesktop ? _constants.CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP : _constants.CHART_CONFIG.INITIAL_START_ZOOM_MOBILE,
+    end: _constants.CHART_CONFIG.INITIAL_END_ZOOM,
+    filterMode: 'filter',
+    minSpan: 10,
+    preventDefaultMouseMove: true
+  };
+};
 exports.getDataZoomConfig = getDataZoomConfig;
 //# sourceMappingURL=getDataZoomConfig.js.map

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getDataZoomConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getDataZoomConfig.js","names":["_constants","require","getDataZoomConfig","type","id","xAxisIndex","start","CHART_CONFIG","INITIAL_START_ZOOM","end","INITIAL_END_ZOOM","filterMode","minSpan","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getDataZoomConfig.ts"],"sourcesContent":["import type { DataZoomComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\nexport const getDataZoomConfig = (): DataZoomComponentOption => ({\n  type: 'inside',\n  id: 'main',\n  xAxisIndex: [0, 1],\n  start: CHART_CONFIG.INITIAL_START_ZOOM,\n  end: CHART_CONFIG.INITIAL_END_ZOOM,\n  filterMode: 'filter',\n  minSpan: 10,\n});\n"],"mappings":";;;;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAEO,MAAMC,iBAAiB,GAAGA,CAAA,MAAgC;EAC/DC,IAAI,EAAE,QAAQ;EACdC,EAAE,EAAE,MAAM;EACVC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EAClBC,KAAK,EAAEC,uBAAY,CAACC,kBAAkB;EACtCC,GAAG,EAAEF,uBAAY,CAACG,gBAAgB;EAClCC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE;AACX,CAAC,CAAC;AAACC,OAAA,CAAAX,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"file":"getDataZoomConfig.js","names":["_constants","require","getDataZoomConfig","_ref","isDesktop","type","id","xAxisIndex","start","CHART_CONFIG","INITIAL_START_ZOOM_DESKTOP","INITIAL_START_ZOOM_MOBILE","end","INITIAL_END_ZOOM","filterMode","minSpan","preventDefaultMouseMove","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getDataZoomConfig.ts"],"sourcesContent":["import type { DataZoomComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetDataZoomConfigParams {\n  isDesktop: boolean;\n}\n\nexport const getDataZoomConfig = ({\n  isDesktop,\n}: GetDataZoomConfigParams): DataZoomComponentOption => ({\n  type: 'inside',\n  id: 'main',\n  xAxisIndex: [0, 1],\n  start: isDesktop\n    ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP\n    : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE,\n  end: CHART_CONFIG.INITIAL_END_ZOOM,\n  filterMode: 'filter',\n  minSpan: 10,\n  preventDefaultMouseMove: true,\n});\n"],"mappings":";;;;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAMO,MAAMC,iBAAiB,GAAGC,IAAA;EAAA,IAAC;IAChCC;EACuB,CAAC,GAAAD,IAAA;EAAA,OAA+B;IACvDE,IAAI,EAAE,QAAQ;IACdC,EAAE,EAAE,MAAM;IACVC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClBC,KAAK,EAAEJ,SAAS,GACZK,uBAAY,CAACC,0BAA0B,GACvCD,uBAAY,CAACE,yBAAyB;IAC1CC,GAAG,EAAEH,uBAAY,CAACI,gBAAgB;IAClCC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,EAAE;IACXC,uBAAuB,EAAE;EAC3B,CAAC;AAAA,CAAC;AAACC,OAAA,CAAAf,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.js

@@ -12,18 +12,18 @@ const getGridConfig = _ref => {
   return [{
     id: 'main-grid',
     name: 'main-grid',
-    left: "".concat(_constants.CHART_CONFIG.Y_SENTIMENT_LABEL_SIZE, "px"),
+    left: "".concat(isDesktop ? _constants.CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : _constants.CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE, "px"),
     right: "".concat(isDesktop ? _constants.CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : _constants.CHART_CONFIG.Y_LABEL_SIZE_MOBILE, "px"),
-    top: '0px',
+    top: "".concat(isDesktop ? _constants.CHART_CONFIG.TOP_MARGIN_DESKTOP : _constants.CHART_CONFIG.TOP_MARGIN_MOBILE, "px"),
     bottom: "".concat(_constants.CHART_CONFIG.X_LABEL_SIZE, "px"),
-    height: "".concat(_constants.CHART_CONFIG.MAIN_HEIGHT, "px")
+    height: "".concat(isDesktop ? _constants.CHART_CONFIG.MAIN_HEIGHT - _constants.CHART_CONFIG.TOP_MARGIN_DESKTOP : _constants.CHART_CONFIG.MAIN_HEIGHT - _constants.CHART_CONFIG.TOP_MARGIN_MOBILE, "px")
   }, {
     id: 'sentiment-grid',
     name: 'sentiment-grid',
-    left: "".concat(_constants.CHART_CONFIG.Y_SENTIMENT_LABEL_SIZE, "px"),
+    left: "".concat(isDesktop ? _constants.CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : _constants.CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE, "px"),
     right: "".concat(isDesktop ? _constants.CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : _constants.CHART_CONFIG.Y_LABEL_SIZE_MOBILE, "px"),
-    top: "0px",
-    height: "".concat(_constants.CHART_CONFIG.MAIN_HEIGHT, "px")
+    top: "".concat(isDesktop ? _constants.CHART_CONFIG.TOP_MARGIN_DESKTOP : _constants.CHART_CONFIG.TOP_MARGIN_MOBILE, "px"),
+    height: "".concat(isDesktop ? _constants.CHART_CONFIG.MAIN_HEIGHT - _constants.CHART_CONFIG.TOP_MARGIN_DESKTOP : _constants.CHART_CONFIG.MAIN_HEIGHT - _constants.CHART_CONFIG.TOP_MARGIN_MOBILE, "px")
   }];
 };
 exports.getGridConfig = getGridConfig;

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getGridConfig.js","names":["_constants","require","getGridConfig","_ref","isDesktop","id","name","left","concat","CHART_CONFIG","Y_SENTIMENT_LABEL_SIZE","right","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","top","bottom","X_LABEL_SIZE","height","MAIN_HEIGHT","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.ts"],"sourcesContent":["import type { GridComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetGridConfigParams {\n  isDesktop: boolean;\n}\n\nexport const getGridConfig = ({\n  isDesktop,\n}: GetGridConfigParams): GridComponentOption[] => [\n  {\n    id: 'main-grid',\n    name: 'main-grid',\n    left: `${CHART_CONFIG.Y_SENTIMENT_LABEL_SIZE}px`,\n    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,\n    top: '0px',\n    bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,\n    height: `${CHART_CONFIG.MAIN_HEIGHT}px`,\n  },\n  {\n    id: 'sentiment-grid',\n    name: 'sentiment-grid',\n    left: `${CHART_CONFIG.Y_SENTIMENT_LABEL_SIZE}px`,\n    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,\n    top: `0px`,\n    height: `${CHART_CONFIG.MAIN_HEIGHT}px`,\n  },\n];\n"],"mappings":";;;;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAMO,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;IAC5BC;EACmB,CAAC,GAAAD,IAAA;EAAA,OAA4B,CAChD;IACEE,EAAE,EAAE,WAAW;IACfC,IAAI,EAAE,WAAW;IACjBC,IAAI,KAAAC,MAAA,CAAKC,uBAAY,CAACC,sBAAsB,OAAI;IAChDC,KAAK,KAAAH,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACG,oBAAoB,GAAGH,uBAAY,CAACI,mBAAmB,OAAI;IAC9FC,GAAG,EAAE,KAAK;IACVC,MAAM,KAAAP,MAAA,CAAKC,uBAAY,CAACO,YAAY,OAAI;IACxCC,MAAM,KAAAT,MAAA,CAAKC,uBAAY,CAACS,WAAW;EACrC,CAAC,EACD;IACEb,EAAE,EAAE,gBAAgB;IACpBC,IAAI,EAAE,gBAAgB;IACtBC,IAAI,KAAAC,MAAA,CAAKC,uBAAY,CAACC,sBAAsB,OAAI;IAChDC,KAAK,KAAAH,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACG,oBAAoB,GAAGH,uBAAY,CAACI,mBAAmB,OAAI;IAC9FC,GAAG,OAAO;IACVG,MAAM,KAAAT,MAAA,CAAKC,uBAAY,CAACS,WAAW;EACrC,CAAC,CACF;AAAA;AAACC,OAAA,CAAAjB,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"file":"getGridConfig.js","names":["_constants","require","getGridConfig","_ref","isDesktop","id","name","left","concat","CHART_CONFIG","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","right","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","top","TOP_MARGIN_DESKTOP","TOP_MARGIN_MOBILE","bottom","X_LABEL_SIZE","height","MAIN_HEIGHT","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.ts"],"sourcesContent":["import type { GridComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetGridConfigParams {\n  isDesktop: boolean;\n}\n\nexport const getGridConfig = ({\n  isDesktop,\n}: GetGridConfigParams): GridComponentOption[] => [\n  {\n    id: 'main-grid',\n    name: 'main-grid',\n    left: `${isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,\n    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,\n    top: `${isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE}px`,\n    bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,\n    height: `${isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE}px`,\n  },\n  {\n    id: 'sentiment-grid',\n    name: 'sentiment-grid',\n    left: `${isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,\n    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,\n    top: `${isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE}px`,\n    height: `${isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE}px`,\n  },\n];\n"],"mappings":";;;;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAMO,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;IAC5BC;EACmB,CAAC,GAAAD,IAAA;EAAA,OAA4B,CAChD;IACEE,EAAE,EAAE,WAAW;IACfC,IAAI,EAAE,WAAW;IACjBC,IAAI,KAAAC,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACC,8BAA8B,GAAGD,uBAAY,CAACE,6BAA6B,OAAI;IACjHC,KAAK,KAAAJ,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACI,oBAAoB,GAAGJ,uBAAY,CAACK,mBAAmB,OAAI;IAC9FC,GAAG,KAAAP,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACO,kBAAkB,GAAGP,uBAAY,CAACQ,iBAAiB,OAAI;IACxFC,MAAM,KAAAV,MAAA,CAAKC,uBAAY,CAACU,YAAY,OAAI;IACxCC,MAAM,KAAAZ,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACY,WAAW,GAAGZ,uBAAY,CAACO,kBAAkB,GAAGP,uBAAY,CAACY,WAAW,GAAGZ,uBAAY,CAACQ,iBAAiB;EAC/I,CAAC,EACD;IACEZ,EAAE,EAAE,gBAAgB;IACpBC,IAAI,EAAE,gBAAgB;IACtBC,IAAI,KAAAC,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACC,8BAA8B,GAAGD,uBAAY,CAACE,6BAA6B,OAAI;IACjHC,KAAK,KAAAJ,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACI,oBAAoB,GAAGJ,uBAAY,CAACK,mBAAmB,OAAI;IAC9FC,GAAG,KAAAP,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACO,kBAAkB,GAAGP,uBAAY,CAACQ,iBAAiB,OAAI;IACxFG,MAAM,KAAAZ,MAAA,CAAKJ,SAAS,GAAGK,uBAAY,CAACY,WAAW,GAAGZ,uBAAY,CAACO,kBAAkB,GAAGP,uBAAY,CAACY,WAAW,GAAGZ,uBAAY,CAACQ,iBAAiB;EAC/I,CAAC,CACF;AAAA;AAACK,OAAA,CAAApB,aAAA,GAAAA,aAAA","ignoreList":[]}