@oanda/labs-currency-power-balance-widget 1.0.105 → 1.0.107

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

@@ -11,12 +11,13 @@ var _charts = require("echarts/charts");
 var _renderers = require("echarts/renderers");
 var _components = require("echarts/components");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
+var _monoI18n = require("@oanda/mono-i18n");
 var _constants = require("./options/constants");
 var _options = require("./options");
 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.LegendPlainComponent, _charts.LineChart, _renderers.CanvasRenderer]);
+echarts.use([_components.GridSimpleComponent, _components.GraphicComponent, _components.TooltipComponent, _components.LegendPlainComponent, _charts.LineChart, _renderers.CanvasRenderer, _components.MarkLineComponent]);
 echarts.registerTheme('dark_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Dark));
 echarts.registerTheme('light_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Light));
 const Chart = _ref => {
@@ -25,6 +26,9 @@ const Chart = _ref => {
     timeUnit,
     currencies
   } = _ref;
+  const {
+    lang
+  } = (0, _monoI18n.useLocale)();
   const {
     isDark,
     size
@@ -52,7 +56,7 @@ const Chart = _ref => {
       height: `${_constants.CHART_HEIGHT}px`,
       width: '100%'
     },
-    option: (0, _options.getOption)(chartData, timeUnit, isDark)
+    option: (0, _options.getOption)(chartData, timeUnit, isDark, lang)
   });
 };
 exports.Chart = Chart;

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["_react","_interopRequireWildcard","require","_core","_interopRequireDefault","echarts","_charts","_renderers","_components","_labsWidgetCommon","_constants","_options","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","TooltipComponent","LegendPlainComponent","LineChart","CanvasRenderer","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","values","timeUnit","currencies","isDark","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","isMobile","MOBILE","echartRef","useRef","chartData","filter","_ref2","currency","includes","useEffect","current","echartInstance","getEchartsInstance","setOption","getResponsiveOption","createElement","ref","theme","style","height","CHART_HEIGHT","width","option","getOption","exports"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { LineChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent,\n} from 'echarts/components';\nimport {\n  Theme, ThemeContext, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n} from './options/constants';\nimport { getResponsiveOption, getOption } from './options';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  LegendPlainComponent,\n  LineChart,\n  CanvasRenderer,\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 { isDark, size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const isMobile = size === Size.MOBILE;\n\n  const echartRef = useRef(null);\n\n  const chartData = currencies\n    ? values.filter(({ currency }) => currencies.includes(currency))\n    : values;\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.setOption(\n        getResponsiveOption(isDesktop, isMobile, isDark),\n      );\n    }\n  }, [echartRef, isDesktop, isMobile, isDark]);\n\n  return (\n    <ReactEChartsCore\n      echarts={echarts}\n      ref={echartRef}\n      theme={isDark ? 'dark_theme' : 'light_theme'}\n      style={{\n        height: `${CHART_HEIGHT}px`,\n        width: '100%',\n      }}\n      option={getOption(chartData, timeUnit, isDark)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["_react","_interopRequireWildcard","require","_core","_interopRequireDefault","echarts","_charts","_renderers","_components","_labsWidgetCommon","_monoI18n","_constants","_options","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","TooltipComponent","LegendPlainComponent","LineChart","CanvasRenderer","MarkLineComponent","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","values","timeUnit","currencies","lang","useLocale","isDark","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","isMobile","MOBILE","echartRef","useRef","chartData","filter","_ref2","currency","includes","useEffect","current","echartInstance","getEchartsInstance","setOption","getResponsiveOption","createElement","ref","theme","style","height","CHART_HEIGHT","width","option","getOption","exports"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { LineChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, MarkLineComponent,\n} from 'echarts/components';\nimport {\n  Theme, ThemeContext, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  CHART_HEIGHT,\n} from './options/constants';\nimport { getResponsiveOption, getOption } from './options';\nimport { 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 } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const isMobile = size === Size.MOBILE;\n\n  const echartRef = useRef(null);\n\n  const chartData = currencies\n    ? values.filter(({ currency }) => currencies.includes(currency))\n    : values;\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.setOption(\n        getResponsiveOption(isDesktop, isMobile, isDark),\n      );\n    }\n  }, [echartRef, isDesktop, isMobile, isDark]);\n\n  return (\n    <ReactEChartsCore\n      echarts={echarts}\n      ref={echartRef}\n      theme={isDark ? 'dark_theme' : 'light_theme'}\n      style={{\n        height: `${CHART_HEIGHT}px`,\n        width: '100%',\n      }}\n      option={getOption(chartData, timeUnit, isDark, lang)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAJ,uBAAA,CAAAC,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AAGA,IAAAO,iBAAA,GAAAP,OAAA;AAGA,IAAAQ,SAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AAGA,IAAAU,QAAA,GAAAV,OAAA;AAA2D,SAAAE,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAG3DjB,OAAO,CAAC4B,GAAG,CAAC,CACVC,+BAAmB,EACnBC,4BAAgB,EAChBC,4BAAgB,EAChBC,gCAAoB,EACpBC,iBAAS,EACTC,yBAAc,EACdC,6BAAiB,CAClB,CAAC;AAEFnC,OAAO,CAACoC,aAAa,CAAC,YAAY,EAAE,IAAAC,+BAAa,EAACC,uBAAK,CAACC,IAAI,CAAC,CAAC;AAC9DvC,OAAO,CAACoC,aAAa,CAAC,aAAa,EAAE,IAAAC,+BAAa,EAACC,uBAAK,CAACE,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,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAC5B,MAAM;IAAEC,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAC;EACjD,MAAMC,SAAS,GAAGH,IAAI,KAAKI,sBAAI,CAACC,OAAO;EACvC,MAAMC,QAAQ,GAAGN,IAAI,KAAKI,sBAAI,CAACG,MAAM;EAErC,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAE9B,MAAMC,SAAS,GAAGd,UAAU,GACxBF,MAAM,CAACiB,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEC;IAAS,CAAC,GAAAD,KAAA;IAAA,OAAKhB,UAAU,CAACkB,QAAQ,CAACD,QAAQ,CAAC;EAAA,EAAC,GAC9DnB,MAAM;EAEV,IAAAqB,gBAAS,EAAC,MAAM;IACd,IAAIP,SAAS,CAACQ,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGT,SAAS,CAACQ,OAAO,CAACE,kBAAkB,CAAC,CAAwB;MAEpFD,cAAc,CAACE,SAAS,CACtB,IAAAC,4BAAmB,EAACjB,SAAS,EAAEG,QAAQ,EAAEP,MAAM,CACjD,CAAC;IACH;EACF,CAAC,EAAE,CAACS,SAAS,EAAEL,SAAS,EAAEG,QAAQ,EAAEP,MAAM,CAAC,CAAC;EAE5C,OACErD,MAAA,CAAAe,OAAA,CAAA4D,aAAA,CAACxE,KAAA,CAAAY,OAAgB;IACfV,OAAO,EAAEA,OAAQ;IACjBuE,GAAG,EAAEd,SAAU;IACfe,KAAK,EAAExB,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7CyB,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGC,uBAAY,IAAI;MAC3BC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAE,IAAAC,kBAAS,EAACnB,SAAS,EAAEf,QAAQ,EAAEI,MAAM,EAAEF,IAAI;EAAE,CACtD,CAAC;AAEN,CAAC;AAACiC,OAAA,CAAAtC,KAAA,GAAAA,KAAA","ignoreList":[]}

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Y_LABEL_SIZE_MOBILE = exports.Y_LABEL_SIZE = exports.X_LABEL_SIZE_MOBILE = exports.X_LABEL_SIZE = exports.VERTICAL_LINE_COUNT = exports.TOOLTIP_LINE_COLOR_CONFIG = exports.LEGEND_HEIGHT_MOBILE = exports.LEGEND_HEIGHT = exports.CURENCIES_ORDER = exports.COLOR_CONFIG = exports.CHART_WIDTH = exports.CHART_HEIGHT = exports.CANDLE_NUMBER_HOUR = exports.CANDLE_MINUTE = void 0;
+exports.Y_LABEL_SIZE_MOBILE = exports.Y_LABEL_SIZE = exports.X_LABEL_SIZE_MOBILE = exports.X_LABEL_SIZE = exports.WEEKEND_DURATION = exports.VERTICAL_LINE_COUNT = exports.TOOLTIP_LINE_COLOR_CONFIG = exports.LEGEND_HEIGHT_MOBILE = exports.LEGEND_HEIGHT = exports.CURRENCIES_ORDER = exports.COLOR_CONFIG = exports.CHART_WIDTH = exports.CHART_HEIGHT = exports.CANDLE_NUMBER_HOUR = exports.CANDLE_MINUTE = void 0;
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _graphql = require("../../../../gql/types/graphql");
+const WEEKEND_DURATION = exports.WEEKEND_DURATION = 172800000;
 const X_LABEL_SIZE = exports.X_LABEL_SIZE = 90;
 const X_LABEL_SIZE_MOBILE = exports.X_LABEL_SIZE_MOBILE = 110;
 const Y_LABEL_SIZE_MOBILE = exports.Y_LABEL_SIZE_MOBILE = 35;
@@ -17,7 +18,7 @@ const LEGEND_HEIGHT_MOBILE = exports.LEGEND_HEIGHT_MOBILE = 70;
 const VERTICAL_LINE_COUNT = exports.VERTICAL_LINE_COUNT = 10;
 const CANDLE_NUMBER_HOUR = exports.CANDLE_NUMBER_HOUR = 12;
 const CANDLE_MINUTE = exports.CANDLE_MINUTE = 5;
-const CURENCIES_ORDER = exports.CURENCIES_ORDER = [_graphql.CurrencyName.Usd, _graphql.CurrencyName.Eur, _graphql.CurrencyName.Gbp, _graphql.CurrencyName.Cad, _graphql.CurrencyName.Aud, _graphql.CurrencyName.Chf, _graphql.CurrencyName.Jpy, _graphql.CurrencyName.Nzd];
+const CURRENCIES_ORDER = exports.CURRENCIES_ORDER = [_graphql.CurrencyName.Usd, _graphql.CurrencyName.Eur, _graphql.CurrencyName.Gbp, _graphql.CurrencyName.Cad, _graphql.CurrencyName.Aud, _graphql.CurrencyName.Chf, _graphql.CurrencyName.Jpy, _graphql.CurrencyName.Nzd];
 const COLOR_CONFIG = exports.COLOR_CONFIG = {
   USD: _labsWidgetCommon.colorPalette.greenLight,
   EUR: _labsWidgetCommon.colorPalette.turquoiseLight,

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["_labsWidgetCommon","require","_graphql","X_LABEL_SIZE","exports","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","CANDLE_NUMBER_HOUR","CANDLE_MINUTE","CURENCIES_ORDER","CurrencyName","Usd","Eur","Gbp","Cad","Aud","Chf","Jpy","Nzd","COLOR_CONFIG","USD","colorPalette","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreenLight75","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport { CurrencyName } from '../../../../gql/types/graphql';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\nconst CANDLE_NUMBER_HOUR = 12;\nconst CANDLE_MINUTE = 5;\n\nconst CURENCIES_ORDER: CurrencyName[] = [\n  CurrencyName.Usd,\n  CurrencyName.Eur,\n  CurrencyName.Gbp,\n  CurrencyName.Cad,\n  CurrencyName.Aud,\n  CurrencyName.Chf,\n  CurrencyName.Jpy,\n  CurrencyName.Nzd,\n];\n\nconst COLOR_CONFIG = {\n  USD: colorPalette.greenLight,\n  EUR: colorPalette.turquoiseLight,\n  GBP: colorPalette.violetLight,\n  JPY: colorPalette.raspberryLight,\n  CHF: colorPalette.bottleGreenLight75,\n  AUD: colorPalette.orange,\n  CAD: colorPalette.midnight75Lighter,\n  NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n  DARK: colorPalette.orange,\n  LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  CHART_WIDTH,\n  CHART_HEIGHT,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  VERTICAL_LINE_COUNT,\n  COLOR_CONFIG,\n  TOOLTIP_LINE_COLOR_CONFIG,\n  CANDLE_NUMBER_HOUR,\n  CANDLE_MINUTE,\n  CURENCIES_ORDER,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,MAAME,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,mBAAmB,GAAAD,OAAA,CAAAC,mBAAA,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAAF,OAAA,CAAAE,mBAAA,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAAJ,OAAA,CAAAI,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAL,OAAA,CAAAK,YAAA,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAAN,OAAA,CAAAM,aAAA,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAG,EAAE;AAC9B,MAAMC,kBAAkB,GAAAT,OAAA,CAAAS,kBAAA,GAAG,EAAE;AAC7B,MAAMC,aAAa,GAAAV,OAAA,CAAAU,aAAA,GAAG,CAAC;AAEvB,MAAMC,eAA+B,GAAAX,OAAA,CAAAW,eAAA,GAAG,CACtCC,qBAAY,CAACC,GAAG,EAChBD,qBAAY,CAACE,GAAG,EAChBF,qBAAY,CAACG,GAAG,EAChBH,qBAAY,CAACI,GAAG,EAChBJ,qBAAY,CAACK,GAAG,EAChBL,qBAAY,CAACM,GAAG,EAChBN,qBAAY,CAACO,GAAG,EAChBP,qBAAY,CAACQ,GAAG,CACjB;AAED,MAAMC,YAAY,GAAArB,OAAA,CAAAqB,YAAA,GAAG;EACnBC,GAAG,EAAEC,8BAAY,CAACC,UAAU;EAC5BC,GAAG,EAAEF,8BAAY,CAACG,cAAc;EAChCC,GAAG,EAAEJ,8BAAY,CAACK,WAAW;EAC7BC,GAAG,EAAEN,8BAAY,CAACO,cAAc;EAChCC,GAAG,EAAER,8BAAY,CAACS,kBAAkB;EACpCC,GAAG,EAAEV,8BAAY,CAACW,MAAM;EACxBC,GAAG,EAAEZ,8BAAY,CAACa,iBAAiB;EACnCC,GAAG,EAAEd,8BAAY,CAACe;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAAvC,OAAA,CAAAuC,yBAAA,GAAG;EAChCC,IAAI,EAAEjB,8BAAY,CAACW,MAAM;EACzBO,KAAK,EAAElB,8BAAY,CAACmB;AACtB,CAAC","ignoreList":[]}
+{"version":3,"file":"constants.js","names":["_labsWidgetCommon","require","_graphql","WEEKEND_DURATION","exports","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","CANDLE_NUMBER_HOUR","CANDLE_MINUTE","CURRENCIES_ORDER","CurrencyName","Usd","Eur","Gbp","Cad","Aud","Chf","Jpy","Nzd","COLOR_CONFIG","USD","colorPalette","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreenLight75","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport { CurrencyName } from '../../../../gql/types/graphql';\n\nconst WEEKEND_DURATION = 172800000;\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\nconst CANDLE_NUMBER_HOUR = 12;\nconst CANDLE_MINUTE = 5;\n\nconst CURRENCIES_ORDER: CurrencyName[] = [\n  CurrencyName.Usd,\n  CurrencyName.Eur,\n  CurrencyName.Gbp,\n  CurrencyName.Cad,\n  CurrencyName.Aud,\n  CurrencyName.Chf,\n  CurrencyName.Jpy,\n  CurrencyName.Nzd,\n];\n\nconst COLOR_CONFIG = {\n  USD: colorPalette.greenLight,\n  EUR: colorPalette.turquoiseLight,\n  GBP: colorPalette.violetLight,\n  JPY: colorPalette.raspberryLight,\n  CHF: colorPalette.bottleGreenLight75,\n  AUD: colorPalette.orange,\n  CAD: colorPalette.midnight75Lighter,\n  NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n  DARK: colorPalette.orange,\n  LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  CHART_WIDTH,\n  CHART_HEIGHT,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  VERTICAL_LINE_COUNT,\n  COLOR_CONFIG,\n  TOOLTIP_LINE_COLOR_CONFIG,\n  CANDLE_NUMBER_HOUR,\n  CANDLE_MINUTE,\n  CURRENCIES_ORDER,\n  WEEKEND_DURATION,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,MAAME,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAS;AAElC,MAAME,YAAY,GAAAD,OAAA,CAAAC,YAAA,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAAF,OAAA,CAAAE,mBAAA,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAAH,OAAA,CAAAG,mBAAA,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAAJ,OAAA,CAAAI,YAAA,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAAL,OAAA,CAAAK,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAN,OAAA,CAAAM,YAAA,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAAP,OAAA,CAAAO,aAAA,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAAR,OAAA,CAAAQ,oBAAA,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAAT,OAAA,CAAAS,mBAAA,GAAG,EAAE;AAC9B,MAAMC,kBAAkB,GAAAV,OAAA,CAAAU,kBAAA,GAAG,EAAE;AAC7B,MAAMC,aAAa,GAAAX,OAAA,CAAAW,aAAA,GAAG,CAAC;AAEvB,MAAMC,gBAAgC,GAAAZ,OAAA,CAAAY,gBAAA,GAAG,CACvCC,qBAAY,CAACC,GAAG,EAChBD,qBAAY,CAACE,GAAG,EAChBF,qBAAY,CAACG,GAAG,EAChBH,qBAAY,CAACI,GAAG,EAChBJ,qBAAY,CAACK,GAAG,EAChBL,qBAAY,CAACM,GAAG,EAChBN,qBAAY,CAACO,GAAG,EAChBP,qBAAY,CAACQ,GAAG,CACjB;AAED,MAAMC,YAAY,GAAAtB,OAAA,CAAAsB,YAAA,GAAG;EACnBC,GAAG,EAAEC,8BAAY,CAACC,UAAU;EAC5BC,GAAG,EAAEF,8BAAY,CAACG,cAAc;EAChCC,GAAG,EAAEJ,8BAAY,CAACK,WAAW;EAC7BC,GAAG,EAAEN,8BAAY,CAACO,cAAc;EAChCC,GAAG,EAAER,8BAAY,CAACS,kBAAkB;EACpCC,GAAG,EAAEV,8BAAY,CAACW,MAAM;EACxBC,GAAG,EAAEZ,8BAAY,CAACa,iBAAiB;EACnCC,GAAG,EAAEd,8BAAY,CAACe;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAAxC,OAAA,CAAAwC,yBAAA,GAAG;EAChCC,IAAI,EAAEjB,8BAAY,CAACW,MAAM;EACzBO,KAAK,EAAElB,8BAAY,CAACmB;AACtB,CAAC","ignoreList":[]}

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

@@ -78,7 +78,7 @@ const formatLegendData = values => {
     } = _ref5;
     return currency;
   });
-  const list = dataCurrencies.length === _constants.CURENCIES_ORDER.length ? _constants.CURENCIES_ORDER : _constants.CURENCIES_ORDER.filter(currency => dataCurrencies.includes(currency));
+  const list = dataCurrencies.length === _constants.CURRENCIES_ORDER.length ? _constants.CURRENCIES_ORDER : _constants.CURRENCIES_ORDER.filter(currency => dataCurrencies.includes(currency));
   return list.map(currency => ({
     name: currency,
     itemStyle: {

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

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","names":["_graphql","require","_constants","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","CurrencyPowerBalanceTimeUnit","M3","M1","W1","exports","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","VERTICAL_LINE_COUNT","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join","formatLegendData","dataCurrencies","_ref5","currency","list","length","CURENCIES_ORDER","filter","includes","name","itemStyle","color","COLOR_CONFIG"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n  const dateAndTime = param.split('T');\n\n  return {\n    date: dateAndTime[0],\n    time: dateAndTime[1].substring(0, 5),\n  };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n  || timeUnit === CurrencyPowerBalanceTimeUnit.M1\n  || timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n  dataLength: number,\n) => Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n  const row = values\n    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n    .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ${marker}\n        <span>${seriesName}</span>\n      </div>\n      <span>${value[1]}</span>\n    </div>`);\n\n  return `<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">${date}</span>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nconst formatLegendData = (values: CurrencyPowerBalance[]) => {\n  const dataCurrencies = values.map(({ currency }) => currency);\n\n  const list = dataCurrencies.length === CURENCIES_ORDER.length\n    ? CURENCIES_ORDER\n    : CURENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));\n\n  return list.map((currency) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n};\n\nexport {\n  isMonthWeek,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n  intervalFormatter,\n  formatLegendData,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"formatters.js","names":["_graphql","require","_constants","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","CurrencyPowerBalanceTimeUnit","M3","M1","W1","exports","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","VERTICAL_LINE_COUNT","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join","formatLegendData","dataCurrencies","_ref5","currency","list","length","CURRENCIES_ORDER","filter","includes","name","itemStyle","color","COLOR_CONFIG"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT, CURRENCIES_ORDER, COLOR_CONFIG } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n  const dateAndTime = param.split('T');\n\n  return {\n    date: dateAndTime[0],\n    time: dateAndTime[1].substring(0, 5),\n  };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n  || timeUnit === CurrencyPowerBalanceTimeUnit.M1\n  || timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n  dataLength: number,\n) => Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n  const row = values\n    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n    .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ${marker}\n        <span>${seriesName}</span>\n      </div>\n      <span>${value[1]}</span>\n    </div>`);\n\n  return `<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">${date}</span>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nconst formatLegendData = (values: CurrencyPowerBalance[]) => {\n  const dataCurrencies = values.map(({ currency }) => currency);\n\n  const list = dataCurrencies.length === CURRENCIES_ORDER.length\n    ? CURRENCIES_ORDER\n    : CURRENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));\n\n  return list.map((currency) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n};\n\nexport {\n  isMonthWeek,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n  intervalFormatter,\n  formatLegendData,\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,10 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getOption = void 0;
+var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _constants = require("./constants");
 var _formatters = require("./formatters");
-const getOption = (chartData, timeUnit, isDark) => {
-  const seriesData = chartData.map(_ref => {
+var _graphql = require("../../../../gql/types/graphql");
+var _utils = require("./utils");
+const getOption = (chartData, timeUnit, isDark, lang) => {
+  const currentTheme = isDark ? _labsWidgetCommon.darkTheme : _labsWidgetCommon.lightTheme;
+  const dataTimestamps = chartData[0].power.map(x => new Date(x.point).getTime());
+  const weekendsIndexes = (0, _utils.findLastIndexesBeforeWeekend)(dataTimestamps);
+  const disableWeekendsIndicator = [_graphql.CurrencyPowerBalanceTimeUnit.CurrentDay, _graphql.CurrencyPowerBalanceTimeUnit.PreviousDay, _graphql.CurrencyPowerBalanceTimeUnit.M3].includes(timeUnit) || weekendsIndexes.length === 0;
+  const weekendsMarks = weekendsIndexes.map(item => ({
+    xAxis: item,
+    label: {
+      formatter: () => lang('market_closed')
+    }
+  }));
+  const seriesData = chartData.map((_ref, index) => {
     let {
       currency,
       power
@@ -20,16 +33,47 @@ const getOption = (chartData, timeUnit, isDark) => {
       itemStyle: {
         color: _constants.COLOR_CONFIG[currency]
       },
-      lineStyle: {
-        color: _constants.COLOR_CONFIG[currency]
-      },
       data: power.map(_ref2 => {
         let {
           point,
           price
         } = _ref2;
         return [point, price];
-      })
+      }),
+      markLine: index === chartData.length - 1 && !disableWeekendsIndicator ? {
+        label: {
+          show: false,
+          position: 'end',
+          align: 'center',
+          distance: -32,
+          padding: [8, 8],
+          fontSize: 12,
+          shadowBlur: 24,
+          shadowOffsetX: 0,
+          shadowOffsetY: 6,
+          borderWidth: 0,
+          color: currentTheme.textPrimary,
+          shadowColor: 'rgba(0,0,0,0.1)',
+          borderRadius: 4,
+          backgroundColor: isDark ? currentTheme.borderPrimary : currentTheme.backgroundSecondary
+        },
+        show: false,
+        emphasis: {
+          label: {
+            show: true
+          },
+          lineStyle: {
+            width: 1,
+            opacity: 0,
+            color: currentTheme.borderPrimary
+          }
+        },
+        symbol: ['none', 'none'],
+        itemStyle: {
+          color: currentTheme.borderPrimary
+        },
+        data: weekendsMarks
+      } : undefined
     };
   });
   const legendData = (0, _formatters.formatLegendData)(chartData);

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

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["_constants","require","_formatters","getOption","chartData","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","lineStyle","data","_ref2","point","price","legendData","formatLegendData","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","formatter","tooltipFormatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","padding","align","margin","rotate","interval","intervalFormatter","length","label","xAxisLabelFormatter","yAxis","position","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport {\n  intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,\n} from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n  chartData: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n) => {\n  const seriesData = chartData.map(({ currency, power }) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    lineStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\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 ? TOOLTIP_LINE_COLOR_CONFIG.DARK : 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":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAKA,MAAME,SAAS,GAAGA,CAChBC,SAAiC,EACjCC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,SAAS,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACzDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDS,SAAS,EAAE;QACTF,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDU,IAAI,EAAET,KAAK,CAACH,GAAG,CAACa,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,GAAG,IAAAC,4BAAgB,EAACrB,SAAS,CAAC;EAE9C,OAAO;IACLsB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNP,IAAI,EAAEI,UAAU;MAChBI,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE,GAAG;QACTC,CAAC,EAAE,CAAC;QACJf,SAAS,EAAE;UACTF,KAAK,EAAEX,MAAM,GAAG6B,oCAAyB,CAACC,IAAI,GAAGD,oCAAyB,CAACE;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEC,4BAAgB;MAC3BC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACL5B,IAAI,EAAE,UAAU;MAChB6B,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACrBC,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,EAAE;QACVC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAE,IAAAC,6BAAiB,EAAC7C,UAAU,CAAC,CAAC,CAAC,CAACa,IAAI,CAACiC,MAAM,CAAC;QACtDf,SAAS,EAAGgB,KAAa,IAAK,IAAAC,+BAAmB,EAACD,KAAK,EAAEjD,QAAQ;MACnE;IACF,CAAC;IACDmD,KAAK,EAAE;MACL3C,IAAI,EAAE,OAAO;MACb4C,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdd,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBgB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3Bb,SAAS,EAAE;QACTc,YAAY,EAAE,KAAK;QACnBC,YAAY,EAAE;MAChB;IACF,CAAC;IACDC,MAAM,EAAEvD;EACV,CAAC;AACH,CAAC;AAACwD,OAAA,CAAA5D,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_constants","_formatters","_graphql","_utils","getOption","chartData","timeUnit","isDark","lang","currentTheme","darkTheme","lightTheme","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","textPrimary","shadowColor","borderRadius","backgroundColor","borderPrimary","backgroundSecondary","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 { darkTheme, lightTheme } from '@oanda/labs-widget-common';\nimport { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport {\n  intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,\n} from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\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 ? darkTheme : lightTheme;\n  const dataTimestamps = chartData[0].power.map((x) => new Date(x.point).getTime());\n  const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);\n  const disableWeekendsIndicator = [\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: index === chartData.length - 1 && !disableWeekendsIndicator ? {\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: currentTheme.textPrimary,\n        shadowColor: 'rgba(0,0,0,0.1)',\n        borderRadius: 4,\n        backgroundColor: isDark ? currentTheme.borderPrimary : currentTheme.backgroundSecondary,\n      },\n      show: false,\n      emphasis: {\n        label: {\n          show: true,\n        },\n        lineStyle: {\n          width: 1,\n          opacity: 0,\n          color: currentTheme.borderPrimary,\n        },\n      },\n      symbol: ['none', 'none'],\n      itemStyle: {\n        color: currentTheme.borderPrimary,\n      },\n      data: weekendsMarks,\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 ? TOOLTIP_LINE_COLOR_CONFIG.DARK : 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":[]}

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findLastIndexesBeforeWeekend = void 0;
+var _constants = require("./constants");
+const findLastIndexesBeforeWeekend = timestamps => timestamps.reduce((acc, timestamp, index) => timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= _constants.WEEKEND_DURATION ? [...acc, index] : acc, []);
+exports.findLastIndexesBeforeWeekend = findLastIndexesBeforeWeekend;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["_constants","require","findLastIndexesBeforeWeekend","timestamps","reduce","acc","timestamp","index","length","WEEKEND_DURATION","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/utils.ts"],"sourcesContent":["import { WEEKEND_DURATION } from './constants';\n\nconst findLastIndexesBeforeWeekend = (timestamps: number[]) => timestamps\n  .reduce((acc, timestamp, index) => (\n    timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= WEEKEND_DURATION\n      ? [...acc, index]\n      : acc\n  ), [] as number[]);\n\nexport {\n  findLastIndexesBeforeWeekend,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEA,MAAMC,4BAA4B,GAAIC,UAAoB,IAAKA,UAAU,CACtEC,MAAM,CAAC,CAACC,GAAG,EAAEC,SAAS,EAAEC,KAAK,KAC5BJ,UAAU,CAACK,MAAM,GAAG,CAAC,KAAKD,KAAK,IAAIJ,UAAU,CAACI,KAAK,GAAG,CAAC,CAAC,GAAGD,SAAS,IAAIG,2BAAgB,GACpF,CAAC,GAAGJ,GAAG,EAAEE,KAAK,CAAC,GACfF,GACL,EAAE,EAAc,CAAC;AAACK,OAAA,CAAAR,4BAAA,GAAAA,4BAAA","ignoreList":[]}

package/dist/main/translations/sources/en.json

@@ -10,6 +10,7 @@
   "hour": "{{count}} Hour",
   "hour_plural": "{{count}} Hours",
   "last_updated": "Last updated",
+  "market_closed": "market closed",
   "month": "{{count}} Month",
   "month_plural": "{{count}} Months",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",

package/dist/main/translations/sources/es.json

@@ -10,6 +10,7 @@
   "hour": "{{count}} Hora",
   "hour_plural": "{{count}} Horas",
   "last_updated": "Última actualización",
+  "market_closed": "mercado cerrado",
   "month": "{{count}} Mes",
   "month_plural": "{{count}} Meses",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} de {{itemCount}} entradas",

package/dist/main/translations/sources/th.json

@@ -9,6 +9,7 @@
   "data_unavailable": "ข้อมูลไม่พร้อมใช้งาน",
   "hour_0": "{{count}} ชั่วโมง",
   "last_updated": "ปรับปรุงล่าสุด",
+  "market_closed": "ตลาดปิดทำการ",
   "month_0": "{{count}} เดือน",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} จาก {{itemCount}} รายการ",
   "previous_business_day": "วันทำการก่อนหน้า",

package/dist/main/translations/sources/zh_TW.json

@@ -9,6 +9,7 @@
   "data_unavailable": "沒有數據",
   "hour_0": "{{count}} 時",
   "last_updated": "最後更新",
+  "market_closed": "市場已收盤",
   "month_0": "{{count}} 月",
   "pagination_entries_range": "{{itemCount}}个挂单中的{{firstItemOnPage}}-{{lastItemOnPage}}",
   "previous_business_day": "前一營業日",

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

@@ -3,11 +3,12 @@ import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
-import { GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent } from 'echarts/components';
+import { GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, MarkLineComponent } from 'echarts/components';
 import { Theme, ThemeContext, getChartTheme, Size } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
 import { CHART_HEIGHT } from './options/constants';
 import { getResponsiveOption, getOption } from './options';
-echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, LineChart, CanvasRenderer]);
+echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, LineChart, CanvasRenderer, MarkLineComponent]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 const Chart = _ref => {
@@ -16,6 +17,9 @@ const Chart = _ref => {
     timeUnit,
     currencies
   } = _ref;
+  const {
+    lang
+  } = useLocale();
   const {
     isDark,
     size
@@ -43,7 +47,7 @@ const Chart = _ref => {
       height: `${CHART_HEIGHT}px`,
       width: '100%'
     },
-    option: getOption(chartData, timeUnit, isDark)
+    option: getOption(chartData, timeUnit, isDark, lang)
   });
 };
 export { Chart };

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["React","useRef","useEffect","useContext","ReactEChartsCore","echarts","LineChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","LegendPlainComponent","Theme","ThemeContext","getChartTheme","Size","CHART_HEIGHT","getResponsiveOption","getOption","use","registerTheme","Dark","Light","Chart","_ref","values","timeUnit","currencies","isDark","size","isDesktop","DESKTOP","isMobile","MOBILE","echartRef","chartData","filter","_ref2","currency","includes","current","echartInstance","getEchartsInstance","setOption","createElement","ref","theme","style","height","width","option"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { LineChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent,\n} from 'echarts/components';\nimport {\n  Theme, ThemeContext, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n} from './options/constants';\nimport { getResponsiveOption, getOption } from './options';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  LegendPlainComponent,\n  LineChart,\n  CanvasRenderer,\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 { isDark, size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const isMobile = size === Size.MOBILE;\n\n  const echartRef = useRef(null);\n\n  const chartData = currencies\n    ? values.filter(({ currency }) => currencies.includes(currency))\n    : values;\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.setOption(\n        getResponsiveOption(isDesktop, isMobile, isDark),\n      );\n    }\n  }, [echartRef, isDesktop, isMobile, isDark]);\n\n  return (\n    <ReactEChartsCore\n      echarts={echarts}\n      ref={echartRef}\n      theme={isDark ? 'dark_theme' : 'light_theme'}\n      style={{\n        height: `${CHART_HEIGHT}px`,\n        width: '100%',\n      }}\n      option={getOption(chartData, timeUnit, isDark)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,EAAEC,UAAU,QAAQ,OAAO;AAC5D,OAAOC,gBAAgB,MAAM,4BAA4B;AACzD,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SACEC,mBAAmB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,oBAAoB,QACxE,oBAAoB;AAC3B,SACEC,KAAK,EAAEC,YAAY,EAAEC,aAAa,EAAEC,IAAI,QACnC,2BAA2B;AAClC,SACEC,YAAY,QACP,qBAAqB;AAC5B,SAASC,mBAAmB,EAAEC,SAAS,QAAQ,WAAW;AAG1Db,OAAO,CAACc,GAAG,CAAC,CACVX,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,EAChBC,oBAAoB,EACpBL,SAAS,EACTC,cAAc,CACf,CAAC;AAEFF,OAAO,CAACe,aAAa,CAAC,YAAY,EAAEN,aAAa,CAACF,KAAK,CAACS,IAAI,CAAC,CAAC;AAC9DhB,OAAO,CAACe,aAAa,CAAC,aAAa,EAAEN,aAAa,CAACF,KAAK,CAACU,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAkD;EAAA,IAAjD;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAuB,CAAC,GAAAH,IAAA;EACzD,MAAM;IAAEI,MAAM;IAAEC;EAAK,CAAC,GAAG1B,UAAU,CAACU,YAAY,CAAC;EACjD,MAAMiB,SAAS,GAAGD,IAAI,KAAKd,IAAI,CAACgB,OAAO;EACvC,MAAMC,QAAQ,GAAGH,IAAI,KAAKd,IAAI,CAACkB,MAAM;EAErC,MAAMC,SAAS,GAAGjC,MAAM,CAAC,IAAI,CAAC;EAE9B,MAAMkC,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;EAEVvB,SAAS,CAAC,MAAM;IACd,IAAIgC,SAAS,CAACM,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGP,SAAS,CAACM,OAAO,CAACE,kBAAkB,CAAC,CAAwB;MAEpFD,cAAc,CAACE,SAAS,CACtB1B,mBAAmB,CAACa,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CACjD,CAAC;IACH;EACF,CAAC,EAAE,CAACM,SAAS,EAAEJ,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CAAC,CAAC;EAE5C,OACE5B,KAAA,CAAA4C,aAAA,CAACxC,gBAAgB;IACfC,OAAO,EAAEA,OAAQ;IACjBwC,GAAG,EAAEX,SAAU;IACfY,KAAK,EAAElB,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7CmB,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGhC,YAAY,IAAI;MAC3BiC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAEhC,SAAS,CAACiB,SAAS,EAAET,QAAQ,EAAEE,MAAM;EAAE,CAChD,CAAC;AAEN,CAAC;AAED,SAASL,KAAK","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["React","useRef","useEffect","useContext","ReactEChartsCore","echarts","LineChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","LegendPlainComponent","MarkLineComponent","Theme","ThemeContext","getChartTheme","Size","useLocale","CHART_HEIGHT","getResponsiveOption","getOption","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","theme","style","height","width","option"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { LineChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, MarkLineComponent,\n} from 'echarts/components';\nimport {\n  Theme, ThemeContext, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  CHART_HEIGHT,\n} from './options/constants';\nimport { getResponsiveOption, getOption } from './options';\nimport { 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 } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const isMobile = size === Size.MOBILE;\n\n  const echartRef = useRef(null);\n\n  const chartData = currencies\n    ? values.filter(({ currency }) => currencies.includes(currency))\n    : values;\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.setOption(\n        getResponsiveOption(isDesktop, isMobile, isDark),\n      );\n    }\n  }, [echartRef, isDesktop, isMobile, isDark]);\n\n  return (\n    <ReactEChartsCore\n      echarts={echarts}\n      ref={echartRef}\n      theme={isDark ? 'dark_theme' : 'light_theme'}\n      style={{\n        height: `${CHART_HEIGHT}px`,\n        width: '100%',\n      }}\n      option={getOption(chartData, timeUnit, isDark, lang)}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,EAAEC,UAAU,QAAQ,OAAO;AAC5D,OAAOC,gBAAgB,MAAM,4BAA4B;AACzD,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SACEC,mBAAmB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,oBAAoB,EAAEC,iBAAiB,QAC3F,oBAAoB;AAC3B,SACEC,KAAK,EAAEC,YAAY,EAAEC,aAAa,EAAEC,IAAI,QACnC,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SACEC,YAAY,QACP,qBAAqB;AAC5B,SAASC,mBAAmB,EAAEC,SAAS,QAAQ,WAAW;AAG1Df,OAAO,CAACgB,GAAG,CAAC,CACVb,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,EAChBC,oBAAoB,EACpBL,SAAS,EACTC,cAAc,EACdK,iBAAiB,CAClB,CAAC;AAEFP,OAAO,CAACiB,aAAa,CAAC,YAAY,EAAEP,aAAa,CAACF,KAAK,CAACU,IAAI,CAAC,CAAC;AAC9DlB,OAAO,CAACiB,aAAa,CAAC,aAAa,EAAEP,aAAa,CAACF,KAAK,CAACW,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,GAAGb,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEc,MAAM;IAAEC;EAAK,CAAC,GAAG7B,UAAU,CAACW,YAAY,CAAC;EACjD,MAAMmB,SAAS,GAAGD,IAAI,KAAKhB,IAAI,CAACkB,OAAO;EACvC,MAAMC,QAAQ,GAAGH,IAAI,KAAKhB,IAAI,CAACoB,MAAM;EAErC,MAAMC,SAAS,GAAGpC,MAAM,CAAC,IAAI,CAAC;EAE9B,MAAMqC,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;EAEVzB,SAAS,CAAC,MAAM;IACd,IAAImC,SAAS,CAACM,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGP,SAAS,CAACM,OAAO,CAACE,kBAAkB,CAAC,CAAwB;MAEpFD,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,OACE/B,KAAA,CAAA+C,aAAA,CAAC3C,gBAAgB;IACfC,OAAO,EAAEA,OAAQ;IACjB2C,GAAG,EAAEX,SAAU;IACfY,KAAK,EAAElB,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7CmB,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGjC,YAAY,IAAI;MAC3BkC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAEjC,SAAS,CAACkB,SAAS,EAAEV,QAAQ,EAAEG,MAAM,EAAED,IAAI;EAAE,CACtD,CAAC;AAEN,CAAC;AAED,SAASL,KAAK","ignoreList":[]}

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

@@ -1,5 +1,6 @@
 import { colorPalette } from '@oanda/labs-widget-common';
 import { CurrencyName } from '../../../../gql/types/graphql';
+const WEEKEND_DURATION = 172800000;
 const X_LABEL_SIZE = 90;
 const X_LABEL_SIZE_MOBILE = 110;
 const Y_LABEL_SIZE_MOBILE = 35;
@@ -11,7 +12,7 @@ const LEGEND_HEIGHT_MOBILE = 70;
 const VERTICAL_LINE_COUNT = 10;
 const CANDLE_NUMBER_HOUR = 12;
 const CANDLE_MINUTE = 5;
-const CURENCIES_ORDER = [CurrencyName.Usd, CurrencyName.Eur, CurrencyName.Gbp, CurrencyName.Cad, CurrencyName.Aud, CurrencyName.Chf, CurrencyName.Jpy, CurrencyName.Nzd];
+const CURRENCIES_ORDER = [CurrencyName.Usd, CurrencyName.Eur, CurrencyName.Gbp, CurrencyName.Cad, CurrencyName.Aud, CurrencyName.Chf, CurrencyName.Jpy, CurrencyName.Nzd];
 const COLOR_CONFIG = {
   USD: colorPalette.greenLight,
   EUR: colorPalette.turquoiseLight,
@@ -26,5 +27,5 @@ const TOOLTIP_LINE_COLOR_CONFIG = {
   DARK: colorPalette.orange,
   LIGHT: colorPalette.bottleGreenDark
 };
-export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE, CURENCIES_ORDER };
+export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE, CURRENCIES_ORDER, WEEKEND_DURATION };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["colorPalette","CurrencyName","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","CANDLE_NUMBER_HOUR","CANDLE_MINUTE","CURENCIES_ORDER","Usd","Eur","Gbp","Cad","Aud","Chf","Jpy","Nzd","COLOR_CONFIG","USD","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreenLight75","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport { CurrencyName } from '../../../../gql/types/graphql';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\nconst CANDLE_NUMBER_HOUR = 12;\nconst CANDLE_MINUTE = 5;\n\nconst CURENCIES_ORDER: CurrencyName[] = [\n  CurrencyName.Usd,\n  CurrencyName.Eur,\n  CurrencyName.Gbp,\n  CurrencyName.Cad,\n  CurrencyName.Aud,\n  CurrencyName.Chf,\n  CurrencyName.Jpy,\n  CurrencyName.Nzd,\n];\n\nconst COLOR_CONFIG = {\n  USD: colorPalette.greenLight,\n  EUR: colorPalette.turquoiseLight,\n  GBP: colorPalette.violetLight,\n  JPY: colorPalette.raspberryLight,\n  CHF: colorPalette.bottleGreenLight75,\n  AUD: colorPalette.orange,\n  CAD: colorPalette.midnight75Lighter,\n  NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n  DARK: colorPalette.orange,\n  LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  CHART_WIDTH,\n  CHART_HEIGHT,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  VERTICAL_LINE_COUNT,\n  COLOR_CONFIG,\n  TOOLTIP_LINE_COLOR_CONFIG,\n  CANDLE_NUMBER_HOUR,\n  CANDLE_MINUTE,\n  CURENCIES_ORDER,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,aAAa,GAAG,CAAC;AAEvB,MAAMC,eAA+B,GAAG,CACtCZ,YAAY,CAACa,GAAG,EAChBb,YAAY,CAACc,GAAG,EAChBd,YAAY,CAACe,GAAG,EAChBf,YAAY,CAACgB,GAAG,EAChBhB,YAAY,CAACiB,GAAG,EAChBjB,YAAY,CAACkB,GAAG,EAChBlB,YAAY,CAACmB,GAAG,EAChBnB,YAAY,CAACoB,GAAG,CACjB;AAED,MAAMC,YAAY,GAAG;EACnBC,GAAG,EAAEvB,YAAY,CAACwB,UAAU;EAC5BC,GAAG,EAAEzB,YAAY,CAAC0B,cAAc;EAChCC,GAAG,EAAE3B,YAAY,CAAC4B,WAAW;EAC7BC,GAAG,EAAE7B,YAAY,CAAC8B,cAAc;EAChCC,GAAG,EAAE/B,YAAY,CAACgC,kBAAkB;EACpCC,GAAG,EAAEjC,YAAY,CAACkC,MAAM;EACxBC,GAAG,EAAEnC,YAAY,CAACoC,iBAAiB;EACnCC,GAAG,EAAErC,YAAY,CAACsC;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAG;EAChCC,IAAI,EAAExC,YAAY,CAACkC,MAAM;EACzBO,KAAK,EAAEzC,YAAY,CAAC0C;AACtB,CAAC;AAED,SACExC,YAAY,EACZC,mBAAmB,EACnBC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,oBAAoB,EACpBC,mBAAmB,EACnBY,YAAY,EACZiB,yBAAyB,EACzB5B,kBAAkB,EAClBC,aAAa,EACbC,eAAe","ignoreList":[]}
+{"version":3,"file":"constants.js","names":["colorPalette","CurrencyName","WEEKEND_DURATION","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","CANDLE_NUMBER_HOUR","CANDLE_MINUTE","CURRENCIES_ORDER","Usd","Eur","Gbp","Cad","Aud","Chf","Jpy","Nzd","COLOR_CONFIG","USD","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreenLight75","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport { CurrencyName } from '../../../../gql/types/graphql';\n\nconst WEEKEND_DURATION = 172800000;\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\nconst CANDLE_NUMBER_HOUR = 12;\nconst CANDLE_MINUTE = 5;\n\nconst CURRENCIES_ORDER: CurrencyName[] = [\n  CurrencyName.Usd,\n  CurrencyName.Eur,\n  CurrencyName.Gbp,\n  CurrencyName.Cad,\n  CurrencyName.Aud,\n  CurrencyName.Chf,\n  CurrencyName.Jpy,\n  CurrencyName.Nzd,\n];\n\nconst COLOR_CONFIG = {\n  USD: colorPalette.greenLight,\n  EUR: colorPalette.turquoiseLight,\n  GBP: colorPalette.violetLight,\n  JPY: colorPalette.raspberryLight,\n  CHF: colorPalette.bottleGreenLight75,\n  AUD: colorPalette.orange,\n  CAD: colorPalette.midnight75Lighter,\n  NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n  DARK: colorPalette.orange,\n  LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  CHART_WIDTH,\n  CHART_HEIGHT,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  VERTICAL_LINE_COUNT,\n  COLOR_CONFIG,\n  TOOLTIP_LINE_COLOR_CONFIG,\n  CANDLE_NUMBER_HOUR,\n  CANDLE_MINUTE,\n  CURRENCIES_ORDER,\n  WEEKEND_DURATION,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,MAAMC,gBAAgB,GAAG,SAAS;AAElC,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,aAAa,GAAG,CAAC;AAEvB,MAAMC,gBAAgC,GAAG,CACvCb,YAAY,CAACc,GAAG,EAChBd,YAAY,CAACe,GAAG,EAChBf,YAAY,CAACgB,GAAG,EAChBhB,YAAY,CAACiB,GAAG,EAChBjB,YAAY,CAACkB,GAAG,EAChBlB,YAAY,CAACmB,GAAG,EAChBnB,YAAY,CAACoB,GAAG,EAChBpB,YAAY,CAACqB,GAAG,CACjB;AAED,MAAMC,YAAY,GAAG;EACnBC,GAAG,EAAExB,YAAY,CAACyB,UAAU;EAC5BC,GAAG,EAAE1B,YAAY,CAAC2B,cAAc;EAChCC,GAAG,EAAE5B,YAAY,CAAC6B,WAAW;EAC7BC,GAAG,EAAE9B,YAAY,CAAC+B,cAAc;EAChCC,GAAG,EAAEhC,YAAY,CAACiC,kBAAkB;EACpCC,GAAG,EAAElC,YAAY,CAACmC,MAAM;EACxBC,GAAG,EAAEpC,YAAY,CAACqC,iBAAiB;EACnCC,GAAG,EAAEtC,YAAY,CAACuC;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAG;EAChCC,IAAI,EAAEzC,YAAY,CAACmC,MAAM;EACzBO,KAAK,EAAE1C,YAAY,CAAC2C;AACtB,CAAC;AAED,SACExC,YAAY,EACZC,mBAAmB,EACnBC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,oBAAoB,EACpBC,mBAAmB,EACnBY,YAAY,EACZiB,yBAAyB,EACzB5B,kBAAkB,EAClBC,aAAa,EACbC,gBAAgB,EAChBZ,gBAAgB","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-import { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';
+import { VERTICAL_LINE_COUNT, CURRENCIES_ORDER, COLOR_CONFIG } from './constants';
 const getDateAndTime = param => {
   const dateAndTime = param.split('T');
   return {
@@ -68,7 +68,7 @@ const formatLegendData = values => {
     } = _ref5;
     return currency;
   });
-  const list = dataCurrencies.length === CURENCIES_ORDER.length ? CURENCIES_ORDER : CURENCIES_ORDER.filter(currency => dataCurrencies.includes(currency));
+  const list = dataCurrencies.length === CURRENCIES_ORDER.length ? CURRENCIES_ORDER : CURRENCIES_ORDER.filter(currency => dataCurrencies.includes(currency));
   return list.map(currency => ({
     name: currency,
     itemStyle: {

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

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","names":["CurrencyPowerBalanceTimeUnit","VERTICAL_LINE_COUNT","CURENCIES_ORDER","COLOR_CONFIG","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","M3","M1","W1","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join","formatLegendData","dataCurrencies","_ref5","currency","list","length","filter","includes","name","itemStyle","color"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n  const dateAndTime = param.split('T');\n\n  return {\n    date: dateAndTime[0],\n    time: dateAndTime[1].substring(0, 5),\n  };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n  || timeUnit === CurrencyPowerBalanceTimeUnit.M1\n  || timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n  dataLength: number,\n) => Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n  const row = values\n    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n    .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ${marker}\n        <span>${seriesName}</span>\n      </div>\n      <span>${value[1]}</span>\n    </div>`);\n\n  return `<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">${date}</span>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nconst formatLegendData = (values: CurrencyPowerBalance[]) => {\n  const dataCurrencies = values.map(({ currency }) => currency);\n\n  const list = dataCurrencies.length === CURENCIES_ORDER.length\n    ? CURENCIES_ORDER\n    : CURENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));\n\n  return list.map((currency) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n};\n\nexport {\n  isMonthWeek,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n  intervalFormatter,\n  formatLegendData,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"formatters.js","names":["CurrencyPowerBalanceTimeUnit","VERTICAL_LINE_COUNT","CURRENCIES_ORDER","COLOR_CONFIG","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","M3","M1","W1","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join","formatLegendData","dataCurrencies","_ref5","currency","list","length","filter","includes","name","itemStyle","color"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT, CURRENCIES_ORDER, COLOR_CONFIG } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n  const dateAndTime = param.split('T');\n\n  return {\n    date: dateAndTime[0],\n    time: dateAndTime[1].substring(0, 5),\n  };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n  || timeUnit === CurrencyPowerBalanceTimeUnit.M1\n  || timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n  dataLength: number,\n) => Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n  const row = values\n    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n    .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ${marker}\n        <span>${seriesName}</span>\n      </div>\n      <span>${value[1]}</span>\n    </div>`);\n\n  return `<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">${date}</span>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nconst formatLegendData = (values: CurrencyPowerBalance[]) => {\n  const dataCurrencies = values.map(({ currency }) => currency);\n\n  const list = dataCurrencies.length === CURRENCIES_ORDER.length\n    ? CURRENCIES_ORDER\n    : CURRENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));\n\n  return list.map((currency) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n};\n\nexport {\n  isMonthWeek,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n  intervalFormatter,\n  formatLegendData,\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,20 @@
+import { darkTheme, lightTheme } from '@oanda/labs-widget-common';
 import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
 import { intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData } from './formatters';
-const getOption = (chartData, timeUnit, isDark) => {
-  const seriesData = chartData.map(_ref => {
+import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { findLastIndexesBeforeWeekend } from './utils';
+const getOption = (chartData, timeUnit, isDark, lang) => {
+  const currentTheme = isDark ? darkTheme : lightTheme;
+  const dataTimestamps = chartData[0].power.map(x => new Date(x.point).getTime());
+  const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);
+  const disableWeekendsIndicator = [CurrencyPowerBalanceTimeUnit.CurrentDay, CurrencyPowerBalanceTimeUnit.PreviousDay, CurrencyPowerBalanceTimeUnit.M3].includes(timeUnit) || weekendsIndexes.length === 0;
+  const weekendsMarks = weekendsIndexes.map(item => ({
+    xAxis: item,
+    label: {
+      formatter: () => lang('market_closed')
+    }
+  }));
+  const seriesData = chartData.map((_ref, index) => {
     let {
       currency,
       power
@@ -14,16 +27,47 @@ const getOption = (chartData, timeUnit, isDark) => {
       itemStyle: {
         color: COLOR_CONFIG[currency]
       },
-      lineStyle: {
-        color: COLOR_CONFIG[currency]
-      },
       data: power.map(_ref2 => {
         let {
           point,
           price
         } = _ref2;
         return [point, price];
-      })
+      }),
+      markLine: index === chartData.length - 1 && !disableWeekendsIndicator ? {
+        label: {
+          show: false,
+          position: 'end',
+          align: 'center',
+          distance: -32,
+          padding: [8, 8],
+          fontSize: 12,
+          shadowBlur: 24,
+          shadowOffsetX: 0,
+          shadowOffsetY: 6,
+          borderWidth: 0,
+          color: currentTheme.textPrimary,
+          shadowColor: 'rgba(0,0,0,0.1)',
+          borderRadius: 4,
+          backgroundColor: isDark ? currentTheme.borderPrimary : currentTheme.backgroundSecondary
+        },
+        show: false,
+        emphasis: {
+          label: {
+            show: true
+          },
+          lineStyle: {
+            width: 1,
+            opacity: 0,
+            color: currentTheme.borderPrimary
+          }
+        },
+        symbol: ['none', 'none'],
+        itemStyle: {
+          color: currentTheme.borderPrimary
+        },
+        data: weekendsMarks
+      } : undefined
     };
   });
   const legendData = formatLegendData(chartData);