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

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

@@ -3,31 +3,32 @@
   "15_minutes": "15 minutes",
   "4_hours": "4 hours",
   "5_minutes": "5 minutes",
-  "buy_overbalance": "Buy overbalance",
   "buy": "Buy",
+  "buy_overbalance": "Buy overbalance",
   "candle": "Candle",
-  "close_price": "Close price",
+  "close": "Close",
   "data_unavailable": "Data unavailable",
+  "even_market_demand": "Even market demand",
   "granularity": "Granularity",
   "high": "High",
   "instrument": "Instrument",
-  "long_overbalance": "Long overbalance",
   "long": "Long",
+  "long_overbalance": "Long overbalance",
   "low": "Low",
   "no_matching_results": "No matching results",
-  "open_price": "Open price",
+  "open": "Open",
   "order_book": "Order book",
   "orders": "Orders",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "position_book": "Position book",
-  "positions": "Positions",
+  "price": "Price",
   "price_range": "Price range",
   "search": "Search",
-  "sell_overbalance": "Sell overbalance",
   "sell": "Sell",
+  "sell_overbalance": "Sell overbalance",
   "sentiment": "Sentiment",
-  "short_overbalance": "Short overbalance",
   "short": "Short",
-  "even_market_demand": "Even market demand",
-  "price": "Price"
+  "short_overbalance": "Short overbalance",
+  "tap_chart_to_see_more_details": "Tap chart to see more details",
+  "trades": "Trades"
 }

package/dist/module/CrowdViewWidget/components/Chart/Chart.js

@@ -7,7 +7,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
 import { CHART_CONFIG } from '../../constants';
