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

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

@@ -5,9 +5,9 @@ import {
   SpinnerSize,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDebounceCallback } from 'usehooks-ts';
 
-import { Legend } from '../Legend';
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
 import { useCrowdViewData } from './useCrowdViewData';
@@ -18,51 +18,56 @@ const ChartWithData = ({
   division,
   granularity,
 }: ChartWithDataProps) => {
-  const { size, isDark } = useLayoutProvider();
+  const { size } = useLayoutProvider();
+  const [debouncedLoading, setDebouncedLoading] = useState(true);
   const isDesktop = size === Size.DESKTOP;
 
-  const { mainData, additionalData, loading, error } = useCrowdViewData({
-    instrument,
-    bookType,
-    division,
-    granularity,
-  });
+  const { mainData, additionalData, loading, priceCandlesLoading, error } =
+    useCrowdViewData({
+      instrument,
+      bookType,
+      division,
+      granularity,
+    });
+
+  const hideLoading = useDebounceCallback(
+    () => setDebouncedLoading(false),
+    500
+  );
+
+  useEffect(() => {
+    if (loading === false) {
+      hideLoading();
+    }
+    if (loading === true) {
+      setDebouncedLoading(true);
+    }
+  }, [loading, hideLoading]);
 
   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 />
           </div>
         )}
-        {loading && (
-          <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>
-        )}
-        {!loading && !error && !!mainData && !!additionalData && (
+        {!priceCandlesLoading && !error && !!mainData && !!additionalData && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
             <Chart
               additionalData={additionalData}
               isDesktop={isDesktop}
+              isLoading={debouncedLoading}
               mainData={mainData}
             />
           </div>
         )}
+        {loading && (
+          <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 lw-bg-bg-transparent-50">
+            <Spinner size={SpinnerSize.lg} />
+          </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,22 @@
+import type { DataZoomComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+interface GetDataZoomConfigParams {
+  isDesktop: boolean;
+}
+
+export const getDataZoomConfig = ({
+  isDesktop,
+}: GetDataZoomConfigParams): DataZoomComponentOption => ({
+  type: 'inside',
+  id: 'main',
+  xAxisIndex: [0, 1],
+  start: isDesktop
+    ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP
+    : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE,
+  end: CHART_CONFIG.INITIAL_END_ZOOM,
+  filterMode: 'filter',
+  minSpan: 10,
+  preventDefaultMouseMove: true,
+});

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: `${isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,
+    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
+    top: `${isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE}px`,
+    bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
+    height: `${isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE}px`,
+  },
+  {
+    id: 'sentiment-grid',
+    name: 'sentiment-grid',
+    left: `${isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,
+    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
+    top: `${isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE}px`,
+    height: `${isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE}px`,
+  },
+];

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

@@ -0,0 +1,126 @@
+import { getLineCommons } from '@oanda/labs-widget-common';
+import type { GraphicComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+interface GetGridLinesParams {
+  isDark: boolean;
+  isDesktop: boolean;
+}
+
+export const getGridLines = ({
+  isDark,
+  isDesktop,
+}: GetGridLinesParams): GraphicComponentOption[] => {
+  const { WIDTH, MAIN_HEIGHT, X_LABEL_SIZE } = CHART_CONFIG;
+  const ySentimentLabelSize = isDesktop
+    ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE
+    : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;
+
+  const yLabelSize = isDesktop
+    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP
+    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;
+
+  const topMargin = isDesktop ? 0 : CHART_CONFIG.TOP_MARGIN_MOBILE;
+
+  return [
+    // Top
+    {
+      ...getLineCommons(isDark),
+      top: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+      z: 30,
+    },
+    // Right
+    {
+      ...getLineCommons(isDark),
+      right: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+      },
+      z: 30,
+    },
+    // Bottom
+    {
+      ...getLineCommons(isDark),
+      bottom: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+      z: 30,
+    },
+    // Left
+    {
+      ...getLineCommons(isDark),
+      left: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+      },
+      z: 30,
+    },
+    // Y Label
+    {
+      ...getLineCommons(isDark),
+      right: yLabelSize - 3,
+      top: topMargin - 2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT - topMargin,
+      },
+      z: 30,
+    },
+    // Y Sentiment Label
+    {
+      ...getLineCommons(isDark),
+      left: ySentimentLabelSize - 2,
+      top: topMargin - 2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT - topMargin,
+      },
+      z: 30,
+    },
+    // X Label
+    {
+      ...getLineCommons(isDark),
+      bottom: X_LABEL_SIZE - 3,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+      z: 30,
+    },
+    // X Mobile Label
+    {
+      ...getLineCommons(isDark),
+      top: topMargin - 3,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+      z: 30,
+    },
+  ];
+};

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

