@oanda/labs-crowd-view-widget 1.0.30 → 1.0.31

package/CHANGELOG.md

@@ -3,6 +3,134 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.31 (2025-08-12)
+
+
+
+## 1.0.212 (2025-08-05)
+
+
+
+## 1.0.211 (2025-08-05)
+
+
+
+## 1.0.210 (2025-07-31)
+
+
+
+## 1.0.209 (2025-07-31)
+
+
+
+## 1.0.208 (2025-07-24)
+
+
+
+## 1.0.207 (2025-07-18)
+
+
+
+## 1.0.206 (2025-07-18)
+
+
+
+## 1.0.205 (2025-07-17)
+
+
+
+## 1.0.204 (2025-07-09)
+
+
+
+## 1.0.203 (2025-06-16)
+
+
+
+## 1.0.202 (2025-06-04)
+
+
+
+## 1.0.201 (2025-06-02)
+
+
+
+## 1.0.200 (2025-05-30)
+
+
+
+## 1.0.199 (2025-05-29)
+
+
+
+## 1.0.198 (2025-05-26)
+
+
+
+## 1.0.197 (2025-05-23)
+
+
+
+## 1.0.196 (2025-05-22)
+
+
+
+## 1.0.195 (2025-05-21)
+
+
+
+## 1.0.194 (2025-05-21)
+
+
+
+## 1.0.193 (2025-05-15)
+
+
+
+## 1.0.192 (2025-05-14)
+
+
+
+## 1.0.191 (2025-04-30)
+
+
+
+## 1.0.190 (2025-04-28)
+
+
+
+## 1.0.189 (2025-04-23)
+
+
+
+## 1.0.188 (2025-04-22)
+
+
+
+## 1.0.187 (2025-04-18)
+
+
+
+## 1.0.186 (2025-04-10)
+
+
+
+## 1.0.185 (2025-04-09)
+
+
+
+## 1.0.184 (2025-04-08)
+
+
+
+## 1.0.183 (2025-04-04)
+
+**Note:** Version bump only for package @oanda/labs-crowd-view-widget
+
+
+
+
+
 ## 1.0.30 (2025-08-05)
 
 

package/dist/main/CrowdViewWidget/Main.js

