npm - @oanda/labs-currency-power-balance-widget - Versions diffs - 1.0.48 → 1.0.50 - Mend

@oanda/labs-currency-power-balance-widget 1.0.48 → 1.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.xAxisLabelFormatter = exports.tooltipFormatter = exports.isMonthWeek = exports.intervalFormatter = void 0;
+exports.xAxisLabelFormatter = exports.tooltipFormatter = exports.isMonthWeek = exports.intervalFormatter = exports.formatLegendData = void 0;
 var _graphql = require("../../../../gql/types/graphql");
 var _constants = require("./constants");
 const getDateAndTime = param => {
@@ -62,4 +62,20 @@ const tooltipFormatter = values => {
   return "<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">".concat(date, "</span>\n    ").concat(row.join('\n'), "\n  </div>");
 };
 exports.tooltipFormatter = tooltipFormatter;
+const formatLegendData = values => {
+  const dataCurrencies = values.map(_ref5 => {
+    let {
+      currency
+    } = _ref5;
+    return currency;
+  });
+  const list = dataCurrencies.length === _constants.CURENCIES_ORDER.length ? _constants.CURENCIES_ORDER : _constants.CURENCIES_ORDER.filter(currency => dataCurrencies.includes(currency));
+  return list.map(currency => ({
+    name: currency,
+    itemStyle: {
+      color: _constants.COLOR_CONFIG[currency]
+    }
+  }));
+};
+exports.formatLegendData = formatLegendData;
 //# sourceMappingURL=formatters.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"formatters.js","names":["_graphql","require","_constants","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","CurrencyPowerBalanceTimeUnit","M3","M1","W1","exports","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","VERTICAL_LINE_COUNT","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n const dateAndTime = param.split('T');\n\n return {\n date: dateAndTime[0],\n time: dateAndTime[1].substring(0, 5),\n };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n \|\| timeUnit === CurrencyPowerBalanceTimeUnit.M1\n \|\| timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n const { date, time } = getDateAndTime(label);\n const isDateFormat = isMonthWeek(timeUnit) \|\| time === '00:00';\n\n return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n dataLength: number,\n) => Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n const row = values\n .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n ${marker}\n <span>${seriesName}</span>\n </div>\n <span>${value[1]}</span>\n </div>`);\n\n return `<div style=\"display:flex; flex-direction:column;\">\n <span style=\"margin-bottom:5px;\">${date}</span>\n ${row.join('\\n')}\n </div>`;\n};\n\nexport {\n isMonthWeek,\n tooltipFormatter,\n xAxisLabelFormatter,\n intervalFormatter,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAGA,MAAME,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,WAAW,GACfC,QAAsC,IACnCA,QAAQ,KAAKC,qCAA4B,CAACC,EAAE,IAC5CF,QAAQ,KAAKC,qCAA4B,CAACE,EAAE,IAC5CH,QAAQ,KAAKC,qCAA4B,CAACG,EAAE;AAACC,OAAA,CAAAN,WAAA,GAAAA,WAAA;AAElD,MAAMO,mBAAmB,GAAGA,CAACC,KAAa,EAAEP,QAAsC,KAAK;EACrF,MAAM;IAAEd,IAAI;IAAEC;EAAK,CAAC,GAAGL,cAAc,CAACyB,KAAK,CAAC;EAC5C,MAAMC,YAAY,GAAGT,WAAW,CAACC,QAAQ,CAAC,IAAIb,IAAI,KAAK,OAAO;EAE9D,OAAOqB,YAAY,GAAGnB,UAAU,CAACH,IAAI,CAAC,GAAGC,IAAI;AAC/C,CAAC;AAACkB,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAEF,MAAMG,iBAAiB,GACrBC,UAAkB,IACfC,IAAI,CAACC,KAAK,CAACF,UAAU,GAAGG,8BAAmB,CAAC;AAACR,OAAA,CAAAI,iBAAA,GAAAA,iBAAA;AAElD,MAAMK,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAM7B,IAAI,GAAGU,cAAc,CAACd,cAAc,CAACiC,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,yJAAAnC,MAAA,CAE7BoC,MAAM,sBAAApC,MAAA,CACAqC,UAAU,yCAAArC,MAAA,CAEZ0B,KAAK,CAAC,CAAC,CAAC;EAAA,CACX,CAAC;EAEV,uGAAA1B,MAAA,CACqCJ,IAAI,mBAAAI,MAAA,CACrC2B,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AAEpB,CAAC;AAACvB,OAAA,CAAAS,gBAAA,GAAAA,gBAAA","ignoreList":[]}
1	+ {"version":3,"file":"formatters.js","names":["_graphql","require","_constants","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","CurrencyPowerBalanceTimeUnit","M3","M1","W1","exports","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","VERTICAL_LINE_COUNT","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join","formatLegendData","dataCurrencies","_ref5","currency","list","length","CURENCIES_ORDER","filter","includes","name","itemStyle","color","COLOR_CONFIG"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n const dateAndTime = param.split('T');\n\n return {\n date: dateAndTime[0],\n time: dateAndTime[1].substring(0, 5),\n };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n \|\| timeUnit === CurrencyPowerBalanceTimeUnit.M1\n \|\| timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n const { date, time } = getDateAndTime(label);\n const isDateFormat = isMonthWeek(timeUnit) \|\| time === '00:00';\n\n return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n dataLength: number,\n) => Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n const row = values\n .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n ${marker}\n <span>${seriesName}</span>\n </div>\n <span>${value[1]}</span>\n </div>`);\n\n return `<div style=\"display:flex; flex-direction:column;\">\n <span style=\"margin-bottom:5px;\">${date}</span>\n ${row.join('\\n')}\n </div>`;\n};\n\nconst formatLegendData = (values: CurrencyPowerBalance[]) => {\n const dataCurrencies = values.map(({ currency }) => currency);\n\n const list = dataCurrencies.length === CURENCIES_ORDER.length\n ? CURENCIES_ORDER\n : CURENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));\n\n return list.map((currency) => ({\n name: currency,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n }));\n};\n\nexport {\n isMonthWeek,\n tooltipFormatter,\n xAxisLabelFormatter,\n intervalFormatter,\n formatLegendData,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAGA,MAAME,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,WAAW,GACfC,QAAsC,IACnCA,QAAQ,KAAKC,qCAA4B,CAACC,EAAE,IAC5CF,QAAQ,KAAKC,qCAA4B,CAACE,EAAE,IAC5CH,QAAQ,KAAKC,qCAA4B,CAACG,EAAE;AAACC,OAAA,CAAAN,WAAA,GAAAA,WAAA;AAElD,MAAMO,mBAAmB,GAAGA,CAACC,KAAa,EAAEP,QAAsC,KAAK;EACrF,MAAM;IAAEd,IAAI;IAAEC;EAAK,CAAC,GAAGL,cAAc,CAACyB,KAAK,CAAC;EAC5C,MAAMC,YAAY,GAAGT,WAAW,CAACC,QAAQ,CAAC,IAAIb,IAAI,KAAK,OAAO;EAE9D,OAAOqB,YAAY,GAAGnB,UAAU,CAACH,IAAI,CAAC,GAAGC,IAAI;AAC/C,CAAC;AAACkB,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAEF,MAAMG,iBAAiB,GACrBC,UAAkB,IACfC,IAAI,CAACC,KAAK,CAACF,UAAU,GAAGG,8BAAmB,CAAC;AAACR,OAAA,CAAAI,iBAAA,GAAAA,iBAAA;AAElD,MAAMK,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAM7B,IAAI,GAAGU,cAAc,CAACd,cAAc,CAACiC,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,yJAAAnC,MAAA,CAE7BoC,MAAM,sBAAApC,MAAA,CACAqC,UAAU,yCAAArC,MAAA,CAEZ0B,KAAK,CAAC,CAAC,CAAC;EAAA,CACX,CAAC;EAEV,uGAAA1B,MAAA,CACqCJ,IAAI,mBAAAI,MAAA,CACrC2B,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AAEpB,CAAC;AAACvB,OAAA,CAAAS,gBAAA,GAAAA,gBAAA;AAEF,MAAMe,gBAAgB,GAAId,MAA8B,IAAK;EAC3D,MAAMe,cAAc,GAAGf,MAAM,CAACS,GAAG,CAACO,KAAA;IAAA,IAAC;MAAEC;IAAS,CAAC,GAAAD,KAAA;IAAA,OAAKC,QAAQ;EAAA,EAAC;EAE7D,MAAMC,IAAI,GAAGH,cAAc,CAACI,MAAM,KAAKC,0BAAe,CAACD,MAAM,GACzDC,0BAAe,GACfA,0BAAe,CAACC,MAAM,CAAEJ,QAAQ,IAAKF,cAAc,CAACO,QAAQ,CAACL,QAAQ,CAAC,CAAC;EAE3E,OAAOC,IAAI,CAACT,GAAG,CAAEQ,QAAQ,KAAM;IAC7BM,IAAI,EAAEN,QAAQ;IACdO,SAAS,EAAE;MACTC,KAAK,EAAEC,uBAAY,CAACT,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;AACL,CAAC;AAAC3B,OAAA,CAAAwB,gBAAA,GAAAA,gBAAA","ignoreList":[]}

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getOption = void 0;
 var _constants = require("./constants");
 var _formatters = require("./formatters");
-const getOption = (values, timeUnit, isDark) => {
-  const seriesData = values.map(_ref => {
+const getOption = (chartData, timeUnit, isDark) => {
+  const seriesData = chartData.map(_ref => {
     let {
       currency,
       power
@@ -32,12 +32,7 @@ const getOption = (values, timeUnit, isDark) => {
       })
     };
   });
-  const legendData = Object.keys(_constants.COLOR_CONFIG).map(currency => ({
-    name: currency,
-    itemStyle: {
-      color: _constants.COLOR_CONFIG[currency]
-    }
-  }));
+  const legendData = (0, _formatters.formatLegendData)(chartData);
   return {
     animation: false,
     legend: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"getOption.js","names":["_constants","require","_formatters","getOption","~~values~~","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","lineStyle","data","_ref2","point","price","legendData","~~Object~~","~~keys","~~animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","formatter","tooltipFormatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","padding","align","margin","rotate","interval","intervalFormatter","length","label","xAxisLabelFormatter","yAxis","position","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport { 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,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;~~AAGA~~,MAAME,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,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDS,SAAS,EAAE;QACTF,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDU,IAAI,EAAET,KAAK,CAACH,GAAG,CAACa,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,~~GAAGC,MAAM,CAACC,IAAI,CAACR,uBAAY,CAAC,CAACV,~~GAAG,~~CAAEE~~,~~QAAQ~~,~~KAAM;IAC9DE~~,~~IAAI,EAAEF,QAAQ;IACdM,~~SAAS,~~EAAE;MACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;IAC9B;EACF,~~CAAC~~,CAAC,CAAC~~;~~EAEH~~,OAAO;~~IACLiB~~,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;UACTF,KAAK,EAAEX,MAAM,~~GAAG8B~~,oCAAyB,CAACC,IAAI,GAAGD,oCAAyB,CAACE;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEC,4BAAgB;MAC3BC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;~~MACL7B~~,IAAI,EAAE,UAAU;~~MAChB8B~~,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACrBC,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,EAAE;QACVC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAE,IAAAC,6BAAiB,~~EAAC9C~~,UAAU,CAAC,CAAC,CAAC,CAACa,IAAI,~~CAACkC~~,MAAM,CAAC;QACtDf,SAAS,EAAGgB,KAAa,IAAK,IAAAC,+BAAmB,EAACD,KAAK,~~EAAElD~~,QAAQ;MACnE;IACF,CAAC;~~IACDoD~~,KAAK,EAAE;~~MACL5C~~,IAAI,EAAE,OAAO;~~MACb6C~~,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdd,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBgB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3Bb,SAAS,EAAE;QACTc,YAAY,EAAE,KAAK;QACnBC,YAAY,EAAE;MAChB;IACF,CAAC;IACDC,MAAM,~~EAAExD~~;EACV,CAAC;AACH,CAAC;~~AAACyD~~,OAAA,~~CAAA7D~~,SAAA,GAAAA,SAAA","ignoreList":[]}
1	+ {"version":3,"file":"getOption.js","names":["_constants","require","_formatters","getOption","chartData","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","lineStyle","data","_ref2","point","price","legendData","formatLegendData","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","formatter","tooltipFormatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","padding","align","margin","rotate","interval","intervalFormatter","length","label","xAxisLabelFormatter","yAxis","position","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport {\n intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,\n} from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n chartData: CurrencyPowerBalance[],\n timeUnit: CurrencyPowerBalanceTimeUnit,\n isDark: boolean,\n) => {\n const seriesData = chartData.map(({ currency, power }) => ({\n name: currency,\n type: 'line',\n symbol: 'circle',\n showSymbol: false,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n lineStyle: {\n color: COLOR_CONFIG[currency],\n },\n data: power.map(({ point, price }) => [point, price]),\n }));\n\n const legendData = formatLegendData(chartData);\n\n return {\n animation: false,\n legend: {\n data: legendData,\n bottom: 10,\n icon: 'circle',\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n axis: 'x',\n z: 0,\n lineStyle: {\n color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n },\n },\n formatter: tooltipFormatter,\n extraCssText: 'z-index: 1',\n },\n xAxis: {\n type: 'category',\n axisTick: {\n show: false,\n },\n axisLine: { show: false },\n splitLine: {\n show: true,\n },\n axisLabel: {\n padding: [0, 0, 0, 4],\n align: 'left',\n margin: 10,\n rotate: -45,\n interval: intervalFormatter(seriesData[0].data.length),\n formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n },\n },\n yAxis: {\n type: 'value',\n position: 'right',\n splitNumber: 5,\n axisLine: { show: false },\n axisTick: { show: false },\n boundaryGap: ['10%', '10%'],\n axisLabel: {\n showMaxLabel: false,\n showMinLabel: false,\n },\n },\n series: seriesData,\n };\n};\n\nexport { getOption };\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAKA,MAAME,SAAS,GAAGA,CAChBC,SAAiC,EACjCC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,SAAS,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACzDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDS,SAAS,EAAE;QACTF,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDU,IAAI,EAAET,KAAK,CAACH,GAAG,CAACa,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,GAAG,IAAAC,4BAAgB,EAACrB,SAAS,CAAC;EAE9C,OAAO;IACLsB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNP,IAAI,EAAEI,UAAU;MAChBI,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE,GAAG;QACTC,CAAC,EAAE,CAAC;QACJf,SAAS,EAAE;UACTF,KAAK,EAAEX,MAAM,GAAG6B,oCAAyB,CAACC,IAAI,GAAGD,oCAAyB,CAACE;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEC,4BAAgB;MAC3BC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACL5B,IAAI,EAAE,UAAU;MAChB6B,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACrBC,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,EAAE;QACVC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAE,IAAAC,6BAAiB,EAAC7C,UAAU,CAAC,CAAC,CAAC,CAACa,IAAI,CAACiC,MAAM,CAAC;QACtDf,SAAS,EAAGgB,KAAa,IAAK,IAAAC,+BAAmB,EAACD,KAAK,EAAEjD,QAAQ;MACnE;IACF,CAAC;IACDmD,KAAK,EAAE;MACL3C,IAAI,EAAE,OAAO;MACb4C,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdd,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBgB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3Bb,SAAS,EAAE;QACTc,YAAY,EAAE,KAAK;QACnBC,YAAY,EAAE;MAChB;IACF,CAAC;IACDC,MAAM,EAAEvD;EACV,CAAC;AACH,CAAC;AAACwD,OAAA,CAAA5D,SAAA,GAAAA,SAAA","ignoreList":[]}

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/types.js.map CHANGED Viewed

	@@ -1 +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":[]}
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 currencies?: string[];\n}\n"],"mappings":"","ignoreList":[]}

package/dist/main/CurrencyPowerBalanceWidget/render.js CHANGED Viewed

@@ -20,6 +20,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 = (0, _labsWidgetCommon.validateToolParams)({
@@ -35,7 +37,9 @@ if (currencyPowerBalanceParamsElements.length > 0) {
       graphqlUrl: graphqlUrl,
       locale: locale,
       theme: mode,
-      isParamError: isParamError
+      isParamError: isParamError,
+      timeUnit: timeUnit,
+      currencies: currencies
     }));
   });
 } else {

package/dist/main/CurrencyPowerBalanceWidget/render.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_CurrencyPowerBalance","obj","__esModule","default","graphqlUrl","configGraphQl","renderElementId","configRenderElementId","locale","configLocale","window","currencyPowerBalanceWidgetConfig","widgetsConfig","currencyPowerBalanceParamsElements","document","querySelectorAll","length","forEach","element","root","createRoot","params","getAttribute","mode","JSON","parse","isParamError","validateToolParams","name","valueCheck","value","split","render","createElement","CurrencyPowerBalance","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AAA8D,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE9D,MAAM;EACJG,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,GAAG,IAAAC,kBAAU,EAACF,OAAO,CAAC;IAChC,MAAMG,MAAM,GAAGH,OAAO,CAACI,YAAY,CAAC,oCAAoC,CAAC;IACzE,MAAMC,IAAI,GAAGL,OAAO,CAACI,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;~~MAAEd~~;IAAO,CAAC,~~GAAGgB~~,IAAI,CAACC,KAAK,~~CAACJ~~,MAAgB,CAAC;~~IAE/C~~,~~MAAMK~~,YAAY,GAAG,IAAAC,oCAAkB,EAAC;~~MAAEnB~~,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,~~CACTrC~~,MAAA,CAAAQ,OAAA,~~CAAA8B~~,aAAA,~~CAACjC~~,qBAAA,~~CAAAkC~~,oBAAoB;~~MACnB9B~~,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;~~MACf2B~~,KAAK,~~EAAEZ~~,IAAc;~~MACrBG~~,YAAY,EAAEA;~~IAAa~~,~~CAC5B~~,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,~~MAAMU~~,SAAS,~~GAAGtB~~,QAAQ,~~CAACuB~~,cAAc,~~CAAC9B~~,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAG,IAAAC,kBAAU,~~EAACgB~~,SAAU,CAAC;~~EAEnCjB~~,IAAI,~~CAACa~~,MAAM,~~CACTrC~~,MAAA,CAAAQ,OAAA,~~CAAA8B~~,aAAA,~~CAACjC~~,qBAAA,~~CAAAkC~~,oBAAoB;~~IACnB1B~~,MAAM,EAAEC,YAAa;IACrBL,UAAU,EAAEC;EAAc,CAC3B,CACH,CAAC;AACH","ignoreList":[]}
1	+ {"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_CurrencyPowerBalance","obj","__esModule","default","graphqlUrl","configGraphQl","renderElementId","configRenderElementId","locale","configLocale","window","currencyPowerBalanceWidgetConfig","widgetsConfig","currencyPowerBalanceParamsElements","document","querySelectorAll","length","forEach","element","root","createRoot","params","getAttribute","mode","timeUnit","currencies","JSON","parse","isParamError","validateToolParams","name","valueCheck","value","split","render","createElement","CurrencyPowerBalance","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AAA8D,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE9D,MAAM;EACJG,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,GAAG,IAAAC,kBAAU,EAACF,OAAO,CAAC;IAChC,MAAMG,MAAM,GAAGH,OAAO,CAACI,YAAY,CAAC,oCAAoC,CAAC;IACzE,MAAMC,IAAI,GAAGL,OAAO,CAACI,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEE,QAAQ;MAAEC,UAAU;MAAEjB;IAAO,CAAC,GAAGkB,IAAI,CAACC,KAAK,CAACN,MAAgB,CAAC;IAErE,MAAMO,YAAY,GAAG,IAAAC,oCAAkB,EAAC;MAAErB,MAAM;MAAEJ;IAAW,CAAC,EAAE,CAC9D;MACE0B,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;IACLX,IAAI,CAACe,MAAM,CACTvC,MAAA,CAAAQ,OAAA,CAAAgC,aAAA,CAACnC,qBAAA,CAAAoC,oBAAoB;MACnBhC,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;MACf6B,KAAK,EAAEd,IAAc;MACrBK,YAAY,EAAEA,YAAa;MAC3BJ,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA;IAAW,CACxB,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,MAAMa,SAAS,GAAGxB,QAAQ,CAACyB,cAAc,CAAChC,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAG,IAAAC,kBAAU,EAACkB,SAAU,CAAC;EAEnCnB,IAAI,CAACe,MAAM,CACTvC,MAAA,CAAAQ,OAAA,CAAAgC,aAAA,CAACnC,qBAAA,CAAAoC,oBAAoB;IACnB5B,MAAM,EAAEC,YAAa;IACrBL,UAAU,EAAEC;EAAc,CAC3B,CACH,CAAC;AACH","ignoreList":[]}

package/dist/main/CurrencyPowerBalanceWidget/types.js.map CHANGED Viewed

	@@ -1 +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":[]}
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 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/module/CurrencyPowerBalanceWidget/ChartWithData.js CHANGED Viewed

@@ -5,9 +5,10 @@ import { Chart } from './components/Chart';
 import { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';
 import { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';
 const ChartWithData = _ref => {
-  var _data$currencyPowerBa, _data$currencyPowerBa2;
+  var _data$currencyPowerBa;
   let {
-    timeUnit
+    timeUnit,
+    currencies
   } = _ref;
   const {
     size
@@ -23,15 +24,15 @@ const ChartWithData = _ref => {
     },
     fetchPolicy: 'cache-and-network'
   });
-  const showChart = (data === null || data === void 0 ? void 0 : data.currencyPowerBalance) && (data === null || data === void 0 || (_data$currencyPowerBa = data.currencyPowerBalance) === null || _data$currencyPowerBa === void 0 ? void 0 : _data$currencyPowerBa.length) > 0;
-  const showError = (data === null || data === void 0 || (_data$currencyPowerBa2 = data.currencyPowerBalance) === null || _data$currencyPowerBa2 === void 0 ? void 0 : _data$currencyPowerBa2.length) === 0 || error;
+  const showError = (data === null || data === void 0 || (_data$currencyPowerBa = data.currencyPowerBalance) === null || _data$currencyPowerBa === void 0 ? void 0 : _data$currencyPowerBa.length) === 0 || error || currencies && (currencies.length === 0 || currencies.length === 1);
   return React.createElement(React.Fragment, null, loading && React.createElement("div", {
     className: "lw-mb-[50px] lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
   }, React.createElement(Spinner, {
     size: SpinnerSize.lg
-  })), !loading && showChart && React.createElement(Chart, {
+  })), !loading && !showError && React.createElement(Chart, {
     values: data === null || data === void 0 ? void 0 : data.currencyPowerBalance,
-    timeUnit: timeUnit
+    timeUnit: timeUnit,
+    currencies: currencies
   }), !loading && showError && React.createElement("div", {
     className: "lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
   }, React.createElement(ChartError, null)), isDesktop && React.createElement(Tooltip, {

package/dist/module/CurrencyPowerBalanceWidget/ChartWithData.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartWithData.js","names":["React","useContext","useQuery","ChartError","Spinner","SpinnerSize","ThemeContext","Tooltip","Size","Chart","CURRENCY_POWER_BALANCE_TOOLTIP_ID","getCurrencyPowerBalance","ChartWithData","_ref","_data$currencyPowerBa","~~_data$currencyPowerBa2~~","~~timeUnit~~","size","isDesktop","DESKTOP","loading","data","error","variables","fetchPolicy","~~showChart~~","currencyPowerBalance","length","~~showError","~~createElement","Fragment","className","lg","values","id"],"sources":["../../../src/CurrencyPowerBalanceWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n ChartError, Spinner, SpinnerSize, ThemeContext, Tooltip, Size,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart';\nimport { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';\nimport { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';\nimport { ChartWithDataProps } from './types';\nimport { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';\n\nconst ChartWithData = ({ timeUnit }: ChartWithDataProps) => {\n const { size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n const { loading, data, error } = useQuery<\n GetCurrencyPowerBalanceQuery,\n GetCurrencyPowerBalanceQueryVariables\n >(getCurrencyPowerBalance, {\n variables: {\n timeUnit,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const ~~showChart~~ = data?.currencyPowerBalance ~~&& data~~?.~~currencyPowerBalance?.~~length > 0;\n ~~const~~ ~~showError~~ = ~~data?.currencyPowerBalance?.~~length === 0 \|\| ~~error~~;\n\n return (\n <>\n {loading\n && (\n <div className=\"lw-mb-[50px] lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n {!loading && ~~showChart~~ && (\n <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} />\n )}\n {!loading && showError && (\n <div className=\"lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n {isDesktop && <Tooltip id={CURRENCY_POWER_BALANCE_TOOLTIP_ID} />}\n </>\n );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,QACxD,2BAA2B;AAClC,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,iCAAiC,QAAQ,aAAa;AAC/D,SAASC,uBAAuB,QAAQ,gCAAgC;AAIxE,MAAMC,aAAa,GAAGC,IAAA,~~IAAsC~~;EAAA,IAAAC,qBAAA~~,EAAAC,sBAAA~~;EAAA,~~IAArC~~;IAAEC;~~EAA6B~~,CAAC,GAAAH,IAAA;~~EACrD~~,MAAM;IAAEI;EAAK,CAAC,GAAGhB,UAAU,CAACK,YAAY,CAAC;EACzC,MAAMY,SAAS,GAAGD,IAAI,KAAKT,IAAI,CAACW,OAAO;EACvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGpB,QAAQ,CAGvCS,uBAAuB,EAAE;IACzBY,SAAS,EAAE;~~MACTP~~;IACF,CAAC;~~IACDQ~~,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG,CAAAJ,IAAI,aAAJA,IAAI,~~uBAAJA,IAAI,CAAEK,oBAAoB,KAAI,CAAAL,IAAI,aAAJA,IAAI,~~gBAAAP,qBAAA,GAAJO,IAAI,CAAEK,oBAAoB,cAAAZ,qBAAA,uBAA1BA,qBAAA,CAA4Ba,MAAM,~~IAAG~~,CAAC~~;EACtF~~,~~MAAMC~~,~~SAAS~~,~~GAAG~~,~~CAAAP~~,~~IAAI~~,~~aAAJA~~,~~IAAI~~,~~gBAAAN~~,~~sBAAA~~,~~GAAJM~~,~~IAAI~~,~~CAAEK~~,~~oBAAoB~~,~~cAAAX,sBAAA,uBAA1BA,sBAAA,CAA4BY,~~MAAM,~~MAAK~~,CAAC,~~IAAIL,KAAK~~;~~EAEnE~~,~~OACEtB~~,KAAA,~~CAAA6B~~,aAAA,~~CAAA7B~~,KAAA,~~CAAA8B~~,QAAA,~~QACGV~~,OAAO,IAERpB,KAAA,~~CAAA6B~~,aAAA;IAAKE,SAAS,EAAC;EAAgH,~~GAC7H/B~~,KAAA,~~CAAA6B~~,aAAA,~~CAACzB~~,OAAO;IAACa,IAAI,EAAEZ,WAAW,~~CAAC2B~~;EAAG,CAAE,CAC7B,CACJ,EACA,~~CAACZ~~,OAAO,~~IAAIK~~,SAAS,~~IACpBzB~~,KAAA,~~CAAA6B~~,aAAA,~~CAACpB~~,KAAK;~~IAACwB~~,MAAM,~~EAAEZ~~,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,oBAAsB;~~IAACV~~,QAAQ,EAAEA;~~EAAS~~,CAAE,~~CAClE~~,EACA,CAACI,OAAO,~~IAAIQ~~,SAAS,~~IACpB5B~~,KAAA,~~CAAA6B~~,aAAA;IAAKE,SAAS,EAAC;EAAmG,~~GAChH/B~~,KAAA,~~CAAA6B~~,aAAA,~~CAAC1B~~,UAAU,MAAE,CACV,CACN,EACAe,SAAS,IAAIlB,KAAA,~~CAAA6B~~,aAAA,~~CAACtB~~,OAAO;~~IAAC2B~~,EAAE,~~EAAExB~~;EAAkC,CAAE,CAC/D,CAAC;AAEP,CAAC;AAED,SAASE,aAAa","ignoreList":[]}
1	+ {"version":3,"file":"ChartWithData.js","names":["React","useContext","useQuery","ChartError","Spinner","SpinnerSize","ThemeContext","Tooltip","Size","Chart","CURRENCY_POWER_BALANCE_TOOLTIP_ID","getCurrencyPowerBalance","ChartWithData","_ref","_data$currencyPowerBa","timeUnit","currencies","size","isDesktop","DESKTOP","loading","data","error","variables","fetchPolicy","showError","currencyPowerBalance","length","createElement","Fragment","className","lg","values","id"],"sources":["../../../src/CurrencyPowerBalanceWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n ChartError, Spinner, SpinnerSize, ThemeContext, Tooltip, Size,\n} from '@oanda/labs-widget-common';\nimport { Chart } from './components/Chart';\nimport { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from './constants';\nimport { getCurrencyPowerBalance } from '../gql/getCurrencyPowerBalance';\nimport { ChartWithDataProps } from './types';\nimport { GetCurrencyPowerBalanceQuery, GetCurrencyPowerBalanceQueryVariables } from '../gql/types/graphql';\n\nconst ChartWithData = ({ timeUnit, currencies }: ChartWithDataProps) => {\n const { size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n const { loading, data, error } = useQuery<\n GetCurrencyPowerBalanceQuery,\n GetCurrencyPowerBalanceQueryVariables\n >(getCurrencyPowerBalance, {\n variables: {\n timeUnit,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const showError = data?.currencyPowerBalance?.length === 0 \|\| error\n \|\| (currencies && (currencies.length === 0 \|\| currencies.length === 1));\n\n return (\n <>\n {loading\n && (\n <div className=\"lw-mb-[50px] lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n {!loading && !showError && (\n <Chart values={data?.currencyPowerBalance!} timeUnit={timeUnit} currencies={currencies} />\n )}\n {!loading && showError && (\n <div className=\"lw-flex lw-h-[375px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n {isDesktop && <Tooltip id={CURRENCY_POWER_BALANCE_TOOLTIP_ID} />}\n </>\n );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,QACxD,2BAA2B;AAClC,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,iCAAiC,QAAQ,aAAa;AAC/D,SAASC,uBAAuB,QAAQ,gCAAgC;AAIxE,MAAMC,aAAa,GAAGC,IAAA,IAAkD;EAAA,IAAAC,qBAAA;EAAA,IAAjD;IAAEC,QAAQ;IAAEC;EAA+B,CAAC,GAAAH,IAAA;EACjE,MAAM;IAAEI;EAAK,CAAC,GAAGhB,UAAU,CAACK,YAAY,CAAC;EACzC,MAAMY,SAAS,GAAGD,IAAI,KAAKT,IAAI,CAACW,OAAO;EACvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGpB,QAAQ,CAGvCS,uBAAuB,EAAE;IACzBY,SAAS,EAAE;MACTR;IACF,CAAC;IACDS,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG,CAAAJ,IAAI,aAAJA,IAAI,gBAAAP,qBAAA,GAAJO,IAAI,CAAEK,oBAAoB,cAAAZ,qBAAA,uBAA1BA,qBAAA,CAA4Ba,MAAM,MAAK,CAAC,IAAIL,KAAK,IAC7DN,UAAU,KAAKA,UAAU,CAACW,MAAM,KAAK,CAAC,IAAIX,UAAU,CAACW,MAAM,KAAK,CAAC,CAAE;EAEzE,OACE3B,KAAA,CAAA4B,aAAA,CAAA5B,KAAA,CAAA6B,QAAA,QACGT,OAAO,IAERpB,KAAA,CAAA4B,aAAA;IAAKE,SAAS,EAAC;EAAgH,GAC7H9B,KAAA,CAAA4B,aAAA,CAACxB,OAAO;IAACa,IAAI,EAAEZ,WAAW,CAAC0B;EAAG,CAAE,CAC7B,CACJ,EACA,CAACX,OAAO,IAAI,CAACK,SAAS,IACrBzB,KAAA,CAAA4B,aAAA,CAACnB,KAAK;IAACuB,MAAM,EAAEX,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,oBAAsB;IAACX,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAC1F,EACA,CAACI,OAAO,IAAIK,SAAS,IACpBzB,KAAA,CAAA4B,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH9B,KAAA,CAAA4B,aAAA,CAACzB,UAAU,MAAE,CACV,CACN,EACAe,SAAS,IAAIlB,KAAA,CAAA4B,aAAA,CAACrB,OAAO;IAAC0B,EAAE,EAAEvB;EAAkC,CAAE,CAC/D,CAAC;AAEP,CAAC;AAED,SAASE,aAAa","ignoreList":[]}

package/dist/module/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js CHANGED Viewed

@@ -9,6 +9,8 @@ const CurrencyPowerBalance = _ref => {
     graphqlUrl,
     theme,
     locale,
+    timeUnit,
+    currencies,
     isParamError
   } = _ref;
   const client = new ApolloClient({
@@ -24,7 +26,10 @@ const CurrencyPowerBalance = _ref => {
     client: client
   }, isParamError ? React.createElement("div", {
     className: "lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
-  }, React.createElement(ChartError, null)) : React.createElement(Main, null))));
+  }, React.createElement(ChartError, null)) : React.createElement(Main, {
+    timeUnit: timeUnit,
+    currencies: currencies
+  }))));
 };
 export { CurrencyPowerBalance };
 //# sourceMappingURL=CurrencyPowerBalance.js.map

package/dist/module/CurrencyPowerBalanceWidget/CurrencyPowerBalance.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CurrencyPowerBalance.js","names":["React","ApolloClient","InMemoryCache","ApolloProvider","ChartError","ThemeProvider","getLocale","LocaleProvider","Main","translations","CurrencyPowerBalance","_ref","graphqlUrl","theme","locale","isParamError","client","uri","cache","createElement","className"],"sources":["../../../src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { ChartError, ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { Main } from './Main';\nimport { CurrencyPowerBalanceConfig } from './types';\nimport { translations } from '../translations';\n\nconst CurrencyPowerBalance = ({\n graphqlUrl, theme, locale, isParamError,\n}: CurrencyPowerBalanceConfig) => {\n const client = new ApolloClient({\n uri: graphqlUrl,\n cache: new InMemoryCache(),\n });\n\n return (\n <ThemeProvider theme={theme}>\n <LocaleProvider locale={getLocale(locale)} translations={translations}>\n <ApolloProvider client={client}>\n {isParamError ? (\n <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n ) : <Main />}\n </ApolloProvider>\n </LocaleProvider>\n </ThemeProvider>\n );\n};\n\nexport { CurrencyPowerBalance };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SAASC,UAAU,EAAEC,aAAa,EAAEC,SAAS,QAAQ,2BAA2B;AAChF,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,oBAAoB,GAAGC,IAAA,IAEK;EAAA,IAFJ;IAC5BC,UAAU;IAAEC,KAAK;IAAEC,MAAM;IAAEC;~~EACD~~,CAAC,~~GAAAJ~~,IAAA;EAC3B,~~MAAMK~~,MAAM,GAAG,~~IAAIf~~,YAAY,CAAC;~~IAC9BgB~~,GAAG,~~EAAEL~~,UAAU;~~IACfM~~,KAAK,EAAE,~~IAAIhB~~,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEF,KAAA,~~CAAAmB~~,aAAA,~~CAACd~~,aAAa;IAACQ,KAAK,EAAEA;EAAM,GAC1Bb,KAAA,~~CAAAmB~~,aAAA,~~CAACZ~~,cAAc;IAACO,MAAM,EAAER,SAAS,CAACQ,MAAM,CAAE;IAACL,YAAY,EAAEA;EAAa,GACpET,KAAA,~~CAAAmB~~,aAAA,~~CAAChB~~,cAAc;~~IAACa~~,MAAM,EAAEA;EAAO,GAC5BD,YAAY,~~GACXf~~,KAAA,~~CAAAmB~~,aAAA;IAAKC,SAAS,EAAC;EAAmG,~~GAChHpB~~,KAAA,~~CAAAmB~~,aAAA,~~CAACf~~,UAAU,MAAE,CACV,CAAC,GACJJ,KAAA,~~CAAAmB~~,aAAA,~~CAACX~~,IAAI,~~MAAE~~,~~CACG~~,CACF,CACH,CAAC;AAEpB,CAAC;AAED,~~SAASE~~,oBAAoB","ignoreList":[]}
1	+ {"version":3,"file":"CurrencyPowerBalance.js","names":["React","ApolloClient","InMemoryCache","ApolloProvider","ChartError","ThemeProvider","getLocale","LocaleProvider","Main","translations","CurrencyPowerBalance","_ref","graphqlUrl","theme","locale","timeUnit","currencies","isParamError","client","uri","cache","createElement","className"],"sources":["../../../src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { ChartError, ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { Main } from './Main';\nimport { CurrencyPowerBalanceConfig } from './types';\nimport { translations } from '../translations';\n\nconst CurrencyPowerBalance = ({\n graphqlUrl, theme, locale, timeUnit, currencies, isParamError,\n}: CurrencyPowerBalanceConfig) => {\n const client = new ApolloClient({\n uri: graphqlUrl,\n cache: new InMemoryCache(),\n });\n\n return (\n <ThemeProvider theme={theme}>\n <LocaleProvider locale={getLocale(locale)} translations={translations}>\n <ApolloProvider client={client}>\n {isParamError ? (\n <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n ) : <Main timeUnit={timeUnit} currencies={currencies} />}\n </ApolloProvider>\n </LocaleProvider>\n </ThemeProvider>\n );\n};\n\nexport { CurrencyPowerBalance };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SAASC,UAAU,EAAEC,aAAa,EAAEC,SAAS,QAAQ,2BAA2B;AAChF,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,oBAAoB,GAAGC,IAAA,IAEK;EAAA,IAFJ;IAC5BC,UAAU;IAAEC,KAAK;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,UAAU;IAAEC;EACvB,CAAC,GAAAN,IAAA;EAC3B,MAAMO,MAAM,GAAG,IAAIjB,YAAY,CAAC;IAC9BkB,GAAG,EAAEP,UAAU;IACfQ,KAAK,EAAE,IAAIlB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEF,KAAA,CAAAqB,aAAA,CAAChB,aAAa;IAACQ,KAAK,EAAEA;EAAM,GAC1Bb,KAAA,CAAAqB,aAAA,CAACd,cAAc;IAACO,MAAM,EAAER,SAAS,CAACQ,MAAM,CAAE;IAACL,YAAY,EAAEA;EAAa,GACpET,KAAA,CAAAqB,aAAA,CAAClB,cAAc;IAACe,MAAM,EAAEA;EAAO,GAC5BD,YAAY,GACXjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAC;EAAmG,GAChHtB,KAAA,CAAAqB,aAAA,CAACjB,UAAU,MAAE,CACV,CAAC,GACJJ,KAAA,CAAAqB,aAAA,CAACb,IAAI;IAACO,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CACzC,CACF,CACH,CAAC;AAEpB,CAAC;AAED,SAASN,oBAAoB","ignoreList":[]}

package/dist/module/CurrencyPowerBalanceWidget/Main.js CHANGED Viewed

@@ -1,11 +1,50 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { ThemeContext } from '@oanda/labs-widget-common';
-import { Tool } from './Tool';
-const Main = () => {
+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';
+const Main = _ref => {
+  let {
+    timeUnit,
+    currencies
+  } = _ref;
   const {
     size
   } = useContext(ThemeContext);
-  return React.createElement(React.Fragment, null, size && React.createElement(Tool, null));
+  const {
+    lang
+  } = useLocale();
+  const [selectedTimeUnit, setSelectedTimeUnit] = useState(timeUnit || CurrencyPowerBalanceTimeUnit.CurrentDay);
+  return React.createElement(React.Fragment, null, size && React.createElement("div", {
+    "data-testid": "currency-power-balance-wrapper",
+    className: "lw-flex lw-flex-col lw-text-sm lw-tracking-normal"
+  }, timeUnit && currencies ? React.createElement(React.Fragment, null, timeUnitConfig.filter(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    return value === selectedTimeUnit;
+  }).map(_ref3 => {
+    let {
+      tooltipLabel,
+      label
+    } = _ref3;
+    return React.createElement("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 ? React.createElement("span", null, "".concat(lang(tooltipLabel.translationKey, {
+      count: tooltipLabel.count
+    }))) : React.createElement("span", null, "".concat(lang(label))));
+  })) : React.createElement(TimeUnitSwitch, {
+    selected: selectedTimeUnit,
+    callback: setSelectedTimeUnit,
+    options: timeUnitConfig
+  }), React.createElement(ChartWithData, {
+    timeUnit: selectedTimeUnit,
+    currencies: timeUnit && currencies
+  })));
 };
 export { Main };
 //# sourceMappingURL=Main.js.map

package/dist/module/CurrencyPowerBalanceWidget/Main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Main.js","names":["React","useContext","ThemeContext","~~Tool~~","Main","size","createElement","Fragment"],"sources":["../../../src/CurrencyPowerBalanceWidget/Main.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { ThemeContext } from '@oanda/labs-widget-common';\nimport { ~~Tool~~ } from './~~Tool~~';\n\nconst Main = () => {\n const { size } = useContext(ThemeContext);\n return (\n <>\n {size && <~~Tool~~ />}\n </>\n );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;~~AACzC~~,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,~~IAAI~~,QAAQ,QAAQ;~~AAE7B~~,MAAMC,IAAI,~~GAAGA~~,~~CAAA~~,~~KAAM~~;~~EACjB~~,~~MAAM~~;IAAEC;EAAK,CAAC,~~GAAGJ~~,UAAU,~~CAACC~~,YAAY,CAAC;EACzC,~~OACEF~~,KAAA,~~CAAAM~~,aAAA,~~CAAAN~~,KAAA,~~CAAAO~~,QAAA,~~QACGF~~,IAAI,~~IAAIL~~,KAAA,~~CAAAM~~,aAAA,~~CAACH~~,IAAI,~~MAAE~~,~~CAChB~~,CAAC;AAEP,CAAC;AAED,~~SAASC~~,IAAI","ignoreList":[]}
1	+ {"version":3,"file":"Main.js","names":["React","useContext","useState","ThemeContext","useLocale","CurrencyPowerBalanceTimeUnit","TimeUnitSwitch","timeUnitConfig","ChartWithData","Main","_ref","timeUnit","currencies","size","lang","selectedTimeUnit","setSelectedTimeUnit","CurrentDay","createElement","Fragment","className","filter","_ref2","value","map","_ref3","tooltipLabel","label","key","concat","translationKey","count","selected","callback","options"],"sources":["../../../src/CurrencyPowerBalanceWidget/Main.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport { ThemeContext } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';\nimport { TimeUnitSwitch } from './components/TimeUnitSwitch';\nimport { timeUnitConfig } from './config';\nimport { ChartWithData } from './ChartWithData';\nimport { MainProps } from './types';\n\nconst Main = ({ timeUnit, currencies }: MainProps) => {\n const { size } = useContext(ThemeContext);\n const { lang } = useLocale();\n const [selectedTimeUnit, setSelectedTimeUnit] = useState(\n timeUnit \|\| CurrencyPowerBalanceTimeUnit.CurrentDay,\n );\n return (\n <>\n {size && (\n <div\n data-testid=\"currency-power-balance-wrapper\"\n className=\"lw-flex lw-flex-col lw-text-sm lw-tracking-normal\"\n >\n {timeUnit && currencies ? (\n <>\n {timeUnitConfig\n .filter(({ value }) => value === selectedTimeUnit)\n .map(({ tooltipLabel, label }) => (\n <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\">\n {tooltipLabel ? <span>{`${lang(tooltipLabel!.translationKey, { count: tooltipLabel!.count })}`}</span> : <span>{`${lang(label)}`}</span>}\n </div>\n ))}\n </>\n ) : (\n <TimeUnitSwitch\n selected={selectedTimeUnit}\n callback={setSelectedTimeUnit}\n options={timeUnitConfig}\n />\n )}\n <ChartWithData\n timeUnit={selectedTimeUnit}\n currencies={timeUnit && currencies}\n />\n </div>\n )}\n </>\n );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AACnD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,4BAA4B,QAAQ,sBAAsB;AACnE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,aAAa,QAAQ,iBAAiB;AAG/C,MAAMC,IAAI,GAAGC,IAAA,IAAyC;EAAA,IAAxC;IAAEC,QAAQ;IAAEC;EAAsB,CAAC,GAAAF,IAAA;EAC/C,MAAM;IAAEG;EAAK,CAAC,GAAGZ,UAAU,CAACE,YAAY,CAAC;EACzC,MAAM;IAAEW;EAAK,CAAC,GAAGV,SAAS,CAAC,CAAC;EAC5B,MAAM,CAACW,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGd,QAAQ,CACtDS,QAAQ,IAAIN,4BAA4B,CAACY,UAC3C,CAAC;EACD,OACEjB,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAmB,QAAA,QACGN,IAAI,IACHb,KAAA,CAAAkB,aAAA;IACE,eAAY,gCAAgC;IAC5CE,SAAS,EAAC;EAAmD,GAE5DT,QAAQ,IAAIC,UAAU,GACrBZ,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAmB,QAAA,QACGZ,cAAc,CACZc,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEC;IAAM,CAAC,GAAAD,KAAA;IAAA,OAAKC,KAAK,KAAKR,gBAAgB;EAAA,EAAC,CACjDS,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,YAAY;MAAEC;IAAM,CAAC,GAAAF,KAAA;IAAA,OAC3BzB,KAAA,CAAAkB,aAAA;MAAK,eAAY,iBAAiB;MAACU,GAAG,EAAED,KAAM;MAACP,SAAS,EAAC;IAAwE,GAC9HM,YAAY,GAAG1B,KAAA,CAAAkB,aAAA,kBAAAW,MAAA,CAAUf,IAAI,CAACY,YAAY,CAAEI,cAAc,EAAE;MAAEC,KAAK,EAAEL,YAAY,CAAEK;IAAM,CAAC,CAAC,CAAS,CAAC,GAAG/B,KAAA,CAAAkB,aAAA,kBAAAW,MAAA,CAAUf,IAAI,CAACa,KAAK,CAAC,CAAS,CACpI,CAAC;EAAA,CACP,CACH,CAAC,GAEH3B,KAAA,CAAAkB,aAAA,CAACZ,cAAc;IACb0B,QAAQ,EAAEjB,gBAAiB;IAC3BkB,QAAQ,EAAEjB,mBAAoB;IAC9BkB,OAAO,EAAE3B;EAAe,CACzB,CACF,EACDP,KAAA,CAAAkB,aAAA,CAACV,aAAa;IACZG,QAAQ,EAAEI,gBAAiB;IAC3BH,UAAU,EAAED,QAAQ,IAAIC;EAAW,CACpC,CACE,CAEP,CAAC;AAEP,CAAC;AAED,SAASH,IAAI","ignoreList":[]}

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

@@ -13,7 +13,8 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 const Chart = _ref => {
   let {
     values,
-    timeUnit
+    timeUnit,
+    currencies
   } = _ref;
   const {
     isDark,
@@ -22,6 +23,12 @@ const Chart = _ref => {
   const isDesktop = size === Size.DESKTOP;
   const isMobile = size === Size.MOBILE;
   const echartRef = useRef(null);
+  const chartData = currencies ? values.filter(_ref2 => {
+    let {
+      currency
+    } = _ref2;
+    return currencies.includes(currency);
+  }) : values;
   useEffect(() => {
     if (echartRef.current) {
       const echartInstance = echartRef.current.getEchartsInstance();
@@ -36,7 +43,7 @@ const Chart = _ref => {
       height: "".concat(CHART_HEIGHT, "px"),
       width: '100%'
     },
-    option: getOption(values, timeUnit, isDark)
+    option: getOption(chartData, timeUnit, isDark)
   });
 };
 export { Chart };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Chart.js","names":["React","useRef","useEffect","useContext","ReactEChartsCore","echarts","LineChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","LegendPlainComponent","Theme","ThemeContext","getChartTheme","Size","CHART_HEIGHT","getResponsiveOption","getOption","use","registerTheme","Dark","Light","Chart","_ref","values","timeUnit","isDark","size","isDesktop","DESKTOP","isMobile","MOBILE","echartRef","current","echartInstance","getEchartsInstance","setOption","createElement","ref","theme","style","height","concat","width","option"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { LineChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent,\n} from 'echarts/components';\nimport {\n Theme, ThemeContext, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport {\n CHART_HEIGHT,\n} from './options/constants';\nimport { getResponsiveOption, getOption } from './options';\nimport { ChartProps } from './types';\n\necharts.use([\n GridSimpleComponent,\n GraphicComponent,\n TooltipComponent,\n LegendPlainComponent,\n LineChart,\n CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, timeUnit }: ChartProps) => {\n const { isDark, size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n const isMobile = size === Size.MOBILE;\n\n const echartRef = useRef(null);\n\n useEffect(() => {\n if (echartRef.current) {\n // @ts-ignore\n const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n echartInstance.setOption(\n getResponsiveOption(isDesktop, isMobile, isDark),\n );\n }\n }, [echartRef, isDesktop, isMobile, isDark]);\n\n return (\n <ReactEChartsCore\n echarts={echarts}\n ref={echartRef}\n theme={isDark ? 'dark_theme' : 'light_theme'}\n style={{\n height: `${CHART_HEIGHT}px`,\n width: '100%',\n }}\n option={getOption(~~values~~, timeUnit, isDark)}\n />\n );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,EAAEC,UAAU,QAAQ,OAAO;AAC5D,OAAOC,gBAAgB,MAAM,4BAA4B;AACzD,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SACEC,mBAAmB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,oBAAoB,QACxE,oBAAoB;AAC3B,SACEC,KAAK,EAAEC,YAAY,EAAEC,aAAa,EAAEC,IAAI,QACnC,2BAA2B;AAClC,SACEC,YAAY,QACP,qBAAqB;AAC5B,SAASC,mBAAmB,EAAEC,SAAS,QAAQ,WAAW;AAG1Db,OAAO,CAACc,GAAG,CAAC,CACVX,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,EAChBC,oBAAoB,EACpBL,SAAS,EACTC,cAAc,CACf,CAAC;AAEFF,OAAO,CAACe,aAAa,CAAC,YAAY,EAAEN,aAAa,CAACF,KAAK,CAACS,IAAI,CAAC,CAAC;AAC9DhB,OAAO,CAACe,aAAa,CAAC,aAAa,EAAEN,aAAa,CAACF,KAAK,CAACU,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,~~IAAsC~~;EAAA,~~IAArC~~;IAAEC,MAAM;IAAEC;~~EAAqB~~,CAAC,~~GAAAF~~,IAAA;~~EAC7C~~,MAAM;~~IAAEG~~,MAAM;IAAEC;EAAK,CAAC,~~GAAGzB~~,UAAU,CAACU,YAAY,CAAC;EACjD,~~MAAMgB~~,SAAS,GAAGD,IAAI,~~KAAKb~~,IAAI,~~CAACe~~,OAAO;EACvC,MAAMC,QAAQ,GAAGH,IAAI,~~KAAKb~~,IAAI,~~CAACiB~~,MAAM;EAErC,MAAMC,SAAS,~~GAAGhC~~,MAAM,CAAC,IAAI,CAAC;~~EAE9BC~~,SAAS,CAAC,MAAM;IACd,~~IAAI+B~~,SAAS,~~CAACC~~,OAAO,EAAE;MAErB,MAAMC,cAAc,~~GAAGF~~,SAAS,~~CAACC~~,OAAO,CAACE,kBAAkB,CAAC,CAAwB;MAEpFD,cAAc,CAACE,SAAS,~~CACtBpB~~,mBAAmB,~~CAACY~~,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CACjD,CAAC;IACH;EACF,CAAC,EAAE,CAACM,SAAS,EAAEJ,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CAAC,CAAC;EAE5C,~~OACE3B~~,KAAA,~~CAAAsC~~,aAAA,~~CAAClC~~,gBAAgB;IACfC,OAAO,EAAEA,OAAQ;~~IACjBkC~~,GAAG,~~EAAEN~~,SAAU;~~IACfO~~,KAAK,~~EAAEb~~,MAAM,GAAG,YAAY,GAAG,aAAc;~~IAC7Cc~~,KAAK,EAAE;MACLC,MAAM,KAAAC,MAAA,~~CAAK3B~~,YAAY,OAAI;~~MAC3B4B~~,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,~~EAAE3B~~,SAAS,~~CAACO~~,~~MAAM~~,~~EAAEC~~,QAAQ,~~EAAEC~~,MAAM;EAAE,~~CAC7C~~,CAAC;AAEN,CAAC;AAED,~~SAASJ~~,KAAK","ignoreList":[]}
1	+ {"version":3,"file":"Chart.js","names":["React","useRef","useEffect","useContext","ReactEChartsCore","echarts","LineChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","LegendPlainComponent","Theme","ThemeContext","getChartTheme","Size","CHART_HEIGHT","getResponsiveOption","getOption","use","registerTheme","Dark","Light","Chart","_ref","values","timeUnit","currencies","isDark","size","isDesktop","DESKTOP","isMobile","MOBILE","echartRef","chartData","filter","_ref2","currency","includes","current","echartInstance","getEchartsInstance","setOption","createElement","ref","theme","style","height","concat","width","option"],"sources":["../../../../../src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { LineChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent,\n} from 'echarts/components';\nimport {\n Theme, ThemeContext, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport {\n CHART_HEIGHT,\n} from './options/constants';\nimport { getResponsiveOption, getOption } from './options';\nimport { ChartProps } from './types';\n\necharts.use([\n GridSimpleComponent,\n GraphicComponent,\n TooltipComponent,\n LegendPlainComponent,\n LineChart,\n CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, timeUnit, currencies }: ChartProps) => {\n const { isDark, size } = useContext(ThemeContext);\n const isDesktop = size === Size.DESKTOP;\n const isMobile = size === Size.MOBILE;\n\n const echartRef = useRef(null);\n\n const chartData = currencies\n ? values.filter(({ currency }) => currencies.includes(currency))\n : values;\n\n useEffect(() => {\n if (echartRef.current) {\n // @ts-ignore\n const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n echartInstance.setOption(\n getResponsiveOption(isDesktop, isMobile, isDark),\n );\n }\n }, [echartRef, isDesktop, isMobile, isDark]);\n\n return (\n <ReactEChartsCore\n echarts={echarts}\n ref={echartRef}\n theme={isDark ? 'dark_theme' : 'light_theme'}\n style={{\n height: `${CHART_HEIGHT}px`,\n width: '100%',\n }}\n option={getOption(chartData, timeUnit, isDark)}\n />\n );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,EAAEC,UAAU,QAAQ,OAAO;AAC5D,OAAOC,gBAAgB,MAAM,4BAA4B;AACzD,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SACEC,mBAAmB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,oBAAoB,QACxE,oBAAoB;AAC3B,SACEC,KAAK,EAAEC,YAAY,EAAEC,aAAa,EAAEC,IAAI,QACnC,2BAA2B;AAClC,SACEC,YAAY,QACP,qBAAqB;AAC5B,SAASC,mBAAmB,EAAEC,SAAS,QAAQ,WAAW;AAG1Db,OAAO,CAACc,GAAG,CAAC,CACVX,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,EAChBC,oBAAoB,EACpBL,SAAS,EACTC,cAAc,CACf,CAAC;AAEFF,OAAO,CAACe,aAAa,CAAC,YAAY,EAAEN,aAAa,CAACF,KAAK,CAACS,IAAI,CAAC,CAAC;AAC9DhB,OAAO,CAACe,aAAa,CAAC,aAAa,EAAEN,aAAa,CAACF,KAAK,CAACU,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAkD;EAAA,IAAjD;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAuB,CAAC,GAAAH,IAAA;EACzD,MAAM;IAAEI,MAAM;IAAEC;EAAK,CAAC,GAAG1B,UAAU,CAACU,YAAY,CAAC;EACjD,MAAMiB,SAAS,GAAGD,IAAI,KAAKd,IAAI,CAACgB,OAAO;EACvC,MAAMC,QAAQ,GAAGH,IAAI,KAAKd,IAAI,CAACkB,MAAM;EAErC,MAAMC,SAAS,GAAGjC,MAAM,CAAC,IAAI,CAAC;EAE9B,MAAMkC,SAAS,GAAGR,UAAU,GACxBF,MAAM,CAACW,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEC;IAAS,CAAC,GAAAD,KAAA;IAAA,OAAKV,UAAU,CAACY,QAAQ,CAACD,QAAQ,CAAC;EAAA,EAAC,GAC9Db,MAAM;EAEVvB,SAAS,CAAC,MAAM;IACd,IAAIgC,SAAS,CAACM,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGP,SAAS,CAACM,OAAO,CAACE,kBAAkB,CAAC,CAAwB;MAEpFD,cAAc,CAACE,SAAS,CACtB1B,mBAAmB,CAACa,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CACjD,CAAC;IACH;EACF,CAAC,EAAE,CAACM,SAAS,EAAEJ,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CAAC,CAAC;EAE5C,OACE5B,KAAA,CAAA4C,aAAA,CAACxC,gBAAgB;IACfC,OAAO,EAAEA,OAAQ;IACjBwC,GAAG,EAAEX,SAAU;IACfY,KAAK,EAAElB,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7CmB,KAAK,EAAE;MACLC,MAAM,KAAAC,MAAA,CAAKjC,YAAY,OAAI;MAC3BkC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAEjC,SAAS,CAACiB,SAAS,EAAET,QAAQ,EAAEE,MAAM;EAAE,CAChD,CAAC;AAEN,CAAC;AAED,SAASL,KAAK","ignoreList":[]}

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

@@ -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;
 const Y_LABEL_SIZE_MOBILE = 35;
@@ -10,6 +11,7 @@ const LEGEND_HEIGHT_MOBILE = 70;
 const VERTICAL_LINE_COUNT = 10;
 const CANDLE_NUMBER_HOUR = 12;
 const CANDLE_MINUTE = 5;
+const CURENCIES_ORDER = [CurrencyName.Usd, CurrencyName.Eur, CurrencyName.Gbp, CurrencyName.Jpy, CurrencyName.Chf, CurrencyName.Aud, CurrencyName.Cad, CurrencyName.Nzd];
 const COLOR_CONFIG = {
   USD: colorPalette.greenLight,
   EUR: colorPalette.turquoiseLight,
@@ -24,5 +26,5 @@ const TOOLTIP_LINE_COLOR_CONFIG = {
   DARK: colorPalette.orange,
   LIGHT: colorPalette.bottleGreenDark
 };
-export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE };
+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 };
 //# sourceMappingURL=constants.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","names":["colorPalette","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","CANDLE_NUMBER_HOUR","CANDLE_MINUTE","COLOR_CONFIG","USD","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreen75Lighter","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\nconst CANDLE_NUMBER_HOUR = 12;\nconst CANDLE_MINUTE = 5;\n\nconst ~~COLOR_CONFIG~~: ~~Record<string,~~ ~~string>~~ = {\n USD: colorPalette.greenLight,\n EUR: colorPalette.turquoiseLight,\n GBP: colorPalette.violetLight,\n JPY: colorPalette.raspberryLight,\n CHF: colorPalette.bottleGreen75Lighter,\n AUD: colorPalette.orange,\n CAD: colorPalette.midnight75Lighter,\n NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n DARK: colorPalette.orange,\n LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n X_LABEL_SIZE,\n X_LABEL_SIZE_MOBILE,\n Y_LABEL_SIZE_MOBILE,\n Y_LABEL_SIZE,\n CHART_WIDTH,\n CHART_HEIGHT,\n LEGEND_HEIGHT,\n LEGEND_HEIGHT_MOBILE,\n VERTICAL_LINE_COUNT,\n COLOR_CONFIG,\n TOOLTIP_LINE_COLOR_CONFIG,\n CANDLE_NUMBER_HOUR,\n CANDLE_MINUTE,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;~~AAExD~~,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,aAAa,GAAG,CAAC;AAEvB,MAAMC,~~YAAoC~~,GAAG~~;EAC3CC~~,GAAG,~~EAAEb~~,YAAY,CAACc,UAAU;EAC5BC,GAAG,~~EAAEf~~,YAAY,~~CAACgB~~,cAAc;EAChCC,GAAG,~~EAAEjB~~,YAAY,~~CAACkB~~,WAAW;EAC7BC,GAAG,~~EAAEnB~~,YAAY,~~CAACoB~~,cAAc;EAChCC,GAAG,~~EAAErB~~,YAAY,~~CAACsB~~,oBAAoB;EACtCC,GAAG,~~EAAEvB~~,YAAY,~~CAACwB~~,MAAM;EACxBC,GAAG,~~EAAEzB~~,YAAY,~~CAAC0B~~,iBAAiB;EACnCC,GAAG,~~EAAE3B~~,YAAY,~~CAAC4B~~;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAG;EAChCC,IAAI,~~EAAE9B~~,YAAY,~~CAACwB~~,MAAM;EACzBO,KAAK,~~EAAE/B~~,YAAY,~~CAACgC~~;AACtB,CAAC;AAED,~~SACE/B~~,YAAY,EACZC,mBAAmB,EACnBC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,oBAAoB,EACpBC,mBAAmB,~~EACnBG~~,YAAY,EACZiB,yBAAyB,~~EACzBnB~~,kBAAkB,EAClBC,aAAa","ignoreList":[]}
1	+ {"version":3,"file":"constants.js","names":["colorPalette","CurrencyName","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","CANDLE_NUMBER_HOUR","CANDLE_MINUTE","CURENCIES_ORDER","Usd","Eur","Gbp","Jpy","Chf","Aud","Cad","Nzd","COLOR_CONFIG","USD","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreen75Lighter","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport { CurrencyName } from '../../../../gql/types/graphql';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\nconst CANDLE_NUMBER_HOUR = 12;\nconst CANDLE_MINUTE = 5;\n\nconst CURENCIES_ORDER: CurrencyName[] = [\n CurrencyName.Usd,\n CurrencyName.Eur,\n CurrencyName.Gbp,\n CurrencyName.Jpy,\n CurrencyName.Chf,\n CurrencyName.Aud,\n CurrencyName.Cad,\n CurrencyName.Nzd,\n];\n\nconst COLOR_CONFIG = {\n USD: colorPalette.greenLight,\n EUR: colorPalette.turquoiseLight,\n GBP: colorPalette.violetLight,\n JPY: colorPalette.raspberryLight,\n CHF: colorPalette.bottleGreen75Lighter,\n AUD: colorPalette.orange,\n CAD: colorPalette.midnight75Lighter,\n NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n DARK: colorPalette.orange,\n LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n X_LABEL_SIZE,\n X_LABEL_SIZE_MOBILE,\n Y_LABEL_SIZE_MOBILE,\n Y_LABEL_SIZE,\n CHART_WIDTH,\n CHART_HEIGHT,\n LEGEND_HEIGHT,\n LEGEND_HEIGHT_MOBILE,\n VERTICAL_LINE_COUNT,\n COLOR_CONFIG,\n TOOLTIP_LINE_COLOR_CONFIG,\n CANDLE_NUMBER_HOUR,\n CANDLE_MINUTE,\n CURENCIES_ORDER,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,aAAa,GAAG,CAAC;AAEvB,MAAMC,eAA+B,GAAG,CACtCZ,YAAY,CAACa,GAAG,EAChBb,YAAY,CAACc,GAAG,EAChBd,YAAY,CAACe,GAAG,EAChBf,YAAY,CAACgB,GAAG,EAChBhB,YAAY,CAACiB,GAAG,EAChBjB,YAAY,CAACkB,GAAG,EAChBlB,YAAY,CAACmB,GAAG,EAChBnB,YAAY,CAACoB,GAAG,CACjB;AAED,MAAMC,YAAY,GAAG;EACnBC,GAAG,EAAEvB,YAAY,CAACwB,UAAU;EAC5BC,GAAG,EAAEzB,YAAY,CAAC0B,cAAc;EAChCC,GAAG,EAAE3B,YAAY,CAAC4B,WAAW;EAC7BC,GAAG,EAAE7B,YAAY,CAAC8B,cAAc;EAChCC,GAAG,EAAE/B,YAAY,CAACgC,oBAAoB;EACtCC,GAAG,EAAEjC,YAAY,CAACkC,MAAM;EACxBC,GAAG,EAAEnC,YAAY,CAACoC,iBAAiB;EACnCC,GAAG,EAAErC,YAAY,CAACsC;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAG;EAChCC,IAAI,EAAExC,YAAY,CAACkC,MAAM;EACzBO,KAAK,EAAEzC,YAAY,CAAC0C;AACtB,CAAC;AAED,SACExC,YAAY,EACZC,mBAAmB,EACnBC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,oBAAoB,EACpBC,mBAAmB,EACnBY,YAAY,EACZiB,yBAAyB,EACzB5B,kBAAkB,EAClBC,aAAa,EACbC,eAAe","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
-import { VERTICAL_LINE_COUNT } from './constants';
+import { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';
 const getDateAndTime = param => {
   const dateAndTime = param.split('T');
   return {
@@ -52,5 +52,20 @@ const tooltipFormatter = values => {
   });
   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 { isMonthWeek, tooltipFormatter, xAxisLabelFormatter, intervalFormatter };
+const formatLegendData = values => {
+  const dataCurrencies = values.map(_ref5 => {
+    let {
+      currency
+    } = _ref5;
+    return 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 };
 //# sourceMappingURL=formatters.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"formatters.js","names":["CurrencyPowerBalanceTimeUnit","VERTICAL_LINE_COUNT","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","M3","M1","W1","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n const dateAndTime = param.split('T');\n\n return {\n date: dateAndTime[0],\n time: dateAndTime[1].substring(0, 5),\n };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n \|\| timeUnit === CurrencyPowerBalanceTimeUnit.M1\n \|\| timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n const { date, time } = getDateAndTime(label);\n const isDateFormat = isMonthWeek(timeUnit) \|\| time === '00:00';\n\n return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n dataLength: number,\n) => Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n const row = values\n .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n ${marker}\n <span>${seriesName}</span>\n </div>\n <span>${value[1]}</span>\n </div>`);\n\n return `<div style=\"display:flex; flex-direction:column;\">\n <span style=\"margin-bottom:5px;\">${date}</span>\n ${row.join('\\n')}\n </div>`;\n};\n\nexport {\n isMonthWeek,\n tooltipFormatter,\n xAxisLabelFormatter,\n intervalFormatter,\n};\n"],"mappings":"AAAA,~~SAASA~~,4BAA4B,QAAQ,+BAA+B;~~AAC5E~~,SAASC,mBAAmB,QAAQ,aAAa;~~AAGjD~~,MAAMC,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,WAAW,GACfC,QAAsC,IACnCA,QAAQ,~~KAAKpB~~,4BAA4B,~~CAACqB~~,EAAE,IAC5CD,QAAQ,~~KAAKpB~~,4BAA4B,~~CAACsB~~,EAAE,IAC5CF,QAAQ,~~KAAKpB~~,4BAA4B,~~CAACuB~~,EAAE;AAEjD,MAAMC,mBAAmB,GAAGA,CAACC,KAAa,EAAEL,QAAsC,KAAK;EACrF,MAAM;IAAEd,IAAI;IAAEC;EAAK,CAAC,GAAGL,cAAc,CAACuB,KAAK,CAAC;EAC5C,MAAMC,YAAY,GAAGP,WAAW,CAACC,QAAQ,CAAC,IAAIb,IAAI,KAAK,OAAO;EAE9D,OAAOmB,YAAY,GAAGjB,UAAU,CAACH,IAAI,CAAC,GAAGC,IAAI;AAC/C,CAAC;AAED,MAAMoB,iBAAiB,GACrBC,UAAkB,IACfC,IAAI,CAACC,KAAK,CAACF,UAAU,~~GAAG3B~~,mBAAmB,CAAC;AAEjD,~~MAAM8B~~,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAM1B,IAAI,GAAGU,cAAc,CAACd,cAAc,CAAC8B,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,yJAAAhC,MAAA,CAE7BiC,MAAM,sBAAAjC,MAAA,CACAkC,UAAU,yCAAAlC,MAAA,CAEZuB,KAAK,CAAC,CAAC,CAAC;EAAA,CACX,CAAC;EAEV,uGAAAvB,MAAA,CACqCJ,IAAI,mBAAAI,MAAA,CACrCwB,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AAEpB,CAAC;AAED,~~SACE1B~~,WAAW,EACXY,gBAAgB,EAChBP,mBAAmB,EACnBG,iBAAiB","ignoreList":[]}
1	+ {"version":3,"file":"formatters.js","names":["CurrencyPowerBalanceTimeUnit","VERTICAL_LINE_COUNT","CURENCIES_ORDER","COLOR_CONFIG","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","M3","M1","W1","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join","formatLegendData","dataCurrencies","_ref5","currency","list","length","filter","includes","name","itemStyle","color"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT, CURENCIES_ORDER, COLOR_CONFIG } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n const dateAndTime = param.split('T');\n\n return {\n date: dateAndTime[0],\n time: dateAndTime[1].substring(0, 5),\n };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n \|\| timeUnit === CurrencyPowerBalanceTimeUnit.M1\n \|\| timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n const { date, time } = getDateAndTime(label);\n const isDateFormat = isMonthWeek(timeUnit) \|\| time === '00:00';\n\n return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n dataLength: number,\n) => Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n const row = values\n .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n ${marker}\n <span>${seriesName}</span>\n </div>\n <span>${value[1]}</span>\n </div>`);\n\n return `<div style=\"display:flex; flex-direction:column;\">\n <span style=\"margin-bottom:5px;\">${date}</span>\n ${row.join('\\n')}\n </div>`;\n};\n\nconst formatLegendData = (values: CurrencyPowerBalance[]) => {\n const dataCurrencies = values.map(({ currency }) => currency);\n\n const list = dataCurrencies.length === CURENCIES_ORDER.length\n ? CURENCIES_ORDER\n : CURENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));\n\n return list.map((currency) => ({\n name: currency,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n }));\n};\n\nexport {\n isMonthWeek,\n tooltipFormatter,\n xAxisLabelFormatter,\n intervalFormatter,\n formatLegendData,\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
-import { intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';
-const getOption = (values, timeUnit, isDark) => {
-  const seriesData = values.map(_ref => {
+import { intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData } from './formatters';
+const getOption = (chartData, timeUnit, isDark) => {
+  const seriesData = chartData.map(_ref => {
     let {
       currency,
       power
@@ -26,12 +26,7 @@ const getOption = (values, timeUnit, isDark) => {
       })
     };
   });
-  const legendData = Object.keys(COLOR_CONFIG).map(currency => ({
-    name: currency,
-    itemStyle: {
-      color: COLOR_CONFIG[currency]
-    }
-  }));
+  const legendData = formatLegendData(chartData);
   return {
     animation: false,
     legend: {

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

	@@ -1 +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":[]}
1	+ {"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","intervalFormatter","tooltipFormatter","xAxisLabelFormatter","formatLegendData","getOption","chartData","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","formatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","padding","align","margin","rotate","interval","length","label","yAxis","position","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport {\n intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,\n} from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n chartData: CurrencyPowerBalance[],\n timeUnit: CurrencyPowerBalanceTimeUnit,\n isDark: boolean,\n) => {\n const seriesData = chartData.map(({ currency, power }) => ({\n name: currency,\n type: 'line',\n symbol: 'circle',\n showSymbol: false,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n lineStyle: {\n color: COLOR_CONFIG[currency],\n },\n data: power.map(({ point, price }) => [point, price]),\n }));\n\n const legendData = formatLegendData(chartData);\n\n return {\n animation: false,\n legend: {\n data: legendData,\n bottom: 10,\n icon: 'circle',\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n axis: 'x',\n z: 0,\n lineStyle: {\n color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n },\n },\n formatter: tooltipFormatter,\n extraCssText: 'z-index: 1',\n },\n xAxis: {\n type: 'category',\n axisTick: {\n show: false,\n },\n axisLine: { show: false },\n splitLine: {\n show: true,\n },\n axisLabel: {\n padding: [0, 0, 0, 4],\n align: 'left',\n margin: 10,\n rotate: -45,\n interval: intervalFormatter(seriesData[0].data.length),\n formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n },\n },\n yAxis: {\n type: 'value',\n position: 'right',\n splitNumber: 5,\n axisLine: { show: false },\n axisTick: { show: false },\n boundaryGap: ['10%', '10%'],\n axisLabel: {\n showMaxLabel: false,\n showMinLabel: false,\n },\n },\n series: seriesData,\n };\n};\n\nexport { getOption };\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,yBAAyB,QAAQ,aAAa;AACrE,SACEC,iBAAiB,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,gBAAgB,QACrE,cAAc;AAGrB,MAAMC,SAAS,GAAGA,CAChBC,SAAiC,EACjCC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,SAAS,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACzDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEpB,YAAY,CAACa,QAAQ;MAC9B,CAAC;MACDQ,SAAS,EAAE;QACTD,KAAK,EAAEpB,YAAY,CAACa,QAAQ;MAC9B,CAAC;MACDS,IAAI,EAAER,KAAK,CAACH,GAAG,CAACY,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,GAAGrB,gBAAgB,CAACE,SAAS,CAAC;EAE9C,OAAO;IACLoB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNN,IAAI,EAAEI,UAAU;MAChBG,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE,GAAG;QACTC,CAAC,EAAE,CAAC;QACJd,SAAS,EAAE;UACTD,KAAK,EAAEX,MAAM,GAAGR,yBAAyB,CAACmC,IAAI,GAAGnC,yBAAyB,CAACoC;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEnC,gBAAgB;MAC3BoC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACLxB,IAAI,EAAE,UAAU;MAChByB,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACrBC,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,EAAE;QACVC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAEhD,iBAAiB,CAACQ,UAAU,CAAC,CAAC,CAAC,CAACY,IAAI,CAAC6B,MAAM,CAAC;QACtDb,SAAS,EAAGc,KAAa,IAAKhD,mBAAmB,CAACgD,KAAK,EAAE5C,QAAQ;MACnE;IACF,CAAC;IACD6C,KAAK,EAAE;MACLrC,IAAI,EAAE,OAAO;MACbsC,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdZ,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBc,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3BX,SAAS,EAAE;QACTY,YAAY,EAAE,KAAK;QACnBC,YAAY,EAAE;MAChB;IACF,CAAC;IACDC,MAAM,EAAEjD;EACV,CAAC;AACH,CAAC;AAED,SAASJ,SAAS","ignoreList":[]}

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

	@@ -1 +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":[]}
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 currencies?: string[];\n}\n"],"mappings":"","ignoreList":[]}