@@ -0,0 +1,191 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
+import type { GraphicComponentOption } from 'echarts';
+
+import { CHART_CONFIG } from '../../../constants';
+
+interface getLabelsConfigParams {
+  isDark: boolean;
+  isDesktop: boolean;
+  labelCallback: (key: string, params?: Record<string, unknown>) => string;
+}
+
+export const getLabelsConfig = ({
+  isDark,
+  isDesktop,
+  labelCallback,
+}: getLabelsConfigParams): GraphicComponentOption[] => {
+  const ySentimentLabelSize = isDesktop
+    ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE
+    : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;
+
+  const yMainLabelSize = isDesktop
+    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP
+    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;
+
+  const textColor = isDark ? colorPalette.white : colorPalette.black;
+  const labelBackgroundColor = isDark
+    ? colorPalette.darkGray
+    : colorPalette.white;
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const shadowColor = chroma(colorPalette.black).alpha(0.1).hex();
+
+  // Estimate text width for centering rotated text
+  // Approximate: fontSize * characterCount * 0.65 (typical character width ratio)
+  const sentimentText = labelCallback('sentiment').toUpperCase();
+  const priceText = labelCallback('price').toUpperCase();
+  const sentimentEstimatedWidth = 10 * sentimentText.length * 0.65;
+  const priceEstimatedWidth = 10 * priceText.length * 0.65;
+  const sentimentVerticalOffset = sentimentEstimatedWidth / 2;
+  const priceVerticalOffset = priceEstimatedWidth / 2;
+
+  const topMargin = isDesktop
+    ? CHART_CONFIG.TOP_MARGIN_DESKTOP
+    : CHART_CONFIG.TOP_MARGIN_MOBILE;
+
+  return [
+    {
+      type: 'group',
+      left: `${ySentimentLabelSize + 5}px'`,
+      top: `${topMargin + 5}px`,
+      silent: true,
+      children: [
+        {
+          type: 'rect',
+          z: 100,
+          right: 'center',
+          top: 'middle',
+          shape: {
+            width: 50,
+            height: 24,
+          },
+          style: {
+            fill: labelBackgroundColor,
+            shadowBlur: 8,
+            shadowOffsetX: 0,
+            shadowOffsetY: 1,
+            shadowColor: shadowColor,
+          },
+        },
+        {
+          type: 'text',
+          z: 100,
+          right: 'center',
+          top: 'middle',
+          style: {
+            fontSize: 11,
+            fontFamily: 'Sofia W03',
+            fontWeight: 500,
+            fill: textColor,
+            width: 70,
+            height: 30,
+            text: labelCallback('short'),
+          },
+        },
+      ],
+    },
+    {
+      type: 'group',
+      left: `${ySentimentLabelSize + 5}px'`,
+      top: `${CHART_CONFIG.MAIN_HEIGHT - 24 - 5}px`,
+      silent: true,
+      children: [
+        {
+          type: 'rect',
+          z: 100,
+          right: 'center',
+          top: 'middle',
+          shape: {
+            width: 50,
+            height: 24,
+          },
+          style: {
+            fill: labelBackgroundColor,
+            shadowBlur: 8,
+            shadowOffsetX: 0,
+            shadowOffsetY: 1,
+            shadowColor: shadowColor,
+          },
+        },
+        {
+          type: 'text',
+          z: 100,
+          right: 'center',
+          top: 'middle',
+          style: {
+            fontSize: 11,
+            fontFamily: 'Sofia W03',
+            fontWeight: 500,
+            fill: textColor,
+            width: 70,
+            height: 30,
+            text: labelCallback('long'),
+          },
+        },
+      ],
+    },
+
+    {
+      type: 'text',
+      z: 30,
+      rotation: isDesktop ? Math.PI / 2 : 0,
+      left: `5px`,
+      top: isDesktop
+        ? `${topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - sentimentVerticalOffset}px`
+        : `${topMargin - 18}px`,
+      silent: true,
+      style: {
+        fontSize: 10,
+        fontFamily: 'Sofia W03',
+        fontWeight: 300,
+        fill: textColor,
+        text: sentimentText,
+      },
+    },
+    {
+      type: 'text',
+      z: 30,
+      rotation: isDesktop ? -Math.PI / 2 : 0,
+      right: `5px`,
+      top: isDesktop
+        ? `${topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - priceVerticalOffset}px`
+        : `${topMargin - 18}px`,
+      silent: true,
+      style: {
+        fontSize: 10,
+        fontFamily: 'Sofia W03',
+        fontWeight: 300,
+        fill: textColor,
+        text: priceText,
+      },
+    },
+    {
+      type: 'rect',
+      z: 20,
+      right: '0px',
+      top: '0px',
+      shape: {
+        width: yMainLabelSize,
+        height: CHART_CONFIG.MAIN_HEIGHT,
+      },
+      silent: true,
+      style: {
+        fill: backgroundColor,
+      },
+    },
+    {
+      type: 'rect',
+      z: 20,
+      left: '0px',
+      top: '0px',
+      shape: {
+        width: ySentimentLabelSize,
+        height: CHART_CONFIG.MAIN_HEIGHT,
+      },
+      silent: true,
+      style: {
+        fill: backgroundColor,
+      },
+    },
+  ];
+};

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

