@oanda/labs-crowd-view-widget 1.0.44 → 1.0.46

package/dist/module/CrowdViewWidget/types.js

@@ -1,2 +1,20 @@
-export {};
+export let InstrumentId = function (InstrumentId) {
+  InstrumentId["EUR_AUD"] = "EURAUD";
+  InstrumentId["EUR_GBP"] = "EURGBP";
+  InstrumentId["EUR_JPY"] = "EURJPY";
+  InstrumentId["EUR_USD"] = "EURUSD";
+  InstrumentId["EUR_CHF"] = "EURCHF";
+  InstrumentId["USD_CHF"] = "USDCHF";
+  InstrumentId["USD_JPY"] = "USDJPY";
+  InstrumentId["USD_CAD"] = "USDCAD";
+  InstrumentId["GBP_USD"] = "GBPUSD";
+  InstrumentId["GBP_JPY"] = "GBPJPY";
+  InstrumentId["GBP_CHF"] = "GBPCHF";
+  InstrumentId["AUD_JPY"] = "AUDJPY";
+  InstrumentId["AUD_USD"] = "AUDUSD";
+  InstrumentId["NZD_USD"] = "NZDUSD";
+  InstrumentId["XAU_USD"] = "XAUUSD";
+  InstrumentId["XAG_USD"] = "XAGUSD";
+  return InstrumentId;
+}({});
 //# sourceMappingURL=types.js.map

