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

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

@@ -1,6 +1,9 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
 import type { TooltipComponentOption } from 'echarts';
 
 import type { BookType } from '../../../../gql/types/graphql';
+import { CHART_CONFIG } from '../../../constants';
 import { getTooltipFormatter } from '../chartUtils';
 import type { Bucket, TooltipParam } from '../types';
 
@@ -12,6 +15,11 @@ interface GetTooltipConfigParams {
   labelCallback: (key: string, params?: Record<string, unknown>) => string;
   selectedPriceRef: { current: number };
   tooltipLinesColor: string;
+  sentimentLongs: (number | null)[];
+  sentimentShorts: (number | null)[];
+  isDesktop: boolean;
+  isDark: boolean;
+  locale: string;
 }
 
 export const getTooltipConfig = ({
@@ -22,42 +30,88 @@ export const getTooltipConfig = ({
   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 '';
+  sentimentLongs,
+  sentimentShorts,
+  isDesktop,
+  isDark,
+  locale,
+}: GetTooltipConfigParams): TooltipComponentOption => {
+  const styles = isDesktop
+    ? {
+        backgroundColor: isDark
+          ? chroma(colorPalette.darkGray).alpha(0.95).hex()
+          : chroma(colorPalette.darkWhite).alpha(0.95).hex(),
+        shadowColor: colorPalette.black10,
+        extraCssText: 'z-index: 5;',
+        padding: 8,
+        alwaysShowContent: false,
+        textStyle: {
+          fontSize: 11,
+        },
+      }
+    : {
+        backgroundColor: 'transparent',
+        shadowColor: 'transparent',
+        extraCssText: 'width: 100%; z-index: 5;',
+        padding: 4,
+        alwaysShowContent: true,
+        textStyle: {
+          fontSize: 10,
+          lineHeight: 12,
+        },
+      };
+  return {
+    ...styles,
+    trigger: 'axis' as const,
+    formatter: (params) =>
+      getTooltipFormatter({
+        bookType,
+        bucketWidth,
+        buckets,
+        labelCallback,
+        params: params as unknown as TooltipParam[],
+        selectedPrice: selectedPriceRef.current,
+        sentimentLongs,
+        sentimentShorts,
+        isDesktop,
+        locale,
+        isDark,
+      }),
+    hideDelay: 0,
+    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,
+    position: (point) => {
+      if (isDesktop) {
+        return [
+          point[0] + CHART_CONFIG.TOOLTIP_OFFSET,
+          point[1] + CHART_CONFIG.TOOLTIP_OFFSET,
+        ];
+      }
+      return [0, 0];
     },
-  },
-  confine: true,
-});
+  };
+};

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

@@ -1,43 +1,75 @@
 import type { XAXisComponentOption } from 'echarts';
 
-import { formatXAxisLabel } from '../chartUtils';
+import {
+  formatXAxisAdditionalLabel,
+  formatXAxisLabel,
+  getLabelData,
+} from '../chartUtils';
 
 interface GetXAxisConfigParams {
   dates: string[];
   isGreaterThanTwoWeeks: boolean;
+  locale: string;
 }
 
 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,
+  locale,
+}: GetXAxisConfigParams): XAXisComponentOption[] => {
+  const labelsData = getLabelData({
+    dates,
+    isGreaterThanTwoWeeks,
+  });
+
+  return [
+    {
+      type: 'category',
+      id: 'main-xAxis',
+      nameTextStyle: {
+        fontSize: 0,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          opacity: 0.5,
+        },
+      },
+      axisLabel: {
+        showMaxLabel: false,
+        padding: [8, 16, 8, 16],
+        margin: 0,
+        formatter: (value: unknown) =>
+          formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
+      },
+      boundaryGap: false,
+      z: 2,
     },
-    axisLabel: {
-      show: false,
+    {
+      type: 'category',
+      id: 'additional-xAxis',
+      gridIndex: 1,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        margin: 24,
+        hideOverlap: true,
+        customValues: labelsData,
+        formatter: (value: unknown) =>
+          formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks, locale),
+      },
+      data: dates,
+      boundaryGap: false,
+      z: 2,
     },
-    data: dates,
-  },
-];
+  ];
+};

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

@@ -1,35 +1,41 @@
 import type { YAXisComponentOption } from 'echarts';
 
