@oanda/labs-currency-power-balance-widget 1.0.157 → 1.0.158

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js

@@ -9,7 +9,7 @@ var _graphql = require("../../../../gql/types/graphql");
 var _constants = require("./constants");
 var _formatters = require("./formatters");
 var _utils = require("./utils");
-const getOption = (chartData, timeUnit, isDark, lang) => {
+const getOption = (chartData, timeUnit, isDark, isDesktop, isMobile, lang) => {
   const currentTheme = isDark ? _labsWidgetCommon.Theme.Dark : _labsWidgetCommon.Theme.Light;
   const dataTimestamps = chartData[0].power.map(x => new Date(x.point).getTime());
   const weekendsIndexes = (0, _utils.findLastIndexesBeforeWeekend)(dataTimestamps);
@@ -77,6 +77,15 @@ const getOption = (chartData, timeUnit, isDark, lang) => {
     };
   });
   const legendData = (0, _formatters.formatLegendData)(chartData);
+  const baseGridLines = (0, _labsWidgetCommon.getGridLines)({
+    isDark,
+    chartWidth: _constants.CHART_WIDTH,
+    chartHeight: _constants.CHART_HEIGHT,
+    xLabelsSize: isMobile ? _constants.X_LABEL_SIZE_MOBILE : _constants.X_LABEL_SIZE,
+    yLabelSize: isMobile ? _constants.Y_LABEL_SIZE_MOBILE : _constants.Y_LABEL_SIZE,
+    bottomLeftBox: false,
+    marginBottom: isMobile ? _constants.LEGEND_HEIGHT_MOBILE : _constants.LEGEND_HEIGHT
+  });
   return {
     animation: false,
     legend: {
@@ -129,10 +138,19 @@ const getOption = (chartData, timeUnit, isDark, lang) => {
       boundaryGap: ['10%', '10%'],
       axisLabel: {
         showMaxLabel: false,
-        showMinLabel: false
+        showMinLabel: false,
+        margin: isDesktop ? 8 : 6
       }
     },
-    series: seriesData
+    series: seriesData,
+    grid: [{
+      name: 'main-grid',
+      top: '0px',
+      left: '0px',
+      right: `${isMobile ? _constants.Y_LABEL_SIZE_MOBILE : _constants.Y_LABEL_SIZE}px`,
+      bottom: `${isMobile ? _constants.X_LABEL_SIZE_MOBILE : _constants.X_LABEL_SIZE}px`
+    }],
+    graphic: [...baseGridLines]
   };
 };
 exports.getOption = getOption;

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_graphql","_constants","_formatters","_utils","getOption","chartData","timeUnit","isDark","lang","currentTheme","Theme","Dark","Light","dataTimestamps","power","map","x","Date","point","getTime","weekendsIndexes","findLastIndexesBeforeWeekend","disableWeekendsIndicator","CurrencyPowerBalanceTimeUnit","CurrentDay","PreviousDay","M3","includes","length","weekendsMarks","item","xAxis","label","formatter","seriesData","_ref","index","currency","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","data","_ref2","price","markLine","show","position","align","distance","padding","fontSize","shadowBlur","shadowOffsetX","shadowOffsetY","borderWidth","themeColors","textPrimary","shadowColor","borderRadius","backgroundColor","borderPrimary","bgSecondary","emphasis","lineStyle","width","opacity","undefined","legendData","formatLegendData","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","tooltipFormatter","extraCssText","axisTick","axisLine","splitLine","axisLabel","margin","rotate","interval","intervalFormatter","xAxisLabelFormatter","yAxis","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { Theme, themeColors } from '@oanda/labs-widget-common';\n\nimport type { CurrencyPowerBalance } from '../../../../gql/types/graphql';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport {\n  formatLegendData,\n  intervalFormatter,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n} from './formatters';\nimport { findLastIndexesBeforeWeekend } from './utils';\n\nconst getOption = (\n  chartData: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n  lang: (key: string) => string\n) => {\n  const currentTheme = isDark ? Theme.Dark : Theme.Light;\n  const dataTimestamps = chartData[0].power.map((x) =>\n    new Date(x.point).getTime()\n  );\n  const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);\n  const disableWeekendsIndicator =\n    [\n      CurrencyPowerBalanceTimeUnit.CurrentDay,\n      CurrencyPowerBalanceTimeUnit.PreviousDay,\n      CurrencyPowerBalanceTimeUnit.M3,\n    ].includes(timeUnit) || weekendsIndexes.length === 0;\n\n  const weekendsMarks = weekendsIndexes.map((item) => ({\n    xAxis: item,\n    label: {\n      formatter: () => lang('market_closed'),\n    },\n  }));\n\n  const seriesData = chartData.map(({ currency, power }, index) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\n    markLine:\n      index === chartData.length - 1 && !disableWeekendsIndicator\n        ? {\n            label: {\n              show: false,\n              position: 'end',\n              align: 'center',\n              distance: -32,\n              padding: [8, 8],\n              fontSize: 12,\n              shadowBlur: 24,\n              shadowOffsetX: 0,\n              shadowOffsetY: 6,\n              borderWidth: 0,\n              color: themeColors.textPrimary,\n              shadowColor: 'rgba(0,0,0,0.1)',\n              borderRadius: 4,\n              backgroundColor: isDark\n                ? themeColors.borderPrimary[currentTheme]\n                : themeColors.bgSecondary[currentTheme],\n            },\n            show: false,\n            emphasis: {\n              label: {\n                show: true,\n              },\n              lineStyle: {\n                width: 1,\n                opacity: 0,\n                color: themeColors.borderPrimary[currentTheme],\n              },\n            },\n            symbol: ['none', 'none'],\n            itemStyle: {\n              color: themeColors.borderPrimary[currentTheme],\n            },\n            data: weekendsMarks,\n          }\n        : undefined,\n  }));\n\n  const legendData = formatLegendData(chartData);\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark\n            ? TOOLTIP_LINE_COLOR_CONFIG.DARK\n            : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      axisTick: {\n        show: false,\n      },\n      axisLine: { show: false },\n      splitLine: {\n        show: true,\n      },\n      axisLabel: {\n        padding: [0, 0, 0, 4],\n        align: 'left',\n        margin: 10,\n        rotate: -45,\n        interval: intervalFormatter(seriesData[0].data.length),\n        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      boundaryGap: ['10%', '10%'],\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: seriesData,\n  };\n};\n\nexport { getOption };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_graphql","_constants","_formatters","_utils","getOption","chartData","timeUnit","isDark","isDesktop","isMobile","lang","currentTheme","Theme","Dark","Light","dataTimestamps","power","map","x","Date","point","getTime","weekendsIndexes","findLastIndexesBeforeWeekend","disableWeekendsIndicator","CurrencyPowerBalanceTimeUnit","CurrentDay","PreviousDay","M3","includes","length","weekendsMarks","item","xAxis","label","formatter","seriesData","_ref","index","currency","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","data","_ref2","price","markLine","show","position","align","distance","padding","fontSize","shadowBlur","shadowOffsetX","shadowOffsetY","borderWidth","themeColors","textPrimary","shadowColor","borderRadius","backgroundColor","borderPrimary","bgSecondary","emphasis","lineStyle","width","opacity","undefined","legendData","formatLegendData","baseGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE_MOBILE","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","bottomLeftBox","marginBottom","LEGEND_HEIGHT_MOBILE","LEGEND_HEIGHT","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","tooltipFormatter","extraCssText","axisTick","axisLine","splitLine","axisLabel","margin","rotate","interval","intervalFormatter","xAxisLabelFormatter","yAxis","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series","grid","top","left","right","graphic","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { getGridLines, Theme, themeColors } from '@oanda/labs-widget-common';\n\nimport type { CurrencyPowerBalance } from '../../../../gql/types/graphql';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  COLOR_CONFIG,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  TOOLTIP_LINE_COLOR_CONFIG,\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\nimport {\n  formatLegendData,\n  intervalFormatter,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n} from './formatters';\nimport { findLastIndexesBeforeWeekend } from './utils';\n\nconst getOption = (\n  chartData: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n  isDesktop: boolean,\n  isMobile: boolean,\n  lang: (key: string) => string\n) => {\n  const currentTheme = isDark ? Theme.Dark : Theme.Light;\n  const dataTimestamps = chartData[0].power.map((x) =>\n    new Date(x.point).getTime()\n  );\n  const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);\n  const disableWeekendsIndicator =\n    [\n      CurrencyPowerBalanceTimeUnit.CurrentDay,\n      CurrencyPowerBalanceTimeUnit.PreviousDay,\n      CurrencyPowerBalanceTimeUnit.M3,\n    ].includes(timeUnit) || weekendsIndexes.length === 0;\n\n  const weekendsMarks = weekendsIndexes.map((item) => ({\n    xAxis: item,\n    label: {\n      formatter: () => lang('market_closed'),\n    },\n  }));\n\n  const seriesData = chartData.map(({ currency, power }, index) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\n    markLine:\n      index === chartData.length - 1 && !disableWeekendsIndicator\n        ? {\n            label: {\n              show: false,\n              position: 'end',\n              align: 'center',\n              distance: -32,\n              padding: [8, 8],\n              fontSize: 12,\n              shadowBlur: 24,\n              shadowOffsetX: 0,\n              shadowOffsetY: 6,\n              borderWidth: 0,\n              color: themeColors.textPrimary,\n              shadowColor: 'rgba(0,0,0,0.1)',\n              borderRadius: 4,\n              backgroundColor: isDark\n                ? themeColors.borderPrimary[currentTheme]\n                : themeColors.bgSecondary[currentTheme],\n            },\n            show: false,\n            emphasis: {\n              label: {\n                show: true,\n              },\n              lineStyle: {\n                width: 1,\n                opacity: 0,\n                color: themeColors.borderPrimary[currentTheme],\n              },\n            },\n            symbol: ['none', 'none'],\n            itemStyle: {\n              color: themeColors.borderPrimary[currentTheme],\n            },\n            data: weekendsMarks,\n          }\n        : undefined,\n  }));\n\n  const legendData = formatLegendData(chartData);\n\n  const baseGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,\n    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,\n    bottomLeftBox: false,\n    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,\n  });\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark\n            ? TOOLTIP_LINE_COLOR_CONFIG.DARK\n            : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      axisTick: {\n        show: false,\n      },\n      axisLine: { show: false },\n      splitLine: {\n        show: true,\n      },\n      axisLabel: {\n        padding: [0, 0, 0, 4],\n        align: 'left',\n        margin: 10,\n        rotate: -45,\n        interval: intervalFormatter(seriesData[0].data.length),\n        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      boundaryGap: ['10%', '10%'],\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n        margin: isDesktop ? 8 : 6,\n      },\n    },\n    series: seriesData,\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,\n        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [...baseGridLines],\n  };\n};\n\nexport { getOption };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/index.js