-import { handleLabelUpdate, handleTooltipUpdate, isDifferenceGreaterThanTwoWeeks } from './chartUtils';
+import { handleLabelUpdate, handleTooltipUpdate, isDifferenceGreaterThanTwoWeeks, normalizeLocale } from './chartUtils';
 import { getOption } from './getOption';
 echarts.use([GridSimpleComponent, GraphicComponent, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkLineComponent, LineChart, VisualMapComponent, DatasetComponent]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
@@ -23,7 +23,8 @@ const Chart = _ref => {
     isDark
   } = useLayoutProvider();
   const {
-    lang
+    lang,
+    locale
   } = useLocale();
   const canHover = useMediaQuery('(hover: hover)');
   const labelTimerRef = useRef(null);
@@ -50,14 +51,16 @@ const Chart = _ref => {
     isDark,
     isDesktop,
     isLoading,
+    locale: normalizeLocale(locale),
     labelCallback: lang
-  }), [mainData, additionalData, isDark, isDesktop, isLoading, lang]);
+  }), [mainData, additionalData, isDark, isDesktop, isLoading, lang, locale]);
   const handleDataZoom = useCallback((_params, instance) => {
     handleTooltipUpdate(instance, zoomTimerRef, tooltipVisibleRef, canHover);
-    handleLabelUpdate(instance, mainData, labelTimerRef, isGreaterThanTwoWeeksRef);
-  }, [mainData, canHover]);
+    handleLabelUpdate(instance, mainData, labelTimerRef, isGreaterThanTwoWeeksRef, normalizeLocale(locale));
+  }, [mainData, canHover, locale]);
+  const chartHeight = isDesktop ? CHART_CONFIG.HEIGHT_DESKTOP : CHART_CONFIG.HEIGHT_MOBILE;
   return React.createElement(BaseChart, {
-    chartHeight: CHART_CONFIG.HEIGHT,
+    chartHeight: chartHeight,
     echarts: echarts,
     isDark: isDark,
     lazyUpdate: true,

package/dist/module/CrowdViewWidget/components/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","CandlestickChart","CustomChart","LineChart","DatasetComponent","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkLineComponent","TooltipComponent","VisualMapComponent","echarts","CanvasRenderer","React","useCallback","useEffect","useMemo","useRef","useMediaQuery","CHART_CONFIG","handleLabelUpdate","handleTooltipUpdate","isDifferenceGreaterThanTwoWeeks","getOption","use","registerTheme","Dark","Light","Chart","_ref","mainData","additionalData","isDesktop","isLoading","isDark","lang","canHover","labelTimerRef","isGreaterThanTwoWeeksRef","zoomTimerRef","tooltipVisibleRef","initialIsGreaterThanTwoWeeks","dates","initialStartZoom","INITIAL_START_ZOOM_DESKTOP","INITIAL_START_ZOOM_MOBILE","visibleXAxisData","slice","length","INITIAL_END_ZOOM","current","chartOption","labelCallback","handleDataZoom","_params","instance","createElement","chartHeight","HEIGHT","lazyUpdate","option","opts","renderer","onEvents","datazoom"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport type { EChartsType } from 'echarts';\nimport { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkLineComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useMediaQuery } from 'usehooks-ts';\n\nimport { CHART_CONFIG } from '../../constants';\nimport {\n  handleLabelUpdate,\n  handleTooltipUpdate,\n  isDifferenceGreaterThanTwoWeeks,\n} from './chartUtils';\nimport { getOption } from './getOption';\nimport type { ChartProps, DataZoomEvent } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkLineComponent,\n  LineChart,\n  VisualMapComponent,\n  DatasetComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({\n  mainData,\n  additionalData,\n  isDesktop,\n  isLoading,\n}: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n  const { lang } = useLocale();\n  const canHover = useMediaQuery('(hover: hover)');\n  const labelTimerRef = useRef<NodeJS.Timeout | null>(null);\n  const isGreaterThanTwoWeeksRef = useRef<boolean | null>(null);\n  const zoomTimerRef = useRef<NodeJS.Timeout | null>(null);\n  const tooltipVisibleRef = useRef<boolean>(true);\n\n  const initialIsGreaterThanTwoWeeks = useMemo(() => {\n    const { dates } = mainData;\n    const initialStartZoom = isDesktop\n      ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP\n      : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;\n\n    const visibleXAxisData = dates.slice(\n      (dates.length * initialStartZoom) / 100,\n      (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100\n    );\n\n    if (visibleXAxisData.length === 0) {\n      return false;\n    }\n\n    return isDifferenceGreaterThanTwoWeeks(\n      visibleXAxisData[0],\n      visibleXAxisData[visibleXAxisData.length - 1]\n    );\n  }, [mainData, isDesktop]);\n\n  useEffect(() => {\n    isGreaterThanTwoWeeksRef.current = initialIsGreaterThanTwoWeeks;\n  }, [initialIsGreaterThanTwoWeeks]);\n\n  const chartOption = useMemo(\n    () =>\n      getOption({\n        mainData,\n        additionalData,\n        isDark,\n        isDesktop,\n        isLoading,\n        labelCallback: lang,\n      }),\n    [mainData, additionalData, isDark, isDesktop, isLoading, lang]\n  );\n\n  // Memoize event handler to prevent unnecessary re-renders\n  const handleDataZoom = useCallback(\n    (_params: DataZoomEvent, instance: EChartsType) => {\n      handleTooltipUpdate(instance, zoomTimerRef, tooltipVisibleRef, canHover);\n      handleLabelUpdate(\n        instance,\n        mainData,\n        labelTimerRef,\n        isGreaterThanTwoWeeksRef\n      );\n    },\n    [mainData, canHover]\n  );\n\n  return (\n    <BaseChart\n      chartHeight={CHART_CONFIG.HEIGHT}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={chartOption}\n      opts={{ renderer: 'canvas' }}\n      onEvents={{\n        datazoom: handleDataZoom,\n      }}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","CandlestickChart","CustomChart","LineChart","DatasetComponent","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkLineComponent","TooltipComponent","VisualMapComponent","echarts","CanvasRenderer","React","useCallback","useEffect","useMemo","useRef","useMediaQuery","CHART_CONFIG","handleLabelUpdate","handleTooltipUpdate","isDifferenceGreaterThanTwoWeeks","normalizeLocale","getOption","use","registerTheme","Dark","Light","Chart","_ref","mainData","additionalData","isDesktop","isLoading","isDark","lang","locale","canHover","labelTimerRef","isGreaterThanTwoWeeksRef","zoomTimerRef","tooltipVisibleRef","initialIsGreaterThanTwoWeeks","dates","initialStartZoom","INITIAL_START_ZOOM_DESKTOP","INITIAL_START_ZOOM_MOBILE","visibleXAxisData","slice","length","INITIAL_END_ZOOM","current","chartOption","labelCallback","handleDataZoom","_params","instance","chartHeight","HEIGHT_DESKTOP","HEIGHT_MOBILE","createElement","lazyUpdate","option","opts","renderer","onEvents","datazoom"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  BaseChart,\n  getChartTheme,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport type { EChartsType } from 'echarts';\nimport { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkLineComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useMediaQuery } from 'usehooks-ts';\n\nimport { CHART_CONFIG } from '../../constants';\nimport {\n  handleLabelUpdate,\n  handleTooltipUpdate,\n  isDifferenceGreaterThanTwoWeeks,\n  normalizeLocale,\n} from './chartUtils';\nimport { getOption } from './getOption';\nimport type { ChartProps, DataZoomEvent } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  CanvasRenderer,\n  DataZoomInsideComponent,\n  CustomChart,\n  TooltipComponent,\n  CandlestickChart,\n  MarkLineComponent,\n  LineChart,\n  VisualMapComponent,\n  DatasetComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({\n  mainData,\n  additionalData,\n  isDesktop,\n  isLoading,\n}: ChartProps) => {\n  const { isDark } = useLayoutProvider();\n  const { lang, locale } = useLocale();\n  const canHover = useMediaQuery('(hover: hover)');\n  const labelTimerRef = useRef<NodeJS.Timeout | null>(null);\n  const isGreaterThanTwoWeeksRef = useRef<boolean | null>(null);\n  const zoomTimerRef = useRef<NodeJS.Timeout | null>(null);\n  const tooltipVisibleRef = useRef<boolean>(true);\n\n  const initialIsGreaterThanTwoWeeks = useMemo(() => {\n    const { dates } = mainData;\n    const initialStartZoom = isDesktop\n      ? CHART_CONFIG.INITIAL_START_ZOOM_DESKTOP\n      : CHART_CONFIG.INITIAL_START_ZOOM_MOBILE;\n\n    const visibleXAxisData = dates.slice(\n      (dates.length * initialStartZoom) / 100,\n      (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100\n    );\n\n    if (visibleXAxisData.length === 0) {\n      return false;\n    }\n\n    return isDifferenceGreaterThanTwoWeeks(\n      visibleXAxisData[0],\n      visibleXAxisData[visibleXAxisData.length - 1]\n    );\n  }, [mainData, isDesktop]);\n\n  useEffect(() => {\n    isGreaterThanTwoWeeksRef.current = initialIsGreaterThanTwoWeeks;\n  }, [initialIsGreaterThanTwoWeeks]);\n\n  const chartOption = useMemo(\n    () =>\n      getOption({\n        mainData,\n        additionalData,\n        isDark,\n        isDesktop,\n        isLoading,\n        locale: normalizeLocale(locale),\n        labelCallback: lang,\n      }),\n    [mainData, additionalData, isDark, isDesktop, isLoading, lang, locale]\n  );\n\n  // Memoize event handler to prevent unnecessary re-renders\n  const handleDataZoom = useCallback(\n    (_params: DataZoomEvent, instance: EChartsType) => {\n      handleTooltipUpdate(instance, zoomTimerRef, tooltipVisibleRef, canHover);\n      handleLabelUpdate(\n        instance,\n        mainData,\n        labelTimerRef,\n        isGreaterThanTwoWeeksRef,\n        normalizeLocale(locale)\n      );\n    },\n    [mainData, canHover, locale]\n  );\n\n  const chartHeight = isDesktop\n    ? CHART_CONFIG.HEIGHT_DESKTOP\n    : CHART_CONFIG.HEIGHT_MOBILE;\n\n  return (\n    <BaseChart\n      chartHeight={chartHeight}\n      echarts={echarts}\n      isDark={isDark}\n      lazyUpdate={true}\n      option={chartOption}\n      opts={{ renderer: 'canvas' }}\n      onEvents={{\n        datazoom: handleDataZoom,\n      }}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/ChartWithData.js

@@ -1,8 +1,10 @@
 import { ChartError, Size, Spinner, SpinnerSize, useLayoutProvider } from '@oanda/labs-widget-common';
 import React, { useEffect, useState } from 'react';
 import { useDebounceCallback } from 'usehooks-ts';
+import { CHART_CONFIG } from '../../constants';
 import { Chart } from './Chart';
 import { useCrowdViewData } from './useCrowdViewData';
+import { useResizeObserver } from './useResizeObserver';
 const ChartWithData = _ref => {
   let {
     instrument,
@@ -14,6 +16,9 @@ const ChartWithData = _ref => {
     size
   } = useLayoutProvider();
   const [debouncedLoading, setDebouncedLoading] = useState(true);
+  const [containerRef, isResizing] = useResizeObserver({
+    debounceDelay: 150
+  });
   const isDesktop = size === Size.DESKTOP;
   const {
     mainData,
@@ -36,18 +41,25 @@ const ChartWithData = _ref => {
       setDebouncedLoading(true);
     }
   }, [loading, hideLoading]);
+  const showChart = !priceCandlesLoading && !error && !!mainData && !!additionalData && !isResizing;
+  const showLoader = loading || isResizing;
+  const chartHeight = isDesktop ? CHART_CONFIG.HEIGHT_DESKTOP : CHART_CONFIG.HEIGHT_MOBILE;
   return React.createElement(React.Fragment, null, React.createElement("div", {
-    className: "lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden"
+    ref: containerRef,
+    className: "lw-relative lw-w-full lw-overflow-hidden",
+    style: {
+      height: chartHeight
+    }
   }, error && React.createElement("div", {
     className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary"
-  }, React.createElement(ChartError, null)), !priceCandlesLoading && !error && !!mainData && !!additionalData && React.createElement("div", {
+  }, React.createElement(ChartError, null)), showChart && React.createElement("div", {
     className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
   }, React.createElement(Chart, {
     additionalData: additionalData,
     isDesktop: isDesktop,
     isLoading: debouncedLoading,
     mainData: mainData
-  })), loading && React.createElement("div", {
+  })), showLoader && React.createElement("div", {
     className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary lw-bg-bg-transparent-50"
   }, React.createElement(Spinner, {
     size: SpinnerSize.lg

package/dist/module/CrowdViewWidget/components/Chart/ChartWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","React","useEffect","useState","useDebounceCallback","Chart","useCrowdViewData","ChartWithData","_ref","instrument","bookType","division","granularity","size","debouncedLoading","setDebouncedLoading","isDesktop","DESKTOP","mainData","additionalData","loading","priceCandlesLoading","error","hideLoading","createElement","Fragment","className","isLoading","lg"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import {\n  ChartError,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport React, { useEffect, useState } from 'react';\nimport { useDebounceCallback } from 'usehooks-ts';\n\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { useCrowdViewData } from './useCrowdViewData';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n  division,\n  granularity,\n}: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const [debouncedLoading, setDebouncedLoading] = useState(true);\n  const isDesktop = size === Size.DESKTOP;\n\n  const { mainData, additionalData, loading, priceCandlesLoading, error } =\n    useCrowdViewData({\n      instrument,\n      bookType,\n      division,\n      granularity,\n    });\n\n  const hideLoading = useDebounceCallback(\n    () => setDebouncedLoading(false),\n    500\n  );\n\n  useEffect(() => {\n    if (loading === false) {\n      hideLoading();\n    }\n    if (loading === true) {\n      setDebouncedLoading(true);\n    }\n  }, [loading, hideLoading]);\n\n  return (\n    <>\n      <div className=\"lw-relative lw-h-[440px] lw-w-full lw-overflow-hidden\">\n        {error && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        )}\n        {!priceCandlesLoading && !error && !!mainData && !!additionalData && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart\n              additionalData={additionalData}\n              isDesktop={isDesktop}\n              isLoading={debouncedLoading}\n              mainData={mainData}\n            />\n          </div>\n        )}\n        {loading && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary lw-bg-bg-transparent-50\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,SACEA,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,WAAW,EACXC,iBAAiB,QACZ,2BAA2B;AAClC,OAAOC,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,mBAAmB,QAAQ,aAAa;AAEjD,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,MAAMC,aAAa,GAAGC,IAAA,IAKI;EAAA,IALH;IACrBC,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACkB,CAAC,GAAAJ,IAAA;EACnB,MAAM;IAAEK;EAAK,CAAC,GAAGb,iBAAiB,CAAC,CAAC;EACpC,MAAM,CAACc,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGZ,QAAQ,CAAC,IAAI,CAAC;EAC9D,MAAMa,SAAS,GAAGH,IAAI,KAAKhB,IAAI,CAACoB,OAAO;EAEvC,MAAM;IAAEC,QAAQ;IAAEC,cAAc;IAAEC,OAAO;IAAEC,mBAAmB;IAAEC;EAAM,CAAC,GACrEhB,gBAAgB,CAAC;IACfG,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,CAAC;EAEJ,MAAMW,WAAW,GAAGnB,mBAAmB,CACrC,MAAMW,mBAAmB,CAAC,KAAK,CAAC,EAChC,GACF,CAAC;EAEDb,SAAS,CAAC,MAAM;IACd,IAAIkB,OAAO,KAAK,KAAK,EAAE;MACrBG,WAAW,CAAC,CAAC;IACf;IACA,IAAIH,OAAO,KAAK,IAAI,EAAE;MACpBL,mBAAmB,CAAC,IAAI,CAAC;IAC3B;EACF,CAAC,EAAE,CAACK,OAAO,EAAEG,WAAW,CAAC,CAAC;EAE1B,OACEtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACExB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAuD,GACnEJ,KAAK,IACJrB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAiJ,GAC9JzB,KAAA,CAAAuB,aAAA,CAAC5B,UAAU,MAAE,CACV,CACN,EACA,CAACyB,mBAAmB,IAAI,CAACC,KAAK,IAAI,CAAC,CAACJ,QAAQ,IAAI,CAAC,CAACC,cAAc,IAC/DlB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEzB,KAAA,CAAAuB,aAAA,CAACnB,KAAK;IACJc,cAAc,EAAEA,cAAe;IAC/BH,SAAS,EAAEA,SAAU;IACrBW,SAAS,EAAEb,gBAAiB;IAC5BI,QAAQ,EAAEA;EAAS,CACpB,CACE,CACN,EACAE,OAAO,IACNnB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAyK,GACtLzB,KAAA,CAAAuB,aAAA,CAAC1B,OAAO;IAACe,IAAI,EAAEd,WAAW,CAAC6B;EAAG,CAAE,CAC7B,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASrB,aAAa","ignoreList":[]}
+{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","React","useEffect","useState","useDebounceCallback","CHART_CONFIG","Chart","useCrowdViewData","useResizeObserver","ChartWithData","_ref","instrument","bookType","division","granularity","size","debouncedLoading","setDebouncedLoading","containerRef","isResizing","debounceDelay","isDesktop","DESKTOP","mainData","additionalData","loading","priceCandlesLoading","error","hideLoading","showChart","showLoader","chartHeight","HEIGHT_DESKTOP","HEIGHT_MOBILE","createElement","Fragment","ref","className","style","height","isLoading","lg"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import {\n  ChartError,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport React, { useEffect, useState } from 'react';\nimport { useDebounceCallback } from 'usehooks-ts';\n\nimport { CHART_CONFIG } from '../../constants';\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { useCrowdViewData } from './useCrowdViewData';\nimport { useResizeObserver } from './useResizeObserver';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n  division,\n  granularity,\n}: ChartWithDataProps) => {\n  const { size } = useLayoutProvider();\n  const [debouncedLoading, setDebouncedLoading] = useState(true);\n  const [containerRef, isResizing] = useResizeObserver({ debounceDelay: 150 });\n  const isDesktop = size === Size.DESKTOP;\n\n  const { mainData, additionalData, loading, priceCandlesLoading, error } =\n    useCrowdViewData({\n      instrument,\n      bookType,\n      division,\n      granularity,\n    });\n\n  const hideLoading = useDebounceCallback(\n    () => setDebouncedLoading(false),\n    500\n  );\n\n  useEffect(() => {\n    if (loading === false) {\n      hideLoading();\n    }\n    if (loading === true) {\n      setDebouncedLoading(true);\n    }\n  }, [loading, hideLoading]);\n\n  const showChart =\n    !priceCandlesLoading &&\n    !error &&\n    !!mainData &&\n    !!additionalData &&\n    !isResizing;\n  const showLoader = loading || isResizing;\n\n  const chartHeight = isDesktop\n    ? CHART_CONFIG.HEIGHT_DESKTOP\n    : CHART_CONFIG.HEIGHT_MOBILE;\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        className=\"lw-relative lw-w-full lw-overflow-hidden\"\n        style={{ height: chartHeight }}\n      >\n        {error && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        )}\n        {showChart && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart\n              additionalData={additionalData}\n              isDesktop={isDesktop}\n              isLoading={debouncedLoading}\n              mainData={mainData}\n            />\n          </div>\n        )}\n        {showLoader && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary lw-bg-bg-transparent-50\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,SACEA,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,WAAW,EACXC,iBAAiB,QACZ,2BAA2B;AAClC,OAAOC,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,mBAAmB,QAAQ,aAAa;AAEjD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,MAAMC,aAAa,GAAGC,IAAA,IAKI;EAAA,IALH;IACrBC,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACkB,CAAC,GAAAJ,IAAA;EACnB,MAAM;IAAEK;EAAK,CAAC,GAAGf,iBAAiB,CAAC,CAAC;EACpC,MAAM,CAACgB,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGd,QAAQ,CAAC,IAAI,CAAC;EAC9D,MAAM,CAACe,YAAY,EAAEC,UAAU,CAAC,GAAGX,iBAAiB,CAAC;IAAEY,aAAa,EAAE;EAAI,CAAC,CAAC;EAC5E,MAAMC,SAAS,GAAGN,IAAI,KAAKlB,IAAI,CAACyB,OAAO;EAEvC,MAAM;IAAEC,QAAQ;IAAEC,cAAc;IAAEC,OAAO;IAAEC,mBAAmB;IAAEC;EAAM,CAAC,GACrEpB,gBAAgB,CAAC;IACfI,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,CAAC;EAEJ,MAAMc,WAAW,GAAGxB,mBAAmB,CACrC,MAAMa,mBAAmB,CAAC,KAAK,CAAC,EAChC,GACF,CAAC;EAEDf,SAAS,CAAC,MAAM;IACd,IAAIuB,OAAO,KAAK,KAAK,EAAE;MACrBG,WAAW,CAAC,CAAC;IACf;IACA,IAAIH,OAAO,KAAK,IAAI,EAAE;MACpBR,mBAAmB,CAAC,IAAI,CAAC;IAC3B;EACF,CAAC,EAAE,CAACQ,OAAO,EAAEG,WAAW,CAAC,CAAC;EAE1B,MAAMC,SAAS,GACb,CAACH,mBAAmB,IACpB,CAACC,KAAK,IACN,CAAC,CAACJ,QAAQ,IACV,CAAC,CAACC,cAAc,IAChB,CAACL,UAAU;EACb,MAAMW,UAAU,GAAGL,OAAO,IAAIN,UAAU;EAExC,MAAMY,WAAW,GAAGV,SAAS,GACzBhB,YAAY,CAAC2B,cAAc,GAC3B3B,YAAY,CAAC4B,aAAa;EAE9B,OACEhC,KAAA,CAAAiC,aAAA,CAAAjC,KAAA,CAAAkC,QAAA,QACElC,KAAA,CAAAiC,aAAA;IACEE,GAAG,EAAElB,YAAa;IAClBmB,SAAS,EAAC,0CAA0C;IACpDC,KAAK,EAAE;MAAEC,MAAM,EAAER;IAAY;EAAE,GAE9BJ,KAAK,IACJ1B,KAAA,CAAAiC,aAAA;IAAKG,SAAS,EAAC;EAAiJ,GAC9JpC,KAAA,CAAAiC,aAAA,CAACtC,UAAU,MAAE,CACV,CACN,EACAiC,SAAS,IACR5B,KAAA,CAAAiC,aAAA;IAAKG,SAAS,EAAC;EAA4D,GACzEpC,KAAA,CAAAiC,aAAA,CAAC5B,KAAK;IACJkB,cAAc,EAAEA,cAAe;IAC/BH,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAExB,gBAAiB;IAC5BO,QAAQ,EAAEA;EAAS,CACpB,CACE,CACN,EACAO,UAAU,IACT7B,KAAA,CAAAiC,aAAA;IAAKG,SAAS,EAAC;EAAyK,GACtLpC,KAAA,CAAAiC,aAAA,CAACpC,OAAO;IAACiB,IAAI,EAAEhB,WAAW,CAAC0C;EAAG,CAAE,CAC7B,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAAShC,aAAa","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.js

@@ -1,23 +1,37 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { CHART_CONFIG } from '../../../constants';
 export const getGridConfig = _ref => {
   let {
     isDesktop
   } = _ref;
-  return [{
+  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: "".concat(isDesktop ? Y_SENTIMENT_LABEL_DESKTOP_SIZE : Y_SENTIMENT_LABEL_MOBILE_SIZE, "px"),
+    right: "".concat(isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE, "px"),
+    top: "".concat(isDesktop ? TOP_MARGIN_DESKTOP : TOP_MARGIN_MOBILE + MOBILE_TOOLTIP_HEIGHT, "px"),
+    height: "".concat(mainHeight, "px")
+  };
+  return [_objectSpread({
     id: 'main-grid',
-    name: 'main-grid',
-    left: "".concat(isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE, "px"),
-    right: "".concat(isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE, "px"),
-    top: "".concat(isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE, "px"),
-    bottom: "".concat(CHART_CONFIG.X_LABEL_SIZE, "px"),
-    height: "".concat(isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE, "px")
-  }, {
+    name: 'main-grid'
+  }, position), _objectSpread({
     id: 'sentiment-grid',
-    name: 'sentiment-grid',
-    left: "".concat(isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE, "px"),
-    right: "".concat(isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE, "px"),
-    top: "".concat(isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE, "px"),
-    height: "".concat(isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE, "px")
-  }];
+    name: 'sentiment-grid'
+  }, position)];
 };
 //# sourceMappingURL=getGridConfig.js.map

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getGridConfig.js","names":["CHART_CONFIG","getGridConfig","_ref","isDesktop","id","name","left","concat","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","right","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","top","TOP_MARGIN_DESKTOP","TOP_MARGIN_MOBILE","bottom","X_LABEL_SIZE","height","MAIN_HEIGHT"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.ts"],"sourcesContent":["import type { GridComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetGridConfigParams {\n  isDesktop: boolean;\n}\n\nexport const getGridConfig = ({\n  isDesktop,\n}: GetGridConfigParams): GridComponentOption[] => [\n  {\n    id: 'main-grid',\n    name: 'main-grid',\n    left: `${isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,\n    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,\n    top: `${isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE}px`,\n    bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,\n    height: `${isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE}px`,\n  },\n  {\n    id: 'sentiment-grid',\n    name: 'sentiment-grid',\n    left: `${isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,\n    right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,\n    top: `${isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE}px`,\n    height: `${isDesktop ? CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.MAIN_HEIGHT - CHART_CONFIG.TOP_MARGIN_MOBILE}px`,\n  },\n];\n"],"mappings":"AAEA,SAASA,YAAY,QAAQ,oBAAoB;AAMjD,OAAO,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;IAC5BC;EACmB,CAAC,GAAAD,IAAA;EAAA,OAA4B,CAChD;IACEE,EAAE,EAAE,WAAW;IACfC,IAAI,EAAE,WAAW;IACjBC,IAAI,KAAAC,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACQ,8BAA8B,GAAGR,YAAY,CAACS,6BAA6B,OAAI;IACjHC,KAAK,KAAAH,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACW,oBAAoB,GAAGX,YAAY,CAACY,mBAAmB,OAAI;IAC9FC,GAAG,KAAAN,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACc,kBAAkB,GAAGd,YAAY,CAACe,iBAAiB,OAAI;IACxFC,MAAM,KAAAT,MAAA,CAAKP,YAAY,CAACiB,YAAY,OAAI;IACxCC,MAAM,KAAAX,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACmB,WAAW,GAAGnB,YAAY,CAACc,kBAAkB,GAAGd,YAAY,CAACmB,WAAW,GAAGnB,YAAY,CAACe,iBAAiB;EAC/I,CAAC,EACD;IACEX,EAAE,EAAE,gBAAgB;IACpBC,IAAI,EAAE,gBAAgB;IACtBC,IAAI,KAAAC,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACQ,8BAA8B,GAAGR,YAAY,CAACS,6BAA6B,OAAI;IACjHC,KAAK,KAAAH,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACW,oBAAoB,GAAGX,YAAY,CAACY,mBAAmB,OAAI;IAC9FC,GAAG,KAAAN,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACc,kBAAkB,GAAGd,YAAY,CAACe,iBAAiB,OAAI;IACxFG,MAAM,KAAAX,MAAA,CAAKJ,SAAS,GAAGH,YAAY,CAACmB,WAAW,GAAGnB,YAAY,CAACc,kBAAkB,GAAGd,YAAY,CAACmB,WAAW,GAAGnB,YAAY,CAACe,iBAAiB;EAC/I,CAAC,CACF;AAAA","ignoreList":[]}
+{"version":3,"file":"getGridConfig.js","names":["CHART_CONFIG","getGridConfig","_ref","isDesktop","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","mainHeight","position","left","concat","right","top","height","_objectSpread","id","name"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getGridConfig.ts"],"sourcesContent":["import type { GridComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetGridConfigParams {\n  isDesktop: boolean;\n}\n\nexport const getGridConfig = ({\n  isDesktop,\n}: GetGridConfigParams): GridComponentOption[] => {\n  const {\n    Y_SENTIMENT_LABEL_DESKTOP_SIZE,\n    Y_SENTIMENT_LABEL_MOBILE_SIZE,\n    Y_LABEL_SIZE_DESKTOP,\n    Y_LABEL_SIZE_MOBILE,\n    TOP_MARGIN_DESKTOP,\n    TOP_MARGIN_MOBILE,\n    MAIN_HEIGHT_DESKTOP,\n    MAIN_HEIGHT_MOBILE,\n    MOBILE_TOOLTIP_HEIGHT,\n  } = CHART_CONFIG;\n\n  const mainHeight = isDesktop ? MAIN_HEIGHT_DESKTOP : MAIN_HEIGHT_MOBILE;\n\n  const position = {\n    left: `${isDesktop ? Y_SENTIMENT_LABEL_DESKTOP_SIZE : Y_SENTIMENT_LABEL_MOBILE_SIZE}px`,\n    right: `${isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE}px`,\n    top: `${isDesktop ? TOP_MARGIN_DESKTOP : TOP_MARGIN_MOBILE + MOBILE_TOOLTIP_HEIGHT}px`,\n    height: `${mainHeight}px`,\n  };\n  return [\n    {\n      id: 'main-grid',\n      name: 'main-grid',\n      ...position,\n    },\n    {\n      id: 'sentiment-grid',\n      name: 'sentiment-grid',\n      ...position,\n    },\n  ];\n};\n"],"mappings":";;;;;AAEA,SAASA,YAAY,QAAQ,oBAAoB;AAMjD,OAAO,MAAMC,aAAa,GAAGC,IAAA,IAEqB;EAAA,IAFpB;IAC5BC;EACmB,CAAC,GAAAD,IAAA;EACpB,MAAM;IACJE,8BAA8B;IAC9BC,6BAA6B;IAC7BC,oBAAoB;IACpBC,mBAAmB;IACnBC,kBAAkB;IAClBC,iBAAiB;IACjBC,mBAAmB;IACnBC,kBAAkB;IAClBC;EACF,CAAC,GAAGZ,YAAY;EAEhB,MAAMa,UAAU,GAAGV,SAAS,GAAGO,mBAAmB,GAAGC,kBAAkB;EAEvE,MAAMG,QAAQ,GAAG;IACfC,IAAI,KAAAC,MAAA,CAAKb,SAAS,GAAGC,8BAA8B,GAAGC,6BAA6B,OAAI;IACvFY,KAAK,KAAAD,MAAA,CAAKb,SAAS,GAAGG,oBAAoB,GAAGC,mBAAmB,OAAI;IACpEW,GAAG,KAAAF,MAAA,CAAKb,SAAS,GAAGK,kBAAkB,GAAGC,iBAAiB,GAAGG,qBAAqB,OAAI;IACtFO,MAAM,KAAAH,MAAA,CAAKH,UAAU;EACvB,CAAC;EACD,OAAO,CAAAO,aAAA;IAEHC,EAAE,EAAE,WAAW;IACfC,IAAI,EAAE;EAAW,GACdR,QAAQ,GAAAM,aAAA;IAGXC,EAAE,EAAE,gBAAgB;IACpBC,IAAI,EAAE;EAAgB,GACnBR,QAAQ,EAEd;AACH,CAAC","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getGridLines.js

@@ -12,12 +12,15 @@ export const getGridLines = _ref => {
   } = _ref;
   const {
     WIDTH,
-    MAIN_HEIGHT,
-    X_LABEL_SIZE
+    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;
   const yLabelSize = isDesktop ? 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 [_objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
     top: -2,
     shape: {
@@ -33,7 +36,7 @@ export const getGridLines = _ref => {
       x1: 0,
       y1: 0,
       x2: 0,
-      y2: MAIN_HEIGHT + X_LABEL_SIZE + 2
+      y2: mainHeight + topMargin + X_LABEL_SIZE + 2
     },
     z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
@@ -51,7 +54,7 @@ export const getGridLines = _ref => {
       x1: 0,
       y1: 0,
       x2: 0,
-      y2: MAIN_HEIGHT + X_LABEL_SIZE + 2
+      y2: mainHeight + X_LABEL_SIZE + topMargin + 2
     },
     z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
@@ -61,7 +64,7 @@ export const getGridLines = _ref => {
       x1: 0,
       y1: 0,
       x2: 0,
-      y2: MAIN_HEIGHT - topMargin
+      y2: mainHeight
     },
     z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
@@ -71,7 +74,7 @@ export const getGridLines = _ref => {
       x1: 0,
       y1: 0,
       x2: 0,
-      y2: MAIN_HEIGHT - topMargin
+      y2: mainHeight
     },
     z: 30
   }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
@@ -92,6 +95,15 @@ export const getGridLines = _ref => {
       y2: 0
     },
     z: 30
+  }), _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
+    top: MOBILE_TOOLTIP_HEIGHT - 2,
+    shape: {
+      x1: 0,
+      y1: 0,
+      x2: isDesktop ? 0 : WIDTH,
+      y2: 0
+    },
+    z: 30
   })];
 };
 //# sourceMappingURL=getGridLines.js.map

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getGridLines.js.map

@@ -1 +1 @@
-{"version":3,"file":"getGridLines.js","names":["getLineCommons","CHART_CONFIG","getGridLines","_ref","isDark","isDesktop","WIDTH","MAIN_HEIGHT","X_LABEL_SIZE","ySentimentLabelSize","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","topMargin","TOP_MARGIN_MOBILE","_objectSpread","top","shape","x1","y1","x2","y2","z","right","bottom","left"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getGridLines.ts"],"sourcesContent":["import { getLineCommons } from '@oanda/labs-widget-common';\nimport type { GraphicComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetGridLinesParams {\n  isDark: boolean;\n  isDesktop: boolean;\n}\n\nexport const getGridLines = ({\n  isDark,\n  isDesktop,\n}: GetGridLinesParams): GraphicComponentOption[] => {\n  const { WIDTH, MAIN_HEIGHT, X_LABEL_SIZE } = CHART_CONFIG;\n  const ySentimentLabelSize = isDesktop\n    ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE\n    : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;\n\n  const yLabelSize = isDesktop\n    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP\n    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;\n\n  const topMargin = isDesktop ? 0 : CHART_CONFIG.TOP_MARGIN_MOBILE;\n\n  return [\n    // Top\n    {\n      ...getLineCommons(isDark),\n      top: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // Right\n    {\n      ...getLineCommons(isDark),\n      right: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,\n      },\n      z: 30,\n    },\n    // Bottom\n    {\n      ...getLineCommons(isDark),\n      bottom: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // Left\n    {\n      ...getLineCommons(isDark),\n      left: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,\n      },\n      z: 30,\n    },\n    // Y Label\n    {\n      ...getLineCommons(isDark),\n      right: yLabelSize - 3,\n      top: topMargin - 2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT - topMargin,\n      },\n      z: 30,\n    },\n    // Y Sentiment Label\n    {\n      ...getLineCommons(isDark),\n      left: ySentimentLabelSize - 2,\n      top: topMargin - 2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: MAIN_HEIGHT - topMargin,\n      },\n      z: 30,\n    },\n    // X Label\n    {\n      ...getLineCommons(isDark),\n      bottom: X_LABEL_SIZE - 3,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // X Mobile Label\n    {\n      ...getLineCommons(isDark),\n      top: topMargin - 3,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n  ];\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getGridLines.js","names":["getLineCommons","CHART_CONFIG","getGridLines","_ref","isDark","isDesktop","WIDTH","MAIN_HEIGHT_DESKTOP","MAIN_HEIGHT_MOBILE","X_LABEL_SIZE","MOBILE_TOOLTIP_HEIGHT","mainHeight","ySentimentLabelSize","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","topMargin","TOP_MARGIN_DESKTOP","TOP_MARGIN_MOBILE","_objectSpread","top","shape","x1","y1","x2","y2","z","right","bottom","left"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getGridLines.ts"],"sourcesContent":["import { getLineCommons } from '@oanda/labs-widget-common';\nimport type { GraphicComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetGridLinesParams {\n  isDark: boolean;\n  isDesktop: boolean;\n}\n\nexport const getGridLines = ({\n  isDark,\n  isDesktop,\n}: GetGridLinesParams): GraphicComponentOption[] => {\n  const {\n    WIDTH,\n    MAIN_HEIGHT_DESKTOP,\n    MAIN_HEIGHT_MOBILE,\n    X_LABEL_SIZE,\n    MOBILE_TOOLTIP_HEIGHT,\n  } = CHART_CONFIG;\n  const mainHeight = isDesktop ? MAIN_HEIGHT_DESKTOP : MAIN_HEIGHT_MOBILE;\n  const ySentimentLabelSize = isDesktop\n    ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE\n    : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;\n\n  const yLabelSize = isDesktop\n    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP\n    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;\n\n  const topMargin = isDesktop\n    ? CHART_CONFIG.TOP_MARGIN_DESKTOP\n    : CHART_CONFIG.TOP_MARGIN_MOBILE + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;\n\n  return [\n    // Top\n    {\n      ...getLineCommons(isDark),\n      top: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // Right\n    {\n      ...getLineCommons(isDark),\n      right: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: mainHeight + topMargin + X_LABEL_SIZE + 2,\n      },\n      z: 30,\n    },\n    // Bottom\n    {\n      ...getLineCommons(isDark),\n      bottom: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // Left\n    {\n      ...getLineCommons(isDark),\n      left: -2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: mainHeight + X_LABEL_SIZE + topMargin + 2,\n      },\n      z: 30,\n    },\n    // Y Label\n    {\n      ...getLineCommons(isDark),\n      right: yLabelSize - 3,\n      top: topMargin - 2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: mainHeight,\n      },\n      z: 30,\n    },\n    // Y Sentiment Label\n    {\n      ...getLineCommons(isDark),\n      left: ySentimentLabelSize - 2,\n      top: topMargin - 2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: 0,\n        y2: mainHeight,\n      },\n      z: 30,\n    },\n    // X Label\n    {\n      ...getLineCommons(isDark),\n      bottom: X_LABEL_SIZE - 3,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // X Mobile Label\n    {\n      ...getLineCommons(isDark),\n      top: topMargin - 3,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n    // Mobile tooltip,\n    {\n      ...getLineCommons(isDark),\n      top: MOBILE_TOOLTIP_HEIGHT - 2,\n      shape: {\n        x1: 0,\n        y1: 0,\n        x2: isDesktop ? 0 : WIDTH,\n        y2: 0,\n      },\n      z: 30,\n    },\n  ];\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.js

@@ -19,7 +19,8 @@ export const getLabelsConfig = _ref => {
   const priceEstimatedWidth = 10 * priceText.length * 0.65;
   const sentimentVerticalOffset = sentimentEstimatedWidth / 2;
   const priceVerticalOffset = priceEstimatedWidth / 2;
-  const topMargin = isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE;
+  const topMargin = isDesktop ? CHART_CONFIG.TOP_MARGIN_DESKTOP : CHART_CONFIG.TOP_MARGIN_MOBILE + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;
+  const mainHeight = isDesktop ? CHART_CONFIG.MAIN_HEIGHT_DESKTOP : CHART_CONFIG.MAIN_HEIGHT_MOBILE;
   return [{
     type: 'group',
     left: "".concat(ySentimentLabelSize + 5, "px'"),
@@ -59,7 +60,7 @@ export const getLabelsConfig = _ref => {
   }, {
     type: 'group',
     left: "".concat(ySentimentLabelSize + 5, "px'"),
-    top: "".concat(CHART_CONFIG.MAIN_HEIGHT - 24 - 5, "px"),
+    top: "".concat(topMargin + mainHeight - 24 - 5, "px"),
     silent: true,
     children: [{
       type: 'rect',
@@ -97,7 +98,7 @@ export const getLabelsConfig = _ref => {
     z: 30,
     rotation: isDesktop ? Math.PI / 2 : 0,
     left: "5px",
-    top: isDesktop ? "".concat(topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - sentimentVerticalOffset, "px") : "".concat(topMargin - 18, "px"),
+    top: isDesktop ? "".concat(topMargin + mainHeight / 2 - sentimentVerticalOffset, "px") : "".concat(topMargin - 16, "px"),
     silent: true,
     style: {
       fontSize: 10,
@@ -111,7 +112,7 @@ export const getLabelsConfig = _ref => {
     z: 30,
     rotation: isDesktop ? -Math.PI / 2 : 0,
     right: "5px",
-    top: isDesktop ? "".concat(topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - priceVerticalOffset, "px") : "".concat(topMargin - 18, "px"),
+    top: isDesktop ? "".concat(topMargin + mainHeight / 2 - priceVerticalOffset, "px") : "".concat(topMargin - 16, "px"),
     silent: true,
     style: {
       fontSize: 10,
@@ -124,10 +125,10 @@ export const getLabelsConfig = _ref => {
     type: 'rect',
     z: 20,
     right: '0px',
-    top: '0px',
+    top: "".concat(topMargin, "px"),
     shape: {
       width: yMainLabelSize,
-      height: CHART_CONFIG.MAIN_HEIGHT
+      height: mainHeight
     },
     silent: true,
     style: {
@@ -137,15 +138,26 @@ export const getLabelsConfig = _ref => {
     type: 'rect',
     z: 20,
     left: '0px',
-    top: '0px',
+    top: "".concat(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')
+    }
   }];
 };
 //# sourceMappingURL=getLabelsConfig.js.map

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getLabelsConfig.js","names":["colorPalette","chroma","CHART_CONFIG","getLabelsConfig","_ref","isDark","isDesktop","labelCallback","ySentimentLabelSize","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","yMainLabelSize","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","textColor","white","black","labelBackgroundColor","darkGray","backgroundColor","shadowColor","alpha","hex","sentimentText","toUpperCase","priceText","sentimentEstimatedWidth","length","priceEstimatedWidth","sentimentVerticalOffset","priceVerticalOffset","topMargin","TOP_MARGIN_DESKTOP","TOP_MARGIN_MOBILE","type","left","concat","top","silent","children","z","right","shape","width","height","style","fill","shadowBlur","shadowOffsetX","shadowOffsetY","fontSize","fontFamily","fontWeight","text","MAIN_HEIGHT","rotation","Math","PI"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport chroma from 'chroma-js';\nimport type { GraphicComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface getLabelsConfigParams {\n  isDark: boolean;\n  isDesktop: boolean;\n  labelCallback: (key: string, params?: Record<string, unknown>) => string;\n}\n\nexport const getLabelsConfig = ({\n  isDark,\n  isDesktop,\n  labelCallback,\n}: getLabelsConfigParams): GraphicComponentOption[] => {\n  const ySentimentLabelSize = isDesktop\n    ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE\n    : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;\n\n  const yMainLabelSize = isDesktop\n    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP\n    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;\n\n  const textColor = isDark ? colorPalette.white : colorPalette.black;\n  const labelBackgroundColor = isDark\n    ? colorPalette.darkGray\n    : colorPalette.white;\n  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;\n  const shadowColor = chroma(colorPalette.black).alpha(0.1).hex();\n\n  // Estimate text width for centering rotated text\n  // Approximate: fontSize * characterCount * 0.65 (typical character width ratio)\n  const sentimentText = labelCallback('sentiment').toUpperCase();\n  const priceText = labelCallback('price').toUpperCase();\n  const sentimentEstimatedWidth = 10 * sentimentText.length * 0.65;\n  const priceEstimatedWidth = 10 * priceText.length * 0.65;\n  const sentimentVerticalOffset = sentimentEstimatedWidth / 2;\n  const priceVerticalOffset = priceEstimatedWidth / 2;\n\n  const topMargin = isDesktop\n    ? CHART_CONFIG.TOP_MARGIN_DESKTOP\n    : CHART_CONFIG.TOP_MARGIN_MOBILE;\n\n  return [\n    {\n      type: 'group',\n      left: `${ySentimentLabelSize + 5}px'`,\n      top: `${topMargin + 5}px`,\n      silent: true,\n      children: [\n        {\n          type: 'rect',\n          z: 100,\n          right: 'center',\n          top: 'middle',\n          shape: {\n            width: 50,\n            height: 24,\n          },\n          style: {\n            fill: labelBackgroundColor,\n            shadowBlur: 8,\n            shadowOffsetX: 0,\n            shadowOffsetY: 1,\n            shadowColor: shadowColor,\n          },\n        },\n        {\n          type: 'text',\n          z: 100,\n          right: 'center',\n          top: 'middle',\n          style: {\n            fontSize: 11,\n            fontFamily: 'Sofia W03',\n            fontWeight: 500,\n            fill: textColor,\n            width: 70,\n            height: 30,\n            text: labelCallback('short'),\n          },\n        },\n      ],\n    },\n    {\n      type: 'group',\n      left: `${ySentimentLabelSize + 5}px'`,\n      top: `${CHART_CONFIG.MAIN_HEIGHT - 24 - 5}px`,\n      silent: true,\n      children: [\n        {\n          type: 'rect',\n          z: 100,\n          right: 'center',\n          top: 'middle',\n          shape: {\n            width: 50,\n            height: 24,\n          },\n          style: {\n            fill: labelBackgroundColor,\n            shadowBlur: 8,\n            shadowOffsetX: 0,\n            shadowOffsetY: 1,\n            shadowColor: shadowColor,\n          },\n        },\n        {\n          type: 'text',\n          z: 100,\n          right: 'center',\n          top: 'middle',\n          style: {\n            fontSize: 11,\n            fontFamily: 'Sofia W03',\n            fontWeight: 500,\n            fill: textColor,\n            width: 70,\n            height: 30,\n            text: labelCallback('long'),\n          },\n        },\n      ],\n    },\n\n    {\n      type: 'text',\n      z: 30,\n      rotation: isDesktop ? Math.PI / 2 : 0,\n      left: `5px`,\n      top: isDesktop\n        ? `${topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - sentimentVerticalOffset}px`\n        : `${topMargin - 18}px`,\n      silent: true,\n      style: {\n        fontSize: 10,\n        fontFamily: 'Sofia W03',\n        fontWeight: 300,\n        fill: textColor,\n        text: sentimentText,\n      },\n    },\n    {\n      type: 'text',\n      z: 30,\n      rotation: isDesktop ? -Math.PI / 2 : 0,\n      right: `5px`,\n      top: isDesktop\n        ? `${topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - priceVerticalOffset}px`\n        : `${topMargin - 18}px`,\n      silent: true,\n      style: {\n        fontSize: 10,\n        fontFamily: 'Sofia W03',\n        fontWeight: 300,\n        fill: textColor,\n        text: priceText,\n      },\n    },\n    {\n      type: 'rect',\n      z: 20,\n      right: '0px',\n      top: '0px',\n      shape: {\n        width: yMainLabelSize,\n        height: CHART_CONFIG.MAIN_HEIGHT,\n      },\n      silent: true,\n      style: {\n        fill: backgroundColor,\n      },\n    },\n    {\n      type: 'rect',\n      z: 20,\n      left: '0px',\n      top: '0px',\n      shape: {\n        width: ySentimentLabelSize,\n        height: CHART_CONFIG.MAIN_HEIGHT,\n      },\n      silent: true,\n      style: {\n        fill: backgroundColor,\n      },\n    },\n  ];\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getLabelsConfig.js","names":["colorPalette","chroma","CHART_CONFIG","getLabelsConfig","_ref","isDark","isDesktop","labelCallback","ySentimentLabelSize","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","yMainLabelSize","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","textColor","white","black","labelBackgroundColor","darkGray","backgroundColor","shadowColor","alpha","hex","sentimentText","toUpperCase","priceText","sentimentEstimatedWidth","length","priceEstimatedWidth","sentimentVerticalOffset","priceVerticalOffset","topMargin","TOP_MARGIN_DESKTOP","TOP_MARGIN_MOBILE","MOBILE_TOOLTIP_HEIGHT","mainHeight","MAIN_HEIGHT_DESKTOP","MAIN_HEIGHT_MOBILE","type","left","concat","top","silent","children","z","right","shape","width","height","style","fill","shadowBlur","shadowOffsetX","shadowOffsetY","fontSize","fontFamily","fontWeight","text","rotation","Math","PI"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport chroma from 'chroma-js';\nimport type { GraphicComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface getLabelsConfigParams {\n  isDark: boolean;\n  isDesktop: boolean;\n  labelCallback: (key: string, params?: Record<string, unknown>) => string;\n}\n\nexport const getLabelsConfig = ({\n  isDark,\n  isDesktop,\n  labelCallback,\n}: getLabelsConfigParams): GraphicComponentOption[] => {\n  const ySentimentLabelSize = isDesktop\n    ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE\n    : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;\n\n  const yMainLabelSize = isDesktop\n    ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP\n    : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;\n\n  const textColor = isDark ? colorPalette.white : colorPalette.black;\n  const labelBackgroundColor = isDark\n    ? colorPalette.darkGray\n    : colorPalette.white;\n  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;\n  const shadowColor = chroma(colorPalette.black).alpha(0.1).hex();\n\n  // Estimate text width for centering rotated text\n  // Approximate: fontSize * characterCount * 0.65 (typical character width ratio)\n  const sentimentText = labelCallback('sentiment').toUpperCase();\n  const priceText = labelCallback('price').toUpperCase();\n  const sentimentEstimatedWidth = 10 * sentimentText.length * 0.65;\n  const priceEstimatedWidth = 10 * priceText.length * 0.65;\n  const sentimentVerticalOffset = sentimentEstimatedWidth / 2;\n  const priceVerticalOffset = priceEstimatedWidth / 2;\n\n  const topMargin = isDesktop\n    ? CHART_CONFIG.TOP_MARGIN_DESKTOP\n    : CHART_CONFIG.TOP_MARGIN_MOBILE + CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;\n\n  const mainHeight = isDesktop\n    ? CHART_CONFIG.MAIN_HEIGHT_DESKTOP\n    : CHART_CONFIG.MAIN_HEIGHT_MOBILE;\n\n  return [\n    {\n      type: 'group',\n      left: `${ySentimentLabelSize + 5}px'`,\n      top: `${topMargin + 5}px`,\n      silent: true,\n      children: [\n        {\n          type: 'rect',\n          z: 100,\n          right: 'center',\n          top: 'middle',\n          shape: {\n            width: 50,\n            height: 24,\n          },\n          style: {\n            fill: labelBackgroundColor,\n            shadowBlur: 8,\n            shadowOffsetX: 0,\n            shadowOffsetY: 1,\n            shadowColor: shadowColor,\n          },\n        },\n        {\n          type: 'text',\n          z: 100,\n          right: 'center',\n          top: 'middle',\n          style: {\n            fontSize: 11,\n            fontFamily: 'Sofia W03',\n            fontWeight: 500,\n            fill: textColor,\n            width: 70,\n            height: 30,\n            text: labelCallback('short'),\n          },\n        },\n      ],\n    },\n    {\n      type: 'group',\n      left: `${ySentimentLabelSize + 5}px'`,\n      top: `${topMargin + mainHeight - 24 - 5}px`,\n      silent: true,\n      children: [\n        {\n          type: 'rect',\n          z: 100,\n          right: 'center',\n          top: 'middle',\n          shape: {\n            width: 50,\n            height: 24,\n          },\n          style: {\n            fill: labelBackgroundColor,\n            shadowBlur: 8,\n            shadowOffsetX: 0,\n            shadowOffsetY: 1,\n            shadowColor: shadowColor,\n          },\n        },\n        {\n          type: 'text',\n          z: 100,\n          right: 'center',\n          top: 'middle',\n          style: {\n            fontSize: 11,\n            fontFamily: 'Sofia W03',\n            fontWeight: 500,\n            fill: textColor,\n            width: 70,\n            height: 30,\n            text: labelCallback('long'),\n          },\n        },\n      ],\n    },\n\n    {\n      type: 'text',\n      z: 30,\n      rotation: isDesktop ? Math.PI / 2 : 0,\n      left: `5px`,\n      top: isDesktop\n        ? `${topMargin + mainHeight / 2 - sentimentVerticalOffset}px`\n        : `${topMargin - 16}px`,\n      silent: true,\n      style: {\n        fontSize: 10,\n        fontFamily: 'Sofia W03',\n        fontWeight: 300,\n        fill: textColor,\n        text: sentimentText,\n      },\n    },\n    {\n      type: 'text',\n      z: 30,\n      rotation: isDesktop ? -Math.PI / 2 : 0,\n      right: `5px`,\n      top: isDesktop\n        ? `${topMargin + mainHeight / 2 - priceVerticalOffset}px`\n        : `${topMargin - 16}px`,\n      silent: true,\n      style: {\n        fontSize: 10,\n        fontFamily: 'Sofia W03',\n        fontWeight: 300,\n        fill: textColor,\n        text: priceText,\n      },\n    },\n    {\n      type: 'rect',\n      z: 20,\n      right: '0px',\n      top: `${topMargin}px`,\n      shape: {\n        width: yMainLabelSize,\n        height: mainHeight,\n      },\n      silent: true,\n      style: {\n        fill: backgroundColor,\n      },\n    },\n    {\n      type: 'rect',\n      z: 20,\n      left: '0px',\n      top: `${topMargin}px`,\n      shape: {\n        width: ySentimentLabelSize,\n        height: mainHeight,\n      },\n      silent: true,\n      style: {\n        fill: backgroundColor,\n      },\n    },\n    {\n      type: 'text',\n      z: 20,\n      left: 'center',\n      top: CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT / 2 - 5,\n      silent: true,\n      style: {\n        fontSize: isDesktop ? 0 : 11,\n        fill: textColor,\n        text: isDesktop ? '' : labelCallback('tap_chart_to_see_more_details'),\n      },\n    },\n  ];\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/chartOptions/getTooltipConfig.js

@@ -1,3 +1,10 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
 import { CHART_CONFIG } from '../../../constants';
 import { getTooltipFormatter } from '../chartUtils';
 export const getTooltipConfig = _ref => {
@@ -10,9 +17,32 @@ export const getTooltipConfig = _ref => {
     selectedPriceRef,
     tooltipLinesColor,
     sentimentLongs,
-    sentimentShorts
+    sentimentShorts,
+    isDesktop,
+    isDark,
+    locale
   } = _ref;
-  return {
+  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 _objectSpread(_objectSpread({}, styles), {}, {
     trigger: 'axis',
     formatter: params => getTooltipFormatter({
       bookType,
@@ -22,7 +52,10 @@ export const getTooltipConfig = _ref => {
       params: params,
       selectedPrice: selectedPriceRef.current,
       sentimentLongs,
-      sentimentShorts
+      sentimentShorts,
+      isDesktop,
+      locale,
+      isDark
     }),
     hideDelay: 0,
     axisPointer: {
@@ -47,7 +80,12 @@ export const getTooltipConfig = _ref => {
       }
     },
     confine: true,
-    position: point => [point[0] + CHART_CONFIG.TOOLTIP_OFFSET, point[1] + CHART_CONFIG.TOOLTIP_OFFSET]
-  };
+    position: point => {
+      if (isDesktop) {
+        return [point[0] + CHART_CONFIG.TOOLTIP_OFFSET, point[1] + CHART_CONFIG.TOOLTIP_OFFSET];
+      }
+      return [0, 0];
+    }
+  });
 };
 //# sourceMappingURL=getTooltipConfig.js.map