@oanda/labs-crowd-view-widget 1.0.51 → 1.0.53

package/dist/module/CrowdViewWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","useLocale","React","useEffect","useMemo","useState","BookType","ChartWithData","Legend","granularitySelectConfig","navigationConfig","getInstrumentConfigForDivision","Main","_ref","division","lang","size","isDark","isDesktop","DESKTOP","bookType","setBookType","Order","granularitySelectConfigWithLang","map","opt","_objectSpread","label","instrumentSelectConfigWithDivision","instrument","setInstrument","granularity","setGranularity","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","id"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n  cn,\n  Select,\n  Size,\n  Tabs,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport type { Granularity } from '../gql/types/graphql';\nimport { BookType } from '../gql/types/graphql';\nimport { ChartWithData, Legend } from './components';\nimport { granularitySelectConfig, navigationConfig } from './selectConfig';\nimport type { InstrumentId, MainProps } from './types';\nimport { getInstrumentConfigForDivision } from './utils/instrumentUtils';\n\nconst Main = ({ division }: MainProps) => {\n  const { lang } = useLocale();\n  const { size, isDark } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const [bookType, setBookType] = useState(BookType.Order);\n\n  const granularitySelectConfigWithLang = useMemo(\n    () =>\n      granularitySelectConfig.map((opt) => ({\n        ...opt,\n        label: lang(opt.label),\n      })),\n    [lang]\n  );\n\n  const instrumentSelectConfigWithDivision =\n    getInstrumentConfigForDivision(division);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n\n  const [granularity, setGranularity] = useState(\n    granularitySelectConfigWithLang[0]\n  );\n\n  useEffect(() => {\n    setGranularity(granularitySelectConfigWithLang[0]);\n  }, [granularitySelectConfigWithLang]);\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <div>\n            <Tabs\n              mobileFullWidth\n              activeTab={bookType}\n              handleClick={(e) =>\n                setBookType(e.currentTarget.value as BookType)\n              }\n              items={navigationConfig}\n              labelCallback={lang}\n            />\n            <div\n              className={cn('lw-mb-6 lw-mt-12', {\n                'lw-flex': isDesktop,\n              })}\n            >\n              <div\n                className={cn('lw-mr-2', {\n                  'lw-w-full lw-mb-2': !isDesktop,\n                  'lw-w-[280px]': isDesktop,\n                })}\n              >\n                <Select\n                  options={instrumentSelectConfigWithDivision}\n                  searchPlaceholder={lang('search')}\n                  selectLabel={lang('instrument')}\n                  selectedOption={instrument}\n                  setSelectedOption={(val) =>\n                    setInstrument(val as { id: InstrumentId; label: string })\n                  }\n                />\n              </div>\n              <div\n                className={cn({\n                  'lw-w-full': !isDesktop,\n                  'lw-w-[280px]': isDesktop,\n                })}\n              >\n                <Select\n                  options={granularitySelectConfigWithLang}\n                  searchPlaceholder={lang('search')}\n                  selectLabel={lang('granularity')}\n                  selectedOption={granularity}\n                  setSelectedOption={(val) =>\n                    setGranularity(val as { id: Granularity; label: string })\n                  }\n                />\n              </div>\n            </div>\n          </div>\n          <ChartWithData\n            bookType={bookType}\n            division={division}\n            granularity={granularity.id}\n            instrument={instrument.id}\n          />\n\n          <Legend bookType={bookType} isDark={isDark} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","useLocale","React","useEffect","useMemo","useState","BookType","ChartWithData","granularitySelectConfig","navigationConfig","getInstrumentConfigForDivision","Main","_ref","division","lang","size","isDesktop","DESKTOP","bookType","setBookType","Order","granularitySelectConfigWithLang","map","opt","_objectSpread","label","instrumentSelectConfigWithDivision","instrument","setInstrument","granularity","setGranularity","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","id"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n  cn,\n  Select,\n  Size,\n  Tabs,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport type { Granularity } from '../gql/types/graphql';\nimport { BookType } from '../gql/types/graphql';\nimport { ChartWithData } from './components';\nimport { granularitySelectConfig, navigationConfig } from './selectConfig';\nimport type { InstrumentId, MainProps } from './types';\nimport { getInstrumentConfigForDivision } from './utils/instrumentUtils';\n\nconst Main = ({ division }: MainProps) => {\n  const { lang } = useLocale();\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const [bookType, setBookType] = useState(BookType.Order);\n\n  const granularitySelectConfigWithLang = useMemo(\n    () =>\n      granularitySelectConfig.map((opt) => ({\n        ...opt,\n        label: lang(opt.label),\n      })),\n    [lang]\n  );\n\n  const instrumentSelectConfigWithDivision =\n    getInstrumentConfigForDivision(division);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n\n  const [granularity, setGranularity] = useState(\n    granularitySelectConfigWithLang[0]\n  );\n\n  useEffect(() => {\n    setGranularity(granularitySelectConfigWithLang[0]);\n  }, [granularitySelectConfigWithLang]);\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <div>\n            <Tabs\n              mobileFullWidth\n              activeTab={bookType}\n              handleClick={(e) =>\n                setBookType(e.currentTarget.value as BookType)\n              }\n              items={navigationConfig}\n              labelCallback={lang}\n            />\n            <div\n              className={cn('lw-mb-6 lw-mt-12', {\n                'lw-flex': isDesktop,\n              })}\n            >\n              <div\n                className={cn('lw-mr-2', {\n                  'lw-w-full lw-mb-2': !isDesktop,\n                  'lw-w-[280px]': isDesktop,\n                })}\n              >\n                <Select\n                  options={instrumentSelectConfigWithDivision}\n                  searchPlaceholder={lang('search')}\n                  selectLabel={lang('instrument')}\n                  selectedOption={instrument}\n                  setSelectedOption={(val) =>\n                    setInstrument(val as { id: InstrumentId; label: string })\n                  }\n                />\n              </div>\n              <div\n                className={cn({\n                  'lw-w-full': !isDesktop,\n                  'lw-w-[280px]': isDesktop,\n                })}\n              >\n                <Select\n                  options={granularitySelectConfigWithLang}\n                  searchPlaceholder={lang('search')}\n                  selectLabel={lang('granularity')}\n                  selectedOption={granularity}\n                  setSelectedOption={(val) =>\n                    setGranularity(val as { id: Granularity; label: string })\n                  }\n                />\n              </div>\n            </div>\n          </div>\n          <ChartWithData\n            bookType={bookType}\n            division={division}\n            granularity={granularity.id}\n            instrument={instrument.id}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,19 +1,20 @@
 import { BaseChart, getChartTheme, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { BarChart, CandlestickChart, CustomChart, ScatterChart } from 'echarts/charts';
-import { DataZoomInsideComponent, GraphicComponent, GridSimpleComponent, MarkPointComponent, TooltipComponent } from 'echarts/components';
+import { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';
+import { DatasetComponent, DataZoomInsideComponent, GraphicComponent, GridSimpleComponent, MarkAreaComponent, MarkPointComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React from 'react';
-import { CHART_CONFIG } from '../../constants';
+import { CHART_CONFIG_CALCULATED } from '../../constants';
 import { getOption } from './chartOptions';
 import { formatXAxisLabel, getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
-echarts.use([GridSimpleComponent, GraphicComponent, BarChart, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkPointComponent, ScatterChart]);
+echarts.use([GridSimpleComponent, GraphicComponent, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkPointComponent, MarkAreaComponent, LineChart, VisualMapComponent, DatasetComponent]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 const Chart = _ref => {
   let {
-    data,
+    mainData,
+    additionalData,
     isDesktop
   } = _ref;
   const {
@@ -23,41 +24,89 @@ const Chart = _ref => {
     lang
   } = useLocale();
   return React.createElement(BaseChart, {
-    chartHeight: CHART_CONFIG.HEIGHT,
+    chartHeight: CHART_CONFIG_CALCULATED.FULL_HEIGHT,
     echarts: echarts,
     isDark: isDark,
     lazyUpdate: true,
-    option: getOption(data, isDark, isDesktop, lang),
+    option: getOption({
+      mainData,
+      additionalData,
+      isDark,
+      isDesktop,
+      labelCallback: lang
+    }),
     opts: {
       renderer: 'canvas'
     },
     onEvents: {
-      datazoom: (_params, instance) => {
+      datazoom: (params, instance) => {
+        var _params$batch, _;
+        if (!((_params$batch = params.batch) !== null && _params$batch !== void 0 && _params$batch[0])) {
+          return;
+        }
         const {
-          dataZoom
+          dates
+        } = mainData;
+        const batchItem = params.batch[0];
+        const {
+          start,
+          end
+        } = batchItem;
+        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];
-        const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(data.xAxisData[startValue], data.xAxisData[endValue]);
-        const labelsData = getLabelData({
-          xAxisData: data.xAxisData,
-          isGreaterThanTwoWeeks
-        });
-        instance.setOption({
-          xAxis: {
-            axisLabel: {
-              formatter: value => formatXAxisLabel(value, isGreaterThanTwoWeeks)
-            }
-          },
-          series: [{
-            id: 'candlestick',
-            markPoint: {
-              data: labelsData
-            }
-          }]
-        });
+        if (batchItem.dataZoomId === 'main') {
+          instance.dispatchAction({
+            type: 'dataZoom',
+            dataZoomId: 'sentiment',
+            start,
+            end,
+            filterMode: 'none'
+          });
+        }
+        if (batchItem.dataZoomId === 'sentiment') {
+          instance.dispatchAction({
+            type: 'dataZoom',
+            dataZoomId: 'main',
+            start,
+            end,
+            filterMode: 'filter'
+          });
+        }
+        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
+              }
+            }]
+          });
+        }
       }
     }
   });

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","BarChart","CandlestickChart","CustomChart","ScatterChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkPointComponent","TooltipComponent","echarts","CanvasRenderer","React","CHART_CONFIG","getOption","formatXAxisLabel","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","data","isDesktop","isDark","lang","createElement","chartHeight","HEIGHT","lazyUpdate","option","opts","renderer","onEvents","datazoom","_params","instance","dataZoom","startValue","endValue","isGreaterThanTwoWeeks","xAxisData","labelsData","setOption","xAxis","axisLabel","formatter","value","series","id","markPoint"],"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 {\n  BarChart,\n  CandlestickChart,\n  CustomChart,\n  ScatterChart,\n} from 'echarts/charts';\nimport {\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkPointComponent,\n  TooltipComponent,\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 { getOption } from './chartOptions';\nimport type { ChartProps } from './types';\nimport {\n  formatXAxisLabel,\n  getLabelData,\n  isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  BarChart,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkPointComponent,\n  ScatterChart,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ data, 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(data, isDark, isDesktop, lang)}\n      opts={{ renderer: 'canvas' }}\n      onEvents={{\n        datazoom: (_params: unknown, instance: EChartsType) => {\n          const { dataZoom } = instance.getOption();\n\n          const { startValue, endValue } = (\n            dataZoom as { startValue: number; endValue: number }[]\n          )[0];\n\n          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n            data.xAxisData[startValue],\n            data.xAxisData[endValue]\n          );\n\n          const labelsData = getLabelData({\n            xAxisData: data.xAxisData,\n            isGreaterThanTwoWeeks,\n          });\n\n          instance.setOption({\n            xAxis: {\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\nexport { Chart };\n"],"mappings":"AAAA,SACEA,SAAS,EACTC,aAAa,EACbC,KAAK,EACLC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SACEC,QAAQ,EACRC,gBAAgB,EAChBC,WAAW,EACXC,YAAY,QACP,gBAAgB;AACvB,SACEC,uBAAuB,EACvBC,gBAAgB,EAChBC,mBAAmB,EACnBC,kBAAkB,EAClBC,gBAAgB,QACX,oBAAoB;AAC3B,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SACEC,gBAAgB,EAChBC,YAAY,EACZC,+BAA+B,QAC1B,oBAAoB;AAE3BP,OAAO,CAACQ,GAAG,CAAC,CACVX,mBAAmB,EACnBD,gBAAgB,EAChBL,QAAQ,EACRU,cAAc,EACdN,uBAAuB,EACvBF,WAAW,EACXM,gBAAgB,EAChBP,gBAAgB,EAChBM,kBAAkB,EAClBJ,YAAY,CACb,CAAC;AAEFM,OAAO,CAACS,aAAa,CAAC,YAAY,EAAEtB,aAAa,CAACC,KAAK,CAACsB,IAAI,CAAC,CAAC;AAC9DV,OAAO,CAACS,aAAa,CAAC,aAAa,EAAEtB,aAAa,CAACC,KAAK,CAACuB,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,IAAI;IAAEC;EAAsB,CAAC,GAAAF,IAAA;EAC5C,MAAM;IAAEG;EAAO,CAAC,GAAG3B,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAE4B;EAAK,CAAC,GAAG3B,SAAS,CAAC,CAAC;EAE5B,OACEY,KAAA,CAAAgB,aAAA,CAAChC,SAAS;IACRiC,WAAW,EAAEhB,YAAY,CAACiB,MAAO;IACjCpB,OAAO,EAAEA,OAAQ;IACjBgB,MAAM,EAAEA,MAAO;IACfK,UAAU,EAAE,IAAK;IACjBC,MAAM,EAAElB,SAAS,CAACU,IAAI,EAAEE,MAAM,EAAED,SAAS,EAAEE,IAAI,CAAE;IACjDM,IAAI,EAAE;MAAEC,QAAQ,EAAE;IAAS,CAAE;IAC7BC,QAAQ,EAAE;MACRC,QAAQ,EAAEA,CAACC,OAAgB,EAAEC,QAAqB,KAAK;QACrD,MAAM;UAAEC;QAAS,CAAC,GAAGD,QAAQ,CAACxB,SAAS,CAAC,CAAC;QAEzC,MAAM;UAAE0B,UAAU;UAAEC;QAAS,CAAC,GAC5BF,QAAQ,CACR,CAAC,CAAC;QAEJ,MAAMG,qBAAqB,GAAGzB,+BAA+B,CAC3DO,IAAI,CAACmB,SAAS,CAACH,UAAU,CAAC,EAC1BhB,IAAI,CAACmB,SAAS,CAACF,QAAQ,CACzB,CAAC;QAED,MAAMG,UAAU,GAAG5B,YAAY,CAAC;UAC9B2B,SAAS,EAAEnB,IAAI,CAACmB,SAAS;UACzBD;QACF,CAAC,CAAC;QAEFJ,QAAQ,CAACO,SAAS,CAAC;UACjBC,KAAK,EAAE;YACLC,SAAS,EAAE;cACTC,SAAS,EAAGC,KAAa,IACvBlC,gBAAgB,CAACkC,KAAK,EAAEP,qBAAqB;YACjD;UACF,CAAC;UACDQ,MAAM,EAAE,CACN;YACEC,EAAE,EAAE,aAAa;YACjBC,SAAS,EAAE;cACT5B,IAAI,EAAEoB;YACR;UACF,CAAC;QAEL,CAAC,CAAC;MACJ;IACF;EAAE,CACH,CAAC;AAEN,CAAC;AAED,SAAStB,KAAK","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","CandlestickChart","CustomChart","LineChart","DatasetComponent","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkAreaComponent","MarkPointComponent","TooltipComponent","VisualMapComponent","echarts","CanvasRenderer","React","CHART_CONFIG_CALCULATED","getOption","formatXAxisLabel","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","mainData","additionalData","isDesktop","isDark","lang","createElement","chartHeight","FULL_HEIGHT","lazyUpdate","option","labelCallback","opts","renderer","onEvents","datazoom","params","instance","_params$batch","_","batch","dates","batchItem","start","end","dataZoom","xAxis","Array","isArray","length","startValue","endValue","dataZoomId","dispatchAction","type","filterMode","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  MarkAreaComponent,\n  MarkPointComponent,\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_CALCULATED } from '../../constants';\nimport { getOption } from './chartOptions';\nimport type {\n  ChartProps,\n  DataZoomArray,\n  DataZoomEvent,\n  XAxisArray,\n} from './types';\nimport {\n  formatXAxisLabel,\n  getLabelData,\n  isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkPointComponent,\n  MarkAreaComponent,\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_CALCULATED.FULL_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          const batchItem = params.batch[0];\n          const { start, end } = batchItem;\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 (batchItem.dataZoomId === 'main') {\n            instance.dispatchAction({\n              type: 'dataZoom',\n              dataZoomId: 'sentiment',\n              start,\n              end,\n              filterMode: 'none',\n            });\n          }\n\n          if (batchItem.dataZoomId === 'sentiment') {\n            instance.dispatchAction({\n              type: 'dataZoom',\n              dataZoomId: 'main',\n              start,\n              end,\n              filterMode: 'filter',\n            });\n          }\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":[]}

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 { Legend } from '../Legend';
 import { Chart } from './Chart';
 import { useCrowdViewData } from './useCrowdViewData';
 const ChartWithData = _ref => {
@@ -10,11 +11,13 @@ const ChartWithData = _ref => {
     granularity
   } = _ref;
   const {
-    size
+    size,
+    isDark
   } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const {
-    data,
+    mainData,
+    additionalData,
     loading,
     error
   } = useCrowdViewData({
@@ -24,19 +27,25 @@ const ChartWithData = _ref => {
     granularity
   });
   return React.createElement(React.Fragment, null, React.createElement("div", {
-    className: "lw-relative lw-h-[450px] lw-w-full"
+    className: "lw-relative lw-h-[610px] lw-w-full"
   }, error && React.createElement("div", {
-    className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary"
+    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-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary"
+    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 && !!data && React.createElement("div", {
+  })), !loading && !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, {
-    data: data,
-    isDesktop: isDesktop
-  }))));
+    additionalData: additionalData,
+    isDesktop: isDesktop,
+    mainData: mainData
+  }))), React.createElement(Legend, {
+    bookType: bookType,
+    isDark: isDark,
+    longValues: [additionalData === null || additionalData === void 0 ? void 0 : additionalData.sentimentThresholdMin, additionalData === null || additionalData === void 0 ? void 0 : additionalData.sentimentThresholdMax],
+    shortValues: [additionalData === null || additionalData === void 0 ? void 0 : additionalData.sentimentThresholdMin, additionalData === null || additionalData === void 0 ? void 0 : additionalData.sentimentThresholdMax]
+  }));
 };
 export { ChartWithData };
 //# sourceMappingURL=ChartWithData.js.map

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","data","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 { data, loading, error } = useCrowdViewData({\n    instrument,\n    bookType,\n    division,\n    granularity,\n  });\n\n  return (\n    <>\n      <div className=\"lw-relative lw-h-[450px] lw-w-full\">\n        {error && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] 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-[calc(100%-30px)] 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 && !!data && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={data} isDesktop={isDesktop} />\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,IAAI;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGZ,gBAAgB,CAAC;IAChDG,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,OACER,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAgB,QAAA,QACEhB,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAAoC,GAChDH,KAAK,IACJd,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAA8J,GAC3KjB,KAAA,CAAAe,aAAA,CAACpB,UAAU,MAAE,CACV,CACN,EACAkB,OAAO,IACNb,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAA8J,GAC3KjB,KAAA,CAAAe,aAAA,CAAClB,OAAO;IAACY,IAAI,EAAEX,WAAW,CAACoB;EAAG,CAAE,CAC7B,CACN,EACA,CAACL,OAAO,IAAI,CAACC,KAAK,IAAI,CAAC,CAACF,IAAI,IAC3BZ,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEjB,KAAA,CAAAe,aAAA,CAACd,KAAK;IAACW,IAAI,EAAEA,IAAK;IAACF,SAAS,EAAEA;EAAU,CAAE,CACvC,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASP,aAAa","ignoreList":[]}
+{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","React","Legend","Chart","useCrowdViewData","ChartWithData","_ref","instrument","bookType","division","granularity","size","isDark","isDesktop","DESKTOP","mainData","additionalData","loading","error","createElement","Fragment","className","lg","longValues","sentimentThresholdMin","sentimentThresholdMax","shortValues"],"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 { Legend } from '../Legend';\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, isDark } = 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-[610px] lw-w-full\">\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      <Legend\n        bookType={bookType}\n        isDark={isDark}\n        longValues={[\n          additionalData?.sentimentThresholdMin,\n          additionalData?.sentimentThresholdMax,\n        ]}\n        shortValues={[\n          additionalData?.sentimentThresholdMin,\n          additionalData?.sentimentThresholdMax,\n        ]}\n      />\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,MAAM,QAAQ,WAAW;AAClC,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,IAAI;IAAEC;EAAO,CAAC,GAAGZ,iBAAiB,CAAC,CAAC;EAC5C,MAAMa,SAAS,GAAGF,IAAI,KAAKd,IAAI,CAACiB,OAAO;EAEvC,MAAM;IAAEC,QAAQ;IAAEC,cAAc;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGd,gBAAgB,CAAC;IACpEG,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,OACET,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAmB,QAAA,QACEnB,KAAA,CAAAkB,aAAA;IAAKE,SAAS,EAAC;EAAoC,GAChDH,KAAK,IACJjB,KAAA,CAAAkB,aAAA;IAAKE,SAAS,EAAC;EAAiJ,GAC9JpB,KAAA,CAAAkB,aAAA,CAACvB,UAAU,MAAE,CACV,CACN,EACAqB,OAAO,IACNhB,KAAA,CAAAkB,aAAA;IAAKE,SAAS,EAAC;EAAiJ,GAC9JpB,KAAA,CAAAkB,aAAA,CAACrB,OAAO;IAACa,IAAI,EAAEZ,WAAW,CAACuB;EAAG,CAAE,CAC7B,CACN,EACA,CAACL,OAAO,IAAI,CAACC,KAAK,IAAI,CAAC,CAACH,QAAQ,IAAI,CAAC,CAACC,cAAc,IACnDf,KAAA,CAAAkB,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEpB,KAAA,CAAAkB,aAAA,CAAChB,KAAK;IACJa,cAAc,EAAEA,cAAe;IAC/BH,SAAS,EAAEA,SAAU;IACrBE,QAAQ,EAAEA;EAAS,CACpB,CACE,CAEJ,CAAC,EACNd,KAAA,CAAAkB,aAAA,CAACjB,MAAM;IACLM,QAAQ,EAAEA,QAAS;IACnBI,MAAM,EAAEA,MAAO;IACfW,UAAU,EAAE,CACVP,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEQ,qBAAqB,EACrCR,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAES,qBAAqB,CACrC;IACFC,WAAW,EAAE,CACXV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEQ,qBAAqB,EACrCR,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAES,qBAAqB;EACrC,CACH,CACD,CAAC;AAEP,CAAC;AAED,SAASpB,aAAa","ignoreList":[]}