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

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

@@ -7,7 +7,6 @@ import {
 } from '@oanda/labs-widget-common';
 import React from 'react';
 
-import { Legend } from '../Legend';
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
 import { useCrowdViewData } from './useCrowdViewData';
@@ -18,7 +17,7 @@ const ChartWithData = ({
   division,
   granularity,
 }: ChartWithDataProps) => {
-  const { size, isDark } = useLayoutProvider();
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const { mainData, additionalData, loading, error } = useCrowdViewData({
@@ -30,7 +29,7 @@ const ChartWithData = ({
 
   return (
     <>
-      <div className="lw-relative lw-h-[610px] lw-w-full">
+      <div className="lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden">
         {error && (
           <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 />
@@ -51,18 +50,6 @@ const ChartWithData = ({
           </div>
         )}
       </div>
-      <Legend
-        bookType={bookType}
-        isDark={isDark}
-        longValues={[
-          additionalData?.sentimentThresholdMin,
-          additionalData?.sentimentThresholdMax,
-        ]}
-        shortValues={[
-          additionalData?.sentimentThresholdMin,
-          additionalData?.sentimentThresholdMax,
-        ]}
-      />
     </>
   );
 };

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

@@ -0,0 +1,13 @@
+import type { DataZoomComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+export const getDataZoomConfig = (): DataZoomComponentOption => ({
+  type: 'inside',
+  id: 'main',
+  xAxisIndex: [0, 1],
+  start: CHART_CONFIG.INITIAL_START_ZOOM,
+  end: CHART_CONFIG.INITIAL_END_ZOOM,
+  filterMode: 'filter',
+  minSpan: 10,
+});

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

@@ -0,0 +1,29 @@
+import type { GridComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+interface GetGridConfigParams {
+  isDesktop: boolean;
+}
+
+export const getGridConfig = ({
+  isDesktop,
+}: GetGridConfigParams): GridComponentOption[] => [
+  {
+    id: 'main-grid',
+    name: 'main-grid',
+    left: `${CHART_CONFIG.Y_SENTIMENT_LABEL_SIZE}px`,
+    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
+    top: '0px',
+    bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
+    height: `${CHART_CONFIG.MAIN_HEIGHT}px`,
+  },
+  {
+    id: 'sentiment-grid',
+    name: 'sentiment-grid',
+    left: `${CHART_CONFIG.Y_SENTIMENT_LABEL_SIZE}px`,
+    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
+    top: `0px`,
+    height: `${CHART_CONFIG.MAIN_HEIGHT}px`,
+  },
+];

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

@@ -0,0 +1,84 @@
+import { getLineCommons } from '@oanda/labs-widget-common';
+import type { GraphicComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+interface GetGridLinesParams {
+  isDark: boolean;
+}
+
+export const getGridLines = ({
+  isDark,
+}: GetGridLinesParams): GraphicComponentOption[] => {
+  const { WIDTH, MAIN_HEIGHT, X_LABEL_SIZE, Y_SENTIMENT_LABEL_SIZE } =
+    CHART_CONFIG;
+  return [
+    // Top
+    {
+      ...getLineCommons(isDark),
+      top: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+    },
+    // Right
+    {
+      ...getLineCommons(isDark),
+      right: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+      },
+    },
+    // Bottom
+    {
+      ...getLineCommons(isDark),
+      bottom: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+    },
+    // Left
+    {
+      ...getLineCommons(isDark),
+      left: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+      },
+    },
+    // Y Sentiment Label
+    {
+      ...getLineCommons(isDark),
+      left: Y_SENTIMENT_LABEL_SIZE - 2,
+      top: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT,
+      },
+    },
+    // X Label
+    {
+      ...getLineCommons(isDark),
+      top: MAIN_HEIGHT - 2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+    },
+  ];
+};

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

@@ -0,0 +1,52 @@
+import chroma from 'chroma-js';
+import type { CandlestickSeriesOption } from 'echarts';
+
+import { getLabelData } from '../chartUtils';
+import type { ChartStyles } from '../chartUtils/getChartStyles';
+
+interface GetSeriesCandlestickConfigParams {
+  dates: string[];
+  isGreaterThanTwoWeeks: boolean;
+  styles: ChartStyles;
+}
+
+export const getSeriesCandlestickConfig = ({
+  dates,
+  isGreaterThanTwoWeeks,
+  styles,
+}: GetSeriesCandlestickConfigParams): CandlestickSeriesOption => {
+  const { candleLongColor, candleShortColor } = styles;
+  const labelsData = getLabelData({
+    dates,
+    isGreaterThanTwoWeeks,
+  });
+
+  return {
+    type: 'candlestick',
+    id: 'candlestick',
+    xAxisIndex: 0,
+    yAxisIndex: 0,
+    encode: {
+      x: 'dates',
+      y: ['open', 'close', 'low', 'high'],
+    },
+    itemStyle: {
+      color: chroma(candleLongColor).desaturate().css(),
+      color0: chroma(candleShortColor).desaturate().css(),
+      borderColor: candleLongColor,
+      borderColor0: candleShortColor,
+    },
+    emphasis: {
+      itemStyle: {
+        color: candleLongColor,
+        color0: candleShortColor,
+      },
+    },
+    markPoint: {
+      data: labelsData,
+      symbol: 'circle',
+      symbolSize: 0,
+    },
+    z: 2,
+  };
+};

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

@@ -0,0 +1,82 @@
+import type {
+  CustomSeriesOption,
+  CustomSeriesRenderItemAPI,
+  CustomSeriesRenderItemParams,
+} from 'echarts';
+
+import { getRectColor } from '../chartUtils';
+import type { Bucket } from '../types';
+
+interface GetSeriesHeatmapConfigParams {
+  bucketWidth: number;
+  buckets: Bucket[][];
+  isDark: boolean;
+  sentimentThresholdMax: number;
+  sentimentThresholdMin: number;
+}
+
+export const getSeriesHeatmapConfig = ({
+  bucketWidth,
+  buckets,
+  isDark,
+  sentimentThresholdMax,
+  sentimentThresholdMin,
+}: GetSeriesHeatmapConfigParams): CustomSeriesOption => {
+  return {
+    type: 'custom',
+    id: 'heatmap',
+    name: 'heatmap',
+    xAxisIndex: 0,
+    yAxisIndex: 0,
+    encode: {
+      x: 'dates',
+      y: 'bookPrices',
+    },
+    dimensions: ['dates', 'bookPrices', 'bookIndexes'],
+    clip: true,
+    renderItem: (
+      _params: CustomSeriesRenderItemParams,
+      api: CustomSeriesRenderItemAPI
+    ) => {
+      const xVal = api.value(0);
+      const bucketIndex = api.value(2) as number;
+
+      if (bucketIndex == null) {
+        return null;
+      }
+
+      const metaValues = buckets[bucketIndex];
+
+      const [rectWidth, rectHeight] = api.size!([0, bucketWidth]) as number[];
+
+      const items = metaValues.map(({ price, sentiment }: Bucket) => {
+        const start = api.coord([xVal, price]);
+
+        return {
+          shape: {
+            height: rectHeight,
+            width: rectWidth + 1,
+            x: start[0] - rectWidth / 2,
+            y: start[1] - rectHeight,
+          },
+          style: {
+            fill: getRectColor(
+              sentiment,
+              isDark,
+              sentimentThresholdMin,
+              sentimentThresholdMax
+            ),
+          },
+          type: 'rect' as const,
+        };
+      });
+
+      return {
+        children: items,
+        emphasisDisabled: true,
+        type: 'group' as const,
+      };
+    },
+    z: 1,
+  };
+};

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

@@ -0,0 +1,63 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+import type { LineSeriesOption } from 'echarts';
+
+import type { ChartStyles } from '../chartUtils';
+
+interface GetSeriesSentimentConfigParams {
+  styles: ChartStyles;
+}
+
+export const getSeriesSentimentConfig = ({
+  styles,
+}: GetSeriesSentimentConfigParams): LineSeriesOption => {
+  return {
+    type: 'line',
+    id: 'sentiment',
+    name: 'sentiment',
+    xAxisIndex: 1,
+    yAxisIndex: 1,
+    encode: {
+      x: 'dates',
+      y: 'sentimentShorts',
+    },
+    dimensions: ['dates', 'sentimentShorts', 'sentimentLongs'],
+    lineStyle: {
+      width: styles.sentimentOutlineWidth,
+      opacity: 1,
+      shadowColor: styles.sentimentOutlineColor,
+      shadowBlur: 3,
+    },
+    emphasis: {
+      disabled: true,
+    },
+    markLine: {
+      silent: true,
+      symbol: ['none', 'none'],
+      label: {
+        show: false,
+      },
+      lineStyle: {
+        color: colorPalette.grayLight,
+        width: 1,
+      },
+      data: [
+        {
+          yAxis: 20,
+        },
+        {
+          yAxis: 50,
+          lineStyle: {
+            width: 1,
+          },
+        },
+        {
+          yAxis: 80,
+        },
+      ],
+    },
+    stack: 'sentiment',
+    showSymbol: false,
+    symbol: 'none',
+    z: 3,
+  };
+};

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

@@ -0,0 +1,63 @@
+import type { TooltipComponentOption } from 'echarts';
+
+import type { BookType } from '../../../../gql/types/graphql';
+import { getTooltipFormatter } from '../chartUtils';
+import type { Bucket, TooltipParam } from '../types';
+
+interface GetTooltipConfigParams {
+  bookType: BookType;
+  bucketWidth: number;
+  buckets: Bucket[][];
+  displayPrecision: number;
+  labelCallback: (key: string, params?: Record<string, unknown>) => string;
+  selectedPriceRef: { current: number };
+  tooltipLinesColor: string;
+}
+
+export const getTooltipConfig = ({
+  bookType,
+  bucketWidth,
+  buckets,
+  displayPrecision,
+  labelCallback,
+  selectedPriceRef,
+  tooltipLinesColor,
+}: GetTooltipConfigParams): TooltipComponentOption => ({
+  trigger: 'axis' as const,
+  formatter: (params) =>
+    getTooltipFormatter({
+      bookType,
+      bucketWidth,
+      buckets,
+      labelCallback,
+      params: params as unknown as TooltipParam[],
+      selectedPrice: selectedPriceRef.current,
+    }),
+
+  axisPointer: {
+    type: 'cross' as const,
+    axis: 'x' as const,
+    lineStyle: {
+      color: tooltipLinesColor,
+    },
+    crossStyle: {
+      color: tooltipLinesColor,
+    },
+    label: {
+      padding: 0,
+      lineHeight: 24,
+      formatter: (params: {
+        axisDimension?: string;
+        axisIndex?: number;
+        value: unknown;
+      }) => {
+        if (params.axisDimension === 'y' && params.axisIndex === 0) {
+          selectedPriceRef.current = Number(params.value);
+          return ` ${Number(params.value).toFixed(displayPrecision)} `;
+        }
+        return '';
+      },
+    },
+  },
+  confine: true,
+});

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

@@ -0,0 +1,32 @@
+import type { VisualMapComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+interface GetVisualMapConfigParams {
+  sentimentLongColor: string;
+  sentimentShortColor: string;
+}
+
+export const getVisualMapConfig = ({
+  sentimentLongColor,
+  sentimentShortColor,
+}: GetVisualMapConfigParams): VisualMapComponentOption => ({
+  show: false,
+  dimension: 1,
+  seriesId: 'sentiment',
+  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,
+    },
+  ],
+});

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

@@ -0,0 +1,43 @@
+import type { XAXisComponentOption } from 'echarts';
+
+import { formatXAxisLabel } from '../chartUtils';
+
+interface GetXAxisConfigParams {
+  dates: string[];
+  isGreaterThanTwoWeeks: boolean;
+}
+
+export const getXAxisConfig = ({
+  dates,
+  isGreaterThanTwoWeeks,
+}: GetXAxisConfigParams): XAXisComponentOption[] => [
+  {
+    type: 'category',
+    id: 'main-xAxis',
+    name: 'xAxis-less-than-two-weeks',
+    nameTextStyle: {
+      fontSize: 0,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      padding: [8, 16, 8, 16],
+      margin: 0,
+      formatter: (value: unknown) =>
+        formatXAxisLabel(value, isGreaterThanTwoWeeks),
+    },
+  },
+  {
+    type: 'category',
+    gridIndex: 1,
+    show: false,
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+    data: dates,
+  },
+];

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

@@ -0,0 +1,77 @@
+import type { YAXisComponentOption } from 'echarts';
+
+import { BUCKET_CONFIG, CHART_CONFIG } from '../../../constants';
+
+interface GetYAxisConfigParams {
+  bucketWidth: number;
+  displayPrecision: number;
+  isDesktop: boolean;
+  labelCallback: (key: string, params?: Record<string, unknown>) => string;
+}
+
+export const getYAxisConfig = ({
+  bucketWidth,
+  displayPrecision,
+  isDesktop,
+  labelCallback,
+}: GetYAxisConfigParams): YAXisComponentOption[] => [
+  {
+    type: 'value',
+    gridIndex: 0,
+    position: 'right',
+    min: (val: { min: number }) =>
+      val.min - bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+    max: (val: { max: number }) =>
+      val.max + bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: {
+      showMinLabel: false,
+      showMaxLabel: false,
+      formatter: (value: number) => value.toFixed(displayPrecision - 1),
+    },
+  },
+  {
+    type: 'value',
+    gridIndex: 1,
+    position: 'left',
+    min: CHART_CONFIG.SENTIMENT_MIN,
+    max: CHART_CONFIG.SENTIMENT_MAX,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisPointer: {
+      show: false,
+    },
+    axisLabel: {
+      margin: isDesktop ? 4 : 2,
+      lineHeight: 20,
+      verticalAlignMinLabel: 'bottom',
+      verticalAlignMaxLabel: 'top',
+      customValues: [
+        CHART_CONFIG.SENTIMENT_MIN,
+        CHART_CONFIG.SENTIMENT_MAX / 5,
+        CHART_CONFIG.SENTIMENT_MAX / 2,
+        (CHART_CONFIG.SENTIMENT_MAX * 4) / 5,
+        CHART_CONFIG.SENTIMENT_MAX,
+      ],
+      formatter: (value: number) => {
+        if (value === CHART_CONFIG.SENTIMENT_MIN) {
+          return `${labelCallback('short')}`;
+        }
+        if (value === CHART_CONFIG.SENTIMENT_MAX) {
+          return `${labelCallback('long')}`;
+        }
+        if (value === CHART_CONFIG.SENTIMENT_MAX / 2) {
+          return '50%';
+        }
+        if (value === CHART_CONFIG.SENTIMENT_MAX / 5) {
+          return '80%';
+        }
+        if (value === (CHART_CONFIG.SENTIMENT_MAX * 4) / 5) {
+          return '20%';
+        }
+        return '';
+      },
+    },
+  },
+];

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

@@ -0,0 +1,10 @@
+export * from './getDataZoomConfig';
+export * from './getGridConfig';
+export * from './getGridLines';
+export * from './getSeriesCandlestickConfig';
+export * from './getSeriesHeatmapConfig';
+export * from './getSeriesSentimentConfig';
+export * from './getTooltipConfig';
+export * from './getVisualMapConfig';
+export * from './getXAxisConfig';
+export * from './getYAxisConfig';

package/src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel.ts

@@ -0,0 +1,16 @@
+import { CHART_CONFIG } from '../../../constants';
+
+export const formatXAxisLabel = (
+  value: unknown,
+  isGreaterThanTwoWeeks: boolean
+) => {
+  const date = new Date(value as string);
+  return isGreaterThanTwoWeeks
+    ? `${date.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+      })}`
+    : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(undefined, {
+        day: 'numeric',
+      })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;
+};

package/src/CrowdViewWidget/components/Chart/{utils → chartUtils}/getChartStyles.ts

@@ -3,11 +3,11 @@ import { colorPalette } from '@oanda/labs-widget-common';
 export interface ChartStyles {
   sentimentLongColor: string;
   sentimentShortColor: string;
+  sentimentOutlineColor: string;
   candleLongColor: string;
   candleShortColor: string;
-  sentimentAreaOpacity: number;
   tooltipLinesColor: string;
-  sentimentLabelColor: string;
+  sentimentOutlineWidth: number;
 }
 
 export const getChartStyles = (isDark: boolean): ChartStyles => {
@@ -18,25 +18,28 @@ export const getChartStyles = (isDark: boolean): ChartStyles => {
     ? colorPalette.darkYellow90
     : colorPalette.lightYellow90;
 
+  const sentimentOutlineColor = isDark
+    ? colorPalette.black
+    : colorPalette.white;
+  const sentimentOutlineWidth = isDark ? 3 : 2;
+
   const candleLongColor = isDark
     ? colorPalette.bottleGreenDark
     : colorPalette.bottleGreenLight;
   const candleShortColor = isDark
     ? colorPalette.orange
     : colorPalette.raspberryLight;
-  const sentimentAreaOpacity = isDark ? 0.5 : 0.2;
   const tooltipLinesColor = isDark
     ? colorPalette.orange
     : colorPalette.bottleGreenLight;
-  const sentimentLabelColor = isDark ? colorPalette.white : colorPalette.black;
 
   return {
     sentimentLongColor,
     sentimentShortColor,
+    sentimentOutlineColor,
     candleLongColor,
     candleShortColor,
-    sentimentAreaOpacity,
     tooltipLinesColor,
-    sentimentLabelColor,
+    sentimentOutlineWidth,
   };
 };

package/src/CrowdViewWidget/components/Chart/chartUtils/getGradientColor.ts

@@ -0,0 +1,16 @@
+import chroma from 'chroma-js';
+
+export const getGradientColor = (
+  value: number,
+  startColor: string,
+  targetColor: string,
+  minThreshold: number,
+  maxThreshold: number
+): string => {
+  const colorScale = chroma
+    .scale([startColor, targetColor])
+    .domain([minThreshold, maxThreshold])
+    .mode('rgb');
+
+  return colorScale(value).hex();
+};