@oanda/labs-currency-power-balance-widget 1.0.2 → 1.0.4

package/dist/module/CurrencyPowerBalanceWidget/Tool.js

@@ -1,17 +1,22 @@
 import React, { useState } from 'react';
+import { useLocale } from '@oanda/mono-i18n';
 import { timeUnitConfig } from './config';
 import { TimeUnitSwitch } from './components/TimeUnitSwitch';
 import { ChartWithData } from './ChartWithData';
 import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
 const Tool = () => {
   const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);
+  const {
+    lang
+  } = useLocale();
   return React.createElement("div", {
     "data-testid": "currency-power-balance-wrapper",
-    className: "lw-flex lw-flex-col lw-overflow-hidden lw-text-sm lw-tracking-normal"
+    className: "lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
   }, React.createElement(TimeUnitSwitch, {
     selected: selectedTimeUnit,
     callback: setSelectedTimeUnit,
-    options: timeUnitConfig
+    options: timeUnitConfig,
+    labelCallback: lang
   }), React.createElement(ChartWithData, {
     timeUnit: selectedTimeUnit
   }));

package/dist/module/CurrencyPowerBalanceWidget/Tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tool.js","names":["React","useState","timeUnitConfig","TimeUnitSwitch","ChartWithData","CurrencyPowerBalanceTimeUnit","Tool","selectedTimeUnit","setSelectedTimeUnit","CurrentDay","createElement","className","selected","callback","options","timeUnit"],"sources":["../../../src/CurrencyPowerBalanceWidget/Tool.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { timeUnitConfig } from './config';\nimport { TimeUnitSwitch } from './components/TimeUnitSwitch';\nimport { ChartWithData } from './ChartWithData';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nconst Tool = () => {\n  const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);\n\n  return (\n    <div\n      data-testid=\"currency-power-balance-wrapper\"\n      className=\"lw-flex lw-flex-col lw-overflow-hidden lw-text-sm lw-tracking-normal\"\n    >\n      <TimeUnitSwitch\n        selected={selectedTimeUnit}\n        callback={setSelectedTimeUnit}\n        options={timeUnitConfig}\n      />\n      <ChartWithData\n        timeUnit={selectedTimeUnit}\n      />\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,4BAA4B,QAAQ,sBAAsB;AAEnE,MAAMC,IAAI,GAAGA,CAAA,KAAM;EACjB,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGP,QAAQ,CAACI,4BAA4B,CAACI,UAAU,CAAC;EAEjG,OACET,KAAA,CAAAU,aAAA;IACE,eAAY,gCAAgC;IAC5CC,SAAS,EAAC;EAAsE,GAEhFX,KAAA,CAAAU,aAAA,CAACP,cAAc;IACbS,QAAQ,EAAEL,gBAAiB;IAC3BM,QAAQ,EAAEL,mBAAoB;IAC9BM,OAAO,EAAEZ;EAAe,CACzB,CAAC,EACFF,KAAA,CAAAU,aAAA,CAACN,aAAa;IACZW,QAAQ,EAAER;EAAiB,CAC5B,CACE,CAAC;AAEV,CAAC;AAED,SAASD,IAAI"}
+{"version":3,"file":"Tool.js","names":["React","useState","useLocale","timeUnitConfig","TimeUnitSwitch","ChartWithData","CurrencyPowerBalanceTimeUnit","Tool","selectedTimeUnit","setSelectedTimeUnit","CurrentDay","lang","createElement","className","selected","callback","options","labelCallback","timeUnit"],"sources":["../../../src/CurrencyPowerBalanceWidget/Tool.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { timeUnitConfig } from './config';\nimport { TimeUnitSwitch } from './components/TimeUnitSwitch';\nimport { ChartWithData } from './ChartWithData';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nconst Tool = () => {\n  const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);\n  const { lang } = useLocale();\n\n  return (\n    <div\n      data-testid=\"currency-power-balance-wrapper\"\n      className=\"lw-flex lw-flex-col lw-text-sm lw-tracking-normal\"\n    >\n      <TimeUnitSwitch\n        selected={selectedTimeUnit}\n        callback={setSelectedTimeUnit}\n        options={timeUnitConfig}\n        labelCallback={lang}\n      />\n      <ChartWithData\n        timeUnit={selectedTimeUnit}\n      />\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,4BAA4B,QAAQ,sBAAsB;AAEnE,MAAMC,IAAI,GAAGA,CAAA,KAAM;EACjB,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGR,QAAQ,CAACK,4BAA4B,CAACI,UAAU,CAAC;EACjG,MAAM;IAAEC;EAAK,CAAC,GAAGT,SAAS,CAAC,CAAC;EAE5B,OACEF,KAAA,CAAAY,aAAA;IACE,eAAY,gCAAgC;IAC5CC,SAAS,EAAC;EAAmD,GAE7Db,KAAA,CAAAY,aAAA,CAACR,cAAc;IACbU,QAAQ,EAAEN,gBAAiB;IAC3BO,QAAQ,EAAEN,mBAAoB;IAC9BO,OAAO,EAAEb,cAAe;IACxBc,aAAa,EAAEN;EAAK,CACrB,CAAC,EACFX,KAAA,CAAAY,aAAA,CAACP,aAAa;IACZa,QAAQ,EAAEV;EAAiB,CAC5B,CACE,CAAC;AAEV,CAAC;AAED,SAASD,IAAI"}

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

@@ -46,7 +46,7 @@ const tooltipFormatter = values => {
     } = _ref4;
     return "<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ".concat(marker, "\n        <span>").concat(seriesName, "</span>\n      </div>\n      <span>").concat(value[1], "</span>\n    </div>");
   });
