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

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: `${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`,
-  },
-];
+}: 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

@@ -12,7 +12,14 @@ export const getGridLines = ({
   isDark,
   isDesktop,
 }: GetGridLinesParams): GraphicComponentOption[] => {
-  const { WIDTH, MAIN_HEIGHT, X_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;
@@ -21,7 +28,9 @@ export const getGridLines = ({
     ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP
     : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;
 
-  const topMargin = isDesktop ? 0 : CHART_CONFIG.TOP_MARGIN_MOBILE;
+  const topMargin = isDesktop
+    ? CHART_CONFIG.TOP_MARGIN_DESKTOP
+    : CHART_CONFIG.TOP_MARGIN_MOBILE + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;
 
   return [
     // Top
@@ -44,7 +53,7 @@ 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,
     },
@@ -68,7 +77,7 @@ 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,
     },
@@ -81,7 +90,7 @@ export const getGridLines = ({
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT - topMargin,
+        y2: mainHeight,
       },
       z: 30,
     },
@@ -94,7 +103,7 @@ export const getGridLines = ({
         x1: 0,
         y1: 0,
         x2: 0,
-        y2: MAIN_HEIGHT - topMargin,
+        y2: mainHeight,
       },
       z: 30,
     },
@@ -122,5 +131,17 @@ export const getGridLines = ({
       },
       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

@@ -41,7 +41,11 @@ export const getLabelsConfig = ({
 
   const topMargin = isDesktop
     ? CHART_CONFIG.TOP_MARGIN_DESKTOP
-    : CHART_CONFIG.TOP_MARGIN_MOBILE;
+    : CHART_CONFIG.TOP_MARGIN_MOBILE + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;
+
+  const mainHeight = isDesktop
+    ? CHART_CONFIG.MAIN_HEIGHT_DESKTOP
+    : CHART_CONFIG.MAIN_HEIGHT_MOBILE;
 
   return [
     {
@@ -87,7 +91,7 @@ export const getLabelsConfig = ({
     {
       type: 'group',
       left: `${ySentimentLabelSize + 5}px'`,
-      top: `${CHART_CONFIG.MAIN_HEIGHT - 24 - 5}px`,
+      top: `${topMargin + mainHeight - 24 - 5}px`,
       silent: true,
       children: [
         {
@@ -131,8 +135,8 @@ export const getLabelsConfig = ({
       rotation: isDesktop ? Math.PI / 2 : 0,
       left: `5px`,
       top: isDesktop
-        ? `${topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - sentimentVerticalOffset}px`
-        : `${topMargin - 18}px`,
+        ? `${topMargin + mainHeight / 2 - sentimentVerticalOffset}px`
+        : `${topMargin - 16}px`,
       silent: true,
       style: {
         fontSize: 10,
@@ -148,8 +152,8 @@ export const getLabelsConfig = ({
       rotation: isDesktop ? -Math.PI / 2 : 0,
       right: `5px`,
       top: isDesktop
-        ? `${topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - priceVerticalOffset}px`
-        : `${topMargin - 18}px`,
+        ? `${topMargin + mainHeight / 2 - priceVerticalOffset}px`
+        : `${topMargin - 16}px`,
       silent: true,
       style: {
         fontSize: 10,
@@ -163,10 +167,10 @@ export const getLabelsConfig = ({
       type: 'rect',
       z: 20,
       right: '0px',
-      top: '0px',
+      top: `${topMargin}px`,
       shape: {
         width: yMainLabelSize,
-        height: CHART_CONFIG.MAIN_HEIGHT,
+        height: mainHeight,
       },
       silent: true,
       style: {
@@ -177,15 +181,27 @@ export const getLabelsConfig = ({
       type: 'rect',
       z: 20,
       left: '0px',
-      top: '0px',
+      top: `${topMargin}px`,
       shape: {
         width: ySentimentLabelSize,
-        height: CHART_CONFIG.MAIN_HEIGHT,
+        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/getTooltipConfig.ts

@@ -1,3 +1,5 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
 import type { TooltipComponentOption } from 'echarts';
 
 import type { BookType } from '../../../../gql/types/graphql';
@@ -15,6 +17,9 @@ interface GetTooltipConfigParams {
   tooltipLinesColor: string;
   sentimentLongs: (number | null)[];
   sentimentShorts: (number | null)[];
+  isDesktop: boolean;
+  isDark: boolean;
+  locale: string;
 }
 
 export const getTooltipConfig = ({
@@ -27,48 +32,86 @@ export const getTooltipConfig = ({
   tooltipLinesColor,
   sentimentLongs,
   sentimentShorts,
-}: GetTooltipConfigParams): TooltipComponentOption => ({
-  trigger: 'axis' as const,
-  formatter: (params) =>
-    getTooltipFormatter({
-      bookType,
-      bucketWidth,
-      buckets,
-      labelCallback,
-      params: params as unknown as TooltipParam[],
-      selectedPrice: selectedPriceRef.current,
-      sentimentLongs,
-      sentimentShorts,
-    }),
-  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 '';
+  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,
-  position: (point) => [
-    point[0] + CHART_CONFIG.TOOLTIP_OFFSET,
-    point[1] + CHART_CONFIG.TOOLTIP_OFFSET,
-  ],
-});
+  };
+};

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

@@ -9,11 +9,13 @@ import {
 interface GetXAxisConfigParams {
   dates: string[];
   isGreaterThanTwoWeeks: boolean;
+  locale: string;
 }
 
 export const getXAxisConfig = ({
   dates,
   isGreaterThanTwoWeeks,
+  locale,
 }: GetXAxisConfigParams): XAXisComponentOption[] => {
   const labelsData = getLabelData({
     dates,
@@ -24,22 +26,26 @@ export const getXAxisConfig = ({
     {
       type: 'category',
       id: 'main-xAxis',
-      name: isGreaterThanTwoWeeks
-        ? 'xAxis-greater-than-two-weeks'
-        : 'xAxis-less-than-two-weeks',
       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),
+          formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
       },
       boundaryGap: false,
+      z: 2,
     },
     {
       type: 'category',
@@ -59,10 +65,11 @@ export const getXAxisConfig = ({
         hideOverlap: true,
         customValues: labelsData,
         formatter: (value: unknown) =>
-          formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks),
+          formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks, locale),
       },
       data: dates,
       boundaryGap: false,
+      z: 2,
     },
   ];
 };

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

@@ -1,24 +1,30 @@
 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;
 }
 
 export const getYAxisConfig = ({
   bucketWidth,
   displayPrecision,
+  isDesktop,
 }: 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 },
@@ -45,7 +51,7 @@ export const getYAxisConfig = ({
       margin: 4,
       lineHeight: 20,
       verticalAlignMinLabel: 'bottom',
-      verticalAlignMaxLabel: 'middle',
+      verticalAlignMaxLabel: isDesktop ? 'middle' : 'top',
       customValues: [
         CHART_CONFIG.SENTIMENT_MIN,
         CHART_CONFIG.SENTIMENT_MAX / 5,

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

@@ -1,12 +1,13 @@
 export const formatXAxisAdditionalLabel = (
   value: unknown,
-  isGreaterThanTwoWeeks: boolean
+  isGreaterThanTwoWeeks: boolean,
+  locale: string
 ) => {
   const date = new Date(value as string);
   if (isNaN(date.getTime())) {
     return '';
   }
-  return `${date.toLocaleDateString(undefined, {
+  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}`;
 };