@oanda/labs-crowd-view-widget 1.0.51 → 1.0.53

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

@@ -1,12 +1,11 @@
+import chroma from 'chroma-js';
+
 import {
-  colorPalette,
-  getGridLines,
-  getLineCommons,
-  themeColors,
-} from '@oanda/labs-widget-common';
-
-import { CHART_CONFIG } from '../../constants';
-import type { Bucket, GetOptionType } from './types';
+  BUCKET_CONFIG,
+  CHART_CONFIG,
+  CHART_CONFIG_CALCULATED,
+} from '../../constants';
+import type { Bucket, GetOptionType, TooltipParam } from './types';
 import {
   formatXAxisLabel,
   getLabelData,
@@ -14,26 +13,48 @@ import {
   getTooltipFormatter,
   isDifferenceGreaterThanTwoWeeks,
 } from './utils/chartUtils';
+import { getChartStyles } from './utils/getChartStyles';
+import { getGridLines } from './utils/getGridLines';
 
 // @ts-expect-error
-export const getOption: GetOptionType = (
-  {
-    xAxisData,
-    candlesSeriesData,
-    orderPositionBooks,
+export const getOption: GetOptionType = ({
+  mainData: {
+    dates,
+    candlesOpen,
+    candlesClose,
+    candlesLow,
+    candlesHigh,
+    bookPrices,
+    bookIndexes,
+    sentimentShorts,
+    sentimentLongs,
+  },
+  additionalData: {
     bucketWidth,
     buckets,
-    precision,
+    displayPrecision,
     bookType,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
   },
   isDark,
   isDesktop,
-  labelCallback
-) => {
+  labelCallback,
+}) => {
   let selectedPrice: number;
-  const visibleXAxisData = xAxisData.slice(
-    (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
-    (xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
+  const {
+    sentimentLongColor,
+    sentimentShortColor,
+    candleLongColor,
+    candleShortColor,
+    sentimentAreaOpacity,
+    tooltipLinesColor,
+    sentimentLabelColor,
+  } = getChartStyles(isDark);
+
+  const visibleXAxisData = dates.slice(
+    (dates.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
+    (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
   );
 
   const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
@@ -42,29 +63,33 @@ export const getOption: GetOptionType = (
   );
 
   const labelsData = getLabelData({
-    xAxisData,
+    dates,
     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 +97,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(displayPrecision)} `;
             }
 
             return null;
@@ -97,62 +117,176 @@ export const getOption: GetOptionType = (
         },
       },
       confine: true,
-      formatter: (params) =>
+      formatter: (params: TooltipParam[]) =>
         getTooltipFormatter({
           params,
           buckets,
           bucketWidth,
           selectedPrice,
           labelCallback,
-          precision,
           bookType,
         }),
     },
-    xAxis: {
-      type: 'category',
-      data: xAxisData,
-      splitNumber: 1,
-      axisTick: {
+    xAxis: [
+      {
+        type: 'category',
+        name: 'xAxis-less-than-two-weeks',
+        nameTextStyle: {
+          fontSize: 0,
+        },
+        id: 'main-xAxis',
+        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: dates,
+        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 * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+        max: (val) =>
+          val.max + bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+          showMaxLabel: false,
+          showMinLabel: false,
+          formatter: (value: number) => value.toFixed(displayPrecision - 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,
+        },
+      ],
     },
-    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),
+    dataset: {
+      source: {
+        dates,
+        candlesOpen,
+        candlesClose,
+        candlesLow,
+        candlesHigh,
+        bookPrices,
+        bookIndexes,
+        sentimentShorts,
+        sentimentLongs,
       },
     },
     series: [
       {
         type: 'candlestick',
         id: 'candlestick',
-        data: candlesSeriesData,
+        gridIndex: 0,
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        encode: {
+          x: 'dates',
+          y: ['open', 'close', 'low', 'high'],
+        },
         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,13 +295,26 @@ export const getOption: GetOptionType = (
       },
       {
         type: 'custom',
+        gridIndex: 0,
         name: 'heatmap',
         id: 'heatmap',
+        xAxisIndex: 0,
+        yAxisIndex: 0,
         silent: true,
         clip: true,
+        encode: {
+          x: 'dates',
+          y: 'bookPrices',
+        },
+        dimensions: ['dates', 'bookPrices', 'bookIndexes'],
         renderItem: (_params, api) => {
           const xVal = api.value(0);
           const bucketIndex = api.value(2) as number;
+
+          if (!bucketIndex) {
+            return null;
+          }
+
           const metaValues = buckets[bucketIndex];
 
           const [rectWidth, rectHeight] = api.size!([
@@ -187,7 +334,12 @@ export const getOption: GetOptionType = (
                 height: rectHeight,
               },
               style: {
-                fill: getRectColor(sentiment, isDark),
+                fill: getRectColor(
+                  sentiment,
+                  isDark,
+                  sentimentThresholdMin,
+                  sentimentThresholdMax
+                ),
               },
               silent: true,
               emphasisDisabled: true,
@@ -201,29 +353,95 @@ export const getOption: GetOptionType = (
             emphasisDisabled: true,
           };
         },
-        data: orderPositionBooks,
+      },
+      {
+        type: 'line',
+        name: 'sentiment-short',
+        id: 'sentiment',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        showSymbol: false,
+        symbol: 'none',
+        lineStyle: {
+          width: 3,
+          opacity: 1,
+        },
+        areaStyle: {
+          color: sentimentShortColor,
+          opacity: sentimentAreaOpacity,
+        },
+        emphasis: {
+          disabled: true,
+        },
+        stack: 'sentiment',
+        dimensions: ['dates', 'sentimentShorts', 'sentimentLongs'],
+        encode: {
+          x: 'dates',
+          y: 'sentimentShorts',
+        },
+      },
+      {
+        type: 'line',
+        name: 'sentiment-long',
+        id: 'sentiment-long',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        symbol: 'none',
+        lineStyle: {
+          color: 'transparent',
+          width: 0,
+        },
+        areaStyle: {
+          color: sentimentLongColor,
+          opacity: sentimentAreaOpacity,
+        },
+        stack: 'sentiment',
+        emphasis: {
+          disabled: true,
+        },
+        tooltip: {
+          show: false,
+        },
+        dimensions: ['dates', 'sentimentLongs'],
+        encode: {
+          x: 'dates',
+          y: 'sentimentLongs',
+        },
       },
     ],
     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,33 +19,47 @@ export interface UseCrowdViewDataProps {
   granularity: Granularity;
 }
 
-interface CrowdViewData {
-  xAxisData: string[];
-  // [open, close, low, high]
-  candlesSeriesData: [number, number, number, number][];
-  // [time, price, index]
-  orderPositionBooks: [string, number | null, number][];
+interface CrowdViewMainData {
+  dates: string[];
+  candlesOpen: number[];
+  candlesClose: number[];
+  candlesLow: number[];
+  candlesHigh: number[];
+  bookPrices?: (number | null)[];
+  bookIndexes?: (number | null)[];
+  sentimentShorts: (number | null)[];
+  sentimentLongs: (number | null)[];
+}
+
+interface CrowdViewAdditionalData {
   bucketWidth: number;
   buckets: Bucket[][];
-  precision: number;
+  displayPrecision: number;
   bookType: BookType;
+  sentimentThresholdMin: number;
+  sentimentThresholdMax: number;
 }
 
 export interface UseCrowdViewDataReturn {
-  data: CrowdViewData | null;
+  mainData?: CrowdViewMainData | null;
+  additionalData?: CrowdViewAdditionalData | null;
   loading: boolean;
   error: boolean;
 }
 
-export type GetOptionType = (
-  props: CrowdViewData,
-  isDark: boolean,
-  isDesktop: boolean,
-  labelCallback: (key: string, params?: Record<string, unknown>) => string
-) => EChartsOption;
+interface GetOptionProps {
+  mainData: CrowdViewMainData;
+  additionalData: CrowdViewAdditionalData;
+  isDark: boolean;
+  isDesktop: boolean;
+  labelCallback: (key: string, params?: Record<string, unknown>) => string;
+}
+
+export type GetOptionType = (props: GetOptionProps) => EChartsOption;
 
 export interface ChartProps {
-  data: CrowdViewData;
+  mainData: CrowdViewMainData;
+  additionalData: CrowdViewAdditionalData;
   isDesktop: boolean;
 }
 
@@ -57,6 +71,58 @@ export interface ChartWithDataProps {
 }
 
 export interface GetLabelsDataProps {
-  xAxisData: string[];
+  dates: 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>;