-  return "<div style=\"display:flex; flex-direction:column;\">\n    <p style=\"margin-bottom:5px;\">".concat(date, "</p>\n    ").concat(row.join('\n'), "\n  </div>");
+  return "<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">".concat(date, "</span>\n    ").concat(row.join('\n'), "\n  </div>");
 };
 export { tooltipFormatter, xAxisLabelFormatter };
 //# sourceMappingURL=formatters.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","names":["getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","xAxisLabelFormatter","label","timeUnit","isDateFormat","startsWith","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\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 xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = timeUnit.startsWith('M') || timeUnit.startsWith('W') || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\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    <p style=\"margin-bottom:5px;\">${date}</p>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nexport {\n  tooltipFormatter,\n  xAxisLabelFormatter,\n};\n"],"mappings":"AAGA,MAAMA,cAAc,GAAIC,KAAa,IAAK;EACxC,MAAMC,WAAW,GAAGD,KAAK,CAACE,KAAK,CAAC,GAAG,CAAC;EAEpC,OAAO;IACLC,IAAI,EAAEF,WAAW,CAAC,CAAC,CAAC;IACpBG,IAAI,EAAEH,WAAW,CAAC,CAAC,CAAC,CAACI,SAAS,CAAC,CAAC,EAAE,CAAC;EACrC,CAAC;AACH,CAAC;AAED,MAAMC,UAAU,GAAIH,IAAY,OAAAI,MAAA,CAAQ,IAAIC,IAAI,CAACL,IAAI,CAAC,CAACM,kBAAkB,CAACC,SAAS,EAAE;EAAEC,KAAK,EAAE,SAAS;EAAEC,GAAG,EAAE;AAAU,CAAC,CAAC,CAAE;AAE5H,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;IAAEX,IAAI;IAAEC;EAAqC,CAAC,GAAAU,IAAA;EAAA,UAAAP,MAAA,CAAQ,IAAIC,IAAI,CAACL,IAAI,CAAC,CAACM,kBAAkB,CAACC,SAAS,EAAE;IAAEK,IAAI,EAAE,SAAS;IAAEJ,KAAK,EAAE,SAAS;IAAEC,GAAG,EAAE;EAAU,CAAC,CAAC,QAAAL,MAAA,CAAKH,IAAI;AAAA,CAAM;AAEhM,MAAMY,mBAAmB,GAAGA,CAACC,KAAa,EAAEC,QAAsC,KAAK;EACrF,MAAM;IAAEf,IAAI;IAAEC;EAAK,CAAC,GAAGL,cAAc,CAACkB,KAAK,CAAC;EAC5C,MAAME,YAAY,GAAGD,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,IAAIF,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,IAAIhB,IAAI,KAAK,OAAO;EAE7F,OAAOe,YAAY,GAAGb,UAAU,CAACH,IAAI,CAAC,GAAGC,IAAI;AAC/C,CAAC;AAED,MAAMiB,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAMnB,IAAI,GAAGU,cAAc,CAACd,cAAc,CAACuB,MAAM,CAAC,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAE/D,MAAMC,GAAG,GAAGF,MAAM,CACfG,IAAI,CAAC,CAAAC,KAAA,EAAAC,KAAA;IAAA,IAAC;MAAEJ,KAAK,EAAEK;IAAO,CAAC,GAAAF,KAAA;IAAA,IAAE;MAAEH,KAAK,EAAEM;IAAO,CAAC,GAAAF,KAAA;IAAA,OAAKG,MAAM,CAACD,MAAM,CAAC,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,MAAM,CAAC,CAAC,CAAC,CAAC;EAAA,EAAC,CACrFG,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,MAAM;MAAEC,UAAU;MAAEX;IAAM,CAAC,GAAAS,KAAA;IAAA,yJAAAzB,MAAA,CAE7B0B,MAAM,sBAAA1B,MAAA,CACA2B,UAAU,yCAAA3B,MAAA,CAEZgB,KAAK,CAAC,CAAC,CAAC;EAAA,CACX,CAAC;EAEV,oGAAAhB,MAAA,CACkCJ,IAAI,gBAAAI,MAAA,CAClCiB,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AAEpB,CAAC;AAED,SACEd,gBAAgB,EAChBL,mBAAmB"}
+{"version":3,"file":"formatters.js","names":["getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","xAxisLabelFormatter","label","timeUnit","isDateFormat","startsWith","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\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 xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = timeUnit.startsWith('M') || timeUnit.startsWith('W') || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\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\nexport {\n  tooltipFormatter,\n  xAxisLabelFormatter,\n};\n"],"mappings":"AAGA,MAAMA,cAAc,GAAIC,KAAa,IAAK;EACxC,MAAMC,WAAW,GAAGD,KAAK,CAACE,KAAK,CAAC,GAAG,CAAC;EAEpC,OAAO;IACLC,IAAI,EAAEF,WAAW,CAAC,CAAC,CAAC;IACpBG,IAAI,EAAEH,WAAW,CAAC,CAAC,CAAC,CAACI,SAAS,CAAC,CAAC,EAAE,CAAC;EACrC,CAAC;AACH,CAAC;AAED,MAAMC,UAAU,GAAIH,IAAY,OAAAI,MAAA,CAAQ,IAAIC,IAAI,CAACL,IAAI,CAAC,CAACM,kBAAkB,CAACC,SAAS,EAAE;EAAEC,KAAK,EAAE,SAAS;EAAEC,GAAG,EAAE;AAAU,CAAC,CAAC,CAAE;AAE5H,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;IAAEX,IAAI;IAAEC;EAAqC,CAAC,GAAAU,IAAA;EAAA,UAAAP,MAAA,CAAQ,IAAIC,IAAI,CAACL,IAAI,CAAC,CAACM,kBAAkB,CAACC,SAAS,EAAE;IAAEK,IAAI,EAAE,SAAS;IAAEJ,KAAK,EAAE,SAAS;IAAEC,GAAG,EAAE;EAAU,CAAC,CAAC,QAAAL,MAAA,CAAKH,IAAI;AAAA,CAAM;AAEhM,MAAMY,mBAAmB,GAAGA,CAACC,KAAa,EAAEC,QAAsC,KAAK;EACrF,MAAM;IAAEf,IAAI;IAAEC;EAAK,CAAC,GAAGL,cAAc,CAACkB,KAAK,CAAC;EAC5C,MAAME,YAAY,GAAGD,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,IAAIF,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,IAAIhB,IAAI,KAAK,OAAO;EAE7F,OAAOe,YAAY,GAAGb,UAAU,CAACH,IAAI,CAAC,GAAGC,IAAI;AAC/C,CAAC;AAED,MAAMiB,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAMnB,IAAI,GAAGU,cAAc,CAACd,cAAc,CAACuB,MAAM,CAAC,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAE/D,MAAMC,GAAG,GAAGF,MAAM,CACfG,IAAI,CAAC,CAAAC,KAAA,EAAAC,KAAA;IAAA,IAAC;MAAEJ,KAAK,EAAEK;IAAO,CAAC,GAAAF,KAAA;IAAA,IAAE;MAAEH,KAAK,EAAEM;IAAO,CAAC,GAAAF,KAAA;IAAA,OAAKG,MAAM,CAACD,MAAM,CAAC,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,MAAM,CAAC,CAAC,CAAC,CAAC;EAAA,EAAC,CACrFG,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,MAAM;MAAEC,UAAU;MAAEX;IAAM,CAAC,GAAAS,KAAA;IAAA,yJAAAzB,MAAA,CAE7B0B,MAAM,sBAAA1B,MAAA,CACA2B,UAAU,yCAAA3B,MAAA,CAEZgB,KAAK,CAAC,CAAC,CAAC;EAAA,CACX,CAAC;EAEV,uGAAAhB,MAAA,CACqCJ,IAAI,mBAAAI,MAAA,CACrCiB,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AAEpB,CAAC;AAED,SACEd,gBAAgB,EAChBL,mBAAmB"}

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

@@ -53,7 +53,8 @@ const getOption = (values, timeUnit, isDark) => {
           color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT
         }
       },