-import { BUCKET_CONFIG, CHART_CONFIG } from '../../../constants';
+import { 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,
+    min: (val: { min: number }) => {
+      const adjustedMin = val.min - bucketWidth;
+      return Math.floor(adjustedMin / bucketWidth) * bucketWidth;
+    },
+    max: (val: { max: number }) => {
+      const adjustedMax = val.max + bucketWidth;
+      return Math.ceil(adjustedMax / bucketWidth) * bucketWidth;
+    },
     axisLine: { show: false },
     axisTick: { show: false },
+    splitLine: { show: false },
     axisLabel: {
-      showMinLabel: false,
-      showMaxLabel: false,
-      formatter: (value: number) => value.toFixed(displayPrecision - 1),
+      lineHeight: 20,
+      margin: 4,
+      verticalAlignMinLabel: 'bottom',
+      verticalAlignMaxLabel: 'top',
+      formatter: (value: number) => value.toFixed(displayPrecision),
     },
+    z: 30,
   },
   {
     type: 'value',
@@ -39,14 +45,13 @@ export const getYAxisConfig = ({
     max: CHART_CONFIG.SENTIMENT_MAX,
     axisLine: { show: false },
     axisTick: { show: false },
-    axisPointer: {
-      show: false,
-    },
+    axisPointer: { show: false },
+    splitLine: { show: false },
     axisLabel: {
-      margin: isDesktop ? 4 : 2,
+      margin: 4,
       lineHeight: 20,
       verticalAlignMinLabel: 'bottom',
-      verticalAlignMaxLabel: 'top',
+      verticalAlignMaxLabel: isDesktop ? 'middle' : 'top',
       customValues: [
         CHART_CONFIG.SENTIMENT_MIN,
         CHART_CONFIG.SENTIMENT_MAX / 5,
@@ -54,24 +59,8 @@ export const getYAxisConfig = ({
         (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 '';
-      },
+      formatter: (value: number) => `${value}%`,
     },
+    z: 30,
   },
 ];

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

@@ -1,6 +1,7 @@
 export * from './getDataZoomConfig';
 export * from './getGridConfig';
 export * from './getGridLines';
+export * from './getLabelsConfig';
 export * from './getSeriesCandlestickConfig';
 export * from './getSeriesHeatmapConfig';
 export * from './getSeriesSentimentConfig';

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

@@ -0,0 +1,14 @@
+export const formatXAxisAdditionalLabel = (
+  value: unknown,
+  isGreaterThanTwoWeeks: boolean,
+  locale: string
+) => {
+  const date = new Date(value as string);
+  if (isNaN(date.getTime())) {
+    return '';
+  }
+  return `${date.toLocaleDateString(locale, {
+    month: isGreaterThanTwoWeeks ? 'short' : 'long',
+    day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
+  })}`;
+};

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

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

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

@@ -1,42 +1,18 @@
-import { CHART_CONFIG } from '../../../constants';
 import type { GetLabelsDataProps } from '../types';
 
 export const getLabelData = ({
   dates,
   isGreaterThanTwoWeeks,
 }: GetLabelsDataProps) =>
-  dates
-    .filter((record, index, arr) => {
-      if (index === 0) {
-        return false;
-      }
-      const previousTimestamp = arr[index - 1];
-      const currentDate = new Date(record);
-      const previousDate = new Date(previousTimestamp);
+  dates.filter((record, index, arr) => {
+    if (index === 0) {
+      return false;
+    }
+    const previousTimestamp = arr[index - 1];
+    const currentDate = new Date(record);
+    const previousDate = new Date(previousTimestamp);
 
-      return isGreaterThanTwoWeeks
-        ? currentDate.getDate() !== previousDate.getDate()
-        : currentDate.getMonth() !== previousDate.getMonth();
-    })
-    .map(
-      (item) =>
-        ({
-          name: new Date(item).toLocaleDateString(undefined, {
-            month: isGreaterThanTwoWeeks ? 'short' : 'long',
-            day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
-          }),
-          xAxis: item,
-          y: CHART_CONFIG.MAIN_HEIGHT + CHART_CONFIG.X_LABEL_SIZE - 22,
-          silent: true,
-          emphasis: {
-            disabled: true,
-          },
-          label: {
-            fontFamily: 'Sofia W03',
-            fontSize: 10,
-            position: 'bottom' as const,
-            align: 'center' as const,
-            formatter: '{b}',
-          },
-        }) as const
-    );
+    return isGreaterThanTwoWeeks
+      ? currentDate.getDate() !== previousDate.getDate()
+      : currentDate.getMonth() !== previousDate.getMonth();
+  });