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

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

@@ -0,0 +1,163 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
+import { CHART_CONFIG } from '../../../constants';
+export const getLabelsConfig = _ref => {
+  let {
+    isDark,
+    isDesktop,
+    labelCallback
+  } = _ref;
+  const ySentimentLabelSize = isDesktop ? CHART_CONFIG.Y_SENTIMENT_LABEL_DESKTOP_SIZE : CHART_CONFIG.Y_SENTIMENT_LABEL_MOBILE_SIZE;
+  const yMainLabelSize = isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE;
+  const textColor = isDark ? colorPalette.white : colorPalette.black;
+  const labelBackgroundColor = isDark ? colorPalette.darkGray : colorPalette.white;
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const shadowColor = chroma(colorPalette.black).alpha(0.1).hex();
+  const sentimentText = labelCallback('sentiment').toUpperCase();
+  const priceText = labelCallback('price').toUpperCase();
+  const sentimentEstimatedWidth = 10 * sentimentText.length * 0.65;
+  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 + 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'"),
+    top: "".concat(topMargin + 5, "px"),
+    silent: true,
+    children: [{
+      type: 'rect',
+      z: 100,
+      right: 'center',
+      top: 'middle',
+      shape: {
+        width: 50,
+        height: 24
+      },
+      style: {
+        fill: labelBackgroundColor,
+        shadowBlur: 8,
+        shadowOffsetX: 0,
+        shadowOffsetY: 1,
+        shadowColor: shadowColor
+      }
+    }, {
+      type: 'text',
+      z: 100,
+      right: 'center',
+      top: 'middle',
+      style: {
+        fontSize: 11,
+        fontFamily: 'Sofia W03',
+        fontWeight: 500,
+        fill: textColor,
+        width: 70,
+        height: 30,
+        text: labelCallback('short')
+      }
+    }]
+  }, {
+    type: 'group',
+    left: "".concat(ySentimentLabelSize + 5, "px'"),
+    top: "".concat(topMargin + mainHeight - 24 - 5, "px"),
+    silent: true,
+    children: [{
+      type: 'rect',
+      z: 100,
+      right: 'center',
+      top: 'middle',
+      shape: {
+        width: 50,
+        height: 24
+      },
+      style: {
+        fill: labelBackgroundColor,
+        shadowBlur: 8,
+        shadowOffsetX: 0,
+        shadowOffsetY: 1,
+        shadowColor: shadowColor
+      }
+    }, {
+      type: 'text',
+      z: 100,
+      right: 'center',
+      top: 'middle',
+      style: {
+        fontSize: 11,
+        fontFamily: 'Sofia W03',
+        fontWeight: 500,
+        fill: textColor,
+        width: 70,
+        height: 30,
+        text: labelCallback('long')
+      }
+    }]
+  }, {
+    type: 'text',
+    z: 30,
+    rotation: isDesktop ? Math.PI / 2 : 0,
+    left: "5px",
+    top: isDesktop ? "".concat(topMargin + mainHeight / 2 - sentimentVerticalOffset, "px") : "".concat(topMargin - 16, "px"),
+    silent: true,
+    style: {
+      fontSize: 10,
+      fontFamily: 'Sofia W03',
+      fontWeight: 300,
+      fill: textColor,
+      text: sentimentText
+    }
+  }, {
+    type: 'text',
+    z: 30,
+    rotation: isDesktop ? -Math.PI / 2 : 0,
+    right: "5px",
+    top: isDesktop ? "".concat(topMargin + mainHeight / 2 - priceVerticalOffset, "px") : "".concat(topMargin - 16, "px"),
+    silent: true,
+    style: {
+      fontSize: 10,
+      fontFamily: 'Sofia W03',
+      fontWeight: 300,
+      fill: textColor,
+      text: priceText
+    }
+  }, {
+    type: 'rect',
+    z: 20,
+    right: '0px',
+    top: "".concat(topMargin, "px"),
+    shape: {
+      width: yMainLabelSize,
+      height: mainHeight
+    },
+    silent: true,
+    style: {
+      fill: backgroundColor
+    }
+  }, {
+    type: 'rect',
+    z: 20,
+    left: '0px',
+    top: "".concat(topMargin, "px"),
+    shape: {
+      width: ySentimentLabelSize,
+      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

@@ -0,0 +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","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/getSeriesCandlestickConfig.js

@@ -1,24 +1,22 @@
 import chroma from 'chroma-js';
-import { getLabelData } from '../chartUtils';
 export const getSeriesCandlestickConfig = _ref => {
   let {
-    dates,
-    isGreaterThanTwoWeeks,
-    styles
+    styles,
+    isLoading
   } = _ref;
   const {
     candleLongColor,
     candleShortColor
   } = styles;
-  const labelsData = getLabelData({
-    dates,
-    isGreaterThanTwoWeeks
-  });
   return {
+    animation: isLoading,
     type: 'candlestick',
     id: 'candlestick',
     xAxisIndex: 0,
     yAxisIndex: 0,
+    silent: true,
+    clip: true,
+    large: true,
     encode: {
       x: 'dates',
       y: ['open', 'close', 'low', 'high']
@@ -35,12 +33,7 @@ export const getSeriesCandlestickConfig = _ref => {
         color0: candleShortColor
       }
     },
-    markPoint: {
-      data: labelsData,
-      symbol: 'circle',
-      symbolSize: 0
-    },
-    z: 2
+    z: 3
   };
 };
 //# sourceMappingURL=getSeriesCandlestickConfig.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getSeriesCandlestickConfig.js","names":["chroma","getLabelData","getSeriesCandlestickConfig","_ref","dates","isGreaterThanTwoWeeks","styles","candleLongColor","candleShortColor","labelsData","type","id","xAxisIndex","yAxisIndex","encode","x","y","itemStyle","color","desaturate","css","color0","borderColor","borderColor0","emphasis","markPoint","data","symbol","symbolSize","z"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getSeriesCandlestickConfig.ts"],"sourcesContent":["import chroma from 'chroma-js';\nimport type { CandlestickSeriesOption } from 'echarts';\n\nimport { getLabelData } from '../chartUtils';\nimport type { ChartStyles } from '../chartUtils/getChartStyles';\n\ninterface GetSeriesCandlestickConfigParams {\n  dates: string[];\n  isGreaterThanTwoWeeks: boolean;\n  styles: ChartStyles;\n}\n\nexport const getSeriesCandlestickConfig = ({\n  dates,\n  isGreaterThanTwoWeeks,\n  styles,\n}: GetSeriesCandlestickConfigParams): CandlestickSeriesOption => {\n  const { candleLongColor, candleShortColor } = styles;\n  const labelsData = getLabelData({\n    dates,\n    isGreaterThanTwoWeeks,\n  });\n\n  return {\n    type: 'candlestick',\n    id: 'candlestick',\n    xAxisIndex: 0,\n    yAxisIndex: 0,\n    encode: {\n      x: 'dates',\n      y: ['open', 'close', 'low', 'high'],\n    },\n    itemStyle: {\n      color: chroma(candleLongColor).desaturate().css(),\n      color0: chroma(candleShortColor).desaturate().css(),\n      borderColor: candleLongColor,\n      borderColor0: candleShortColor,\n    },\n    emphasis: {\n      itemStyle: {\n        color: candleLongColor,\n        color0: candleShortColor,\n      },\n    },\n    markPoint: {\n      data: labelsData,\n      symbol: 'circle',\n      symbolSize: 0,\n    },\n    z: 2,\n  };\n};\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,WAAW;AAG9B,SAASC,YAAY,QAAQ,eAAe;AAS5C,OAAO,MAAMC,0BAA0B,GAAGC,IAAA,IAIuB;EAAA,IAJtB;IACzCC,KAAK;IACLC,qBAAqB;IACrBC;EACgC,CAAC,GAAAH,IAAA;EACjC,MAAM;IAAEI,eAAe;IAAEC;EAAiB,CAAC,GAAGF,MAAM;EACpD,MAAMG,UAAU,GAAGR,YAAY,CAAC;IAC9BG,KAAK;IACLC;EACF,CAAC,CAAC;EAEF,OAAO;IACLK,IAAI,EAAE,aAAa;IACnBC,EAAE,EAAE,aAAa;IACjBC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE,CAAC;IACbC,MAAM,EAAE;MACNC,CAAC,EAAE,OAAO;MACVC,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IACpC,CAAC;IACDC,SAAS,EAAE;MACTC,KAAK,EAAElB,MAAM,CAACO,eAAe,CAAC,CAACY,UAAU,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC;MACjDC,MAAM,EAAErB,MAAM,CAACQ,gBAAgB,CAAC,CAACW,UAAU,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC;MACnDE,WAAW,EAAEf,eAAe;MAC5BgB,YAAY,EAAEf;IAChB,CAAC;IACDgB,QAAQ,EAAE;MACRP,SAAS,EAAE;QACTC,KAAK,EAAEX,eAAe;QACtBc,MAAM,EAAEb;MACV;IACF,CAAC;IACDiB,SAAS,EAAE;MACTC,IAAI,EAAEjB,UAAU;MAChBkB,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE;IACd,CAAC;IACDC,CAAC,EAAE;EACL,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"getSeriesCandlestickConfig.js","names":["chroma","getSeriesCandlestickConfig","_ref","styles","isLoading","candleLongColor","candleShortColor","animation","type","id","xAxisIndex","yAxisIndex","silent","clip","large","encode","x","y","itemStyle","color","desaturate","css","color0","borderColor","borderColor0","emphasis","z"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getSeriesCandlestickConfig.ts"],"sourcesContent":["import chroma from 'chroma-js';\nimport type { CandlestickSeriesOption } from 'echarts';\n\nimport type { ChartStyles } from '../chartUtils/getChartStyles';\n\ninterface GetSeriesCandlestickConfigParams {\n  styles: ChartStyles;\n  isLoading: boolean;\n}\n\nexport const getSeriesCandlestickConfig = ({\n  styles,\n  isLoading,\n}: GetSeriesCandlestickConfigParams): CandlestickSeriesOption => {\n  const { candleLongColor, candleShortColor } = styles;\n\n  return {\n    animation: isLoading,\n    type: 'candlestick',\n    id: 'candlestick',\n    xAxisIndex: 0,\n    yAxisIndex: 0,\n    silent: true,\n    clip: true,\n    large: true,\n    encode: {\n      x: 'dates',\n      y: ['open', 'close', 'low', 'high'],\n    },\n    itemStyle: {\n      color: chroma(candleLongColor).desaturate().css(),\n      color0: chroma(candleShortColor).desaturate().css(),\n      borderColor: candleLongColor,\n      borderColor0: candleShortColor,\n    },\n    emphasis: {\n      itemStyle: {\n        color: candleLongColor,\n        color0: candleShortColor,\n      },\n    },\n    z: 3,\n  };\n};\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,WAAW;AAU9B,OAAO,MAAMC,0BAA0B,GAAGC,IAAA,IAGuB;EAAA,IAHtB;IACzCC,MAAM;IACNC;EACgC,CAAC,GAAAF,IAAA;EACjC,MAAM;IAAEG,eAAe;IAAEC;EAAiB,CAAC,GAAGH,MAAM;EAEpD,OAAO;IACLI,SAAS,EAAEH,SAAS;IACpBI,IAAI,EAAE,aAAa;IACnBC,EAAE,EAAE,aAAa;IACjBC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE,CAAC;IACbC,MAAM,EAAE,IAAI;IACZC,IAAI,EAAE,IAAI;IACVC,KAAK,EAAE,IAAI;IACXC,MAAM,EAAE;MACNC,CAAC,EAAE,OAAO;MACVC,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IACpC,CAAC;IACDC,SAAS,EAAE;MACTC,KAAK,EAAEnB,MAAM,CAACK,eAAe,CAAC,CAACe,UAAU,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC;MACjDC,MAAM,EAAEtB,MAAM,CAACM,gBAAgB,CAAC,CAACc,UAAU,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC;MACnDE,WAAW,EAAElB,eAAe;MAC5BmB,YAAY,EAAElB;IAChB,CAAC;IACDmB,QAAQ,EAAE;MACRP,SAAS,EAAE;QACTC,KAAK,EAAEd,eAAe;QACtBiB,MAAM,EAAEhB;MACV;IACF,CAAC;IACDoB,CAAC,EAAE;EACL,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -5,9 +5,11 @@ export const getSeriesHeatmapConfig = _ref => {
     buckets,
     isDark,
     sentimentThresholdMax,
-    sentimentThresholdMin
+    sentimentThresholdMin,
+    isLoading
   } = _ref;
   return {
+    animation: isLoading,
     type: 'custom',
     id: 'heatmap',
     name: 'heatmap',
@@ -19,13 +21,17 @@ export const getSeriesHeatmapConfig = _ref => {
     },
     dimensions: ['dates', 'bookPrices', 'bookIndexes'],
     clip: true,
-    renderItem: (_params, api) => {
+    renderItem: (params, api) => {
+      const animationDelay = 350 * params.dataIndexInside / params.dataInsideLength;
       const xVal = api.value(0);
       const bucketIndex = api.value(2);
       if (bucketIndex == null) {
         return null;
       }
       const metaValues = buckets[bucketIndex];
+      if (!metaValues) {
+        return null;
+      }
       const [rectWidth, rectHeight] = api.size([0, bucketWidth]);
       const items = metaValues.map(_ref2 => {
         let {
@@ -34,6 +40,7 @@ export const getSeriesHeatmapConfig = _ref => {
         } = _ref2;
         const start = api.coord([xVal, price]);
         return {
+          silent: true,
           shape: {
             height: rectHeight,
             width: rectWidth + 1,
@@ -43,12 +50,23 @@ export const getSeriesHeatmapConfig = _ref => {
           style: {
             fill: getRectColor(sentiment, isDark, sentimentThresholdMin, sentimentThresholdMax)
           },
+          enterFrom: {
+            shape: {},
+            style: {
+              opacity: 0
+            }
+          },
+          enterAnimation: {
+            duration: 150,
+            delay: animationDelay
+          },
           type: 'rect'
         };
       });
       return {
         children: items,
         emphasisDisabled: true,
+        silent: true,
         type: 'group'
       };
     },

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

@@ -1 +1 @@
-{"version":3,"file":"getSeriesHeatmapConfig.js","names":["getRectColor","getSeriesHeatmapConfig","_ref","bucketWidth","buckets","isDark","sentimentThresholdMax","sentimentThresholdMin","type","id","name","xAxisIndex","yAxisIndex","encode","x","y","dimensions","clip","renderItem","_params","api","xVal","value","bucketIndex","metaValues","rectWidth","rectHeight","size","items","map","_ref2","price","sentiment","start","coord","shape","height","width","style","fill","children","emphasisDisabled","z"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getSeriesHeatmapConfig.ts"],"sourcesContent":["import type {\n  CustomSeriesOption,\n  CustomSeriesRenderItemAPI,\n  CustomSeriesRenderItemParams,\n} from 'echarts';\n\nimport { getRectColor } from '../chartUtils';\nimport type { Bucket } from '../types';\n\ninterface GetSeriesHeatmapConfigParams {\n  bucketWidth: number;\n  buckets: Bucket[][];\n  isDark: boolean;\n  sentimentThresholdMax: number;\n  sentimentThresholdMin: number;\n}\n\nexport const getSeriesHeatmapConfig = ({\n  bucketWidth,\n  buckets,\n  isDark,\n  sentimentThresholdMax,\n  sentimentThresholdMin,\n}: GetSeriesHeatmapConfigParams): CustomSeriesOption => {\n  return {\n    type: 'custom',\n    id: 'heatmap',\n    name: 'heatmap',\n    xAxisIndex: 0,\n    yAxisIndex: 0,\n    encode: {\n      x: 'dates',\n      y: 'bookPrices',\n    },\n    dimensions: ['dates', 'bookPrices', 'bookIndexes'],\n    clip: true,\n    renderItem: (\n      _params: CustomSeriesRenderItemParams,\n      api: CustomSeriesRenderItemAPI\n    ) => {\n      const xVal = api.value(0);\n      const bucketIndex = api.value(2) as number;\n\n      if (bucketIndex == null) {\n        return null;\n      }\n\n      const metaValues = buckets[bucketIndex];\n\n      const [rectWidth, rectHeight] = api.size!([0, bucketWidth]) as number[];\n\n      const items = metaValues.map(({ price, sentiment }: Bucket) => {\n        const start = api.coord([xVal, price]);\n\n        return {\n          shape: {\n            height: rectHeight,\n            width: rectWidth + 1,\n            x: start[0] - rectWidth / 2,\n            y: start[1] - rectHeight,\n          },\n          style: {\n            fill: getRectColor(\n              sentiment,\n              isDark,\n              sentimentThresholdMin,\n              sentimentThresholdMax\n            ),\n          },\n          type: 'rect' as const,\n        };\n      });\n\n      return {\n        children: items,\n        emphasisDisabled: true,\n        type: 'group' as const,\n      };\n    },\n    z: 1,\n  };\n};\n"],"mappings":"AAMA,SAASA,YAAY,QAAQ,eAAe;AAW5C,OAAO,MAAMC,sBAAsB,GAAGC,IAAA,IAMkB;EAAA,IANjB;IACrCC,WAAW;IACXC,OAAO;IACPC,MAAM;IACNC,qBAAqB;IACrBC;EAC4B,CAAC,GAAAL,IAAA;EAC7B,OAAO;IACLM,IAAI,EAAE,QAAQ;IACdC,EAAE,EAAE,SAAS;IACbC,IAAI,EAAE,SAAS;IACfC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE,CAAC;IACbC,MAAM,EAAE;MACNC,CAAC,EAAE,OAAO;MACVC,CAAC,EAAE;IACL,CAAC;IACDC,UAAU,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,CAAC;IAClDC,IAAI,EAAE,IAAI;IACVC,UAAU,EAAEA,CACVC,OAAqC,EACrCC,GAA8B,KAC3B;MACH,MAAMC,IAAI,GAAGD,GAAG,CAACE,KAAK,CAAC,CAAC,CAAC;MACzB,MAAMC,WAAW,GAAGH,GAAG,CAACE,KAAK,CAAC,CAAC,CAAW;MAE1C,IAAIC,WAAW,IAAI,IAAI,EAAE;QACvB,OAAO,IAAI;MACb;MAEA,MAAMC,UAAU,GAAGpB,OAAO,CAACmB,WAAW,CAAC;MAEvC,MAAM,CAACE,SAAS,EAAEC,UAAU,CAAC,GAAGN,GAAG,CAACO,IAAI,CAAE,CAAC,CAAC,EAAExB,WAAW,CAAC,CAAa;MAEvE,MAAMyB,KAAK,GAAGJ,UAAU,CAACK,GAAG,CAACC,KAAA,IAAkC;QAAA,IAAjC;UAAEC,KAAK;UAAEC;QAAkB,CAAC,GAAAF,KAAA;QACxD,MAAMG,KAAK,GAAGb,GAAG,CAACc,KAAK,CAAC,CAACb,IAAI,EAAEU,KAAK,CAAC,CAAC;QAEtC,OAAO;UACLI,KAAK,EAAE;YACLC,MAAM,EAAEV,UAAU;YAClBW,KAAK,EAAEZ,SAAS,GAAG,CAAC;YACpBX,CAAC,EAAEmB,KAAK,CAAC,CAAC,CAAC,GAAGR,SAAS,GAAG,CAAC;YAC3BV,CAAC,EAAEkB,KAAK,CAAC,CAAC,CAAC,GAAGP;UAChB,CAAC;UACDY,KAAK,EAAE;YACLC,IAAI,EAAEvC,YAAY,CAChBgC,SAAS,EACT3B,MAAM,EACNE,qBAAqB,EACrBD,qBACF;UACF,CAAC;UACDE,IAAI,EAAE;QACR,CAAC;MACH,CAAC,CAAC;MAEF,OAAO;QACLgC,QAAQ,EAAEZ,KAAK;QACfa,gBAAgB,EAAE,IAAI;QACtBjC,IAAI,EAAE;MACR,CAAC;IACH,CAAC;IACDkC,CAAC,EAAE;EACL,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"getSeriesHeatmapConfig.js","names":["getRectColor","getSeriesHeatmapConfig","_ref","bucketWidth","buckets","isDark","sentimentThresholdMax","sentimentThresholdMin","isLoading","animation","type","id","name","xAxisIndex","yAxisIndex","encode","x","y","dimensions","clip","renderItem","params","api","animationDelay","dataIndexInside","dataInsideLength","xVal","value","bucketIndex","metaValues","rectWidth","rectHeight","size","items","map","_ref2","price","sentiment","start","coord","silent","shape","height","width","style","fill","enterFrom","opacity","enterAnimation","duration","delay","children","emphasisDisabled","z"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getSeriesHeatmapConfig.ts"],"sourcesContent":["import type {\n  CustomSeriesOption,\n  CustomSeriesRenderItemAPI,\n  CustomSeriesRenderItemParams,\n} from 'echarts';\n\nimport { getRectColor } from '../chartUtils';\nimport type { Bucket } from '../types';\n\ninterface GetSeriesHeatmapConfigParams {\n  bucketWidth: number;\n  buckets: Bucket[][];\n  isDark: boolean;\n  sentimentThresholdMax: number;\n  sentimentThresholdMin: number;\n  isLoading: boolean;\n}\n\nexport const getSeriesHeatmapConfig = ({\n  bucketWidth,\n  buckets,\n  isDark,\n  sentimentThresholdMax,\n  sentimentThresholdMin,\n  isLoading,\n}: GetSeriesHeatmapConfigParams): CustomSeriesOption => {\n  return {\n    animation: isLoading,\n    type: 'custom',\n    id: 'heatmap',\n    name: 'heatmap',\n    xAxisIndex: 0,\n    yAxisIndex: 0,\n    encode: {\n      x: 'dates',\n      y: 'bookPrices',\n    },\n    dimensions: ['dates', 'bookPrices', 'bookIndexes'],\n    clip: true,\n    renderItem: (\n      params: CustomSeriesRenderItemParams,\n      api: CustomSeriesRenderItemAPI\n    ) => {\n      const animationDelay =\n        (350 * params.dataIndexInside) / params.dataInsideLength;\n      const xVal = api.value(0);\n      const bucketIndex = api.value(2) as number;\n\n      if (bucketIndex == null) {\n        return null;\n      }\n\n      const metaValues = buckets[bucketIndex];\n\n      if (!metaValues) {\n        return null;\n      }\n\n      const [rectWidth, rectHeight] = api.size!([0, bucketWidth]) as number[];\n\n      const items = metaValues.map(({ price, sentiment }: Bucket) => {\n        const start = api.coord([xVal, price]);\n\n        return {\n          silent: true,\n          shape: {\n            height: rectHeight,\n            width: rectWidth + 1,\n            x: start[0] - rectWidth / 2,\n            y: start[1] - rectHeight,\n          },\n          style: {\n            fill: getRectColor(\n              sentiment,\n              isDark,\n              sentimentThresholdMin,\n              sentimentThresholdMax\n            ),\n          },\n          enterFrom: {\n            shape: {},\n            style: {\n              opacity: 0,\n            },\n          },\n          enterAnimation: {\n            duration: 150,\n            delay: animationDelay,\n          },\n          type: 'rect' as const,\n        };\n      });\n\n      return {\n        children: items,\n        emphasisDisabled: true,\n        silent: true,\n        type: 'group' as const,\n      };\n    },\n    z: 1,\n  };\n};\n"],"mappings":"AAMA,SAASA,YAAY,QAAQ,eAAe;AAY5C,OAAO,MAAMC,sBAAsB,GAAGC,IAAA,IAOkB;EAAA,IAPjB;IACrCC,WAAW;IACXC,OAAO;IACPC,MAAM;IACNC,qBAAqB;IACrBC,qBAAqB;IACrBC;EAC4B,CAAC,GAAAN,IAAA;EAC7B,OAAO;IACLO,SAAS,EAAED,SAAS;IACpBE,IAAI,EAAE,QAAQ;IACdC,EAAE,EAAE,SAAS;IACbC,IAAI,EAAE,SAAS;IACfC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE,CAAC;IACbC,MAAM,EAAE;MACNC,CAAC,EAAE,OAAO;MACVC,CAAC,EAAE;IACL,CAAC;IACDC,UAAU,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,CAAC;IAClDC,IAAI,EAAE,IAAI;IACVC,UAAU,EAAEA,CACVC,MAAoC,EACpCC,GAA8B,KAC3B;MACH,MAAMC,cAAc,GACjB,GAAG,GAAGF,MAAM,CAACG,eAAe,GAAIH,MAAM,CAACI,gBAAgB;MAC1D,MAAMC,IAAI,GAAGJ,GAAG,CAACK,KAAK,CAAC,CAAC,CAAC;MACzB,MAAMC,WAAW,GAAGN,GAAG,CAACK,KAAK,CAAC,CAAC,CAAW;MAE1C,IAAIC,WAAW,IAAI,IAAI,EAAE;QACvB,OAAO,IAAI;MACb;MAEA,MAAMC,UAAU,GAAGzB,OAAO,CAACwB,WAAW,CAAC;MAEvC,IAAI,CAACC,UAAU,EAAE;QACf,OAAO,IAAI;MACb;MAEA,MAAM,CAACC,SAAS,EAAEC,UAAU,CAAC,GAAGT,GAAG,CAACU,IAAI,CAAE,CAAC,CAAC,EAAE7B,WAAW,CAAC,CAAa;MAEvE,MAAM8B,KAAK,GAAGJ,UAAU,CAACK,GAAG,CAACC,KAAA,IAAkC;QAAA,IAAjC;UAAEC,KAAK;UAAEC;QAAkB,CAAC,GAAAF,KAAA;QACxD,MAAMG,KAAK,GAAGhB,GAAG,CAACiB,KAAK,CAAC,CAACb,IAAI,EAAEU,KAAK,CAAC,CAAC;QAEtC,OAAO;UACLI,MAAM,EAAE,IAAI;UACZC,KAAK,EAAE;YACLC,MAAM,EAAEX,UAAU;YAClBY,KAAK,EAAEb,SAAS,GAAG,CAAC;YACpBd,CAAC,EAAEsB,KAAK,CAAC,CAAC,CAAC,GAAGR,SAAS,GAAG,CAAC;YAC3Bb,CAAC,EAAEqB,KAAK,CAAC,CAAC,CAAC,GAAGP;UAChB,CAAC;UACDa,KAAK,EAAE;YACLC,IAAI,EAAE7C,YAAY,CAChBqC,SAAS,EACThC,MAAM,EACNE,qBAAqB,EACrBD,qBACF;UACF,CAAC;UACDwC,SAAS,EAAE;YACTL,KAAK,EAAE,CAAC,CAAC;YACTG,KAAK,EAAE;cACLG,OAAO,EAAE;YACX;UACF,CAAC;UACDC,cAAc,EAAE;YACdC,QAAQ,EAAE,GAAG;YACbC,KAAK,EAAE3B;UACT,CAAC;UACDb,IAAI,EAAE;QACR,CAAC;MACH,CAAC,CAAC;MAEF,OAAO;QACLyC,QAAQ,EAAElB,KAAK;QACfmB,gBAAgB,EAAE,IAAI;QACtBZ,MAAM,EAAE,IAAI;QACZ9B,IAAI,EAAE;MACR,CAAC;IACH,CAAC;IACD2C,CAAC,EAAE;EACL,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -1,9 +1,12 @@
 import { colorPalette } from '@oanda/labs-widget-common';
 export const getSeriesSentimentConfig = _ref => {
   let {
-    styles
+    styles,
+    isLoading
   } = _ref;
   return {
+    animation: isLoading,
+    animationDelay: 350,
     type: 'line',
     id: 'sentiment',
     name: 'sentiment',
@@ -11,9 +14,9 @@ export const getSeriesSentimentConfig = _ref => {
     yAxisIndex: 1,
     encode: {
       x: 'dates',
-      y: 'sentimentShorts'
+      y: 'sentimentLongs'
     },
-    dimensions: ['dates', 'sentimentShorts', 'sentimentLongs'],
+    dimensions: ['dates', 'sentimentLongs', 'sentimentShorts'],
     lineStyle: {
       width: styles.sentimentOutlineWidth,
       opacity: 1,
@@ -23,7 +26,11 @@ export const getSeriesSentimentConfig = _ref => {
     emphasis: {
       disabled: true
     },
+    tooltip: {
+      show: false
+    },
     markLine: {
+      animation: isLoading,
       silent: true,
       symbol: ['none', 'none'],
       label: {
@@ -44,10 +51,11 @@ export const getSeriesSentimentConfig = _ref => {
         yAxis: 80
       }]
     },
-    stack: 'sentiment',
     showSymbol: false,
     symbol: 'none',
-    z: 3
+    z: 2,
+    connectNulls: true,
+    silent: true
   };
 };
 //# sourceMappingURL=getSeriesSentimentConfig.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getSeriesSentimentConfig.js","names":["colorPalette","getSeriesSentimentConfig","_ref","styles","type","id","name","xAxisIndex","yAxisIndex","encode","x","y","dimensions","lineStyle","width","sentimentOutlineWidth","opacity","shadowColor","sentimentOutlineColor","shadowBlur","emphasis","disabled","markLine","silent","symbol","label","show","color","grayLight","data","yAxis","stack","showSymbol","z"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getSeriesSentimentConfig.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport type { LineSeriesOption } from 'echarts';\n\nimport type { ChartStyles } from '../chartUtils';\n\ninterface GetSeriesSentimentConfigParams {\n  styles: ChartStyles;\n}\n\nexport const getSeriesSentimentConfig = ({\n  styles,\n}: GetSeriesSentimentConfigParams): LineSeriesOption => {\n  return {\n    type: 'line',\n    id: 'sentiment',\n    name: 'sentiment',\n    xAxisIndex: 1,\n    yAxisIndex: 1,\n    encode: {\n      x: 'dates',\n      y: 'sentimentShorts',\n    },\n    dimensions: ['dates', 'sentimentShorts', 'sentimentLongs'],\n    lineStyle: {\n      width: styles.sentimentOutlineWidth,\n      opacity: 1,\n      shadowColor: styles.sentimentOutlineColor,\n      shadowBlur: 3,\n    },\n    emphasis: {\n      disabled: true,\n    },\n    markLine: {\n      silent: true,\n      symbol: ['none', 'none'],\n      label: {\n        show: false,\n      },\n      lineStyle: {\n        color: colorPalette.grayLight,\n        width: 1,\n      },\n      data: [\n        {\n          yAxis: 20,\n        },\n        {\n          yAxis: 50,\n          lineStyle: {\n            width: 1,\n          },\n        },\n        {\n          yAxis: 80,\n        },\n      ],\n    },\n    stack: 'sentiment',\n    showSymbol: false,\n    symbol: 'none',\n    z: 3,\n  };\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AASxD,OAAO,MAAMC,wBAAwB,GAAGC,IAAA,IAEgB;EAAA,IAFf;IACvCC;EAC8B,CAAC,GAAAD,IAAA;EAC/B,OAAO;IACLE,IAAI,EAAE,MAAM;IACZC,EAAE,EAAE,WAAW;IACfC,IAAI,EAAE,WAAW;IACjBC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE,CAAC;IACbC,MAAM,EAAE;MACNC,CAAC,EAAE,OAAO;MACVC,CAAC,EAAE;IACL,CAAC;IACDC,UAAU,EAAE,CAAC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;IAC1DC,SAAS,EAAE;MACTC,KAAK,EAAEX,MAAM,CAACY,qBAAqB;MACnCC,OAAO,EAAE,CAAC;MACVC,WAAW,EAAEd,MAAM,CAACe,qBAAqB;MACzCC,UAAU,EAAE;IACd,CAAC;IACDC,QAAQ,EAAE;MACRC,QAAQ,EAAE;IACZ,CAAC;IACDC,QAAQ,EAAE;MACRC,MAAM,EAAE,IAAI;MACZC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;MACxBC,KAAK,EAAE;QACLC,IAAI,EAAE;MACR,CAAC;MACDb,SAAS,EAAE;QACTc,KAAK,EAAE3B,YAAY,CAAC4B,SAAS;QAC7Bd,KAAK,EAAE;MACT,CAAC;MACDe,IAAI,EAAE,CACJ;QACEC,KAAK,EAAE;MACT,CAAC,EACD;QACEA,KAAK,EAAE,EAAE;QACTjB,SAAS,EAAE;UACTC,KAAK,EAAE;QACT;MACF,CAAC,EACD;QACEgB,KAAK,EAAE;MACT,CAAC;IAEL,CAAC;IACDC,KAAK,EAAE,WAAW;IAClBC,UAAU,EAAE,KAAK;IACjBR,MAAM,EAAE,MAAM;IACdS,CAAC,EAAE;EACL,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"getSeriesSentimentConfig.js","names":["colorPalette","getSeriesSentimentConfig","_ref","styles","isLoading","animation","animationDelay","type","id","name","xAxisIndex","yAxisIndex","encode","x","y","dimensions","lineStyle","width","sentimentOutlineWidth","opacity","shadowColor","sentimentOutlineColor","shadowBlur","emphasis","disabled","tooltip","show","markLine","silent","symbol","label","color","grayLight","data","yAxis","showSymbol","z","connectNulls"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getSeriesSentimentConfig.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport type { LineSeriesOption } from 'echarts';\n\nimport type { ChartStyles } from '../chartUtils';\n\ninterface GetSeriesSentimentConfigParams {\n  styles: ChartStyles;\n  isLoading: boolean;\n}\n\nexport const getSeriesSentimentConfig = ({\n  styles,\n  isLoading,\n}: GetSeriesSentimentConfigParams): LineSeriesOption => {\n  return {\n    animation: isLoading,\n    animationDelay: 350,\n    type: 'line',\n    id: 'sentiment',\n    name: 'sentiment',\n    xAxisIndex: 1,\n    yAxisIndex: 1,\n    encode: {\n      x: 'dates',\n      y: 'sentimentLongs',\n    },\n    dimensions: ['dates', 'sentimentLongs', 'sentimentShorts'],\n    lineStyle: {\n      width: styles.sentimentOutlineWidth,\n      opacity: 1,\n      shadowColor: styles.sentimentOutlineColor,\n      shadowBlur: 3,\n    },\n    emphasis: {\n      disabled: true,\n    },\n    tooltip: {\n      show: false,\n    },\n    markLine: {\n      animation: isLoading,\n      silent: true,\n      symbol: ['none', 'none'],\n      label: {\n        show: false,\n      },\n      lineStyle: {\n        color: colorPalette.grayLight,\n        width: 1,\n      },\n      data: [\n        {\n          yAxis: 20,\n        },\n        {\n          yAxis: 50,\n          lineStyle: {\n            width: 1,\n          },\n        },\n        {\n          yAxis: 80,\n        },\n      ],\n    },\n    showSymbol: false,\n    symbol: 'none',\n    z: 2,\n    connectNulls: true,\n    silent: true,\n  };\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AAUxD,OAAO,MAAMC,wBAAwB,GAAGC,IAAA,IAGgB;EAAA,IAHf;IACvCC,MAAM;IACNC;EAC8B,CAAC,GAAAF,IAAA;EAC/B,OAAO;IACLG,SAAS,EAAED,SAAS;IACpBE,cAAc,EAAE,GAAG;IACnBC,IAAI,EAAE,MAAM;IACZC,EAAE,EAAE,WAAW;IACfC,IAAI,EAAE,WAAW;IACjBC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE,CAAC;IACbC,MAAM,EAAE;MACNC,CAAC,EAAE,OAAO;MACVC,CAAC,EAAE;IACL,CAAC;IACDC,UAAU,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,CAAC;IAC1DC,SAAS,EAAE;MACTC,KAAK,EAAEd,MAAM,CAACe,qBAAqB;MACnCC,OAAO,EAAE,CAAC;MACVC,WAAW,EAAEjB,MAAM,CAACkB,qBAAqB;MACzCC,UAAU,EAAE;IACd,CAAC;IACDC,QAAQ,EAAE;MACRC,QAAQ,EAAE;IACZ,CAAC;IACDC,OAAO,EAAE;MACPC,IAAI,EAAE;IACR,CAAC;IACDC,QAAQ,EAAE;MACRtB,SAAS,EAAED,SAAS;MACpBwB,MAAM,EAAE,IAAI;MACZC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;MACxBC,KAAK,EAAE;QACLJ,IAAI,EAAE;MACR,CAAC;MACDV,SAAS,EAAE;QACTe,KAAK,EAAE/B,YAAY,CAACgC,SAAS;QAC7Bf,KAAK,EAAE;MACT,CAAC;MACDgB,IAAI,EAAE,CACJ;QACEC,KAAK,EAAE;MACT,CAAC,EACD;QACEA,KAAK,EAAE,EAAE;QACTlB,SAAS,EAAE;UACTC,KAAK,EAAE;QACT;MACF,CAAC,EACD;QACEiB,KAAK,EAAE;MACT,CAAC;IAEL,CAAC;IACDC,UAAU,EAAE,KAAK;IACjBN,MAAM,EAAE,MAAM;IACdO,CAAC,EAAE,CAAC;IACJC,YAAY,EAAE,IAAI;IAClBT,MAAM,EAAE;EACV,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -1,3 +1,11 @@
+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 => {
   let {
@@ -7,9 +15,34 @@ export const getTooltipConfig = _ref => {
     displayPrecision,
     labelCallback,
     selectedPriceRef,
-    tooltipLinesColor
+    tooltipLinesColor,
+    sentimentLongs,
+    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,
@@ -17,8 +50,14 @@ export const getTooltipConfig = _ref => {
       buckets,
       labelCallback,
       params: params,
-      selectedPrice: selectedPriceRef.current
+      selectedPrice: selectedPriceRef.current,
+      sentimentLongs,
+      sentimentShorts,
+      isDesktop,
+      locale,
+      isDark
     }),
+    hideDelay: 0,
     axisPointer: {
       type: 'cross',
       axis: 'x',
@@ -40,7 +79,13 @@ export const getTooltipConfig = _ref => {
         }
       }
     },
-    confine: true
-  };
+    confine: true,
+    position: point => {
+      if (isDesktop) {
+        return [point[0] + CHART_CONFIG.TOOLTIP_OFFSET, point[1] + CHART_CONFIG.TOOLTIP_OFFSET];
+      }
+      return [0, 0];
+    }
+  });
 };
 //# sourceMappingURL=getTooltipConfig.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getTooltipConfig.js","names":["getTooltipFormatter","getTooltipConfig","_ref","bookType","bucketWidth","buckets","displayPrecision","labelCallback","selectedPriceRef","tooltipLinesColor","trigger","formatter","params","selectedPrice","current","axisPointer","type","axis","lineStyle","color","crossStyle","label","padding","lineHeight","axisDimension","axisIndex","Number","value","concat","toFixed","confine"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getTooltipConfig.ts"],"sourcesContent":["import type { TooltipComponentOption } from 'echarts';\n\nimport type { BookType } from '../../../../gql/types/graphql';\nimport { getTooltipFormatter } from '../chartUtils';\nimport type { Bucket, TooltipParam } from '../types';\n\ninterface GetTooltipConfigParams {\n  bookType: BookType;\n  bucketWidth: number;\n  buckets: Bucket[][];\n  displayPrecision: number;\n  labelCallback: (key: string, params?: Record<string, unknown>) => string;\n  selectedPriceRef: { current: number };\n  tooltipLinesColor: string;\n}\n\nexport const getTooltipConfig = ({\n  bookType,\n  bucketWidth,\n  buckets,\n  displayPrecision,\n  labelCallback,\n  selectedPriceRef,\n  tooltipLinesColor,\n}: GetTooltipConfigParams): TooltipComponentOption => ({\n  trigger: 'axis' as const,\n  formatter: (params) =>\n    getTooltipFormatter({\n      bookType,\n      bucketWidth,\n      buckets,\n      labelCallback,\n      params: params as unknown as TooltipParam[],\n      selectedPrice: selectedPriceRef.current,\n    }),\n\n  axisPointer: {\n    type: 'cross' as const,\n    axis: 'x' as const,\n    lineStyle: {\n      color: tooltipLinesColor,\n    },\n    crossStyle: {\n      color: tooltipLinesColor,\n    },\n    label: {\n      padding: 0,\n      lineHeight: 24,\n      formatter: (params: {\n        axisDimension?: string;\n        axisIndex?: number;\n        value: unknown;\n      }) => {\n        if (params.axisDimension === 'y' && params.axisIndex === 0) {\n          selectedPriceRef.current = Number(params.value);\n          return ` ${Number(params.value).toFixed(displayPrecision)} `;\n        }\n        return '';\n      },\n    },\n  },\n  confine: true,\n});\n"],"mappings":"AAGA,SAASA,mBAAmB,QAAQ,eAAe;AAanD,OAAO,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,QAAQ;IACRC,WAAW;IACXC,OAAO;IACPC,gBAAgB;IAChBC,aAAa;IACbC,gBAAgB;IAChBC;EACsB,CAAC,GAAAP,IAAA;EAAA,OAA8B;IACrDQ,OAAO,EAAE,MAAe;IACxBC,SAAS,EAAGC,MAAM,IAChBZ,mBAAmB,CAAC;MAClBG,QAAQ;MACRC,WAAW;MACXC,OAAO;MACPE,aAAa;MACbK,MAAM,EAAEA,MAAmC;MAC3CC,aAAa,EAAEL,gBAAgB,CAACM;IAClC,CAAC,CAAC;IAEJC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAgB;MACtBC,IAAI,EAAE,GAAY;MAClBC,SAAS,EAAE;QACTC,KAAK,EAAEV;MACT,CAAC;MACDW,UAAU,EAAE;QACVD,KAAK,EAAEV;MACT,CAAC;MACDY,KAAK,EAAE;QACLC,OAAO,EAAE,CAAC;QACVC,UAAU,EAAE,EAAE;QACdZ,SAAS,EAAGC,MAIX,IAAK;UACJ,IAAIA,MAAM,CAACY,aAAa,KAAK,GAAG,IAAIZ,MAAM,CAACa,SAAS,KAAK,CAAC,EAAE;YAC1DjB,gBAAgB,CAACM,OAAO,GAAGY,MAAM,CAACd,MAAM,CAACe,KAAK,CAAC;YAC/C,WAAAC,MAAA,CAAWF,MAAM,CAACd,MAAM,CAACe,KAAK,CAAC,CAACE,OAAO,CAACvB,gBAAgB,CAAC;UAC3D;UACA,OAAO,EAAE;QACX;MACF;IACF,CAAC;IACDwB,OAAO,EAAE;EACX,CAAC;AAAA,CAAC","ignoreList":[]}
+{"version":3,"file":"getTooltipConfig.js","names":["colorPalette","chroma","CHART_CONFIG","getTooltipFormatter","getTooltipConfig","_ref","bookType","bucketWidth","buckets","displayPrecision","labelCallback","selectedPriceRef","tooltipLinesColor","sentimentLongs","sentimentShorts","isDesktop","isDark","locale","styles","backgroundColor","darkGray","alpha","hex","darkWhite","shadowColor","black10","extraCssText","padding","alwaysShowContent","textStyle","fontSize","lineHeight","_objectSpread","trigger","formatter","params","selectedPrice","current","hideDelay","axisPointer","type","axis","lineStyle","color","crossStyle","label","axisDimension","axisIndex","Number","value","concat","toFixed","confine","position","point","TOOLTIP_OFFSET"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getTooltipConfig.ts"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport chroma from 'chroma-js';\nimport type { TooltipComponentOption } from 'echarts';\n\nimport type { BookType } from '../../../../gql/types/graphql';\nimport { CHART_CONFIG } from '../../../constants';\nimport { getTooltipFormatter } from '../chartUtils';\nimport type { Bucket, TooltipParam } from '../types';\n\ninterface GetTooltipConfigParams {\n  bookType: BookType;\n  bucketWidth: number;\n  buckets: Bucket[][];\n  displayPrecision: number;\n  labelCallback: (key: string, params?: Record<string, unknown>) => string;\n  selectedPriceRef: { current: number };\n  tooltipLinesColor: string;\n  sentimentLongs: (number | null)[];\n  sentimentShorts: (number | null)[];\n  isDesktop: boolean;\n  isDark: boolean;\n  locale: string;\n}\n\nexport const getTooltipConfig = ({\n  bookType,\n  bucketWidth,\n  buckets,\n  displayPrecision,\n  labelCallback,\n  selectedPriceRef,\n  tooltipLinesColor,\n  sentimentLongs,\n  sentimentShorts,\n  isDesktop,\n  isDark,\n  locale,\n}: GetTooltipConfigParams): TooltipComponentOption => {\n  const styles = isDesktop\n    ? {\n        backgroundColor: isDark\n          ? chroma(colorPalette.darkGray).alpha(0.95).hex()\n          : chroma(colorPalette.darkWhite).alpha(0.95).hex(),\n        shadowColor: colorPalette.black10,\n        extraCssText: 'z-index: 5;',\n        padding: 8,\n        alwaysShowContent: false,\n        textStyle: {\n          fontSize: 11,\n        },\n      }\n    : {\n        backgroundColor: 'transparent',\n        shadowColor: 'transparent',\n        extraCssText: 'width: 100%; z-index: 5;',\n        padding: 4,\n        alwaysShowContent: true,\n        textStyle: {\n          fontSize: 10,\n          lineHeight: 12,\n        },\n      };\n  return {\n    ...styles,\n    trigger: 'axis' as const,\n    formatter: (params) =>\n      getTooltipFormatter({\n        bookType,\n        bucketWidth,\n        buckets,\n        labelCallback,\n        params: params as unknown as TooltipParam[],\n        selectedPrice: selectedPriceRef.current,\n        sentimentLongs,\n        sentimentShorts,\n        isDesktop,\n        locale,\n        isDark,\n      }),\n    hideDelay: 0,\n    axisPointer: {\n      type: 'cross' as const,\n      axis: 'x' as const,\n      lineStyle: {\n        color: tooltipLinesColor,\n      },\n      crossStyle: {\n        color: tooltipLinesColor,\n      },\n      label: {\n        padding: 0,\n        lineHeight: 24,\n        formatter: (params: {\n          axisDimension?: string;\n          axisIndex?: number;\n          value: unknown;\n        }) => {\n          if (params.axisDimension === 'y' && params.axisIndex === 0) {\n            selectedPriceRef.current = Number(params.value);\n            return ` ${Number(params.value).toFixed(displayPrecision)} `;\n          }\n          return '';\n        },\n      },\n    },\n    confine: true,\n    position: (point) => {\n      if (isDesktop) {\n        return [\n          point[0] + CHART_CONFIG.TOOLTIP_OFFSET,\n          point[1] + CHART_CONFIG.TOOLTIP_OFFSET,\n        ];\n      }\n      return [0, 0];\n    },\n  };\n};\n"],"mappings":";;;;;AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,OAAOC,MAAM,MAAM,WAAW;AAI9B,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,mBAAmB,QAAQ,eAAe;AAkBnD,OAAO,MAAMC,gBAAgB,GAAGC,IAAA,IAasB;EAAA,IAbrB;IAC/BC,QAAQ;IACRC,WAAW;IACXC,OAAO;IACPC,gBAAgB;IAChBC,aAAa;IACbC,gBAAgB;IAChBC,iBAAiB;IACjBC,cAAc;IACdC,eAAe;IACfC,SAAS;IACTC,MAAM;IACNC;EACsB,CAAC,GAAAZ,IAAA;EACvB,MAAMa,MAAM,GAAGH,SAAS,GACpB;IACEI,eAAe,EAAEH,MAAM,GACnBf,MAAM,CAACD,YAAY,CAACoB,QAAQ,CAAC,CAACC,KAAK,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,CAAC,GAC/CrB,MAAM,CAACD,YAAY,CAACuB,SAAS,CAAC,CAACF,KAAK,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,CAAC;IACpDE,WAAW,EAAExB,YAAY,CAACyB,OAAO;IACjCC,YAAY,EAAE,aAAa;IAC3BC,OAAO,EAAE,CAAC;IACVC,iBAAiB,EAAE,KAAK;IACxBC,SAAS,EAAE;MACTC,QAAQ,EAAE;IACZ;EACF,CAAC,GACD;IACEX,eAAe,EAAE,aAAa;IAC9BK,WAAW,EAAE,aAAa;IAC1BE,YAAY,EAAE,0BAA0B;IACxCC,OAAO,EAAE,CAAC;IACVC,iBAAiB,EAAE,IAAI;IACvBC,SAAS,EAAE;MACTC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE;IACd;EACF,CAAC;EACL,OAAAC,aAAA,CAAAA,aAAA,KACKd,MAAM;IACTe,OAAO,EAAE,MAAe;IACxBC,SAAS,EAAGC,MAAM,IAChBhC,mBAAmB,CAAC;MAClBG,QAAQ;MACRC,WAAW;MACXC,OAAO;MACPE,aAAa;MACbyB,MAAM,EAAEA,MAAmC;MAC3CC,aAAa,EAAEzB,gBAAgB,CAAC0B,OAAO;MACvCxB,cAAc;MACdC,eAAe;MACfC,SAAS;MACTE,MAAM;MACND;IACF,CAAC,CAAC;IACJsB,SAAS,EAAE,CAAC;IACZC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAgB;MACtBC,IAAI,EAAE,GAAY;MAClBC,SAAS,EAAE;QACTC,KAAK,EAAE/B;MACT,CAAC;MACDgC,UAAU,EAAE;QACVD,KAAK,EAAE/B;MACT,CAAC;MACDiC,KAAK,EAAE;QACLlB,OAAO,EAAE,CAAC;QACVI,UAAU,EAAE,EAAE;QACdG,SAAS,EAAGC,MAIX,IAAK;UACJ,IAAIA,MAAM,CAACW,aAAa,KAAK,GAAG,IAAIX,MAAM,CAACY,SAAS,KAAK,CAAC,EAAE;YAC1DpC,gBAAgB,CAAC0B,OAAO,GAAGW,MAAM,CAACb,MAAM,CAACc,KAAK,CAAC;YAC/C,WAAAC,MAAA,CAAWF,MAAM,CAACb,MAAM,CAACc,KAAK,CAAC,CAACE,OAAO,CAAC1C,gBAAgB,CAAC;UAC3D;UACA,OAAO,EAAE;QACX;MACF;IACF,CAAC;IACD2C,OAAO,EAAE,IAAI;IACbC,QAAQ,EAAGC,KAAK,IAAK;MACnB,IAAIvC,SAAS,EAAE;QACb,OAAO,CACLuC,KAAK,CAAC,CAAC,CAAC,GAAGpD,YAAY,CAACqD,cAAc,EACtCD,KAAK,CAAC,CAAC,CAAC,GAAGpD,YAAY,CAACqD,cAAc,CACvC;MACH;MACA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IACf;EAAC;AAEL,CAAC","ignoreList":[]}

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

@@ -1,35 +1,58 @@
-import { formatXAxisLabel } from '../chartUtils';
+import { formatXAxisAdditionalLabel, formatXAxisLabel, getLabelData } from '../chartUtils';
 export const getXAxisConfig = _ref => {
   let {
     dates,
-    isGreaterThanTwoWeeks
+    isGreaterThanTwoWeeks,
+    locale
   } = _ref;
+  const labelsData = getLabelData({
+    dates,
+    isGreaterThanTwoWeeks
+  });
   return [{
     type: 'category',
     id: 'main-xAxis',
-    name: 'xAxis-less-than-two-weeks',
     nameTextStyle: {
       fontSize: 0
     },
     axisTick: {
       show: false
     },
+    splitLine: {
+      lineStyle: {
+        opacity: 0.5
+      }
+    },
     axisLabel: {
+      showMaxLabel: false,
       padding: [8, 16, 8, 16],
       margin: 0,
-      formatter: value => formatXAxisLabel(value, isGreaterThanTwoWeeks)
-    }
+      formatter: value => formatXAxisLabel(value, isGreaterThanTwoWeeks, locale)
+    },
+    boundaryGap: false,
+    z: 2
   }, {
     type: 'category',
+    id: 'additional-xAxis',
     gridIndex: 1,
-    show: false,
     axisTick: {
       show: false
     },
-    axisLabel: {
+    axisLine: {
+      show: false
+    },
+    splitLine: {
       show: false
     },
-    data: dates
+    axisLabel: {
+      margin: 24,
+      hideOverlap: true,
+      customValues: labelsData,
+      formatter: value => formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks, locale)
+    },
+    data: dates,
+    boundaryGap: false,
+    z: 2
   }];
 };
 //# sourceMappingURL=getXAxisConfig.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getXAxisConfig.js","names":["formatXAxisLabel","getXAxisConfig","_ref","dates","isGreaterThanTwoWeeks","type","id","name","nameTextStyle","fontSize","axisTick","show","axisLabel","padding","margin","formatter","value","gridIndex","data"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getXAxisConfig.ts"],"sourcesContent":["import type { XAXisComponentOption } from 'echarts';\n\nimport { formatXAxisLabel } from '../chartUtils';\n\ninterface GetXAxisConfigParams {\n  dates: string[];\n  isGreaterThanTwoWeeks: boolean;\n}\n\nexport const getXAxisConfig = ({\n  dates,\n  isGreaterThanTwoWeeks,\n}: GetXAxisConfigParams): XAXisComponentOption[] => [\n  {\n    type: 'category',\n    id: 'main-xAxis',\n    name: 'xAxis-less-than-two-weeks',\n    nameTextStyle: {\n      fontSize: 0,\n    },\n    axisTick: {\n      show: false,\n    },\n    axisLabel: {\n      padding: [8, 16, 8, 16],\n      margin: 0,\n      formatter: (value: unknown) =>\n        formatXAxisLabel(value, isGreaterThanTwoWeeks),\n    },\n  },\n  {\n    type: 'category',\n    gridIndex: 1,\n    show: false,\n    axisTick: {\n      show: false,\n    },\n    axisLabel: {\n      show: false,\n    },\n    data: dates,\n  },\n];\n"],"mappings":"AAEA,SAASA,gBAAgB,QAAQ,eAAe;AAOhD,OAAO,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;IAC7BC,KAAK;IACLC;EACoB,CAAC,GAAAF,IAAA;EAAA,OAA6B,CAClD;IACEG,IAAI,EAAE,UAAU;IAChBC,EAAE,EAAE,YAAY;IAChBC,IAAI,EAAE,2BAA2B;IACjCC,aAAa,EAAE;MACbC,QAAQ,EAAE;IACZ,CAAC;IACDC,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACDC,SAAS,EAAE;MACTC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;MACvBC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAGC,KAAc,IACxBhB,gBAAgB,CAACgB,KAAK,EAAEZ,qBAAqB;IACjD;EACF,CAAC,EACD;IACEC,IAAI,EAAE,UAAU;IAChBY,SAAS,EAAE,CAAC;IACZN,IAAI,EAAE,KAAK;IACXD,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACDC,SAAS,EAAE;MACTD,IAAI,EAAE;IACR,CAAC;IACDO,IAAI,EAAEf;EACR,CAAC,CACF;AAAA","ignoreList":[]}
+{"version":3,"file":"getXAxisConfig.js","names":["formatXAxisAdditionalLabel","formatXAxisLabel","getLabelData","getXAxisConfig","_ref","dates","isGreaterThanTwoWeeks","locale","labelsData","type","id","nameTextStyle","fontSize","axisTick","show","splitLine","lineStyle","opacity","axisLabel","showMaxLabel","padding","margin","formatter","value","boundaryGap","z","gridIndex","axisLine","hideOverlap","customValues","data"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getXAxisConfig.ts"],"sourcesContent":["import type { XAXisComponentOption } from 'echarts';\n\nimport {\n  formatXAxisAdditionalLabel,\n  formatXAxisLabel,\n  getLabelData,\n} from '../chartUtils';\n\ninterface GetXAxisConfigParams {\n  dates: string[];\n  isGreaterThanTwoWeeks: boolean;\n  locale: string;\n}\n\nexport const getXAxisConfig = ({\n  dates,\n  isGreaterThanTwoWeeks,\n  locale,\n}: GetXAxisConfigParams): XAXisComponentOption[] => {\n  const labelsData = getLabelData({\n    dates,\n    isGreaterThanTwoWeeks,\n  });\n\n  return [\n    {\n      type: 'category',\n      id: 'main-xAxis',\n      nameTextStyle: {\n        fontSize: 0,\n      },\n      axisTick: {\n        show: false,\n      },\n      splitLine: {\n        lineStyle: {\n          opacity: 0.5,\n        },\n      },\n      axisLabel: {\n        showMaxLabel: false,\n        padding: [8, 16, 8, 16],\n        margin: 0,\n        formatter: (value: unknown) =>\n          formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),\n      },\n      boundaryGap: false,\n      z: 2,\n    },\n    {\n      type: 'category',\n      id: 'additional-xAxis',\n      gridIndex: 1,\n      axisTick: {\n        show: false,\n      },\n      axisLine: {\n        show: false,\n      },\n      splitLine: {\n        show: false,\n      },\n      axisLabel: {\n        margin: 24,\n        hideOverlap: true,\n        customValues: labelsData,\n        formatter: (value: unknown) =>\n          formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks, locale),\n      },\n      data: dates,\n      boundaryGap: false,\n      z: 2,\n    },\n  ];\n};\n"],"mappings":"AAEA,SACEA,0BAA0B,EAC1BC,gBAAgB,EAChBC,YAAY,QACP,eAAe;AAQtB,OAAO,MAAMC,cAAc,GAAGC,IAAA,IAIsB;EAAA,IAJrB;IAC7BC,KAAK;IACLC,qBAAqB;IACrBC;EACoB,CAAC,GAAAH,IAAA;EACrB,MAAMI,UAAU,GAAGN,YAAY,CAAC;IAC9BG,KAAK;IACLC;EACF,CAAC,CAAC;EAEF,OAAO,CACL;IACEG,IAAI,EAAE,UAAU;IAChBC,EAAE,EAAE,YAAY;IAChBC,aAAa,EAAE;MACbC,QAAQ,EAAE;IACZ,CAAC;IACDC,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACDC,SAAS,EAAE;MACTC,SAAS,EAAE;QACTC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,SAAS,EAAE;MACTC,YAAY,EAAE,KAAK;MACnBC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;MACvBC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAGC,KAAc,IACxBtB,gBAAgB,CAACsB,KAAK,EAAEjB,qBAAqB,EAAEC,MAAM;IACzD,CAAC;IACDiB,WAAW,EAAE,KAAK;IAClBC,CAAC,EAAE;EACL,CAAC,EACD;IACEhB,IAAI,EAAE,UAAU;IAChBC,EAAE,EAAE,kBAAkB;IACtBgB,SAAS,EAAE,CAAC;IACZb,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACDa,QAAQ,EAAE;MACRb,IAAI,EAAE;IACR,CAAC;IACDC,SAAS,EAAE;MACTD,IAAI,EAAE;IACR,CAAC;IACDI,SAAS,EAAE;MACTG,MAAM,EAAE,EAAE;MACVO,WAAW,EAAE,IAAI;MACjBC,YAAY,EAAErB,UAAU;MACxBc,SAAS,EAAGC,KAAc,IACxBvB,0BAA0B,CAACuB,KAAK,EAAEjB,qBAAqB,EAAEC,MAAM;IACnE,CAAC;IACDuB,IAAI,EAAEzB,KAAK;IACXmB,WAAW,EAAE,KAAK;IAClBC,CAAC,EAAE;EACL,CAAC,CACF;AACH,CAAC","ignoreList":[]}