@oanda/labs-currency-power-balance-widget 1.0.104 → 1.0.106

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);

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

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","intervalFormatter","tooltipFormatter","xAxisLabelFormatter","formatLegendData","getOption","chartData","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","formatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","padding","align","margin","rotate","interval","length","label","yAxis","position","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series"],"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,SAASA,YAAY,EAAEC,yBAAyB,QAAQ,aAAa;AACrE,SACEC,iBAAiB,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,gBAAgB,QACrE,cAAc;AAGrB,MAAMC,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,EAAEpB,YAAY,CAACa,QAAQ;MAC9B,CAAC;MACDQ,SAAS,EAAE;QACTD,KAAK,EAAEpB,YAAY,CAACa,QAAQ;MAC9B,CAAC;MACDS,IAAI,EAAER,KAAK,CAACH,GAAG,CAACY,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,GAAGrB,gBAAgB,CAACE,SAAS,CAAC;EAE9C,OAAO;IACLoB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNN,IAAI,EAAEI,UAAU;MAChBG,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;QACJd,SAAS,EAAE;UACTD,KAAK,EAAEX,MAAM,GAAGR,yBAAyB,CAACmC,IAAI,GAAGnC,yBAAyB,CAACoC;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEnC,gBAAgB;MAC3BoC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACLxB,IAAI,EAAE,UAAU;MAChByB,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,EAAEhD,iBAAiB,CAACQ,UAAU,CAAC,CAAC,CAAC,CAACY,IAAI,CAAC6B,MAAM,CAAC;QACtDb,SAAS,EAAGc,KAAa,IAAKhD,mBAAmB,CAACgD,KAAK,EAAE5C,QAAQ;MACnE;IACF,CAAC;IACD6C,KAAK,EAAE;MACLrC,IAAI,EAAE,OAAO;MACbsC,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdZ,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBc,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3BX,SAAS,EAAE;QACTY,YAAY,EAAE,KAAK;QACnBC,YAAY,EAAE;MAChB;IACF,CAAC;IACDC,MAAM,EAAEjD;EACV,CAAC;AACH,CAAC;AAED,SAASJ,SAAS","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["darkTheme","lightTheme","COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","intervalFormatter","tooltipFormatter","xAxisLabelFormatter","formatLegendData","CurrencyPowerBalanceTimeUnit","findLastIndexesBeforeWeekend","getOption","chartData","timeUnit","isDark","lang","currentTheme","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","backgroundSecondary","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 { 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/module/CurrencyPowerBalanceWidget/components/Chart/options/utils.js

@@ -0,0 +1,4 @@
+import { WEEKEND_DURATION } from './constants';
+const findLastIndexesBeforeWeekend = timestamps => timestamps.reduce((acc, timestamp, index) => timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= WEEKEND_DURATION ? [...acc, index] : acc, []);
+export { findLastIndexesBeforeWeekend };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["WEEKEND_DURATION","findLastIndexesBeforeWeekend","timestamps","reduce","acc","timestamp","index","length"],"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,SAASA,gBAAgB,QAAQ,aAAa;AAE9C,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,IAAIL,gBAAgB,GACpF,CAAC,GAAGI,GAAG,EAAEE,KAAK,CAAC,GACfF,GACL,EAAE,EAAc,CAAC;AAEpB,SACEH,4BAA4B","ignoreList":[]}

package/dist/module/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.js

