@oanda/labs-currency-power-balance-widget 1.0.149 → 1.0.151

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.
@@ -4,59 +4,38 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.xAxisLabelFormatter = exports.tooltipFormatter = exports.isMonthWeek = exports.intervalFormatter = exports.formatLegendData = void 0;
7
+ var _labsWidgetCommon = require("@oanda/labs-widget-common");
7
8
  var _graphql = require("../../../../gql/types/graphql");
8
9
  var _constants = require("./constants");
9
- const getDateAndTime = param => {
10
- const dateAndTime = param.split('T');
11
- return {
12
- date: dateAndTime[0],
13
- time: dateAndTime[1].substring(0, 5)
14
- };
15
- };
16
- const dateFormat = date => `${new Date(date).toLocaleDateString(undefined, {
17
- month: 'numeric',
18
- day: 'numeric'
19
- })}`;
20
- const dateTimeFormat = _ref => {
21
- let {
22
- date,
23
- time
24
- } = _ref;
25
- return `${new Date(date).toLocaleDateString(undefined, {
26
- year: 'numeric',
27
- month: 'numeric',
28
- day: 'numeric'
29
- })}, ${time} UTC`;
30
- };
31
10
  const isMonthWeek = timeUnit => timeUnit === _graphql.CurrencyPowerBalanceTimeUnit.M3 || timeUnit === _graphql.CurrencyPowerBalanceTimeUnit.M1 || timeUnit === _graphql.CurrencyPowerBalanceTimeUnit.W1;
32
11
  exports.isMonthWeek = isMonthWeek;
33
12
  const xAxisLabelFormatter = (label, timeUnit) => {
34
13
  const {
35
14
  date,
36
15
  time
37
- } = getDateAndTime(label);
16
+ } = (0, _labsWidgetCommon.getChartDateAndTime)(label);
38
17
  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';
39
- return isDateFormat ? dateFormat(date) : time;
18
+ return isDateFormat ? (0, _labsWidgetCommon.chartDateFormat)(date) : time;
40
19
  };
41
20
  exports.xAxisLabelFormatter = xAxisLabelFormatter;
42
21
  const intervalFormatter = dataLength => Math.round(dataLength / _constants.VERTICAL_LINE_COUNT);
43
22
  exports.intervalFormatter = intervalFormatter;