-      formatter: tooltipFormatter
+      formatter: tooltipFormatter,
+      extraCssText: 'z-index: 1'
     },
     xAxis: {
       type: 'category',

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

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","VERTICAL_LINE_COUNT","tooltipFormatter","xAxisLabelFormatter","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","_ref3","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","formatter","xAxis","axisTick","show","axisLine","splitLine","axisLabel","margin","showMinLabel","rotate","interval","Math","round","length","label","yAxis","position","splitNumber","boundaryGap","showMaxLabel","series"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';\nimport { tooltipFormatter, xAxisLabelFormatter } from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n  values: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n) => {\n  const seriesData = values.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 = values.map(({ currency }) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\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        margin: 10,\n        showMinLabel: false,\n        rotate: -45,\n        interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),\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,EAAEC,mBAAmB,QAAQ,aAAa;AAC1F,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,cAAc;AAGpE,MAAMC,SAAS,GAAGA,CAChBC,MAA8B,EAC9BC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,MAAM,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACtDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;MAC9B,CAAC;MACDQ,SAAS,EAAE;QACTD,KAAK,EAAEnB,YAAY,CAACY,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,GAAGnB,MAAM,CAACI,GAAG,CAACgB,KAAA;IAAA,IAAC;MAAEd;IAAS,CAAC,GAAAc,KAAA;IAAA,OAAM;MAC/CZ,IAAI,EAAEF,QAAQ;MACdM,SAAS,EAAE;QACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;MAC9B;IACF,CAAC;EAAA,CAAC,CAAC;EAEH,OAAO;IACLe,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;UACTD,KAAK,EAAEX,MAAM,GAAGP,yBAAyB,CAACmC,IAAI,GAAGnC,yBAAyB,CAACoC;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEnC;IACb,CAAC;IACDoC,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,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE,KAAK;QACnBC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAEC,IAAI,CAACC,KAAK,CAACzC,UAAU,CAAC,CAAC,CAAC,CAACY,IAAI,CAAC8B,MAAM,GAAGjD,mBAAmB,CAAC;QACrEoC,SAAS,EAAGc,KAAa,IAAKhD,mBAAmB,CAACgD,KAAK,EAAE7C,QAAQ;MACnE;IACF,CAAC;IACD8C,KAAK,EAAE;MACLtC,IAAI,EAAE,OAAO;MACbuC,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdb,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBe,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3BZ,SAAS,EAAE;QACTa,YAAY,EAAE,KAAK;QACnBX,YAAY,EAAE;MAChB;IACF,CAAC;IACDY,MAAM,EAAEjD;EACV,CAAC;AACH,CAAC;AAED,SAASJ,SAAS"}
+{"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","VERTICAL_LINE_COUNT","tooltipFormatter","xAxisLabelFormatter","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","_ref3","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","formatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","margin","showMinLabel","rotate","interval","Math","round","length","label","yAxis","position","splitNumber","boundaryGap","showMaxLabel","series"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';\nimport { tooltipFormatter, xAxisLabelFormatter } from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n  values: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n) => {\n  const seriesData = values.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 = values.map(({ currency }) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark ? 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        margin: 10,\n        showMinLabel: false,\n        rotate: -45,\n        interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),\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,EAAEC,mBAAmB,QAAQ,aAAa;AAC1F,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,cAAc;AAGpE,MAAMC,SAAS,GAAGA,CAChBC,MAA8B,EAC9BC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,MAAM,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACtDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;MAC9B,CAAC;MACDQ,SAAS,EAAE;QACTD,KAAK,EAAEnB,YAAY,CAACY,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,GAAGnB,MAAM,CAACI,GAAG,CAACgB,KAAA;IAAA,IAAC;MAAEd;IAAS,CAAC,GAAAc,KAAA;IAAA,OAAM;MAC/CZ,IAAI,EAAEF,QAAQ;MACdM,SAAS,EAAE;QACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;MAC9B;IACF,CAAC;EAAA,CAAC,CAAC;EAEH,OAAO;IACLe,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;UACTD,KAAK,EAAEX,MAAM,GAAGP,yBAAyB,CAACmC,IAAI,GAAGnC,yBAAyB,CAACoC;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEnC,gBAAgB;MAC3BoC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACLzB,IAAI,EAAE,UAAU;MAChB0B,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,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE,KAAK;QACnBC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAEC,IAAI,CAACC,KAAK,CAAC1C,UAAU,CAAC,CAAC,CAAC,CAACY,IAAI,CAAC+B,MAAM,GAAGlD,mBAAmB,CAAC;QACrEoC,SAAS,EAAGe,KAAa,IAAKjD,mBAAmB,CAACiD,KAAK,EAAE9C,QAAQ;MACnE;IACF,CAAC;IACD+C,KAAK,EAAE;MACLvC,IAAI,EAAE,OAAO;MACbwC,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdb,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBe,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3BZ,SAAS,EAAE;QACTa,YAAY,EAAE,KAAK;QACnBX,YAAY,EAAE;MAChB;IACF,CAAC;IACDY,MAAM,EAAElD;EACV,CAAC;AACH,CAAC;AAED,SAASJ,SAAS"}

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

@@ -4,7 +4,8 @@ const TimeUnitSelect = _ref => {
   let {
     selected,
     options,
-    callback
+    callback,
+    labelCallback
   } = _ref;
   const selectOptions = options.map(_ref2 => {
     let {
@@ -14,7 +15,7 @@ const TimeUnitSelect = _ref => {
     } = _ref2;
     return {
       id,
-      label: tooltip || label
+      label: labelCallback ? labelCallback(tooltip || label) : tooltip || label
     };
   });
   const [{

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

@@ -1 +1 @@
-{"version":3,"file":"TimeUnitSelect.js","names":["React","Select","TimeUnitSelect","_ref","selected","options","callback","selectOptions","map","_ref2","value","id","label","tooltip","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 { TimeUnitSwitchProps } from './types';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';\n\nconst TimeUnitSelect = ({\n  selected, options, callback,\n}: TimeUnitSwitchProps) => {\n  const selectOptions = options\n    .map(({ value: id, label, tooltip }) => ({ id, label: tooltip || label }));\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;AAIlD,MAAMC,cAAc,GAAGC,IAAA,IAEI;EAAA,IAFH;IACtBC,QAAQ;IAAEC,OAAO;IAAEC;EACA,CAAC,GAAAH,IAAA;EACpB,MAAMI,aAAa,GAAGF,OAAO,CAC1BG,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,KAAK,EAAEC,EAAE;MAAEC,KAAK;MAAEC;IAAQ,CAAC,GAAAJ,KAAA;IAAA,OAAM;MAAEE,EAAE;MAAEC,KAAK,EAAEC,OAAO,IAAID;IAAM,CAAC;EAAA,CAAC,CAAC;EAC5E,MAAM,CAAC;IAAEA,KAAK,EAAEE;EAAc,CAAC,CAAC,GAAGP,aAAa,CAACQ,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEL;IAAG,CAAC,GAAAK,KAAA;IAAA,OAAKL,EAAE,KAAKP,QAAQ;EAAA,EAAC;EAEpF,OACEJ,KAAA,CAAAiB,aAAA;IAAK,eAAY,kBAAkB;IAACC,SAAS,EAAC;EAAmB,GAC/DlB,KAAA,CAAAiB,aAAA,CAAChB,MAAM;IACLI,OAAO,EAAEE,aAAc;IACvBY,cAAc,EAAE;MAAER,EAAE,EAAEP,QAAQ;MAAEQ,KAAK,EAAEE;IAAc,CAAE;IACvDM,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEV;MAAG,CAAC,GAAAU,KAAA;MAAA,OAAKf,QAAQ,CAACK,EAAkC,CAAC;IAAA;EAAC,CAC7E,CACE,CAAC;AAEV,CAAC;AAED,SAAST,cAAc"}
+{"version":3,"file":"TimeUnitSelect.js","names":["React","Select","TimeUnitSelect","_ref","selected","options","callback","labelCallback","selectOptions","map","_ref2","value","id","label","tooltip","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 { TimeUnitSwitchProps } from './types';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';\n\nconst TimeUnitSelect = ({\n  selected, options, callback, labelCallback,\n}: TimeUnitSwitchProps) => {\n  const selectOptions = options\n    .map(({ value: id, label, tooltip }) => ({\n      id,\n      label: labelCallback ? labelCallback(tooltip || label) : tooltip || 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;AAIlD,MAAMC,cAAc,GAAGC,IAAA,IAEI;EAAA,IAFH;IACtBC,QAAQ;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EACV,CAAC,GAAAJ,IAAA;EACpB,MAAMK,aAAa,GAAGH,OAAO,CAC1BI,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,KAAK,EAAEC,EAAE;MAAEC,KAAK;MAAEC;IAAQ,CAAC,GAAAJ,KAAA;IAAA,OAAM;MACvCE,EAAE;MACFC,KAAK,EAAEN,aAAa,GAAGA,aAAa,CAACO,OAAO,IAAID,KAAK,CAAC,GAAGC,OAAO,IAAID;IACtE,CAAC;EAAA,CAAC,CAAC;EACL,MAAM,CAAC;IAAEA,KAAK,EAAEE;EAAc,CAAC,CAAC,GAAGP,aAAa,CAACQ,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEL;IAAG,CAAC,GAAAK,KAAA;IAAA,OAAKL,EAAE,KAAKR,QAAQ;EAAA,EAAC;EAEpF,OACEJ,KAAA,CAAAkB,aAAA;IAAK,eAAY,kBAAkB;IAACC,SAAS,EAAC;EAAmB,GAC/DnB,KAAA,CAAAkB,aAAA,CAACjB,MAAM;IACLI,OAAO,EAAEG,aAAc;IACvBY,cAAc,EAAE;MAAER,EAAE,EAAER,QAAQ;MAAES,KAAK,EAAEE;IAAc,CAAE;IACvDM,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEV;MAAG,CAAC,GAAAU,KAAA;MAAA,OAAKhB,QAAQ,CAACM,EAAkC,CAAC;IAAA;EAAC,CAC7E,CACE,CAAC;AAEV,CAAC;AAED,SAASV,cAAc"}

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

@@ -32,7 +32,8 @@ const TimeUnitSwitch = _ref => {
   })) : React.createElement(TimeUnitSelect, {
     selected: selected,
     callback: callback,
-    options: options
+    options: options,
+    labelCallback: labelCallback
   }));
 };
 export { TimeUnitSwitch };

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

@@ -1 +1 @@
-{"version":3,"file":"TimeUnitSwitch.js","names":["React","Button","ButtonSize","ButtonVariant","useMediaQuery","CURRENCY_POWER_BALANCE_TOOLTIP_ID","TimeUnitSelect","TimeUnitSwitch","_ref","selected","options","callback","labelCallback","isDesktop","handleButtonClick","e","currentTarget","value","createElement","Fragment","className","map","item","tooltip","label","key","size","full","variant","primary","secondary","onClick"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSwitch.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, ButtonSize, ButtonVariant } from '@oanda/labs-widget-common';\nimport { useMediaQuery } from 'usehooks-ts';\nimport { TimeUnitSwitchProps } from './types';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';\nimport { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from '../../constants';\nimport { TimeUnitSelect } from './TimeUnitSelect';\n\nconst TimeUnitSwitch = ({\n  selected, options, callback, labelCallback,\n}: TimeUnitSwitchProps) => {\n  const isDesktop = useMediaQuery('(min-width: 768px)');\n\n  const handleButtonClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    callback(e.currentTarget.value as CurrencyPowerBalanceTimeUnit);\n  };\n\n  return (\n    <>\n      {isDesktop\n        ? (\n          <div data-testid=\"time-unit-switch\" className=\"lw-mb-6 lw-flex lw-gap-1 lw-self-end\">\n            {options.map((item) => {\n              const tooltip = labelCallback && item.tooltip\n                ? labelCallback(item.tooltip)\n                : item.tooltip;\n              const label = labelCallback ? labelCallback(item.label) : item.label;\n\n              return (\n                <Button\n                  key={item.value}\n                  size={ButtonSize.full}\n                  variant={selected === item.value\n                    ? ButtonVariant.primary\n                    : ButtonVariant.secondary}\n                  onClick={handleButtonClick}\n                  value={item.value}\n                  data-tooltip-id={CURRENCY_POWER_BALANCE_TOOLTIP_ID}\n                  data-tooltip-content={tooltip}\n                >\n                  {label}\n                </Button>\n              );\n            })}\n          </div>\n        )\n        : (\n          <TimeUnitSelect\n            selected={selected}\n            callback={callback}\n            options={options}\n          />\n        )}\n    </>\n  );\n};\n\nexport { TimeUnitSwitch };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,2BAA2B;AAC7E,SAASC,aAAa,QAAQ,aAAa;AAG3C,SAASC,iCAAiC,QAAQ,iBAAiB;AACnE,SAASC,cAAc,QAAQ,kBAAkB;AAEjD,MAAMC,cAAc,GAAGC,IAAA,IAEI;EAAA,IAFH;IACtBC,QAAQ;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EACV,CAAC,GAAAJ,IAAA;EACpB,MAAMK,SAAS,GAAGT,aAAa,CAAC,oBAAoB,CAAC;EAErD,MAAMU,iBAAiB,GAAIC,CAA0C,IAAK;IACxEJ,QAAQ,CAACI,CAAC,CAACC,aAAa,CAACC,KAAqC,CAAC;EACjE,CAAC;EAED,OACEjB,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAmB,QAAA,QACGN,SAAS,GAENb,KAAA,CAAAkB,aAAA;IAAK,eAAY,kBAAkB;IAACE,SAAS,EAAC;EAAsC,GACjFV,OAAO,CAACW,GAAG,CAAEC,IAAI,IAAK;IACrB,MAAMC,OAAO,GAAGX,aAAa,IAAIU,IAAI,CAACC,OAAO,GACzCX,aAAa,CAACU,IAAI,CAACC,OAAO,CAAC,GAC3BD,IAAI,CAACC,OAAO;IAChB,MAAMC,KAAK,GAAGZ,aAAa,GAAGA,aAAa,CAACU,IAAI,CAACE,KAAK,CAAC,GAAGF,IAAI,CAACE,KAAK;IAEpE,OACExB,KAAA,CAAAkB,aAAA,CAACjB,MAAM;MACLwB,GAAG,EAAEH,IAAI,CAACL,KAAM;MAChBS,IAAI,EAAExB,UAAU,CAACyB,IAAK;MACtBC,OAAO,EAAEnB,QAAQ,KAAKa,IAAI,CAACL,KAAK,GAC5Bd,aAAa,CAAC0B,OAAO,GACrB1B,aAAa,CAAC2B,SAAU;MAC5BC,OAAO,EAAEjB,iBAAkB;MAC3BG,KAAK,EAAEK,IAAI,CAACL,KAAM;MAClB,mBAAiBZ,iCAAkC;MACnD,wBAAsBkB;IAAQ,GAE7BC,KACK,CAAC;EAEb,CAAC,CACE,CAAC,GAGNxB,KAAA,CAAAkB,aAAA,CAACZ,cAAc;IACbG,QAAQ,EAAEA,QAAS;IACnBE,QAAQ,EAAEA,QAAS;IACnBD,OAAO,EAAEA;EAAQ,CAClB,CAEL,CAAC;AAEP,CAAC;AAED,SAASH,cAAc"}
+{"version":3,"file":"TimeUnitSwitch.js","names":["React","Button","ButtonSize","ButtonVariant","useMediaQuery","CURRENCY_POWER_BALANCE_TOOLTIP_ID","TimeUnitSelect","TimeUnitSwitch","_ref","selected","options","callback","labelCallback","isDesktop","handleButtonClick","e","currentTarget","value","createElement","Fragment","className","map","item","tooltip","label","key","size","full","variant","primary","secondary","onClick"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSwitch.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, ButtonSize, ButtonVariant } from '@oanda/labs-widget-common';\nimport { useMediaQuery } from 'usehooks-ts';\nimport { TimeUnitSwitchProps } from './types';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';\nimport { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from '../../constants';\nimport { TimeUnitSelect } from './TimeUnitSelect';\n\nconst TimeUnitSwitch = ({\n  selected, options, callback, labelCallback,\n}: TimeUnitSwitchProps) => {\n  const isDesktop = useMediaQuery('(min-width: 768px)');\n\n  const handleButtonClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    callback(e.currentTarget.value as CurrencyPowerBalanceTimeUnit);\n  };\n\n  return (\n    <>\n      {isDesktop\n        ? (\n          <div data-testid=\"time-unit-switch\" className=\"lw-mb-6 lw-flex lw-gap-1 lw-self-end\">\n            {options.map((item) => {\n              const tooltip = labelCallback && item.tooltip\n                ? labelCallback(item.tooltip)\n                : item.tooltip;\n              const label = labelCallback ? labelCallback(item.label) : item.label;\n\n              return (\n                <Button\n                  key={item.value}\n                  size={ButtonSize.full}\n                  variant={selected === item.value\n                    ? ButtonVariant.primary\n                    : ButtonVariant.secondary}\n                  onClick={handleButtonClick}\n                  value={item.value}\n                  data-tooltip-id={CURRENCY_POWER_BALANCE_TOOLTIP_ID}\n                  data-tooltip-content={tooltip}\n                >\n                  {label}\n                </Button>\n              );\n            })}\n          </div>\n        )\n        : (\n          <TimeUnitSelect\n            selected={selected}\n            callback={callback}\n            options={options}\n            labelCallback={labelCallback}\n          />\n        )}\n    </>\n  );\n};\n\nexport { TimeUnitSwitch };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,2BAA2B;AAC7E,SAASC,aAAa,QAAQ,aAAa;AAG3C,SAASC,iCAAiC,QAAQ,iBAAiB;AACnE,SAASC,cAAc,QAAQ,kBAAkB;AAEjD,MAAMC,cAAc,GAAGC,IAAA,IAEI;EAAA,IAFH;IACtBC,QAAQ;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EACV,CAAC,GAAAJ,IAAA;EACpB,MAAMK,SAAS,GAAGT,aAAa,CAAC,oBAAoB,CAAC;EAErD,MAAMU,iBAAiB,GAAIC,CAA0C,IAAK;IACxEJ,QAAQ,CAACI,CAAC,CAACC,aAAa,CAACC,KAAqC,CAAC;EACjE,CAAC;EAED,OACEjB,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAmB,QAAA,QACGN,SAAS,GAENb,KAAA,CAAAkB,aAAA;IAAK,eAAY,kBAAkB;IAACE,SAAS,EAAC;EAAsC,GACjFV,OAAO,CAACW,GAAG,CAAEC,IAAI,IAAK;IACrB,MAAMC,OAAO,GAAGX,aAAa,IAAIU,IAAI,CAACC,OAAO,GACzCX,aAAa,CAACU,IAAI,CAACC,OAAO,CAAC,GAC3BD,IAAI,CAACC,OAAO;IAChB,MAAMC,KAAK,GAAGZ,aAAa,GAAGA,aAAa,CAACU,IAAI,CAACE,KAAK,CAAC,GAAGF,IAAI,CAACE,KAAK;IAEpE,OACExB,KAAA,CAAAkB,aAAA,CAACjB,MAAM;MACLwB,GAAG,EAAEH,IAAI,CAACL,KAAM;MAChBS,IAAI,EAAExB,UAAU,CAACyB,IAAK;MACtBC,OAAO,EAAEnB,QAAQ,KAAKa,IAAI,CAACL,KAAK,GAC5Bd,aAAa,CAAC0B,OAAO,GACrB1B,aAAa,CAAC2B,SAAU;MAC5BC,OAAO,EAAEjB,iBAAkB;MAC3BG,KAAK,EAAEK,IAAI,CAACL,KAAM;MAClB,mBAAiBZ,iCAAkC;MACnD,wBAAsBkB;IAAQ,GAE7BC,KACK,CAAC;EAEb,CAAC,CACE,CAAC,GAGNxB,KAAA,CAAAkB,aAAA,CAACZ,cAAc;IACbG,QAAQ,EAAEA,QAAS;IACnBE,QAAQ,EAAEA,QAAS;IACnBD,OAAO,EAAEA,OAAQ;IACjBE,aAAa,EAAEA;EAAc,CAC9B,CAEL,CAAC;AAEP,CAAC;AAED,SAASL,cAAc"}

package/dist/module/CurrencyPowerBalanceWidget/config.js

@@ -14,7 +14,7 @@ const timeUnitConfig = [{
 }, {
   value: CurrencyPowerBalanceTimeUnit.H24,
   label: '24h',
-  tooltip: '24_months'
+  tooltip: '24_hours'
 }, {
   value: CurrencyPowerBalanceTimeUnit.H8,
   label: '8h',
@@ -25,10 +25,10 @@ const timeUnitConfig = [{
   tooltip: '4_hours'
 }, {
   value: CurrencyPowerBalanceTimeUnit.PreviousDay,
-  label: 'Previous Business Day'
+  label: 'previous_business_day'
 }, {
   value: CurrencyPowerBalanceTimeUnit.CurrentDay,
-  label: 'Current Business Day'
+  label: 'current_business_day'
 }];
 export { timeUnitConfig };
 //# sourceMappingURL=config.js.map

package/dist/module/CurrencyPowerBalanceWidget/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["CurrencyPowerBalanceTimeUnit","timeUnitConfig","value","M3","label","tooltip","M1","W1","H24","H8","H4","PreviousDay","CurrentDay"],"sources":["../../../src/CurrencyPowerBalanceWidget/config.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nconst timeUnitConfig = [\n  {\n    value: CurrencyPowerBalanceTimeUnit.M3,\n    label: '3m',\n    tooltip: '3_months',\n  },\n  {\n    value: CurrencyPowerBalanceTimeUnit.M1,\n    label: '1m',\n    tooltip: '1_month',\n  },\n  {\n    value: CurrencyPowerBalanceTimeUnit.W1,\n    label: '1w',\n    tooltip: '1_week',\n  },\n  {\n    value: CurrencyPowerBalanceTimeUnit.H24,\n    label: '24h',\n    tooltip: '24_months',\n  },\n  { value: CurrencyPowerBalanceTimeUnit.H8, label: '8h', tooltip: '8_hours' },\n  { value: CurrencyPowerBalanceTimeUnit.H4, label: '4h', tooltip: '4_hours' },\n  { value: CurrencyPowerBalanceTimeUnit.PreviousDay, label: 'Previous Business Day' },\n  { value: CurrencyPowerBalanceTimeUnit.CurrentDay, label: 'Current Business Day' },\n];\n\nexport { timeUnitConfig };\n"],"mappings":"AAAA,SAASA,4BAA4B,QAAQ,sBAAsB;AAEnE,MAAMC,cAAc,GAAG,CACrB;EACEC,KAAK,EAAEF,4BAA4B,CAACG,EAAE;EACtCC,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE;AACX,CAAC,EACD;EACEH,KAAK,EAAEF,4BAA4B,CAACM,EAAE;EACtCF,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE;AACX,CAAC,EACD;EACEH,KAAK,EAAEF,4BAA4B,CAACO,EAAE;EACtCH,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE;AACX,CAAC,EACD;EACEH,KAAK,EAAEF,4BAA4B,CAACQ,GAAG;EACvCJ,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE;AACX,CAAC,EACD;EAAEH,KAAK,EAAEF,4BAA4B,CAACS,EAAE;EAAEL,KAAK,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAU,CAAC,EAC3E;EAAEH,KAAK,EAAEF,4BAA4B,CAACU,EAAE;EAAEN,KAAK,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAU,CAAC,EAC3E;EAAEH,KAAK,EAAEF,4BAA4B,CAACW,WAAW;EAAEP,KAAK,EAAE;AAAwB,CAAC,EACnF;EAAEF,KAAK,EAAEF,4BAA4B,CAACY,UAAU;EAAER,KAAK,EAAE;AAAuB,CAAC,CAClF;AAED,SAASH,cAAc"}
+{"version":3,"file":"config.js","names":["CurrencyPowerBalanceTimeUnit","timeUnitConfig","value","M3","label","tooltip","M1","W1","H24","H8","H4","PreviousDay","CurrentDay"],"sources":["../../../src/CurrencyPowerBalanceWidget/config.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nconst timeUnitConfig = [\n  {\n    value: CurrencyPowerBalanceTimeUnit.M3,\n    label: '3m',\n    tooltip: '3_months',\n  },\n  {\n    value: CurrencyPowerBalanceTimeUnit.M1,\n    label: '1m',\n    tooltip: '1_month',\n  },\n  {\n    value: CurrencyPowerBalanceTimeUnit.W1,\n    label: '1w',\n    tooltip: '1_week',\n  },\n  {\n    value: CurrencyPowerBalanceTimeUnit.H24,\n    label: '24h',\n    tooltip: '24_hours',\n  },\n  { value: CurrencyPowerBalanceTimeUnit.H8, label: '8h', tooltip: '8_hours' },\n  { value: CurrencyPowerBalanceTimeUnit.H4, label: '4h', tooltip: '4_hours' },\n  { value: CurrencyPowerBalanceTimeUnit.PreviousDay, label: 'previous_business_day' },\n  { value: CurrencyPowerBalanceTimeUnit.CurrentDay, label: 'current_business_day' },\n];\n\nexport { timeUnitConfig };\n"],"mappings":"AAAA,SAASA,4BAA4B,QAAQ,sBAAsB;AAEnE,MAAMC,cAAc,GAAG,CACrB;EACEC,KAAK,EAAEF,4BAA4B,CAACG,EAAE;EACtCC,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE;AACX,CAAC,EACD;EACEH,KAAK,EAAEF,4BAA4B,CAACM,EAAE;EACtCF,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE;AACX,CAAC,EACD;EACEH,KAAK,EAAEF,4BAA4B,CAACO,EAAE;EACtCH,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE;AACX,CAAC,EACD;EACEH,KAAK,EAAEF,4BAA4B,CAACQ,GAAG;EACvCJ,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE;AACX,CAAC,EACD;EAAEH,KAAK,EAAEF,4BAA4B,CAACS,EAAE;EAAEL,KAAK,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAU,CAAC,EAC3E;EAAEH,KAAK,EAAEF,4BAA4B,CAACU,EAAE;EAAEN,KAAK,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAU,CAAC,EAC3E;EAAEH,KAAK,EAAEF,4BAA4B,CAACW,WAAW;EAAEP,KAAK,EAAE;AAAwB,CAAC,EACnF;EAAEF,KAAK,EAAEF,4BAA4B,CAACY,UAAU;EAAER,KAAK,EAAE;AAAuB,CAAC,CAClF;AAED,SAASH,cAAc"}

package/dist/module/CurrencyPowerBalanceWidget/render.js

@@ -3,7 +3,8 @@ import { render } from 'react-dom';
 import { CurrencyPowerBalance } from './CurrencyPowerBalance';
 const {
   graphqlUrl: configGraphQl,
-  renderElementId: configRenderElementId
+  renderElementId: configRenderElementId,
+  locale: configLocale
 } = window.currencyPowerBalanceWidgetConfig || {};
 const {
   graphqlUrl
@@ -11,14 +12,20 @@ const {
 const currencyPowerBalanceParamsElements = document.querySelectorAll('div[data-currency-power-balance-params]');
 if (currencyPowerBalanceParamsElements.length > 0) {
   currencyPowerBalanceParamsElements.forEach(element => {
+    const params = element.getAttribute('data-currency-power-balance-params');
     const mode = element.getAttribute('data-mode');
+    const {
+      locale
+    } = JSON.parse(params);
     render(React.createElement(CurrencyPowerBalance, {
       graphqlUrl: graphqlUrl,
+      locale: locale,
       theme: mode
     }), element);
   });
 } else {
   render(React.createElement(CurrencyPowerBalance, {
+    locale: configLocale,
     graphqlUrl: configGraphQl
   }), document.getElementById(configRenderElementId));
 }

package/dist/module/CurrencyPowerBalanceWidget/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["React","render","CurrencyPowerBalance","graphqlUrl","configGraphQl","renderElementId","configRenderElementId","window","currencyPowerBalanceWidgetConfig","widgetsConfig","currencyPowerBalanceParamsElements","document","querySelectorAll","length","forEach","element","mode","getAttribute","createElement","theme","getElementById"],"sources":["../../../src/CurrencyPowerBalanceWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { CurrencyPowerBalance } from './CurrencyPowerBalance';\n\nconst {\n  graphqlUrl: configGraphQl,\n  renderElementId: configRenderElementId,\n} = window.currencyPowerBalanceWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst currencyPowerBalanceParamsElements = document.querySelectorAll('div[data-currency-power-balance-params]');\n\nif (currencyPowerBalanceParamsElements.length > 0) {\n  currencyPowerBalanceParamsElements.forEach((element) => {\n    const mode = element.getAttribute('data-mode');\n\n    render(\n      <CurrencyPowerBalance\n        graphqlUrl={graphqlUrl}\n        theme={mode as Theme}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <CurrencyPowerBalance\n      graphqlUrl={configGraphQl}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,eAAe,EAAEC;AACnB,CAAC,GAAGC,MAAM,CAACC,gCAAgC,IAAI,CAAC,CAAC;AAEjD,MAAM;EACJL;AACF,CAAC,GAAGI,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,kCAAkC,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,yCAAyC,CAAC;AAE/G,IAAIF,kCAAkC,CAACG,MAAM,GAAG,CAAC,EAAE;EACjDH,kCAAkC,CAACI,OAAO,CAAEC,OAAO,IAAK;IACtD,MAAMC,IAAI,GAAGD,OAAO,CAACE,YAAY,CAAC,WAAW,CAAC;IAE9ChB,MAAM,CACJD,KAAA,CAAAkB,aAAA,CAAChB,oBAAoB;MACnBC,UAAU,EAAEA,UAAW;MACvBgB,KAAK,EAAEH;IAAc,CACtB,CAAC,EACFD,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACLd,MAAM,CACJD,KAAA,CAAAkB,aAAA,CAAChB,oBAAoB;IACnBC,UAAU,EAAEC;EAAc,CAC3B,CAAC,EACFO,QAAQ,CAACS,cAAc,CAACd,qBAAqB,CAC/C,CAAC;AACH"}
+{"version":3,"file":"render.js","names":["React","render","CurrencyPowerBalance","graphqlUrl","configGraphQl","renderElementId","configRenderElementId","locale","configLocale","window","currencyPowerBalanceWidgetConfig","widgetsConfig","currencyPowerBalanceParamsElements","document","querySelectorAll","length","forEach","element","params","getAttribute","mode","JSON","parse","createElement","theme","getElementById"],"sources":["../../../src/CurrencyPowerBalanceWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { CurrencyPowerBalance } from './CurrencyPowerBalance';\n\nconst {\n  graphqlUrl: configGraphQl,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.currencyPowerBalanceWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst currencyPowerBalanceParamsElements = document.querySelectorAll('div[data-currency-power-balance-params]');\n\nif (currencyPowerBalanceParamsElements.length > 0) {\n  currencyPowerBalanceParamsElements.forEach((element) => {\n    const params = element.getAttribute('data-currency-power-balance-params');\n    const mode = element.getAttribute('data-mode');\n    const { locale } = JSON.parse(params as string);\n\n    render(\n      <CurrencyPowerBalance\n        graphqlUrl={graphqlUrl}\n        locale={locale}\n        theme={mode as Theme}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <CurrencyPowerBalance\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,gCAAgC,IAAI,CAAC,CAAC;AAEjD,MAAM;EACJP;AACF,CAAC,GAAGM,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,kCAAkC,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,yCAAyC,CAAC;AAE/G,IAAIF,kCAAkC,CAACG,MAAM,GAAG,CAAC,EAAE;EACjDH,kCAAkC,CAACI,OAAO,CAAEC,OAAO,IAAK;IACtD,MAAMC,MAAM,GAAGD,OAAO,CAACE,YAAY,CAAC,oCAAoC,CAAC;IACzE,MAAMC,IAAI,GAAGH,OAAO,CAACE,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEZ;IAAO,CAAC,GAAGc,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE/CjB,MAAM,CACJD,KAAA,CAAAuB,aAAA,CAACrB,oBAAoB;MACnBC,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;MACfiB,KAAK,EAAEJ;IAAc,CACtB,CAAC,EACFH,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACLhB,MAAM,CACJD,KAAA,CAAAuB,aAAA,CAACrB,oBAAoB;IACnBK,MAAM,EAAEC,YAAa;IACrBL,UAAU,EAAEC;EAAc,CAC3B,CAAC,EACFS,QAAQ,CAACY,cAAc,CAACnB,qBAAqB,CAC/C,CAAC;AACH"}

package/dist/module/CurrencyPowerBalanceWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/CurrencyPowerBalanceWidget/types.ts"],"sourcesContent":["import { Theme } from '@oanda/labs-widget-common';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nexport interface CurrencyPowerBalanceConfig {\n  graphqlUrl: string;\n  theme?: Theme;\n}\n\nexport interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {\n  renderElementId: string;\n}\n\nexport interface ChartWithDataProps {\n  timeUnit: CurrencyPowerBalanceTimeUnit;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/CurrencyPowerBalanceWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\n\nexport interface CurrencyPowerBalanceConfig {\n  graphqlUrl: string;\n  locale: Locale;\n  theme?: Theme;\n}\n\nexport interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {\n  renderElementId: string;\n  locale: Locale;\n}\n\nexport interface ChartWithDataProps {\n  timeUnit: CurrencyPowerBalanceTimeUnit;\n}\n"],"mappings":""}

package/dist/module/translations/index.js

@@ -0,0 +1,12 @@
+import { Locale } from '@oanda/mono-i18n';
+import en from './sources/en.json';
+import zhTW from './sources/zh_TW.json';
+export const translations = {
+  [Locale.en]: {
+    translation: en
+  },
+  [Locale.zhTW]: {
+    translation: zhTW
+  }
+};
+//# sourceMappingURL=index.js.map

package/dist/module/translations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Locale","en","zhTW","translations","translation"],"sources":["../../../src/translations/index.ts"],"sourcesContent":["import { Locale, Translations } from '@oanda/mono-i18n';\n\nimport en from './sources/en.json';\nimport zhTW from './sources/zh_TW.json';\n\nimport { defaultTranslations } from './translations';\n\nexport type TranslationKey = keyof typeof defaultTranslations;\n\nexport const translations: Translations = {\n  [Locale.en]: { translation: en },\n  [Locale.zhTW]: { translation: zhTW },\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAsB,kBAAkB;AAEvD,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,IAAI,MAAM,sBAAsB;AAMvC,OAAO,MAAMC,YAA0B,GAAG;EACxC,CAACH,MAAM,CAACC,EAAE,GAAG;IAAEG,WAAW,EAAEH;EAAG,CAAC;EAChC,CAACD,MAAM,CAACE,IAAI,GAAG;IAAEE,WAAW,EAAEF;EAAK;AACrC,CAAC"}

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

@@ -0,0 +1,18 @@
+{
+  "1_month": "1 month",
+  "1_week": "1 week",
+  "1m": "1M",
+  "1w": "1W",
+  "24_hours": "24 hours",
+  "24h": "24H",
+  "3_months": "3 months",
+  "3m": "3M",
+  "4_hours": "4 hours",
+  "4h": "4H",
+  "8_hours": "8 hours",
+  "8h": "8H",
+  "current_business_day": "Current Business Day",
+  "data_unavailable": "Data unavailable",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
+  "previous_business_day": "Previous Business Day"
+}

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

@@ -0,0 +1,18 @@
+{
+  "1_month": "1 個月",
+  "1_week": "1星期",
+  "1m": "1M",
+  "1w": "1W",
+  "24_hours": "24小時",
+  "24h": "24H",
+  "3_months": "3 個月",
+  "3m": "3M",
+  "4_hours": "4小時",
+  "4h": "4H",
+  "8_hours": "8小時",
+  "8h": "8H",
+  "current_business_day": "目前營業日",
+  "data_unavailable": "沒有數據",
+  "pagination_entries_range": "{{itemCount}}个挂单中的{{firstItemOnPage}}-{{lastItemOnPage}}",
+  "previous_business_day": "前一營業日"
+}

package/dist/module/translations/translations.js

@@ -0,0 +1,19 @@
+export const defaultTranslations = {
+  '1_month': '1 month',
+  '1_week': '1 week',
+  '1m': '1M',
+  '1w': '1W',
+  '24_hours': '24 hours',
+  '24h': '24H',
+  '3_months': '3 months',
+  '3m': '3M',
+  '4_hours': '4 hours',
+  '4h': '4H',
+  '8_hours': '8 hours',
+  '8h': '8H',
+  current_business_day: 'Current Business Day',
+  data_unavailable: 'Data unavailable',
+  pagination_entries_range: '{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries',
+  previous_business_day: 'Previous Business Day'
+};
+//# sourceMappingURL=translations.js.map

package/dist/module/translations/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","names":["defaultTranslations","current_business_day","data_unavailable","pagination_entries_range","previous_business_day"],"sources":["../../../src/translations/translations.ts"],"sourcesContent":["export const defaultTranslations = {\n  '1_month': '1 month',\n  '1_week': '1 week',\n  '1m': '1M',\n  '1w': '1W',\n  '24_hours': '24 hours',\n  '24h': '24H',\n  '3_months': '3 months',\n  '3m': '3M',\n  '4_hours': '4 hours',\n  '4h': '4H',\n  '8_hours': '8 hours',\n  '8h': '8H',\n  current_business_day: 'Current Business Day',\n  data_unavailable: 'Data unavailable',\n  pagination_entries_range: '{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries',\n  previous_business_day: 'Previous Business Day',\n};\n"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,GAAG;EACjC,SAAS,EAAE,SAAS;EACpB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,IAAI;EACV,IAAI,EAAE,IAAI;EACV,UAAU,EAAE,UAAU;EACtB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,UAAU;EACtB,IAAI,EAAE,IAAI;EACV,SAAS,EAAE,SAAS;EACpB,IAAI,EAAE,IAAI;EACV,SAAS,EAAE,SAAS;EACpB,IAAI,EAAE,IAAI;EACVC,oBAAoB,EAAE,sBAAsB;EAC5CC,gBAAgB,EAAE,kBAAkB;EACpCC,wBAAwB,EAAE,iEAAiE;EAC3FC,qBAAqB,EAAE;AACzB,CAAC"}

package/dist/types/CurrencyPowerBalanceWidget/CurrencyPowerBalance.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CurrencyPowerBalanceConfig } from './types';
-declare const CurrencyPowerBalance: ({ graphqlUrl, theme, }: CurrencyPowerBalanceConfig) => JSX.Element;
+declare const CurrencyPowerBalance: ({ graphqlUrl, theme, locale, }: CurrencyPowerBalanceConfig) => JSX.Element;
 export { CurrencyPowerBalance };

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

@@ -21,6 +21,7 @@ declare const getOption: (values: CurrencyPowerBalance[], timeUnit: CurrencyPowe
             };
         };
         formatter: (values: import("./types").TooltipFormatterParams[]) => string;
+        extraCssText: string;
     };
     xAxis: {
         type: string;

package/dist/types/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TimeUnitSwitchProps } from './types';
-declare const TimeUnitSelect: ({ selected, options, callback, }: TimeUnitSwitchProps) => JSX.Element;
+declare const TimeUnitSelect: ({ selected, options, callback, labelCallback, }: TimeUnitSwitchProps) => JSX.Element;
 export { TimeUnitSelect };

package/dist/types/CurrencyPowerBalanceWidget/types.d.ts

@@ -1,11 +1,14 @@
+import { Locale } from '@oanda/mono-i18n';
 import { Theme } from '@oanda/labs-widget-common';
 import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
 export interface CurrencyPowerBalanceConfig {
     graphqlUrl: string;
+    locale: Locale;
     theme?: Theme;
 }
 export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
     renderElementId: string;
+    locale: Locale;
 }
 export interface ChartWithDataProps {
     timeUnit: CurrencyPowerBalanceTimeUnit;

package/dist/types/translations/index.d.ts

@@ -0,0 +1,4 @@
+import { Translations } from '@oanda/mono-i18n';
+import { defaultTranslations } from './translations';
+export type TranslationKey = keyof typeof defaultTranslations;
+export declare const translations: Translations;

package/dist/types/translations/translations.d.ts

@@ -0,0 +1,18 @@
+export declare const defaultTranslations: {
+    '1_month': string;
+    '1_week': string;
+    '1m': string;
+    '1w': string;
+    '24_hours': string;
+    '24h': string;
+    '3_months': string;
+    '3m': string;
+    '4_hours': string;
+    '4h': string;
+    '8_hours': string;
+    '8h': string;
+    current_business_day: string;
+    data_unavailable: string;
+    pagination_entries_range: string;
+    previous_business_day: string;
+};

package/lokalise.config.json

@@ -0,0 +1,18 @@
+{
+  "projectId": "19607517615e88022ba782.45168463",
+  "outputDir": "src/translations/sources",
+  "esModuleTranslations": "src/translations/translations.ts",
+  "messagesFormat": "esModule",
+  "esModuleConstName": "defaultTranslations",
+  "includeEmptyTranslations": true,
+  "downloadOptions": {
+    "format": "json",
+    "add_newline_eof": true,
+    "placeholder_format": "i18n",
+    "indentation": "2sp",
+    "plural_format": "i18next",
+    "export_empty_as": "skip",
+    "include_tags": ["common_widgets", "currency_balance_widget"],
+    "filter_langs": ["en", "zh_TW"]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-power-balance-widget",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Labs Currency Power Balance Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,8 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.63",
+    "@oanda/labs-widget-common": "^1.0.65",
+    "@oanda/mono-i18n": "9.0.0",
     "echarts": "5.4.3",
     "echarts-for-react": "3.0.2",
     "graphql": "16.7.1",
@@ -23,5 +24,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "f09946395428aaec61ae575a8c762be67e3f05d5"
+  "gitHead": "4be4ccea8e93a40760854205e53b3fbafff28d72"
 }

package/src/CurrencyPowerBalanceWidget/ChartWithData.tsx

@@ -19,6 +19,7 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
     variables: {
       timeUnit,
     },
+    fetchPolicy: 'cache-and-network',
   });
 
   const showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;

package/src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import { ThemeProvider } from '@oanda/labs-widget-common';
+import { ThemeProvider, getLocale } from '@oanda/labs-widget-common';
+import { LocaleProvider } from '@oanda/mono-i18n';
 import { Main } from './Main';
 import { CurrencyPowerBalanceConfig } from './types';
+import { translations } from '../translations';
 
 const CurrencyPowerBalance = ({
-  graphqlUrl, theme,
+  graphqlUrl, theme, locale,
 }: CurrencyPowerBalanceConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -14,9 +16,11 @@ const CurrencyPowerBalance = ({
 
   return (
     <ThemeProvider theme={theme}>
-      <ApolloProvider client={client}>
-        <Main />
-      </ApolloProvider>
+      <LocaleProvider locale={getLocale(locale)} translations={translations}>
+        <ApolloProvider client={client}>
+          <Main />
+        </ApolloProvider>
+      </LocaleProvider>
     </ThemeProvider>
   );
 };

package/src/CurrencyPowerBalanceWidget/Tool.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useLocale } from '@oanda/mono-i18n';
 import { timeUnitConfig } from './config';
 import { TimeUnitSwitch } from './components/TimeUnitSwitch';
 import { ChartWithData } from './ChartWithData';
@@ -6,16 +7,18 @@ import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
 
 const Tool = () => {
   const [selectedTimeUnit, setSelectedTimeUnit] = useState(CurrencyPowerBalanceTimeUnit.CurrentDay);
+  const { lang } = useLocale();
 
   return (
     <div
       data-testid="currency-power-balance-wrapper"
-      className="lw-flex lw-flex-col lw-overflow-hidden lw-text-sm lw-tracking-normal"
+      className="lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
     >
       <TimeUnitSwitch
         selected={selectedTimeUnit}
         callback={setSelectedTimeUnit}
         options={timeUnitConfig}
+        labelCallback={lang}
       />
       <ChartWithData
         timeUnit={selectedTimeUnit}

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

@@ -35,7 +35,7 @@ const tooltipFormatter = (values: TooltipFormatterParams[]) => {
     </div>`);
 
   return `<div style="display:flex; flex-direction:column;">
-    <p style="margin-bottom:5px;">${date}</p>
+    <span style="margin-bottom:5px;">${date}</span>
     ${row.join('\n')}
   </div>`;
 };

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

@@ -45,6 +45,7 @@ const getOption = (
         },
       },
       formatter: tooltipFormatter,
+      extraCssText: 'z-index: 1',
     },
     xAxis: {
       type: 'category',

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

@@ -4,10 +4,13 @@ import { TimeUnitSwitchProps } from './types';
 import { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
 
 const TimeUnitSelect = ({
-  selected, options, callback,
+  selected, options, callback, labelCallback,
 }: TimeUnitSwitchProps) => {
   const selectOptions = options
-    .map(({ value: id, label, tooltip }) => ({ id, label: tooltip || label }));
+    .map(({ value: id, label, tooltip }) => ({
+      id,
+      label: labelCallback ? labelCallback(tooltip || label) : tooltip || label,
+    }));
   const [{ label: selectedLabel }] = selectOptions.filter(({ id }) => id === selected);
 
   return (

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

@@ -49,6 +49,7 @@ const TimeUnitSwitch = ({
             selected={selected}
             callback={callback}
             options={options}
+            labelCallback={labelCallback}
           />
         )}
     </>

package/src/CurrencyPowerBalanceWidget/config.ts

@@ -19,12 +19,12 @@ const timeUnitConfig = [
   {
     value: CurrencyPowerBalanceTimeUnit.H24,
     label: '24h',
-    tooltip: '24_months',
+    tooltip: '24_hours',
   },
   { value: CurrencyPowerBalanceTimeUnit.H8, label: '8h', tooltip: '8_hours' },
   { value: CurrencyPowerBalanceTimeUnit.H4, label: '4h', tooltip: '4_hours' },
-  { value: CurrencyPowerBalanceTimeUnit.PreviousDay, label: 'Previous Business Day' },
-  { value: CurrencyPowerBalanceTimeUnit.CurrentDay, label: 'Current Business Day' },
+  { value: CurrencyPowerBalanceTimeUnit.PreviousDay, label: 'previous_business_day' },
+  { value: CurrencyPowerBalanceTimeUnit.CurrentDay, label: 'current_business_day' },
 ];
 
 export { timeUnitConfig };