package/dist/module/CrowdViewWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/CrowdViewWidget/types.ts"],"sourcesContent":["import type { WidgetConfig } from '@oanda/labs-widget-common';\n\nimport type { Division } from '../gql/types/graphql';\nimport type { InstrumentId } from './types/instruments';\n\nexport interface CrowdViewConfig extends WidgetConfig {\n  division: Division;\n}\n\nexport interface MainProps {\n  instrument?: InstrumentId;\n  division: Division;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":["InstrumentId"],"sources":["../../../src/CrowdViewWidget/types.ts"],"sourcesContent":["import type { WidgetConfig } from '@oanda/labs-widget-common';\n\nimport type { Division } from '../gql/types/graphql';\n\nexport enum InstrumentId {\n  EUR_AUD = 'EURAUD',\n  EUR_GBP = 'EURGBP',\n  EUR_JPY = 'EURJPY',\n  EUR_USD = 'EURUSD',\n  EUR_CHF = 'EURCHF',\n  USD_CHF = 'USDCHF',\n  USD_JPY = 'USDJPY',\n  USD_CAD = 'USDCAD',\n  GBP_USD = 'GBPUSD',\n  GBP_JPY = 'GBPJPY',\n  GBP_CHF = 'GBPCHF',\n  AUD_JPY = 'AUDJPY',\n  AUD_USD = 'AUDUSD',\n  NZD_USD = 'NZDUSD',\n  XAU_USD = 'XAUUSD',\n  XAG_USD = 'XAGUSD',\n}\nexport interface CrowdViewConfig extends WidgetConfig {\n  division: Division;\n}\n\nexport interface MainProps {\n  instrument?: InstrumentId;\n  division: Division;\n}\n"],"mappings":"AAIA,WAAYA,YAAY,aAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAA,OAAZA,YAAY;AAAA","ignoreList":[]}

package/dist/module/translations/sources/en.json

@@ -1,2 +1,31 @@
 {
+  "1_hour": "1 hour",
+  "15_minutes": "15 minutes",
+  "4_hours": "4 hours",
+  "5_minutes": "5 minutes",
+  "buy_advantage": "Buy advantage",
+  "buy": "Buy",
+  "candle": "Candle",
+  "close_price": "Close price",
+  "data_unavailable": "Data unavailable",
+  "granularity": "Granularity",
+  "high": "High",
+  "instrument": "Instrument",
+  "long_advantage": "Sell advantage",
+  "long": "Long",
+  "low": "Low",
+  "no_matching_results": "No matching results",
+  "open_price": "Open price",
+  "order_book": "Order book",
+  "orders": "Orders",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
+  "position_book": "Position book",
+  "positions": "Positions",
+  "price_range": "Price range",
+  "search": "Search",
+  "sell_advantage": "Sell advantage",
+  "sell": "Sell",
+  "sentiment": "Sentiment",
+  "short_advantage": "Buy advantage",
+  "short": "Short"
 }

package/dist/types/CrowdViewWidget/components/Chart/index.d.ts

@@ -3,4 +3,4 @@ export * from './chartOptions';
 export * from './ChartWithData';
 export * from './types';
 export * from './useCrowdViewData';
-export * from './utils/chartUtils';
+export * from './utils';

package/dist/types/CrowdViewWidget/components/Chart/types.d.ts

@@ -1,7 +1,12 @@
 import type { EChartsOption } from 'echarts';
 import type { BookType, Division, Granularity } from '../../../gql/types/graphql';
+import type { InstrumentId } from '../../types';
+export interface Bucket {
+    price: number;
+    sentiment: number;
+}
 export interface UseCrowdViewDataProps {
-    instrument: string;
+    instrument: InstrumentId;
     bookType: BookType;
     division: Division;
     granularity: Granularity;
@@ -9,22 +14,25 @@ export interface UseCrowdViewDataProps {
 interface CrowdViewData {
     xAxisData: string[];
     candlesSeriesData: [number, number, number, number][];
-    orderPositionBooks: ([string, number, string] | null)[];
+    orderPositionBooks: [string, number | null, number][];
     bucketWidth: number;
+    buckets: Bucket[][];
+    precision: number;
+    bookType: BookType;
 }
 export interface UseCrowdViewDataReturn {
     data: CrowdViewData | null;
     loading: boolean;
     error: boolean;
 }
-export type GetOptionType = (props: CrowdViewData, isDark: boolean) => EChartsOption;
+export type GetOptionType = (props: CrowdViewData, isDark: boolean, labelCallback: (key: string, params?: Record<string, unknown>) => string) => EChartsOption;
 export interface ChartProps {
     data: CrowdViewData;
 }
 export interface ChartWithDataProps {
     bookType: BookType;
     division: Division;
-    instrument: string;
+    instrument: InstrumentId;
     granularity: Granularity;
 }
 export interface GetLabelsDataProps {

package/dist/types/CrowdViewWidget/components/Chart/utils/aggregateBuckets.d.ts

@@ -0,0 +1,2 @@
+import type { Bucket } from '../types';
+export declare const aggregateBuckets: (buckets: Bucket[], newBucketWidth: number) => Bucket[];

package/dist/types/CrowdViewWidget/components/Chart/utils/chartUtils.d.ts

@@ -1,5 +1,5 @@
-import { Granularity, TimeSpan } from '../../../../gql/types/graphql';
-import type { GetLabelsDataProps } from '../types';
+import { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';
+import type { Bucket, GetLabelsDataProps } from '../types';
 export declare const getLabelData: ({ xAxisData, isGreaterThanTwoWeeks, }: GetLabelsDataProps) => {
     name: string;
     xAxis: string;
@@ -19,3 +19,13 @@ export declare const getLabelData: ({ xAxisData, isGreaterThanTwoWeeks, }: GetLa
 export declare const isDifferenceGreaterThanTwoWeeks: (startDate: string, endDate: string) => boolean;
 export declare const getTimeSpanForGranularity: (granularity: Granularity) => TimeSpan;
 export declare const getRectColor: (sentiment: number) => string;
+export declare const getTooltipFormatter: ({ params, buckets, bucketWidth, selectedPrice, precision, bookType, labelCallback, }: {
+    params: unknown;
+    buckets: Bucket[][];
+    bucketWidth: number;
+    selectedPrice: number;
+    precision: number;
+    bookType: BookType;
+    labelCallback: (key: string) => string;
+}) => string | undefined;
+export declare const formatXAxisLabel: (value: unknown, isGreaterThanTwoWeeks: boolean) => string;

package/dist/types/CrowdViewWidget/components/Chart/utils/getTargetBucketWidth.d.ts

@@ -0,0 +1,3 @@
+import { Granularity } from '../../../../gql/types/graphql';
+import type { InstrumentId } from '../../../types';
+export declare const getTargetBucketWidth: (granularity: Granularity, instrument: InstrumentId) => number;

package/dist/types/CrowdViewWidget/components/Chart/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './aggregateBuckets';
+export * from './chartUtils';
+export * from './getTargetBucketWidth';
+export * from './processBuckets';
+export * from './processOrderPositionBooks';
+export * from './processPriceCandles';
+export * from './validateData';

package/dist/types/CrowdViewWidget/components/Chart/utils/processBuckets.d.ts

@@ -0,0 +1,3 @@
+import type { GetOrderPositionBooksQuery } from '../../../../gql/types/graphql';
+import type { Bucket } from '../types';
+export declare const processBuckets: (orderPositionData: GetOrderPositionBooksQuery | undefined, targetBucketWidth: number) => Bucket[][];

package/dist/types/CrowdViewWidget/components/Chart/utils/processOrderPositionBooks.d.ts

@@ -0,0 +1,8 @@
+import type { GetOrderPositionBooksQuery } from '../../../../gql/types/graphql';
+export declare const processOrderPositionBooks: (orderPositionData: GetOrderPositionBooksQuery | undefined, candleMap: Map<string, {
+    point?: string;
+    high?: number;
+    low?: number;
+    open?: number;
+    close?: number;
+}>) => [string, number | null, number][];

package/dist/types/CrowdViewWidget/components/Chart/utils/processPriceCandles.d.ts

@@ -0,0 +1,27 @@
+import type { GetPriceCandlesQuery } from '../../../../gql/types/graphql';
+export declare const processPriceCandles: (priceCandlesData: GetPriceCandlesQuery | undefined) => {
+    minPrice: number;
+    maxPrice: number;
+    hasValidCandles: boolean;
+    candleMap: Map<any, any>;
+    candles: never[];
+} | {
+    minPrice: number;
+    maxPrice: number;
+    hasValidCandles: boolean;
+    candleMap: Map<string, {
+        point?: string;
+        high?: number;
+        low?: number;
+        open?: number;
+        close?: number;
+    }>;
+    candles: ({
+        __typename?: "Candle";
+        point: string;
+        high: number;
+        low: number;
+        open: number;
+        close: number;
+    } | null)[];
+};

package/dist/types/CrowdViewWidget/components/Chart/utils/validateData.d.ts

@@ -0,0 +1,2 @@
+import type { GetOrderPositionBooksQuery, GetPriceCandlesQuery } from '../../../../gql/types/graphql';
+export declare const validateData: (priceCandlesData: GetPriceCandlesQuery | undefined, orderPositionData: GetOrderPositionBooksQuery | undefined, hasValidCandles: boolean) => Error | null;

package/dist/types/CrowdViewWidget/components/Legend/Legend.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { BookType } from '../../../gql/types/graphql';
 interface LegendProps {
     longValues?: [number, number];
     shortValues?: [number, number];
+    bookType: BookType;
 }
-export declare const Legend: ({ longValues, shortValues, }: LegendProps) => React.JSX.Element;
+export declare const Legend: ({ longValues, shortValues, bookType, }: LegendProps) => React.JSX.Element;
 export {};

package/dist/types/CrowdViewWidget/constants.d.ts

@@ -1,9 +1,10 @@
+import { InstrumentId } from './types';
 export declare const BOOKS_THRESHOLDS: {
     readonly MIN: 0.15;
     readonly MAX: 0.55;
 };
 export declare const BUCKET_CONFIG: {
-    readonly DEFAULT_WIDTH: 0.0005;
+    readonly MULTIPLIER: 4;
     readonly PRICE_PADDING_MULTIPLIER: 2;
 };
 export declare const TIME_THRESHOLDS: {
@@ -16,8 +17,15 @@ export declare const CHART_CONFIG: {
     readonly Y_LABEL_SIZE_DESKTOP: 60;
     readonly INITIAL_START_ZOOM: 80;
     readonly INITIAL_END_ZOOM: 100;
+    readonly X_AXIS_DATE_PADDING: "        ";
 };
 export declare const COLOR_MAP: {
-    readonly long: readonly ["#ffffff", "#fdb833"];
-    readonly short: readonly ["#ffffff", "#0096c7"];
+    readonly long: readonly ["#eaf5fa", "#83c4e0"];
+    readonly short: readonly ["#fef7e7", "#fcd171"];
 };
+export declare const INSTRUMENTS_CONFIG: Record<InstrumentId, {
+    precision: number;
+    defaultBucketWidth: number;
+    v20name: string;
+    mt5name: string;
+}>;

package/dist/types/CrowdViewWidget/selectConfig.d.ts

@@ -1,11 +1,11 @@
 import { BookType, Granularity } from '../gql/types/graphql';
-import { InstrumentId, InstrumentIdOC } from './types/instruments';
+import { InstrumentId } from './types';
 declare const navigationConfig: {
     id: BookType;
     label: string;
 }[];
 declare const instrumentSelectConfigOC: {
-    id: InstrumentIdOC;
+    id: InstrumentId;
     label: string;
 }[];
 declare const instrumentSelectConfig: {

package/dist/types/CrowdViewWidget/types.d.ts

@@ -1,6 +1,23 @@
 import type { WidgetConfig } from '@oanda/labs-widget-common';
 import type { Division } from '../gql/types/graphql';
-import type { InstrumentId } from './types/instruments';
+export declare enum InstrumentId {
+    EUR_AUD = "EURAUD",
+    EUR_GBP = "EURGBP",
+    EUR_JPY = "EURJPY",
+    EUR_USD = "EURUSD",
+    EUR_CHF = "EURCHF",
+    USD_CHF = "USDCHF",
+    USD_JPY = "USDJPY",
+    USD_CAD = "USDCAD",
+    GBP_USD = "GBPUSD",
+    GBP_JPY = "GBPJPY",
+    GBP_CHF = "GBPCHF",
+    AUD_JPY = "AUDJPY",
+    AUD_USD = "AUDUSD",
+    NZD_USD = "NZDUSD",
+    XAU_USD = "XAUUSD",
+    XAG_USD = "XAGUSD"
+}
 export interface CrowdViewConfig extends WidgetConfig {
     division: Division;
 }

package/dist/types/CrowdViewWidget/utils/instrumentUtils.d.ts

@@ -1,8 +1,5 @@
 import { Division } from '../../gql/types/graphql';
 export declare const getInstrumentConfigForDivision: (division: Division) => {
-    id: import("../types").InstrumentIdOC;
-    label: string;
-}[] | {
-    id: import("../types").InstrumentId;
+    id: import("..").InstrumentId;
     label: string;
 }[];

package/lokalise.config.json

@@ -13,6 +13,6 @@
     "plural_format": "i18next",
     "export_empty_as": "skip",
     "include_tags": ["common_widgets"],
-    "filter_langs": ["en", "zh_TW", "es", "th"]
+    "filter_langs": ["en"]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-crowd-view-widget",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "Labs Crowd View Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,9 +13,10 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.226",
+    "@oanda/labs-widget-common": "^1.0.228",
     "@oanda/mono-i18n": "10.0.1",
     "chroma-js": "^3.1.2",
+    "decimal.js": "^10.6.0",
     "graphql": "16.8.1"
   },
   "devDependencies": {
@@ -23,5 +24,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@types/chroma-js": "^3.1.2"
   },
-  "gitHead": "4709e181ae37de87e1c5d5569391c5f6cfeeca33"
+  "gitHead": "8e6597b98667ce51cc5610dddc94f020a2a82908"
 }

package/src/CrowdViewWidget/Main.tsx

@@ -6,29 +6,44 @@ 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 type { Granularity } from '../gql/types/graphql';
 import { BookType } from '../gql/types/graphql';
 import { ChartWithData, Legend } from './components';
 import { granularitySelectConfig, navigationConfig } from './selectConfig';
-import type { MainProps } from './types';
-import type { InstrumentId } from './types/instruments';
+import type { InstrumentId, MainProps } from './types';
 import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
-  const instrumentSelectConfigWithDivision =
-    getInstrumentConfigForDivision(division);
-
+  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 (
     <>
@@ -68,7 +83,7 @@ const Main = ({ division }: MainProps) => {
               })}
             >
               <Select
-                options={granularitySelectConfig}
+                options={granularitySelectConfigWithLang}
                 searchPlaceholder={lang('search')}
                 selectLabel={lang('granularity')}
                 selectedOption={granularity}
@@ -86,7 +101,7 @@ const Main = ({ division }: MainProps) => {
             instrument={instrument.id}
           />
 
-          <Legend />
+          <Legend bookType={bookType} />
         </div>
       )}
     </>

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

@@ -4,6 +4,7 @@ import {
   Theme,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
 import type { EChartsType } from 'echarts';
 import {
   BarChart,
@@ -26,6 +27,7 @@ import { CHART_CONFIG } from '../../constants';
 import { getOption } from './chartOptions';
 import type { ChartProps } from './types';
 import {
+  formatXAxisLabel,
   getLabelData,
   isDifferenceGreaterThanTwoWeeks,
 } from './utils/chartUtils';
@@ -48,6 +50,7 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ data }: ChartProps) => {
   const { isDark } = useLayoutProvider();
+  const { lang } = useLocale();
 
   return (
     <BaseChart
@@ -55,7 +58,7 @@ const Chart = ({ data }: ChartProps) => {
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption(data, isDark)}
+      option={getOption(data, isDark, lang)}
       opts={{ renderer: 'canvas' }}
       onEvents={{
         datazoom: (_params: unknown, instance: EChartsType) => {
@@ -78,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/chartOptions.ts

@@ -5,18 +5,30 @@ import {
 } from '@oanda/labs-widget-common';
 
 import { CHART_CONFIG } from '../../constants';
-import type { GetOptionType } from './types';
+import type { Bucket, GetOptionType } from './types';
 import {
+  formatXAxisLabel,
   getLabelData,
   getRectColor,
+  getTooltipFormatter,
   isDifferenceGreaterThanTwoWeeks,
 } from './utils/chartUtils';
 
 // @ts-expect-error
 export const getOption: GetOptionType = (
-  { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth },
-  isDark
+  {
+    xAxisData,
+    candlesSeriesData,
+    orderPositionBooks,
+    bucketWidth,
+    buckets,
+    precision,
+    bookType,
+  },
+  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
@@ -55,29 +67,51 @@ export const getOption: GetOptionType = (
       trigger: 'axis',
       axisPointer: {
         type: 'cross',
+        axis: 'x',
+        label: {
+          formatter: (params) => {
+            if (params.axisDimension === 'y') {
+              selectedPrice = Number(params.value);
+              return Number(params.value).toFixed(precision);
+            }
+
+            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,
+          precision,
+          bookType,
+        }),
     },
     xAxis: {
       type: 'category',
       data: xAxisData,
+      splitNumber: 1,
       axisTick: {
         show: false,
       },
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
-        showMinLabel: false,
-        formatter: (value) => {
-          const date = new Date(value as string);
-          return isGreaterThanTwoWeeks
-            ? `${date.toLocaleTimeString(undefined, {
-                hour: '2-digit',
-                minute: '2-digit',
-              })}`
-            : `${date.toLocaleDateString(undefined, {
-                day: 'numeric',
-              })}`;
-        },
+        formatter: (value) => formatXAxisLabel(value, isGreaterThanTwoWeeks),
       },
     },
     yAxis: {
@@ -90,6 +124,7 @@ export const getOption: GetOptionType = (
       axisLabel: {
         showMaxLabel: false,
         showMinLabel: false,
+        formatter: (value: number) => value.toFixed(precision - 1),
       },
     },
     series: [
@@ -101,6 +136,7 @@ export const getOption: GetOptionType = (
           color: colorPalette.raspberryLight,
           color0: colorPalette.bottleGreenLight,
         },
+
         markPoint: {
           symbol: 'circle',
           symbolSize: 0,
@@ -115,34 +151,32 @@ export const getOption: GetOptionType = (
         clip: true,
         renderItem: (_params, api) => {
           const xVal = api.value(0);
-          const metaValues = JSON.parse(api.value(2) as string);
+          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]);
+          const items = metaValues.map(({ price, sentiment }: Bucket) => {
+            const start = api.coord([xVal, price]);
 
-              return {
-                type: 'rect',
-                shape: {
-                  x: start[0] - rectWidth / 2,
-                  y: start[1],
-                  width: rectWidth,
-                  height: rectHeight,
-                },
-                style: {
-                  fill: getRectColor(sentiment),
-                  opacity: 0.7,
-                },
-                silent: true,
-                emphasisDisabled: true,
-              };
-            }
-          );
+            return {
+              type: 'rect',
+              shape: {
+                x: start[0] - rectWidth / 2,
+                y: start[1] - rectHeight,
+                width: rectWidth + 1,
+                height: rectHeight,
+              },
+              style: {
+                fill: getRectColor(sentiment),
+              },
+              silent: true,
+              emphasisDisabled: true,
+            };
+          });
 
           return {
             type: 'group',

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

@@ -3,4 +3,4 @@ export * from './chartOptions';
 export * from './ChartWithData';
 export * from './types';
 export * from './useCrowdViewData';
-export * from './utils/chartUtils';
+export * from './utils';