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

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

@@ -4,9 +4,10 @@ import { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';
 import { DatasetComponent, DataZoomInsideComponent, GraphicComponent, GridSimpleComponent, MarkLineComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useMediaQuery } from 'usehooks-ts';
 import { CHART_CONFIG } from '../../constants';
-import { formatXAxisLabel, getLabelData, isDifferenceGreaterThanTwoWeeks } from './chartUtils';
+import { handleLabelUpdate, handleTooltipUpdate, isDifferenceGreaterThanTwoWeeks } from './chartUtils';
 import { getOption } from './getOption';
 echarts.use([GridSimpleComponent, GraphicComponent, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkLineComponent, LineChart, VisualMapComponent, DatasetComponent]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
@@ -15,7 +16,8 @@ const Chart = _ref => {
   let {
     mainData,
     additionalData,
-    isDesktop
+    isDesktop,
+    isLoading
   } = _ref;
   const {
     isDark
@@ -23,68 +25,48 @@ const Chart = _ref => {
   const {
     lang
   } = useLocale();
+  const canHover = useMediaQuery('(hover: hover)');
+  const labelTimerRef = useRef(null);
+  const isGreaterThanTwoWeeksRef = useRef(null);
+  const zoomTimerRef = useRef(null);
+  const tooltipVisibleRef = useRef(true);
+  const initialIsGreaterThanTwoWeeks = useMemo(() => {
+    const {
+      dates
+    } = mainData;
+    const initialStartZoom = isDesktop ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;
+    const visibleXAxisData = dates.slice(dates.length * initialStartZoom / 100, dates.length * CHART_CONFIG.INITIAL_END_ZOOM / 100);
+    if (visibleXAxisData.length === 0) {
+      return false;
+    }
+    return isDifferenceGreaterThanTwoWeeks(visibleXAxisData[0], visibleXAxisData[visibleXAxisData.length - 1]);
+  }, [mainData, isDesktop]);
+  useEffect(() => {
+    isGreaterThanTwoWeeksRef.current = initialIsGreaterThanTwoWeeks;
+  }, [initialIsGreaterThanTwoWeeks]);
+  const chartOption = useMemo(() => getOption({
+    mainData,
+    additionalData,
+    isDark,
+    isDesktop,
+    isLoading,
+    labelCallback: lang
+  }), [mainData, additionalData, isDark, isDesktop, isLoading, lang]);
+  const handleDataZoom = useCallback((_params, instance) => {
+    handleTooltipUpdate(instance, zoomTimerRef, tooltipVisibleRef, canHover);
+    handleLabelUpdate(instance, mainData, labelTimerRef, isGreaterThanTwoWeeksRef);
+  }, [mainData, canHover]);
   return React.createElement(BaseChart, {
     chartHeight: CHART_CONFIG.HEIGHT,
     echarts: echarts,
     isDark: isDark,
     lazyUpdate: true,
-    option: 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 = 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 = getLabelData({
-            dates,
-            isGreaterThanTwoWeeks
-          });
-          instance.setOption({
-            xAxis: {
-              id: 'main-xAxis',
-              name: isGreaterThanTwoWeeks ? 'xAxis-greater-than-two-weeks' : 'xAxis-less-than-two-weeks',
-              axisLabel: {
-                formatter: value => formatXAxisLabel(value, isGreaterThanTwoWeeks)
-              }
-            },
-            series: [{
-              id: 'candlestick',
-              markPoint: {
-                data: labelsData
-              }
-            }]
-          });
-        }
-      }
+      datazoom: handleDataZoom
     }
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","CandlestickChart","CustomChart","LineChart","DatasetComponent","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkLineComponent","TooltipComponent","VisualMapComponent","echarts","CanvasRenderer","React","CHART_CONFIG","formatXAxisLabel","getLabelData","isDifferenceGreaterThanTwoWeeks","getOption","use","registerTheme","Dark","Light","Chart","_ref","mainData","additionalData","isDesktop","isDark","lang","createElement","chartHeight","HEIGHT","lazyUpdate","option","labelCallback","opts","renderer","onEvents","datazoom","params","instance","_params$batch","_","batch","dates","dataZoom","xAxis","Array","isArray","length","startValue","endValue","isGreaterThanTwoWeeks","wasGreaterThanTwoWeeks","name","labelsData","setOption","id","axisLabel","formatter","value","series","markPoint","data"],"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":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","CandlestickChart","CustomChart","LineChart","DatasetComponent","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkLineComponent","TooltipComponent","VisualMapComponent","echarts","CanvasRenderer","React","useCallback","useEffect","useMemo","useRef","useMediaQuery","CHART_CONFIG","handleLabelUpdate","handleTooltipUpdate","isDifferenceGreaterThanTwoWeeks","getOption","use","registerTheme","Dark","Light","Chart","_ref","mainData","additionalData","isDesktop","isLoading","isDark","lang","canHover","labelTimerRef","isGreaterThanTwoWeeksRef","zoomTimerRef","tooltipVisibleRef","initialIsGreaterThanTwoWeeks","dates","initialStartZoom","INITIAL_START_ZOOM_DESKTOP","INITIAL_START_ZOOM_MOBILE","visibleXAxisData","slice","length","INITIAL_END_ZOOM","current","chartOption","labelCallback","handleDataZoom","_params","instance","createElement","chartHeight","HEIGHT","lazyUpdate","option","opts","renderer","onEvents","datazoom"],"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/module/CrowdViewWidget/components/Chart/ChartWithData.js

@@ -1,5 +1,6 @@
 import { ChartError, Size, Spinner, SpinnerSize, useLayoutProvider } from '@oanda/labs-widget-common';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDebounceCallback } from 'usehooks-ts';
 import { Chart } from './Chart';
 import { useCrowdViewData } from './useCrowdViewData';
 const ChartWithData = _ref => {
@@ -12,11 +13,13 @@ const ChartWithData = _ref => {
   const {
     size
   } = useLayoutProvider();
+  const [debouncedLoading, setDebouncedLoading] = useState(true);
   const isDesktop = size === Size.DESKTOP;
   const {
     mainData,
     additionalData,
     loading,
+    priceCandlesLoading,
     error
   } = useCrowdViewData({
     instrument,
@@ -24,20 +27,30 @@ const ChartWithData = _ref => {
     division,
     granularity
   });
+  const hideLoading = useDebounceCallback(() => setDebouncedLoading(false), 500);
+  useEffect(() => {
+    if (loading === false) {
+      hideLoading();
+    }
+    if (loading === true) {
+      setDebouncedLoading(true);
+    }
+  }, [loading, hideLoading]);
   return React.createElement(React.Fragment, null, React.createElement("div", {
     className: "lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden"
   }, error && React.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.createElement(ChartError, null)), loading && React.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.createElement(Spinner, {
-    size: SpinnerSize.lg
-  })), !loading && !error && !!mainData && !!additionalData && React.createElement("div", {
+  }, React.createElement(ChartError, null)), !priceCandlesLoading && !error && !!mainData && !!additionalData && React.createElement("div", {
     className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
   }, React.createElement(Chart, {
     additionalData: additionalData,
     isDesktop: isDesktop,
+    isLoading: debouncedLoading,
     mainData: mainData
+  })), loading && React.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.createElement(Spinner, {
+    size: SpinnerSize.lg
   }))));
 };
 export { ChartWithData };

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

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","React","Chart","useCrowdViewData","ChartWithData","_ref","instrument","bookType","division","granularity","size","isDesktop","DESKTOP","mainData","additionalData","loading","error","createElement","Fragment","className","lg"],"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,SACEA,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,WAAW,EACXC,iBAAiB,QACZ,2BAA2B;AAClC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,MAAMC,aAAa,GAAGC,IAAA,IAKI;EAAA,IALH;IACrBC,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACkB,CAAC,GAAAJ,IAAA;EACnB,MAAM;IAAEK;EAAK,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACpC,MAAMW,SAAS,GAAGD,IAAI,KAAKb,IAAI,CAACe,OAAO;EAEvC,MAAM;IAAEC,QAAQ;IAAEC,cAAc;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGb,gBAAgB,CAAC;IACpEG,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,OACER,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAiB,QAAA,QACEjB,KAAA,CAAAgB,aAAA;IAAKE,SAAS,EAAC;EAAuD,GACnEH,KAAK,IACJf,KAAA,CAAAgB,aAAA;IAAKE,SAAS,EAAC;EAAiJ,GAC9JlB,KAAA,CAAAgB,aAAA,CAACrB,UAAU,MAAE,CACV,CACN,EACAmB,OAAO,IACNd,KAAA,CAAAgB,aAAA;IAAKE,SAAS,EAAC;EAAiJ,GAC9JlB,KAAA,CAAAgB,aAAA,CAACnB,OAAO;IAACY,IAAI,EAAEX,WAAW,CAACqB;EAAG,CAAE,CAC7B,CACN,EACA,CAACL,OAAO,IAAI,CAACC,KAAK,IAAI,CAAC,CAACH,QAAQ,IAAI,CAAC,CAACC,cAAc,IACnDb,KAAA,CAAAgB,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzElB,KAAA,CAAAgB,aAAA,CAACf,KAAK;IACJY,cAAc,EAAEA,cAAe;IAC/BH,SAAS,EAAEA,SAAU;IACrBE,QAAQ,EAAEA;EAAS,CACpB,CACE,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAAST,aAAa","ignoreList":[]}
+{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","React","useEffect","useState","useDebounceCallback","Chart","useCrowdViewData","ChartWithData","_ref","instrument","bookType","division","granularity","size","debouncedLoading","setDebouncedLoading","isDesktop","DESKTOP","mainData","additionalData","loading","priceCandlesLoading","error","hideLoading","createElement","Fragment","className","isLoading","lg"],"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":"AAAA,SACEA,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,WAAW,EACXC,iBAAiB,QACZ,2BAA2B;AAClC,OAAOC,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,mBAAmB,QAAQ,aAAa;AAEjD,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,MAAMC,aAAa,GAAGC,IAAA,IAKI;EAAA,IALH;IACrBC,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACkB,CAAC,GAAAJ,IAAA;EACnB,MAAM;IAAEK;EAAK,CAAC,GAAGb,iBAAiB,CAAC,CAAC;EACpC,MAAM,CAACc,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGZ,QAAQ,CAAC,IAAI,CAAC;EAC9D,MAAMa,SAAS,GAAGH,IAAI,KAAKhB,IAAI,CAACoB,OAAO;EAEvC,MAAM;IAAEC,QAAQ;IAAEC,cAAc;IAAEC,OAAO;IAAEC,mBAAmB;IAAEC;EAAM,CAAC,GACrEhB,gBAAgB,CAAC;IACfG,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,CAAC;EAEJ,MAAMW,WAAW,GAAGnB,mBAAmB,CACrC,MAAMW,mBAAmB,CAAC,KAAK,CAAC,EAChC,GACF,CAAC;EAEDb,SAAS,CAAC,MAAM;IACd,IAAIkB,OAAO,KAAK,KAAK,EAAE;MACrBG,WAAW,CAAC,CAAC;IACf;IACA,IAAIH,OAAO,KAAK,IAAI,EAAE;MACpBL,mBAAmB,CAAC,IAAI,CAAC;IAC3B;EACF,CAAC,EAAE,CAACK,OAAO,EAAEG,WAAW,CAAC,CAAC;EAE1B,OACEtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACExB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAuD,GACnEJ,KAAK,IACJrB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAiJ,GAC9JzB,KAAA,CAAAuB,aAAA,CAAC5B,UAAU,MAAE,CACV,CACN,EACA,CAACyB,mBAAmB,IAAI,CAACC,KAAK,IAAI,CAAC,CAACJ,QAAQ,IAAI,CAAC,CAACC,cAAc,IAC/DlB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEzB,KAAA,CAAAuB,aAAA,CAACnB,KAAK;IACJc,cAAc,EAAEA,cAAe;IAC/BH,SAAS,EAAEA,SAAU;IACrBW,SAAS,EAAEb,gBAAiB;IAC5BI,QAAQ,EAAEA;EAAS,CACpB,CACE,CACN,EACAE,OAAO,IACNnB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAyK,GACtLzB,KAAA,CAAAuB,aAAA,CAAC1B,OAAO;IAACe,IAAI,EAAEd,WAAW,CAAC6B;EAAG,CAAE,CAC7B,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASrB,aAAa","ignoreList":[]}

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

@@ -1,11 +1,17 @@
 import { CHART_CONFIG } from '../../../constants';
-export const getDataZoomConfig = () => ({
-  type: 'inside',
-  id: 'main',
-  xAxisIndex: [0, 1],
-  start: CHART_CONFIG.INITIAL_START_ZOOM,
-  end: CHART_CONFIG.INITIAL_END_ZOOM,
-  filterMode: 'filter',
-  minSpan: 10
-});
+export const getDataZoomConfig = _ref => {
+  let {
+    isDesktop
+  } = _ref;
+  return {
+    type: 'inside',
+    id: 'main',
+    xAxisIndex: [0, 1],
+    start: isDesktop ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE,
+    end: CHART_CONFIG.INITIAL_END_ZOOM,
+    filterMode: 'filter',
+    minSpan: 10,
+    preventDefaultMouseMove: true
+  };
+};
 //# sourceMappingURL=getDataZoomConfig.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getDataZoomConfig.js","names":["CHART_CONFIG","getDataZoomConfig","type","id","xAxisIndex","start","INITIAL_START_ZOOM","end","INITIAL_END_ZOOM","filterMode","minSpan"],"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,SAASA,YAAY,QAAQ,oBAAoB;AAEjD,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,MAAgC;EAC/DC,IAAI,EAAE,QAAQ;EACdC,EAAE,EAAE,MAAM;EACVC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EAClBC,KAAK,EAAEL,YAAY,CAACM,kBAAkB;EACtCC,GAAG,EAAEP,YAAY,CAACQ,gBAAgB;EAClCC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE;AACX,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"getDataZoomConfig.js","names":["CHART_CONFIG","getDataZoomConfig","_ref","isDesktop","type","id","xAxisIndex","start","INITIAL_START_ZOOM_DESKTOP","INITIAL_START_ZOOM_MOBILE","end","INITIAL_END_ZOOM","filterMode","minSpan","preventDefaultMouseMove"],"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,SAASA,YAAY,QAAQ,oBAAoB;AAMjD,OAAO,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,GACZH,YAAY,CAACQ,0BAA0B,GACvCR,YAAY,CAACS,yBAAyB;IAC1CC,GAAG,EAAEV,YAAY,CAACW,gBAAgB;IAClCC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,EAAE;IACXC,uBAAuB,EAAE;EAC3B,CAAC;AAAA,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"getGridConfig.js","names":["CHART_CONFIG","getGridConfig","_ref","isDesktop","id","name","left","concat","Y_SENTIMENT_LABEL_SIZE","right","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","top","bottom","X_LABEL_SIZE","height","MAIN_HEIGHT"],"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,SAASA,YAAY,QAAQ,oBAAoB;AAMjD,OAAO,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,CAAKP,YAAY,CAACQ,sBAAsB,OAAI;IAChDC,KAAK,KAAAF,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACU,oBAAoB,GAAGV,YAAY,CAACW,mBAAmB,OAAI;IAC9FC,GAAG,EAAE,KAAK;IACVC,MAAM,KAAAN,MAAA,CAAKP,YAAY,CAACc,YAAY,OAAI;IACxCC,MAAM,KAAAR,MAAA,CAAKP,YAAY,CAACgB,WAAW;EACrC,CAAC,EACD;IACEZ,EAAE,EAAE,gBAAgB;IACpBC,IAAI,EAAE,gBAAgB;IACtBC,IAAI,KAAAC,MAAA,CAAKP,YAAY,CAACQ,sBAAsB,OAAI;IAChDC,KAAK,KAAAF,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACU,oBAAoB,GAAGV,YAAY,CAACW,mBAAmB,OAAI;IAC9FC,GAAG,OAAO;IACVG,MAAM,KAAAR,MAAA,CAAKP,YAAY,CAACgB,WAAW;EACrC,CAAC,CACF;AAAA","ignoreList":[]}
+{"version":3,"file":"getGridConfig.js","names":["CHART_CONFIG","getGridConfig","_ref","isDesktop","id","name","left","concat","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"],"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,SAASA,YAAY,QAAQ,oBAAoB;AAMjD,OAAO,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,GAAGH,YAAY,CAACQ,8BAA8B,GAAGR,YAAY,CAACS,6BAA6B,OAAI;IACjHC,KAAK,KAAAH,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACW,oBAAoB,GAAGX,YAAY,CAACY,mBAAmB,OAAI;IAC9FC,GAAG,KAAAN,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACc,kBAAkB,GAAGd,YAAY,CAACe,iBAAiB,OAAI;IACxFC,MAAM,KAAAT,MAAA,CAAKP,YAAY,CAACiB,YAAY,OAAI;IACxCC,MAAM,KAAAX,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACmB,WAAW,GAAGnB,YAAY,CAACc,kBAAkB,GAAGd,YAAY,CAACmB,WAAW,GAAGnB,YAAY,CAACe,iBAAiB;EAC/I,CAAC,EACD;IACEX,EAAE,EAAE,gBAAgB;IACpBC,IAAI,EAAE,gBAAgB;IACtBC,IAAI,KAAAC,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACQ,8BAA8B,GAAGR,YAAY,CAACS,6BAA6B,OAAI;IACjHC,KAAK,KAAAH,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACW,oBAAoB,GAAGX,YAAY,CAACY,mBAAmB,OAAI;IAC9FC,GAAG,KAAAN,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACc,kBAAkB,GAAGd,YAAY,CAACe,iBAAiB,OAAI;IACxFG,MAAM,KAAAX,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACmB,WAAW,GAAGnB,YAAY,CAACc,kBAAkB,GAAGd,YAAY,CAACmB,WAAW,GAAGnB,YAAY,CAACe,iBAAiB;EAC/I,CAAC,CACF;AAAA","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getGridLines.js

@@ -7,14 +7,17 @@ import { getLineCommons } from '@oanda/labs-widget-common';
 import { CHART_CONFIG } from '../../../constants';
 export const getGridLines = _ref => {
   let {
-    isDark
+    isDark,
+    isDesktop
   } = _ref;
   const {
     WIDTH,
     MAIN_HEIGHT,
-    X_LABEL_SIZE,
-    Y_SENTIMENT_LABEL_SIZE
+    X_LABEL_SIZE
   } = CHART_CONFIG;
+  const ySentimentLabelSize = isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;
+  const yLabelSize = isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;
+  const topMargin = isDesktop ? 0 : CHART_CONFIG.TOP_MARGIN_MOBILE;
   return [_objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
     top: -2,
     shape: {
@@ -22,7 +25,8 @@ export const getGridLines = _ref => {
       y1: 0,
       x2: WIDTH,
       y2: 0
-    }
+    },
+    z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
     right: -2,
     shape: {
@@ -30,7 +34,8 @@ export const getGridLines = _ref => {
       y1: 0,
       x2: 0,
       y2: MAIN_HEIGHT + X_LABEL_SIZE + 2
-    }
+    },
+    z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
     bottom: -2,
     shape: {
@@ -38,7 +43,8 @@ export const getGridLines = _ref => {
       y1: 0,
       x2: WIDTH,
       y2: 0
-    }
+    },
+    z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
     left: -2,
     shape: {
@@ -46,24 +52,46 @@ export const getGridLines = _ref => {
       y1: 0,
       x2: 0,
       y2: MAIN_HEIGHT + X_LABEL_SIZE + 2
-    }
+    },
+    z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
-    left: Y_SENTIMENT_LABEL_SIZE - 2,
-    top: -2,
+    right: yLabelSize - 3,
+    top: topMargin - 2,
+    shape: {
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: MAIN_HEIGHT - topMargin
+    },
+    z: 30
+  }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
+    left: ySentimentLabelSize - 2,
+    top: topMargin - 2,
     shape: {
       x1: 0,
       y1: 0,
       x2: 0,
-      y2: MAIN_HEIGHT
-    }
+      y2: MAIN_HEIGHT - topMargin
+    },
+    z: 30
+  }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
+    bottom: X_LABEL_SIZE - 3,
+    shape: {
+      x1: 0,
+      y1: 0,
+      x2: WIDTH,
+      y2: 0
+    },
+    z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
-    top: MAIN_HEIGHT - 2,
+    top: topMargin - 3,
     shape: {
       x1: 0,
       y1: 0,
       x2: WIDTH,
       y2: 0
-    }
+    },
+    z: 30
   })];
 };
 //# sourceMappingURL=getGridLines.js.map

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getGridLines.js.map

