@oanda/labs-crowd-view-widget 1.0.43 → 1.0.45

package/src/CrowdViewWidget/Main.tsx

@@ -6,33 +6,45 @@ import {
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
-import { BookType, Division } from '../gql/types/graphql';
+import type { Granularity } from '../gql/types/graphql';
+import { BookType } from '../gql/types/graphql';
 import { ChartWithData, Legend } from './components';
-import {
-  granularitySelectConfig,
-  instrumentSelectConfig,
-  instrumentSelectConfigOC,
-  navigationConfig,
-} from './config';
-import type { GranularityId, InstrumentId, MainProps } from './types';
+import { granularitySelectConfig, navigationConfig } from './selectConfig';
+import type { MainProps } from './types';
+import type { InstrumentId } from './types/instruments';
+import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
-  const instrumentSelectConfigWithDivision =
-    division === Division.Oc
-      ? instrumentSelectConfigOC
-      : instrumentSelectConfig;
-
+  const { lang } = useLocale();
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
+
   const [bookType, setBookType] = useState(BookType.Order);
+
+  const granularitySelectConfigWithLang = useMemo(
+    () =>
+      granularitySelectConfig.map((opt) => ({
+        ...opt,
+        label: lang(opt.label),
+      })),
+    [lang]
+  );
+
+  const instrumentSelectConfigWithDivision =
+    getInstrumentConfigForDivision(division);
   const [instrument, setInstrument] = useState(
     instrumentSelectConfigWithDivision[0]
   );
 
-  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);
-  const { lang } = useLocale();
+  const [granularity, setGranularity] = useState(
+    granularitySelectConfigWithLang[0]
+  );
+
+  useEffect(() => {
+    setGranularity(granularitySelectConfigWithLang[0]);
+  }, [granularitySelectConfigWithLang]);
 
   return (
     <>
@@ -72,12 +84,12 @@ const Main = ({ division }: MainProps) => {
               })}
             >
               <Select
-                options={granularitySelectConfig}
+                options={granularitySelectConfigWithLang}
                 searchPlaceholder={lang('search')}
                 selectLabel={lang('granularity')}
                 selectedOption={granularity}
                 setSelectedOption={(val) =>
-                  setGranularity(val as { id: GranularityId; label: string })
+                  setGranularity(val as { id: Granularity; label: string })
                 }
               />
             </div>
@@ -85,14 +97,12 @@ const Main = ({ division }: MainProps) => {
 
           <ChartWithData
             bookType={bookType}
+            division={division}
             granularity={granularity.id}
             instrument={instrument.id}
           />
 
-          <Legend
-            longValues={[0.15, 0.25, 0.4, 0.55]}
-            shortValues={[0.15, 0.25, 0.4, 0.55]}
-          />
+          <Legend />
         </div>
       )}
     </>

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

