@oanda/labs-crowd-view-widget 1.0.35 → 1.0.37

package/CHANGELOG.md

@@ -3,6 +3,306 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.37 (2025-09-02)
+
+
+
+## 1.0.218 (2025-09-01)
+
+
+
+## 1.0.217 (2025-08-25)
+
+
+
+## 1.0.216 (2025-08-18)
+
+
+
+## 1.0.215 (2025-08-18)
+
+
+
+## 1.0.214 (2025-08-14)
+
+
+
+## 1.0.213 (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.36 (2025-09-01)
+
+
+
+## 1.0.217 (2025-08-25)
+
+
+
+## 1.0.216 (2025-08-18)
+
+
+
+## 1.0.215 (2025-08-18)
+
+
+
+## 1.0.214 (2025-08-14)
+
+
+
+## 1.0.213 (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.35 (2025-08-25)
 
 

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

@@ -9,10 +9,11 @@ var _charts = require("echarts/charts");
 var _components = require("echarts/components");
 var echarts = _interopRequireWildcard(require("echarts/core"));
 var _renderers = require("echarts/renderers");
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _constants = require("./constants");
 var _getOption = require("./getOption");
 var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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, _components.MarkPointComponent]);
@@ -25,86 +26,49 @@ const Chart = _ref => {
   const {
     isDark
   } = (0, _labsWidgetCommon.useLayoutProvider)();
-  const echartRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-      echartInstance.setOption((0, _getOption.getDesktopOption)({
-        isDark
-      }));
-      echartInstance.off('datazoom');
-      echartInstance.on('datazoom', () => {
+  return _react.default.createElement(_labsWidgetCommon.BaseChart, {
+    chartHeight: _constants.CHART_HEIGHT,
+    echarts: echarts,
+    isDark: isDark,
+    lazyUpdate: true,
+    option: (0, _getOption.getOption)(data, isDark),
+    onEvents: {
+      datazoom: (_params, instance) => {
         const {
-          dataZoom,
-          title: {
-            text
-          }
-        } = echartInstance.getOption();
+          dataZoom
+        } = instance.getOption();
         const {
-          start,
-          end
+          startValue,
+          endValue
         } = 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 isGreaterThanTwoWeeks = (0, _utils.isDifferenceGreaterThanTwoWeeks)(data.xAxisData[startValue], data.xAxisData[endValue]);
+        const labelsData = (0, _utils.getLabelData)({
+          xAxisData: data.xAxisData,
+          isGreaterThanTwoWeeks
+        });
+        instance.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'
+                })}`;
               }
             }
-          });
-        }
-        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'
-                  })}`;
-                }
-              }
+          },
+          series: [{
+            id: 'candlestick',
+            markPoint: {
+              data: labelsData
             }
-          });
-        }
-        if (interval !== prevInterval || isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {
-          echartInstance.setOption({
-            title: {
-              text: `${interval},${isGreaterThanTwoWeeks ? 1 : 0}`
-            }
-          });
-        }
-      });
+          }]
+        });
+      }
     }
-  }, [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)
   });
 };
 exports.Chart = Chart;

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","_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":[]}
+{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_charts","_components","echarts","_interopRequireWildcard","_renderers","_react","_interopRequireDefault","_constants","_getOption","_utils","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","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","createElement","BaseChart","chartHeight","CHART_HEIGHT","lazyUpdate","option","getOption","onEvents","datazoom","_params","instance","dataZoom","startValue","endValue","isGreaterThanTwoWeeks","isDifferenceGreaterThanTwoWeeks","xAxisData","labelsData","getLabelData","setOption","xAxis","axisLabel","formatter","value","date","Date","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","series","id","markPoint","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport type { EChartsType } from 'echarts';\nimport { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';\nimport {\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkPointComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React from 'react';\n\nimport { CHART_HEIGHT } from './constants';\nimport { getOption } from './getOption';\nimport type { ChartProps } from './types';\nimport { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  BarChart,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkPointComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ data }: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n\n  return (\n    <BaseChart\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={getOption(data, isDark)}\n      onEvents={{\n        datazoom: (_params: unknown, instance: EChartsType) => {\n          const { dataZoom } = instance.getOption();\n\n          const { startValue, endValue } = (\n            dataZoom as { startValue: number; endValue: number }[]\n          )[0];\n\n          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n            data.xAxisData[startValue],\n            data.xAxisData[endValue]\n          );\n\n          const labelsData = getLabelData({\n            xAxisData: data.xAxisData,\n            isGreaterThanTwoWeeks,\n          });\n\n          instance.setOption({\n            xAxis: {\n              axisLabel: {\n                formatter: (value: string) => {\n                  const date = new Date(value);\n                  return isGreaterThanTwoWeeks\n                    ? `${date.toLocaleTimeString(undefined, {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}`\n                    : `${date.toLocaleDateString(undefined, {\n                        day: 'numeric',\n                      })}`;\n                },\n              },\n            },\n            series: [\n              {\n                id: 'candlestick',\n                markPoint: {\n                  data: labelsData,\n                },\n              },\n            ],\n          });\n        },\n      }}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartWithData = void 0;
-var _client = require("@apollo/client");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _getOrderPositionBooks = require("../../../gql/getOrderPositionBooks");
 var _Chart = require("./Chart");
 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); }