@@ -0,0 +1,44 @@
+import chroma from 'chroma-js';
+import type { CandlestickSeriesOption } from 'echarts';
+
+import type { ChartStyles } from '../chartUtils/getChartStyles';
+
+interface GetSeriesCandlestickConfigParams {
+  styles: ChartStyles;
+  isLoading: boolean;
+}
+
+export const getSeriesCandlestickConfig = ({
+  styles,
+  isLoading,
+}: GetSeriesCandlestickConfigParams): CandlestickSeriesOption => {
+  const { candleLongColor, candleShortColor } = styles;
+
+  return {
+    animation: isLoading,
+    type: 'candlestick',
+    id: 'candlestick',
+    xAxisIndex: 0,
+    yAxisIndex: 0,
+    silent: true,
+    clip: true,
+    large: true,
+    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,
+      },
+    },
+    z: 3,
+  };
+};

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

@@ -0,0 +1,103 @@
+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;
+  isLoading: boolean;
+}
+
+export const getSeriesHeatmapConfig = ({
+  bucketWidth,
+  buckets,
+  isDark,
+  sentimentThresholdMax,
+  sentimentThresholdMin,
+  isLoading,
+}: GetSeriesHeatmapConfigParams): CustomSeriesOption => {
+  return {
+    animation: isLoading,
+    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 animationDelay =
+        (350 * params.dataIndexInside) / params.dataInsideLength;
+      const xVal = api.value(0);
+      const bucketIndex = api.value(2) as number;
+
+      if (bucketIndex == null) {
+        return null;
+      }
+
+      const metaValues = buckets[bucketIndex];
+
+      if (!metaValues) {
+        return null;
+      }
+
+      const [rectWidth, rectHeight] = api.size!([0, bucketWidth]) as number[];
+
+      const items = metaValues.map(({ price, sentiment }: Bucket) => {
+        const start = api.coord([xVal, price]);
+
+        return {
+          silent: true,
+          shape: {
+            height: rectHeight,
+            width: rectWidth + 1,
+            x: start[0] - rectWidth / 2,
+            y: start[1] - rectHeight,
+          },
+          style: {
+            fill: getRectColor(
+              sentiment,
+              isDark,
+              sentimentThresholdMin,
+              sentimentThresholdMax
+            ),
+          },
+          enterFrom: {
+            shape: {},
+            style: {
+              opacity: 0,
+            },
+          },
+          enterAnimation: {
+            duration: 150,
+            delay: animationDelay,
+          },
+          type: 'rect' as const,
+        };
+      });
+
+      return {
+        children: items,
+        emphasisDisabled: true,
+        silent: true,
+        type: 'group' as const,
+      };
+    },
+    z: 1,
+  };
+};

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

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