@oanda/labs-crowd-view-widget 1.0.50 → 1.0.52

package/src/CrowdViewWidget/components/Chart/Chart.tsx

@@ -6,26 +6,28 @@ import {
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import type { EChartsType } from 'echarts';
-import {
-  BarChart,
-  CandlestickChart,
-  CustomChart,
-  ScatterChart,
-} from 'echarts/charts';
+import { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';
 import {
   DataZoomInsideComponent,
   GraphicComponent,
   GridSimpleComponent,
+  MarkAreaComponent,
   MarkPointComponent,
   TooltipComponent,
+  VisualMapComponent,
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React from 'react';
 
-import { CHART_CONFIG } from '../../constants';
+import { CHART_CONFIG_CALCULATED } from '../../constants';
 import { getOption } from './chartOptions';
-import type { ChartProps } from './types';
+import type {
+  ChartProps,
+  DataZoomArray,
+  DataZoomEvent,
+  XAxisArray,
+} from './types';
 import {
   formatXAxisLabel,
   getLabelData,
@@ -35,14 +37,15 @@ import {
 echarts.use([
   GridSimpleComponent,
   GraphicComponent,
-  BarChart,
   CanvasRenderer,
   DataZoomInsideComponent,
   CustomChart,
   TooltipComponent,
   CandlestickChart,
   MarkPointComponent,
-  ScatterChart,
+  MarkAreaComponent,
+  LineChart,
+  VisualMapComponent,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
@@ -54,46 +57,95 @@ const Chart = ({ data, isDesktop }: ChartProps) => {
 
   return (
     <BaseChart
-      chartHeight={CHART_CONFIG.HEIGHT}
+      chartHeight={CHART_CONFIG_CALCULATED.FULL_HEIGHT}
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
       option={getOption(data, isDark, isDesktop, lang)}
       opts={{ renderer: 'canvas' }}
       onEvents={{
-        datazoom: (_params: unknown, instance: EChartsType) => {
-          const { dataZoom } = instance.getOption();
+        datazoom: (params: DataZoomEvent, instance: EChartsType) => {
+          if (!params.batch?.[0]) {
+            return;
+          }
+
+          const batchItem = params.batch[0];
+          const { start, end } = batchItem;
+
+          const { dataZoom, xAxis } = instance.getOption();
+          if (
+            !Array.isArray(dataZoom) ||
+            dataZoom.length === 0 ||
+            !dataZoom[0] ||
+            typeof dataZoom[0].startValue !== 'number' ||
+            typeof dataZoom[0].endValue !== 'number'
+          ) {
+            return;
+          }
+
+          const { startValue, endValue } = dataZoom[0] as DataZoomArray[0];
 
-          const { startValue, endValue } = (
-            dataZoom as { startValue: number; endValue: number }[]
-          )[0];
+          if (batchItem.dataZoomId === 'main') {
+            instance.dispatchAction({
+              type: 'dataZoom',
+              dataZoomId: 'sentiment',
+              start,
+              end,
+              filterMode: 'none',
+            });
+          }
+
+          if (batchItem.dataZoomId === 'sentiment') {
+            instance.dispatchAction({
+              type: 'dataZoom',
+              dataZoomId: 'main',
+              start,
+              end,
+              filterMode: 'filter',
+            });
+          }
+
+          if (!data.xAxisData[startValue] || !data.xAxisData[endValue]) {
+            return;
+          }
 
           const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
             data.xAxisData[startValue],
             data.xAxisData[endValue]
           );
 
-          const labelsData = getLabelData({
-            xAxisData: data.xAxisData,
-            isGreaterThanTwoWeeks,
-          });
+          const wasGreaterThanTwoWeeks =
+            Array.isArray(xAxis) &&
+            xAxis.length > 0 &&
+            (xAxis as XAxisArray)[0]?.name === 'xAxis-greater-than-two-weeks';
 
-          instance.setOption({
-            xAxis: {
-              axisLabel: {
-                formatter: (value: string) =>
-                  formatXAxisLabel(value, isGreaterThanTwoWeeks),
-              },
-            },
-            series: [
-              {
-                id: 'candlestick',
-                markPoint: {
-                  data: labelsData,
+          if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {
+            const labelsData = getLabelData({
+              xAxisData: data.xAxisData,
+              isGreaterThanTwoWeeks,
+            });
+
+            instance.setOption({
+              xAxis: {
+                id: 'main-xAxis',
+                name: isGreaterThanTwoWeeks
+                  ? 'xAxis-greater-than-two-weeks'
+                  : 'xAxis-less-than-two-weeks',
+                axisLabel: {
+                  formatter: (value: string) =>
+                    formatXAxisLabel(value, isGreaterThanTwoWeeks),
                 },
               },
-            ],
-          });
+              series: [
+                {
+                  id: 'candlestick',
+                  markPoint: {
+                    data: labelsData,
+                  },
+                },
+              ],
+            });
+          }
         },
       }}
     />

package/src/CrowdViewWidget/components/Chart/ChartWithData.tsx

@@ -29,14 +29,14 @@ const ChartWithData = ({
 
   return (
     <>
-      <div className="lw-relative lw-h-[450px] lw-w-full">
+      <div className="lw-relative lw-h-[610px] lw-w-full">
         {error && (
-          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <ChartError />
           </div>
         )}
         {loading && (
-          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}

package/src/CrowdViewWidget/components/Chart/chartOptions.ts

@@ -1,12 +1,7 @@
-import {
-  colorPalette,
-  getGridLines,
-  getLineCommons,
-  themeColors,
-} from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
 
-import { CHART_CONFIG } from '../../constants';
-import type { Bucket, GetOptionType } from './types';
+import { CHART_CONFIG, CHART_CONFIG_CALCULATED } from '../../constants';
+import type { Bucket, GetOptionType, TooltipParam } from './types';
 import {
   formatXAxisLabel,
   getLabelData,
@@ -14,6 +9,8 @@ import {
   getTooltipFormatter,
   isDifferenceGreaterThanTwoWeeks,
 } from './utils/chartUtils';
+import { getChartStyles } from './utils/getChartStyles';
+import { getGridLines } from './utils/getGridLines';
 
 // @ts-expect-error
 export const getOption: GetOptionType = (
@@ -25,12 +22,23 @@ export const getOption: GetOptionType = (
     buckets,
     precision,
     bookType,
+    sentiments,
   },
   isDark,
   isDesktop,
   labelCallback
 ) => {
   let selectedPrice: number;
+  const {
+    sentimentLongColor,
+    sentimentShortColor,
+    candleLongColor,
+    candleShortColor,
+    sentimentAreaOpacity,
+    tooltipLinesColor,
+    sentimentLabelColor,
+  } = getChartStyles(isDark);
+
   const visibleXAxisData = xAxisData.slice(
     (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
     (xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
@@ -46,25 +54,29 @@ export const getOption: GetOptionType = (
     isGreaterThanTwoWeeks,
   });
 
-  const gridLines = getGridLines({
+  const gridMainLines = getGridLines({
     isDark,
-    chartWidth: CHART_CONFIG.WIDTH,
-    chartHeight: CHART_CONFIG.HEIGHT,
-    xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
-    yLabelSize: isDesktop
-      ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP
-      : CHART_CONFIG.Y_LABEL_SIZE_MOBILE,
-    bottomLeftBox: false,
+    isDesktop,
   });
 
   return {
     animation: false,
     dataZoom: [
       {
+        id: 'main',
         type: 'inside',
         xAxisIndex: 0,
         start: CHART_CONFIG.INITIAL_START_ZOOM,
         end: CHART_CONFIG.INITIAL_END_ZOOM,
+        filterMode: 'filter',
+      },
+      {
+        id: 'sentiment',
+        type: 'inside',
+        xAxisIndex: 1,
+        start: CHART_CONFIG.INITIAL_START_ZOOM,
+        end: CHART_CONFIG.INITIAL_END_ZOOM,
+        filterMode: 'none',
       },
     ],
     tooltip: {
@@ -72,24 +84,19 @@ export const getOption: GetOptionType = (
       axisPointer: {
         type: 'cross',
         axis: 'x',
+        lineStyle: {
+          color: tooltipLinesColor,
+        },
         crossStyle: {
-          color: isDark ? colorPalette.orange : themeColors.borderPrimary.light,
+          color: tooltipLinesColor,
         },
         label: {
+          padding: 0,
+          lineHeight: 24,
           formatter: (params) => {
-            if (params.axisDimension === 'y') {
+            if (params.axisDimension === 'y' && params.axisIndex === 0) {
               selectedPrice = Number(params.value);
-              return Number(params.value).toFixed(precision);
-            }
-
-            if (params.axisDimension === 'x') {
-              const date = new Date(params.value as string);
-              return date.toLocaleString(undefined, {
-                hour: '2-digit',
-                minute: '2-digit',
-                day: 'numeric',
-                month: 'short',
-              });
+              return ` ${Number(params.value).toFixed(precision)} `;
             }
 
             return null;
@@ -97,7 +104,7 @@ export const getOption: GetOptionType = (
         },
       },
       confine: true,
-      formatter: (params) =>
+      formatter: (params: TooltipParam[]) =>
         getTooltipFormatter({
           params,
           buckets,
@@ -108,51 +115,150 @@ export const getOption: GetOptionType = (
           bookType,
         }),
     },
-    xAxis: {
-      type: 'category',
-      data: xAxisData,
-      splitNumber: 1,
-      axisTick: {
+    xAxis: [
+      {
+        type: 'category',
+        name: 'xAxis-less-than-two-weeks',
+        nameTextStyle: {
+          fontSize: 0,
+        },
+        id: 'main-xAxis',
+        data: xAxisData,
+        splitNumber: 1,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          padding: [8, 16, 8, 16],
+          margin: 0,
+          formatter: (value) => formatXAxisLabel(value, isGreaterThanTwoWeeks),
+        },
+      },
+      {
+        type: 'category',
+        gridIndex: 1,
         show: false,
+        data: xAxisData,
+        splitNumber: 1,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
       },
-      axisLabel: {
-        padding: [8, 16, 8, 16],
-        margin: 0,
-        formatter: (value) => formatXAxisLabel(value, isGreaterThanTwoWeeks),
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        gridIndex: 0,
+        position: 'right',
+        min: (val) => val.min - bucketWidth * 2,
+        max: (val) => val.max + bucketWidth * 2,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+          showMaxLabel: false,
+          showMinLabel: false,
+          margin: isDesktop ? 4 : 2,
+          formatter: (value: number) => value.toFixed(precision - 1),
+        },
       },
-    },
-    yAxis: {
-      type: 'value',
-      position: 'right',
-      min: (val) => val.min - bucketWidth * 2,
-      max: (val) => val.max + bucketWidth * 2,
-      axisLine: { show: false },
-      axisTick: { show: false },
-      axisLabel: {
-        showMaxLabel: false,
-        showMinLabel: false,
-        margin: isDesktop ? 4 : 2,
-        formatter: (value: number) => value.toFixed(precision - 1),
+      {
+        type: 'value',
+        gridIndex: 1,
+        position: 'right',
+        min: CHART_CONFIG.SENTIMENT_MIN,
+        max: CHART_CONFIG.SENTIMENT_MAX,
+        interval: CHART_CONFIG.SENTIMENT_INTERVAL,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+          verticalAlignMaxLabel: 'top',
+          verticalAlignMinLabel: 'bottom',
+          lineHeight: 20,
+          margin: isDesktop ? 4 : 2,
+          rich: {
+            shortRect: {
+              backgroundColor: chroma(sentimentShortColor).alpha(0.3).css(),
+              borderColor: sentimentShortColor,
+              borderWidth: 1,
+              width: 8,
+              height: 8,
+            },
+            longRect: {
+              backgroundColor: chroma(sentimentLongColor).alpha(0.3).css(),
+              borderColor: sentimentLongColor,
+              borderWidth: 1,
+              width: 8,
+              height: 8,
+            },
+          },
+          formatter: (value: number) => {
+            if (value === CHART_CONFIG.SENTIMENT_MIN) {
+              return `{shortRect| } ${labelCallback('short')}`;
+            }
+
+            if (value === CHART_CONFIG.SENTIMENT_MAX) {
+              return `{longRect| } ${labelCallback('long')}`;
+            }
+
+            if (value === CHART_CONFIG.SENTIMENT_MAX / 2) {
+              return '50%';
+            }
+
+            return undefined;
+          },
+        },
       },
+    ],
+    axisPointer: {
+      link: [
+        {
+          xAxisIndex: 'all',
+        },
+      ],
+    },
+    visualMap: {
+      show: false,
+      seriesId: 'sentiment',
+      dimension: 1,
+      pieces: [
+        {
+          lt: CHART_CONFIG.SENTIMENT_MAX / 2,
+          color: sentimentShortColor,
+        },
+        {
+          gte: CHART_CONFIG.SENTIMENT_MAX / 2,
+          lte: CHART_CONFIG.SENTIMENT_MAX,
+          color: sentimentLongColor,
+        },
+        {
+          gt: CHART_CONFIG.SENTIMENT_MAX,
+          color: sentimentLongColor,
+        },
+      ],
     },
     series: [
       {
         type: 'candlestick',
         id: 'candlestick',
+        gridIndex: 0,
+        xAxisIndex: 0,
+        yAxisIndex: 0,
         data: candlesSeriesData,
         itemStyle: {
-          color: isDark ? colorPalette.orange : colorPalette.raspberryLight,
-          color0: isDark
-            ? colorPalette.bottleGreenDark
-            : colorPalette.bottleGreenLight,
-          borderColor: isDark
-            ? colorPalette.orange
-            : colorPalette.raspberryLight,
-          borderColor0: isDark
-            ? colorPalette.bottleGreenDark
-            : colorPalette.bottleGreenLight,
+          color: chroma(candleShortColor).desaturate().css(),
+          color0: chroma(candleLongColor).desaturate().css(),
+          borderColor: candleShortColor,
+          borderColor0: candleLongColor,
+        },
+        emphasis: {
+          itemStyle: {
+            color: candleShortColor,
+            color0: candleLongColor,
+          },
         },
-
         markPoint: {
           symbol: 'circle',
           symbolSize: 0,
@@ -161,8 +267,11 @@ export const getOption: GetOptionType = (
       },
       {
         type: 'custom',
+        gridIndex: 0,
         name: 'heatmap',
         id: 'heatmap',
+        xAxisIndex: 0,
+        yAxisIndex: 0,
         silent: true,
         clip: true,
         renderItem: (_params, api) => {
@@ -203,27 +312,88 @@ export const getOption: GetOptionType = (
         },
         data: orderPositionBooks,
       },
+      {
+        type: 'line',
+        name: 'sentiment-short',
+        id: 'sentiment',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: sentiments,
+        showSymbol: false,
+        symbol: 'none',
+        lineStyle: {
+          width: 3,
+          opacity: 1,
+        },
+        areaStyle: {
+          color: sentimentShortColor,
+          opacity: sentimentAreaOpacity,
+        },
+        emphasis: {
+          areaStyle: {
+            opacity: 0,
+          },
+        },
+        stack: 'sentiment',
+      },
+      {
+        type: 'line',
+        name: 'sentiment-long',
+        id: 'sentiment-long',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: sentiments.map((sentiment) => [sentiment[0], sentiment[2]]),
+        symbol: 'none',
+        lineStyle: {
+          color: 'transparent',
+          width: 0,
+        },
+        areaStyle: {
+          color: sentimentLongColor,
+          opacity: sentimentAreaOpacity,
+        },
+        stack: 'sentiment',
+        emphasis: {
+          disabled: true,
+        },
+        tooltip: {
+          show: false,
+        },
+      },
     ],
     grid: [
       {
         name: 'main-grid',
+        id: 'main-grid',
+        height: `${CHART_CONFIG.MAIN_HEIGHT}px`,
         top: '0px',
         left: '0px',
         right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
         bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
       },
+      {
+        name: 'sentiment-grid',
+        id: 'sentiment-grid',
+        height: `${CHART_CONFIG.SENTIMENT_HEIGHT}px`,
+        bottom: `0px`,
+        left: '0px',
+        right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
+      },
     ],
     graphic: [
-      ...gridLines,
+      ...gridMainLines,
       {
-        ...getLineCommons(isDark as boolean),
-        top: 0,
-        right: 0,
-        shape: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 0,
+        type: 'text',
+        silent: true,
+        z: 1,
+        left: 4,
+        bottom: CHART_CONFIG_CALCULATED.SENTIMENT_TEXT_POSITION,
+        style: {
+          text: `${labelCallback('sentiment')}:`,
+          fontFamily: 'Sofia W03',
+          fontSize: 14,
+          fontWeight: 'bold',
+          fill: sentimentLabelColor,
         },
       },
     ],

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

@@ -19,6 +19,8 @@ export interface UseCrowdViewDataProps {
   granularity: Granularity;
 }
 
+export type ProcessedSentiment = [string, number, number];
+
 interface CrowdViewData {
   xAxisData: string[];
   // [open, close, low, high]
@@ -29,6 +31,7 @@ interface CrowdViewData {
   buckets: Bucket[][];
   precision: number;
   bookType: BookType;
+  sentiments: ProcessedSentiment[];
 }
 
 export interface UseCrowdViewDataReturn {
@@ -60,3 +63,55 @@ export interface GetLabelsDataProps {
   xAxisData: string[];
   isGreaterThanTwoWeeks: boolean;
 }
+
+interface BaseTooltipParam {
+  [key: string]: unknown;
+  seriesId?: string;
+  seriesName?: string;
+  seriesType?: string;
+  axisValue?: string | number;
+  axisValueLabel?: string;
+  axisDimension?: string;
+  axisIndex?: number;
+  value: unknown;
+}
+
+export type TooltipParam =
+  | (BaseTooltipParam & {
+      seriesId: 'candlestick';
+      value: [number, number, number, number, number]; // [0, open, close, low, high]
+    })
+  | (BaseTooltipParam & {
+      seriesId: 'heatmap';
+      value: [string, number, number]; // [time, price, index]
+    })
+  | (BaseTooltipParam & {
+      seriesId: 'sentiment';
+      value: [string, number, number]; // [time, shortPercent, longPercent]
+    });
+
+export interface DataZoomBatchItem {
+  [key: string]: unknown;
+  start: number;
+  end: number;
+  dataZoomId?: string;
+}
+
+export interface DataZoomEvent {
+  [key: string]: unknown;
+  type: 'datazoom';
+  batch?: DataZoomBatchItem[];
+}
+
+export interface DataZoomItem {
+  startValue: number;
+  endValue: number;
+}
+
+export type DataZoomArray = Array<DataZoomItem>;
+
+export interface XAxisItem {
+  name?: string;
+}
+
+export type XAxisArray = Array<XAxisItem>;