@@ -1 +1 @@
-{"version":3,"file":"getGridLines.js","names":["getLineCommons","CHART_CONFIG","getGridLines","_ref","isDark","WIDTH","MAIN_HEIGHT","X_LABEL_SIZE","Y_SENTIMENT_LABEL_SIZE","_objectSpread","top","shape","x1","y1","x2","y2","right","bottom","left"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getGridLines.ts"],"sourcesContent":["import { getLineCommons } from '@oanda/labs-widget-common';\nimport type { GraphicComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetGridLinesParams {\n  isDark: boolean;\n}\n\nexport const getGridLines = ({\n  isDark,\n}: GetGridLinesParams): GraphicComponentOption[] => {\n  const { WIDTH, MAIN_HEIGHT, X_LABEL_SIZE, Y_SENTIMENT_LABEL_SIZE } =\n    CHART_CONFIG;\n  return [\n    // Top\n    {\n      ...getLineCommons(isDark),\n      top: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n    },\n    // Right\n    {\n      ...getLineCommons(isDark),\n      right: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,\n      },\n    },\n    // Bottom\n    {\n      ...getLineCommons(isDark),\n      bottom: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n    },\n    // Left\n    {\n      ...getLineCommons(isDark),\n      left: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,\n      },\n    },\n    // Y Sentiment Label\n    {\n      ...getLineCommons(isDark),\n      left: Y_SENTIMENT_LABEL_SIZE - 2,\n      top: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT,\n      },\n    },\n    // X Label\n    {\n      ...getLineCommons(isDark),\n      top: MAIN_HEIGHT - 2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n    },\n  ];\n};\n"],"mappings":";;;;;AAAA,SAASA,cAAc,QAAQ,2BAA2B;AAG1D,SAASC,YAAY,QAAQ,oBAAoB;AAMjD,OAAO,MAAMC,YAAY,GAAGC,IAAA,IAEwB;EAAA,IAFvB;IAC3BC;EACkB,CAAC,GAAAD,IAAA;EACnB,MAAM;IAAEE,KAAK;IAAEC,WAAW;IAAEC,YAAY;IAAEC;EAAuB,CAAC,GAChEP,YAAY;EACd,OAAO,CAAAQ,aAAA,CAAAA,aAAA,KAGAT,cAAc,CAACI,MAAM,CAAC;IACzBM,GAAG,EAAE,CAAC,CAAC;IACPC,KAAK,EAAE;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAET,KAAK;MACTU,EAAE,EAAE;IACN;EAAC,IAAAN,aAAA,CAAAA,aAAA,KAIET,cAAc,CAACI,MAAM,CAAC;IACzBY,KAAK,EAAE,CAAC,CAAC;IACTL,KAAK,EAAE;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAET,WAAW,GAAGC,YAAY,GAAG;IACnC;EAAC,IAAAE,aAAA,CAAAA,aAAA,KAIET,cAAc,CAACI,MAAM,CAAC;IACzBa,MAAM,EAAE,CAAC,CAAC;IACVN,KAAK,EAAE;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAET,KAAK;MACTU,EAAE,EAAE;IACN;EAAC,IAAAN,aAAA,CAAAA,aAAA,KAIET,cAAc,CAACI,MAAM,CAAC;IACzBc,IAAI,EAAE,CAAC,CAAC;IACRP,KAAK,EAAE;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAET,WAAW,GAAGC,YAAY,GAAG;IACnC;EAAC,IAAAE,aAAA,CAAAA,aAAA,KAIET,cAAc,CAACI,MAAM,CAAC;IACzBc,IAAI,EAAEV,sBAAsB,GAAG,CAAC;IAChCE,GAAG,EAAE,CAAC,CAAC;IACPC,KAAK,EAAE;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAET;IACN;EAAC,IAAAG,aAAA,CAAAA,aAAA,KAIET,cAAc,CAACI,MAAM,CAAC;IACzBM,GAAG,EAAEJ,WAAW,GAAG,CAAC;IACpBK,KAAK,EAAE;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAE,CAAC;MACLC,EAAE,EAAET,KAAK;MACTU,EAAE,EAAE;IACN;EAAC,GAEJ;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"getGridLines.js","names":["getLineCommons","CHART_CONFIG","getGridLines","_ref","isDark","isDesktop","WIDTH","MAIN_HEIGHT","X_LABEL_SIZE","ySentimentLabelSize","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","topMargin","TOP_MARGIN_MOBILE","_objectSpread","top","shape","x1","y1","x2","y2","z","right","bottom","left"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getGridLines.ts"],"sourcesContent":["import { getLineCommons } from '@oanda/labs-widget-common';\nimport type { GraphicComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetGridLinesParams {\n  isDark: boolean;\n  isDesktop: boolean;\n}\n\nexport const getGridLines = ({\n  isDark,\n  isDesktop,\n}: GetGridLinesParams): GraphicComponentOption[] => {\n  const { WIDTH, MAIN_HEIGHT, X_LABEL_SIZE } = CHART_CONFIG;\n  const ySentimentLabelSize = isDesktop\n    ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE\n    : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;\n\n  const yLabelSize = isDesktop\n    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP\n    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;\n\n  const topMargin = isDesktop ? 0 : CHART_CONFIG.TOP_MARGIN_MOBILE;\n\n  return [\n    // Top\n    {\n      ...getLineCommons(isDark),\n      top: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // Right\n    {\n      ...getLineCommons(isDark),\n      right: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,\n      },\n      z: 30,\n    },\n    // Bottom\n    {\n      ...getLineCommons(isDark),\n      bottom: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // Left\n    {\n      ...getLineCommons(isDark),\n      left: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,\n      },\n      z: 30,\n    },\n    // Y Label\n    {\n      ...getLineCommons(isDark),\n      right: yLabelSize - 3,\n      top: topMargin - 2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT - topMargin,\n      },\n      z: 30,\n    },\n    // Y Sentiment Label\n    {\n      ...getLineCommons(isDark),\n      left: ySentimentLabelSize - 2,\n      top: topMargin - 2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT - topMargin,\n      },\n      z: 30,\n    },\n    // X Label\n    {\n      ...getLineCommons(isDark),\n      bottom: X_LABEL_SIZE - 3,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // X Mobile Label\n    {\n      ...getLineCommons(isDark),\n      top: topMargin - 3,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n  ];\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.js

@@ -0,0 +1,151 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
+import { CHART_CONFIG } from '../../../constants';
+export const getLabelsConfig = _ref => {
+  let {
+    isDark,
+    isDesktop,
+    labelCallback
+  } = _ref;
+  const ySentimentLabelSize = isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;
+  const yMainLabelSize = isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;
+  const textColor = isDark ? colorPalette.white : colorPalette.black;
+  const labelBackgroundColor = isDark ? colorPalette.darkGray : colorPalette.white;
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const shadowColor = chroma(colorPalette.black).alpha(0.1).hex();
+  const sentimentText = labelCallback('sentiment').toUpperCase();
+  const priceText = labelCallback('price').toUpperCase();
+  const sentimentEstimatedWidth = 10 * sentimentText.length * 0.65;
+  const priceEstimatedWidth = 10 * priceText.length * 0.65;
+  const sentimentVerticalOffset = sentimentEstimatedWidth / 2;
+  const priceVerticalOffset = priceEstimatedWidth / 2;
+  const topMargin = isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE;
+  return [{
+    type: 'group',
+    left: "".concat(ySentimentLabelSize + 5, "px'"),
+    top: "".concat(topMargin + 5, "px"),
+    silent: true,
+    children: [{
+      type: 'rect',
+      z: 100,
+      right: 'center',
+      top: 'middle',
+      shape: {
+        width: 50,
+        height: 24
+      },
+      style: {
+        fill: labelBackgroundColor,
+        shadowBlur: 8,
+        shadowOffsetX: 0,
+        shadowOffsetY: 1,
+        shadowColor: shadowColor
+      }
+    }, {
+      type: 'text',
+      z: 100,
+      right: 'center',
+      top: 'middle',
+      style: {
+        fontSize: 11,
+        fontFamily: 'Sofia W03',
+        fontWeight: 500,
+        fill: textColor,
+        width: 70,
+        height: 30,
+        text: labelCallback('short')
+      }
+    }]
+  }, {
+    type: 'group',
+    left: "".concat(ySentimentLabelSize + 5, "px'"),
+    top: "".concat(CHART_CONFIG.MAIN_HEIGHT - 24 - 5, "px"),
+    silent: true,
+    children: [{
+      type: 'rect',
+      z: 100,
+      right: 'center',
+      top: 'middle',
+      shape: {
+        width: 50,
+        height: 24
+      },
+      style: {
+        fill: labelBackgroundColor,
+        shadowBlur: 8,
+        shadowOffsetX: 0,
+        shadowOffsetY: 1,
+        shadowColor: shadowColor
+      }
+    }, {
+      type: 'text',
+      z: 100,
+      right: 'center',
+      top: 'middle',
+      style: {
+        fontSize: 11,
+        fontFamily: 'Sofia W03',
+        fontWeight: 500,
+        fill: textColor,
+        width: 70,
+        height: 30,
+        text: labelCallback('long')
+      }
+    }]
+  }, {
+    type: 'text',
+    z: 30,
+    rotation: isDesktop ? Math.PI / 2 : 0,
+    left: "5px",
+    top: isDesktop ? "".concat(topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - sentimentVerticalOffset, "px") : "".concat(topMargin - 18, "px"),
+    silent: true,
+    style: {
+      fontSize: 10,
+      fontFamily: 'Sofia W03',
+      fontWeight: 300,
+      fill: textColor,
+      text: sentimentText
+    }
+  }, {
+    type: 'text',
+    z: 30,
+    rotation: isDesktop ? -Math.PI / 2 : 0,
+    right: "5px",
+    top: isDesktop ? "".concat(topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - priceVerticalOffset, "px") : "".concat(topMargin - 18, "px"),
+    silent: true,
+    style: {
+      fontSize: 10,
+      fontFamily: 'Sofia W03',
+      fontWeight: 300,
+      fill: textColor,
+      text: priceText
+    }
+  }, {
+    type: 'rect',
+    z: 20,
+    right: '0px',
+    top: '0px',
+    shape: {
+      width: yMainLabelSize,
+      height: CHART_CONFIG.MAIN_HEIGHT
+    },
+    silent: true,
+    style: {
+      fill: backgroundColor
+    }
+  }, {
+    type: 'rect',
+    z: 20,
+    left: '0px',
+    top: '0px',
+    shape: {
+      width: ySentimentLabelSize,
+      height: CHART_CONFIG.MAIN_HEIGHT
+    },
+    silent: true,
+    style: {
+      fill: backgroundColor
+    }
+  }];
+};
+//# sourceMappingURL=getLabelsConfig.js.map