@@ -14,15 +14,4 @@ Object.keys(_getOption).forEach(function (key) {
     }
   });
 });
-var _getResponsiveOption = require("./getResponsiveOption");
-Object.keys(_getResponsiveOption).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _getResponsiveOption[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _getResponsiveOption[key];
-    }
-  });
-});
 //# sourceMappingURL=index.js.map

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_getOption","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_getResponsiveOption"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/index.ts"],"sourcesContent":["export * from './getOption';\nexport * from './getResponsiveOption';\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,UAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,UAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,oBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,oBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,oBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,oBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_getOption","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/index.ts"],"sourcesContent":["export * from './getOption';\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,UAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,UAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

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

@@ -4,8 +4,8 @@ import { LineChart } from 'echarts/charts';
 import { GraphicComponent, GridSimpleComponent, LegendPlainComponent, MarkLineComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import React, { useEffect, useRef } from 'react';
-import { getOption, getResponsiveOption } from './options';
+import React from 'react';
+import { getOption } from './options';
 import { CHART_HEIGHT } from './options/constants';
 echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, LineChart, CanvasRenderer, MarkLineComponent]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
@@ -25,25 +25,17 @@ const Chart = _ref => {
   } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const isMobile = size === Size.MOBILE;
-  const echartRef = useRef(null);
   const chartData = currencies ? values.filter(_ref2 => {
     let {
       currency
     } = _ref2;
     return currencies.includes(currency);
   }) : values;
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-      echartInstance.setOption(getResponsiveOption(isDesktop, isMobile, isDark));
-    }
-  }, [echartRef, isDesktop, isMobile, isDark]);
   return React.createElement(BaseChart, {
-    ref: echartRef,
     chartHeight: CHART_HEIGHT,
     echarts: echarts,
     isDark: isDark,
-    option: getOption(chartData, timeUnit, isDark, lang)
+    option: getOption(chartData, timeUnit, isDark, isDesktop, isMobile, lang)
   });
 };
 export { Chart };

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Size","Theme","useLayoutProvider","useLocale","LineChart","GraphicComponent","GridSimpleComponent","LegendPlainComponent","MarkLineComponent","TooltipComponent","echarts","CanvasRenderer","React","useEffect","useRef","getOption","getResponsiveOption","CHART_HEIGHT","use","registerTheme","Dark","Light","Chart","_ref","values","timeUnit","currencies","lang","isDark","size","isDesktop","DESKTOP","isMobile","MOBILE","echartRef","chartData","filter","_ref2","currency","includes","current","echartInstance","getEchartsInstance","setOption","createElement","ref","chartHeight","option"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/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 { LineChart } from 'echarts/charts';\nimport {\n  GraphicComponent,\n  GridSimpleComponent,\n  LegendPlainComponent,\n  MarkLineComponent,\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 { getOption, getResponsiveOption } from './options';\nimport { CHART_HEIGHT } from './options/constants';\nimport type { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  LegendPlainComponent,\n  LineChart,\n  CanvasRenderer,\n  MarkLineComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, timeUnit, currencies }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark, size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const isMobile = size === Size.MOBILE;\n\n  const echartRef = useRef<BaseChartRef | null>(null);\n\n  const chartData = currencies\n    ? values.filter(({ currency }) => currencies.includes(currency))\n    : values;\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(\n        getResponsiveOption(isDesktop, isMobile, isDark)\n      );\n    }\n  }, [echartRef, isDesktop, isMobile, isDark]);\n\n  return (\n    <BaseChart\n      ref={echartRef}\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      option={getOption(chartData, timeUnit, isDark, lang)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AACA,SACEA,SAAS,EACTC,aAAa,EACbC,IAAI,EACJC,KAAK,EACLC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SACEC,gBAAgB,EAChBC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,gBAAgB,QACX,oBAAoB;AAC3B,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,SAAS,EAAEC,mBAAmB,QAAQ,WAAW;AAC1D,SAASC,YAAY,QAAQ,qBAAqB;AAGlDP,OAAO,CAACQ,GAAG,CAAC,CACVZ,mBAAmB,EACnBD,gBAAgB,EAChBI,gBAAgB,EAChBF,oBAAoB,EACpBH,SAAS,EACTO,cAAc,EACdH,iBAAiB,CAClB,CAAC;AAEFE,OAAO,CAACS,aAAa,CAAC,YAAY,EAAEpB,aAAa,CAACE,KAAK,CAACmB,IAAI,CAAC,CAAC;AAC9DV,OAAO,CAACS,aAAa,CAAC,aAAa,EAAEpB,aAAa,CAACE,KAAK,CAACoB,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAkD;EAAA,IAAjD;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAuB,CAAC,GAAAH,IAAA;EACzD,MAAM;IAAEI;EAAK,CAAC,GAAGxB,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEyB,MAAM;IAAEC;EAAK,CAAC,GAAG3B,iBAAiB,CAAC,CAAC;EAC5C,MAAM4B,SAAS,GAAGD,IAAI,KAAK7B,IAAI,CAAC+B,OAAO;EACvC,MAAMC,QAAQ,GAAGH,IAAI,KAAK7B,IAAI,CAACiC,MAAM;EAErC,MAAMC,SAAS,GAAGpB,MAAM,CAAsB,IAAI,CAAC;EAEnD,MAAMqB,SAAS,GAAGT,UAAU,GACxBF,MAAM,CAACY,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEC;IAAS,CAAC,GAAAD,KAAA;IAAA,OAAKX,UAAU,CAACa,QAAQ,CAACD,QAAQ,CAAC;EAAA,EAAC,GAC9Dd,MAAM;EAEVX,SAAS,CAAC,MAAM;IACd,IAAIqB,SAAS,CAACM,OAAO,EAAE;MACrB,MAAMC,cAAc,GAAGP,SAAS,CAACM,OAAO,CAACE,kBAAkB,CAAC,CAAC;MAE7DD,cAAc,CAACE,SAAS,CACtB3B,mBAAmB,CAACc,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CACjD,CAAC;IACH;EACF,CAAC,EAAE,CAACM,SAAS,EAAEJ,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CAAC,CAAC;EAE5C,OACEhB,KAAA,CAAAgC,aAAA,CAAC9C,SAAS;IACR+C,GAAG,EAAEX,SAAU;IACfY,WAAW,EAAE7B,YAAa;IAC1BP,OAAO,EAAEA,OAAQ;IACjBkB,MAAM,EAAEA,MAAO;IACfmB,MAAM,EAAEhC,SAAS,CAACoB,SAAS,EAAEV,QAAQ,EAAEG,MAAM,EAAED,IAAI;EAAE,CACtD,CAAC;AAEN,CAAC;AAED,SAASL,KAAK","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Size","Theme","useLayoutProvider","useLocale","LineChart","GraphicComponent","GridSimpleComponent","LegendPlainComponent","MarkLineComponent","TooltipComponent","echarts","CanvasRenderer","React","getOption","CHART_HEIGHT","use","registerTheme","Dark","Light","Chart","_ref","values","timeUnit","currencies","lang","isDark","size","isDesktop","DESKTOP","isMobile","MOBILE","chartData","filter","_ref2","currency","includes","createElement","chartHeight","option"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Size,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { LineChart } from 'echarts/charts';\nimport {\n  GraphicComponent,\n  GridSimpleComponent,\n  LegendPlainComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React from 'react';\n\nimport { getOption } from './options';\nimport { CHART_HEIGHT } from './options/constants';\nimport type { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  LegendPlainComponent,\n  LineChart,\n  CanvasRenderer,\n  MarkLineComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, timeUnit, currencies }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark, size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const isMobile = size === Size.MOBILE;\n\n  const chartData = currencies\n    ? values.filter(({ currency }) => currencies.includes(currency))\n    : values;\n\n  return (\n    <BaseChart\n      chartHeight={CHART_HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      option={getOption(chartData, timeUnit, isDark, isDesktop, isMobile, lang)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,SACEA,SAAS,EACTC,aAAa,EACbC,IAAI,EACJC,KAAK,EACLC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SACEC,gBAAgB,EAChBC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,gBAAgB,QACX,oBAAoB;AAC3B,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,WAAW;AACrC,SAASC,YAAY,QAAQ,qBAAqB;AAGlDJ,OAAO,CAACK,GAAG,CAAC,CACVT,mBAAmB,EACnBD,gBAAgB,EAChBI,gBAAgB,EAChBF,oBAAoB,EACpBH,SAAS,EACTO,cAAc,EACdH,iBAAiB,CAClB,CAAC;AAEFE,OAAO,CAACM,aAAa,CAAC,YAAY,EAAEjB,aAAa,CAACE,KAAK,CAACgB,IAAI,CAAC,CAAC;AAC9DP,OAAO,CAACM,aAAa,CAAC,aAAa,EAAEjB,aAAa,CAACE,KAAK,CAACiB,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAkD;EAAA,IAAjD;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAuB,CAAC,GAAAH,IAAA;EACzD,MAAM;IAAEI;EAAK,CAAC,GAAGrB,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEsB,MAAM;IAAEC;EAAK,CAAC,GAAGxB,iBAAiB,CAAC,CAAC;EAC5C,MAAMyB,SAAS,GAAGD,IAAI,KAAK1B,IAAI,CAAC4B,OAAO;EACvC,MAAMC,QAAQ,GAAGH,IAAI,KAAK1B,IAAI,CAAC8B,MAAM;EAErC,MAAMC,SAAS,GAAGR,UAAU,GACxBF,MAAM,CAACW,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEC;IAAS,CAAC,GAAAD,KAAA;IAAA,OAAKV,UAAU,CAACY,QAAQ,CAACD,QAAQ,CAAC;EAAA,EAAC,GAC9Db,MAAM;EAEV,OACET,KAAA,CAAAwB,aAAA,CAACtC,SAAS;IACRuC,WAAW,EAAEvB,YAAa;IAC1BJ,OAAO,EAAEA,OAAQ;IACjBe,MAAM,EAAEA,MAAO;IACfa,MAAM,EAAEzB,SAAS,CAACkB,SAAS,EAAET,QAAQ,EAAEG,MAAM,EAAEE,SAAS,EAAEE,QAAQ,EAAEL,IAAI;EAAE,CAC3E,CAAC;AAEN,CAAC;AAED,SAASL,KAAK","ignoreList":[]}

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js

@@ -1,9 +1,9 @@
-import { Theme, themeColors } from '@oanda/labs-widget-common';
+import { getGridLines, Theme, themeColors } from '@oanda/labs-widget-common';
 import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
+import { CHART_HEIGHT, CHART_WIDTH, COLOR_CONFIG, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, TOOLTIP_LINE_COLOR_CONFIG, X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, Y_LABEL_SIZE_MOBILE } from './constants';
 import { formatLegendData, intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';
 import { findLastIndexesBeforeWeekend } from './utils';
-const getOption = (chartData, timeUnit, isDark, lang) => {
+const getOption = (chartData, timeUnit, isDark, isDesktop, isMobile, lang) => {
   const currentTheme = isDark ? Theme.Dark : Theme.Light;
   const dataTimestamps = chartData[0].power.map(x => new Date(x.point).getTime());
   const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);
@@ -71,6 +71,15 @@ const getOption = (chartData, timeUnit, isDark, lang) => {
     };
   });
   const legendData = formatLegendData(chartData);
+  const baseGridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: CHART_HEIGHT,
+    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,
+    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,
+    bottomLeftBox: false,
+    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT
+  });
   return {
     animation: false,
     legend: {
@@ -123,10 +132,19 @@ const getOption = (chartData, timeUnit, isDark, lang) => {
       boundaryGap: ['10%', '10%'],
       axisLabel: {
         showMaxLabel: false,
-        showMinLabel: false
+        showMinLabel: false,
+        margin: isDesktop ? 8 : 6
       }
     },
-    series: seriesData
+    series: seriesData,
+    grid: [{
+      name: 'main-grid',
+      top: '0px',
+      left: '0px',
+      right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,
+      bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`
+    }],
+    graphic: [...baseGridLines]
   };
 };
 export { getOption };

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["Theme","themeColors","CurrencyPowerBalanceTimeUnit","COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","formatLegendData","intervalFormatter","tooltipFormatter","xAxisLabelFormatter","findLastIndexesBeforeWeekend","getOption","chartData","timeUnit","isDark","lang","currentTheme","Dark","Light","dataTimestamps","power","map","x","Date","point","getTime","weekendsIndexes","disableWeekendsIndicator","CurrentDay","PreviousDay","M3","includes","length","weekendsMarks","item","xAxis","label","formatter","seriesData","_ref","index","currency","name","type","symbol","showSymbol","itemStyle","color","data","_ref2","price","markLine","show","position","align","distance","padding","fontSize","shadowBlur","shadowOffsetX","shadowOffsetY","borderWidth","textPrimary","shadowColor","borderRadius","backgroundColor","borderPrimary","bgSecondary","emphasis","lineStyle","width","opacity","undefined","legendData","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","extraCssText","axisTick","axisLine","splitLine","axisLabel","margin","rotate","interval","yAxis","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { Theme, themeColors } from '@oanda/labs-widget-common';\n\nimport type { CurrencyPowerBalance } from '../../../../gql/types/graphql';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport {\n  formatLegendData,\n  intervalFormatter,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n} from './formatters';\nimport { findLastIndexesBeforeWeekend } from './utils';\n\nconst getOption = (\n  chartData: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n  lang: (key: string) => string\n) => {\n  const currentTheme = isDark ? Theme.Dark : Theme.Light;\n  const dataTimestamps = chartData[0].power.map((x) =>\n    new Date(x.point).getTime()\n  );\n  const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);\n  const disableWeekendsIndicator =\n    [\n      CurrencyPowerBalanceTimeUnit.CurrentDay,\n      CurrencyPowerBalanceTimeUnit.PreviousDay,\n      CurrencyPowerBalanceTimeUnit.M3,\n    ].includes(timeUnit) || weekendsIndexes.length === 0;\n\n  const weekendsMarks = weekendsIndexes.map((item) => ({\n    xAxis: item,\n    label: {\n      formatter: () => lang('market_closed'),\n    },\n  }));\n\n  const seriesData = chartData.map(({ currency, power }, index) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\n    markLine:\n      index === chartData.length - 1 && !disableWeekendsIndicator\n        ? {\n            label: {\n              show: false,\n              position: 'end',\n              align: 'center',\n              distance: -32,\n              padding: [8, 8],\n              fontSize: 12,\n              shadowBlur: 24,\n              shadowOffsetX: 0,\n              shadowOffsetY: 6,\n              borderWidth: 0,\n              color: themeColors.textPrimary,\n              shadowColor: 'rgba(0,0,0,0.1)',\n              borderRadius: 4,\n              backgroundColor: isDark\n                ? themeColors.borderPrimary[currentTheme]\n                : themeColors.bgSecondary[currentTheme],\n            },\n            show: false,\n            emphasis: {\n              label: {\n                show: true,\n              },\n              lineStyle: {\n                width: 1,\n                opacity: 0,\n                color: themeColors.borderPrimary[currentTheme],\n              },\n            },\n            symbol: ['none', 'none'],\n            itemStyle: {\n              color: themeColors.borderPrimary[currentTheme],\n            },\n            data: weekendsMarks,\n          }\n        : undefined,\n  }));\n\n  const legendData = formatLegendData(chartData);\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark\n            ? TOOLTIP_LINE_COLOR_CONFIG.DARK\n            : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      axisTick: {\n        show: false,\n      },\n      axisLine: { show: false },\n      splitLine: {\n        show: true,\n      },\n      axisLabel: {\n        padding: [0, 0, 0, 4],\n        align: 'left',\n        margin: 10,\n        rotate: -45,\n        interval: intervalFormatter(seriesData[0].data.length),\n        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      boundaryGap: ['10%', '10%'],\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: seriesData,\n  };\n};\n\nexport { getOption };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["getGridLines","Theme","themeColors","CurrencyPowerBalanceTimeUnit","CHART_HEIGHT","CHART_WIDTH","COLOR_CONFIG","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","TOOLTIP_LINE_COLOR_CONFIG","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","Y_LABEL_SIZE_MOBILE","formatLegendData","intervalFormatter","tooltipFormatter","xAxisLabelFormatter","findLastIndexesBeforeWeekend","getOption","chartData","timeUnit","isDark","isDesktop","isMobile","lang","currentTheme","Dark","Light","dataTimestamps","power","map","x","Date","point","getTime","weekendsIndexes","disableWeekendsIndicator","CurrentDay","PreviousDay","M3","includes","length","weekendsMarks","item","xAxis","label","formatter","seriesData","_ref","index","currency","name","type","symbol","showSymbol","itemStyle","color","data","_ref2","price","markLine","show","position","align","distance","padding","fontSize","shadowBlur","shadowOffsetX","shadowOffsetY","borderWidth","textPrimary","shadowColor","borderRadius","backgroundColor","borderPrimary","bgSecondary","emphasis","lineStyle","width","opacity","undefined","legendData","baseGridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","bottomLeftBox","marginBottom","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","extraCssText","axisTick","axisLine","splitLine","axisLabel","margin","rotate","interval","yAxis","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series","grid","top","left","right","graphic"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { getGridLines, Theme, themeColors } from '@oanda/labs-widget-common';\n\nimport type { CurrencyPowerBalance } from '../../../../gql/types/graphql';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  COLOR_CONFIG,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  TOOLTIP_LINE_COLOR_CONFIG,\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\nimport {\n  formatLegendData,\n  intervalFormatter,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n} from './formatters';\nimport { findLastIndexesBeforeWeekend } from './utils';\n\nconst getOption = (\n  chartData: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n  isDesktop: boolean,\n  isMobile: boolean,\n  lang: (key: string) => string\n) => {\n  const currentTheme = isDark ? Theme.Dark : Theme.Light;\n  const dataTimestamps = chartData[0].power.map((x) =>\n    new Date(x.point).getTime()\n  );\n  const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);\n  const disableWeekendsIndicator =\n    [\n      CurrencyPowerBalanceTimeUnit.CurrentDay,\n      CurrencyPowerBalanceTimeUnit.PreviousDay,\n      CurrencyPowerBalanceTimeUnit.M3,\n    ].includes(timeUnit) || weekendsIndexes.length === 0;\n\n  const weekendsMarks = weekendsIndexes.map((item) => ({\n    xAxis: item,\n    label: {\n      formatter: () => lang('market_closed'),\n    },\n  }));\n\n  const seriesData = chartData.map(({ currency, power }, index) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\n    markLine:\n      index === chartData.length - 1 && !disableWeekendsIndicator\n        ? {\n            label: {\n              show: false,\n              position: 'end',\n              align: 'center',\n              distance: -32,\n              padding: [8, 8],\n              fontSize: 12,\n              shadowBlur: 24,\n              shadowOffsetX: 0,\n              shadowOffsetY: 6,\n              borderWidth: 0,\n              color: themeColors.textPrimary,\n              shadowColor: 'rgba(0,0,0,0.1)',\n              borderRadius: 4,\n              backgroundColor: isDark\n                ? themeColors.borderPrimary[currentTheme]\n                : themeColors.bgSecondary[currentTheme],\n            },\n            show: false,\n            emphasis: {\n              label: {\n                show: true,\n              },\n              lineStyle: {\n                width: 1,\n                opacity: 0,\n                color: themeColors.borderPrimary[currentTheme],\n              },\n            },\n            symbol: ['none', 'none'],\n            itemStyle: {\n              color: themeColors.borderPrimary[currentTheme],\n            },\n            data: weekendsMarks,\n          }\n        : undefined,\n  }));\n\n  const legendData = formatLegendData(chartData);\n\n  const baseGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,\n    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,\n    bottomLeftBox: false,\n    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,\n  });\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark\n            ? TOOLTIP_LINE_COLOR_CONFIG.DARK\n            : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      axisTick: {\n        show: false,\n      },\n      axisLine: { show: false },\n      splitLine: {\n        show: true,\n      },\n      axisLabel: {\n        padding: [0, 0, 0, 4],\n        align: 'left',\n        margin: 10,\n        rotate: -45,\n        interval: intervalFormatter(seriesData[0].data.length),\n        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      boundaryGap: ['10%', '10%'],\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n        margin: isDesktop ? 8 : 6,\n      },\n    },\n    series: seriesData,\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,\n        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [...baseGridLines],\n  };\n};\n\nexport { getOption };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/index.js

@@ -1,3 +1,2 @@
 export * from './getOption';
-export * from './getResponsiveOption';
 //# sourceMappingURL=index.js.map

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/index.ts"],"sourcesContent":["export * from './getOption';\nexport * from './getResponsiveOption';\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,uBAAuB","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/index.ts"],"sourcesContent":["export * from './getOption';\n"],"mappings":"AAAA,cAAc,aAAa","ignoreList":[]}

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/getOption.d.ts

@@ -1,6 +1,6 @@
 import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';
 import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean, lang: (key: string) => string) => {
+declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean, isDesktop: boolean, isMobile: boolean, lang: (key: string) => string) => {
     animation: boolean;
     legend: {
         data: {
@@ -58,6 +58,7 @@ declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyP
         axisLabel: {
             showMaxLabel: boolean;
             showMinLabel: boolean;
+            margin: number;
         };
     };
     series: {
@@ -109,5 +110,107 @@ declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyP
             }[];
         } | undefined;
     }[];
+    grid: {
+        name: string;
+        top: string;
+        left: string;
+        right: string;
+        bottom: string;
+    }[];
+    graphic: ({
+        top: number | undefined;
+        bottom: number | undefined;
+        left: number | undefined;
+        right: number | undefined;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        top: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        right: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        bottom: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        left: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        right: number;
+        bottom: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    })[];
 };
 export { getOption };

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/index.d.ts

@@ -1,2 +1 @@
 export * from './getOption';
-export * from './getResponsiveOption';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-power-balance-widget",
-  "version": "1.0.157",
+  "version": "1.0.158",
   "description": "Labs Currency Power Balance 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.219",
     "@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": "39a4ba7320ad2596a931ebc3b19cda09da14f9de"
 }

package/src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx

@@ -1,4 +1,3 @@
-import type { BaseChartRef } from '@oanda/labs-widget-common';
 import {
   BaseChart,
   getChartTheme,
@@ -17,9 +16,9 @@ import {
 } 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 { getOption, getResponsiveOption } from './options';
+import { getOption } from './options';
 import { CHART_HEIGHT } from './options/constants';
 import type { ChartProps } from './types';
 
@@ -42,29 +41,16 @@ const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
   const isDesktop = size === Size.DESKTOP;
   const isMobile = size === Size.MOBILE;
 
-  const echartRef = useRef<BaseChartRef | null>(null);
-
   const chartData = currencies
     ? values.filter(({ currency }) => currencies.includes(currency))
     : values;
 
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-
-      echartInstance.setOption(
-        getResponsiveOption(isDesktop, isMobile, isDark)
-      );
-    }
-  }, [echartRef, isDesktop, isMobile, isDark]);
-
   return (
     <BaseChart
-      ref={echartRef}
       chartHeight={CHART_HEIGHT}
       echarts={echarts}
       isDark={isDark}
-      option={getOption(chartData, timeUnit, isDark, lang)}
+      option={getOption(chartData, timeUnit, isDark, isDesktop, isMobile, lang)}
     />
   );
 };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts

@@ -1,8 +1,19 @@
-import { Theme, themeColors } from '@oanda/labs-widget-common';
+import { getGridLines, Theme, themeColors } from '@oanda/labs-widget-common';
 
 import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';
 import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
+import {
+  CHART_HEIGHT,
+  CHART_WIDTH,
+  COLOR_CONFIG,
+  LEGEND_HEIGHT,
+  LEGEND_HEIGHT_MOBILE,
+  TOOLTIP_LINE_COLOR_CONFIG,
+  X_LABEL_SIZE,
+  X_LABEL_SIZE_MOBILE,
+  Y_LABEL_SIZE,
+  Y_LABEL_SIZE_MOBILE,
+} from './constants';
 import {
   formatLegendData,
   intervalFormatter,
@@ -15,6 +26,8 @@ const getOption = (
   chartData: CurrencyPowerBalance[],
   timeUnit: CurrencyPowerBalanceTimeUnit,
   isDark: boolean,
+  isDesktop: boolean,
+  isMobile: boolean,
   lang: (key: string) => string
 ) => {
   const currentTheme = isDark ? Theme.Dark : Theme.Light;
@@ -88,6 +101,16 @@ const getOption = (
 
   const legendData = formatLegendData(chartData);
 
+  const baseGridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: CHART_HEIGHT,
+    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,
+    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,
+    bottomLeftBox: false,
+    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,
+  });
+
   return {
     animation: false,
     legend: {
@@ -137,9 +160,20 @@ const getOption = (
       axisLabel: {
         showMaxLabel: false,
         showMinLabel: false,
+        margin: isDesktop ? 8 : 6,
       },
     },
     series: seriesData,
+    grid: [
+      {
+        name: 'main-grid',
+        top: '0px',
+        left: '0px',
+        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,
+        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,
+      },
+    ],
+    graphic: [...baseGridLines],
   };
 };
 

package/src/CurrencyPowerBalanceWidget/components/Chart/options/index.ts

@@ -1,2 +1 @@
 export * from './getOption';
-export * from './getResponsiveOption';

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getResponsiveOption = void 0;
-var _labsWidgetCommon = require("@oanda/labs-widget-common");
-var _constants = require("./constants");
-const getResponsiveOption = (isDesktop, isMobile, isDark) => {
-  const baseGridLines = (0, _labsWidgetCommon.getGridLines)({
-    isDark,
-    chartWidth: _constants.CHART_WIDTH,
-    chartHeight: _constants.CHART_HEIGHT,
-    xLabelsSize: isMobile ? _constants.X_LABEL_SIZE_MOBILE : _constants.X_LABEL_SIZE,
-    yLabelSize: isMobile ? _constants.Y_LABEL_SIZE_MOBILE : _constants.Y_LABEL_SIZE,
-    bottomLeftBox: false,
-    marginBottom: isMobile ? _constants.LEGEND_HEIGHT_MOBILE : _constants.LEGEND_HEIGHT
-  });
-  return {
-    yAxis: {
-      axisLabel: {
-        margin: isDesktop ? 8 : 6
-      }
-    },
-    grid: [{
-      name: 'main-grid',
-      top: '0px',
-      left: '0px',
-      right: `${isMobile ? _constants.Y_LABEL_SIZE_MOBILE : _constants.Y_LABEL_SIZE}px`,
-      bottom: `${isMobile ? _constants.X_LABEL_SIZE_MOBILE : _constants.X_LABEL_SIZE}px`
-    }],
-    graphic: [...baseGridLines]
-  };
-};
-exports.getResponsiveOption = getResponsiveOption;
-//# sourceMappingURL=getResponsiveOption.js.map

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getResponsiveOption.js","names":["_labsWidgetCommon","require","_constants","getResponsiveOption","isDesktop","isMobile","isDark","baseGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE_MOBILE","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","bottomLeftBox","marginBottom","LEGEND_HEIGHT_MOBILE","LEGEND_HEIGHT","yAxis","axisLabel","margin","grid","name","top","left","right","bottom","graphic","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\n\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\n\nconst getResponsiveOption = (\n  isDesktop: boolean,\n  isMobile: boolean,\n  isDark: boolean\n) => {\n  const baseGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,\n    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,\n    bottomLeftBox: false,\n    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,\n  });\n\n  return {\n    yAxis: {\n      axisLabel: {\n        margin: isDesktop ? 8 : 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,\n        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [...baseGridLines],\n  };\n};\n\nexport { getResponsiveOption };\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAWA,MAAME,mBAAmB,GAAGA,CAC1BC,SAAkB,EAClBC,QAAiB,EACjBC,MAAe,KACZ;EACH,MAAMC,aAAa,GAAG,IAAAC,8BAAY,EAAC;IACjCF,MAAM;IACNG,UAAU,EAAEC,sBAAW;IACvBC,WAAW,EAAEC,uBAAY;IACzBC,WAAW,EAAER,QAAQ,GAAGS,8BAAmB,GAAGC,uBAAY;IAC1DC,UAAU,EAAEX,QAAQ,GAAGY,8BAAmB,GAAGC,uBAAY;IACzDC,aAAa,EAAE,KAAK;IACpBC,YAAY,EAAEf,QAAQ,GAAGgB,+BAAoB,GAAGC;EAClD,CAAC,CAAC;EAEF,OAAO;IACLC,KAAK,EAAE;MACLC,SAAS,EAAE;QACTC,MAAM,EAAErB,SAAS,GAAG,CAAC,GAAG;MAC1B;IACF,CAAC;IACDsB,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE,GAAGzB,QAAQ,GAAGY,8BAAmB,GAAGC,uBAAY,IAAI;MAC3Da,MAAM,EAAE,GAAG1B,QAAQ,GAAGS,8BAAmB,GAAGC,uBAAY;IAC1D,CAAC,CACF;IACDiB,OAAO,EAAE,CAAC,GAAGzB,aAAa;EAC5B,CAAC;AACH,CAAC;AAAC0B,OAAA,CAAA9B,mBAAA,GAAAA,mBAAA","ignoreList":[]}