@@ -62,6 +62,7 @@ const Main = _ref => {
     setSelectedOption: val => setGranularity(val)
   }))), _react.default.createElement(_components.ChartWithData, {
     bookType: bookType,
+    granularity: granularity.id,
     instrument: instrument.id
   }), _react.default.createElement(_components.Legend, {
     longValues: [0.15, 0.25, 0.4, 0.55],

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_labsWidgetCommon","require","_monoI18n","_react","_interopRequireWildcard","_graphql","_components","_config","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","division","instrumentSelectConfigWithDivision","Division","Oc","instrumentSelectConfigOC","instrumentSelectConfig","size","useLayoutProvider","isDesktop","Size","DESKTOP","bookType","setBookType","useState","BookType","Order","instrument","setInstrument","granularity","setGranularity","granularitySelectConfig","lang","useLocale","createElement","Fragment","className","Tabs","mobileFullWidth","activeTab","handleClick","currentTarget","value","items","navigationConfig","labelCallback","cn","Select","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","ChartWithData","id","Legend","longValues","shortValues","exports"],"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 bookType={bookType} instrument={instrument.id} />\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":["_labsWidgetCommon","require","_monoI18n","_react","_interopRequireWildcard","_graphql","_components","_config","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","division","instrumentSelectConfigWithDivision","Division","Oc","instrumentSelectConfigOC","instrumentSelectConfig","size","useLayoutProvider","isDesktop","Size","DESKTOP","bookType","setBookType","useState","BookType","Order","instrument","setInstrument","granularity","setGranularity","granularitySelectConfig","lang","useLocale","createElement","Fragment","className","Tabs","mobileFullWidth","activeTab","handleClick","currentTarget","value","items","navigationConfig","labelCallback","cn","Select","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","ChartWithData","id","Legend","longValues","shortValues","exports"],"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":[]}

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

@@ -12,9 +12,10 @@ var _renderers = require("echarts/renderers");
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("./constants");
 var _getOption = require("./getOption");
+var _utils = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-echarts.use([_components.GridSimpleComponent, _components.GraphicComponent, _charts.BarChart, _renderers.CanvasRenderer, _components.DataZoomInsideComponent, _charts.CustomChart, _components.TooltipComponent, _charts.CandlestickChart]);
+echarts.use([_components.GridSimpleComponent, _components.GraphicComponent, _charts.BarChart, _renderers.CanvasRenderer, _components.DataZoomInsideComponent, _charts.CustomChart, _components.TooltipComponent, _charts.CandlestickChart, _components.MarkPointComponent]);
 echarts.registerTheme('dark_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Dark));
 echarts.registerTheme('light_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Light));
 const Chart = _ref => {
@@ -31,13 +32,78 @@ const Chart = _ref => {
       echartInstance.setOption((0, _getOption.getDesktopOption)({
         isDark
       }));
+      echartInstance.off('datazoom');
+      echartInstance.on('datazoom', () => {
+        const {
+          dataZoom,
+          title: {
+            text
+          }
+        } = echartInstance.getOption();
+        const {
+          start,
+          end
+        } = dataZoom[0];
+        const prevInterval = Number(text.split(',')[0]);
+        const prevIsGreaterThanTwoWeeks = Boolean(Number(text.split(',')[1]));
+        const visibleItemsCount = Math.round(data.xAxisData.length * (end - start) / 100);
+        const interval = visibleItemsCount > _constants.MAX_LABELS_COUNT ? Math.floor(visibleItemsCount / _constants.MAX_LABELS_COUNT) : 0;
+        if (interval !== prevInterval) {
+          echartInstance.setOption({
+            xAxis: {
+              axisLabel: {
+                interval
+              }
+            }
+          });
+        }
+        const visibleXAxisData = data.xAxisData.slice(data.xAxisData.length * start / 100, data.xAxisData.length * end / 100);
+        const isGreaterThanTwoWeeks = (0, _utils.isDifferenceGreaterThanTwoWeeks)(visibleXAxisData[0], visibleXAxisData[visibleXAxisData.length - 1]);
+        if (isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {
+          const labelsData = (0, _utils.getLabelData)({
+            xAxisData: data.xAxisData,
+            isGreaterThanTwoWeeks
+          });
+          echartInstance.setOption({
+            series: [{
+              id: 'candlestick',
+              markPoint: {
+                data: labelsData
+              }
+            }]
+          });
+          echartInstance.setOption({
+            xAxis: {
+              axisLabel: {
+                formatter: value => {
+                  const date = new Date(value);
+                  return isGreaterThanTwoWeeks ? `${date.toLocaleTimeString(undefined, {
+                    hour: '2-digit',
+                    minute: '2-digit'
+                  })}` : `${date.toLocaleDateString(undefined, {
+                    day: 'numeric'
+                  })}`;
+                }
+              }
+            }
+          });
+        }
+        if (interval !== prevInterval || isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {
+          echartInstance.setOption({
+            title: {
+              text: `${interval},${isGreaterThanTwoWeeks ? 1 : 0}`
+            }
+          });
+        }
+      });
     }
-  }, [echartRef, isDark]);
+  }, [echartRef, isDark, data]);
   return _react.default.createElement(_labsWidgetCommon.BaseChart, {
     ref: echartRef,
     chartHeight: _constants.CHART_HEIGHT,
     echarts: echarts,
     isDark: isDark,
+    lazyUpdate: true,
     option: (0, _getOption.getOption)(data)
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_charts","_components","echarts","_interopRequireWildcard","_renderers","_react","_constants","_getOption","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","BarChart","CanvasRenderer","DataZoomInsideComponent","CustomChart","TooltipComponent","CandlestickChart","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","data","isDark","useLayoutProvider","echartRef","useRef","useEffect","current","echartInstance","getEchartsInstance","setOption","getDesktopOption","createElement","BaseChart","ref","chartHeight","CHART_HEIGHT","option","getOption","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import type { BaseChartRef } from '@oanda/labs-widget-common';\nimport {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';\nimport {\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React, { useEffect, useRef } from 'react';\n\nimport { CHART_HEIGHT } from './constants';\nimport { getDesktopOption, getOption } from './getOption';\nimport type { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  BarChart,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\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  const echartRef = useRef<BaseChartRef | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(getDesktopOption({ isDark }));\n    }\n  }, [echartRef, isDark]);\n\n  return (\n    <BaseChart\n      ref={echartRef}\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      option={getOption(data)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_charts","_components","echarts","_interopRequireWildcard","_renderers","_react","_constants","_getOption","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","BarChart","CanvasRenderer","DataZoomInsideComponent","CustomChart","TooltipComponent","CandlestickChart","MarkPointComponent","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","data","isDark","useLayoutProvider","echartRef","useRef","useEffect","current","echartInstance","getEchartsInstance","setOption","getDesktopOption","off","on","dataZoom","title","text","getOption","start","end","prevInterval","Number","split","prevIsGreaterThanTwoWeeks","Boolean","visibleItemsCount","Math","round","xAxisData","length","interval","MAX_LABELS_COUNT","floor","xAxis","axisLabel","visibleXAxisData","slice","isGreaterThanTwoWeeks","isDifferenceGreaterThanTwoWeeks","labelsData","getLabelData","series","id","markPoint","formatter","value","date","Date","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","createElement","BaseChart","ref","chartHeight","CHART_HEIGHT","lazyUpdate","option","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import type { BaseChartRef } from '@oanda/labs-widget-common';\nimport {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\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, { useEffect, useRef } from 'react';\n\nimport { CHART_HEIGHT, MAX_LABELS_COUNT } from './constants';\nimport { getDesktopOption, 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  const echartRef = useRef<BaseChartRef | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(getDesktopOption({ isDark }));\n\n      echartInstance.off('datazoom');\n      echartInstance.on('datazoom', () => {\n        const {\n          dataZoom,\n          // @ts-ignore\n          title: { text },\n        } = echartInstance.getOption();\n\n        const { start, end } = (\n          dataZoom as { start: number; end: number }[]\n        )[0];\n        const prevInterval = Number((text as string).split(',')[0]);\n        const prevIsGreaterThanTwoWeeks = Boolean(\n          Number((text as string).split(',')[1])\n        );\n\n        const visibleItemsCount = Math.round(\n          (data.xAxisData.length * (end - start)) / 100\n        );\n\n        const interval =\n          visibleItemsCount > MAX_LABELS_COUNT\n            ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)\n            : 0;\n\n        if (interval !== prevInterval) {\n          echartInstance.setOption({\n            xAxis: {\n              axisLabel: {\n                interval,\n              },\n            },\n          });\n        }\n\n        const visibleXAxisData = data.xAxisData.slice(\n          (data.xAxisData.length * start) / 100,\n          (data.xAxisData.length * end) / 100\n        );\n\n        const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n          visibleXAxisData[0],\n          visibleXAxisData[visibleXAxisData.length - 1]\n        );\n\n        if (isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {\n          const labelsData = getLabelData({\n            xAxisData: data.xAxisData,\n            isGreaterThanTwoWeeks,\n          });\n\n          echartInstance.setOption({\n            series: [\n              {\n                id: 'candlestick',\n                markPoint: {\n                  data: labelsData,\n                },\n              },\n            ],\n          });\n\n          echartInstance.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          });\n        }\n\n        if (\n          interval !== prevInterval ||\n          isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks\n        ) {\n          echartInstance.setOption({\n            title: {\n              text: `${interval},${isGreaterThanTwoWeeks ? 1 : 0}`,\n            },\n          });\n        }\n      });\n    }\n  }, [echartRef, isDark, data]);\n\n  return (\n    <BaseChart\n      ref={echartRef}\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={getOption(data)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}

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

@@ -17,7 +17,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ChartWithData = _ref => {
   let {
     instrument,
-    bookType
+    bookType,
+    granularity
   } = _ref;
   const {
     size
@@ -38,8 +39,11 @@ const ChartWithData = _ref => {
   const isError = !!error;
   const transformedData = (0, _react.useMemo)(() => {
     if (!data) return undefined;
-    return (0, _utils.transformDataForChart)(data);
-  }, [data]);
+    return (0, _utils.transformDataForChart)({
+      data,
+      granularity
+    });
+  }, [data, granularity]);
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
     className: (0, _classnames.default)('lw-relative lw-w-full', {
       'lw-h-[450px]': isDesktop,

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

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["_client","require","_labsWidgetCommon","_classnames","_interopRequireDefault","_react","_interopRequireWildcard","_getOrderPositionBooks","_Chart","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ChartWithData","_ref","instrument","bookType","size","useLayoutProvider","isDesktop","Size","DESKTOP","loading","data","error","useQuery","getOrderPositionBooks","variables","recentHours","fetchPolicy","isError","transformedData","useMemo","undefined","transformDataForChart","createElement","Fragment","className","classnames","ChartError","Spinner","SpinnerSize","lg","Chart","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport type {\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables,\n} from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport {\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 { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { transformDataForChart } from './utils';\n\nconst ChartWithData = ({ instrument, bookType }: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const { loading, data, error } = useQuery<\n    GetOrderPositionBooksQuery,\n    GetOrderPositionBooksQueryVariables\n  >(getOrderPositionBooks, {\n    variables: {\n      instrument,\n      bookType,\n      recentHours: 1,\n    },\n    fetchPolicy: 'network-only',\n  });\n\n  const isError = !!error;\n\n  const transformedData = useMemo(() => {\n    if (!data) return undefined;\n    return transformDataForChart(data);\n  }, [data]);\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":"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","ignoreList":[]}
+{"version":3,"file":"ChartWithData.js","names":["_client","require","_labsWidgetCommon","_classnames","_interopRequireDefault","_react","_interopRequireWildcard","_getOrderPositionBooks","_Chart","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ChartWithData","_ref","instrument","bookType","granularity","size","useLayoutProvider","isDesktop","Size","DESKTOP","loading","data","error","useQuery","getOrderPositionBooks","variables","recentHours","fetchPolicy","isError","transformedData","useMemo","undefined","transformDataForChart","createElement","Fragment","className","classnames","ChartError","Spinner","SpinnerSize","lg","Chart","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport type {\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables,\n} from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport {\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 { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';\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 { loading, data, error } = useQuery<\n    GetOrderPositionBooksQuery,\n    GetOrderPositionBooksQueryVariables\n  >(getOrderPositionBooks, {\n    variables: {\n      instrument,\n      bookType,\n      recentHours: 1,\n    },\n    fetchPolicy: 'network-only',\n  });\n\n  const isError = !!error;\n\n  const transformedData = useMemo(() => {\n    if (!data) return undefined;\n    return transformDataForChart({ data, granularity });\n  }, [data, granularity]);\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,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAOA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAC,uBAAA,CAAAL,OAAA;AAEA,IAAAM,sBAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAEA,IAAAQ,MAAA,GAAAR,OAAA;AAAgD,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAf,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAI,UAAA,GAAAJ,CAAA,KAAAK,OAAA,EAAAL,CAAA;AAEhD,MAAMmB,aAAa,GAAGC,IAAA,IAII;EAAA,IAJH;IACrBC,UAAU;IACVC,QAAQ;IACRC;EACkB,CAAC,GAAAH,IAAA;EACnB,MAAM;IAAEI;EAAK,CAAC,GAAG,IAAAC,mCAAiB,EAAC,CAAC;EACpC,MAAMC,SAAS,GAAGF,IAAI,KAAKG,sBAAI,CAACC,OAAO;EAEvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,gBAAQ,EAGvCC,4CAAqB,EAAE;IACvBC,SAAS,EAAE;MACTb,UAAU;MACVC,QAAQ;MACRa,WAAW,EAAE;IACf,CAAC;IACDC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAG,CAAC,CAACN,KAAK;EAEvB,MAAMO,eAAe,GAAG,IAAAC,cAAO,EAAC,MAAM;IACpC,IAAI,CAACT,IAAI,EAAE,OAAOU,SAAS;IAC3B,OAAO,IAAAC,4BAAqB,EAAC;MAAEX,IAAI;MAAEP;IAAY,CAAC,CAAC;EACrD,CAAC,EAAE,CAACO,IAAI,EAAEP,WAAW,CAAC,CAAC;EAEvB,OACE7B,MAAA,CAAAW,OAAA,CAAAqC,aAAA,CAAAhD,MAAA,CAAAW,OAAA,CAAAsC,QAAA,QACEjD,MAAA,CAAAW,OAAA,CAAAqC,aAAA;IACEE,SAAS,EAAE,IAAAC,mBAAU,EAAC,uBAAuB,EAAE;MAC7C,cAAc,EAAEnB,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEFW,OAAO,IACN3C,MAAA,CAAAW,OAAA,CAAAqC,aAAA;IACEE,SAAS,EAAE,IAAAC,mBAAU,EACnB,uIAAuI,EACvI;MACE,WAAW,EAAEnB,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFhC,MAAA,CAAAW,OAAA,CAAAqC,aAAA,CAACnD,iBAAA,CAAAuD,UAAU,MAAE,CACV,CACN,EACAjB,OAAO,IACNnC,MAAA,CAAAW,OAAA,CAAAqC,aAAA;IACEE,SAAS,EAAE,IAAAC,mBAAU,EACnB,uIAAuI,EACvI;MACE,WAAW,EAAEnB,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EAAE,GAEFhC,MAAA,CAAAW,OAAA,CAAAqC,aAAA,CAACnD,iBAAA,CAAAwD,OAAO;IAACvB,IAAI,EAAEwB,6BAAW,CAACC;EAAG,CAAE,CAC7B,CACN,EACA,CAACZ,OAAO,IAAIC,eAAe,IAC1B5C,MAAA,CAAAW,OAAA,CAAAqC,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzElD,MAAA,CAAAW,OAAA,CAAAqC,aAAA,CAAC7C,MAAA,CAAAqD,KAAK;IAACpB,IAAI,EAAEQ;EAAgB,CAAE,CAC5B,CAEJ,CACL,CAAC;AAEP,CAAC;AAACa,OAAA,CAAAhC,aAAA,GAAAA,aAAA","ignoreList":[]}

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

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Y_LABEL_SIZE_DESKTOP = exports.X_LABEL_SIZE = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
+exports.Y_LABEL_SIZE_DESKTOP = exports.X_LABEL_SIZE = exports.MAX_LABELS_COUNT = exports.INITIAL_START_ZOOM = exports.INITIAL_END_ZOOM = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
 const X_LABEL_SIZE = exports.X_LABEL_SIZE = 40;
 const Y_LABEL_SIZE_DESKTOP = exports.Y_LABEL_SIZE_DESKTOP = 60;
 const CHART_WIDTH = exports.CHART_WIDTH = 9999;
 const CHART_HEIGHT = exports.CHART_HEIGHT = 425;
+const INITIAL_START_ZOOM = exports.INITIAL_START_ZOOM = 80;
+const INITIAL_END_ZOOM = exports.INITIAL_END_ZOOM = 100;
+const MAX_LABELS_COUNT = exports.MAX_LABELS_COUNT = 14;
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["X_LABEL_SIZE","exports","Y_LABEL_SIZE_DESKTOP","CHART_WIDTH","CHART_HEIGHT"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/constants.tsx"],"sourcesContent":["export const X_LABEL_SIZE = 40;\nexport const Y_LABEL_SIZE_DESKTOP = 60;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 425;\n"],"mappings":";;;;;;AAAO,MAAMA,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,oBAAoB,GAAAD,OAAA,CAAAC,oBAAA,GAAG,EAAE;AAC/B,MAAMC,WAAW,GAAAF,OAAA,CAAAE,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,GAAG","ignoreList":[]}
+{"version":3,"file":"constants.js","names":["X_LABEL_SIZE","exports","Y_LABEL_SIZE_DESKTOP","CHART_WIDTH","CHART_HEIGHT","INITIAL_START_ZOOM","INITIAL_END_ZOOM","MAX_LABELS_COUNT"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/constants.tsx"],"sourcesContent":["export const X_LABEL_SIZE = 40;\nexport const Y_LABEL_SIZE_DESKTOP = 60;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 425;\n\nexport const INITIAL_START_ZOOM = 80;\nexport const INITIAL_END_ZOOM = 100;\nexport const MAX_LABELS_COUNT = 14;\n"],"mappings":";;;;;;AAAO,MAAMA,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,oBAAoB,GAAAD,OAAA,CAAAC,oBAAA,GAAG,EAAE;AAC/B,MAAMC,WAAW,GAAAF,OAAA,CAAAE,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,GAAG;AAExB,MAAMC,kBAAkB,GAAAJ,OAAA,CAAAI,kBAAA,GAAG,EAAE;AAC7B,MAAMC,gBAAgB,GAAAL,OAAA,CAAAK,gBAAA,GAAG,GAAG;AAC5B,MAAMC,gBAAgB,GAAAN,OAAA,CAAAM,gBAAA,GAAG,EAAE","ignoreList":[]}

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

@@ -60,22 +60,40 @@ const getOption = _ref2 => {
     ordersPositionsBucketWidth,
     candlesSeriesData
   } = _ref2;
+  const visibleXAxisData = xAxisData.slice(xAxisData.length * _constants.INITIAL_START_ZOOM / 100, xAxisData.length * _constants.INITIAL_END_ZOOM / 100);
+  const isGreaterThanTwoWeeks = (0, _utils.isDifferenceGreaterThanTwoWeeks)(visibleXAxisData[0], visibleXAxisData[visibleXAxisData.length - 1]);
+  const labelsData = (0, _utils.getLabelData)({
+    xAxisData,
+    isGreaterThanTwoWeeks
+  });
+  const visibleItemsCount = Math.round(xAxisData.length * (_constants.INITIAL_END_ZOOM - _constants.INITIAL_START_ZOOM) / 100);
+  const initialInterval = visibleItemsCount > _constants.MAX_LABELS_COUNT ? Math.floor(visibleItemsCount / _constants.MAX_LABELS_COUNT) : 0;
   return {
+    title: {
+      show: false,
+      text: `${initialInterval},${isGreaterThanTwoWeeks}`
+    },
     animation: false,
     dataZoom: [{
       type: 'inside',
       xAxisIndex: 0,
-      start: 80,
-      end: 100
-    }, {
-      type: 'inside',
-      yAxisIndex: 0,
-      startValue: 1.5,
-      endValue: 1.7
+      start: _constants.INITIAL_START_ZOOM,
+      end: _constants.INITIAL_END_ZOOM
     }],
     tooltip: {
       trigger: 'axis',
-      formatter: '{c}'
+      formatter: val => {
+        const timestamp = val[0].axisValue;
+        return `${new Date(timestamp).toLocaleTimeString(undefined, {
+          hour: '2-digit',
+          minute: '2-digit'
+        })}
+      ${new Date(timestamp).toLocaleDateString(undefined, {
+          day: 'numeric',
+          month: 'short'
+        })}
+`;
+      }
     },
     xAxis: {
       type: 'category',
@@ -86,15 +104,22 @@ const getOption = _ref2 => {
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
-        formatter: value => `${new Date(value).toLocaleTimeString(undefined, {
-          hour: '2-digit',
-          minute: '2-digit'
-        })}`
+        interval: initialInterval,
+        formatter: value => {
+          const date = new Date(value);
+          return isGreaterThanTwoWeeks ? `${date.toLocaleTimeString(undefined, {
+            hour: '2-digit',
+            minute: '2-digit'
+          })}` : `${date.toLocaleDateString(undefined, {
+            day: 'numeric'
+          })}`;
+        }
       }
     },
     yAxis: {
       type: 'value',
       position: 'right',
+      scale: true,
       axisLine: {
         show: false
       },
@@ -108,14 +133,21 @@ const getOption = _ref2 => {
     },
     series: [{
       type: 'candlestick',
+      id: 'candlestick',
       data: candlesSeriesData,
       itemStyle: {
         color: _labsWidgetCommon.colorPalette.raspberryLight,
         color0: _labsWidgetCommon.colorPalette.bottleGreenLight
+      },
+      markPoint: {
+        symbol: 'circle',
+        symbolSize: 0,
+        data: labelsData
       }
     }, {
       type: 'custom',
       name: 'heatmap',
+      id: 'heatmap',
       silent: true,
       renderItem: (params, api) => {
         const {

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

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","echarts","_interopRequireWildcard","_constants","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getDesktopOption","_ref","isDark","desktopGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","bottomLeftBox","yAxis","nameTextStyle","align","padding","axisLabel","margin","grid","name","top","left","right","bottom","graphic","getLineCommons","shape","x1","y1","x2","y2","exports","getOption","_ref2","xAxisData","ordersPositionsChartData","ordersPositionsBucketWidth","candlesSeriesData","animation","dataZoom","type","xAxisIndex","start","end","yAxisIndex","startValue","endValue","tooltip","trigger","formatter","xAxis","data","axisTick","show","value","Date","toLocaleTimeString","undefined","hour","minute","position","axisLine","showMaxLabel","showMinLabel","series","itemStyle","color","colorPalette","raspberryLight","color0","bottleGreenLight","silent","renderItem","params","api","coordSys","xVal","yVal","sentiment","coord","rectWidth","rectHeight","size","boundaries","clipRectByRect","x","y","width","height","style","fill","getRectColor","emphasisDisabled"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/getOption.ts"],"sourcesContent":["import {\n  colorPalette,\n  getGridLines,\n  getLineCommons,\n} from '@oanda/labs-widget-common';\nimport * as echarts from 'echarts/core';\n\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n} from './constants';\nimport type { GetOptionType, GetResponsiveOptionsProps } from './types';\nimport { getRectColor } from './utils';\n\nexport const getDesktopOption = ({ isDark }: GetResponsiveOptionsProps) => {\n  const desktopGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_DESKTOP,\n    bottomLeftBox: false,\n  });\n\n  return {\n    yAxis: {\n      nameTextStyle: {\n        align: 'left',\n        padding: [0, 0, 0, 8],\n      },\n      axisLabel: {\n        margin: 8,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_DESKTOP}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...desktopGridLines,\n      {\n        ...getLineCommons(isDark),\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\nexport const getOption: GetOptionType = ({\n  xAxisData,\n  ordersPositionsChartData,\n  ordersPositionsBucketWidth,\n  candlesSeriesData,\n}) => {\n  return {\n    animation: false,\n    dataZoom: [\n      {\n        type: 'inside',\n        xAxisIndex: 0,\n        start: 80,\n        end: 100,\n      },\n      {\n        type: 'inside',\n        yAxisIndex: 0,\n        startValue: 1.5,\n        endValue: 1.7,\n      },\n    ],\n    tooltip: {\n      trigger: 'axis',\n      formatter: '{c}',\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        formatter: (value) =>\n          `${new Date(value).toLocaleTimeString(undefined, {\n            hour: '2-digit',\n            minute: '2-digit',\n          })}`,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\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        data: candlesSeriesData,\n        itemStyle: {\n          color: colorPalette.raspberryLight,\n          color0: colorPalette.bottleGreenLight,\n        },\n      },\n      {\n        type: 'custom',\n        name: 'heatmap',\n        silent: true,\n        renderItem: (params, api) => {\n          const { coordSys } = params;\n\n          const xVal = api.value(0);\n          const yVal = api.value(1);\n          const sentiment = api.value(2) as number;\n          const start = api.coord([xVal, yVal]);\n\n          const [rectWidth, rectHeight] = api.size!([\n            0,\n            ordersPositionsBucketWidth,\n          ]) as number[];\n\n          const boundaries = coordSys as unknown as {\n            x: number;\n            y: number;\n            width: number;\n            height: number;\n          };\n\n          const shape = echarts.graphic.clipRectByRect(\n            {\n              x: start[0] - rectWidth / 2,\n              y: start[1],\n              width: rectWidth,\n              height: rectHeight,\n            },\n            boundaries\n          );\n          return (\n            shape && {\n              type: 'rect',\n              shape,\n              style: {\n                fill: getRectColor(sentiment),\n              },\n              emphasisDisabled: true,\n            }\n          );\n        },\n        data: ordersPositionsChartData,\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","echarts","_interopRequireWildcard","_constants","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getDesktopOption","_ref","isDark","desktopGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","bottomLeftBox","yAxis","nameTextStyle","align","padding","axisLabel","margin","grid","name","top","left","right","bottom","graphic","getLineCommons","shape","x1","y1","x2","y2","exports","getOption","_ref2","xAxisData","ordersPositionsChartData","ordersPositionsBucketWidth","candlesSeriesData","visibleXAxisData","slice","length","INITIAL_START_ZOOM","INITIAL_END_ZOOM","isGreaterThanTwoWeeks","isDifferenceGreaterThanTwoWeeks","labelsData","getLabelData","visibleItemsCount","Math","round","initialInterval","MAX_LABELS_COUNT","floor","title","show","text","animation","dataZoom","type","xAxisIndex","start","end","tooltip","trigger","formatter","val","timestamp","axisValue","Date","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","month","xAxis","data","axisTick","interval","value","date","position","scale","axisLine","showMaxLabel","showMinLabel","series","id","itemStyle","color","colorPalette","raspberryLight","color0","bottleGreenLight","markPoint","symbol","symbolSize","silent","renderItem","params","api","coordSys","xVal","yVal","sentiment","coord","rectWidth","rectHeight","size","boundaries","clipRectByRect","x","y","width","height","style","fill","getRectColor","emphasisDisabled"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/getOption.ts"],"sourcesContent":["import {\n  colorPalette,\n  getGridLines,\n  getLineCommons,\n} from '@oanda/labs-widget-common';\nimport * as echarts from 'echarts/core';\n\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  INITIAL_END_ZOOM,\n  INITIAL_START_ZOOM,\n  MAX_LABELS_COUNT,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n} from './constants';\nimport type { GetOptionType, GetResponsiveOptionsProps } from './types';\nimport {\n  getLabelData,\n  getRectColor,\n  isDifferenceGreaterThanTwoWeeks,\n} from './utils';\n\nexport const getDesktopOption = ({ isDark }: GetResponsiveOptionsProps) => {\n  const desktopGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_DESKTOP,\n    bottomLeftBox: false,\n  });\n\n  return {\n    yAxis: {\n      nameTextStyle: {\n        align: 'left',\n        padding: [0, 0, 0, 8],\n      },\n      axisLabel: {\n        margin: 8,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_DESKTOP}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...desktopGridLines,\n      {\n        ...getLineCommons(isDark),\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\n// @ts-ignore\nexport const getOption: GetOptionType = ({\n  xAxisData,\n  ordersPositionsChartData,\n  ordersPositionsBucketWidth,\n  candlesSeriesData,\n}) => {\n  const visibleXAxisData = xAxisData.slice(\n    (xAxisData.length * INITIAL_START_ZOOM) / 100,\n    (xAxisData.length * INITIAL_END_ZOOM) / 100\n  );\n\n  const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n    visibleXAxisData[0],\n    visibleXAxisData[visibleXAxisData.length - 1]\n  );\n  const labelsData = getLabelData({\n    xAxisData,\n    isGreaterThanTwoWeeks,\n  });\n\n  const visibleItemsCount = Math.round(\n    (xAxisData.length * (INITIAL_END_ZOOM - INITIAL_START_ZOOM)) / 100\n  );\n\n  const initialInterval =\n    visibleItemsCount > MAX_LABELS_COUNT\n      ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)\n      : 0;\n\n  return {\n    title: {\n      show: false,\n      text: `${initialInterval},${isGreaterThanTwoWeeks}`,\n    },\n    animation: false,\n    dataZoom: [\n      {\n        type: 'inside',\n        xAxisIndex: 0,\n        start: INITIAL_START_ZOOM,\n        end: INITIAL_END_ZOOM,\n      },\n    ],\n    tooltip: {\n      trigger: 'axis',\n      formatter: (val) => {\n        // @ts-ignore\n        const timestamp = val[0].axisValue as string;\n\n        return `${new Date(timestamp).toLocaleTimeString(undefined, {\n          hour: '2-digit',\n          minute: '2-digit',\n        })}\n      ${new Date(timestamp).toLocaleDateString(undefined, {\n        day: 'numeric',\n        month: 'short',\n      })}\n`;\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        interval: initialInterval,\n        formatter: (value) => {\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    yAxis: {\n      type: 'value',\n      position: 'right',\n      scale: true,\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        renderItem: (params, api) => {\n          const { coordSys } = params;\n          const xVal = api.value(0);\n          const yVal = api.value(1);\n          const sentiment = api.value(2) as number;\n          const start = api.coord([xVal, yVal]);\n          const [rectWidth, rectHeight] = api.size!([\n            0,\n            ordersPositionsBucketWidth,\n          ]) as number[];\n          const boundaries = coordSys as unknown as {\n            x: number;\n            y: number;\n            width: number;\n            height: number;\n          };\n          const shape = echarts.graphic.clipRectByRect(\n            {\n              x: start[0] - rectWidth / 2,\n              y: start[1],\n              width: rectWidth,\n              height: rectHeight,\n            },\n            boundaries\n          );\n          return (\n            shape && {\n              type: 'rect',\n              shape,\n              style: {\n                fill: getRectColor(sentiment),\n              },\n              emphasisDisabled: true,\n            }\n          );\n        },\n        data: ordersPositionsChartData,\n      },\n    ],\n  };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AAUA,IAAAI,MAAA,GAAAJ,OAAA;AAIiB,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEV,MAAMW,gBAAgB,GAAGC,IAAA,IAA2C;EAAA,IAA1C;IAAEC;EAAkC,CAAC,GAAAD,IAAA;EACpE,MAAME,gBAAgB,GAAG,IAAAC,8BAAY,EAAC;IACpCF,MAAM;IACNG,UAAU,EAAEC,sBAAW;IACvBC,WAAW,EAAEC,uBAAY;IACzBC,WAAW,EAAEC,uBAAY;IACzBC,UAAU,EAAEC,+BAAoB;IAChCC,aAAa,EAAE;EACjB,CAAC,CAAC;EAEF,OAAO;IACLC,KAAK,EAAE;MACLC,aAAa,EAAE;QACbC,KAAK,EAAE,MAAM;QACbC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;MACtB,CAAC;MACDC,SAAS,EAAE;QACTC,MAAM,EAAE;MACV;IACF,CAAC;IACDC,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE,GAAGZ,+BAAoB,IAAI;MAClCa,MAAM,EAAE,GAAGf,uBAAY;IACzB,CAAC,CACF;IACDgB,OAAO,EAAE,CACP,GAAGvB,gBAAgB,EACnB;MACE,GAAG,IAAAwB,gCAAc,EAACzB,MAAM,CAAC;MACzBoB,GAAG,EAAE,CAAC;MACNE,KAAK,EAAE,CAAC;MACRI,KAAK,EAAE;QACLC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE;MACN;IACF,CAAC;EAEL,CAAC;AACH,CAAC;AAACC,OAAA,CAAAjC,gBAAA,GAAAA,gBAAA;AAGK,MAAMkC,SAAwB,GAAGC,KAAA,IAKlC;EAAA,IALmC;IACvCC,SAAS;IACTC,wBAAwB;IACxBC,0BAA0B;IAC1BC;EACF,CAAC,GAAAJ,KAAA;EACC,MAAMK,gBAAgB,GAAGJ,SAAS,CAACK,KAAK,CACrCL,SAAS,CAACM,MAAM,GAAGC,6BAAkB,GAAI,GAAG,EAC5CP,SAAS,CAACM,MAAM,GAAGE,2BAAgB,GAAI,GAC1C,CAAC;EAED,MAAMC,qBAAqB,GAAG,IAAAC,sCAA+B,EAC3DN,gBAAgB,CAAC,CAAC,CAAC,EACnBA,gBAAgB,CAACA,gBAAgB,CAACE,MAAM,GAAG,CAAC,CAC9C,CAAC;EACD,MAAMK,UAAU,GAAG,IAAAC,mBAAY,EAAC;IAC9BZ,SAAS;IACTS;EACF,CAAC,CAAC;EAEF,MAAMI,iBAAiB,GAAGC,IAAI,CAACC,KAAK,CACjCf,SAAS,CAACM,MAAM,IAAIE,2BAAgB,GAAGD,6BAAkB,CAAC,GAAI,GACjE,CAAC;EAED,MAAMS,eAAe,GACnBH,iBAAiB,GAAGI,2BAAgB,GAChCH,IAAI,CAACI,KAAK,CAACL,iBAAiB,GAAGI,2BAAgB,CAAC,GAChD,CAAC;EAEP,OAAO;IACLE,KAAK,EAAE;MACLC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,GAAGL,eAAe,IAAIP,qBAAqB;IACnD,CAAC;IACDa,SAAS,EAAE,KAAK;IAChBC,QAAQ,EAAE,CACR;MACEC,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAE,CAAC;MACbC,KAAK,EAAEnB,6BAAkB;MACzBoB,GAAG,EAAEnB;IACP,CAAC,CACF;IACDoB,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,SAAS,EAAGC,GAAG,IAAK;QAElB,MAAMC,SAAS,GAAGD,GAAG,CAAC,CAAC,CAAC,CAACE,SAAmB;QAE5C,OAAO,GAAG,IAAIC,IAAI,CAACF,SAAS,CAAC,CAACG,kBAAkB,CAACC,SAAS,EAAE;UAC1DC,IAAI,EAAE,SAAS;UACfC,MAAM,EAAE;QACV,CAAC,CAAC;AACV,QAAQ,IAAIJ,IAAI,CAACF,SAAS,CAAC,CAACO,kBAAkB,CAACH,SAAS,EAAE;UAClDI,GAAG,EAAE,SAAS;UACdC,KAAK,EAAE;QACT,CAAC,CAAC;AACR,CAAC;MACK;IACF,CAAC;IACDC,KAAK,EAAE;MACLlB,IAAI,EAAE,UAAU;MAChBmB,IAAI,EAAE3C,SAAS;MACf4C,QAAQ,EAAE;QACRxB,IAAI,EAAE;MACR,CAAC;MACDtC,SAAS,EAAE;QACTD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;QACvBE,MAAM,EAAE,CAAC;QACT8D,QAAQ,EAAE7B,eAAe;QACzBc,SAAS,EAAGgB,KAAK,IAAK;UACpB,MAAMC,IAAI,GAAG,IAAIb,IAAI,CAACY,KAAK,CAAC;UAC5B,OAAOrC,qBAAqB,GACxB,GAAGsC,IAAI,CAACZ,kBAAkB,CAACC,SAAS,EAAE;YACpCC,IAAI,EAAE,SAAS;YACfC,MAAM,EAAE;UACV,CAAC,CAAC,EAAE,GACJ,GAAGS,IAAI,CAACR,kBAAkB,CAACH,SAAS,EAAE;YACpCI,GAAG,EAAE;UACP,CAAC,CAAC,EAAE;QACV;MACF;IACF,CAAC;IACD9D,KAAK,EAAE;MACL8C,IAAI,EAAE,OAAO;MACbwB,QAAQ,EAAE,OAAO;MACjBC,KAAK,EAAE,IAAI;MACXC,QAAQ,EAAE;QAAE9B,IAAI,EAAE;MAAM,CAAC;MACzBwB,QAAQ,EAAE;QAAExB,IAAI,EAAE;MAAM,CAAC;MACzBtC,SAAS,EAAE;QACTqE,YAAY,EAAE,KAAK;QACnBC,YAAY,EAAE;MAChB;IACF,CAAC;IACDC,MAAM,EAAE,CACN;MACE7B,IAAI,EAAE,aAAa;MACnB8B,EAAE,EAAE,aAAa;MACjBX,IAAI,EAAExC,iBAAiB;MACvBoD,SAAS,EAAE;QACTC,KAAK,EAAEC,8BAAY,CAACC,cAAc;QAClCC,MAAM,EAAEF,8BAAY,CAACG;MACvB,CAAC;MACDC,SAAS,EAAE;QACTC,MAAM,EAAE,QAAQ;QAChBC,UAAU,EAAE,CAAC;QACbpB,IAAI,EAAEhC;MACR;IACF,CAAC,EACD;MACEa,IAAI,EAAE,QAAQ;MACdvC,IAAI,EAAE,SAAS;MACfqE,EAAE,EAAE,SAAS;MACbU,MAAM,EAAE,IAAI;MACZC,UAAU,EAAEA,CAACC,MAAM,EAAEC,GAAG,KAAK;QAC3B,MAAM;UAAEC;QAAS,CAAC,GAAGF,MAAM;QAC3B,MAAMG,IAAI,GAAGF,GAAG,CAACrB,KAAK,CAAC,CAAC,CAAC;QACzB,MAAMwB,IAAI,GAAGH,GAAG,CAACrB,KAAK,CAAC,CAAC,CAAC;QACzB,MAAMyB,SAAS,GAAGJ,GAAG,CAACrB,KAAK,CAAC,CAAC,CAAW;QACxC,MAAMpB,KAAK,GAAGyC,GAAG,CAACK,KAAK,CAAC,CAACH,IAAI,EAAEC,IAAI,CAAC,CAAC;QACrC,MAAM,CAACG,SAAS,EAAEC,UAAU,CAAC,GAAGP,GAAG,CAACQ,IAAI,CAAE,CACxC,CAAC,EACDzE,0BAA0B,CAC3B,CAAa;QACd,MAAM0E,UAAU,GAAGR,QAKlB;QACD,MAAM5E,KAAK,GAAGpD,OAAO,CAACkD,OAAO,CAACuF,cAAc,CAC1C;UACEC,CAAC,EAAEpD,KAAK,CAAC,CAAC,CAAC,GAAG+C,SAAS,GAAG,CAAC;UAC3BM,CAAC,EAAErD,KAAK,CAAC,CAAC,CAAC;UACXsD,KAAK,EAAEP,SAAS;UAChBQ,MAAM,EAAEP;QACV,CAAC,EACDE,UACF,CAAC;QACD,OACEpF,KAAK,IAAI;UACPgC,IAAI,EAAE,MAAM;UACZhC,KAAK;UACL0F,KAAK,EAAE;YACLC,IAAI,EAAE,IAAAC,mBAAY,EAACb,SAAS;UAC9B,CAAC;UACDc,gBAAgB,EAAE;QACpB,CAAC;MAEL,CAAC;MACD1C,IAAI,EAAE1C;IACR,CAAC;EAEL,CAAC;AACH,CAAC;AAACJ,OAAA,CAAAC,SAAA,GAAAA,SAAA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport type { EChartsOption } from 'echarts';\n\nimport type { BookType } from '../../../gql/types/graphql';\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 = (props: ChartOptionsProps) => EChartsOption;\n\nexport interface GetResponsiveOptionsProps {\n  isDark: boolean;\n}\n\nexport interface ChartProps {\n  data: ChartOptionsProps;\n}\n\nexport interface ChartWithDataProps {\n  bookType: BookType;\n  instrument: string;\n}\n\nexport type TransformDataForChartType = (\n  props: GetOrderPositionBooksQuery\n) => ChartOptionsProps;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/src/gql/types/graphql';\nimport 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 = (props: ChartOptionsProps) => EChartsOption;\nexport interface GetResponsiveOptionsProps {\n  isDark: boolean;\n}\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  data: GetOrderPositionBooksQuery;\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":[]}