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

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

@@ -5,11 +5,14 @@ import {
   SpinnerSize,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDebounceCallback } from 'usehooks-ts';
 
+import { CHART_CONFIG } from '../../constants';
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
 import { useCrowdViewData } from './useCrowdViewData';
+import { useResizeObserver } from './useResizeObserver';
 
 const ChartWithData = ({
   instrument,
@@ -18,37 +21,71 @@ const ChartWithData = ({
   granularity,
 }: ChartWithDataProps) => {
   const { size } = useLayoutProvider();
+  const [debouncedLoading, setDebouncedLoading] = useState(true);
+  const [containerRef, isResizing] = useResizeObserver({ debounceDelay: 150 });
   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]);
+
+  const showChart =
+    !priceCandlesLoading &&
+    !error &&
+    !!mainData &&
+    !!additionalData &&
+    !isResizing;
+  const showLoader = loading || isResizing;
+
+  const chartHeight = isDesktop
+    ? CHART_CONFIG.HEIGHT_DESKTOP
+    : CHART_CONFIG.HEIGHT_MOBILE;
 
   return (
     <>
-      <div className="lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden">
+      <div
+        ref={containerRef}
+        className="lw-relative lw-w-full lw-overflow-hidden"
+        style={{ height: chartHeight }}
+      >
         {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 && (
+        {showChart && (
           <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>
         )}
+        {showLoader && (
+          <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>
     </>
   );

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

@@ -2,12 +2,21 @@ import type { DataZoomComponentOption } from 'echarts';
 
 import { CHART_CONFIG } from '../../../constants';
 
-export const getDataZoomConfig = (): DataZoomComponentOption => ({
+interface GetDataZoomConfigParams {
+  isDesktop: boolean;
+}
+
+export const getDataZoomConfig = ({
+  isDesktop,
+}: GetDataZoomConfigParams): DataZoomComponentOption => ({
   type: 'inside',
   id: 'main',
   xAxisIndex: [0, 1],
-  start: CHART_CONFIG.INITIAL_START_ZOOM,
+  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

@@ -8,22 +8,37 @@ interface GetGridConfigParams {
 
 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`,
-  },
-];
+}: GetGridConfigParams): GridComponentOption[] => {
+  const {
+    Y_SENTIMENT_LABEL_DESKTOP_SIZE,
+    Y_SENTIMENT_LABEL_MOBILE_SIZE,
+    Y_LABEL_SIZE_DESKTOP,
+    Y_LABEL_SIZE_MOBILE,
+    TOP_MARGIN_DESKTOP,
+    TOP_MARGIN_MOBILE,
+    MAIN_HEIGHT_DESKTOP,
+    MAIN_HEIGHT_MOBILE,
+    MOBILE_TOOLTIP_HEIGHT,
+  } = CHART_CONFIG;
+
+  const mainHeight = isDesktop ? MAIN_HEIGHT_DESKTOP : MAIN_HEIGHT_MOBILE;
+
+  const position = {
+    left: `${isDesktop ? Y_SENTIMENT_LABEL_DESKTOP_SIZE : Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,
+    right: `${isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE}px`,
+    top: `${isDesktop ? TOP_MARGIN_DESKTOP : TOP_MARGIN_MOBILE + MOBILE_TOOLTIP_HEIGHT}px`,
+    height: `${mainHeight}px`,
+  };
+  return [
+    {
+      id: 'main-grid',
+      name: 'main-grid',
+      ...position,
+    },
+    {
+      id: 'sentiment-grid',
+      name: 'sentiment-grid',
+      ...position,
+    },
+  ];
+};

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

@@ -5,13 +5,33 @@ 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, Y_SENTIMENT_LABEL_SIZE } =
-    CHART_CONFIG;
+  const {
+    WIDTH,
+    MAIN_HEIGHT_DESKTOP,
+    MAIN_HEIGHT_MOBILE,
+    X_LABEL_SIZE,
+    MOBILE_TOOLTIP_HEIGHT,
+  } = CHART_CONFIG;
+  const mainHeight = isDesktop ? MAIN_HEIGHT_DESKTOP : MAIN_HEIGHT_MOBILE;
+  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
+    ? CHART_CONFIG.TOP_MARGIN_DESKTOP
+    : CHART_CONFIG.TOP_MARGIN_MOBILE + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;
+
   return [
     // Top
     {
@@ -23,6 +43,7 @@ export const getGridLines = ({
         x2: WIDTH,
         y2: 0,
       },
+      z: 30,
     },
     // Right
     {
@@ -32,8 +53,9 @@ export const getGridLines = ({
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+        y2: mainHeight + topMargin + X_LABEL_SIZE + 2,
       },
+      z: 30,
     },
     // Bottom
     {
@@ -45,6 +67,7 @@ export const getGridLines = ({
         x2: WIDTH,
         y2: 0,
       },
+      z: 30,
     },
     // Left
     {
@@ -54,31 +77,71 @@ export const getGridLines = ({
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+        y2: mainHeight + X_LABEL_SIZE + topMargin + 2,
       },
+      z: 30,
+    },
+    // Y Label
+    {
+      ...getLineCommons(isDark),
+      right: yLabelSize - 3,
+      top: topMargin - 2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: mainHeight,
+      },
+      z: 30,
     },
     // Y Sentiment Label
     {
       ...getLineCommons(isDark),
-      left: Y_SENTIMENT_LABEL_SIZE - 2,
-      top: -2,
+      left: ySentimentLabelSize - 2,
+      top: topMargin - 2,
       shape: {
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT,
+        y2: mainHeight,
       },
+      z: 30,
     },
     // X Label
     {
       ...getLineCommons(isDark),
-      top: MAIN_HEIGHT - 2,
+      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,
+    },
+    // Mobile tooltip,
+    {
+      ...getLineCommons(isDark),
+      top: MOBILE_TOOLTIP_HEIGHT - 2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: isDesktop ? 0 : WIDTH,
+        y2: 0,
+      },
+      z: 30,
     },
   ];
 };

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

@@ -0,0 +1,207 @@
+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 + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;
+
+  const mainHeight = isDesktop
+    ? CHART_CONFIG.MAIN_HEIGHT_DESKTOP
+    : CHART_CONFIG.MAIN_HEIGHT_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: `${topMargin + mainHeight - 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 + mainHeight / 2 - sentimentVerticalOffset}px`
+        : `${topMargin - 16}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 + mainHeight / 2 - priceVerticalOffset}px`
+        : `${topMargin - 16}px`,
+      silent: true,
+      style: {
+        fontSize: 10,
+        fontFamily: 'Sofia W03',
+        fontWeight: 300,
+        fill: textColor,
+        text: priceText,
+      },
+    },
+    {
+      type: 'rect',
+      z: 20,
+      right: '0px',
+      top: `${topMargin}px`,
+      shape: {
+        width: yMainLabelSize,
+        height: mainHeight,
+      },
+      silent: true,
+      style: {
+        fill: backgroundColor,
+      },
+    },
+    {
+      type: 'rect',
+      z: 20,
+      left: '0px',
+      top: `${topMargin}px`,
+      shape: {
+        width: ySentimentLabelSize,
+        height: mainHeight,
+      },
+      silent: true,
+      style: {
+        fill: backgroundColor,
+      },
+    },
+    {
+      type: 'text',
+      z: 20,
+      left: 'center',
+      top: CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT / 2 - 5,
+      silent: true,
+      style: {
+        fontSize: isDesktop ? 0 : 11,
+        fill: textColor,
+        text: isDesktop ? '' : labelCallback('tap_chart_to_see_more_details'),
+      },
+    },
+  ];
+};

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

@@ -1,31 +1,28 @@
 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;
+  isLoading: boolean;
 }
 
 export const getSeriesCandlestickConfig = ({
-  dates,
-  isGreaterThanTwoWeeks,
   styles,
+  isLoading,
 }: GetSeriesCandlestickConfigParams): CandlestickSeriesOption => {
   const { candleLongColor, candleShortColor } = styles;
-  const labelsData = getLabelData({
-    dates,
-    isGreaterThanTwoWeeks,
-  });
 
   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'],
@@ -42,11 +39,6 @@ export const getSeriesCandlestickConfig = ({
         color0: candleShortColor,
       },
     },
-    markPoint: {
-      data: labelsData,
-      symbol: 'circle',
-      symbolSize: 0,
-    },
-    z: 2,
+    z: 3,
   };
 };

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

@@ -13,6 +13,7 @@ interface GetSeriesHeatmapConfigParams {
   isDark: boolean;
   sentimentThresholdMax: number;
   sentimentThresholdMin: number;
+  isLoading: boolean;
 }
 
 export const getSeriesHeatmapConfig = ({
@@ -21,8 +22,10 @@ export const getSeriesHeatmapConfig = ({
   isDark,
   sentimentThresholdMax,
   sentimentThresholdMin,
+  isLoading,
 }: GetSeriesHeatmapConfigParams): CustomSeriesOption => {
   return {
+    animation: isLoading,
     type: 'custom',
     id: 'heatmap',
     name: 'heatmap',
@@ -35,9 +38,11 @@ export const getSeriesHeatmapConfig = ({
     dimensions: ['dates', 'bookPrices', 'bookIndexes'],
     clip: true,
     renderItem: (
-      _params: CustomSeriesRenderItemParams,
+      params: CustomSeriesRenderItemParams,
       api: CustomSeriesRenderItemAPI
     ) => {
+      const animationDelay =
+        (350 * params.dataIndexInside) / params.dataInsideLength;
       const xVal = api.value(0);
       const bucketIndex = api.value(2) as number;
 
@@ -47,12 +52,17 @@ export const getSeriesHeatmapConfig = ({
 
       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,
@@ -67,6 +77,16 @@ export const getSeriesHeatmapConfig = ({
               sentimentThresholdMax
             ),
           },
+          enterFrom: {
+            shape: {},
+            style: {
+              opacity: 0,
+            },
+          },
+          enterAnimation: {
+            duration: 150,
+            delay: animationDelay,
+          },
           type: 'rect' as const,
         };
       });
@@ -74,6 +94,7 @@ export const getSeriesHeatmapConfig = ({
       return {
         children: items,
         emphasisDisabled: true,
+        silent: true,
         type: 'group' as const,
       };
     },

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

@@ -5,12 +5,16 @@ 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',
@@ -18,9 +22,9 @@ export const getSeriesSentimentConfig = ({
     yAxisIndex: 1,
     encode: {
       x: 'dates',
-      y: 'sentimentShorts',
+      y: 'sentimentLongs',
     },
-    dimensions: ['dates', 'sentimentShorts', 'sentimentLongs'],
+    dimensions: ['dates', 'sentimentLongs', 'sentimentShorts'],
     lineStyle: {
       width: styles.sentimentOutlineWidth,
       opacity: 1,
@@ -30,7 +34,11 @@ export const getSeriesSentimentConfig = ({
     emphasis: {
       disabled: true,
     },
+    tooltip: {
+      show: false,
+    },
     markLine: {
+      animation: isLoading,
       silent: true,
       symbol: ['none', 'none'],
       label: {
@@ -55,9 +63,10 @@ export const getSeriesSentimentConfig = ({
         },
       ],
     },
-    stack: 'sentiment',
     showSymbol: false,
     symbol: 'none',
-    z: 3,
+    z: 2,
+    connectNulls: true,
+    silent: true,
   };
 };