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

package/CHANGELOG.md

@@ -3,6 +3,258 @@
 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)
+
+
+
+## 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.29 (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":"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","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 {