@@ -4,8 +4,14 @@ import {
   Theme,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
 import type { EChartsType } from 'echarts';
-import { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';
+import {
+  BarChart,
+  CandlestickChart,
+  CustomChart,
+  ScatterChart,
+} from 'echarts/charts';
 import {
   DataZoomInsideComponent,
   GraphicComponent,
@@ -17,10 +23,14 @@ import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React from 'react';
 
-import { CHART_HEIGHT } from './constants';
-import { getOption } from './getOption';
+import { CHART_CONFIG } from '../../constants';
+import { getOption } from './chartOptions';
 import type { ChartProps } from './types';
-import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';
+import {
+  formatXAxisLabel,
+  getLabelData,
+  isDifferenceGreaterThanTwoWeeks,
+} from './utils/chartUtils';
 
 echarts.use([
   GridSimpleComponent,
@@ -32,6 +42,7 @@ echarts.use([
   TooltipComponent,
   CandlestickChart,
   MarkPointComponent,
+  ScatterChart,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
@@ -39,14 +50,16 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ data }: ChartProps) => {
   const { isDark } = useLayoutProvider();
+  const { lang } = useLocale();
 
   return (
     <BaseChart
-      chartHeight={CHART_HEIGHT}
+      chartHeight={CHART_CONFIG.HEIGHT}
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption(data, isDark)}
+      option={getOption(data, isDark, lang)}
+      opts={{ renderer: 'canvas' }}
       onEvents={{
         datazoom: (_params: unknown, instance: EChartsType) => {
           const { dataZoom } = instance.getOption();
@@ -68,17 +81,8 @@ const Chart = ({ data }: ChartProps) => {
           instance.setOption({
             xAxis: {
               axisLabel: {
-                formatter: (value: string) => {
-                  const date = new Date(value);
-                  return isGreaterThanTwoWeeks
-                    ? `${date.toLocaleTimeString(undefined, {
-                        hour: '2-digit',
-                        minute: '2-digit',
-                      })}`
-                    : `${date.toLocaleDateString(undefined, {
-                        day: 'numeric',
-                      })}`;
-                },
+                formatter: (value: string) =>
+                  formatXAxisLabel(value, isGreaterThanTwoWeeks),
               },
             },
             series: [

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

@@ -6,27 +6,27 @@ import {
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import classnames from 'classnames';
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
-import { transformDataForChart } from './utils';
+import { useCrowdViewData } from './useCrowdViewData';
 
 const ChartWithData = ({
   instrument,
   bookType,
+  division,
   granularity,
 }: ChartWithDataProps) => {
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const isError = false;
-  const loading = false;
-
-  const transformedData = useMemo(() => {
-    return transformDataForChart({ granularity });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [instrument, granularity, bookType]);
+  const { data, loading, error } = useCrowdViewData({
+    instrument,
+    bookType,
+    division,
+    granularity,
+  });
 
   return (
     <>
@@ -36,7 +36,7 @@ const ChartWithData = ({
           'lw-h-[390px]': !isDesktop,
         })}
       >
-        {isError && (
+        {error && (
           <div
             className={classnames(
               'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
@@ -62,9 +62,9 @@ const ChartWithData = ({
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}
-        {!isError && transformedData && (
+        {!loading && !error && !!data && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-            <Chart data={transformedData} />
+            <Chart data={data} />
           </div>
         )}
       </div>

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

@@ -0,0 +1,205 @@
+import {
+  colorPalette,
+  getGridLines,
+  getLineCommons,
+} from '@oanda/labs-widget-common';
+
+import { CHART_CONFIG } from '../../constants';
+import type { GetOptionType } from './types';
+import {
+  formatXAxisLabel,
+  getLabelData,
+  getRectColor,
+  getTooltipFormatter,
+  isDifferenceGreaterThanTwoWeeks,
+} from './utils/chartUtils';
+
+// @ts-expect-error
+export const getOption: GetOptionType = (
+  { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth, buckets },
+  isDark,
+  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 isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+    visibleXAxisData[0],
+    visibleXAxisData[visibleXAxisData.length - 1]
+  );
+
+  const labelsData = getLabelData({
+    xAxisData,
+    isGreaterThanTwoWeeks,
+  });
+
+  const gridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_CONFIG.WIDTH,
+    chartHeight: CHART_CONFIG.HEIGHT,
+    xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
+    yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,
+    bottomLeftBox: false,
+  });
+
+  return {
+    animation: false,
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        start: CHART_CONFIG.INITIAL_START_ZOOM,
+        end: CHART_CONFIG.INITIAL_END_ZOOM,
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        axis: 'x',
+        label: {
+          formatter: (params) => {
+            if (params.axisDimension === 'y') {
+              selectedPrice = Number(params.value);
+              return Number(params.value).toFixed(5);
+            }
+
+            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 null;
+          },
+        },
+      },
+      confine: true,
+      formatter: (params) =>
+        getTooltipFormatter(
+          params,
+          buckets,
+          bucketWidth,
+          selectedPrice,
+          labelCallback
+        ),
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      splitNumber: 1,
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        padding: [8, 16, 8, 16],
+        margin: 0,
+        formatter: (value) => formatXAxisLabel(value, isGreaterThanTwoWeeks),
+      },
+    },
+    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,
+      },
+    },
+    series: [
+      {
+        type: 'candlestick',
+        id: 'candlestick',
+        data: candlesSeriesData,
+        itemStyle: {
+          color: colorPalette.raspberryLight,
+          color0: colorPalette.bottleGreenLight,
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 0,
+          data: labelsData,
+        },
+      },
+      {
+        type: 'custom',
+        name: 'heatmap',
+        id: 'heatmap',
+        silent: true,
+        clip: true,
+        renderItem: (_params, api) => {
+          const xVal = api.value(0);
+          const bucketIndex = api.value(2) as number;
+          const metaValues = buckets[bucketIndex];
+
+          const [rectWidth, rectHeight] = api.size!([
+            0,
+            bucketWidth,
+          ]) as number[];
+
+          const items = metaValues.map(
+            ({ price, sentiment }: { price: number; sentiment: number }) => {
+              const start = api.coord([xVal, price]);
+
+              return {
+                type: 'rect',
+                shape: {
+                  x: start[0] - rectWidth / 2,
+                  y: start[1] - rectHeight,
+                  width: rectWidth,
+                  height: rectHeight,
+                },
+                style: {
+                  fill: getRectColor(sentiment),
+                },
+                silent: true,
+                emphasisDisabled: true,
+              };
+            }
+          );
+
+          return {
+            type: 'group',
+            children: items,
+            silent: true,
+            emphasisDisabled: true,
+          };
+        },
+        data: orderPositionBooks,
+      },
+    ],
+    grid: [
+      {
+        name: 'main-grid',
+        top: '0px',
+        left: '0px',
+        right: `${CHART_CONFIG.Y_LABEL_SIZE_DESKTOP}px`,
+        bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
+      },
+    ],
+    graphic: [
+      ...gridLines,
+      {
+        ...getLineCommons(isDark as boolean),
+        top: 0,
+        right: 0,
+        shape: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 0,
+        },
+      },
+    ],
+  };
+};

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

@@ -1,2 +1,6 @@
 export * from './Chart';
+export * from './chartOptions';
 export * from './ChartWithData';
+export * from './types';
+export * from './useCrowdViewData';
+export * from './utils/chartUtils';

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

@@ -1,45 +1,51 @@
 import type { EChartsOption } from 'echarts';
 
-import type { BookType } from '../../../gql/types/graphql';
-import type { GranularityId } from '../../types';
+import type {
+  BookType,
+  Division,
+  Granularity,
+} from '../../../gql/types/graphql';
 
-interface ChartOptionsProps {
+export interface UseCrowdViewDataProps {
+  instrument: string;
+  bookType: BookType;
+  division: Division;
+  granularity: Granularity;
+}
+
+interface CrowdViewData {
   xAxisData: string[];
-  ordersPositionsChartData: [
-    // timestamp
-    string,
-    // price
-    number,
-    // orders-positions sentiment
-    number,
-  ][];
-  ordersPositionsBucketWidth: number;
+  // [open, close, low, high]
   candlesSeriesData: [number, number, number, number][];
+  // [time, price, index]
+  orderPositionBooks: ([string, number, number] | null)[];
+  bucketWidth: number;
+  buckets: { price: number; sentiment: number }[][];
+}
+
+export interface UseCrowdViewDataReturn {
+  data: CrowdViewData | null;
+  loading: boolean;
+  error: boolean;
 }
 
 export type GetOptionType = (
-  props: ChartOptionsProps,
-  isDark: boolean
+  props: CrowdViewData,
+  isDark: boolean,
+  labelCallback: (key: string, params?: Record<string, unknown>) => string
 ) => EChartsOption;
 
 export interface ChartProps {
-  data: ChartOptionsProps;
+  data: CrowdViewData;
 }
 
 export interface ChartWithDataProps {
   bookType: BookType;
+  division: Division;
   instrument: string;
-  granularity: GranularityId;
-}
-
-interface TransformDataForChartTypeProps {
-  granularity: GranularityId;
+  granularity: Granularity;
 }
 
-export type TransformDataForChartType = (
-  props: TransformDataForChartTypeProps
-) => ChartOptionsProps;
-
 export interface GetLabelsDataProps {
   xAxisData: string[];
   isGreaterThanTwoWeeks: boolean;