@oanda/labs-currency-power-balance-widget 1.0.49 → 1.0.51

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","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","Object","keys","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 { intervalFormatter, 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 = Object.keys(COLOR_CONFIG).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        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,SAASC,iBAAiB,EAAEC,gBAAgB,EAAEC,mBAAmB,QAAQ,cAAc;AAGvF,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,GAAGC,MAAM,CAACC,IAAI,CAAC3B,YAAY,CAAC,CAACU,GAAG,CAAEE,QAAQ,KAAM;IAC9DE,IAAI,EAAEF,QAAQ;IACdM,SAAS,EAAE;MACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;EAEH,OAAO;IACLgB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNR,IAAI,EAAEI,UAAU;MAChBK,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;QACJhB,SAAS,EAAE;UACTD,KAAK,EAAEX,MAAM,GAAGP,yBAAyB,CAACoC,IAAI,GAAGpC,yBAAyB,CAACqC;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEpC,gBAAgB;MAC3BqC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACL1B,IAAI,EAAE,UAAU;MAChB2B,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,EAAEjD,iBAAiB,CAACO,UAAU,CAAC,CAAC,CAAC,CAACY,IAAI,CAAC+B,MAAM,CAAC;QACtDb,SAAS,EAAGc,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;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,EAAEnD;EACV,CAAC;AACH,CAAC;AAED,SAASJ,SAAS","ignoreList":[]}
+{"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":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/types.ts"],"sourcesContent":["import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';\n\nexport interface ChartProps {\n  values: CurrencyPowerBalance[];\n  timeUnit: CurrencyPowerBalanceTimeUnit;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/types.ts"],"sourcesContent":["import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';\n\nexport interface ChartProps {\n  values: CurrencyPowerBalance[];\n  timeUnit: CurrencyPowerBalanceTimeUnit;\n  currencies?: string[];\n}\n"],"mappings":"","ignoreList":[]}

package/dist/module/CurrencyPowerBalanceWidget/render.js

@@ -17,6 +17,8 @@ if (currencyPowerBalanceParamsElements.length > 0) {
     const params = element.getAttribute('data-currency-power-balance-params');
     const mode = element.getAttribute('data-mode');
     const {
+      timeUnit,
+      currencies,
       locale
     } = JSON.parse(params);
     const isParamError = validateToolParams({
@@ -32,7 +34,9 @@ if (currencyPowerBalanceParamsElements.length > 0) {
       graphqlUrl: graphqlUrl,
       locale: locale,
       theme: mode,
-      isParamError: isParamError
+      isParamError: isParamError,
+      timeUnit: timeUnit,
+      currencies: currencies
     }));
   });
 } else {

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

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["React","createRoot","validateToolParams","CurrencyPowerBalance","graphqlUrl","configGraphQl","renderElementId","configRenderElementId","locale","configLocale","window","currencyPowerBalanceWidgetConfig","widgetsConfig","currencyPowerBalanceParamsElements","document","querySelectorAll","length","forEach","element","root","params","getAttribute","mode","JSON","parse","isParamError","name","valueCheck","value","split","render","createElement","theme","container","getElementById"],"sources":["../../../src/CurrencyPowerBalanceWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { Theme, validateToolParams } 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 root = createRoot(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    const isParamError = validateToolParams({ locale, graphqlUrl }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',\n      }, {\n        name: 'graphqlUrl',\n      }]);\n    root.render(\n      <CurrencyPowerBalance\n        graphqlUrl={graphqlUrl}\n        locale={locale}\n        theme={mode as Theme}\n        isParamError={isParamError}\n      />,\n    );\n  });\n} else {\n  const container = document.getElementById(configRenderElementId);\n  const root = createRoot(container!);\n\n  root.render(\n    <CurrencyPowerBalance\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n    />,\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAAgBC,kBAAkB,QAAQ,2BAA2B;AACrE,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,IAAI,GAAGlB,UAAU,CAACiB,OAAO,CAAC;IAChC,MAAME,MAAM,GAAGF,OAAO,CAACG,YAAY,CAAC,oCAAoC,CAAC;IACzE,MAAMC,IAAI,GAAGJ,OAAO,CAACG,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEb;IAAO,CAAC,GAAGe,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE/C,MAAMK,YAAY,GAAGvB,kBAAkB,CAAC;MAAEM,MAAM;MAAEJ;IAAW,CAAC,EAAE,CAC9D;MACEsB,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAGC,KAAK,IAAKA,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAID,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK;IACjF,CAAC,EAAE;MACDH,IAAI,EAAE;IACR,CAAC,CAAC,CAAC;IACLP,IAAI,CAACW,MAAM,CACT9B,KAAA,CAAA+B,aAAA,CAAC5B,oBAAoB;MACnBC,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;MACfwB,KAAK,EAAEV,IAAc;MACrBG,YAAY,EAAEA;IAAa,CAC5B,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,MAAMQ,SAAS,GAAGnB,QAAQ,CAACoB,cAAc,CAAC3B,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAGlB,UAAU,CAACgC,SAAU,CAAC;EAEnCd,IAAI,CAACW,MAAM,CACT9B,KAAA,CAAA+B,aAAA,CAAC5B,oBAAoB;IACnBK,MAAM,EAAEC,YAAa;IACrBL,UAAU,EAAEC;EAAc,CAC3B,CACH,CAAC;AACH","ignoreList":[]}
+{"version":3,"file":"render.js","names":["React","createRoot","validateToolParams","CurrencyPowerBalance","graphqlUrl","configGraphQl","renderElementId","configRenderElementId","locale","configLocale","window","currencyPowerBalanceWidgetConfig","widgetsConfig","currencyPowerBalanceParamsElements","document","querySelectorAll","length","forEach","element","root","params","getAttribute","mode","timeUnit","currencies","JSON","parse","isParamError","name","valueCheck","value","split","render","createElement","theme","container","getElementById"],"sources":["../../../src/CurrencyPowerBalanceWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { Theme, validateToolParams } 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 root = createRoot(element);\n    const params = element.getAttribute('data-currency-power-balance-params');\n    const mode = element.getAttribute('data-mode');\n    const { timeUnit, currencies, locale } = JSON.parse(params as string);\n\n    const isParamError = validateToolParams({ locale, graphqlUrl }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',\n      }, {\n        name: 'graphqlUrl',\n      }]);\n    root.render(\n      <CurrencyPowerBalance\n        graphqlUrl={graphqlUrl}\n        locale={locale}\n        theme={mode as Theme}\n        isParamError={isParamError}\n        timeUnit={timeUnit}\n        currencies={currencies}\n      />,\n    );\n  });\n} else {\n  const container = document.getElementById(configRenderElementId);\n  const root = createRoot(container!);\n\n  root.render(\n    <CurrencyPowerBalance\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n    />,\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAAgBC,kBAAkB,QAAQ,2BAA2B;AACrE,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,IAAI,GAAGlB,UAAU,CAACiB,OAAO,CAAC;IAChC,MAAME,MAAM,GAAGF,OAAO,CAACG,YAAY,CAAC,oCAAoC,CAAC;IACzE,MAAMC,IAAI,GAAGJ,OAAO,CAACG,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEE,QAAQ;MAAEC,UAAU;MAAEhB;IAAO,CAAC,GAAGiB,IAAI,CAACC,KAAK,CAACN,MAAgB,CAAC;IAErE,MAAMO,YAAY,GAAGzB,kBAAkB,CAAC;MAAEM,MAAM;MAAEJ;IAAW,CAAC,EAAE,CAC9D;MACEwB,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAGC,KAAK,IAAKA,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAID,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK;IACjF,CAAC,EAAE;MACDH,IAAI,EAAE;IACR,CAAC,CAAC,CAAC;IACLT,IAAI,CAACa,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC9B,oBAAoB;MACnBC,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;MACf0B,KAAK,EAAEZ,IAAc;MACrBK,YAAY,EAAEA,YAAa;MAC3BJ,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA;IAAW,CACxB,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,MAAMW,SAAS,GAAGrB,QAAQ,CAACsB,cAAc,CAAC7B,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAGlB,UAAU,CAACkC,SAAU,CAAC;EAEnChB,IAAI,CAACa,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC9B,oBAAoB;IACnBK,MAAM,EAAEC,YAAa;IACrBL,UAAU,EAAEC;EAAc,CAC3B,CACH,CAAC;AACH","ignoreList":[]}

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

@@ -1 +1 @@
-{"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  isParamError?: boolean;\n}\n\nexport interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {\n  renderElementId: string;\n  locale: Locale;\n}\n\nexport interface ChartWithDataProps {\n  timeUnit: CurrencyPowerBalanceTimeUnit;\n}\n"],"mappings":"","ignoreList":[]}
+{"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  isParamError?: boolean;\n  timeUnit?: CurrencyPowerBalanceTimeUnit;\n  currencies?: string[];\n}\n\nexport interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {\n  renderElementId: string;\n  locale: Locale;\n}\n\nexport interface MainProps {\n  timeUnit?: CurrencyPowerBalanceTimeUnit;\n  currencies?: string[];\n}\n\nexport interface ChartWithDataProps {\n  timeUnit: CurrencyPowerBalanceTimeUnit;\n  currencies?: string[];\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ChartWithDataProps } from './types';
-declare const ChartWithData: ({ timeUnit }: ChartWithDataProps) => React.JSX.Element;
+declare const ChartWithData: ({ timeUnit, currencies }: ChartWithDataProps) => React.JSX.Element;
 export { ChartWithData };

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

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

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

@@ -1,3 +1,4 @@
 import React from 'react';
-declare const Main: () => React.JSX.Element;
+import { MainProps } from './types';
+declare const Main: ({ timeUnit, currencies }: MainProps) => React.JSX.Element;
 export { Main };

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ChartProps } from './types';
-declare const Chart: ({ values, timeUnit }: ChartProps) => React.JSX.Element;
+declare const Chart: ({ values, timeUnit, currencies }: ChartProps) => React.JSX.Element;
 export { Chart };

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

@@ -1,3 +1,4 @@
+import { CurrencyName } from '../../../../gql/types/graphql';
 declare const X_LABEL_SIZE = 90;
 declare const X_LABEL_SIZE_MOBILE = 110;
 declare const Y_LABEL_SIZE_MOBILE = 35;
@@ -9,9 +10,19 @@ 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 COLOR_CONFIG: Record<string, string>;
+declare const CURENCIES_ORDER: CurrencyName[];
+declare const COLOR_CONFIG: {
+    USD: string;
+    EUR: string;
+    GBP: string;
+    JPY: string;
+    CHF: string;
+    AUD: string;
+    CAD: string;
+    NZD: string;
+};
 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, };
