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

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

@@ -17,20 +17,29 @@ export const getGridLines = ({
     MAIN_HEIGHT_DESKTOP,
     MAIN_HEIGHT_MOBILE,
     X_LABEL_SIZE,
-    MOBILE_TOOLTIP_HEIGHT,
+    TOOLTIP_HEIGHT_MOBILE,
+    TOOLTIP_HEIGHT_DESKTOP,
+    Y_SENTIMENT_LABEL_DESKTOP_SIZE,
+    Y_SENTIMENT_LABEL_MOBILE_SIZE,
+    Y_LABEL_SIZE_DESKTOP,
+    Y_LABEL_SIZE_MOBILE,
+    TOP_LABEL_SPACE_MOBILE,
   } = 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;
+    ? Y_SENTIMENT_LABEL_DESKTOP_SIZE
+    : Y_SENTIMENT_LABEL_MOBILE_SIZE;
 
-  const yLabelSize = isDesktop
-    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP
-    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;
+  const yLabelSize = isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE;
 
   const topMargin = isDesktop
-    ? CHART_CONFIG.TOP_MARGIN_DESKTOP
-    : CHART_CONFIG.TOP_MARGIN_MOBILE + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;
+    ? CHART_CONFIG.TOP_LABEL_SPACE_DESKTOP + TOOLTIP_HEIGHT_DESKTOP
+    : TOP_LABEL_SPACE_MOBILE + TOOLTIP_HEIGHT_MOBILE;
+
+  const tooltipHeight = isDesktop
+    ? TOOLTIP_HEIGHT_DESKTOP
+    : TOOLTIP_HEIGHT_MOBILE;
 
   return [
     // Top
@@ -134,11 +143,11 @@ export const getGridLines = ({
     // Mobile tooltip,
     {
       ...getLineCommons(isDark),
-      top: MOBILE_TOOLTIP_HEIGHT - 2,
+      top: tooltipHeight - 3,
       shape: {
         x1: 0,
         y1: 0,
-        x2: isDesktop ? 0 : WIDTH,
+        x2: WIDTH,
         y2: 0,
       },
       z: 30,

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

@@ -40,8 +40,8 @@ export const getLabelsConfig = ({
   const priceVerticalOffset = priceEstimatedWidth / 2;
 
   const topMargin = isDesktop
-    ? CHART_CONFIG.TOP_MARGIN_DESKTOP
-    : CHART_CONFIG.TOP_MARGIN_MOBILE + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;
+    ? CHART_CONFIG.TOP_LABEL_SPACE_DESKTOP + CHART_CONFIG.TOOLTIP_HEIGHT_DESKTOP
+    : CHART_CONFIG.TOP_LABEL_SPACE_MOBILE + CHART_CONFIG.TOOLTIP_HEIGHT_MOBILE;
 
   const mainHeight = isDesktop
     ? CHART_CONFIG.MAIN_HEIGHT_DESKTOP
@@ -195,12 +195,16 @@ export const getLabelsConfig = ({
       type: 'text',
       z: 20,
       left: 'center',
-      top: CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT / 2 - 5,
+      top: isDesktop
+        ? CHART_CONFIG.TOOLTIP_HEIGHT_DESKTOP / 2 - 5
+        : CHART_CONFIG.TOOLTIP_HEIGHT_MOBILE / 2 - 5,
       silent: true,
       style: {
-        fontSize: isDesktop ? 0 : 11,
+        fontSize: isDesktop ? 12 : 11,
         fill: textColor,
-        text: isDesktop ? '' : labelCallback('tap_chart_to_see_more_details'),
+        text: isDesktop
+          ? labelCallback('hover_chart_to_see_more_details')
+          : labelCallback('tap_chart_to_see_more_details'),
       },
     },
   ];

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

@@ -1,9 +1,6 @@
-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';
 
@@ -11,7 +8,6 @@ interface GetTooltipConfigParams {
   bookType: BookType;
   bucketWidth: number;
   buckets: Bucket[][];
-  displayPrecision: number;
   labelCallback: (key: string, params?: Record<string, unknown>) => string;
   selectedPriceRef: { current: number };
   tooltipLinesColor: string;
@@ -26,7 +22,6 @@ export const getTooltipConfig = ({
   bookType,
   bucketWidth,
   buckets,
-  displayPrecision,
   labelCallback,
   selectedPriceRef,
   tooltipLinesColor,
@@ -35,83 +30,47 @@ export const getTooltipConfig = ({
   isDesktop,
   isDark,
   locale,
-}: GetTooltipConfigParams): TooltipComponentOption => {
-  const styles = isDesktop
+}: GetTooltipConfigParams): TooltipComponentOption => ({
+  backgroundColor: 'transparent',
+  shadowColor: 'transparent',
+  extraCssText: 'width: 100%; z-index: 5;',
+  padding: 4,
+  textStyle: 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,
-        },
+        fontSize: 12,
       }
     : {
-        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 '';
-        },
+        fontSize: 10,
+        lineHeight: 12,
       },
+  alwaysShowContent: true,
+  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,
     },
-    confine: true,
-    position: (point) => {
-      if (isDesktop) {
-        return [
-          point[0] + CHART_CONFIG.TOOLTIP_OFFSET,
-          point[1] + CHART_CONFIG.TOOLTIP_OFFSET,
-        ];
-      }
-      return [0, 0];
+    crossStyle: {
+      color: tooltipLinesColor,
     },
-  };
-};
+    z: 30,
+  },
+  confine: true,
+  position: [0, 0],
+});

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

@@ -1,6 +1,7 @@
 import type { XAXisComponentOption } from 'echarts';
 
 import {
+  formatFullDate,
   formatXAxisAdditionalLabel,
   formatXAxisLabel,
   getLabelData,
@@ -10,12 +11,14 @@ interface GetXAxisConfigParams {
   dates: string[];
   isGreaterThanTwoWeeks: boolean;
   locale: string;
+  isDesktop: boolean;
 }
 
 export const getXAxisConfig = ({
   dates,
   isGreaterThanTwoWeeks,
   locale,
+  isDesktop,
 }: GetXAxisConfigParams): XAXisComponentOption[] => {
   const labelsData = getLabelData({
     dates,
@@ -38,14 +41,32 @@ export const getXAxisConfig = ({
         },
       },
       axisLabel: {
-        showMaxLabel: false,
         padding: [8, 16, 8, 16],
         margin: 0,
         formatter: (value: unknown) =>
-          formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
+          value === dates[dates.length - 1]
+            ? ''
+            : formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
       },
       boundaryGap: false,
       z: 2,
+      axisPointer: {
+        label: {
+          lineHeight: 22,
+          margin: -22,
+          padding: [0, 8, 0, 8],
+          formatter: (params: {
+            axisDimension?: string;
+            axisIndex?: number;
+            value: unknown;
+          }) => {
+            const date = new Date(params.value as string);
+
+            return isDesktop ? formatFullDate(date, locale) : '';
+          },
+        },
+        z: 100,
+      },
     },
     {
       type: 'category',
@@ -67,6 +88,9 @@ export const getXAxisConfig = ({
         formatter: (value: unknown) =>
           formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks, locale),
       },
+      axisPointer: {
+        show: false,
+      },
       data: dates,
       boundaryGap: false,
       z: 2,

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

@@ -5,13 +5,13 @@ import { CHART_CONFIG } from '../../../constants';
 interface GetYAxisConfigParams {
   bucketWidth: number;
   displayPrecision: number;
-  isDesktop: boolean;
+  selectedPriceRef: { current: number };
 }
 
 export const getYAxisConfig = ({
   bucketWidth,
   displayPrecision,
-  isDesktop,
+  selectedPriceRef,
 }: GetYAxisConfigParams): YAXisComponentOption[] => [
   {
     type: 'value',
@@ -35,6 +35,23 @@ export const getYAxisConfig = ({
       verticalAlignMaxLabel: 'top',
       formatter: (value: number) => value.toFixed(displayPrecision),
     },
+    axisPointer: {
+      label: {
+        padding: [4, 4, 4, 4],
+        margin: -1,
+        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 '';
+        },
+      },
+    },
     z: 30,
   },
   {
@@ -51,7 +68,7 @@ export const getYAxisConfig = ({
       margin: 4,
       lineHeight: 20,
       verticalAlignMinLabel: 'bottom',
-      verticalAlignMaxLabel: isDesktop ? 'middle' : 'top',
+      verticalAlignMaxLabel: 'top',
       customValues: [
         CHART_CONFIG.SENTIMENT_MIN,
         CHART_CONFIG.SENTIMENT_MAX / 5,

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

@@ -0,0 +1,26 @@
+export const formatFullDate = (date: Date, locale: string): string => {
+  const formattedDate = date
+    .toLocaleDateString(locale, {
+      day: 'numeric',
+      month: '2-digit',
+      year: '2-digit',
+    })
+    .replace(/\//g, '.');
+
+  const formattedTime = date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZoneName: 'shortOffset',
+  });
+
+  const parts = formatter.formatToParts(date);
+  const timeZoneOffset = parts.find(
+    (part) => part.type === 'timeZoneName'
+  )?.value;
+
+  return `${formattedDate} ${formattedTime} ${timeZoneOffset}`;
+};

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

@@ -2,18 +2,7 @@ import { colorPalette } from '@oanda/labs-widget-common';
 
 import { BookType } from '../../../../gql/types/graphql';
 import type { Bucket, TooltipParam } from '../types';
-
-const DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
-  day: 'numeric',
-  month: 'numeric',
-  year: 'numeric',
-
-  hour: 'numeric',
-  minute: '2-digit',
-  hour12: false,
-
-  timeZoneName: 'shortOffset',
-};
+import { formatFullDate } from './formatFullDate';
 
 const SENTIMENT_DISPLAY_PRECISION = 2;
 
@@ -67,7 +56,8 @@ const getSentimentOverbalanceLabel = (
 
 const formatCandleData = (
   candleData: [number, number, number, number, number],
-  labelCallback: (key: string) => string
+  labelCallback: (key: string) => string,
+  isDesktop: boolean
 ): string => {
   const [, open, close, low, high] = candleData;
   const candleLabel = labelCallback('candle');
@@ -76,12 +66,19 @@ const formatCandleData = (
   const lowLabel = labelCallback('low');
   const highLabel = labelCallback('high');
 
-  return `<div><b>${candleLabel}:</b></div>
+  return isDesktop
+    ? `<div><b>${candleLabel}:</b></div>
+<div style="display: flex; gap: 4px; margin-right: 4px;">
 <div>${openLabel}: ${open} </div>
 <div>${closeLabel}: ${close} </div>
 <div>${lowLabel}: ${low} </div>
 <div>${highLabel}: ${high} </div>
-`;
+</div>`
+    : `<div><b>${candleLabel}:</b></div>
+<div>${openLabel}: ${open} </div>
+<div>${closeLabel}: ${close} </div>
+<div>${lowLabel}: ${low} </div>
+<div>${highLabel}: ${high} </div>`;
 };
 
 const formatBookData = ({
@@ -112,8 +109,8 @@ const formatBookData = ({
 
   return isDesktop
     ? `<div><b>${labelCallback(bookLabelKey)}:</b></div>
-<div>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </div>
-<div>${labelCallback(sentimentLabel)}: ${sentimentValue}% </div>`
+<span style="margin-right: 4px;">${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </span>
+<span style="margin-right: 4px;">${labelCallback(sentimentLabel)}: ${sentimentValue}% </span>`
     : `<div><b>${labelCallback(bookLabelKey)}:</b></div>
 <div>${labelCallback('price_range')}:</div>
 <div>${priceRangeStart} - ${priceRangeEnd} </div>
@@ -124,9 +121,14 @@ const formatBookData = ({
 const formatSentimentData = (
   sentimentLong: number,
   sentimentShort: number,
-  labelCallback: (key: string) => string
+  labelCallback: (key: string) => string,
+  isDesktop: boolean
 ): string => {
-  return `<div><b>${labelCallback('sentiment')}:</b></div>
+  return isDesktop
+    ? `<div><b>${labelCallback('sentiment')}:</b></div>
+  <span style="margin-right: 4px;">${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </span>
+  <span style="margin-right: 4px;">${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </span>`
+    : `<div><b>${labelCallback('sentiment')}:</b></div>
 <div>${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>
 <div>${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>`;
 };
@@ -214,11 +216,9 @@ export const getTooltipFormatter = ({
     return '';
   }
 
-  const timeFormatted = time
-    .toLocaleString(locale, DATE_FORMAT_OPTIONS)
-    .replace(/\//g, '.');
+  const timeFormatted = formatFullDate(time, locale);
   const candleSection = showCandles
-    ? formatCandleData(candleData, labelCallback)
+    ? formatCandleData(candleData, labelCallback, isDesktop)
     : '';
 
   const bookSection = matchedBucket
@@ -234,7 +234,12 @@ export const getTooltipFormatter = ({
 
   const sentimentSection =
     showSentiment && sentimentLong && sentimentShort
-      ? formatSentimentData(sentimentLong, sentimentShort, labelCallback)
+      ? formatSentimentData(
+          sentimentLong,
+          sentimentShort,
+          labelCallback,
+          isDesktop
+        )
       : '';
 
   if (isDesktop) {
@@ -243,7 +248,7 @@ export const getTooltipFormatter = ({
       candleSection,
       sentimentSection,
       bookSection,
-      hasMatchedBucket: !!matchedBucket,
+      isDark,
     });
   }
 
@@ -264,20 +269,29 @@ interface TooltipSections {
 }
 
 const buildDesktopTooltip = ({
-  timeFormatted,
   candleSection,
   sentimentSection,
   bookSection,
-  hasMatchedBucket,
-}: TooltipSections & { hasMatchedBucket: boolean }): string => {
-  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
-  const sentimentPadding = hasMatchedBucket ? padding : '0px';
+  isDark,
+}: TooltipSections & {
+  isDark: boolean;
+}): string => {
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const fullWidth = TOOLTIP_STYLES.FULL_WIDTH;
 
-  return `<div style="padding-bottom: ${padding};">${timeFormatted}</div>
-<div style="padding-bottom: ${padding};">${candleSection}</div>
-<div style="padding-bottom: ${sentimentPadding};">${sentimentSection}</div>
-<div>${bookSection}</div>
-`;
+  return `<div style="width: ${fullWidth}; background-color: ${backgroundColor};">
+  <div style="width: ${fullWidth}; display: flex; justify-content: space-between;">
+ <div style="width: 40%;">
+${candleSection}
+</div>
+<div style="width: 22%;">
+${sentimentSection}
+</div>
+<div style="width: 38%;">
+${bookSection}
+</div>
+</div>
+</div>`;
 };
 
 const buildMobileTooltip = ({

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

@@ -1,3 +1,4 @@
+export * from './formatFullDate';
 export * from './formatXAxisAdditionalLabel';
 export * from './formatXAxisLabel';
 export * from './getChartStyles';

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

@@ -89,7 +89,6 @@ export const getOption: GetOptionType = ({
       bookType,
       bucketWidth,
       buckets,
-      displayPrecision,
       labelCallback,
       selectedPriceRef,
       tooltipLinesColor: styles.tooltipLinesColor,
@@ -104,11 +103,12 @@ export const getOption: GetOptionType = ({
       dates,
       isGreaterThanTwoWeeks,
       locale,
+      isDesktop,
     }),
     yAxis: getYAxisConfig({
-      isDesktop,
       bucketWidth,
       displayPrecision,
+      selectedPriceRef,
     }),
     dataZoom: getDataZoomConfig({ isDesktop }),
     visualMap: getVisualMapConfig({

package/src/CrowdViewWidget/constants.ts

@@ -32,22 +32,24 @@ const CHART_CONFIG_STATIC = {
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
   SENTIMENT_MAX: 100,
-  TOP_MARGIN_DESKTOP: 0,
-  TOP_MARGIN_MOBILE: 24,
-  MOBILE_TOOLTIP_HEIGHT: 85,
+  TOP_LABEL_SPACE_DESKTOP: 0,
+  TOP_LABEL_SPACE_MOBILE: 24,
+  TOOLTIP_HEIGHT_MOBILE: 85,
+  TOOLTIP_HEIGHT_DESKTOP: 46,
   TOOLTIP_OFFSET: 8,
 };
 
 const CHART_CONFIG_CALCULATED = {
   HEIGHT_DESKTOP:
     CHART_CONFIG_STATIC.MAIN_HEIGHT_DESKTOP +
-    CHART_CONFIG_STATIC.TOP_MARGIN_DESKTOP +
-    CHART_CONFIG_STATIC.X_LABEL_SIZE,
+    CHART_CONFIG_STATIC.TOP_LABEL_SPACE_DESKTOP +
+    CHART_CONFIG_STATIC.X_LABEL_SIZE +
+    CHART_CONFIG_STATIC.TOOLTIP_HEIGHT_DESKTOP,
   HEIGHT_MOBILE:
     CHART_CONFIG_STATIC.MAIN_HEIGHT_MOBILE +
     CHART_CONFIG_STATIC.X_LABEL_SIZE +
-    CHART_CONFIG_STATIC.TOP_MARGIN_MOBILE +
-    CHART_CONFIG_STATIC.MOBILE_TOOLTIP_HEIGHT,
+    CHART_CONFIG_STATIC.TOP_LABEL_SPACE_MOBILE +
+    CHART_CONFIG_STATIC.TOOLTIP_HEIGHT_MOBILE,
 };
 export const CHART_CONFIG = {
   ...CHART_CONFIG_STATIC,

package/src/translations/sources/en.json

@@ -29,6 +29,7 @@
   "sentiment": "Sentiment",
   "short": "Short",
   "short_overbalance": "Short overbalance",
-  "tap_chart_to_see_more_details": "Tap chart to see more details",
+  "tap_chart_to_see_more_details": "Tap the chart to see more details",
+  "hover_chart_to_see_more_details": "Hover over the chart to see more details",
   "trades": "Trades"
 }