@oanda/labs-volatility-chart-widget 1.0.167 → 1.0.169

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

@@ -10,9 +10,10 @@ 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");
+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, _components.TooltipComponent, _components.TitleComponent, _charts.BarChart, _renderers.CanvasRenderer]);
@@ -27,50 +28,29 @@ const Chart = _ref => {
     lang
   } = (0, _monoI18n.useLocale)();
   const {
-    isDark,
-    size
+    isDark
   } = (0, _labsWidgetCommon.useLayoutProvider)();
-  const isDesktop = size === _labsWidgetCommon.Size.DESKTOP;
-  const echartRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-      echartInstance.setOption(isDesktop ? (0, _getOption.getDesktopOption)({
-        timeUnit,
-        lang,
-        isDark
-      }) : (0, _getOption.getMobileOption)({
-        timeUnit,
-        lang,
-        isDark
-      }));
-    }
-  }, [echartRef, timeUnit, isDesktop, lang, isDark]);
-  (0, _react.useEffect)(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-      echartInstance.on('highlight', () => {
-        echartInstance.setOption({
+  return _react.default.createElement(_labsWidgetCommon.BaseChart, {
+    chartHeight: _constants.CHART_HEIGHT,
+    echarts: echarts,
+    isDark: isDark,
+    option: (0, _getOption.getOption)(values, lang, timeUnit, isDark),
+    onEvents: {
+      highlight: (_params, instance) => {
+        instance.setOption({
           title: {
             show: false
           }
         });
-      });
-      echartInstance.on('globalout', () => {
-        echartInstance.setOption({
+      },
+      globalout: (_params, instance) => {
+        instance.setOption({
           title: {
-            show: window.innerWidth < 769
+            show: true
           }
         });
-      });
+      }
     }
-  }, [echartRef]);
-  return _react.default.createElement(_labsWidgetCommon.BaseChart, {
-    ref: echartRef,
-    chartHeight: _constants.CHART_HEIGHT,
-    echarts: echarts,
-    isDark: isDark,
-    option: (0, _getOption.getOption)(values, lang, timeUnit)
   });
 };
 exports.Chart = Chart;

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_monoI18n","_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","TooltipComponent","TitleComponent","BarChart","CanvasRenderer","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","values","timeUnit","lang","useLocale","isDark","size","useLayoutProvider","isDesktop","Size","DESKTOP","echartRef","useRef","useEffect","current","echartInstance","getEchartsInstance","setOption","getDesktopOption","getMobileOption","on","title","show","window","innerWidth","createElement","BaseChart","ref","chartHeight","CHART_HEIGHT","option","getOption","exports"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/Chart.tsx"],"sourcesContent":["import type { BaseChartRef } from '@oanda/labs-widget-common';\nimport {\n  BaseChart,\n  getChartTheme,\n  Size,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { BarChart } from 'echarts/charts';\nimport {\n  GraphicComponent,\n  GridSimpleComponent,\n  TitleComponent,\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, getMobileOption, getOption } from './getOption';\nimport type { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  BarChart,\n  CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, timeUnit }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark, size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const echartRef = useRef<BaseChartRef | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(\n        isDesktop\n          ? getDesktopOption({ timeUnit, lang, isDark })\n          : getMobileOption({ timeUnit, lang, isDark })\n      );\n    }\n  }, [echartRef, timeUnit, isDesktop, lang, isDark]);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.on('highlight', () => {\n        echartInstance.setOption({\n          title: {\n            show: false,\n          },\n        });\n      });\n\n      echartInstance.on('globalout', () => {\n        echartInstance.setOption({\n          title: {\n            show: window.innerWidth < 769,\n          },\n        });\n      });\n    }\n  }, [echartRef]);\n\n  return (\n    <BaseChart\n      ref={echartRef}\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      option={getOption(values, lang, timeUnit)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_monoI18n","_charts","_components","echarts","_interopRequireWildcard","_renderers","_react","_interopRequireDefault","_constants","_getOption","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","BarChart","CanvasRenderer","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","values","timeUnit","lang","useLocale","isDark","useLayoutProvider","createElement","BaseChart","chartHeight","CHART_HEIGHT","option","getOption","onEvents","highlight","_params","instance","setOption","title","show","globalout","exports"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport type { EChartsType } from 'echarts';\nimport { BarChart } from 'echarts/charts';\nimport {\n  GraphicComponent,\n  GridSimpleComponent,\n  TitleComponent,\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';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  BarChart,\n  CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, timeUnit }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark } = useLayoutProvider();\n\n  return (\n    <BaseChart\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      option={getOption(values, lang, timeUnit, isDark)}\n      onEvents={{\n        highlight: (_params: unknown, instance: EChartsType) => {\n          instance.setOption({\n            title: {\n              show: false,\n            },\n          });\n        },\n        globalout: (_params: unknown, instance: EChartsType) => {\n          instance.setOption({\n            title: {\n              show: true,\n            },\n          });\n        },\n      }}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}

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

@@ -33,7 +33,7 @@ const getDesktopOption = _ref2 => {
   });
   return {
     title: {
-      show: false
+      text: ''
     },
     tooltip: {
       position: undefined,
@@ -94,7 +94,7 @@ const getMobileOption = _ref3 => {
   });
   return {
     title: {
-      show: true
+      text: lang('mobile_tooltip_placeholder')
     },
     tooltip: {
       backgroundColor: 'transparent',
@@ -155,7 +155,7 @@ const pointFormatter = _ref4 => {
   return point;
 };
 exports.pointFormatter = pointFormatter;
-const getOption = (values, lang, timeUnit) => {
+const getOption = (values, lang, timeUnit, isDark) => {
   const pipsValues = values.map(_ref5 => {
     let {
       pips
@@ -177,7 +177,6 @@ const getOption = (values, lang, timeUnit) => {
     title: {
       left: 10,
       top: 20,
-      text: lang('mobile_tooltip_placeholder'),
       textStyle: {
         fontFamily: 'Sofia W03',
         fontWeight: 500,
@@ -232,6 +231,29 @@ const getOption = (values, lang, timeUnit) => {
       data: pipsValues,
       name: 'main',
       type: 'bar'
+    }],
+    media: [{
+      query: {
+        minWidth: _labsWidgetCommon.DESKTOP_MIN_WIDTH
+      },
+      option: {
+        ...getDesktopOption({
+          timeUnit,
+          lang,
+          isDark
+        })
+      }
+    }, {
+      query: {
+        maxWidth: _labsWidgetCommon.DESKTOP_MIN_WIDTH - 1
+      },
+      option: {
+        ...getMobileOption({
+          timeUnit,
+          lang,
+          isDark
+        })
+      }
     }]
   };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_graphql","_constants","tooltipFormatter","_ref","value","timeUnit","lang","data","tooltipLabels","axisValue","exports","getDesktopOption","_ref2","isDark","notDate","VolatilityChartTimeUnit","D","desktopGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","bottomLeftBox","title","show","tooltip","position","undefined","shadowBlur","shadowOffsetX","shadowOffsetY","backgroundColor","themeColors","borderPrimary","dark","bgPrimary","light","padding","formatter","yAxis","nameTextStyle","align","axisLabel","margin","grid","name","top","left","right","bottom","graphic","getLineCommons","shape","x1","y1","x2","y2","getMobileOption","_ref3","mobileGridLines","Y_LABEL_SIZE_MOBILE","shadowColor","pointFormatter","_ref4","point","Date","toLocaleDateString","month","day","W","weeklyDataLabels","getOption","values","pipsValues","map","_ref5","pips","toFixed","points","_ref6","animation","text","textStyle","fontFamily","fontWeight","trigger","axisPointer","axis","extraCssText","xAxis","type","axisTick","alignWithLabel","axisLine","splitLine","rotate","toUpperCase","splitNumber","rich","a","index","series"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/getOption.ts"],"sourcesContent":["import {\n  getGridLines,\n  getLineCommons,\n  themeColors,\n} from '@oanda/labs-widget-common';\n\nimport { VolatilityChartTimeUnit } from '../../../gql/types/graphql';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  tooltipLabels,\n  weeklyDataLabels,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\nimport type {\n  DaysOfWeekKeys,\n  GetOptionType,\n  GetResponsiveOptionsProps,\n  PointFormatterProps,\n  TooltipData,\n  TooltipFormatterProps,\n} from './types';\n\nexport const tooltipFormatter = ({\n  value,\n  timeUnit,\n  lang,\n}: TooltipFormatterProps) =>\n  `<b>${lang('price_range')} </b>${value[0].data}<br /><b>${lang(tooltipLabels[timeUnit])} </b>${value[0].axisValue}`;\n\nexport const getDesktopOption = ({\n  timeUnit,\n  lang,\n  isDark,\n}: GetResponsiveOptionsProps) => {\n  const notDate = timeUnit !== VolatilityChartTimeUnit.D;\n\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: notDate,\n  });\n\n  return {\n    title: {\n      show: false,\n    },\n    tooltip: {\n      position: undefined,\n      shadowBlur: 24,\n      shadowOffsetX: 0,\n      shadowOffsetY: 6,\n      backgroundColor: isDark\n        ? themeColors.borderPrimary.dark\n        : themeColors.bgPrimary.light,\n      padding: [12, 8, 12, 8],\n      formatter: (value: TooltipData[]) =>\n        tooltipFormatter({ value, timeUnit, lang }),\n    },\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: '40px',\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 getMobileOption = ({\n  timeUnit,\n  lang,\n  isDark,\n}: GetResponsiveOptionsProps) => {\n  const mobileGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_MOBILE,\n    bottomLeftBox: false,\n  });\n\n  return {\n    title: {\n      show: true,\n    },\n    tooltip: {\n      backgroundColor: 'transparent',\n      shadowColor: 'transparent',\n      position: [0, 0],\n      padding: 16,\n      formatter: (value: TooltipData[]) =>\n        tooltipFormatter({ value, timeUnit, lang }),\n    },\n    yAxis: {\n      nameTextStyle: {\n        align: 'left',\n        padding: [0, 0, 0, 6],\n      },\n      axisLabel: {\n        margin: 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '60px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_MOBILE}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...mobileGridLines,\n      {\n        ...getLineCommons(isDark),\n        top: 58,\n        right: Y_LABEL_SIZE_MOBILE - 2,\n        shape: {\n          x1: 0,\n          y1: 0,\n          x2: 9999,\n          y2: 0,\n        },\n      },\n    ],\n  };\n};\n\nexport const pointFormatter = ({\n  point,\n  lang,\n  timeUnit,\n}: PointFormatterProps) => {\n  if (timeUnit === VolatilityChartTimeUnit.D) {\n    return new Date(point).toLocaleDateString(undefined, {\n      month: 'numeric',\n      day: 'numeric',\n    });\n  }\n  if (timeUnit === VolatilityChartTimeUnit.W) {\n    return lang(weeklyDataLabels[point as DaysOfWeekKeys]);\n  }\n\n  return point;\n};\n\nexport const getOption: GetOptionType = (values, lang, timeUnit) => {\n  const pipsValues = values.map(({ pips }) => pips.toFixed());\n  const points = values.map(({ point }) =>\n    pointFormatter({ point, lang, timeUnit })\n  );\n\n  return {\n    animation: false,\n    title: {\n      left: 10,\n      top: 20,\n      text: lang('mobile_tooltip_placeholder'),\n      textStyle: {\n        fontFamily: 'Sofia W03',\n        fontWeight: 500,\n        padding: 16,\n      },\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n      },\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      data: points,\n      axisTick: {\n        alignWithLabel: true,\n      },\n      axisLine: { show: false },\n      splitLine: { show: false },\n      axisLabel: {\n        margin: 10,\n        rotate: -45,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      name: lang('pips').toUpperCase(),\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        rich: {\n          a: {\n            padding: [0, 0, 20, 0],\n          },\n        },\n        formatter: (value, index) => (index ? `${value}` : `{a|${value}}`),\n      },\n    },\n    series: [\n      {\n        data: pipsValues,\n        name: 'main',\n        type: 'bar',\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_graphql","_constants","tooltipFormatter","_ref","value","timeUnit","lang","data","tooltipLabels","axisValue","exports","getDesktopOption","_ref2","isDark","notDate","VolatilityChartTimeUnit","D","desktopGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","bottomLeftBox","title","text","tooltip","position","undefined","shadowBlur","shadowOffsetX","shadowOffsetY","backgroundColor","themeColors","borderPrimary","dark","bgPrimary","light","padding","formatter","yAxis","nameTextStyle","align","axisLabel","margin","grid","name","top","left","right","bottom","graphic","getLineCommons","shape","x1","y1","x2","y2","getMobileOption","_ref3","mobileGridLines","Y_LABEL_SIZE_MOBILE","shadowColor","pointFormatter","_ref4","point","Date","toLocaleDateString","month","day","W","weeklyDataLabels","getOption","values","pipsValues","map","_ref5","pips","toFixed","points","_ref6","animation","textStyle","fontFamily","fontWeight","trigger","axisPointer","axis","extraCssText","xAxis","type","axisTick","alignWithLabel","axisLine","show","splitLine","rotate","toUpperCase","splitNumber","rich","a","index","series","media","query","minWidth","DESKTOP_MIN_WIDTH","option","maxWidth"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/getOption.ts"],"sourcesContent":["import {\n  DESKTOP_MIN_WIDTH,\n  getGridLines,\n  getLineCommons,\n  themeColors,\n} from '@oanda/labs-widget-common';\n\nimport { VolatilityChartTimeUnit } from '../../../gql/types/graphql';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  tooltipLabels,\n  weeklyDataLabels,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\nimport type {\n  DaysOfWeekKeys,\n  GetOptionType,\n  GetResponsiveOptionsProps,\n  PointFormatterProps,\n  TooltipData,\n  TooltipFormatterProps,\n} from './types';\n\nexport const tooltipFormatter = ({\n  value,\n  timeUnit,\n  lang,\n}: TooltipFormatterProps) =>\n  `<b>${lang('price_range')} </b>${value[0].data}<br /><b>${lang(tooltipLabels[timeUnit])} </b>${value[0].axisValue}`;\n\nexport const getDesktopOption = ({\n  timeUnit,\n  lang,\n  isDark,\n}: GetResponsiveOptionsProps) => {\n  const notDate = timeUnit !== VolatilityChartTimeUnit.D;\n\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: notDate,\n  });\n\n  return {\n    title: {\n      text: '',\n    },\n    tooltip: {\n      position: undefined,\n      shadowBlur: 24,\n      shadowOffsetX: 0,\n      shadowOffsetY: 6,\n      backgroundColor: isDark\n        ? themeColors.borderPrimary.dark\n        : themeColors.bgPrimary.light,\n      padding: [12, 8, 12, 8],\n      formatter: (value: TooltipData[]) =>\n        tooltipFormatter({ value, timeUnit, lang }),\n    },\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: '40px',\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 getMobileOption = ({\n  timeUnit,\n  lang,\n  isDark,\n}: GetResponsiveOptionsProps) => {\n  const mobileGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_MOBILE,\n    bottomLeftBox: false,\n  });\n\n  return {\n    title: {\n      text: lang('mobile_tooltip_placeholder'),\n    },\n    tooltip: {\n      backgroundColor: 'transparent',\n      shadowColor: 'transparent',\n      position: [0, 0],\n      padding: 16,\n      formatter: (value: TooltipData[]) =>\n        tooltipFormatter({ value, timeUnit, lang }),\n    },\n    yAxis: {\n      nameTextStyle: {\n        align: 'left',\n        padding: [0, 0, 0, 6],\n      },\n      axisLabel: {\n        margin: 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '60px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_MOBILE}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...mobileGridLines,\n      {\n        ...getLineCommons(isDark),\n        top: 58,\n        right: Y_LABEL_SIZE_MOBILE - 2,\n        shape: {\n          x1: 0,\n          y1: 0,\n          x2: 9999,\n          y2: 0,\n        },\n      },\n    ],\n  };\n};\n\nexport const pointFormatter = ({\n  point,\n  lang,\n  timeUnit,\n}: PointFormatterProps) => {\n  if (timeUnit === VolatilityChartTimeUnit.D) {\n    return new Date(point).toLocaleDateString(undefined, {\n      month: 'numeric',\n      day: 'numeric',\n    });\n  }\n  if (timeUnit === VolatilityChartTimeUnit.W) {\n    return lang(weeklyDataLabels[point as DaysOfWeekKeys]);\n  }\n\n  return point;\n};\n\nexport const getOption: GetOptionType = (values, lang, timeUnit, isDark) => {\n  const pipsValues = values.map(({ pips }) => pips.toFixed());\n  const points = values.map(({ point }) =>\n    pointFormatter({ point, lang, timeUnit })\n  );\n\n  return {\n    animation: false,\n    title: {\n      left: 10,\n      top: 20,\n      textStyle: {\n        fontFamily: 'Sofia W03',\n        fontWeight: 500,\n        padding: 16,\n      },\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n      },\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      data: points,\n      axisTick: {\n        alignWithLabel: true,\n      },\n      axisLine: { show: false },\n      splitLine: { show: false },\n      axisLabel: {\n        margin: 10,\n        rotate: -45,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      name: lang('pips').toUpperCase(),\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        rich: {\n          a: {\n            padding: [0, 0, 20, 0],\n          },\n        },\n        formatter: (value, index) => (index ? `${value}` : `{a|${value}}`),\n      },\n    },\n    series: [\n      {\n        data: pipsValues,\n        name: 'main',\n        type: 'bar',\n      },\n    ],\n    media: [\n      {\n        query: {\n          minWidth: DESKTOP_MIN_WIDTH,\n        },\n        option: {\n          ...getDesktopOption({ timeUnit, lang, isDark }),\n        },\n      },\n      {\n        query: {\n          maxWidth: DESKTOP_MIN_WIDTH - 1,\n        },\n        option: {\n          ...getMobileOption({ timeUnit, lang, isDark }),\n        },\n      },\n    ],\n  };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAOA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAkBO,MAAMG,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,KAAK;IACLC,QAAQ;IACRC;EACqB,CAAC,GAAAH,IAAA;EAAA,OACtB,MAAMG,IAAI,CAAC,aAAa,CAAC,QAAQF,KAAK,CAAC,CAAC,CAAC,CAACG,IAAI,YAAYD,IAAI,CAACE,wBAAa,CAACH,QAAQ,CAAC,CAAC,QAAQD,KAAK,CAAC,CAAC,CAAC,CAACK,SAAS,EAAE;AAAA;AAACC,OAAA,CAAAR,gBAAA,GAAAA,gBAAA;AAE/G,MAAMS,gBAAgB,GAAGC,KAAA,IAIC;EAAA,IAJA;IAC/BP,QAAQ;IACRC,IAAI;IACJO;EACyB,CAAC,GAAAD,KAAA;EAC1B,MAAME,OAAO,GAAGT,QAAQ,KAAKU,gCAAuB,CAACC,CAAC;EAEtD,MAAMC,gBAAgB,GAAG,IAAAC,8BAAY,EAAC;IACpCL,MAAM;IACNM,UAAU,EAAEC,sBAAW;IACvBC,WAAW,EAAEC,uBAAY;IACzBC,WAAW,EAAEC,uBAAY;IACzBC,UAAU,EAAEC,+BAAoB;IAChCC,aAAa,EAAEb;EACjB,CAAC,CAAC;EAEF,OAAO;IACLc,KAAK,EAAE;MACLC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,QAAQ,EAAEC,SAAS;MACnBC,UAAU,EAAE,EAAE;MACdC,aAAa,EAAE,CAAC;MAChBC,aAAa,EAAE,CAAC;MAChBC,eAAe,EAAEvB,MAAM,GACnBwB,6BAAW,CAACC,aAAa,CAACC,IAAI,GAC9BF,6BAAW,CAACG,SAAS,CAACC,KAAK;MAC/BC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;MACvBC,SAAS,EAAGvC,KAAoB,IAC9BF,gBAAgB,CAAC;QAAEE,KAAK;QAAEC,QAAQ;QAAEC;MAAK,CAAC;IAC9C,CAAC;IACDsC,KAAK,EAAE;MACLC,aAAa,EAAE;QACbC,KAAK,EAAE,MAAM;QACbJ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;MACtB,CAAC;MACDK,SAAS,EAAE;QACTC,MAAM,EAAE;MACV;IACF,CAAC;IACDC,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,MAAM;MACXC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE,GAAG3B,+BAAoB,IAAI;MAClC4B,MAAM,EAAE,GAAG9B,uBAAY;IACzB,CAAC,CACF;IACD+B,OAAO,EAAE,CACP,GAAGtC,gBAAgB,EACnB;MACE,GAAG,IAAAuC,gCAAc,EAAC3C,MAAM,CAAC;MACzBsC,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;AAACnD,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AAEK,MAAMmD,eAAe,GAAGC,KAAA,IAIE;EAAA,IAJD;IAC9B1D,QAAQ;IACRC,IAAI;IACJO;EACyB,CAAC,GAAAkD,KAAA;EAC1B,MAAMC,eAAe,GAAG,IAAA9C,8BAAY,EAAC;IACnCL,MAAM;IACNM,UAAU,EAAEC,sBAAW;IACvBC,WAAW,EAAEC,uBAAY;IACzBC,WAAW,EAAEC,uBAAY;IACzBC,UAAU,EAAEwC,8BAAmB;IAC/BtC,aAAa,EAAE;EACjB,CAAC,CAAC;EAEF,OAAO;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEvB,IAAI,CAAC,4BAA4B;IACzC,CAAC;IACDwB,OAAO,EAAE;MACPM,eAAe,EAAE,aAAa;MAC9B8B,WAAW,EAAE,aAAa;MAC1BnC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MAChBW,OAAO,EAAE,EAAE;MACXC,SAAS,EAAGvC,KAAoB,IAC9BF,gBAAgB,CAAC;QAAEE,KAAK;QAAEC,QAAQ;QAAEC;MAAK,CAAC;IAC9C,CAAC;IACDsC,KAAK,EAAE;MACLC,aAAa,EAAE;QACbC,KAAK,EAAE,MAAM;QACbJ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;MACtB,CAAC;MACDK,SAAS,EAAE;QACTC,MAAM,EAAE;MACV;IACF,CAAC;IACDC,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,MAAM;MACXC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE,GAAGY,8BAAmB,IAAI;MACjCX,MAAM,EAAE,GAAG9B,uBAAY;IACzB,CAAC,CACF;IACD+B,OAAO,EAAE,CACP,GAAGS,eAAe,EAClB;MACE,GAAG,IAAAR,gCAAc,EAAC3C,MAAM,CAAC;MACzBsC,GAAG,EAAE,EAAE;MACPE,KAAK,EAAEY,8BAAmB,GAAG,CAAC;MAC9BR,KAAK,EAAE;QACLC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,IAAI;QACRC,EAAE,EAAE;MACN;IACF,CAAC;EAEL,CAAC;AACH,CAAC;AAACnD,OAAA,CAAAoD,eAAA,GAAAA,eAAA;AAEK,MAAMK,cAAc,GAAGC,KAAA,IAIH;EAAA,IAJI;IAC7BC,KAAK;IACL/D,IAAI;IACJD;EACmB,CAAC,GAAA+D,KAAA;EACpB,IAAI/D,QAAQ,KAAKU,gCAAuB,CAACC,CAAC,EAAE;IAC1C,OAAO,IAAIsD,IAAI,CAACD,KAAK,CAAC,CAACE,kBAAkB,CAACvC,SAAS,EAAE;MACnDwC,KAAK,EAAE,SAAS;MAChBC,GAAG,EAAE;IACP,CAAC,CAAC;EACJ;EACA,IAAIpE,QAAQ,KAAKU,gCAAuB,CAAC2D,CAAC,EAAE;IAC1C,OAAOpE,IAAI,CAACqE,2BAAgB,CAACN,KAAK,CAAmB,CAAC;EACxD;EAEA,OAAOA,KAAK;AACd,CAAC;AAAC3D,OAAA,CAAAyD,cAAA,GAAAA,cAAA;AAEK,MAAMS,SAAwB,GAAGA,CAACC,MAAM,EAAEvE,IAAI,EAAED,QAAQ,EAAEQ,MAAM,KAAK;EAC1E,MAAMiE,UAAU,GAAGD,MAAM,CAACE,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC;IAAK,CAAC,GAAAD,KAAA;IAAA,OAAKC,IAAI,CAACC,OAAO,CAAC,CAAC;EAAA,EAAC;EAC3D,MAAMC,MAAM,GAAGN,MAAM,CAACE,GAAG,CAACK,KAAA;IAAA,IAAC;MAAEf;IAAM,CAAC,GAAAe,KAAA;IAAA,OAClCjB,cAAc,CAAC;MAAEE,KAAK;MAAE/D,IAAI;MAAED;IAAS,CAAC,CAAC;EAAA,CAC3C,CAAC;EAED,OAAO;IACLgF,SAAS,EAAE,KAAK;IAChBzD,KAAK,EAAE;MACLwB,IAAI,EAAE,EAAE;MACRD,GAAG,EAAE,EAAE;MACPmC,SAAS,EAAE;QACTC,UAAU,EAAE,WAAW;QACvBC,UAAU,EAAE,GAAG;QACf9C,OAAO,EAAE;MACX;IACF,CAAC;IACDZ,OAAO,EAAE;MACP2D,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE;MACR,CAAC;MACDC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACLC,IAAI,EAAE,UAAU;MAChBvF,IAAI,EAAE4E,MAAM;MACZY,QAAQ,EAAE;QACRC,cAAc,EAAE;MAClB,CAAC;MACDC,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBC,SAAS,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MAC1BnD,SAAS,EAAE;QACTC,MAAM,EAAE,EAAE;QACVoD,MAAM,EAAE,CAAC;MACX;IACF,CAAC;IACDxD,KAAK,EAAE;MACLkD,IAAI,EAAE,OAAO;MACb/D,QAAQ,EAAE,OAAO;MACjBmB,IAAI,EAAE5C,IAAI,CAAC,MAAM,CAAC,CAAC+F,WAAW,CAAC,CAAC;MAChCC,WAAW,EAAE,CAAC;MACdL,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBH,QAAQ,EAAE;QAAEG,IAAI,EAAE;MAAM,CAAC;MACzBnD,SAAS,EAAE;QACTwD,IAAI,EAAE;UACJC,CAAC,EAAE;YACD9D,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;UACvB;QACF,CAAC;QACDC,SAAS,EAAEA,CAACvC,KAAK,EAAEqG,KAAK,KAAMA,KAAK,GAAG,GAAGrG,KAAK,EAAE,GAAG,MAAMA,KAAK;MAChE;IACF,CAAC;IACDsG,MAAM,EAAE,CACN;MACEnG,IAAI,EAAEuE,UAAU;MAChB5B,IAAI,EAAE,MAAM;MACZ4C,IAAI,EAAE;IACR,CAAC,CACF;IACDa,KAAK,EAAE,CACL;MACEC,KAAK,EAAE;QACLC,QAAQ,EAAEC;MACZ,CAAC;MACDC,MAAM,EAAE;QACN,GAAGpG,gBAAgB,CAAC;UAAEN,QAAQ;UAAEC,IAAI;UAAEO;QAAO,CAAC;MAChD;IACF,CAAC,EACD;MACE+F,KAAK,EAAE;QACLI,QAAQ,EAAEF,mCAAiB,GAAG;MAChC,CAAC;MACDC,MAAM,EAAE;QACN,GAAGjD,eAAe,CAAC;UAAEzD,QAAQ;UAAEC,IAAI;UAAEO;QAAO,CAAC;MAC/C;IACF,CAAC;EAEL,CAAC;AACH,CAAC;AAACH,OAAA,CAAAkE,SAAA,GAAAA,SAAA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["DaysOfWeekKeys","exports"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type { VolatilityChartTimeUnit } from '../../../gql/types/graphql';\n\nexport enum DaysOfWeekKeys {\n  MONDAY = 'MONDAY',\n  TUESDAY = 'TUESDAY',\n  WEDNESDAY = 'WEDNESDAY',\n  THURSDAY = 'THURSDAY',\n  FRIDAY = 'FRIDAY',\n}\nexport interface VolatilityChartDataValues {\n  pips: number;\n  point: string;\n}\nexport interface ChartProps {\n  values: VolatilityChartDataValues[];\n  timeUnit: VolatilityChartTimeUnit;\n}\nexport interface TooltipData {\n  axisValue: string;\n  data: string;\n}\n\nexport type GetOptionType = (\n  values: VolatilityChartDataValues[],\n  lang: (label: string) => string,\n  timeUnit: VolatilityChartTimeUnit\n) => EChartsOption;\n\nexport interface GetResponsiveOptionsProps {\n  timeUnit: VolatilityChartTimeUnit;\n  lang: (label: string) => string;\n  isDark: boolean;\n}\n\nexport interface TooltipFormatterProps {\n  value: TooltipData[];\n  timeUnit: VolatilityChartTimeUnit;\n  lang: (label: string) => string;\n}\nexport interface PointFormatterProps {\n  point: string;\n  lang: (label: string) => string;\n  timeUnit: VolatilityChartTimeUnit;\n}\n"],"mappings":";;;;;;IAIYA,cAAc,GAAAC,OAAA,CAAAD,cAAA,aAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}
+{"version":3,"file":"types.js","names":["DaysOfWeekKeys","exports"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type { VolatilityChartTimeUnit } from '../../../gql/types/graphql';\n\nexport enum DaysOfWeekKeys {\n  MONDAY = 'MONDAY',\n  TUESDAY = 'TUESDAY',\n  WEDNESDAY = 'WEDNESDAY',\n  THURSDAY = 'THURSDAY',\n  FRIDAY = 'FRIDAY',\n}\nexport interface VolatilityChartDataValues {\n  pips: number;\n  point: string;\n}\nexport interface ChartProps {\n  values: VolatilityChartDataValues[];\n  timeUnit: VolatilityChartTimeUnit;\n}\nexport interface TooltipData {\n  axisValue: string;\n  data: string;\n}\n\nexport type GetOptionType = (\n  values: VolatilityChartDataValues[],\n  lang: (label: string) => string,\n  timeUnit: VolatilityChartTimeUnit,\n  isDark: boolean\n) => EChartsOption;\n\nexport interface GetResponsiveOptionsProps {\n  timeUnit: VolatilityChartTimeUnit;\n  lang: (label: string) => string;\n  isDark: boolean;\n}\n\nexport interface TooltipFormatterProps {\n  value: TooltipData[];\n  timeUnit: VolatilityChartTimeUnit;\n  lang: (label: string) => string;\n}\nexport interface PointFormatterProps {\n  point: string;\n  lang: (label: string) => string;\n  timeUnit: VolatilityChartTimeUnit;\n}\n"],"mappings":";;;;;;IAIYA,cAAc,GAAAC,OAAA,CAAAD,cAAA,aAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}

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

@@ -1,12 +1,12 @@
-import { BaseChart, getChartTheme, Size, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
+import { BaseChart, getChartTheme, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { BarChart } from 'echarts/charts';
 import { GraphicComponent, GridSimpleComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { CHART_HEIGHT } from './constants';
-import { getDesktopOption, getMobileOption, getOption } from './getOption';
+import { getOption } from './getOption';
 echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent, BarChart, CanvasRenderer]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
@@ -19,50 +19,29 @@ const Chart = _ref => {
     lang
   } = useLocale();
   const {
-    isDark,
-    size
+    isDark
   } = useLayoutProvider();
-  const isDesktop = size === Size.DESKTOP;
-  const echartRef = useRef(null);
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-      echartInstance.setOption(isDesktop ? getDesktopOption({
-        timeUnit,
-        lang,
-        isDark
-      }) : getMobileOption({
-        timeUnit,
-        lang,
-        isDark
-      }));
-    }
-  }, [echartRef, timeUnit, isDesktop, lang, isDark]);
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-      echartInstance.on('highlight', () => {
-        echartInstance.setOption({
+  return React.createElement(BaseChart, {
+    chartHeight: CHART_HEIGHT,
+    echarts: echarts,
+    isDark: isDark,
+    option: getOption(values, lang, timeUnit, isDark),
+    onEvents: {
+      highlight: (_params, instance) => {
+        instance.setOption({
           title: {
             show: false
           }
         });
-      });
-      echartInstance.on('globalout', () => {
-        echartInstance.setOption({
+      },
+      globalout: (_params, instance) => {
+        instance.setOption({
           title: {
-            show: window.innerWidth < 769
+            show: true
           }
         });
-      });
+      }
     }
-  }, [echartRef]);
-  return React.createElement(BaseChart, {
-    ref: echartRef,
-    chartHeight: CHART_HEIGHT,
-    echarts: echarts,
-    isDark: isDark,
-    option: getOption(values, lang, timeUnit)
   });
 };
 export { Chart };

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Size","Theme","useLayoutProvider","useLocale","BarChart","GraphicComponent","GridSimpleComponent","TitleComponent","TooltipComponent","echarts","CanvasRenderer","React","useEffect","useRef","CHART_HEIGHT","getDesktopOption","getMobileOption","getOption","use","registerTheme","Dark","Light","Chart","_ref","values","timeUnit","lang","isDark","size","isDesktop","DESKTOP","echartRef","current","echartInstance","getEchartsInstance","setOption","on","title","show","window","innerWidth","createElement","ref","chartHeight","option"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/Chart.tsx"],"sourcesContent":["import type { BaseChartRef } from '@oanda/labs-widget-common';\nimport {\n  BaseChart,\n  getChartTheme,\n  Size,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { BarChart } from 'echarts/charts';\nimport {\n  GraphicComponent,\n  GridSimpleComponent,\n  TitleComponent,\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, getMobileOption, getOption } from './getOption';\nimport type { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  BarChart,\n  CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, timeUnit }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark, size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const echartRef = useRef<BaseChartRef | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(\n        isDesktop\n          ? getDesktopOption({ timeUnit, lang, isDark })\n          : getMobileOption({ timeUnit, lang, isDark })\n      );\n    }\n  }, [echartRef, timeUnit, isDesktop, lang, isDark]);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.on('highlight', () => {\n        echartInstance.setOption({\n          title: {\n            show: false,\n          },\n        });\n      });\n\n      echartInstance.on('globalout', () => {\n        echartInstance.setOption({\n          title: {\n            show: window.innerWidth < 769,\n          },\n        });\n      });\n    }\n  }, [echartRef]);\n\n  return (\n    <BaseChart\n      ref={echartRef}\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      option={getOption(values, lang, timeUnit)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","BarChart","GraphicComponent","GridSimpleComponent","TitleComponent","TooltipComponent","echarts","CanvasRenderer","React","CHART_HEIGHT","getOption","use","registerTheme","Dark","Light","Chart","_ref","values","timeUnit","lang","isDark","createElement","chartHeight","option","onEvents","highlight","_params","instance","setOption","title","show","globalout"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport type { EChartsType } from 'echarts';\nimport { BarChart } from 'echarts/charts';\nimport {\n  GraphicComponent,\n  GridSimpleComponent,\n  TitleComponent,\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';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  BarChart,\n  CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, timeUnit }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark } = useLayoutProvider();\n\n  return (\n    <BaseChart\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      option={getOption(values, lang, timeUnit, isDark)}\n      onEvents={{\n        highlight: (_params: unknown, instance: EChartsType) => {\n          instance.setOption({\n            title: {\n              show: false,\n            },\n          });\n        },\n        globalout: (_params: unknown, instance: EChartsType) => {\n          instance.setOption({\n            title: {\n              show: true,\n            },\n          });\n        },\n      }}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,SACEA,SAAS,EACTC,aAAa,EACbC,KAAK,EACLC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,gBAAgB,EAChBC,mBAAmB,EACnBC,cAAc,EACdC,gBAAgB,QACX,oBAAoB;AAC3B,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,aAAa;AAC1C,SAASC,SAAS,QAAQ,aAAa;AAGvCJ,OAAO,CAACK,GAAG,CAAC,CACVR,mBAAmB,EACnBD,gBAAgB,EAChBG,gBAAgB,EAChBD,cAAc,EACdH,QAAQ,EACRM,cAAc,CACf,CAAC;AAEFD,OAAO,CAACM,aAAa,CAAC,YAAY,EAAEf,aAAa,CAACC,KAAK,CAACe,IAAI,CAAC,CAAC;AAC9DP,OAAO,CAACM,aAAa,CAAC,aAAa,EAAEf,aAAa,CAACC,KAAK,CAACgB,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,MAAM;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EAC7C,MAAM;IAAEG;EAAK,CAAC,GAAGnB,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEoB;EAAO,CAAC,GAAGrB,iBAAiB,CAAC,CAAC;EAEtC,OACES,KAAA,CAAAa,aAAA,CAACzB,SAAS;IACR0B,WAAW,EAAEb,YAAa;IAC1BH,OAAO,EAAEA,OAAQ;IACjBc,MAAM,EAAEA,MAAO;IACfG,MAAM,EAAEb,SAAS,CAACO,MAAM,EAAEE,IAAI,EAAED,QAAQ,EAAEE,MAAM,CAAE;IAClDI,QAAQ,EAAE;MACRC,SAAS,EAAEA,CAACC,OAAgB,EAAEC,QAAqB,KAAK;QACtDA,QAAQ,CAACC,SAAS,CAAC;UACjBC,KAAK,EAAE;YACLC,IAAI,EAAE;UACR;QACF,CAAC,CAAC;MACJ,CAAC;MACDC,SAAS,EAAEA,CAACL,OAAgB,EAAEC,QAAqB,KAAK;QACtDA,QAAQ,CAACC,SAAS,CAAC;UACjBC,KAAK,EAAE;YACLC,IAAI,EAAE;UACR;QACF,CAAC,CAAC;MACJ;IACF;EAAE,CACH,CAAC;AAEN,CAAC;AAED,SAASf,KAAK","ignoreList":[]}

package/dist/module/VolatilityChartWidget/components/Chart/getOption.js

@@ -1,4 +1,4 @@
-import { getGridLines, getLineCommons, themeColors } from '@oanda/labs-widget-common';
+import { DESKTOP_MIN_WIDTH, getGridLines, getLineCommons, themeColors } from '@oanda/labs-widget-common';
 import { VolatilityChartTimeUnit } from '../../../gql/types/graphql';
 import { CHART_HEIGHT, CHART_WIDTH, tooltipLabels, weeklyDataLabels, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP, Y_LABEL_SIZE_MOBILE } from './constants';
 export const tooltipFormatter = _ref => {
@@ -26,7 +26,7 @@ export const getDesktopOption = _ref2 => {
   });
   return {
     title: {
-      show: false
+      text: ''
     },
     tooltip: {
       position: undefined,
@@ -86,7 +86,7 @@ export const getMobileOption = _ref3 => {
   });
   return {
     title: {
-      show: true
+      text: lang('mobile_tooltip_placeholder')
     },
     tooltip: {
       backgroundColor: 'transparent',
@@ -145,7 +145,7 @@ export const pointFormatter = _ref4 => {
   }
   return point;
 };
-export const getOption = (values, lang, timeUnit) => {
+export const getOption = (values, lang, timeUnit, isDark) => {
   const pipsValues = values.map(_ref5 => {
     let {
       pips
@@ -167,7 +167,6 @@ export const getOption = (values, lang, timeUnit) => {
     title: {
       left: 10,
       top: 20,
-      text: lang('mobile_tooltip_placeholder'),
       textStyle: {
         fontFamily: 'Sofia W03',
         fontWeight: 500,
@@ -222,6 +221,29 @@ export const getOption = (values, lang, timeUnit) => {
       data: pipsValues,
       name: 'main',
       type: 'bar'
+    }],
+    media: [{
+      query: {
+        minWidth: DESKTOP_MIN_WIDTH
+      },
+      option: {
+        ...getDesktopOption({
+          timeUnit,
+          lang,
+          isDark
+        })
+      }
+    }, {
+      query: {
+        maxWidth: DESKTOP_MIN_WIDTH - 1
+      },
+      option: {
+        ...getMobileOption({
+          timeUnit,
+          lang,
+          isDark
+        })
+      }
     }]
   };
 };

package/dist/module/VolatilityChartWidget/components/Chart/getOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["getGridLines","getLineCommons","themeColors","VolatilityChartTimeUnit","CHART_HEIGHT","CHART_WIDTH","tooltipLabels","weeklyDataLabels","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","tooltipFormatter","_ref","value","timeUnit","lang","data","axisValue","getDesktopOption","_ref2","isDark","notDate","D","desktopGridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","bottomLeftBox","title","show","tooltip","position","undefined","shadowBlur","shadowOffsetX","shadowOffsetY","backgroundColor","borderPrimary","dark","bgPrimary","light","padding","formatter","yAxis","nameTextStyle","align","axisLabel","margin","grid","name","top","left","right","bottom","graphic","shape","x1","y1","x2","y2","getMobileOption","_ref3","mobileGridLines","shadowColor","pointFormatter","_ref4","point","Date","toLocaleDateString","month","day","W","getOption","values","pipsValues","map","_ref5","pips","toFixed","points","_ref6","animation","text","textStyle","fontFamily","fontWeight","trigger","axisPointer","axis","extraCssText","xAxis","type","axisTick","alignWithLabel","axisLine","splitLine","rotate","toUpperCase","splitNumber","rich","a","index","series"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/getOption.ts"],"sourcesContent":["import {\n  getGridLines,\n  getLineCommons,\n  themeColors,\n} from '@oanda/labs-widget-common';\n\nimport { VolatilityChartTimeUnit } from '../../../gql/types/graphql';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  tooltipLabels,\n  weeklyDataLabels,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\nimport type {\n  DaysOfWeekKeys,\n  GetOptionType,\n  GetResponsiveOptionsProps,\n  PointFormatterProps,\n  TooltipData,\n  TooltipFormatterProps,\n} from './types';\n\nexport const tooltipFormatter = ({\n  value,\n  timeUnit,\n  lang,\n}: TooltipFormatterProps) =>\n  `<b>${lang('price_range')} </b>${value[0].data}<br /><b>${lang(tooltipLabels[timeUnit])} </b>${value[0].axisValue}`;\n\nexport const getDesktopOption = ({\n  timeUnit,\n  lang,\n  isDark,\n}: GetResponsiveOptionsProps) => {\n  const notDate = timeUnit !== VolatilityChartTimeUnit.D;\n\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: notDate,\n  });\n\n  return {\n    title: {\n      show: false,\n    },\n    tooltip: {\n      position: undefined,\n      shadowBlur: 24,\n      shadowOffsetX: 0,\n      shadowOffsetY: 6,\n      backgroundColor: isDark\n        ? themeColors.borderPrimary.dark\n        : themeColors.bgPrimary.light,\n      padding: [12, 8, 12, 8],\n      formatter: (value: TooltipData[]) =>\n        tooltipFormatter({ value, timeUnit, lang }),\n    },\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: '40px',\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 getMobileOption = ({\n  timeUnit,\n  lang,\n  isDark,\n}: GetResponsiveOptionsProps) => {\n  const mobileGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_MOBILE,\n    bottomLeftBox: false,\n  });\n\n  return {\n    title: {\n      show: true,\n    },\n    tooltip: {\n      backgroundColor: 'transparent',\n      shadowColor: 'transparent',\n      position: [0, 0],\n      padding: 16,\n      formatter: (value: TooltipData[]) =>\n        tooltipFormatter({ value, timeUnit, lang }),\n    },\n    yAxis: {\n      nameTextStyle: {\n        align: 'left',\n        padding: [0, 0, 0, 6],\n      },\n      axisLabel: {\n        margin: 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '60px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_MOBILE}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...mobileGridLines,\n      {\n        ...getLineCommons(isDark),\n        top: 58,\n        right: Y_LABEL_SIZE_MOBILE - 2,\n        shape: {\n          x1: 0,\n          y1: 0,\n          x2: 9999,\n          y2: 0,\n        },\n      },\n    ],\n  };\n};\n\nexport const pointFormatter = ({\n  point,\n  lang,\n  timeUnit,\n}: PointFormatterProps) => {\n  if (timeUnit === VolatilityChartTimeUnit.D) {\n    return new Date(point).toLocaleDateString(undefined, {\n      month: 'numeric',\n      day: 'numeric',\n    });\n  }\n  if (timeUnit === VolatilityChartTimeUnit.W) {\n    return lang(weeklyDataLabels[point as DaysOfWeekKeys]);\n  }\n\n  return point;\n};\n\nexport const getOption: GetOptionType = (values, lang, timeUnit) => {\n  const pipsValues = values.map(({ pips }) => pips.toFixed());\n  const points = values.map(({ point }) =>\n    pointFormatter({ point, lang, timeUnit })\n  );\n\n  return {\n    animation: false,\n    title: {\n      left: 10,\n      top: 20,\n      text: lang('mobile_tooltip_placeholder'),\n      textStyle: {\n        fontFamily: 'Sofia W03',\n        fontWeight: 500,\n        padding: 16,\n      },\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n      },\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      data: points,\n      axisTick: {\n        alignWithLabel: true,\n      },\n      axisLine: { show: false },\n      splitLine: { show: false },\n      axisLabel: {\n        margin: 10,\n        rotate: -45,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      name: lang('pips').toUpperCase(),\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        rich: {\n          a: {\n            padding: [0, 0, 20, 0],\n          },\n        },\n        formatter: (value, index) => (index ? `${value}` : `{a|${value}}`),\n      },\n    },\n    series: [\n      {\n        data: pipsValues,\n        name: 'main',\n        type: 'bar',\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["DESKTOP_MIN_WIDTH","getGridLines","getLineCommons","themeColors","VolatilityChartTimeUnit","CHART_HEIGHT","CHART_WIDTH","tooltipLabels","weeklyDataLabels","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","tooltipFormatter","_ref","value","timeUnit","lang","data","axisValue","getDesktopOption","_ref2","isDark","notDate","D","desktopGridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","bottomLeftBox","title","text","tooltip","position","undefined","shadowBlur","shadowOffsetX","shadowOffsetY","backgroundColor","borderPrimary","dark","bgPrimary","light","padding","formatter","yAxis","nameTextStyle","align","axisLabel","margin","grid","name","top","left","right","bottom","graphic","shape","x1","y1","x2","y2","getMobileOption","_ref3","mobileGridLines","shadowColor","pointFormatter","_ref4","point","Date","toLocaleDateString","month","day","W","getOption","values","pipsValues","map","_ref5","pips","toFixed","points","_ref6","animation","textStyle","fontFamily","fontWeight","trigger","axisPointer","axis","extraCssText","xAxis","type","axisTick","alignWithLabel","axisLine","show","splitLine","rotate","toUpperCase","splitNumber","rich","a","index","series","media","query","minWidth","option","maxWidth"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/getOption.ts"],"sourcesContent":["import {\n  DESKTOP_MIN_WIDTH,\n  getGridLines,\n  getLineCommons,\n  themeColors,\n} from '@oanda/labs-widget-common';\n\nimport { VolatilityChartTimeUnit } from '../../../gql/types/graphql';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  tooltipLabels,\n  weeklyDataLabels,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE_DESKTOP,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\nimport type {\n  DaysOfWeekKeys,\n  GetOptionType,\n  GetResponsiveOptionsProps,\n  PointFormatterProps,\n  TooltipData,\n  TooltipFormatterProps,\n} from './types';\n\nexport const tooltipFormatter = ({\n  value,\n  timeUnit,\n  lang,\n}: TooltipFormatterProps) =>\n  `<b>${lang('price_range')} </b>${value[0].data}<br /><b>${lang(tooltipLabels[timeUnit])} </b>${value[0].axisValue}`;\n\nexport const getDesktopOption = ({\n  timeUnit,\n  lang,\n  isDark,\n}: GetResponsiveOptionsProps) => {\n  const notDate = timeUnit !== VolatilityChartTimeUnit.D;\n\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: notDate,\n  });\n\n  return {\n    title: {\n      text: '',\n    },\n    tooltip: {\n      position: undefined,\n      shadowBlur: 24,\n      shadowOffsetX: 0,\n      shadowOffsetY: 6,\n      backgroundColor: isDark\n        ? themeColors.borderPrimary.dark\n        : themeColors.bgPrimary.light,\n      padding: [12, 8, 12, 8],\n      formatter: (value: TooltipData[]) =>\n        tooltipFormatter({ value, timeUnit, lang }),\n    },\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: '40px',\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 getMobileOption = ({\n  timeUnit,\n  lang,\n  isDark,\n}: GetResponsiveOptionsProps) => {\n  const mobileGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: X_LABEL_SIZE,\n    yLabelSize: Y_LABEL_SIZE_MOBILE,\n    bottomLeftBox: false,\n  });\n\n  return {\n    title: {\n      text: lang('mobile_tooltip_placeholder'),\n    },\n    tooltip: {\n      backgroundColor: 'transparent',\n      shadowColor: 'transparent',\n      position: [0, 0],\n      padding: 16,\n      formatter: (value: TooltipData[]) =>\n        tooltipFormatter({ value, timeUnit, lang }),\n    },\n    yAxis: {\n      nameTextStyle: {\n        align: 'left',\n        padding: [0, 0, 0, 6],\n      },\n      axisLabel: {\n        margin: 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '60px',\n        left: '0px',\n        right: `${Y_LABEL_SIZE_MOBILE}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...mobileGridLines,\n      {\n        ...getLineCommons(isDark),\n        top: 58,\n        right: Y_LABEL_SIZE_MOBILE - 2,\n        shape: {\n          x1: 0,\n          y1: 0,\n          x2: 9999,\n          y2: 0,\n        },\n      },\n    ],\n  };\n};\n\nexport const pointFormatter = ({\n  point,\n  lang,\n  timeUnit,\n}: PointFormatterProps) => {\n  if (timeUnit === VolatilityChartTimeUnit.D) {\n    return new Date(point).toLocaleDateString(undefined, {\n      month: 'numeric',\n      day: 'numeric',\n    });\n  }\n  if (timeUnit === VolatilityChartTimeUnit.W) {\n    return lang(weeklyDataLabels[point as DaysOfWeekKeys]);\n  }\n\n  return point;\n};\n\nexport const getOption: GetOptionType = (values, lang, timeUnit, isDark) => {\n  const pipsValues = values.map(({ pips }) => pips.toFixed());\n  const points = values.map(({ point }) =>\n    pointFormatter({ point, lang, timeUnit })\n  );\n\n  return {\n    animation: false,\n    title: {\n      left: 10,\n      top: 20,\n      textStyle: {\n        fontFamily: 'Sofia W03',\n        fontWeight: 500,\n        padding: 16,\n      },\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n      },\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      data: points,\n      axisTick: {\n        alignWithLabel: true,\n      },\n      axisLine: { show: false },\n      splitLine: { show: false },\n      axisLabel: {\n        margin: 10,\n        rotate: -45,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      name: lang('pips').toUpperCase(),\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        rich: {\n          a: {\n            padding: [0, 0, 20, 0],\n          },\n        },\n        formatter: (value, index) => (index ? `${value}` : `{a|${value}}`),\n      },\n    },\n    series: [\n      {\n        data: pipsValues,\n        name: 'main',\n        type: 'bar',\n      },\n    ],\n    media: [\n      {\n        query: {\n          minWidth: DESKTOP_MIN_WIDTH,\n        },\n        option: {\n          ...getDesktopOption({ timeUnit, lang, isDark }),\n        },\n      },\n      {\n        query: {\n          maxWidth: DESKTOP_MIN_WIDTH - 1,\n        },\n        option: {\n          ...getMobileOption({ timeUnit, lang, isDark }),\n        },\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["DaysOfWeekKeys"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type { VolatilityChartTimeUnit } from '../../../gql/types/graphql';\n\nexport enum DaysOfWeekKeys {\n  MONDAY = 'MONDAY',\n  TUESDAY = 'TUESDAY',\n  WEDNESDAY = 'WEDNESDAY',\n  THURSDAY = 'THURSDAY',\n  FRIDAY = 'FRIDAY',\n}\nexport interface VolatilityChartDataValues {\n  pips: number;\n  point: string;\n}\nexport interface ChartProps {\n  values: VolatilityChartDataValues[];\n  timeUnit: VolatilityChartTimeUnit;\n}\nexport interface TooltipData {\n  axisValue: string;\n  data: string;\n}\n\nexport type GetOptionType = (\n  values: VolatilityChartDataValues[],\n  lang: (label: string) => string,\n  timeUnit: VolatilityChartTimeUnit\n) => EChartsOption;\n\nexport interface GetResponsiveOptionsProps {\n  timeUnit: VolatilityChartTimeUnit;\n  lang: (label: string) => string;\n  isDark: boolean;\n}\n\nexport interface TooltipFormatterProps {\n  value: TooltipData[];\n  timeUnit: VolatilityChartTimeUnit;\n  lang: (label: string) => string;\n}\nexport interface PointFormatterProps {\n  point: string;\n  lang: (label: string) => string;\n  timeUnit: VolatilityChartTimeUnit;\n}\n"],"mappings":"AAIA,WAAYA,cAAc,aAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}
+{"version":3,"file":"types.js","names":["DaysOfWeekKeys"],"sources":["../../../../../src/VolatilityChartWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type { VolatilityChartTimeUnit } from '../../../gql/types/graphql';\n\nexport enum DaysOfWeekKeys {\n  MONDAY = 'MONDAY',\n  TUESDAY = 'TUESDAY',\n  WEDNESDAY = 'WEDNESDAY',\n  THURSDAY = 'THURSDAY',\n  FRIDAY = 'FRIDAY',\n}\nexport interface VolatilityChartDataValues {\n  pips: number;\n  point: string;\n}\nexport interface ChartProps {\n  values: VolatilityChartDataValues[];\n  timeUnit: VolatilityChartTimeUnit;\n}\nexport interface TooltipData {\n  axisValue: string;\n  data: string;\n}\n\nexport type GetOptionType = (\n  values: VolatilityChartDataValues[],\n  lang: (label: string) => string,\n  timeUnit: VolatilityChartTimeUnit,\n  isDark: boolean\n) => EChartsOption;\n\nexport interface GetResponsiveOptionsProps {\n  timeUnit: VolatilityChartTimeUnit;\n  lang: (label: string) => string;\n  isDark: boolean;\n}\n\nexport interface TooltipFormatterProps {\n  value: TooltipData[];\n  timeUnit: VolatilityChartTimeUnit;\n  lang: (label: string) => string;\n}\nexport interface PointFormatterProps {\n  point: string;\n  lang: (label: string) => string;\n  timeUnit: VolatilityChartTimeUnit;\n}\n"],"mappings":"AAIA,WAAYA,cAAc,aAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}

package/dist/types/VolatilityChartWidget/components/Chart/getOption.d.ts

@@ -2,7 +2,7 @@ import type { GetOptionType, GetResponsiveOptionsProps, PointFormatterProps, Too
 export declare const tooltipFormatter: ({ value, timeUnit, lang, }: TooltipFormatterProps) => string;
 export declare const getDesktopOption: ({ timeUnit, lang, isDark, }: GetResponsiveOptionsProps) => {
     title: {
-        show: boolean;
+        text: string;
     };
     tooltip: {
         position: undefined;
@@ -127,7 +127,7 @@ export declare const getDesktopOption: ({ timeUnit, lang, isDark, }: GetResponsi
 };
 export declare const getMobileOption: ({ timeUnit, lang, isDark, }: GetResponsiveOptionsProps) => {
     title: {
-        show: boolean;
+        text: string;
     };
     tooltip: {
         backgroundColor: string;

package/dist/types/VolatilityChartWidget/components/Chart/types.d.ts

@@ -19,7 +19,7 @@ export interface TooltipData {
     axisValue: string;
     data: string;
 }
-export type GetOptionType = (values: VolatilityChartDataValues[], lang: (label: string) => string, timeUnit: VolatilityChartTimeUnit) => EChartsOption;
+export type GetOptionType = (values: VolatilityChartDataValues[], lang: (label: string) => string, timeUnit: VolatilityChartTimeUnit, isDark: boolean) => EChartsOption;
 export interface GetResponsiveOptionsProps {
     timeUnit: VolatilityChartTimeUnit;
     lang: (label: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-volatility-chart-widget",
-  "version": "1.0.167",
+  "version": "1.0.169",
   "description": "Labs Volatility Chart Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,15 +12,15 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.218",
+    "@oanda/labs-widget-common": "^1.0.220",
     "@oanda/mono-i18n": "10.0.1",
-    "echarts": "5.5.0",
-    "echarts-for-react": "3.0.2",
+    "echarts": "6.0.0",
+    "echarts-for-react": "3.0.4",
     "graphql": "16.8.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "7a07df3d3cadc0733696bb4579b520fe54eacee0"
+  "gitHead": "84d9bec88af7893f20ccd2d88fcbc28dd30aec22"
 }