@oanda/labs-currency-power-balance-widget 1.0.105 → 1.0.106
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.
- package/CHANGELOG.md +428 -0
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/Chart.js +6 -2
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/Chart.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js +3 -2
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js +50 -6
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map +1 -1
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/utils.js +10 -0
- package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/utils.js.map +1 -0
- package/dist/main/translations/sources/en.json +1 -0
- package/dist/main/translations/sources/es.json +1 -0
- package/dist/main/translations/sources/th.json +1 -0
- package/dist/main/translations/sources/zh_TW.json +1 -0
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/Chart.js +7 -3
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/Chart.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js +3 -2
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js +2 -2
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js +50 -6
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map +1 -1
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/utils.js +4 -0
- package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/utils.js.map +1 -0
- package/dist/module/translations/sources/en.json +1 -0
- package/dist/module/translations/sources/es.json +1 -0
- package/dist/module/translations/sources/th.json +1 -0
- package/dist/module/translations/sources/zh_TW.json +1 -0
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/constants.d.ts +3 -2
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/getOption.d.ts +40 -4
- package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/utils.d.ts +2 -0
- package/package.json +3 -3
- package/src/CurrencyPowerBalanceWidget/components/Chart/Chart.tsx +5 -2
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/{constants.tsx → constants.ts} +5 -2
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts +4 -4
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts +54 -4
- package/src/CurrencyPowerBalanceWidget/components/Chart/options/utils.ts +12 -0
- package/src/translations/sources/en.json +1 -0
- package/src/translations/sources/es.json +1 -0
- package/src/translations/sources/th.json +1 -0
- package/src/translations/sources/zh_TW.json +1 -0
- package/test/chartFormatters.test.ts +3 -1
- package/test/utils.test.ts +34 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getOption.js","names":["
|
|
1
|
+
{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_constants","_formatters","_graphql","_utils","getOption","chartData","timeUnit","isDark","lang","currentTheme","darkTheme","lightTheme","dataTimestamps","power","map","x","Date","point","getTime","weekendsIndexes","findLastIndexesBeforeWeekend","disableWeekendsIndicator","CurrencyPowerBalanceTimeUnit","CurrentDay","PreviousDay","M3","includes","length","weekendsMarks","item","xAxis","label","formatter","seriesData","_ref","index","currency","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","data","_ref2","price","markLine","show","position","align","distance","padding","fontSize","shadowBlur","shadowOffsetX","shadowOffsetY","borderWidth","textPrimary","shadowColor","borderRadius","backgroundColor","borderPrimary","backgroundSecondary","emphasis","lineStyle","width","opacity","undefined","legendData","formatLegendData","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","tooltipFormatter","extraCssText","axisTick","axisLine","splitLine","axisLabel","margin","rotate","interval","intervalFormatter","xAxisLabelFormatter","yAxis","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { darkTheme, lightTheme } from '@oanda/labs-widget-common';\nimport { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport {\n intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,\n} from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { findLastIndexesBeforeWeekend } from './utils';\n\nconst getOption = (\n chartData: CurrencyPowerBalance[],\n timeUnit: CurrencyPowerBalanceTimeUnit,\n isDark: boolean,\n lang: (key: string) => string,\n) => {\n const currentTheme = isDark ? darkTheme : lightTheme;\n const dataTimestamps = chartData[0].power.map((x) => new Date(x.point).getTime());\n const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);\n const disableWeekendsIndicator = [\n CurrencyPowerBalanceTimeUnit.CurrentDay,\n CurrencyPowerBalanceTimeUnit.PreviousDay,\n CurrencyPowerBalanceTimeUnit.M3,\n ].includes(timeUnit) || weekendsIndexes.length === 0;\n\n const weekendsMarks = weekendsIndexes.map((item) => ({\n xAxis: item,\n label: {\n formatter: () => lang('market_closed'),\n },\n }));\n\n const seriesData = chartData.map(({ currency, power }, index) => ({\n name: currency,\n type: 'line',\n symbol: 'circle',\n showSymbol: false,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n data: power.map(({ point, price }) => [point, price]),\n markLine: index === chartData.length - 1 && !disableWeekendsIndicator ? {\n label: {\n show: false,\n position: 'end',\n align: 'center',\n distance: -32,\n padding: [8, 8],\n fontSize: 12,\n shadowBlur: 24,\n shadowOffsetX: 0,\n shadowOffsetY: 6,\n borderWidth: 0,\n color: currentTheme.textPrimary,\n shadowColor: 'rgba(0,0,0,0.1)',\n borderRadius: 4,\n backgroundColor: isDark ? currentTheme.borderPrimary : currentTheme.backgroundSecondary,\n },\n show: false,\n emphasis: {\n label: {\n show: true,\n },\n lineStyle: {\n width: 1,\n opacity: 0,\n color: currentTheme.borderPrimary,\n },\n },\n symbol: ['none', 'none'],\n itemStyle: {\n color: currentTheme.borderPrimary,\n },\n data: weekendsMarks,\n } : undefined,\n }));\n\n const legendData = formatLegendData(chartData);\n\n return {\n animation: false,\n legend: {\n data: legendData,\n bottom: 10,\n icon: 'circle',\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n axis: 'x',\n z: 0,\n lineStyle: {\n color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n },\n },\n formatter: tooltipFormatter,\n extraCssText: 'z-index: 1',\n },\n xAxis: {\n type: 'category',\n axisTick: {\n show: false,\n },\n axisLine: { show: false },\n splitLine: {\n show: true,\n },\n axisLabel: {\n padding: [0, 0, 0, 4],\n align: 'left',\n margin: 10,\n rotate: -45,\n interval: intervalFormatter(seriesData[0].data.length),\n formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n },\n },\n yAxis: {\n type: 'value',\n position: 'right',\n splitNumber: 5,\n axisLine: { show: false },\n axisTick: { show: false },\n boundaryGap: ['10%', '10%'],\n axisLabel: {\n showMaxLabel: false,\n showMinLabel: false,\n },\n },\n series: seriesData,\n };\n};\n\nexport { getOption };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.findLastIndexesBeforeWeekend = void 0;
|
|
7
|
+
var _constants = require("./constants");
|
|
8
|
+
const findLastIndexesBeforeWeekend = timestamps => timestamps.reduce((acc, timestamp, index) => timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= _constants.WEEKEND_DURATION ? [...acc, index] : acc, []);
|
|
9
|
+
exports.findLastIndexesBeforeWeekend = findLastIndexesBeforeWeekend;
|
|
10
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":["_constants","require","findLastIndexesBeforeWeekend","timestamps","reduce","acc","timestamp","index","length","WEEKEND_DURATION","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/utils.ts"],"sourcesContent":["import { WEEKEND_DURATION } from './constants';\n\nconst findLastIndexesBeforeWeekend = (timestamps: number[]) => timestamps\n .reduce((acc, timestamp, index) => (\n timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= WEEKEND_DURATION\n ? [...acc, index]\n : acc\n ), [] as number[]);\n\nexport {\n findLastIndexesBeforeWeekend,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEA,MAAMC,4BAA4B,GAAIC,UAAoB,IAAKA,UAAU,CACtEC,MAAM,CAAC,CAACC,GAAG,EAAEC,SAAS,EAAEC,KAAK,KAC5BJ,UAAU,CAACK,MAAM,GAAG,CAAC,KAAKD,KAAK,IAAIJ,UAAU,CAACI,KAAK,GAAG,CAAC,CAAC,GAAGD,SAAS,IAAIG,2BAAgB,GACpF,CAAC,GAAGJ,GAAG,EAAEE,KAAK,CAAC,GACfF,GACL,EAAE,EAAc,CAAC;AAACK,OAAA,CAAAR,4BAAA,GAAAA,4BAAA","ignoreList":[]}
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"hour": "{{count}} Hour",
|
|
11
11
|
"hour_plural": "{{count}} Hours",
|
|
12
12
|
"last_updated": "Last updated",
|
|
13
|
+
"market_closed": "market closed",
|
|
13
14
|
"month": "{{count}} Month",
|
|
14
15
|
"month_plural": "{{count}} Months",
|
|
15
16
|
"pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"hour": "{{count}} Hora",
|
|
11
11
|
"hour_plural": "{{count}} Horas",
|
|
12
12
|
"last_updated": "Última actualización",
|
|
13
|
+
"market_closed": "mercado cerrado",
|
|
13
14
|
"month": "{{count}} Mes",
|
|
14
15
|
"month_plural": "{{count}} Meses",
|
|
15
16
|
"pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} de {{itemCount}} entradas",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"data_unavailable": "ข้อมูลไม่พร้อมใช้งาน",
|
|
10
10
|
"hour_0": "{{count}} ชั่วโมง",
|
|
11
11
|
"last_updated": "ปรับปรุงล่าสุด",
|
|
12
|
+
"market_closed": "ตลาดปิดทำการ",
|
|
12
13
|
"month_0": "{{count}} เดือน",
|
|
13
14
|
"pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} จาก {{itemCount}} รายการ",
|
|
14
15
|
"previous_business_day": "วันทำการก่อนหน้า",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"data_unavailable": "沒有數據",
|
|
10
10
|
"hour_0": "{{count}} 時",
|
|
11
11
|
"last_updated": "最後更新",
|
|
12
|
+
"market_closed": "市場已收盤",
|
|
12
13
|
"month_0": "{{count}} 月",
|
|
13
14
|
"pagination_entries_range": "{{itemCount}}个挂单中的{{firstItemOnPage}}-{{lastItemOnPage}}",
|
|
14
15
|
"previous_business_day": "前一營業日",
|
|
@@ -3,11 +3,12 @@ import ReactEChartsCore from 'echarts-for-react/lib/core';
|
|
|
3
3
|
import * as echarts from 'echarts/core';
|
|
4
4
|
import { LineChart } from 'echarts/charts';
|
|
5
5
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
6
|
-
import { GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent } from 'echarts/components';
|
|
6
|
+
import { GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, MarkLineComponent } from 'echarts/components';
|
|
7
7
|
import { Theme, ThemeContext, getChartTheme, Size } from '@oanda/labs-widget-common';
|
|
8
|
+
import { useLocale } from '@oanda/mono-i18n';
|
|
8
9
|
import { CHART_HEIGHT } from './options/constants';
|
|
9
10
|
import { getResponsiveOption, getOption } from './options';
|
|
10
|
-
echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, LineChart, CanvasRenderer]);
|
|
11
|
+
echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, LineChart, CanvasRenderer, MarkLineComponent]);
|
|
11
12
|
echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
|
|
12
13
|
echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
|
|
13
14
|
const Chart = _ref => {
|
|
@@ -16,6 +17,9 @@ const Chart = _ref => {
|
|
|
16
17
|
timeUnit,
|
|
17
18
|
currencies
|
|
18
19
|
} = _ref;
|
|
20
|
+
const {
|
|
21
|
+
lang
|
|
22
|
+
} = useLocale();
|
|
19
23
|
const {
|
|
20
24
|
isDark,
|
|
21
25
|
size
|
|
@@ -43,7 +47,7 @@ const Chart = _ref => {
|
|
|
43
47
|
height: `${CHART_HEIGHT}px`,
|
|
44
48
|
width: '100%'
|
|
45
49
|
},
|
|
46
|
-
option: getOption(chartData, timeUnit, isDark)
|
|
50
|
+
option: getOption(chartData, timeUnit, isDark, lang)
|
|
47
51
|
});
|
|
48
52
|
};
|
|
49
53
|
export { Chart };
|
|
@@ -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","currencies","isDark","size","isDesktop","DESKTOP","isMobile","MOBILE","echartRef","chartData","filter","_ref2","currency","includes","current","echartInstance","getEchartsInstance","setOption","createElement","ref","theme","style","height","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,
|
|
1
|
+
{"version":3,"file":"Chart.js","names":["React","useRef","useEffect","useContext","ReactEChartsCore","echarts","LineChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","LegendPlainComponent","MarkLineComponent","Theme","ThemeContext","getChartTheme","Size","useLocale","CHART_HEIGHT","getResponsiveOption","getOption","use","registerTheme","Dark","Light","Chart","_ref","values","timeUnit","currencies","lang","isDark","size","isDesktop","DESKTOP","isMobile","MOBILE","echartRef","chartData","filter","_ref2","currency","includes","current","echartInstance","getEchartsInstance","setOption","createElement","ref","theme","style","height","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, MarkLineComponent,\n} from 'echarts/components';\nimport {\n Theme, ThemeContext, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\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 MarkLineComponent,\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 { lang } = useLocale();\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, lang)}\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,EAAEC,iBAAiB,QAC3F,oBAAoB;AAC3B,SACEC,KAAK,EAAEC,YAAY,EAAEC,aAAa,EAAEC,IAAI,QACnC,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SACEC,YAAY,QACP,qBAAqB;AAC5B,SAASC,mBAAmB,EAAEC,SAAS,QAAQ,WAAW;AAG1Df,OAAO,CAACgB,GAAG,CAAC,CACVb,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,EAChBC,oBAAoB,EACpBL,SAAS,EACTC,cAAc,EACdK,iBAAiB,CAClB,CAAC;AAEFP,OAAO,CAACiB,aAAa,CAAC,YAAY,EAAEP,aAAa,CAACF,KAAK,CAACU,IAAI,CAAC,CAAC;AAC9DlB,OAAO,CAACiB,aAAa,CAAC,aAAa,EAAEP,aAAa,CAACF,KAAK,CAACW,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAkD;EAAA,IAAjD;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAuB,CAAC,GAAAH,IAAA;EACzD,MAAM;IAAEI;EAAK,CAAC,GAAGb,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEc,MAAM;IAAEC;EAAK,CAAC,GAAG7B,UAAU,CAACW,YAAY,CAAC;EACjD,MAAMmB,SAAS,GAAGD,IAAI,KAAKhB,IAAI,CAACkB,OAAO;EACvC,MAAMC,QAAQ,GAAGH,IAAI,KAAKhB,IAAI,CAACoB,MAAM;EAErC,MAAMC,SAAS,GAAGpC,MAAM,CAAC,IAAI,CAAC;EAE9B,MAAMqC,SAAS,GAAGT,UAAU,GACxBF,MAAM,CAACY,MAAM,CAACC,KAAA;IAAA,IAAC;MAAEC;IAAS,CAAC,GAAAD,KAAA;IAAA,OAAKX,UAAU,CAACa,QAAQ,CAACD,QAAQ,CAAC;EAAA,EAAC,GAC9Dd,MAAM;EAEVzB,SAAS,CAAC,MAAM;IACd,IAAImC,SAAS,CAACM,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGP,SAAS,CAACM,OAAO,CAACE,kBAAkB,CAAC,CAAwB;MAEpFD,cAAc,CAACE,SAAS,CACtB3B,mBAAmB,CAACc,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CACjD,CAAC;IACH;EACF,CAAC,EAAE,CAACM,SAAS,EAAEJ,SAAS,EAAEE,QAAQ,EAAEJ,MAAM,CAAC,CAAC;EAE5C,OACE/B,KAAA,CAAA+C,aAAA,CAAC3C,gBAAgB;IACfC,OAAO,EAAEA,OAAQ;IACjB2C,GAAG,EAAEX,SAAU;IACfY,KAAK,EAAElB,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7CmB,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGjC,YAAY,IAAI;MAC3BkC,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAEjC,SAAS,CAACkB,SAAS,EAAEV,QAAQ,EAAEG,MAAM,EAAED,IAAI;EAAE,CACtD,CAAC;AAEN,CAAC;AAED,SAASL,KAAK","ignoreList":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { colorPalette } from '@oanda/labs-widget-common';
|
|
2
2
|
import { CurrencyName } from '../../../../gql/types/graphql';
|
|
3
|
+
const WEEKEND_DURATION = 172800000;
|
|
3
4
|
const X_LABEL_SIZE = 90;
|
|
4
5
|
const X_LABEL_SIZE_MOBILE = 110;
|
|
5
6
|
const Y_LABEL_SIZE_MOBILE = 35;
|
|
@@ -11,7 +12,7 @@ const LEGEND_HEIGHT_MOBILE = 70;
|
|
|
11
12
|
const VERTICAL_LINE_COUNT = 10;
|
|
12
13
|
const CANDLE_NUMBER_HOUR = 12;
|
|
13
14
|
const CANDLE_MINUTE = 5;
|
|
14
|
-
const
|
|
15
|
+
const CURRENCIES_ORDER = [CurrencyName.Usd, CurrencyName.Eur, CurrencyName.Gbp, CurrencyName.Cad, CurrencyName.Aud, CurrencyName.Chf, CurrencyName.Jpy, CurrencyName.Nzd];
|
|
15
16
|
const COLOR_CONFIG = {
|
|
16
17
|
USD: colorPalette.greenLight,
|
|
17
18
|
EUR: colorPalette.turquoiseLight,
|
|
@@ -26,5 +27,5 @@ const TOOLTIP_LINE_COLOR_CONFIG = {
|
|
|
26
27
|
DARK: colorPalette.orange,
|
|
27
28
|
LIGHT: colorPalette.bottleGreenDark
|
|
28
29
|
};
|
|
29
|
-
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,
|
|
30
|
+
export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE, CURRENCIES_ORDER, WEEKEND_DURATION };
|
|
30
31
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
1
|
+
{"version":3,"file":"constants.js","names":["colorPalette","CurrencyName","WEEKEND_DURATION","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","CURRENCIES_ORDER","Usd","Eur","Gbp","Cad","Aud","Chf","Jpy","Nzd","COLOR_CONFIG","USD","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreenLight75","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport { CurrencyName } from '../../../../gql/types/graphql';\n\nconst WEEKEND_DURATION = 172800000;\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 CURRENCIES_ORDER: CurrencyName[] = [\n CurrencyName.Usd,\n CurrencyName.Eur,\n CurrencyName.Gbp,\n CurrencyName.Cad,\n CurrencyName.Aud,\n CurrencyName.Chf,\n CurrencyName.Jpy,\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.bottleGreenLight75,\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 CURRENCIES_ORDER,\n WEEKEND_DURATION,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,MAAMC,gBAAgB,GAAG,SAAS;AAElC,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,gBAAgC,GAAG,CACvCb,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,EAChBpB,YAAY,CAACqB,GAAG,CACjB;AAED,MAAMC,YAAY,GAAG;EACnBC,GAAG,EAAExB,YAAY,CAACyB,UAAU;EAC5BC,GAAG,EAAE1B,YAAY,CAAC2B,cAAc;EAChCC,GAAG,EAAE5B,YAAY,CAAC6B,WAAW;EAC7BC,GAAG,EAAE9B,YAAY,CAAC+B,cAAc;EAChCC,GAAG,EAAEhC,YAAY,CAACiC,kBAAkB;EACpCC,GAAG,EAAElC,YAAY,CAACmC,MAAM;EACxBC,GAAG,EAAEpC,YAAY,CAACqC,iBAAiB;EACnCC,GAAG,EAAEtC,YAAY,CAACuC;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAG;EAChCC,IAAI,EAAEzC,YAAY,CAACmC,MAAM;EACzBO,KAAK,EAAE1C,YAAY,CAAC2C;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,gBAAgB,EAChBZ,gBAAgB","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
2
|
-
import { VERTICAL_LINE_COUNT,
|
|
2
|
+
import { VERTICAL_LINE_COUNT, CURRENCIES_ORDER, COLOR_CONFIG } from './constants';
|
|
3
3
|
const getDateAndTime = param => {
|
|
4
4
|
const dateAndTime = param.split('T');
|
|
5
5
|
return {
|
|
@@ -68,7 +68,7 @@ const formatLegendData = values => {
|
|
|
68
68
|
} = _ref5;
|
|
69
69
|
return currency;
|
|
70
70
|
});
|
|
71
|
-
const list = dataCurrencies.length ===
|
|
71
|
+
const list = dataCurrencies.length === CURRENCIES_ORDER.length ? CURRENCIES_ORDER : CURRENCIES_ORDER.filter(currency => dataCurrencies.includes(currency));
|
|
72
72
|
return list.map(currency => ({
|
|
73
73
|
name: currency,
|
|
74
74
|
itemStyle: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formatters.js","names":["CurrencyPowerBalanceTimeUnit","VERTICAL_LINE_COUNT","
|
|
1
|
+
{"version":3,"file":"formatters.js","names":["CurrencyPowerBalanceTimeUnit","VERTICAL_LINE_COUNT","CURRENCIES_ORDER","COLOR_CONFIG","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 { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { VERTICAL_LINE_COUNT, CURRENCIES_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 === CURRENCIES_ORDER.length\n ? CURRENCIES_ORDER\n : CURRENCIES_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,SAA+BA,4BAA4B,QAAQ,+BAA+B;AAClG,SAASC,mBAAmB,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,aAAa;AAGjF,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,IAAK,GAAG,IAAII,IAAI,CAACJ,IAAI,CAAC,CAACK,kBAAkB,CAACC,SAAS,EAAE;EAAEC,KAAK,EAAE,SAAS;EAAEC,GAAG,EAAE;AAAU,CAAC,CAAC,EAAE;AAE5H,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;IAAEV,IAAI;IAAEC;EAAqC,CAAC,GAAAS,IAAA;EAAA,OAAK,GAAG,IAAIN,IAAI,CAACJ,IAAI,CAAC,CAACK,kBAAkB,CAACC,SAAS,EAAE;IAAEK,IAAI,EAAE,SAAS;IAAEJ,KAAK,EAAE,SAAS;IAAEC,GAAG,EAAE;EAAU,CAAC,CAAC,KAAKP,IAAI,MAAM;AAAA;AAEhM,MAAMW,WAAW,GACfC,QAAsC,IACnCA,QAAQ,KAAKrB,4BAA4B,CAACsB,EAAE,IAC5CD,QAAQ,KAAKrB,4BAA4B,CAACuB,EAAE,IAC5CF,QAAQ,KAAKrB,4BAA4B,CAACwB,EAAE;AAEjD,MAAMC,mBAAmB,GAAGA,CAACC,KAAa,EAAEL,QAAsC,KAAK;EACrF,MAAM;IAAEb,IAAI;IAAEC;EAAK,CAAC,GAAGL,cAAc,CAACsB,KAAK,CAAC;EAC5C,MAAMC,YAAY,GAAGP,WAAW,CAACC,QAAQ,CAAC,IAAIZ,IAAI,KAAK,OAAO;EAE9D,OAAOkB,YAAY,GAAGhB,UAAU,CAACH,IAAI,CAAC,GAAGC,IAAI;AAC/C,CAAC;AAED,MAAMmB,iBAAiB,GACrBC,UAAkB,IACfC,IAAI,CAACC,KAAK,CAACF,UAAU,GAAG5B,mBAAmB,CAAC;AAEjD,MAAM+B,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAMzB,IAAI,GAAGS,cAAc,CAACb,cAAc,CAAC6B,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,OAAK;AAC5C;AACA,UAAUC,MAAM;AAChB,gBAAgBC,UAAU;AAC1B;AACA,cAAcX,KAAK,CAAC,CAAC,CAAC;AACtB,WAAW;EAAA,EAAC;EAEV,OAAO;AACT,uCAAuC1B,IAAI;AAC3C,MAAM2B,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,GAAGH,cAAc,CAACI,MAAM,KAAKlD,gBAAgB,CAACkD,MAAM,GAC1DlD,gBAAgB,GAChBA,gBAAgB,CAACmD,MAAM,CAAEH,QAAQ,IAAKF,cAAc,CAACM,QAAQ,CAACJ,QAAQ,CAAC,CAAC;EAE5E,OAAOC,IAAI,CAACT,GAAG,CAAEQ,QAAQ,KAAM;IAC7BK,IAAI,EAAEL,QAAQ;IACdM,SAAS,EAAE;MACTC,KAAK,EAAEtD,YAAY,CAAC+C,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SACE9B,WAAW,EACXY,gBAAgB,EAChBP,mBAAmB,EACnBG,iBAAiB,EACjBmB,gBAAgB","ignoreList":[]}
|
|
@@ -1,7 +1,20 @@
|
|
|
1
|
+
import { darkTheme, lightTheme } from '@oanda/labs-widget-common';
|
|
1
2
|
import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
|
|
2
3
|
import { intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData } from './formatters';
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
5
|
+
import { findLastIndexesBeforeWeekend } from './utils';
|
|
6
|
+
const getOption = (chartData, timeUnit, isDark, lang) => {
|
|
7
|
+
const currentTheme = isDark ? darkTheme : lightTheme;
|
|
8
|
+
const dataTimestamps = chartData[0].power.map(x => new Date(x.point).getTime());
|
|
9
|
+
const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);
|
|
10
|
+
const disableWeekendsIndicator = [CurrencyPowerBalanceTimeUnit.CurrentDay, CurrencyPowerBalanceTimeUnit.PreviousDay, CurrencyPowerBalanceTimeUnit.M3].includes(timeUnit) || weekendsIndexes.length === 0;
|
|
11
|
+
const weekendsMarks = weekendsIndexes.map(item => ({
|
|
12
|
+
xAxis: item,
|
|
13
|
+
label: {
|
|
14
|
+
formatter: () => lang('market_closed')
|
|
15
|
+
}
|
|
16
|
+
}));
|
|
17
|
+
const seriesData = chartData.map((_ref, index) => {
|
|
5
18
|
let {
|
|
6
19
|
currency,
|
|
7
20
|
power
|
|
@@ -14,16 +27,47 @@ const getOption = (chartData, timeUnit, isDark) => {
|
|
|
14
27
|
itemStyle: {
|
|
15
28
|
color: COLOR_CONFIG[currency]
|
|
16
29
|
},
|
|
17
|
-
lineStyle: {
|
|
18
|
-
color: COLOR_CONFIG[currency]
|
|
19
|
-
},
|
|
20
30
|
data: power.map(_ref2 => {
|
|
21
31
|
let {
|
|
22
32
|
point,
|
|
23
33
|
price
|
|
24
34
|
} = _ref2;
|
|
25
35
|
return [point, price];
|
|
26
|
-
})
|
|
36
|
+
}),
|
|
37
|
+
markLine: index === chartData.length - 1 && !disableWeekendsIndicator ? {
|
|
38
|
+
label: {
|
|
39
|
+
show: false,
|
|
40
|
+
position: 'end',
|
|
41
|
+
align: 'center',
|
|
42
|
+
distance: -32,
|
|
43
|
+
padding: [8, 8],
|
|
44
|
+
fontSize: 12,
|
|
45
|
+
shadowBlur: 24,
|
|
46
|
+
shadowOffsetX: 0,
|
|
47
|
+
shadowOffsetY: 6,
|
|
48
|
+
borderWidth: 0,
|
|
49
|
+
color: currentTheme.textPrimary,
|
|
50
|
+
shadowColor: 'rgba(0,0,0,0.1)',
|
|
51
|
+
borderRadius: 4,
|
|
52
|
+
backgroundColor: isDark ? currentTheme.borderPrimary : currentTheme.backgroundSecondary
|
|
53
|
+
},
|
|
54
|
+
show: false,
|
|
55
|
+
emphasis: {
|
|
56
|
+
label: {
|
|
57
|
+
show: true
|
|
58
|
+
},
|
|
59
|
+
lineStyle: {
|
|
60
|
+
width: 1,
|
|
61
|
+
opacity: 0,
|
|
62
|
+
color: currentTheme.borderPrimary
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
symbol: ['none', 'none'],
|
|
66
|
+
itemStyle: {
|
|
67
|
+
color: currentTheme.borderPrimary
|
|
68
|
+
},
|
|
69
|
+
data: weekendsMarks
|
|
70
|
+
} : undefined
|
|
27
71
|
};
|
|
28
72
|
});
|
|
29
73
|
const legendData = formatLegendData(chartData);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","intervalFormatter","tooltipFormatter","xAxisLabelFormatter","formatLegendData","getOption","chartData","timeUnit","isDark","
|
|
1
|
+
{"version":3,"file":"getOption.js","names":["darkTheme","lightTheme","COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","intervalFormatter","tooltipFormatter","xAxisLabelFormatter","formatLegendData","CurrencyPowerBalanceTimeUnit","findLastIndexesBeforeWeekend","getOption","chartData","timeUnit","isDark","lang","currentTheme","dataTimestamps","power","map","x","Date","point","getTime","weekendsIndexes","disableWeekendsIndicator","CurrentDay","PreviousDay","M3","includes","length","weekendsMarks","item","xAxis","label","formatter","seriesData","_ref","index","currency","name","type","symbol","showSymbol","itemStyle","color","data","_ref2","price","markLine","show","position","align","distance","padding","fontSize","shadowBlur","shadowOffsetX","shadowOffsetY","borderWidth","textPrimary","shadowColor","borderRadius","backgroundColor","borderPrimary","backgroundSecondary","emphasis","lineStyle","width","opacity","undefined","legendData","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","extraCssText","axisTick","axisLine","splitLine","axisLabel","margin","rotate","interval","yAxis","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { darkTheme, lightTheme } from '@oanda/labs-widget-common';\nimport { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport {\n intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,\n} from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { findLastIndexesBeforeWeekend } from './utils';\n\nconst getOption = (\n chartData: CurrencyPowerBalance[],\n timeUnit: CurrencyPowerBalanceTimeUnit,\n isDark: boolean,\n lang: (key: string) => string,\n) => {\n const currentTheme = isDark ? darkTheme : lightTheme;\n const dataTimestamps = chartData[0].power.map((x) => new Date(x.point).getTime());\n const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);\n const disableWeekendsIndicator = [\n CurrencyPowerBalanceTimeUnit.CurrentDay,\n CurrencyPowerBalanceTimeUnit.PreviousDay,\n CurrencyPowerBalanceTimeUnit.M3,\n ].includes(timeUnit) || weekendsIndexes.length === 0;\n\n const weekendsMarks = weekendsIndexes.map((item) => ({\n xAxis: item,\n label: {\n formatter: () => lang('market_closed'),\n },\n }));\n\n const seriesData = chartData.map(({ currency, power }, index) => ({\n name: currency,\n type: 'line',\n symbol: 'circle',\n showSymbol: false,\n itemStyle: {\n color: COLOR_CONFIG[currency],\n },\n data: power.map(({ point, price }) => [point, price]),\n markLine: index === chartData.length - 1 && !disableWeekendsIndicator ? {\n label: {\n show: false,\n position: 'end',\n align: 'center',\n distance: -32,\n padding: [8, 8],\n fontSize: 12,\n shadowBlur: 24,\n shadowOffsetX: 0,\n shadowOffsetY: 6,\n borderWidth: 0,\n color: currentTheme.textPrimary,\n shadowColor: 'rgba(0,0,0,0.1)',\n borderRadius: 4,\n backgroundColor: isDark ? currentTheme.borderPrimary : currentTheme.backgroundSecondary,\n },\n show: false,\n emphasis: {\n label: {\n show: true,\n },\n lineStyle: {\n width: 1,\n opacity: 0,\n color: currentTheme.borderPrimary,\n },\n },\n symbol: ['none', 'none'],\n itemStyle: {\n color: currentTheme.borderPrimary,\n },\n data: weekendsMarks,\n } : undefined,\n }));\n\n const legendData = formatLegendData(chartData);\n\n return {\n animation: false,\n legend: {\n data: legendData,\n bottom: 10,\n icon: 'circle',\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n axis: 'x',\n z: 0,\n lineStyle: {\n color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n },\n },\n formatter: tooltipFormatter,\n extraCssText: 'z-index: 1',\n },\n xAxis: {\n type: 'category',\n axisTick: {\n show: false,\n },\n axisLine: { show: false },\n splitLine: {\n show: true,\n },\n axisLabel: {\n padding: [0, 0, 0, 4],\n align: 'left',\n margin: 10,\n rotate: -45,\n interval: intervalFormatter(seriesData[0].data.length),\n formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n },\n },\n yAxis: {\n type: 'value',\n position: 'right',\n splitNumber: 5,\n axisLine: { show: false },\n axisTick: { show: false },\n boundaryGap: ['10%', '10%'],\n axisLabel: {\n showMaxLabel: false,\n showMinLabel: false,\n },\n },\n series: seriesData,\n };\n};\n\nexport { getOption };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { WEEKEND_DURATION } from './constants';
|
|
2
|
+
const findLastIndexesBeforeWeekend = timestamps => timestamps.reduce((acc, timestamp, index) => timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= WEEKEND_DURATION ? [...acc, index] : acc, []);
|
|
3
|
+
export { findLastIndexesBeforeWeekend };
|
|
4
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":["WEEKEND_DURATION","findLastIndexesBeforeWeekend","timestamps","reduce","acc","timestamp","index","length"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/utils.ts"],"sourcesContent":["import { WEEKEND_DURATION } from './constants';\n\nconst findLastIndexesBeforeWeekend = (timestamps: number[]) => timestamps\n .reduce((acc, timestamp, index) => (\n timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= WEEKEND_DURATION\n ? [...acc, index]\n : acc\n ), [] as number[]);\n\nexport {\n findLastIndexesBeforeWeekend,\n};\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,aAAa;AAE9C,MAAMC,4BAA4B,GAAIC,UAAoB,IAAKA,UAAU,CACtEC,MAAM,CAAC,CAACC,GAAG,EAAEC,SAAS,EAAEC,KAAK,KAC5BJ,UAAU,CAACK,MAAM,GAAG,CAAC,KAAKD,KAAK,IAAIJ,UAAU,CAACI,KAAK,GAAG,CAAC,CAAC,GAAGD,SAAS,IAAIL,gBAAgB,GACpF,CAAC,GAAGI,GAAG,EAAEE,KAAK,CAAC,GACfF,GACL,EAAE,EAAc,CAAC;AAEpB,SACEH,4BAA4B","ignoreList":[]}
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"hour": "{{count}} Hour",
|
|
11
11
|
"hour_plural": "{{count}} Hours",
|
|
12
12
|
"last_updated": "Last updated",
|
|
13
|
+
"market_closed": "market closed",
|
|
13
14
|
"month": "{{count}} Month",
|
|
14
15
|
"month_plural": "{{count}} Months",
|
|
15
16
|
"pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"hour": "{{count}} Hora",
|
|
11
11
|
"hour_plural": "{{count}} Horas",
|
|
12
12
|
"last_updated": "Última actualización",
|
|
13
|
+
"market_closed": "mercado cerrado",
|
|
13
14
|
"month": "{{count}} Mes",
|
|
14
15
|
"month_plural": "{{count}} Meses",
|
|
15
16
|
"pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} de {{itemCount}} entradas",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"data_unavailable": "ข้อมูลไม่พร้อมใช้งาน",
|
|
10
10
|
"hour_0": "{{count}} ชั่วโมง",
|
|
11
11
|
"last_updated": "ปรับปรุงล่าสุด",
|
|
12
|
+
"market_closed": "ตลาดปิดทำการ",
|
|
12
13
|
"month_0": "{{count}} เดือน",
|
|
13
14
|
"pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} จาก {{itemCount}} รายการ",
|
|
14
15
|
"previous_business_day": "วันทำการก่อนหน้า",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"data_unavailable": "沒有數據",
|
|
10
10
|
"hour_0": "{{count}} 時",
|
|
11
11
|
"last_updated": "最後更新",
|
|
12
|
+
"market_closed": "市場已收盤",
|
|
12
13
|
"month_0": "{{count}} 月",
|
|
13
14
|
"pagination_entries_range": "{{itemCount}}个挂单中的{{firstItemOnPage}}-{{lastItemOnPage}}",
|
|
14
15
|
"previous_business_day": "前一營業日",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { CurrencyName } from '../../../../gql/types/graphql';
|
|
2
|
+
declare const WEEKEND_DURATION = 172800000;
|
|
2
3
|
declare const X_LABEL_SIZE = 90;
|
|
3
4
|
declare const X_LABEL_SIZE_MOBILE = 110;
|
|
4
5
|
declare const Y_LABEL_SIZE_MOBILE = 35;
|
|
@@ -10,7 +11,7 @@ declare const LEGEND_HEIGHT_MOBILE = 70;
|
|
|
10
11
|
declare const VERTICAL_LINE_COUNT = 10;
|
|
11
12
|
declare const CANDLE_NUMBER_HOUR = 12;
|
|
12
13
|
declare const CANDLE_MINUTE = 5;
|
|
13
|
-
declare const
|
|
14
|
+
declare const CURRENCIES_ORDER: CurrencyName[];
|
|
14
15
|
declare const COLOR_CONFIG: {
|
|
15
16
|
USD: string;
|
|
16
17
|
EUR: string;
|
|
@@ -25,4 +26,4 @@ declare const TOOLTIP_LINE_COLOR_CONFIG: {
|
|
|
25
26
|
DARK: string;
|
|
26
27
|
LIGHT: string;
|
|
27
28
|
};
|
|
28
|
-
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,
|
|
29
|
+
export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE, CURRENCIES_ORDER, WEEKEND_DURATION, };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
2
|
-
declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean) => {
|
|
2
|
+
declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyPowerBalanceTimeUnit, isDark: boolean, lang: (key: string) => string) => {
|
|
3
3
|
animation: boolean;
|
|
4
4
|
legend: {
|
|
5
5
|
data: {
|
|
@@ -67,10 +67,46 @@ declare const getOption: (chartData: CurrencyPowerBalance[], timeUnit: CurrencyP
|
|
|
67
67
|
itemStyle: {
|
|
68
68
|
color: string;
|
|
69
69
|
};
|
|
70
|
-
lineStyle: {
|
|
71
|
-
color: string;
|
|
72
|
-
};
|
|
73
70
|
data: (string | number)[][];
|
|
71
|
+
markLine: {
|
|
72
|
+
label: {
|
|
73
|
+
show: boolean;
|
|
74
|
+
position: string;
|
|
75
|
+
align: string;
|
|
76
|
+
distance: number;
|
|
77
|
+
padding: number[];
|
|
78
|
+
fontSize: number;
|
|
79
|
+
shadowBlur: number;
|
|
80
|
+
shadowOffsetX: number;
|
|
81
|
+
shadowOffsetY: number;
|
|
82
|
+
borderWidth: number;
|
|
83
|
+
color: string;
|
|
84
|
+
shadowColor: string;
|
|
85
|
+
borderRadius: number;
|
|
86
|
+
backgroundColor: string;
|
|
87
|
+
};
|
|
88
|
+
show: boolean;
|
|
89
|
+
emphasis: {
|
|
90
|
+
label: {
|
|
91
|
+
show: boolean;
|
|
92
|
+
};
|
|
93
|
+
lineStyle: {
|
|
94
|
+
width: number;
|
|
95
|
+
opacity: number;
|
|
96
|
+
color: string;
|
|
97
|
+
};
|
|
98
|
+
};
|
|
99
|
+
symbol: string[];
|
|
100
|
+
itemStyle: {
|
|
101
|
+
color: string;
|
|
102
|
+
};
|
|
103
|
+
data: {
|
|
104
|
+
xAxis: number;
|
|
105
|
+
label: {
|
|
106
|
+
formatter: () => string;
|
|
107
|
+
};
|
|
108
|
+
}[];
|
|
109
|
+
} | undefined;
|
|
74
110
|
}[];
|
|
75
111
|
};
|
|
76
112
|
export { getOption };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-currency-power-balance-widget",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.106",
|
|
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.
|
|
15
|
+
"@oanda/labs-widget-common": "^1.0.167",
|
|
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": "
|
|
25
|
+
"gitHead": "5659b2a7351c578a3514e1d465d61c2bd3f8fb7f"
|
|
26
26
|
}
|
|
@@ -4,11 +4,12 @@ import * as echarts from 'echarts/core';
|
|
|
4
4
|
import { LineChart } from 'echarts/charts';
|
|
5
5
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
6
6
|
import {
|
|
7
|
-
GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent,
|
|
7
|
+
GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, MarkLineComponent,
|
|
8
8
|
} from 'echarts/components';
|
|
9
9
|
import {
|
|
10
10
|
Theme, ThemeContext, getChartTheme, Size,
|
|
11
11
|
} from '@oanda/labs-widget-common';
|
|
12
|
+
import { useLocale } from '@oanda/mono-i18n';
|
|
12
13
|
import {
|
|
13
14
|
CHART_HEIGHT,
|
|
14
15
|
} from './options/constants';
|
|
@@ -22,12 +23,14 @@ echarts.use([
|
|
|
22
23
|
LegendPlainComponent,
|
|
23
24
|
LineChart,
|
|
24
25
|
CanvasRenderer,
|
|
26
|
+
MarkLineComponent,
|
|
25
27
|
]);
|
|
26
28
|
|
|
27
29
|
echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
|
|
28
30
|
echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
|
|
29
31
|
|
|
30
32
|
const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
|
|
33
|
+
const { lang } = useLocale();
|
|
31
34
|
const { isDark, size } = useContext(ThemeContext);
|
|
32
35
|
const isDesktop = size === Size.DESKTOP;
|
|
33
36
|
const isMobile = size === Size.MOBILE;
|
|
@@ -58,7 +61,7 @@ const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
|
|
|
58
61
|
height: `${CHART_HEIGHT}px`,
|
|
59
62
|
width: '100%',
|
|
60
63
|
}}
|
|
61
|
-
option={getOption(chartData, timeUnit, isDark)}
|
|
64
|
+
option={getOption(chartData, timeUnit, isDark, lang)}
|
|
62
65
|
/>
|
|
63
66
|
);
|
|
64
67
|
};
|
package/src/CurrencyPowerBalanceWidget/components/Chart/options/{constants.tsx → constants.ts}
RENAMED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { colorPalette } from '@oanda/labs-widget-common';
|
|
2
2
|
import { CurrencyName } from '../../../../gql/types/graphql';
|
|
3
3
|
|
|
4
|
+
const WEEKEND_DURATION = 172800000;
|
|
5
|
+
|
|
4
6
|
const X_LABEL_SIZE = 90;
|
|
5
7
|
const X_LABEL_SIZE_MOBILE = 110;
|
|
6
8
|
const Y_LABEL_SIZE_MOBILE = 35;
|
|
@@ -13,7 +15,7 @@ const VERTICAL_LINE_COUNT = 10;
|
|
|
13
15
|
const CANDLE_NUMBER_HOUR = 12;
|
|
14
16
|
const CANDLE_MINUTE = 5;
|
|
15
17
|
|
|
16
|
-
const
|
|
18
|
+
const CURRENCIES_ORDER: CurrencyName[] = [
|
|
17
19
|
CurrencyName.Usd,
|
|
18
20
|
CurrencyName.Eur,
|
|
19
21
|
CurrencyName.Gbp,
|
|
@@ -54,5 +56,6 @@ export {
|
|
|
54
56
|
TOOLTIP_LINE_COLOR_CONFIG,
|
|
55
57
|
CANDLE_NUMBER_HOUR,
|
|
56
58
|
CANDLE_MINUTE,
|
|
57
|
-
|
|
59
|
+
CURRENCIES_ORDER,
|
|
60
|
+
WEEKEND_DURATION,
|
|
58
61
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
|
|
2
|
-
import { VERTICAL_LINE_COUNT,
|
|
2
|
+
import { VERTICAL_LINE_COUNT, CURRENCIES_ORDER, COLOR_CONFIG } from './constants';
|
|
3
3
|
import { TooltipFormatterParams } from './types';
|
|
4
4
|
|
|
5
5
|
const getDateAndTime = (param: string) => {
|
|
@@ -54,9 +54,9 @@ const tooltipFormatter = (values: TooltipFormatterParams[]) => {
|
|
|
54
54
|
const formatLegendData = (values: CurrencyPowerBalance[]) => {
|
|
55
55
|
const dataCurrencies = values.map(({ currency }) => currency);
|
|
56
56
|
|
|
57
|
-
const list = dataCurrencies.length ===
|
|
58
|
-
?
|
|
59
|
-
:
|
|
57
|
+
const list = dataCurrencies.length === CURRENCIES_ORDER.length
|
|
58
|
+
? CURRENCIES_ORDER
|
|
59
|
+
: CURRENCIES_ORDER.filter((currency) => dataCurrencies.includes(currency));
|
|
60
60
|
|
|
61
61
|
return list.map((currency) => ({
|
|
62
62
|
name: currency,
|