+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, };

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

@@ -1,7 +1,13 @@
-import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
 import { TooltipFormatterParams } from './types';
 declare const isMonthWeek: (timeUnit: CurrencyPowerBalanceTimeUnit) => boolean;
 declare const xAxisLabelFormatter: (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => string;
 declare const intervalFormatter: (dataLength: number) => number;
 declare const tooltipFormatter: (values: TooltipFormatterParams[]) => string;
-export { isMonthWeek, tooltipFormatter, xAxisLabelFormatter, intervalFormatter, };
+declare const formatLegendData: (values: CurrencyPowerBalance[]) => {
+    name: import("../../../../gql/types/graphql").CurrencyName;
+    itemStyle: {
+        color: string;
+    };
+}[];
+export { isMonthWeek, tooltipFormatter, xAxisLabelFormatter, intervalFormatter, formatLegendData, };

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

@@ -1,9 +1,9 @@
 import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-declare const getOption: (values: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean) => {
+declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean) => {
     animation: boolean;
     legend: {
         data: {
-            name: string;
+            name: import("../../../../gql/types/graphql").CurrencyName;
             itemStyle: {
                 color: string;
             };

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

@@ -2,4 +2,5 @@ import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql
 export interface ChartProps {
     values: CurrencyPowerBalance[];
     timeUnit: CurrencyPowerBalanceTimeUnit;
+    currencies?: string[];
 }

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

@@ -6,11 +6,18 @@ export interface CurrencyPowerBalanceConfig {
     locale: Locale;
     theme?: Theme;
     isParamError?: boolean;
+    timeUnit?: CurrencyPowerBalanceTimeUnit;
+    currencies?: string[];
 }
 export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
     renderElementId: string;
     locale: Locale;
 }
+export interface MainProps {
+    timeUnit?: CurrencyPowerBalanceTimeUnit;
+    currencies?: string[];
+}
 export interface ChartWithDataProps {
     timeUnit: CurrencyPowerBalanceTimeUnit;
+    currencies?: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-power-balance-widget",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "description": "Labs Currency Power Balance Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.9.9",
-    "@oanda/labs-widget-common": "^1.0.110",
+    "@oanda/labs-widget-common": "^1.0.112",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -23,5 +23,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "293a770c716eb10f57d43eb20a4c8ab5cfda3370"
+  "gitHead": "a7b91b2d80a34946d377158e2a1ac8109a6cf5e7"
 }

package/src/CurrencyPowerBalanceWidget/ChartWithData.tsx

@@ -9,7 +9,7 @@ import { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';
 import { ChartWithDataProps } from './types';
 import { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';
 
-const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
+const ChartWithData = ({ timeUnit, currencies }: ChartWithDataProps) => {
   const { size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
   const { loading, data, error } = useQuery<
@@ -22,8 +22,8 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
     fetchPolicy: 'cache-and-network',
   });
 
-  const showChart = data?.currencyPowerBalance && data?.currencyPowerBalance?.length > 0;
-  const showError = data?.currencyPowerBalance?.length === 0 || error;
+  const showError = data?.currencyPowerBalance?.length === 0 || error
+    || (currencies && (currencies.length === 0 || currencies.length === 1));
 
   return (
     <>
@@ -33,8 +33,8 @@ const ChartWithData = ({ timeUnit }: ChartWithDataProps) => {
         <Spinner size={SpinnerSize.lg} />
       </div>
       )}
-      {!loading && showChart && (
-        <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} />
+      {!loading && !showError && (
+        <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} currencies={currencies} />
       )}
       {!loading && showError && (
         <div className="lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">

package/src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx

@@ -7,7 +7,7 @@ import { CurrencyPowerBalanceConfig } from './types';
 import { translations } from '../translations';
 
 const CurrencyPowerBalance = ({
-  graphqlUrl, theme, locale, isParamError,
+  graphqlUrl, theme, locale, timeUnit, currencies, isParamError,
 }: CurrencyPowerBalanceConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -22,7 +22,7 @@ const CurrencyPowerBalance = ({
             <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
               <ChartError />
             </div>
-          ) : <Main />}
+          ) : <Main timeUnit={timeUnit} currencies={currencies} />}
         </ApolloProvider>
       </LocaleProvider>
     </ThemeProvider>

package/src/CurrencyPowerBalanceWidget/Main.tsx

@@ -1,12 +1,48 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { ThemeContext } from '@oanda/labs-widget-common';
-import { Tool } from './Tool';
+import { useLocale } from '@oanda/mono-i18n';
+import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
+import { TimeUnitSwitch } from './components/TimeUnitSwitch';
+import { timeUnitConfig } from './config';
+import { ChartWithData } from './ChartWithData';
+import { MainProps } from './types';
 
-const Main = () => {
+const Main = ({ timeUnit, currencies }: MainProps) => {
   const { size } = useContext(ThemeContext);
+  const { lang } = useLocale();
+  const [selectedTimeUnit, setSelectedTimeUnit] = useState(
+    timeUnit || CurrencyPowerBalanceTimeUnit.CurrentDay,
+  );
   return (
     <>
-      {size && <Tool />}
+      {size && (
+        <div
+          data-testid="currency-power-balance-wrapper"
+          className="lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
+        >
+          {timeUnit && currencies ? (
+            <>
+              {timeUnitConfig
+                .filter(({ value }) => value === selectedTimeUnit)
+                .map(({ tooltipLabel, label }) => (
+                  <div data-testid="time-unit-label" key={label} className="lw-mb-6 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold">
+                    {tooltipLabel ? <span>{`${lang(tooltipLabel!.translationKey, { count: tooltipLabel!.count })}`}</span> : <span>{`${lang(label)}`}</span>}
+                  </div>
+                ))}
+            </>
+          ) : (
+            <TimeUnitSwitch
+              selected={selectedTimeUnit}
+              callback={setSelectedTimeUnit}
+              options={timeUnitConfig}
+            />
+          )}
+          <ChartWithData
+            timeUnit={selectedTimeUnit}
+            currencies={timeUnit && currencies}
+          />
+        </div>
+      )}
     </>
   );
 };

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

@@ -27,13 +27,17 @@ echarts.use([
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ values, timeUnit }: ChartProps) => {
+const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
   const { isDark, size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
   const isMobile = size === Size.MOBILE;
 
   const echartRef = useRef(null);
 
+  const chartData = currencies
+    ? values.filter(({ currency }) => currencies.includes(currency))
+    : values;
+
   useEffect(() => {
     if (echartRef.current) {
       // @ts-ignore
@@ -54,7 +58,7 @@ const Chart = ({ values, timeUnit }: ChartProps) => {
         height: `${CHART_HEIGHT}px`,
         width: '100%',
       }}
-      option={getOption(values, timeUnit, isDark)}
+      option={getOption(chartData, timeUnit, isDark)}
     />
   );
 };

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

@@ -1,4 +1,5 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+import { CurrencyName } from '../../../../gql/types/graphql';
 
 const X_LABEL_SIZE = 90;
 const X_LABEL_SIZE_MOBILE = 110;
@@ -12,7 +13,18 @@ const VERTICAL_LINE_COUNT = 10;
 const CANDLE_NUMBER_HOUR = 12;
 const CANDLE_MINUTE = 5;
 
-const COLOR_CONFIG: Record<string, string> = {
+const CURENCIES_ORDER: CurrencyName[] = [
+  CurrencyName.Usd,
+  CurrencyName.Eur,
+  CurrencyName.Gbp,
+  CurrencyName.Jpy,
+  CurrencyName.Chf,
+  CurrencyName.Aud,
+  CurrencyName.Cad,
+  CurrencyName.Nzd,
+];
+
+const COLOR_CONFIG = {
   USD: colorPalette.greenLight,
   EUR: colorPalette.turquoiseLight,
   GBP: colorPalette.violetLight,
@@ -42,4 +54,5 @@ export {
   TOOLTIP_LINE_COLOR_CONFIG,
   CANDLE_NUMBER_HOUR,
   CANDLE_MINUTE,
+  CURENCIES_ORDER,
 };

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

@@ -1,5 +1,5 @@
-import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-import { VERTICAL_LINE_COUNT } from './constants';
+import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';
 import { TooltipFormatterParams } from './types';
 
 const getDateAndTime = (param: string) => {
@@ -51,9 +51,25 @@ const tooltipFormatter = (values: TooltipFormatterParams[]) => {
   </div>`;
 };
 
+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));
+
+  return list.map((currency) => ({
+    name: currency,
+    itemStyle: {
+      color: COLOR_CONFIG[currency],
+    },
+  }));
+};
+
 export {
   isMonthWeek,
   tooltipFormatter,
   xAxisLabelFormatter,
   intervalFormatter,
+  formatLegendData,
 };

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

@@ -1,13 +1,15 @@
 import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
-import { intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';
+import {
+  intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,
+} from './formatters';
 import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
 
 const getOption = (
-  values: CurrencyPowerBalance[],
+  chartData: CurrencyPowerBalance[],
   timeUnit: CurrencyPowerBalanceTimeUnit,
   isDark: boolean,
 ) => {
-  const seriesData = values.map(({ currency, power }) => ({
+  const seriesData = chartData.map(({ currency, power }) => ({
     name: currency,
     type: 'line',
     symbol: 'circle',
@@ -21,12 +23,7 @@ const getOption = (
     data: power.map(({ point, price }) => [point, price]),
   }));
 
-  const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({
-    name: currency,
-    itemStyle: {
-      color: COLOR_CONFIG[currency],
-    },
-  }));
+  const legendData = formatLegendData(chartData);
 
   return {
     animation: false,

package/src/CurrencyPowerBalanceWidget/components/Chart/types.ts

@@ -3,4 +3,5 @@ import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql
 export interface ChartProps {
   values: CurrencyPowerBalance[];
   timeUnit: CurrencyPowerBalanceTimeUnit;
+  currencies?: string[];
 }

package/src/CurrencyPowerBalanceWidget/render.tsx

@@ -21,7 +21,7 @@ if (currencyPowerBalanceParamsElements.length > 0) {
     const root = createRoot(element);
     const params = element.getAttribute('data-currency-power-balance-params');
     const mode = element.getAttribute('data-mode');
-    const { locale } = JSON.parse(params as string);
+    const { timeUnit, currencies, locale } = JSON.parse(params as string);
 
     const isParamError = validateToolParams({ locale, graphqlUrl }, [
       {
@@ -36,6 +36,8 @@ if (currencyPowerBalanceParamsElements.length > 0) {
         locale={locale}
         theme={mode as Theme}
         isParamError={isParamError}
+        timeUnit={timeUnit}
+        currencies={currencies}
       />,
     );
   });

package/src/CurrencyPowerBalanceWidget/types.ts

@@ -7,6 +7,8 @@ export interface CurrencyPowerBalanceConfig {
   locale: Locale;
   theme?: Theme;
   isParamError?: boolean;
+  timeUnit?: CurrencyPowerBalanceTimeUnit;
+  currencies?: string[];
 }
 
 export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
@@ -14,6 +16,12 @@ export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceC
   locale: Locale;
 }
 
+export interface MainProps {
+  timeUnit?: CurrencyPowerBalanceTimeUnit;
+  currencies?: string[];
+}
+
 export interface ChartWithDataProps {
   timeUnit: CurrencyPowerBalanceTimeUnit;
+  currencies?: string[];
 }

package/test/Main.test.tsx

@@ -7,10 +7,11 @@ import { MockedProvider } from '@apollo/client/testing';
 import { Size, ThemeContext } from '@oanda/labs-widget-common';
 import { Main } from '../src/CurrencyPowerBalanceWidget/Main';
 import { mockResponse } from './responsesMocks';
+import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
 
 describe('Main component', () => {
-  it('should render tool view', async () => {
-    const { findByTestId, getByTestId } = render(
+  it('should render tool desktop view', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={mockResponse}>
         <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
           <Main />
@@ -20,5 +21,58 @@ describe('Main component', () => {
 
     expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
     expect(getByTestId('time-unit-switch')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
+  });
+  it('should render widget desktop view', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} currencies={['USD', 'EUR']} />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-label')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-switch')).not.toBeInTheDocument();
+  });
+  it('should render tool desktop view when timeUnit missing for widget', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main currencies={['USD', 'EUR']} />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-switch')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
+  });
+  it('should render tool desktop view when currencies missing for widget', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-switch')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
+  });
+  it('should render tool mobile view', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={mockResponse}>
+        <ThemeContext.Provider value={{ size: Size.MOBILE, isDark: true }}>
+          <Main />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(getByTestId('time-unit-select')).toBeInTheDocument();
+    expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
   });
 });

package/dist/main/CurrencyPowerBalanceWidget/Tool.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tool = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _config = require("./config");
-var _TimeUnitSwitch = require("./components/TimeUnitSwitch");
-var _ChartWithData = require("./ChartWithData");
-var _graphql = require("../gql/types/graphql");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Tool = () => {
-  const [selectedTimeUnit, setSelectedTimeUnit] = (0, _react.useState)(_graphql.CurrencyPowerBalanceTimeUnit.CurrentDay);
-  return _react.default.createElement("div", {
-    "data-testid": "currency-power-balance-wrapper",
-    className: "lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
-  }, _react.default.createElement(_TimeUnitSwitch.TimeUnitSwitch, {
-    selected: selectedTimeUnit,
-    callback: setSelectedTimeUnit,
-    options: _config.timeUnitConfig
-  }), _react.default.createElement(_ChartWithData.ChartWithData, {
-    timeUnit: selectedTimeUnit
-  }));
-};
-exports.Tool = Tool;
-//# sourceMappingURL=Tool.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Tool.js","names":["_react","_interopRequireWildcard","require","_config","_TimeUnitSwitch","_ChartWithData","_graphql","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tool","selectedTimeUnit","setSelectedTimeUnit","useState","CurrencyPowerBalanceTimeUnit","CurrentDay","createElement","className","TimeUnitSwitch","selected","callback","options","timeUnitConfig","ChartWithData","timeUnit","exports"],"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-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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAoE,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEpE,MAAMW,IAAI,GAAGA,CAAA,KAAM;EACjB,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAC,eAAQ,EAACC,qCAA4B,CAACC,UAAU,CAAC;EAEjG,OACEhC,MAAA,CAAAa,OAAA,CAAAoB,aAAA;IACE,eAAY,gCAAgC;IAC5CC,SAAS,EAAC;EAAmD,GAE7DlC,MAAA,CAAAa,OAAA,CAAAoB,aAAA,CAAC7B,eAAA,CAAA+B,cAAc;IACbC,QAAQ,EAAER,gBAAiB;IAC3BS,QAAQ,EAAER,mBAAoB;IAC9BS,OAAO,EAAEC;EAAe,CACzB,CAAC,EACFvC,MAAA,CAAAa,OAAA,CAAAoB,aAAA,CAAC5B,cAAA,CAAAmC,aAAa;IACZC,QAAQ,EAAEb;EAAiB,CAC5B,CACE,CAAC;AAEV,CAAC;AAACc,OAAA,CAAAf,IAAA,GAAAA,IAAA","ignoreList":[]}