@@ -24,26 +22,13 @@ const ChartWithData = _ref => {
     size
   } = (0, _labsWidgetCommon.useLayoutProvider)();
   const isDesktop = size === _labsWidgetCommon.Size.DESKTOP;
-  const {
-    loading,
-    data,
-    error
-  } = (0, _client.useQuery)(_getOrderPositionBooks.getOrderPositionBooks, {
-    variables: {
-      instrument,
-      bookType,
-      recentHours: 1
-    },
-    fetchPolicy: 'network-only'
-  });
-  const isError = !!error;
+  const isError = false;
+  const loading = false;
   const transformedData = (0, _react.useMemo)(() => {
-    if (!data) return undefined;
     return (0, _utils.transformDataForChart)({
-      data,
       granularity
     });
-  }, [data, granularity]);
+  }, [instrument, granularity, bookType]);
   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","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":[]}
+{"version":3,"file":"ChartWithData.js","names":["_labsWidgetCommon","require","_classnames","_interopRequireDefault","_react","_interopRequireWildcard","_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","isError","loading","transformedData","useMemo","transformDataForChart","createElement","Fragment","className","classnames","ChartError","Spinner","SpinnerSize","lg","Chart","data","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import {\n  ChartError,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\n\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { transformDataForChart } from './utils';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n  granularity,\n}: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const isError = false;\n  const loading = false;\n\n  const transformedData = useMemo(() => {\n    return transformDataForChart({ granularity });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [instrument, granularity, bookType]);\n\n  return (\n    <>\n      <div\n        className={classnames('lw-relative lw-w-full', {\n          'lw-h-[450px]': isDesktop,\n          'lw-h-[390px]': !isDesktop,\n        })}\n      >\n        {isError && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <div\n            className={classnames(\n              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              }\n            )}\n          >\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {!isError && transformedData && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={transformedData} />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,76 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOption = exports.getDesktopOption = void 0;
+exports.getOption = void 0;
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var echarts = _interopRequireWildcard(require("echarts/core"));
 var _constants = require("./constants");
 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; }
-const getDesktopOption = _ref => {
-  let {
-    isDark
-  } = _ref;
-  const desktopGridLines = (0, _labsWidgetCommon.getGridLines)({
-    isDark,
-    chartWidth: _constants.CHART_WIDTH,
-    chartHeight: _constants.CHART_HEIGHT,
-    xLabelsSize: _constants.X_LABEL_SIZE,
-    yLabelSize: _constants.Y_LABEL_SIZE_DESKTOP,
-    bottomLeftBox: false
-  });
-  return {
-    yAxis: {
-      nameTextStyle: {
-        align: 'left',
-        padding: [0, 0, 0, 8]
-      },
-      axisLabel: {
-        margin: 8
-      }
-    },
-    grid: [{
-      name: 'main-grid',
-      top: '0px',
-      left: '0px',
-      right: `${_constants.Y_LABEL_SIZE_DESKTOP}px`,
-      bottom: `${_constants.X_LABEL_SIZE}px`
-    }],
-    graphic: [...desktopGridLines, {
-      ...(0, _labsWidgetCommon.getLineCommons)(isDark),
-      top: 0,
-      right: 0,
-      shape: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 0
-      }
-    }]
-  };
-};
-exports.getDesktopOption = getDesktopOption;
-const getOption = _ref2 => {
+const getOption = (_ref, isDark) => {
   let {
     xAxisData,
     ordersPositionsChartData,
     ordersPositionsBucketWidth,
     candlesSeriesData
-  } = _ref2;
+  } = _ref;
   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;
+  const gridLines = (0, _labsWidgetCommon.getGridLines)({
+    isDark,
+    chartWidth: _constants.CHART_WIDTH,
+    chartHeight: _constants.CHART_HEIGHT,
+    xLabelsSize: _constants.X_LABEL_SIZE,
+    yLabelSize: _constants.Y_LABEL_SIZE_DESKTOP,
+    bottomLeftBox: false
+  });
   return {
-    title: {
-      show: false,
-      text: `${initialInterval},${isGreaterThanTwoWeeks}`
-    },
     animation: false,
     dataZoom: [{
       type: 'inside',
@@ -104,7 +63,6 @@ const getOption = _ref2 => {
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
-        interval: initialInterval,
         formatter: value => {
           const date = new Date(value);
           return isGreaterThanTwoWeeks ? `${date.toLocaleTimeString(undefined, {
@@ -175,6 +133,24 @@ const getOption = _ref2 => {
         };
       },
       data: ordersPositionsChartData
+    }],
+    grid: [{
+      name: 'main-grid',
+      top: '0px',
+      left: '0px',
+      right: `${_constants.Y_LABEL_SIZE_DESKTOP}px`,
+      bottom: `${_constants.X_LABEL_SIZE}px`
+    }],
+    graphic: [...gridLines, {
+      ...(0, _labsWidgetCommon.getLineCommons)(isDark),
+      top: 0,
+      right: 0,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0
+      }
     }]
   };
 };