@oanda/labs-crowd-view-widget 1.0.43 → 1.0.44

package/dist/module/CrowdViewWidget/Main.js

@@ -1,14 +1,15 @@
 import { cn, Select, Size, Tabs, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import React, { useState } from 'react';
-import { BookType, Division } from '../gql/types/graphql';
+import { BookType } from '../gql/types/graphql';
 import { ChartWithData, Legend } from './components';
-import { granularitySelectConfig, instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig } from './config';
+import { granularitySelectConfig, navigationConfig } from './selectConfig';
+import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 const Main = _ref => {
   let {
     division
   } = _ref;
-  const instrumentSelectConfigWithDivision = division === Division.Oc ? instrumentSelectConfigOC : instrumentSelectConfig;
+  const instrumentSelectConfigWithDivision = getInstrumentConfigForDivision(division);
   const {
     size
   } = useLayoutProvider();
@@ -54,12 +55,10 @@ const Main = _ref => {
     setSelectedOption: val => setGranularity(val)
   }))), React.createElement(ChartWithData, {
     bookType: bookType,
+    division: division,
     granularity: granularity.id,
     instrument: instrument.id
-  }), React.createElement(Legend, {
-    longValues: [0.15, 0.25, 0.4, 0.55],
-    shortValues: [0.15, 0.25, 0.4, 0.55]
-  })));
+  }), React.createElement(Legend, null)));
 };
 export { Main };
 //# sourceMappingURL=Main.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","useLocale","React","useState","BookType","Division","ChartWithData","Legend","granularitySelectConfig","instrumentSelectConfig","instrumentSelectConfigOC","navigationConfig","Main","_ref","division","instrumentSelectConfigWithDivision","Oc","size","isDesktop","DESKTOP","bookType","setBookType","Order","instrument","setInstrument","granularity","setGranularity","lang","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","id","longValues","shortValues"],"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, { useState } from 'react';\n\nimport { BookType, Division } from '../gql/types/graphql';\nimport { ChartWithData, Legend } from './components';\nimport {\n  granularitySelectConfig,\n  instrumentSelectConfig,\n  instrumentSelectConfigOC,\n  navigationConfig,\n} from './config';\nimport type { GranularityId, InstrumentId, MainProps } from './types';\n\nconst Main = ({ division }: MainProps) => {\n  const instrumentSelectConfigWithDivision =\n    division === Division.Oc\n      ? instrumentSelectConfigOC\n      : instrumentSelectConfig;\n\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n\n  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <Tabs\n            mobileFullWidth\n            activeTab={bookType}\n            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n          <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n            <div\n              className={cn('lw-mr-2', {\n                'lw-w-full': !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={granularitySelectConfig}\n                searchPlaceholder={lang('search')}\n                selectLabel={lang('granularity')}\n                selectedOption={granularity}\n                setSelectedOption={(val) =>\n                  setGranularity(val as { id: GranularityId; label: string })\n                }\n              />\n            </div>\n          </div>\n\n          <ChartWithData\n            bookType={bookType}\n            granularity={granularity.id}\n            instrument={instrument.id}\n          />\n\n          <Legend\n            longValues={[0.15, 0.25, 0.4, 0.55]}\n            shortValues={[0.15, 0.25, 0.4, 0.55]}\n          />\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","useState","BookType","ChartWithData","Legend","granularitySelectConfig","navigationConfig","getInstrumentConfigForDivision","Main","_ref","division","instrumentSelectConfigWithDivision","size","isDesktop","DESKTOP","bookType","setBookType","Order","instrument","setInstrument","granularity","setGranularity","lang","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, { 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 { MainProps } from './types';\nimport type { InstrumentId } from './types/instruments';\nimport { getInstrumentConfigForDivision } from './utils/instrumentUtils';\n\nconst Main = ({ division }: MainProps) => {\n  const instrumentSelectConfigWithDivision =\n    getInstrumentConfigForDivision(division);\n\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [instrument, setInstrument] = useState(\n    instrumentSelectConfigWithDivision[0]\n  );\n\n  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n        <div\n          className=\"lw-text-sm lw-tracking-normal\"\n          data-testid=\"crowd-view-widget\"\n        >\n          <Tabs\n            mobileFullWidth\n            activeTab={bookType}\n            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n          <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n            <div\n              className={cn('lw-mr-2', {\n                'lw-w-full': !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={granularitySelectConfig}\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\n          <ChartWithData\n            bookType={bookType}\n            division={division}\n            granularity={granularity.id}\n            instrument={instrument.id}\n          />\n\n          <Legend />\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,13 +1,13 @@
 import { BaseChart, getChartTheme, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
-import { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';
+import { BarChart, CandlestickChart, CustomChart, ScatterChart } from 'echarts/charts';
 import { DataZoomInsideComponent, GraphicComponent, GridSimpleComponent, MarkPointComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React from 'react';
-import { CHART_HEIGHT } from './constants';
-import { getOption } from './getOption';
-import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';
-echarts.use([GridSimpleComponent, GraphicComponent, BarChart, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkPointComponent]);
+import { CHART_CONFIG } from '../../constants';
+import { getOption } from './chartOptions';
+import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
+echarts.use([GridSimpleComponent, GraphicComponent, BarChart, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkPointComponent, ScatterChart]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 const Chart = _ref => {
@@ -18,11 +18,14 @@ const Chart = _ref => {
     isDark
   } = useLayoutProvider();
   return React.createElement(BaseChart, {
-    chartHeight: CHART_HEIGHT,
+    chartHeight: CHART_CONFIG.HEIGHT,
     echarts: echarts,
     isDark: isDark,
     lazyUpdate: true,
     option: getOption(data, isDark),
+    opts: {
+      renderer: 'canvas'
+    },
     onEvents: {
       datazoom: (_params, instance) => {
         const {

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","BarChart","CandlestickChart","CustomChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkPointComponent","TooltipComponent","echarts","CanvasRenderer","React","CHART_HEIGHT","getOption","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","data","isDark","createElement","chartHeight","lazyUpdate","option","onEvents","datazoom","_params","instance","dataZoom","startValue","endValue","isGreaterThanTwoWeeks","xAxisData","labelsData","setOption","xAxis","axisLabel","formatter","value","date","Date","concat","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","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 type { EChartsType } from 'echarts';\nimport { BarChart, CandlestickChart, CustomChart } 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_HEIGHT } from './constants';\nimport { getOption } from './getOption';\nimport type { ChartProps } from './types';\nimport { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  BarChart,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkPointComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ data }: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n\n  return (\n    <BaseChart\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={getOption(data, isDark)}\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                  const date = new Date(value);\n                  return isGreaterThanTwoWeeks\n                    ? `${date.toLocaleTimeString(undefined, {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}`\n                    : `${date.toLocaleDateString(undefined, {\n                        day: 'numeric',\n                      })}`;\n                },\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;AAElC,SAASC,QAAQ,EAAEC,gBAAgB,EAAEC,WAAW,QAAQ,gBAAgB;AACxE,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,aAAa;AAC1C,SAASC,SAAS,QAAQ,aAAa;AAEvC,SAASC,YAAY,EAAEC,+BAA+B,QAAQ,SAAS;AAEvEN,OAAO,CAACO,GAAG,CAAC,CACVV,mBAAmB,EACnBD,gBAAgB,EAChBJ,QAAQ,EACRS,cAAc,EACdN,uBAAuB,EACvBD,WAAW,EACXK,gBAAgB,EAChBN,gBAAgB,EAChBK,kBAAkB,CACnB,CAAC;AAEFE,OAAO,CAACQ,aAAa,CAAC,YAAY,EAAEnB,aAAa,CAACC,KAAK,CAACmB,IAAI,CAAC,CAAC;AAC9DT,OAAO,CAACQ,aAAa,CAAC,aAAa,EAAEnB,aAAa,CAACC,KAAK,CAACoB,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAA0B;EAAA,IAAzB;IAAEC;EAAiB,CAAC,GAAAD,IAAA;EACjC,MAAM;IAAEE;EAAO,CAAC,GAAGvB,iBAAiB,CAAC,CAAC;EAEtC,OACEW,KAAA,CAAAa,aAAA,CAAC3B,SAAS;IACR4B,WAAW,EAAEb,YAAa;IAC1BH,OAAO,EAAEA,OAAQ;IACjBc,MAAM,EAAEA,MAAO;IACfG,UAAU,EAAE,IAAK;IACjBC,MAAM,EAAEd,SAAS,CAACS,IAAI,EAAEC,MAAM,CAAE;IAChCK,QAAQ,EAAE;MACRC,QAAQ,EAAEA,CAACC,OAAgB,EAAEC,QAAqB,KAAK;QACrD,MAAM;UAAEC;QAAS,CAAC,GAAGD,QAAQ,CAAClB,SAAS,CAAC,CAAC;QAEzC,MAAM;UAAEoB,UAAU;UAAEC;QAAS,CAAC,GAC5BF,QAAQ,CACR,CAAC,CAAC;QAEJ,MAAMG,qBAAqB,GAAGpB,+BAA+B,CAC3DO,IAAI,CAACc,SAAS,CAACH,UAAU,CAAC,EAC1BX,IAAI,CAACc,SAAS,CAACF,QAAQ,CACzB,CAAC;QAED,MAAMG,UAAU,GAAGvB,YAAY,CAAC;UAC9BsB,SAAS,EAAEd,IAAI,CAACc,SAAS;UACzBD;QACF,CAAC,CAAC;QAEFJ,QAAQ,CAACO,SAAS,CAAC;UACjBC,KAAK,EAAE;YACLC,SAAS,EAAE;cACTC,SAAS,EAAGC,KAAa,IAAK;gBAC5B,MAAMC,IAAI,GAAG,IAAIC,IAAI,CAACF,KAAK,CAAC;gBAC5B,OAAOP,qBAAqB,MAAAU,MAAA,CACrBF,IAAI,CAACG,kBAAkB,CAACC,SAAS,EAAE;kBACpCC,IAAI,EAAE,SAAS;kBACfC,MAAM,EAAE;gBACV,CAAC,CAAC,OAAAJ,MAAA,CACCF,IAAI,CAACO,kBAAkB,CAACH,SAAS,EAAE;kBACpCI,GAAG,EAAE;gBACP,CAAC,CAAC,CAAE;cACV;YACF;UACF,CAAC;UACDC,MAAM,EAAE,CACN;YACEC,EAAE,EAAE,aAAa;YACjBC,SAAS,EAAE;cACThC,IAAI,EAAEe;YACR;UACF,CAAC;QAEL,CAAC,CAAC;MACJ;IACF;EAAE,CACH,CAAC;AAEN,CAAC;AAED,SAASjB,KAAK","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","BarChart","CandlestickChart","CustomChart","ScatterChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkPointComponent","TooltipComponent","echarts","CanvasRenderer","React","CHART_CONFIG","getOption","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","data","isDark","createElement","chartHeight","HEIGHT","lazyUpdate","option","opts","renderer","onEvents","datazoom","_params","instance","dataZoom","startValue","endValue","isGreaterThanTwoWeeks","xAxisData","labelsData","setOption","xAxis","axisLabel","formatter","value","date","Date","concat","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","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 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  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 }: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n\n  return (\n    <BaseChart\n      chartHeight={CHART_CONFIG.HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={getOption(data, isDark)}\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                  const date = new Date(value);\n                  return isGreaterThanTwoWeeks\n                    ? `${date.toLocaleTimeString(undefined, {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}`\n                    : `${date.toLocaleDateString(undefined, {\n                        day: 'numeric',\n                      })}`;\n                },\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":"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","ignoreList":[]}

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

@@ -1,31 +1,35 @@
 import { ChartError, Size, Spinner, SpinnerSize, useLayoutProvider } from '@oanda/labs-widget-common';
 import classnames from 'classnames';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Chart } from './Chart';
-import { transformDataForChart } from './utils';
+import { useCrowdViewData } from './useCrowdViewData';
 const ChartWithData = _ref => {
   let {
     instrument,
     bookType,
+    division,
     granularity
   } = _ref;
   const {
     size
   } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
-  const isError = false;
-  const loading = false;
-  const transformedData = useMemo(() => {
-    return transformDataForChart({
-      granularity
-    });
-  }, [instrument, granularity, bookType]);
+  const {
+    data,
+    loading,
+    error
+  } = useCrowdViewData({
+    instrument,
+    bookType,
+    division,
+    granularity
+  });
   return React.createElement(React.Fragment, null, React.createElement("div", {
     className: classnames('lw-relative lw-w-full', {
       'lw-h-[450px]': isDesktop,
       'lw-h-[390px]': !isDesktop
     })
-  }, isError && React.createElement("div", {
+  }, error && React.createElement("div", {
     className: classnames('lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary', {
       'lw-h-full': isDesktop,
       'lw-h-[calc(100%-40px)]': !isDesktop
@@ -37,10 +41,10 @@ const ChartWithData = _ref => {
     })
   }, React.createElement(Spinner, {
     size: SpinnerSize.lg
-  })), !isError && transformedData && React.createElement("div", {
+  })), !loading && !error && !!data && React.createElement("div", {
     className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
   }, React.createElement(Chart, {
-    data: transformedData
+    data: data
   }))));
 };
 export { ChartWithData };

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

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","classnames","React","useMemo","Chart","transformDataForChart","ChartWithData","_ref","instrument","bookType","granularity","size","isDesktop","DESKTOP","isError","loading","transformedData","createElement","Fragment","className","lg","data"],"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 classnames from 'classnames';\nimport React, { useMemo } from 'react';\n\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { transformDataForChart } from './utils';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n  granularity,\n}: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const isError = false;\n  const loading = false;\n\n  const transformedData = useMemo(() => {\n    return transformDataForChart({ granularity });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [instrument, granularity, bookType]);\n\n  return (\n    <>\n      <div\n        className={classnames('lw-relative lw-w-full', {\n          'lw-h-[450px]': isDesktop,\n          'lw-h-[390px]': !isDesktop,\n        })}\n      >\n        {isError && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {!isError && transformedData && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={transformedData} />\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,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,qBAAqB,QAAQ,SAAS;AAE/C,MAAMC,aAAa,GAAGC,IAAA,IAII;EAAA,IAJH;IACrBC,UAAU;IACVC,QAAQ;IACRC;EACkB,CAAC,GAAAH,IAAA;EACnB,MAAM;IAAEI;EAAK,CAAC,GAAGX,iBAAiB,CAAC,CAAC;EACpC,MAAMY,SAAS,GAAGD,IAAI,KAAKd,IAAI,CAACgB,OAAO;EAEvC,MAAMC,OAAO,GAAG,KAAK;EACrB,MAAMC,OAAO,GAAG,KAAK;EAErB,MAAMC,eAAe,GAAGb,OAAO,CAAC,MAAM;IACpC,OAAOE,qBAAqB,CAAC;MAAEK;IAAY,CAAC,CAAC;EAE/C,CAAC,EAAE,CAACF,UAAU,EAAEE,WAAW,EAAED,QAAQ,CAAC,CAAC;EAEvC,OACEP,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAgB,QAAA,QACEhB,KAAA,CAAAe,aAAA;IACEE,SAAS,EAAElB,UAAU,CAAC,uBAAuB,EAAE;MAC7C,cAAc,EAAEW,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEFE,OAAO,IACNZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EAAElB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEW,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFV,KAAA,CAAAe,aAAA,CAACrB,UAAU,MAAE,CACV,CACN,EACAmB,OAAO,IACNb,KAAA,CAAAe,aAAA;IACEE,SAAS,EAAElB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEW,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFV,KAAA,CAAAe,aAAA,CAACnB,OAAO;IAACa,IAAI,EAAEZ,WAAW,CAACqB;EAAG,CAAE,CAC7B,CACN,EACA,CAACN,OAAO,IAAIE,eAAe,IAC1Bd,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEjB,KAAA,CAAAe,aAAA,CAACb,KAAK;IAACiB,IAAI,EAAEL;EAAgB,CAAE,CAC5B,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASV,aAAa","ignoreList":[]}
+{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","classnames","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 classnames from 'classnames';\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\n        className={classnames('lw-relative lw-w-full', {\n          'lw-h-[450px]': isDesktop,\n          'lw-h-[390px]': !isDesktop,\n        })}\n      >\n        {error && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\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} />\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,UAAU,MAAM,YAAY;AACnC,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,GAAGX,iBAAiB,CAAC,CAAC;EACpC,MAAMY,SAAS,GAAGD,IAAI,KAAKd,IAAI,CAACgB,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;IACEE,SAAS,EAAElB,UAAU,CAAC,uBAAuB,EAAE;MAC7C,cAAc,EAAEW,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEFI,KAAK,IACJd,KAAA,CAAAe,aAAA;IACEE,SAAS,EAAElB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEW,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFV,KAAA,CAAAe,aAAA,CAACrB,UAAU,MAAE,CACV,CACN,EACAmB,OAAO,IACNb,KAAA,CAAAe,aAAA;IACEE,SAAS,EAAElB,UAAU,CACnB,uIAAuI,EACvI;MACE,WAAW,EAAEW,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFV,KAAA,CAAAe,aAAA,CAACnB,OAAO;IAACa,IAAI,EAAEZ,WAAW,CAACqB;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;EAAK,CAAE,CACjB,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAAST,aAAa","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/{getOption.js → chartOptions.js}

@@ -4,17 +4,16 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { colorPalette, getGridLines, getLineCommons } from '@oanda/labs-widget-common';
-import * as echarts from 'echarts/core';
-import { CHART_HEIGHT, CHART_WIDTH, INITIAL_END_ZOOM, INITIAL_START_ZOOM, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP } from './constants';
-import { getLabelData, getRectColor, isDifferenceGreaterThanTwoWeeks } from './utils';
+import { CHART_CONFIG } from '../../constants';
+import { getLabelData, getRectColor, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
 export const getOption = (_ref, isDark) => {
   let {
     xAxisData,
-    ordersPositionsChartData,
-    ordersPositionsBucketWidth,
-    candlesSeriesData
+    candlesSeriesData,
+    orderPositionBooks,
+    bucketWidth
   } = _ref;
-  const visibleXAxisData = xAxisData.slice(xAxisData.length * INITIAL_START_ZOOM / 100, xAxisData.length * INITIAL_END_ZOOM / 100);
+  const visibleXAxisData = xAxisData.slice(xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM / 100, xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM / 100);
   const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(visibleXAxisData[0], visibleXAxisData[visibleXAxisData.length - 1]);
   const labelsData = getLabelData({
     xAxisData,
@@ -22,10 +21,10 @@ export const getOption = (_ref, isDark) => {
   });
   const gridLines = getGridLines({
     isDark,
-    chartWidth: CHART_WIDTH,
-    chartHeight: CHART_HEIGHT,
-    xLabelsSize: X_LABEL_SIZE,
-    yLabelSize: Y_LABEL_SIZE_DESKTOP,
+    chartWidth: CHART_CONFIG.WIDTH,
+    chartHeight: CHART_CONFIG.HEIGHT,
+    xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
+    yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,
     bottomLeftBox: false
   });
   return {
@@ -33,20 +32,13 @@ export const getOption = (_ref, isDark) => {
     dataZoom: [{
       type: 'inside',
       xAxisIndex: 0,
-      start: INITIAL_START_ZOOM,
-      end: INITIAL_END_ZOOM
+      start: CHART_CONFIG.INITIAL_START_ZOOM,
+      end: CHART_CONFIG.INITIAL_END_ZOOM
     }],
     tooltip: {
       trigger: 'axis',
-      formatter: val => {
-        const timestamp = val[0].axisValue;
-        return "".concat(new Date(timestamp).toLocaleTimeString(undefined, {
-          hour: '2-digit',
-          minute: '2-digit'
-        }), "\n      ").concat(new Date(timestamp).toLocaleDateString(undefined, {
-          day: 'numeric',
-          month: 'short'
-        }), "\n");
+      axisPointer: {
+        type: 'cross'
       }
     },
     xAxis: {
@@ -58,6 +50,7 @@ export const getOption = (_ref, isDark) => {
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
+        showMinLabel: false,
         formatter: value => {
           const date = new Date(value);
           return isGreaterThanTwoWeeks ? "".concat(date.toLocaleTimeString(undefined, {
@@ -72,7 +65,8 @@ export const getOption = (_ref, isDark) => {
     yAxis: {
       type: 'value',
       position: 'right',
-      scale: true,
+      min: val => val.min - bucketWidth * 2,
+      max: val => val.max + bucketWidth * 2,
       axisLine: {
         show: false
       },
@@ -102,39 +96,48 @@ export const getOption = (_ref, isDark) => {
       name: 'heatmap',
       id: 'heatmap',
       silent: true,
-      renderItem: (params, api) => {
-        const {
-          coordSys
-        } = params;
+      clip: true,
+      renderItem: (_params, api) => {
         const xVal = api.value(0);
-        const yVal = api.value(1);
-        const sentiment = api.value(2);
-        const start = api.coord([xVal, yVal]);
-        const [rectWidth, rectHeight] = api.size([0, ordersPositionsBucketWidth]);
-        const boundaries = coordSys;
-        const shape = echarts.graphic.clipRectByRect({
-          x: start[0] - rectWidth / 2,
-          y: start[1],
-          width: rectWidth,
-          height: rectHeight
-        }, boundaries);
-        return shape && {
-          type: 'rect',
-          shape,
-          style: {
-            fill: getRectColor(sentiment)
-          },
+        const metaValues = JSON.parse(api.value(2));
+        const [rectWidth, rectHeight] = api.size([0, bucketWidth]);
+        const items = metaValues.map(_ref2 => {
+          let {
+            price,
+            sentiment
+          } = _ref2;
+          const start = api.coord([xVal, price]);
+          return {
+            type: 'rect',
+            shape: {
+              x: start[0] - rectWidth / 2,
+              y: start[1],
+              width: rectWidth,
+              height: rectHeight
+            },
+            style: {
+              fill: getRectColor(sentiment),
+              opacity: 0.7
+            },
+            silent: true,
+            emphasisDisabled: true
+          };
+        });
+        return {
+          type: 'group',
+          children: items,
+          silent: true,
           emphasisDisabled: true
         };
       },
-      data: ordersPositionsChartData
+      data: orderPositionBooks
     }],
     grid: [{
       name: 'main-grid',
       top: '0px',
       left: '0px',
-      right: "".concat(Y_LABEL_SIZE_DESKTOP, "px"),
-      bottom: "".concat(X_LABEL_SIZE, "px")
+      right: "".concat(CHART_CONFIG.Y_LABEL_SIZE_DESKTOP, "px"),
+      bottom: "".concat(CHART_CONFIG.X_LABEL_SIZE, "px")
     }],
     graphic: [...gridLines, _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
       top: 0,
@@ -148,4 +151,4 @@ export const getOption = (_ref, isDark) => {
     })]
   };
 };
-//# sourceMappingURL=getOption.js.map
+//# sourceMappingURL=chartOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartOptions.js","names":["colorPalette","getGridLines","getLineCommons","CHART_CONFIG","getLabelData","getRectColor","isDifferenceGreaterThanTwoWeeks","getOption","_ref","isDark","xAxisData","candlesSeriesData","orderPositionBooks","bucketWidth","visibleXAxisData","slice","length","INITIAL_START_ZOOM","INITIAL_END_ZOOM","isGreaterThanTwoWeeks","labelsData","gridLines","chartWidth","WIDTH","chartHeight","HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","bottomLeftBox","animation","dataZoom","type","xAxisIndex","start","end","tooltip","trigger","axisPointer","xAxis","data","axisTick","show","axisLabel","padding","margin","showMinLabel","formatter","value","date","Date","concat","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","yAxis","position","min","val","max","axisLine","showMaxLabel","series","id","itemStyle","color","raspberryLight","color0","bottleGreenLight","markPoint","symbol","symbolSize","name","silent","clip","renderItem","_params","api","xVal","metaValues","JSON","parse","rectWidth","rectHeight","size","items","map","_ref2","price","sentiment","coord","shape","x","y","width","height","style","fill","opacity","emphasisDisabled","children","grid","top","left","right","bottom","graphic","_objectSpread","x1","y1","x2","y2"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/chartOptions.ts"],"sourcesContent":["import {\n  colorPalette,\n  getGridLines,\n  getLineCommons,\n} from '@oanda/labs-widget-common';\n\nimport { CHART_CONFIG } from '../../constants';\nimport type { GetOptionType } from './types';\nimport {\n  getLabelData,\n  getRectColor,\n  isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\n// @ts-expect-error\nexport const getOption: GetOptionType = (\n  { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth },\n  isDark\n) => {\n  const visibleXAxisData = xAxisData.slice(\n    (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,\n    (xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100\n  );\n\n  const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n    visibleXAxisData[0],\n    visibleXAxisData[visibleXAxisData.length - 1]\n  );\n\n  const labelsData = getLabelData({\n    xAxisData,\n    isGreaterThanTwoWeeks,\n  });\n\n  const gridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_CONFIG.WIDTH,\n    chartHeight: CHART_CONFIG.HEIGHT,\n    xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,\n    yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,\n    bottomLeftBox: false,\n  });\n\n  return {\n    animation: false,\n    dataZoom: [\n      {\n        type: 'inside',\n        xAxisIndex: 0,\n        start: CHART_CONFIG.INITIAL_START_ZOOM,\n        end: CHART_CONFIG.INITIAL_END_ZOOM,\n      },\n    ],\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n      },\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisData,\n      axisTick: {\n        show: false,\n      },\n      axisLabel: {\n        padding: [8, 16, 8, 16],\n        margin: 0,\n        showMinLabel: false,\n        formatter: (value) => {\n          const date = new Date(value as string);\n          return isGreaterThanTwoWeeks\n            ? `${date.toLocaleTimeString(undefined, {\n                hour: '2-digit',\n                minute: '2-digit',\n              })}`\n            : `${date.toLocaleDateString(undefined, {\n                day: 'numeric',\n              })}`;\n        },\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      min: (val) => val.min - bucketWidth * 2,\n      max: (val) => val.max + bucketWidth * 2,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: [\n      {\n        type: 'candlestick',\n        id: 'candlestick',\n        data: candlesSeriesData,\n        itemStyle: {\n          color: colorPalette.raspberryLight,\n          color0: colorPalette.bottleGreenLight,\n        },\n        markPoint: {\n          symbol: 'circle',\n          symbolSize: 0,\n          data: labelsData,\n        },\n      },\n      {\n        type: 'custom',\n        name: 'heatmap',\n        id: 'heatmap',\n        silent: true,\n        clip: true,\n        renderItem: (_params, api) => {\n          const xVal = api.value(0);\n          const metaValues = JSON.parse(api.value(2) as string);\n\n          const [rectWidth, rectHeight] = api.size!([\n            0,\n            bucketWidth,\n          ]) as number[];\n\n          const items = metaValues.map(\n            ({ price, sentiment }: { price: number; sentiment: number }) => {\n              const start = api.coord([xVal, price]);\n\n              return {\n                type: 'rect',\n                shape: {\n                  x: start[0] - rectWidth / 2,\n                  y: start[1],\n                  width: rectWidth,\n                  height: rectHeight,\n                },\n                style: {\n                  fill: getRectColor(sentiment),\n                  opacity: 0.7,\n                },\n                silent: true,\n                emphasisDisabled: true,\n              };\n            }\n          );\n\n          return {\n            type: 'group',\n            children: items,\n            silent: true,\n            emphasisDisabled: true,\n          };\n        },\n        data: orderPositionBooks,\n      },\n    ],\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${CHART_CONFIG.Y_LABEL_SIZE_DESKTOP}px`,\n        bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...gridLines,\n      {\n        ...getLineCommons(isDark as boolean),\n        top: 0,\n        right: 0,\n        shape: {\n          x1: 0,\n          y1: 0,\n          x2: 0,\n          y2: 0,\n        },\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,7 @@
 export * from './Chart';
+export * from './chartOptions';
 export * from './ChartWithData';
+export * from './types';
+export * from './useCrowdViewData';
+export * from './utils/chartUtils';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/index.ts"],"sourcesContent":["export * from './Chart';\nexport * from './ChartWithData';\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/index.ts"],"sourcesContent":["export * from './Chart';\nexport * from './chartOptions';\nexport * from './ChartWithData';\nexport * from './types';\nexport * from './useCrowdViewData';\nexport * from './utils/chartUtils';\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,oBAAoB;AAClC,cAAc,oBAAoB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type { BookType } from '../../../gql/types/graphql';\nimport type { GranularityId } from '../../types';\n\ninterface ChartOptionsProps {\n  xAxisData: string[];\n  ordersPositionsChartData: [\n    // timestamp\n    string,\n    // price\n    number,\n    // orders-positions sentiment\n    number,\n  ][];\n  ordersPositionsBucketWidth: number;\n  candlesSeriesData: [number, number, number, number][];\n}\n\nexport type GetOptionType = (\n  props: ChartOptionsProps,\n  isDark: boolean\n) => EChartsOption;\n\nexport interface ChartProps {\n  data: ChartOptionsProps;\n}\n\nexport interface ChartWithDataProps {\n  bookType: BookType;\n  instrument: string;\n  granularity: GranularityId;\n}\n\ninterface TransformDataForChartTypeProps {\n  granularity: GranularityId;\n}\n\nexport type TransformDataForChartType = (\n  props: TransformDataForChartTypeProps\n) => ChartOptionsProps;\n\nexport interface GetLabelsDataProps {\n  xAxisData: string[];\n  isGreaterThanTwoWeeks: boolean;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type {\n  BookType,\n  Division,\n  Granularity,\n} from '../../../gql/types/graphql';\n\nexport interface UseCrowdViewDataProps {\n  instrument: string;\n  bookType: BookType;\n  division: Division;\n  granularity: Granularity;\n}\n\ninterface CrowdViewData {\n  xAxisData: string[];\n  candlesSeriesData: [number, number, number, number][];\n  orderPositionBooks: ([string, number, string] | null)[];\n  bucketWidth: number;\n}\n\nexport interface UseCrowdViewDataReturn {\n  data: CrowdViewData | null;\n  loading: boolean;\n  error: boolean;\n}\n\nexport type GetOptionType = (\n  props: CrowdViewData,\n  isDark: boolean\n) => EChartsOption;\n\nexport interface ChartProps {\n  data: CrowdViewData;\n}\n\nexport interface ChartWithDataProps {\n  bookType: BookType;\n  division: Division;\n  instrument: string;\n  granularity: Granularity;\n}\n\nexport interface GetLabelsDataProps {\n  xAxisData: string[];\n  isGreaterThanTwoWeeks: boolean;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,163 @@
+import { useQuery } from '@apollo/client';
+import { useMemo } from 'react';
+import { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';
+import { getPriceCandles } from '../../../gql/getPriceCandles';
+import { BookType, DataSource, Division } from '../../../gql/types/graphql';
+import { BOOKS_THRESHOLDS, BUCKET_CONFIG } from '../../constants';
+import { getTimeSpanForGranularity } from './utils/chartUtils';
+const processPriceCandles = priceCandlesData => {
+  var _priceCandlesData$pri;
+  if (!(priceCandlesData !== null && priceCandlesData !== void 0 && (_priceCandlesData$pri = priceCandlesData.priceCandles) !== null && _priceCandlesData$pri !== void 0 && (_priceCandlesData$pri = _priceCandlesData$pri.candle) !== null && _priceCandlesData$pri !== void 0 && _priceCandlesData$pri.length)) {
+    return {
+      minPrice: 0,
+      maxPrice: 0,
+      hasValidCandles: false,
+      candleMap: new Map(),
+      candles: []
+    };
+  }
+  const candles = priceCandlesData.priceCandles.candle;
+  let calculatedMinPrice = Number.MAX_VALUE;
+  let calculatedMaxPrice = Number.MIN_VALUE;
+  const candleMap = new Map();
+  candles.forEach(candle => {
+    if (!candle) return;
+    if (candle.high > calculatedMaxPrice) {
+      calculatedMaxPrice = candle.high;
+    }
+    if (candle.low < calculatedMinPrice) {
+      calculatedMinPrice = candle.low;
+    }
+    if (candle.point) {
+      candleMap.set(candle.point, candle);
+    }
+  });
+  return {
+    minPrice: calculatedMinPrice,
+    maxPrice: calculatedMaxPrice,
+    hasValidCandles: true,
+    candleMap,
+    candles
+  };
+};
+const processOrderPositionBooks = (orderPositionData, candleMap) => {
+  var _orderPositionData$or;
+  if (!(orderPositionData !== null && orderPositionData !== void 0 && (_orderPositionData$or = orderPositionData.orderPositionBooks) !== null && _orderPositionData$or !== void 0 && _orderPositionData$or.length)) {
+    return [];
+  }
+  return orderPositionData.orderPositionBooks.filter(book => {
+    var _book$buckets;
+    return book !== null && ((_book$buckets = book.buckets) === null || _book$buckets === void 0 ? void 0 : _book$buckets.length) > 0;
+  }).map(book => {
+    var _candle$high;
+    const filteredBuckets = book.buckets.filter(bucket => {
+      if (!bucket || bucket.sentiment === undefined || bucket.sentiment === null || bucket.price === undefined) {
+        return false;
+      }
+      return Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN;
+    }).map(bucket => ({
+      price: bucket.price,
+      sentiment: bucket.sentiment
+    }));
+    const candle = candleMap.get(book.time);
+    const price = (_candle$high = candle === null || candle === void 0 ? void 0 : candle.high) !== null && _candle$high !== void 0 ? _candle$high : null;
+    return [book.time, price, JSON.stringify(filteredBuckets)];
+  });
+};
+const validateData = (priceCandlesData, orderPositionData, hasValidCandles) => {
+  var _priceCandlesData$pri2, _priceCandlesData$pri3, _orderPositionData$or2, _orderPositionData$or3;
+  const hasValidPriceData = ((_priceCandlesData$pri2 = priceCandlesData === null || priceCandlesData === void 0 || (_priceCandlesData$pri3 = priceCandlesData.priceCandles) === null || _priceCandlesData$pri3 === void 0 || (_priceCandlesData$pri3 = _priceCandlesData$pri3.candle) === null || _priceCandlesData$pri3 === void 0 ? void 0 : _priceCandlesData$pri3.length) !== null && _priceCandlesData$pri2 !== void 0 ? _priceCandlesData$pri2 : 0) >= 1;
+  const hasValidOrderData = ((_orderPositionData$or2 = orderPositionData === null || orderPositionData === void 0 || (_orderPositionData$or3 = orderPositionData.orderPositionBooks) === null || _orderPositionData$or3 === void 0 ? void 0 : _orderPositionData$or3.length) !== null && _orderPositionData$or2 !== void 0 ? _orderPositionData$or2 : 0) >= 1;
+  if (!hasValidPriceData) {
+    return new Error('Insufficient price candle data');
+  }
+  if (!hasValidOrderData) {
+    return new Error('Insufficient order position data');
+  }
+  if (!hasValidCandles) {
+    return new Error('Invalid candle data');
+  }
+  return null;
+};
+export const useCrowdViewData = _ref => {
+  let {
+    instrument,
+    bookType,
+    division,
+    granularity
+  } = _ref;
+  const {
+    loading: priceCandlesLoading,
+    data: priceCandlesData,
+    error: priceCandlesError
+  } = useQuery(getPriceCandles, {
+    variables: {
+      dataSource: division === Division.Oc ? DataSource.V20 : DataSource.Mt5,
+      division,
+      instrument,
+      granularity,
+      timeSpan: getTimeSpanForGranularity(granularity)
+    },
+    fetchPolicy: 'no-cache'
+  });
+  const priceCandlesProcessed = useMemo(() => processPriceCandles(priceCandlesData), [priceCandlesData]);
+  const {
+    minPrice,
+    maxPrice,
+    hasValidCandles,
+    candleMap,
+    candles
+  } = priceCandlesProcessed;
+  const maxBookPrice = useMemo(() => maxPrice + BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER, [maxPrice]);
+  const minBookPrice = useMemo(() => minPrice - BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER, [minPrice]);
+  const {
+    loading: orderPositionLoading,
+    data: orderPositionData,
+    error: orderPositionError
+  } = useQuery(getOrderPositionBooks, {
+    variables: {
+      instrument,
+      bookType: bookType || BookType.Order,
+      timeSpan: getTimeSpanForGranularity(granularity),
+      granularity,
+      maxBookPrice,
+      minBookPrice
+    },
+    fetchPolicy: 'no-cache',
+    skip: priceCandlesLoading || !!priceCandlesError
+  });
+  const loading = priceCandlesLoading || orderPositionLoading;
+  const orderPositionBooks = useMemo(() => processOrderPositionBooks(orderPositionData, candleMap), [orderPositionData, candleMap]);
+  const error = useMemo(() => {
+    if (priceCandlesError) {
+      return new Error("Price candles error: ".concat(priceCandlesError.message));
+    }
+    if (orderPositionError) {
+      return new Error("Order position error: ".concat(orderPositionError.message));
+    }
+    if (loading) {
+      return null;
+    }
+    return validateData(priceCandlesData, orderPositionData, hasValidCandles);
+  }, [priceCandlesError, orderPositionError, loading, priceCandlesData, orderPositionData, hasValidCandles]);
+  const data = useMemo(() => {
+    var _orderPositionData$or4;
+    if (!priceCandlesData || !orderPositionData || error) {
+      return null;
+    }
+    const xAxisData = candles.map(candle => (candle === null || candle === void 0 ? void 0 : candle.point) || '');
+    const candlesSeriesData = candles.map(candle => [(candle === null || candle === void 0 ? void 0 : candle.open) || 0, (candle === null || candle === void 0 ? void 0 : candle.close) || 0, (candle === null || candle === void 0 ? void 0 : candle.low) || 0, (candle === null || candle === void 0 ? void 0 : candle.high) || 0]);
+    return {
+      xAxisData,
+      candlesSeriesData,
+      orderPositionBooks,
+      bucketWidth: ((_orderPositionData$or4 = orderPositionData.orderPositionBooks) === null || _orderPositionData$or4 === void 0 || (_orderPositionData$or4 = _orderPositionData$or4[0]) === null || _orderPositionData$or4 === void 0 ? void 0 : _orderPositionData$or4.bucketWidth) || 0
+    };
+  }, [priceCandlesData, orderPositionData, error, candles, orderPositionBooks]);
+  return {
+    data,
+    loading,
+    error: !!error
+  };
+};
+//# sourceMappingURL=useCrowdViewData.js.map