@@ -35,6 +35,7 @@ const TimeUnitSelect = _ref => {
     "data-testid": "time-unit-select",
     className: "lw-mb-6 lw-w-full"
   }, React.createElement(Select, {
+    searchPlaceholder: lang('search'),
     options: selectOptions,
     selectedOption: {
       id: selected,

package/dist/module/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeUnitSelect.js","names":["React","Select","useLocale","TimeUnitSelect","_ref","selected","options","callback","lang","selectOptions","map","_ref2","value","id","label","tooltipLabel","translationKey","count","selectedLabel","filter","_ref3","createElement","className","selectedOption","setSelectedOption","_ref4"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.tsx"],"sourcesContent":["import React from 'react';\nimport { Select } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { TimeUnitSwitchProps } from './types';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';\n\nconst TimeUnitSelect = ({\n  selected, options, callback,\n}: TimeUnitSwitchProps) => {\n  const { lang } = useLocale();\n  const selectOptions = options\n    .map(({ value: id, label, tooltipLabel }) => ({\n      id,\n      label: tooltipLabel\n        ? lang(tooltipLabel.translationKey, { count: tooltipLabel.count })\n        : lang(label),\n    }));\n  const [{ label: selectedLabel }] = selectOptions.filter(({ id }) => id === selected);\n\n  return (\n    <div data-testid=\"time-unit-select\" className=\"lw-mb-6 lw-w-full\">\n      <Select\n        options={selectOptions}\n        selectedOption={{ id: selected, label: selectedLabel }}\n        setSelectedOption={({ id }) => callback(id as CurrencyPowerBalanceTimeUnit)}\n      />\n    </div>\n  );\n};\n\nexport { TimeUnitSelect };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,SAAS,QAAQ,kBAAkB;AAI5C,MAAMC,cAAc,GAAGC,IAAA,IAEI;EAAA,IAFH;IACtBC,QAAQ;IAAEC,OAAO;IAAEC;EACA,CAAC,GAAAH,IAAA;EACpB,MAAM;IAAEI;EAAK,CAAC,GAAGN,SAAS,CAAC,CAAC;EAC5B,MAAMO,aAAa,GAAGH,OAAO,CAC1BI,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,KAAK,EAAEC,EAAE;MAAEC,KAAK;MAAEC;IAAa,CAAC,GAAAJ,KAAA;IAAA,OAAM;MAC5CE,EAAE;MACFC,KAAK,EAAEC,YAAY,GACfP,IAAI,CAACO,YAAY,CAACC,cAAc,EAAE;QAAEC,KAAK,EAAEF,YAAY,CAACE;MAAM,CAAC,CAAC,GAChET,IAAI,CAACM,KAAK;IAChB,CAAC;EAAA,CAAC,CAAC;EACL,MAAM,CAAC;IAAEA,KAAK,EAAEI;EAAc,CAAC,CAAC,GAAGT,aAAa,CAACU,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEP;IAAG,CAAC,GAAAO,KAAA;IAAA,OAAKP,EAAE,KAAKR,QAAQ;EAAA,EAAC;EAEpF,OACEL,KAAA,CAAAqB,aAAA;IAAK,eAAY,kBAAkB;IAACC,SAAS,EAAC;EAAmB,GAC/DtB,KAAA,CAAAqB,aAAA,CAACpB,MAAM;IACLK,OAAO,EAAEG,aAAc;IACvBc,cAAc,EAAE;MAAEV,EAAE,EAAER,QAAQ;MAAES,KAAK,EAAEI;IAAc,CAAE;IACvDM,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEZ;MAAG,CAAC,GAAAY,KAAA;MAAA,OAAKlB,QAAQ,CAACM,EAAkC,CAAC;IAAA;EAAC,CAC7E,CACE,CAAC;AAEV,CAAC;AAED,SAASV,cAAc","ignoreList":[]}
+{"version":3,"file":"TimeUnitSelect.js","names":["React","Select","useLocale","TimeUnitSelect","_ref","selected","options","callback","lang","selectOptions","map","_ref2","value","id","label","tooltipLabel","translationKey","count","selectedLabel","filter","_ref3","createElement","className","searchPlaceholder","selectedOption","setSelectedOption","_ref4"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.tsx"],"sourcesContent":["import React from 'react';\nimport { Select } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { TimeUnitSwitchProps } from './types';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';\n\nconst TimeUnitSelect = ({\n  selected, options, callback,\n}: TimeUnitSwitchProps) => {\n  const { lang } = useLocale();\n  const selectOptions = options\n    .map(({ value: id, label, tooltipLabel }) => ({\n      id,\n      label: tooltipLabel\n        ? lang(tooltipLabel.translationKey, { count: tooltipLabel.count })\n        : lang(label),\n    }));\n  const [{ label: selectedLabel }] = selectOptions.filter(({ id }) => id === selected);\n\n  return (\n    <div data-testid=\"time-unit-select\" className=\"lw-mb-6 lw-w-full\">\n      <Select\n        searchPlaceholder={lang('search')}\n        options={selectOptions}\n        selectedOption={{ id: selected, label: selectedLabel }}\n        setSelectedOption={({ id }) => callback(id as CurrencyPowerBalanceTimeUnit)}\n      />\n    </div>\n  );\n};\n\nexport { TimeUnitSelect };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,SAAS,QAAQ,kBAAkB;AAI5C,MAAMC,cAAc,GAAGC,IAAA,IAEI;EAAA,IAFH;IACtBC,QAAQ;IAAEC,OAAO;IAAEC;EACA,CAAC,GAAAH,IAAA;EACpB,MAAM;IAAEI;EAAK,CAAC,GAAGN,SAAS,CAAC,CAAC;EAC5B,MAAMO,aAAa,GAAGH,OAAO,CAC1BI,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,KAAK,EAAEC,EAAE;MAAEC,KAAK;MAAEC;IAAa,CAAC,GAAAJ,KAAA;IAAA,OAAM;MAC5CE,EAAE;MACFC,KAAK,EAAEC,YAAY,GACfP,IAAI,CAACO,YAAY,CAACC,cAAc,EAAE;QAAEC,KAAK,EAAEF,YAAY,CAACE;MAAM,CAAC,CAAC,GAChET,IAAI,CAACM,KAAK;IAChB,CAAC;EAAA,CAAC,CAAC;EACL,MAAM,CAAC;IAAEA,KAAK,EAAEI;EAAc,CAAC,CAAC,GAAGT,aAAa,CAACU,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEP;IAAG,CAAC,GAAAO,KAAA;IAAA,OAAKP,EAAE,KAAKR,QAAQ;EAAA,EAAC;EAEpF,OACEL,KAAA,CAAAqB,aAAA;IAAK,eAAY,kBAAkB;IAACC,SAAS,EAAC;EAAmB,GAC/DtB,KAAA,CAAAqB,aAAA,CAACpB,MAAM;IACLsB,iBAAiB,EAAEf,IAAI,CAAC,QAAQ,CAAE;IAClCF,OAAO,EAAEG,aAAc;IACvBe,cAAc,EAAE;MAAEX,EAAE,EAAER,QAAQ;MAAES,KAAK,EAAEI;IAAc,CAAE;IACvDO,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEb;MAAG,CAAC,GAAAa,KAAA;MAAA,OAAKnB,QAAQ,CAACM,EAAkC,CAAC;IAAA;EAAC,CAC7E,CACE,CAAC;AAEV,CAAC;AAED,SAASV,cAAc","ignoreList":[]}

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

@@ -10,10 +10,12 @@
   "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",
   "previous_business_day": "Previous Business Day",
+  "search": "Search",
   "today": "Today",
   "week": "{{count}} Week",
   "week_plural": "{{count}} Weeks"

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

@@ -10,10 +10,12 @@
   "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",
   "previous_business_day": "Día laborable anterior",
+  "search": "Buscar",
   "today": "Hoy",
   "week": "{{count}} Semana",
   "week_plural": "{{count}} Semanas"

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { CurrencyName } from '../../../../gql/types/graphql';
+declare const WEEKEND_DURATION = 172800000;
 declare const X_LABEL_SIZE = 90;
 declare const X_LABEL_SIZE_MOBILE = 110;
 declare const Y_LABEL_SIZE_MOBILE = 35;
@@ -10,7 +11,7 @@ declare const LEGEND_HEIGHT_MOBILE = 70;
 declare const VERTICAL_LINE_COUNT = 10;
 declare const CANDLE_NUMBER_HOUR = 12;
 declare const CANDLE_MINUTE = 5;
-declare const CURENCIES_ORDER: CurrencyName[];
+declare const CURRENCIES_ORDER: CurrencyName[];
 declare const COLOR_CONFIG: {
     USD: string;
     EUR: string;
@@ -25,4 +26,4 @@ declare const TOOLTIP_LINE_COLOR_CONFIG: {
     DARK: string;
     LIGHT: string;
 };
-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, };

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

@@ -1,5 +1,5 @@
 import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean) => {
+declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean, lang: (key: string) => string) => {
     animation: boolean;
     legend: {
         data: {
@@ -67,10 +67,46 @@ declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyP
         itemStyle: {
             color: string;
         };
-        lineStyle: {
-            color: string;
-        };
         data: (string | number)[][];
+        markLine: {
+            label: {
+                show: boolean;
+                position: string;
+                align: string;
+                distance: number;
+                padding: number[];
+                fontSize: number;
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowOffsetY: number;
+                borderWidth: number;
+                color: string;
+                shadowColor: string;
+                borderRadius: number;
+                backgroundColor: string;
+            };
+            show: boolean;
+            emphasis: {
+                label: {
+                    show: boolean;
+                };
+                lineStyle: {
+                    width: number;
+                    opacity: number;
+                    color: string;
+                };
+            };
+            symbol: string[];
+            itemStyle: {
+                color: string;
+            };
+            data: {
+                xAxis: number;
+                label: {
+                    formatter: () => string;
+                };
+            }[];
+        } | undefined;
     }[];
 };
 export { getOption };

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

@@ -0,0 +1,2 @@
+declare const findLastIndexesBeforeWeekend: (timestamps: number[]) => number[];
+export { findLastIndexesBeforeWeekend, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-power-balance-widget",
-  "version": "1.0.104",
+  "version": "1.0.106",
   "description": "Labs Currency Power Balance Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.165",
+    "@oanda/labs-widget-common": "^1.0.167",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -22,5 +22,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "5d12e200d67282a9030f1a918e13081e0e9d4c16"
+  "gitHead": "5659b2a7351c578a3514e1d465d61c2bd3f8fb7f"
 }

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

@@ -4,11 +4,12 @@ import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import {
-  GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent,
+  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';
@@ -22,12 +23,14 @@ echarts.use([
   LegendPlainComponent,
   LineChart,
   CanvasRenderer,
+  MarkLineComponent,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
+  const { lang } = useLocale();
   const { isDark, size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
   const isMobile = size === Size.MOBILE;
@@ -58,7 +61,7 @@ const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
         height: `${CHART_HEIGHT}px`,
         width: '100%',
       }}
-      option={getOption(chartData, timeUnit, isDark)}
+      option={getOption(chartData, timeUnit, isDark, lang)}
     />
   );
 };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/{constants.tsx → constants.ts}

@@ -1,6 +1,8 @@
 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;
@@ -13,7 +15,7 @@ const VERTICAL_LINE_COUNT = 10;
 const CANDLE_NUMBER_HOUR = 12;
 const CANDLE_MINUTE = 5;
 
-const CURENCIES_ORDER: CurrencyName[] = [
+const CURRENCIES_ORDER: CurrencyName[] = [
   CurrencyName.Usd,
   CurrencyName.Eur,
   CurrencyName.Gbp,
@@ -54,5 +56,6 @@ export {
   TOOLTIP_LINE_COLOR_CONFIG,
   CANDLE_NUMBER_HOUR,
   CANDLE_MINUTE,
-  CURENCIES_ORDER,
+  CURRENCIES_ORDER,
+  WEEKEND_DURATION,
 };

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

@@ -1,5 +1,5 @@
 import { CurrencyPowerBalance, 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';
 import { TooltipFormatterParams } from './types';
 
 const getDateAndTime = (param: string) => {
@@ -54,9 +54,9 @@ const tooltipFormatter = (values: TooltipFormatterParams[]) => {
 const formatLegendData = (values: CurrencyPowerBalance[]) => {
   const dataCurrencies = values.map(({ currency }) => 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,

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

@@ -1,15 +1,34 @@
+import { darkTheme, lightTheme } from '@oanda/labs-widget-common';
 import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
 import {
   intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,
 } from './formatters';
 import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { findLastIndexesBeforeWeekend } from './utils';
 
 const getOption = (
   chartData: CurrencyPowerBalance[],
   timeUnit: CurrencyPowerBalanceTimeUnit,
   isDark: boolean,
+  lang: (key: string) => string,
 ) => {
-  const seriesData = chartData.map(({ currency, power }) => ({
+  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(({ currency, power }, index) => ({
     name: currency,
     type: 'line',
     symbol: 'circle',
@@ -17,10 +36,41 @@ const getOption = (
     itemStyle: {
       color: COLOR_CONFIG[currency],
     },
-    lineStyle: {
-      color: COLOR_CONFIG[currency],
-    },
     data: power.map(({ point, price }) => [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);

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

@@ -0,0 +1,12 @@
+import { WEEKEND_DURATION } from './constants';
+
+const findLastIndexesBeforeWeekend = (timestamps: number[]) => timestamps
+  .reduce((acc, timestamp, index) => (
+    timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= WEEKEND_DURATION
+      ? [...acc, index]
+      : acc
+  ), [] as number[]);
+
+export {
+  findLastIndexesBeforeWeekend,
+};

package/src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.tsx

@@ -20,6 +20,7 @@ const TimeUnitSelect = ({
   return (
     <div data-testid="time-unit-select" className="lw-mb-6 lw-w-full">
       <Select
+        searchPlaceholder={lang('search')}
         options={selectOptions}
         selectedOption={{ id: selected, label: selectedLabel }}
         setSelectedOption={({ id }) => callback(id as CurrencyPowerBalanceTimeUnit)}

package/src/translations/sources/en.json

@@ -10,10 +10,12 @@
   "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",
   "previous_business_day": "Previous Business Day",
+  "search": "Search",
   "today": "Today",
   "week": "{{count}} Week",
   "week_plural": "{{count}} Weeks"

package/src/translations/sources/es.json

@@ -10,10 +10,12 @@
   "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",
   "previous_business_day": "Día laborable anterior",
+  "search": "Buscar",
   "today": "Hoy",
   "week": "{{count}} Semana",
   "week_plural": "{{count}} Semanas"

package/src/translations/sources/th.json

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

package/src/translations/sources/zh_TW.json

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

package/test/chartFormatters.test.ts

@@ -2,7 +2,9 @@
  * @jest-environment jsdom
  */
 
-import { intervalFormatter, xAxisLabelFormatter, tooltipFormatter } from '../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters';
+import {
+  intervalFormatter, xAxisLabelFormatter, tooltipFormatter,
+} from '../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters';
 import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
 
 describe('intervalFormatter', () => {

package/test/utils.test.ts

@@ -0,0 +1,34 @@
+import { findLastIndexesBeforeWeekend } from '../src/CurrencyPowerBalanceWidget/components/Chart/options/utils';
+
+describe('findLastIndexesBeforeWeekend', () => {
+  it('should return an empty array if there are no weekends', () => {
+    const timestamps = [
+      1679952000000, // Monday
+      1680038400000, // Tuesday
+      1680124800000, // Wednesday
+      1680211200000, // Thursday
+      1680297600000, // Friday
+    ];
+    const expected: number[] = [];
+    expect(findLastIndexesBeforeWeekend(timestamps)).toEqual(expected);
+  });
+
+  it('should return an array of weekend indexes', () => {
+    const timestamps = [
+      1679952000000, // Monday
+      1680038400000, // Tuesday
+      1680124800000, // Wednesday
+      1680211200000, // Thursday
+      1680297600000, // Friday
+      1680556800000, // Monday
+      1680643200000, // Tuesday
+      1680729600000, // Wednesday
+      1680816000000, // Thursday
+      1680902400000, // Friday
+      1681161600000, // Monday
+
+    ];
+    const expected = [4, 9];
+    expect(findLastIndexesBeforeWeekend(timestamps)).toEqual(expected);
+  });
+});