@oanda/labs-currency-power-balance-widget 1.0.105 → 1.0.106

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

@@ -1,15 +1,34 @@
+import { darkTheme, lightTheme } from '@oanda/labs-widget-common';
 import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
 import {
   intervalFormatter, tooltipFormatter, xAxisLabelFormatter, formatLegendData,
 } from './formatters';
 import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { findLastIndexesBeforeWeekend } from './utils';
 
 const getOption = (
   chartData: CurrencyPowerBalance[],
   timeUnit: CurrencyPowerBalanceTimeUnit,
   isDark: boolean,
+  lang: (key: string) => string,
 ) => {
-  const seriesData = chartData.map(({ currency, power }) => ({
+  const currentTheme = isDark ? darkTheme : lightTheme;
+  const dataTimestamps = chartData[0].power.map((x) => new Date(x.point).getTime());
+  const weekendsIndexes = findLastIndexesBeforeWeekend(dataTimestamps);
+  const disableWeekendsIndicator = [
+    CurrencyPowerBalanceTimeUnit.CurrentDay,
+    CurrencyPowerBalanceTimeUnit.PreviousDay,
+    CurrencyPowerBalanceTimeUnit.M3,
+  ].includes(timeUnit) || weekendsIndexes.length === 0;
+
+  const weekendsMarks = weekendsIndexes.map((item) => ({
+    xAxis: item,
+    label: {
+      formatter: () => lang('market_closed'),
+    },
+  }));
+
+  const seriesData = chartData.map(({ currency, power }, index) => ({
     name: currency,
     type: 'line',
     symbol: 'circle',
@@ -17,10 +36,41 @@ const getOption = (
     itemStyle: {
       color: COLOR_CONFIG[currency],
     },
-    lineStyle: {
-      color: COLOR_CONFIG[currency],
-    },
     data: power.map(({ point, price }) => [point, price]),
+    markLine: index === chartData.length - 1 && !disableWeekendsIndicator ? {
+      label: {
+        show: false,
+        position: 'end',
+        align: 'center',
+        distance: -32,
+        padding: [8, 8],
+        fontSize: 12,
+        shadowBlur: 24,
+        shadowOffsetX: 0,
+        shadowOffsetY: 6,
+        borderWidth: 0,
+        color: currentTheme.textPrimary,
+        shadowColor: 'rgba(0,0,0,0.1)',
+        borderRadius: 4,
+        backgroundColor: isDark ? currentTheme.borderPrimary : currentTheme.backgroundSecondary,
+      },
+      show: false,
+      emphasis: {
+        label: {
+          show: true,
+        },
+        lineStyle: {
+          width: 1,
+          opacity: 0,
+          color: currentTheme.borderPrimary,
+        },
+      },
+      symbol: ['none', 'none'],
+      itemStyle: {
+        color: currentTheme.borderPrimary,
+      },
+      data: weekendsMarks,
+    } : undefined,
   }));
 
   const legendData = formatLegendData(chartData);

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

@@ -0,0 +1,12 @@
+import { WEEKEND_DURATION } from './constants';
+
+const findLastIndexesBeforeWeekend = (timestamps: number[]) => timestamps
+  .reduce((acc, timestamp, index) => (
+    timestamps.length - 1 !== index && timestamps[index + 1] - timestamp >= WEEKEND_DURATION
+      ? [...acc, index]
+      : acc
+  ), [] as number[]);
+
+export {
+  findLastIndexesBeforeWeekend,
+};

package/src/translations/sources/en.json

@@ -10,6 +10,7 @@
   "hour": "{{count}} Hour",
   "hour_plural": "{{count}} Hours",
   "last_updated": "Last updated",
+  "market_closed": "market closed",
   "month": "{{count}} Month",
   "month_plural": "{{count}} Months",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",

package/src/translations/sources/es.json

@@ -10,6 +10,7 @@
   "hour": "{{count}} Hora",
   "hour_plural": "{{count}} Horas",
   "last_updated": "Última actualización",
+  "market_closed": "mercado cerrado",
   "month": "{{count}} Mes",
   "month_plural": "{{count}} Meses",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} de {{itemCount}} entradas",

package/src/translations/sources/th.json

@@ -9,6 +9,7 @@
   "data_unavailable": "ข้อมูลไม่พร้อมใช้งาน",
   "hour_0": "{{count}} ชั่วโมง",
   "last_updated": "ปรับปรุงล่าสุด",
+  "market_closed": "ตลาดปิดทำการ",
   "month_0": "{{count}} เดือน",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} จาก {{itemCount}} รายการ",
   "previous_business_day": "วันทำการก่อนหน้า",

package/src/translations/sources/zh_TW.json

@@ -9,6 +9,7 @@
   "data_unavailable": "沒有數據",
   "hour_0": "{{count}} 時",
   "last_updated": "最後更新",
+  "market_closed": "市場已收盤",
   "month_0": "{{count}} 月",
   "pagination_entries_range": "{{itemCount}}个挂单中的{{firstItemOnPage}}-{{lastItemOnPage}}",
   "previous_business_day": "前一營業日",

package/test/chartFormatters.test.ts

@@ -2,7 +2,9 @@
  * @jest-environment jsdom
  */
 
-import { intervalFormatter, xAxisLabelFormatter, tooltipFormatter } from '../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters';
+import {
+  intervalFormatter, xAxisLabelFormatter, tooltipFormatter,
+} from '../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters';
 import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
 
 describe('intervalFormatter', () => {

package/test/utils.test.ts

@@ -0,0 +1,34 @@
+import { findLastIndexesBeforeWeekend } from '../src/CurrencyPowerBalanceWidget/components/Chart/options/utils';
+
+describe('findLastIndexesBeforeWeekend', () => {
+  it('should return an empty array if there are no weekends', () => {
+    const timestamps = [
+      1679952000000, // Monday
+      1680038400000, // Tuesday
+      1680124800000, // Wednesday
+      1680211200000, // Thursday
+      1680297600000, // Friday
+    ];
+    const expected: number[] = [];
+    expect(findLastIndexesBeforeWeekend(timestamps)).toEqual(expected);
+  });
+
+  it('should return an array of weekend indexes', () => {
+    const timestamps = [
+      1679952000000, // Monday
+      1680038400000, // Tuesday
+      1680124800000, // Wednesday
+      1680211200000, // Thursday
+      1680297600000, // Friday
+      1680556800000, // Monday
+      1680643200000, // Tuesday
+      1680729600000, // Wednesday
+      1680816000000, // Thursday
+      1680902400000, // Friday
+      1681161600000, // Monday
+
+    ];
+    const expected = [4, 9];
+    expect(findLastIndexesBeforeWeekend(timestamps)).toEqual(expected);
+  });
+});