44
23
  const tooltipFormatter = values => {
45
- const date = dateTimeFormat(getDateAndTime(values[0].value[0]));
46
- const row = values.sort((_ref2, _ref3) => {
24
+ const date = (0, _labsWidgetCommon.chartDateTimeFormat)((0, _labsWidgetCommon.getChartDateAndTime)(values[0].value[0]));
25
+ const row = values.sort((_ref, _ref2) => {
47
26
  let {
48
27
  value: valueA
49
- } = _ref2;
28
+ } = _ref;
50
29
  let {
51
30
  value: valueB
52
- } = _ref3;
31
+ } = _ref2;
53
32
  return Number(valueB[1]) - Number(valueA[1]);
54
- }).map(_ref4 => {
33
+ }).map(_ref3 => {
55
34
  let {
56
35
  marker,
57
36
  seriesName,
58
37
  value
59
- } = _ref4;
38
+ } = _ref3;
60
39
  return `<div style="display:flex;align-items:center;">
61
40
  <div style="display:flex;align-items:center;width:50px;margin-right:10px;">
62
41
  ${marker}
@@ -72,10 +51,10 @@ const tooltipFormatter = values => {
72
51
  };
73
52
  exports.tooltipFormatter = tooltipFormatter;
74
53
  const formatLegendData = values => {
75
- const dataCurrencies = values.map(_ref5 => {
54
+ const dataCurrencies = values.map(_ref4 => {
76
55
  let {
77
56
  currency
78
- } = _ref5;
57
+ } = _ref4;
79
58
  return currency;
80
59
  });
81
60
  const list = dataCurrencies.length === _constants.CURRENCIES_ORDER.length ? _constants.CURRENCIES_ORDER : _constants.CURRENCIES_ORDER.filter(currency => dataCurrencies.includes(currency));
@@ -1 +1 @@
1
- {"version":3,"file":"formatters.js","names":["_graphql","require","_constants","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","CurrencyPowerBalanceTimeUnit","M3","M1","W1","exports","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","VERTICAL_LINE_COUNT","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join","formatLegendData","dataCurrencies","_ref5","currency","list","length","CURRENCIES_ORDER","filter","includes","name","itemStyle","color","COLOR_CONFIG"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport {\n COLOR_CONFIG,\n CURRENCIES_ORDER,\n VERTICAL_LINE_COUNT,\n} from './constants';\nimport type { 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) =>\n `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string; time: string }) =>\n `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (timeUnit: CurrencyPowerBalanceTimeUnit) =>\n timeUnit === CurrencyPowerBalanceTimeUnit.M3 ||\n timeUnit === CurrencyPowerBalanceTimeUnit.M1 ||\n timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (\n label: string,\n timeUnit: CurrencyPowerBalanceTimeUnit\n) => {\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 = (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(\n ({ value: valueA }, { value: valueB }) =>\n Number(valueB[1]) - Number(valueA[1])\n )\n .map(\n ({\n marker,\n seriesName,\n value,\n }) => `<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\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 =\n dataCurrencies.length === CURRENCIES_ORDER.length\n ? CURRENCIES_ORDER\n : CURRENCIES_ORDER.filter((currency) =>\n dataCurrencies.includes(currency)\n );\n\n return list.map((currency) => ({\n name: currency,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n }));\n};\n\nexport {\n formatLegendData,\n intervalFormatter,\n isMonthWeek,\n tooltipFormatter,\n xAxisLabelFormatter,\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"formatters.js","names":["_labsWidgetCommon","require","_graphql","_constants","isMonthWeek","timeUnit","CurrencyPowerBalanceTimeUnit","M3","M1","W1","exports","xAxisLabelFormatter","label","date","time","getChartDateAndTime","isDateFormat","chartDateFormat","intervalFormatter","dataLength","Math","round","VERTICAL_LINE_COUNT","tooltipFormatter","values","chartDateTimeFormat","value","row","sort","_ref","_ref2","valueA","valueB","Number","map","_ref3","marker","seriesName","join","formatLegendData","dataCurrencies","_ref4","currency","list","length","CURRENCIES_ORDER","filter","includes","name","itemStyle","color","COLOR_CONFIG"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import {\n chartDateFormat,\n chartDateTimeFormat,\n getChartDateAndTime,\n} from '@oanda/labs-widget-common';\n\nimport type { CurrencyPowerBalance } from '../../../../gql/types/graphql';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport {\n COLOR_CONFIG,\n CURRENCIES_ORDER,\n VERTICAL_LINE_COUNT,\n} from './constants';\nimport type { TooltipFormatterParams } from './types';\n\nconst isMonthWeek = (timeUnit: CurrencyPowerBalanceTimeUnit) =>\n timeUnit === CurrencyPowerBalanceTimeUnit.M3 ||\n timeUnit === CurrencyPowerBalanceTimeUnit.M1 ||\n timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (\n label: string,\n timeUnit: CurrencyPowerBalanceTimeUnit\n) => {\n const { date, time } = getChartDateAndTime(label);\n const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';\n\n return isDateFormat ? chartDateFormat(date) : time;\n};\n\nconst intervalFormatter = (dataLength: number) =>\n Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n const date = chartDateTimeFormat(getChartDateAndTime(values[0].value[0]));\n\n const row = values\n .sort(\n ({ value: valueA }, { value: valueB }) =>\n Number(valueB[1]) - Number(valueA[1])\n )\n .map(\n ({\n marker,\n seriesName,\n value,\n }) => `<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\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 =\n dataCurrencies.length === CURRENCIES_ORDER.length\n ? CURRENCIES_ORDER\n : CURRENCIES_ORDER.filter((currency) =>\n dataCurrencies.includes(currency)\n );\n\n return list.map((currency) => ({\n name: currency,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n }));\n};\n\nexport {\n formatLegendData,\n intervalFormatter,\n isMonthWeek,\n tooltipFormatter,\n xAxisLabelFormatter,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAOA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAOA,MAAMG,WAAW,GAAIC,QAAsC,IACzDA,QAAQ,KAAKC,qCAA4B,CAACC,EAAE,IAC5CF,QAAQ,KAAKC,qCAA4B,CAACE,EAAE,IAC5CH,QAAQ,KAAKC,qCAA4B,CAACG,EAAE;AAACC,OAAA,CAAAN,WAAA,GAAAA,WAAA;AAE/C,MAAMO,mBAAmB,GAAGA,CAC1BC,KAAa,EACbP,QAAsC,KACnC;EACH,MAAM;IAAEQ,IAAI;IAAEC;EAAK,CAAC,GAAG,IAAAC,qCAAmB,EAACH,KAAK,CAAC;EACjD,MAAMI,YAAY,GAAGZ,WAAW,CAACC,QAAQ,CAAC,IAAIS,IAAI,KAAK,OAAO;EAE9D,OAAOE,YAAY,GAAG,IAAAC,iCAAe,EAACJ,IAAI,CAAC,GAAGC,IAAI;AACpD,CAAC;AAACJ,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAEF,MAAMO,iBAAiB,GAAIC,UAAkB,IAC3CC,IAAI,CAACC,KAAK,CAACF,UAAU,GAAGG,8BAAmB,CAAC;AAACZ,OAAA,CAAAQ,iBAAA,GAAAA,iBAAA;AAE/C,MAAMK,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAMX,IAAI,GAAG,IAAAY,qCAAmB,EAAC,IAAAV,qCAAmB,EAACS,MAAM,CAAC,CAAC,CAAC,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAEzE,MAAMC,GAAG,GAAGH,MAAM,CACfI,IAAI,CACH,CAAAC,IAAA,EAAAC,KAAA;IAAA,IAAC;MAAEJ,KAAK,EAAEK;IAAO,CAAC,GAAAF,IAAA;IAAA,IAAE;MAAEH,KAAK,EAAEM;IAAO,CAAC,GAAAF,KAAA;IAAA,OACnCG,MAAM,CAACD,MAAM,CAAC,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,MAAM,CAAC,CAAC,CAAC,CAAC;EAAA,CACzC,CAAC,CACAG,GAAG,CACFC,KAAA;IAAA,IAAC;MACCC,MAAM;MACNC,UAAU;MACVX;IACF,CAAC,GAAAS,KAAA;IAAA,OAAK;AACZ;AACA,UAAUC,MAAM;AAChB,gBAAgBC,UAAU;AAC1B;AACA,cAAcX,KAAK,CAAC,CAAC,CAAC;AACtB,WAAW;EAAA,CACP,CAAC;EAEH,OAAO;AACT,uCAAuCb,IAAI;AAC3C,MAAMc,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AACpB,SAAS;AACT,CAAC;AAAC5B,OAAA,CAAAa,gBAAA,GAAAA,gBAAA;AAEF,MAAMgB,gBAAgB,GAAIf,MAA8B,IAAK;EAC3D,MAAMgB,cAAc,GAAGhB,MAAM,CAACU,GAAG,CAACO,KAAA;IAAA,IAAC;MAAEC;IAAS,CAAC,GAAAD,KAAA;IAAA,OAAKC,QAAQ;EAAA,EAAC;EAE7D,MAAMC,IAAI,GACRH,cAAc,CAACI,MAAM,KAAKC,2BAAgB,CAACD,MAAM,GAC7CC,2BAAgB,GAChBA,2BAAgB,CAACC,MAAM,CAAEJ,QAAQ,IAC/BF,cAAc,CAACO,QAAQ,CAACL,QAAQ,CAClC,CAAC;EAEP,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;AAAChC,OAAA,CAAA6B,gBAAA,GAAAA,gBAAA","ignoreList":[]}
@@ -1,53 +1,32 @@
1
+ import { chartDateFormat, chartDateTimeFormat, getChartDateAndTime } from '@oanda/labs-widget-common';
1
2
  import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
2
3
  import { COLOR_CONFIG, CURRENCIES_ORDER, VERTICAL_LINE_COUNT } from './constants';
3
- const getDateAndTime = param => {
4
- const dateAndTime = param.split('T');
5
- return {
6
- date: dateAndTime[0],
7
- time: dateAndTime[1].substring(0, 5)
8
- };
9
- };
10
- const dateFormat = date => `${new Date(date).toLocaleDateString(undefined, {
11
- month: 'numeric',
12
- day: 'numeric'
13
- })}`;
14
- const dateTimeFormat = _ref => {
15
- let {
16
- date,
17
- time
18
- } = _ref;
19
- return `${new Date(date).toLocaleDateString(undefined, {
20
- year: 'numeric',
21
- month: 'numeric',
22
- day: 'numeric'
23
- })}, ${time} UTC`;
24
- };
25
4
  const isMonthWeek = timeUnit => timeUnit === CurrencyPowerBalanceTimeUnit.M3 || timeUnit === CurrencyPowerBalanceTimeUnit.M1 || timeUnit === CurrencyPowerBalanceTimeUnit.W1;
26
5
  const xAxisLabelFormatter = (label, timeUnit) => {
27
6
  const {
28
7
  date,
29
8
  time
30
- } = getDateAndTime(label);
9
+ } = getChartDateAndTime(label);
31
10
  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';
32
- return isDateFormat ? dateFormat(date) : time;
11
+ return isDateFormat ? chartDateFormat(date) : time;
33
12
  };
34
13
  const intervalFormatter = dataLength => Math.round(dataLength / VERTICAL_LINE_COUNT);
35
14
  const tooltipFormatter = values => {
36
- const date = dateTimeFormat(getDateAndTime(values[0].value[0]));
37
- const row = values.sort((_ref2, _ref3) => {
15
+ const date = chartDateTimeFormat(getChartDateAndTime(values[0].value[0]));
16
+ const row = values.sort((_ref, _ref2) => {
38
17
  let {
39
18
  value: valueA
40
- } = _ref2;
19
+ } = _ref;
41
20
  let {
42
21
  value: valueB
43
- } = _ref3;
22
+ } = _ref2;
44
23
  return Number(valueB[1]) - Number(valueA[1]);
45
- }).map(_ref4 => {
24
+ }).map(_ref3 => {
46
25
  let {
47
26
  marker,
48
27
  seriesName,
49
28
  value
50
- } = _ref4;
29
+ } = _ref3;
51
30
  return `<div style="display:flex;align-items:center;">
52
31
  <div style="display:flex;align-items:center;width:50px;margin-right:10px;">
53
32
  ${marker}
@@ -62,10 +41,10 @@ const tooltipFormatter = values => {
62
41
  </div>`;
63
42
  };
64
43
  const formatLegendData = values => {
65
- const dataCurrencies = values.map(_ref5 => {
44
+ const dataCurrencies = values.map(_ref4 => {
66
45
  let {
67
46
  currency
68
- } = _ref5;
47
+ } = _ref4;
69
48
  return currency;
70
49
  });
71
50
  const list = dataCurrencies.length === CURRENCIES_ORDER.length ? CURRENCIES_ORDER : CURRENCIES_ORDER.filter(currency => dataCurrencies.includes(currency));
@@ -1 +1 @@
1
- {"version":3,"file":"formatters.js","names":["CurrencyPowerBalanceTimeUnit","COLOR_CONFIG","CURRENCIES_ORDER","VERTICAL_LINE_COUNT","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","M3","M1","W1","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","Math","round","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join","formatLegendData","dataCurrencies","_ref5","currency","list","length","filter","includes","name","itemStyle","color"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport {\n COLOR_CONFIG,\n CURRENCIES_ORDER,\n VERTICAL_LINE_COUNT,\n} from './constants';\nimport type { 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) =>\n `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string; time: string }) =>\n `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (timeUnit: CurrencyPowerBalanceTimeUnit) =>\n timeUnit === CurrencyPowerBalanceTimeUnit.M3 ||\n timeUnit === CurrencyPowerBalanceTimeUnit.M1 ||\n timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (\n label: string,\n timeUnit: CurrencyPowerBalanceTimeUnit\n) => {\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 = (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(\n ({ value: valueA }, { value: valueB }) =>\n Number(valueB[1]) - Number(valueA[1])\n )\n .map(\n ({\n marker,\n seriesName,\n value,\n }) => `<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\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 =\n dataCurrencies.length === CURRENCIES_ORDER.length\n ? CURRENCIES_ORDER\n : CURRENCIES_ORDER.filter((currency) =>\n dataCurrencies.includes(currency)\n );\n\n return list.map((currency) => ({\n name: currency,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n }));\n};\n\nexport {\n formatLegendData,\n intervalFormatter,\n isMonthWeek,\n tooltipFormatter,\n xAxisLabelFormatter,\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"formatters.js","names":["chartDateFormat","chartDateTimeFormat","getChartDateAndTime","CurrencyPowerBalanceTimeUnit","COLOR_CONFIG","CURRENCIES_ORDER","VERTICAL_LINE_COUNT","isMonthWeek","timeUnit","M3","M1","W1","xAxisLabelFormatter","label","date","time","isDateFormat","intervalFormatter","dataLength","Math","round","tooltipFormatter","values","value","row","sort","_ref","_ref2","valueA","valueB","Number","map","_ref3","marker","seriesName","join","formatLegendData","dataCurrencies","_ref4","currency","list","length","filter","includes","name","itemStyle","color"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import {\n chartDateFormat,\n chartDateTimeFormat,\n getChartDateAndTime,\n} from '@oanda/labs-widget-common';\n\nimport type { CurrencyPowerBalance } from '../../../../gql/types/graphql';\nimport { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport {\n COLOR_CONFIG,\n CURRENCIES_ORDER,\n VERTICAL_LINE_COUNT,\n} from './constants';\nimport type { TooltipFormatterParams } from './types';\n\nconst isMonthWeek = (timeUnit: CurrencyPowerBalanceTimeUnit) =>\n timeUnit === CurrencyPowerBalanceTimeUnit.M3 ||\n timeUnit === CurrencyPowerBalanceTimeUnit.M1 ||\n timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (\n label: string,\n timeUnit: CurrencyPowerBalanceTimeUnit\n) => {\n const { date, time } = getChartDateAndTime(label);\n const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';\n\n return isDateFormat ? chartDateFormat(date) : time;\n};\n\nconst intervalFormatter = (dataLength: number) =>\n Math.round(dataLength / VERTICAL_LINE_COUNT);\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n const date = chartDateTimeFormat(getChartDateAndTime(values[0].value[0]));\n\n const row = values\n .sort(\n ({ value: valueA }, { value: valueB }) =>\n Number(valueB[1]) - Number(valueA[1])\n )\n .map(\n ({\n marker,\n seriesName,\n value,\n }) => `<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\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 =\n dataCurrencies.length === CURRENCIES_ORDER.length\n ? CURRENCIES_ORDER\n : CURRENCIES_ORDER.filter((currency) =>\n dataCurrencies.includes(currency)\n );\n\n return list.map((currency) => ({\n name: currency,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n }));\n};\n\nexport {\n formatLegendData,\n intervalFormatter,\n isMonthWeek,\n tooltipFormatter,\n xAxisLabelFormatter,\n};\n"],"mappings":"AAAA,SACEA,eAAe,EACfC,mBAAmB,EACnBC,mBAAmB,QACd,2BAA2B;AAGlC,SAASC,4BAA4B,QAAQ,+BAA+B;AAC5E,SACEC,YAAY,EACZC,gBAAgB,EAChBC,mBAAmB,QACd,aAAa;AAGpB,MAAMC,WAAW,GAAIC,QAAsC,IACzDA,QAAQ,KAAKL,4BAA4B,CAACM,EAAE,IAC5CD,QAAQ,KAAKL,4BAA4B,CAACO,EAAE,IAC5CF,QAAQ,KAAKL,4BAA4B,CAACQ,EAAE;AAE9C,MAAMC,mBAAmB,GAAGA,CAC1BC,KAAa,EACbL,QAAsC,KACnC;EACH,MAAM;IAAEM,IAAI;IAAEC;EAAK,CAAC,GAAGb,mBAAmB,CAACW,KAAK,CAAC;EACjD,MAAMG,YAAY,GAAGT,WAAW,CAACC,QAAQ,CAAC,IAAIO,IAAI,KAAK,OAAO;EAE9D,OAAOC,YAAY,GAAGhB,eAAe,CAACc,IAAI,CAAC,GAAGC,IAAI;AACpD,CAAC;AAED,MAAME,iBAAiB,GAAIC,UAAkB,IAC3CC,IAAI,CAACC,KAAK,CAACF,UAAU,GAAGZ,mBAAmB,CAAC;AAE9C,MAAMe,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAMR,IAAI,GAAGb,mBAAmB,CAACC,mBAAmB,CAACoB,MAAM,CAAC,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAEzE,MAAMC,GAAG,GAAGF,MAAM,CACfG,IAAI,CACH,CAAAC,IAAA,EAAAC,KAAA;IAAA,IAAC;MAAEJ,KAAK,EAAEK;IAAO,CAAC,GAAAF,IAAA;IAAA,IAAE;MAAEH,KAAK,EAAEM;IAAO,CAAC,GAAAF,KAAA;IAAA,OACnCG,MAAM,CAACD,MAAM,CAAC,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,MAAM,CAAC,CAAC,CAAC,CAAC;EAAA,CACzC,CAAC,CACAG,GAAG,CACFC,KAAA;IAAA,IAAC;MACCC,MAAM;MACNC,UAAU;MACVX;IACF,CAAC,GAAAS,KAAA;IAAA,OAAK;AACZ;AACA,UAAUC,MAAM;AAChB,gBAAgBC,UAAU;AAC1B;AACA,cAAcX,KAAK,CAAC,CAAC,CAAC;AACtB,WAAW;EAAA,CACP,CAAC;EAEH,OAAO;AACT,uCAAuCT,IAAI;AAC3C,MAAMU,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AACpB,SAAS;AACT,CAAC;AAED,MAAMC,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,GACRH,cAAc,CAACI,MAAM,KAAKpC,gBAAgB,CAACoC,MAAM,GAC7CpC,gBAAgB,GAChBA,gBAAgB,CAACqC,MAAM,CAAEH,QAAQ,IAC/BF,cAAc,CAACM,QAAQ,CAACJ,QAAQ,CAClC,CAAC;EAEP,OAAOC,IAAI,CAACT,GAAG,CAAEQ,QAAQ,KAAM;IAC7BK,IAAI,EAAEL,QAAQ;IACdM,SAAS,EAAE;MACTC,KAAK,EAAE1C,YAAY,CAACmC,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SACEH,gBAAgB,EAChBnB,iBAAiB,EACjBV,WAAW,EACXc,gBAAgB,EAChBT,mBAAmB","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oanda/labs-currency-power-balance-widget",
3
- "version": "1.0.149",
3
+ "version": "1.0.151",
4
4
  "description": "Labs Currency Power Balance Widget",
5
5
  "main": "dist/main/index.js",
6
6
  "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
12
12
  "author": "OANDA",
13
13
  "license": "UNLICENSED",
14
14
  "dependencies": {
15
- "@oanda/labs-widget-common": "^1.0.210",
15
+ "@oanda/labs-widget-common": "^1.0.212",
16
16
  "@oanda/mono-i18n": "10.0.1",
17
17
  "echarts": "5.5.0",
18
18
  "echarts-for-react": "3.0.2",
@@ -22,5 +22,5 @@
22
22
  "@graphql-codegen/cli": "5.0.0",
23
23
  "@graphql-codegen/client-preset": "4.1.0"
24
24
  },
25
- "gitHead": "814252992e994774642c44cf586ba774c08611aa"
25
+ "gitHead": "53a43d8d60d462d74949c32e30a75b09e86f659d"
26
26
  }
@@ -1,3 +1,9 @@
1
+ import {
2
+ chartDateFormat,
3
+ chartDateTimeFormat,
4
+ getChartDateAndTime,
5
+ } from '@oanda/labs-widget-common';
6
+
1
7
  import type { CurrencyPowerBalance } from '../../../../gql/types/graphql';
2
8
  import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
3
9
  import {
@@ -7,21 +13,6 @@ import {
7
13
  } from './constants';
8
14
  import type { TooltipFormatterParams } from './types';
9
15
 
10
- const getDateAndTime = (param: string) => {
11
- const dateAndTime = param.split('T');
12
-
13
- return {
14
- date: dateAndTime[0],
15
- time: dateAndTime[1].substring(0, 5),
16
- };
17
- };
18
-
19
- const dateFormat = (date: string) =>
20
- `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;
21
-
22
- const dateTimeFormat = ({ date, time }: { date: string; time: string }) =>
23
- `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;
24
-
25
16
  const isMonthWeek = (timeUnit: CurrencyPowerBalanceTimeUnit) =>
26
17
  timeUnit === CurrencyPowerBalanceTimeUnit.M3 ||
27
18
  timeUnit === CurrencyPowerBalanceTimeUnit.M1 ||
@@ -31,17 +22,17 @@ const xAxisLabelFormatter = (
31
22
  label: string,
32
23
  timeUnit: CurrencyPowerBalanceTimeUnit
33
24
  ) => {
34
- const { date, time } = getDateAndTime(label);
25
+ const { date, time } = getChartDateAndTime(label);
35
26
  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';
36
27
 
37
- return isDateFormat ? dateFormat(date) : time;
28
+ return isDateFormat ? chartDateFormat(date) : time;
38
29
  };
39
30
 
40
31
  const intervalFormatter = (dataLength: number) =>
41
32
  Math.round(dataLength / VERTICAL_LINE_COUNT);
42
33
 
43
34
  const tooltipFormatter = (values: TooltipFormatterParams[]) => {
44
- const date = dateTimeFormat(getDateAndTime(values[0].value[0]));
35
+ const date = chartDateTimeFormat(getChartDateAndTime(values[0].value[0]));
45
36
 
46
37
  const row = values
47
38
  .sort(