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

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

@@ -6,26 +6,29 @@ import {
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import type { EChartsType } from 'echarts';
+import { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';
 import {
-  BarChart,
-  CandlestickChart,
-  CustomChart,
-  ScatterChart,
-} from 'echarts/charts';
-import {
+  DatasetComponent,
   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,65 +38,123 @@ import {
 echarts.use([
   GridSimpleComponent,
   GraphicComponent,
-  BarChart,
   CanvasRenderer,
   DataZoomInsideComponent,
   CustomChart,
   TooltipComponent,
   CandlestickChart,
   MarkPointComponent,
-  ScatterChart,
+  MarkAreaComponent,
+  LineChart,
+  VisualMapComponent,
+  DatasetComponent,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ data, isDesktop }: ChartProps) => {
+const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
   const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
 
   return (
     <BaseChart
-      chartHeight={CHART_CONFIG.HEIGHT}
+      chartHeight={CHART_CONFIG_CALCULATED.FULL_HEIGHT}
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption(data, isDark, isDesktop, lang)}
+      option={getOption({
+        mainData,
+        additionalData,
+        isDark,
+        isDesktop,
+        labelCallback: 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 { dates } = mainData;
+          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 (!dates[startValue] || !dates[endValue]) {
+            return;
+          }
 
           const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-            data.xAxisData[startValue],
-            data.xAxisData[endValue]
+            dates[startValue],
+            dates[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({
+              dates,
+              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

@@ -7,6 +7,7 @@ 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';
@@ -17,10 +18,10 @@ const ChartWithData = ({
   division,
   granularity,
 }: ChartWithDataProps) => {
-  const { size } = useLayoutProvider();
+  const { size, isDark } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const { data, loading, error } = useCrowdViewData({
+  const { mainData, additionalData, loading, error } = useCrowdViewData({
     instrument,
     bookType,
     division,
@@ -29,23 +30,39 @@ 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>
         )}
-        {!loading && !error && !!data && (
+        {!loading && !error && !!mainData && !!additionalData && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-            <Chart data={data} isDesktop={isDesktop} />
+            <Chart
+              additionalData={additionalData}
+              isDesktop={isDesktop}
+              mainData={mainData}
+            />
           </div>
         )}
       </div>
+      <Legend
+        bookType={bookType}
+        isDark={isDark}
+        longValues={[
+          additionalData?.sentimentThresholdMin,
+          additionalData?.sentimentThresholdMax,
+        ]}
+        shortValues={[
+          additionalData?.sentimentThresholdMin,
+          additionalData?.sentimentThresholdMax,
+        ]}
+      />
     </>
   );
 };