npm - @oanda/labs-crowd-view-widget - Versions diffs - 1.0.55 → 1.0.56 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.js CHANGED Viewed

@@ -26,7 +26,8 @@ const getLabelsConfig = _ref => {
   const priceEstimatedWidth = 10 * priceText.length * 0.65;
   const sentimentVerticalOffset = sentimentEstimatedWidth / 2;
   const priceVerticalOffset = priceEstimatedWidth / 2;
-  const topMargin = isDesktop ? _constants.CHART_CONFIG.TOP_MARGIN_DESKTOP : _constants.CHART_CONFIG.TOP_MARGIN_MOBILE;
+  const topMargin = isDesktop ? _constants.CHART_CONFIG.TOP_MARGIN_DESKTOP : _constants.CHART_CONFIG.TOP_MARGIN_MOBILE + _constants.CHART_CONFIG.MOBILE_TOOLTIP_HEIGHT;
+  const mainHeight = isDesktop ? _constants.CHART_CONFIG.MAIN_HEIGHT_DESKTOP : _constants.CHART_CONFIG.MAIN_HEIGHT_MOBILE;
   return [{
     type: 'group',
     left: "".concat(ySentimentLabelSize + 5, "px'"),
@@ -66,7 +67,7 @@ const getLabelsConfig = _ref => {
   }, {
     type: 'group',
     left: "".concat(ySentimentLabelSize + 5, "px'"),
-    top: "".concat(_constants.CHART_CONFIG.MAIN_HEIGHT - 24 - 5, "px"),
+    top: "".concat(topMargin + mainHeight - 24 - 5, "px"),
     silent: true,
     children: [{
       type: 'rect',
@@ -104,7 +105,7 @@ const getLabelsConfig = _ref => {
     z: 30,
     rotation: isDesktop ? Math.PI / 2 : 0,
     left: "5px",
-    top: isDesktop ? "".concat(topMargin + _constants.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,
@@ -118,7 +119,7 @@ const getLabelsConfig = _ref => {
     z: 30,
     rotation: isDesktop ? -Math.PI / 2 : 0,
     right: "5px",
-    top: isDesktop ? "".concat(topMargin + _constants.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,
@@ -131,10 +132,10 @@ const getLabelsConfig = _ref => {
     type: 'rect',
     z: 20,
     right: '0px',
-    top: '0px',
+    top: "".concat(topMargin, "px"),
     shape: {
       width: yMainLabelSize,
-      height: _constants.CHART_CONFIG.MAIN_HEIGHT
+      height: mainHeight
     },
     silent: true,
     style: {
@@ -144,15 +145,26 @@ const getLabelsConfig = _ref => {
     type: 'rect',
     z: 20,
     left: '0px',
-    top: '0px',
+    top: "".concat(topMargin, "px"),
     shape: {
       width: ySentimentLabelSize,
-      height: _constants.CHART_CONFIG.MAIN_HEIGHT
+      height: mainHeight
     },
     silent: true,
     style: {
       fill: backgroundColor
     }
+  }, {
+    type: 'text',
+    z: 20,
+    left: 'center',
+    top: _constants.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')
+    }
   }];
 };
 exports.getLabelsConfig = getLabelsConfig;

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getLabelsConfig.js","names":["_labsWidgetCommon","require","_chromaJs","_interopRequireDefault","_constants","e","__esModule","default","getLabelsConfig","_ref","isDark","isDesktop","labelCallback","ySentimentLabelSize","CHART_CONFIG","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","yMainLabelSize","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","textColor","colorPalette","white","black","labelBackgroundColor","darkGray","backgroundColor","shadowColor","chroma","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","exports"],"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":[]}
1	+ {"version":3,"file":"getLabelsConfig.js","names":["_labsWidgetCommon","require","_chromaJs","_interopRequireDefault","_constants","e","__esModule","default","getLabelsConfig","_ref","isDark","isDesktop","labelCallback","ySentimentLabelSize","CHART_CONFIG","Y_SENTIMENT_LABEL_DESKTOP_SIZE","Y_SENTIMENT_LABEL_MOBILE_SIZE","yMainLabelSize","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","textColor","colorPalette","white","black","labelBackgroundColor","darkGray","backgroundColor","shadowColor","chroma","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","exports"],"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/main/CrowdViewWidget/components/Chart/chartOptions/getTooltipConfig.js CHANGED Viewed

@@ -4,8 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTooltipConfig = void 0;
+var _labsWidgetCommon = require("@oanda/labs-widget-common");
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _constants = require("../../../constants");
 var _chartUtils = require("../chartUtils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
 const getTooltipConfig = _ref => {
   let {
     bookType,
@@ -16,9 +24,32 @@ const getTooltipConfig = _ref => {
     selectedPriceRef,
     tooltipLinesColor,
     sentimentLongs,
-    sentimentShorts
+    sentimentShorts,
+    isDesktop,
+    isDark,
+    locale
   } = _ref;
-  return {
+  const styles = isDesktop ? {
+    backgroundColor: isDark ? (0, _chromaJs.default)(_labsWidgetCommon.colorPalette.darkGray).alpha(0.95).hex() : (0, _chromaJs.default)(_labsWidgetCommon.colorPalette.darkWhite).alpha(0.95).hex(),
+    shadowColor: _labsWidgetCommon.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 => (0, _chartUtils.getTooltipFormatter)({
       bookType,
@@ -28,7 +59,10 @@ const getTooltipConfig = _ref => {
       params: params,
       selectedPrice: selectedPriceRef.current,
       sentimentLongs,
-      sentimentShorts
+      sentimentShorts,
+      isDesktop,
+      locale,
+      isDark
     }),
     hideDelay: 0,
     axisPointer: {
@@ -53,8 +87,13 @@ const getTooltipConfig = _ref => {
       }
     },
     confine: true,
-    position: point => [point[0] + _constants.CHART_CONFIG.TOOLTIP_OFFSET, point[1] + _constants.CHART_CONFIG.TOOLTIP_OFFSET]
-  };
+    position: point => {
+      if (isDesktop) {
+        return [point[0] + _constants.CHART_CONFIG.TOOLTIP_OFFSET, point[1] + _constants.CHART_CONFIG.TOOLTIP_OFFSET];
+      }
+      return [0, 0];
+    }
+  });
 };
 exports.getTooltipConfig = getTooltipConfig;
 //# sourceMappingURL=getTooltipConfig.js.map

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getTooltipConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getTooltipConfig.js","names":["~~_constants~~","require","_chartUtils","getTooltipConfig","_ref","bookType","bucketWidth","buckets","displayPrecision","labelCallback","selectedPriceRef","tooltipLinesColor","sentimentLongs","sentimentShorts","trigger","formatter","params","getTooltipFormatter","selectedPrice","current","hideDelay","axisPointer","type","axis","lineStyle","color","crossStyle","label","~~padding","lineHeight","~~axisDimension","axisIndex","~~Number","value","~~concat","toFixed","confine","position","point","CHART_CONFIG","TOOLTIP_OFFSET","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getTooltipConfig.ts"],"sourcesContent":["import 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}\n\nexport const getTooltipConfig = ({\n bookType,\n bucketWidth,\n buckets,\n displayPrecision,\n labelCallback,\n selectedPriceRef,\n tooltipLinesColor,\n sentimentLongs,\n sentimentShorts,\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 sentimentLongs,\n sentimentShorts,\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 point[0] + CHART_CONFIG.TOOLTIP_OFFSET,\n point[1] + CHART_CONFIG.TOOLTIP_OFFSET,\n ],\n});\n"],"mappings":";;;;;;~~AAGA~~,IAAAA,~~UAAA~~,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;~~AAeO~~,~~MAAME~~,gBAAgB,GAAGC,IAAA;EAAA,~~IAAC~~;IAC/BC,QAAQ;IACRC,WAAW;IACXC,OAAO;IACPC,gBAAgB;IAChBC,aAAa;IACbC,gBAAgB;IAChBC,iBAAiB;IACjBC,cAAc;IACdC;EACsB,CAAC,~~GAAAT~~,IAAA;~~EAAA~~,~~OAA8B~~;~~IACrDU~~,OAAO,EAAE,MAAe;IACxBC,SAAS,EAAGC,MAAM,IAChB,IAAAC,+BAAmB,EAAC;~~MAClBZ~~,QAAQ;MACRC,WAAW;MACXC,OAAO;MACPE,aAAa;~~MACbO~~,MAAM,EAAEA,MAAmC;MAC3CE,aAAa,~~EAAER~~,gBAAgB,~~CAACS~~,OAAO;~~MACvCP~~,cAAc;MACdC;IACF,CAAC,CAAC;~~IACJO~~,SAAS,EAAE,CAAC;IACZC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAgB;MACtBC,IAAI,EAAE,GAAY;MAClBC,SAAS,EAAE;QACTC,KAAK,~~EAAEd~~;MACT,CAAC;~~MACDe~~,UAAU,EAAE;QACVD,KAAK,~~EAAEd~~;MACT,CAAC;~~MACDgB~~,KAAK,EAAE;~~QACLC~~,OAAO,EAAE,CAAC;~~QACVC~~,UAAU,EAAE,EAAE;~~QACdd~~,SAAS,EAAGC,MAIX,IAAK;UACJ,IAAIA,MAAM,~~CAACc~~,aAAa,KAAK,GAAG,~~IAAId~~,MAAM,~~CAACe~~,SAAS,KAAK,CAAC,EAAE;~~YAC1DrB~~,gBAAgB,~~CAACS~~,OAAO,~~GAAGa~~,MAAM,~~CAAChB~~,MAAM,~~CAACiB~~,KAAK,CAAC;YAC/C,~~WAAAC~~,MAAA,~~CAAWF~~,MAAM,~~CAAChB~~,MAAM,~~CAACiB~~,KAAK,CAAC,~~CAACE~~,OAAO,~~CAAC3B~~,gBAAgB,CAAC;UAC3D;UACA,OAAO,EAAE;QACX;MACF;IACF,CAAC;~~IACD4B~~,OAAO,EAAE,IAAI;IACbC,QAAQ,EAAGC,KAAK,IAAK,~~CACnBA~~,KAAK,CAAC,CAAC,CAAC,GAAGC,uBAAY,CAACC,cAAc,EACtCF,KAAK,CAAC,CAAC,CAAC,GAAGC,uBAAY,CAACC,cAAc;~~EAE1C~~,CAAC;~~AAAA~~,CAAC;AAACC,OAAA,~~CAAAtC~~,gBAAA,GAAAA,gBAAA","ignoreList":[]}
1	+ {"version":3,"file":"getTooltipConfig.js","names":["_labsWidgetCommon","require","_chromaJs","_interopRequireDefault","_constants","_chartUtils","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","getTooltipConfig","_ref","bookType","bucketWidth","buckets","displayPrecision","labelCallback","selectedPriceRef","tooltipLinesColor","sentimentLongs","sentimentShorts","isDesktop","isDark","locale","styles","backgroundColor","chroma","colorPalette","darkGray","alpha","hex","darkWhite","shadowColor","black10","extraCssText","padding","alwaysShowContent","textStyle","fontSize","lineHeight","trigger","formatter","params","getTooltipFormatter","selectedPrice","current","hideDelay","axisPointer","type","axis","lineStyle","color","crossStyle","label","axisDimension","axisIndex","concat","toFixed","confine","position","point","CHART_CONFIG","TOOLTIP_OFFSET","exports"],"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,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAIA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAAoD,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,QAAAH,CAAA,EAAAI,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAP,CAAA,OAAAM,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAR,CAAA,GAAAI,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAX,CAAA,EAAAI,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAf,CAAA,aAAAI,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAD,OAAA,CAAAG,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,IAAAe,eAAA,CAAAnB,CAAA,EAAAI,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAc,yBAAA,GAAAd,MAAA,CAAAe,gBAAA,CAAArB,CAAA,EAAAM,MAAA,CAAAc,yBAAA,CAAAf,CAAA,KAAAF,OAAA,CAAAG,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAgB,cAAA,CAAAtB,CAAA,EAAAI,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAJ,CAAA;AAAA,SAAAmB,gBAAAnB,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAmB,cAAA,CAAAnB,CAAA,MAAAJ,CAAA,GAAAM,MAAA,CAAAgB,cAAA,CAAAtB,CAAA,EAAAI,CAAA,IAAAoB,KAAA,EAAAnB,CAAA,EAAAO,UAAA,MAAAa,YAAA,MAAAC,QAAA,UAAA1B,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAuB,eAAAlB,CAAA,QAAAsB,CAAA,GAAAC,YAAA,CAAAvB,CAAA,uCAAAsB,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAvB,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAwB,MAAA,CAAAC,WAAA,kBAAA9B,CAAA,QAAA2B,CAAA,GAAA3B,CAAA,CAAA+B,IAAA,CAAA1B,CAAA,EAAAD,CAAA,uCAAAuB,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAA5B,CAAA,GAAA6B,MAAA,GAAAC,MAAA,EAAA7B,CAAA;AAkB7C,MAAM8B,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,GACnB,IAAAI,iBAAM,EAACC,8BAAY,CAACC,QAAQ,CAAC,CAACC,KAAK,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,CAAC,GAC/C,IAAAJ,iBAAM,EAACC,8BAAY,CAACI,SAAS,CAAC,CAACF,KAAK,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,CAAC;IACpDE,WAAW,EAAEL,8BAAY,CAACM,OAAO;IACjCC,YAAY,EAAE,aAAa;IAC3BC,OAAO,EAAE,CAAC;IACVC,iBAAiB,EAAE,KAAK;IACxBC,SAAS,EAAE;MACTC,QAAQ,EAAE;IACZ;EACF,CAAC,GACD;IACEb,eAAe,EAAE,aAAa;IAC9BO,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,OAAAjD,aAAA,CAAAA,aAAA,KACKkC,MAAM;IACTgB,OAAO,EAAE,MAAe;IACxBC,SAAS,EAAGC,MAAM,IAChB,IAAAC,+BAAmB,EAAC;MAClB/B,QAAQ;MACRC,WAAW;MACXC,OAAO;MACPE,aAAa;MACb0B,MAAM,EAAEA,MAAmC;MAC3CE,aAAa,EAAE3B,gBAAgB,CAAC4B,OAAO;MACvC1B,cAAc;MACdC,eAAe;MACfC,SAAS;MACTE,MAAM;MACND;IACF,CAAC,CAAC;IACJwB,SAAS,EAAE,CAAC;IACZC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAgB;MACtBC,IAAI,EAAE,GAAY;MAClBC,SAAS,EAAE;QACTC,KAAK,EAAEjC;MACT,CAAC;MACDkC,UAAU,EAAE;QACVD,KAAK,EAAEjC;MACT,CAAC;MACDmC,KAAK,EAAE;QACLlB,OAAO,EAAE,CAAC;QACVI,UAAU,EAAE,EAAE;QACdE,SAAS,EAAGC,MAIX,IAAK;UACJ,IAAIA,MAAM,CAACY,aAAa,KAAK,GAAG,IAAIZ,MAAM,CAACa,SAAS,KAAK,CAAC,EAAE;YAC1DtC,gBAAgB,CAAC4B,OAAO,GAAGpC,MAAM,CAACiC,MAAM,CAAC3C,KAAK,CAAC;YAC/C,WAAAyD,MAAA,CAAW/C,MAAM,CAACiC,MAAM,CAAC3C,KAAK,CAAC,CAAC0D,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,GAAGC,uBAAY,CAACC,cAAc,EACtCF,KAAK,CAAC,CAAC,CAAC,GAAGC,uBAAY,CAACC,cAAc,CACvC;MACH;MACA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IACf;EAAC;AAEL,CAAC;AAACC,OAAA,CAAArD,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getXAxisConfig.js CHANGED Viewed

@@ -8,7 +8,8 @@ var _chartUtils = require("../chartUtils");
 const getXAxisConfig = _ref => {
   let {
     dates,
-    isGreaterThanTwoWeeks
+    isGreaterThanTwoWeeks,
+    locale
   } = _ref;
   const labelsData = (0, _chartUtils.getLabelData)({
     dates,
@@ -17,19 +18,25 @@ const getXAxisConfig = _ref => {
   return [{
     type: 'category',
     id: 'main-xAxis',
-    name: isGreaterThanTwoWeeks ? 'xAxis-greater-than-two-weeks' : 'xAxis-less-than-two-weeks',
     nameTextStyle: {
       fontSize: 0
     },
     axisTick: {
       show: false
     },
+    splitLine: {
+      lineStyle: {
+        opacity: 0.5
+      }
+    },
     axisLabel: {
+      showMaxLabel: false,
       padding: [8, 16, 8, 16],
       margin: 0,
-      formatter: value => (0, _chartUtils.formatXAxisLabel)(value, isGreaterThanTwoWeeks)
+      formatter: value => (0, _chartUtils.formatXAxisLabel)(value, isGreaterThanTwoWeeks, locale)
     },
-    boundaryGap: false
+    boundaryGap: false,
+    z: 2
   }, {
     type: 'category',
     id: 'additional-xAxis',
@@ -47,10 +54,11 @@ const getXAxisConfig = _ref => {
       margin: 24,
       hideOverlap: true,
       customValues: labelsData,
-      formatter: value => (0, _chartUtils.formatXAxisAdditionalLabel)(value, isGreaterThanTwoWeeks)
+      formatter: value => (0, _chartUtils.formatXAxisAdditionalLabel)(value, isGreaterThanTwoWeeks, locale)
     },
     data: dates,
-    boundaryGap: false
+    boundaryGap: false,
+    z: 2
   }];
 };
 exports.getXAxisConfig = getXAxisConfig;

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getXAxisConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getXAxisConfig.js","names":["_chartUtils","require","getXAxisConfig","_ref","dates","isGreaterThanTwoWeeks","labelsData","getLabelData","type","id","~~name","~~nameTextStyle","fontSize","axisTick","show","axisLabel","padding","margin","formatter","value","formatXAxisLabel","boundaryGap","~~gridIndex~~","~~axisLine~~","~~splitLine~~","hideOverlap","customValues","formatXAxisAdditionalLabel","data","exports"],"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}\n\nexport const getXAxisConfig = ({\n dates,\n isGreaterThanTwoWeeks,\n}: GetXAxisConfigParams): XAXisComponentOption[] => {\n const labelsData = getLabelData({\n dates,\n isGreaterThanTwoWeeks,\n });\n\n return [\n {\n type: 'category',\n id: 'main-xAxis',\n ~~name~~: ~~isGreaterThanTwoWeeks~~\n ~~? 'xAxis-greater-than-two-weeks'\n~~ : ~~'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 boundaryGap: false,\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),\n },\n data: dates,\n boundaryGap: false,\n },\n ];\n};\n"],"mappings":";;;;;;AAEA,IAAAA,WAAA,GAAAC,OAAA;~~AAWO~~,MAAMC,cAAc,GAAGC,IAAA,~~IAGsB~~;EAAA,~~IAHrB~~;IAC7BC,KAAK;IACLC;EACoB,CAAC,~~GAAAF~~,IAAA;EACrB,~~MAAMG~~,UAAU,GAAG,IAAAC,wBAAY,EAAC;~~IAC9BH~~,KAAK;IACLC;EACF,CAAC,CAAC;EAEF,OAAO,CACL;~~IACEG~~,IAAI,EAAE,UAAU;IAChBC,EAAE,EAAE,YAAY;IAChBC,~~IAAI,EAAEL,qBAAqB,GACvB,8BAA8B,GAC9B,2BAA2B;IAC/BM,~~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,IACxB,IAAAC,4BAAgB,EAACD,KAAK,~~EAAEd~~,qBAAqB;~~IACjD~~,CAAC;~~IACDgB~~,WAAW,EAAE;~~EACf~~,CAAC,EACD;~~IACEb~~,IAAI,EAAE,UAAU;IAChBC,EAAE,EAAE,kBAAkB;~~IACtBa~~,SAAS,EAAE,CAAC;~~IACZT~~,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;~~IACDS~~,QAAQ,EAAE;~~MACRT~~,IAAI,EAAE;IACR,CAAC;~~IACDU~~,SAAS,EAAE;~~MACTV~~,IAAI,EAAE;IACR,CAAC;~~IACDC~~,SAAS,EAAE;~~MACTE~~,MAAM,EAAE,EAAE;MACVQ,WAAW,EAAE,IAAI;MACjBC,YAAY,~~EAAEpB~~,UAAU;~~MACxBY~~,SAAS,EAAGC,KAAc,IACxB,IAAAQ,sCAA0B,EAACR,KAAK,~~EAAEd~~,qBAAqB;~~IAC3D~~,CAAC;~~IACDuB~~,IAAI,~~EAAExB~~,KAAK;~~IACXiB~~,WAAW,EAAE;~~EACf~~,CAAC,CACF;AACH,CAAC;~~AAACQ~~,OAAA,~~CAAA3B~~,cAAA,GAAAA,cAAA","ignoreList":[]}
1	+ {"version":3,"file":"getXAxisConfig.js","names":["_chartUtils","require","getXAxisConfig","_ref","dates","isGreaterThanTwoWeeks","locale","labelsData","getLabelData","type","id","nameTextStyle","fontSize","axisTick","show","splitLine","lineStyle","opacity","axisLabel","showMaxLabel","padding","margin","formatter","value","formatXAxisLabel","boundaryGap","z","gridIndex","axisLine","hideOverlap","customValues","formatXAxisAdditionalLabel","data","exports"],"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,IAAAA,WAAA,GAAAC,OAAA;AAYO,MAAMC,cAAc,GAAGC,IAAA,IAIsB;EAAA,IAJrB;IAC7BC,KAAK;IACLC,qBAAqB;IACrBC;EACoB,CAAC,GAAAH,IAAA;EACrB,MAAMI,UAAU,GAAG,IAAAC,wBAAY,EAAC;IAC9BJ,KAAK;IACLC;EACF,CAAC,CAAC;EAEF,OAAO,CACL;IACEI,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,IACxB,IAAAC,4BAAgB,EAACD,KAAK,EAAElB,qBAAqB,EAAEC,MAAM;IACzD,CAAC;IACDmB,WAAW,EAAE,KAAK;IAClBC,CAAC,EAAE;EACL,CAAC,EACD;IACEjB,IAAI,EAAE,UAAU;IAChBC,EAAE,EAAE,kBAAkB;IACtBiB,SAAS,EAAE,CAAC;IACZd,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACDc,QAAQ,EAAE;MACRd,IAAI,EAAE;IACR,CAAC;IACDC,SAAS,EAAE;MACTD,IAAI,EAAE;IACR,CAAC;IACDI,SAAS,EAAE;MACTG,MAAM,EAAE,EAAE;MACVQ,WAAW,EAAE,IAAI;MACjBC,YAAY,EAAEvB,UAAU;MACxBe,SAAS,EAAGC,KAAc,IACxB,IAAAQ,sCAA0B,EAACR,KAAK,EAAElB,qBAAqB,EAAEC,MAAM;IACnE,CAAC;IACD0B,IAAI,EAAE5B,KAAK;IACXqB,WAAW,EAAE,KAAK;IAClBC,CAAC,EAAE;EACL,CAAC,CACF;AACH,CAAC;AAACO,OAAA,CAAA/B,cAAA,GAAAA,cAAA","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getYAxisConfig.js CHANGED Viewed

@@ -8,14 +8,21 @@ var _constants = require("../../../constants");
 const getYAxisConfig = _ref => {
   let {
     bucketWidth,
-    displayPrecision
+    displayPrecision,
+    isDesktop
   } = _ref;
   return [{
     type: 'value',
     gridIndex: 0,
     position: 'right',
-    min: val => val.min - bucketWidth * _constants.BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
-    max: val => val.max + bucketWidth * _constants.BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+    min: val => {
+      const adjustedMin = val.min - bucketWidth;
+      return Math.floor(adjustedMin / bucketWidth) * bucketWidth;
+    },
+    max: val => {
+      const adjustedMax = val.max + bucketWidth;
+      return Math.ceil(adjustedMax / bucketWidth) * bucketWidth;
+    },
     axisLine: {
       show: false
     },
@@ -55,7 +62,7 @@ const getYAxisConfig = _ref => {
       margin: 4,
       lineHeight: 20,
       verticalAlignMinLabel: 'bottom',
-      verticalAlignMaxLabel: 'middle',
+      verticalAlignMaxLabel: isDesktop ? 'middle' : 'top',
       customValues: [_constants.CHART_CONFIG.SENTIMENT_MIN, _constants.CHART_CONFIG.SENTIMENT_MAX / 5, _constants.CHART_CONFIG.SENTIMENT_MAX / 2, _constants.CHART_CONFIG.SENTIMENT_MAX * 4 / 5, _constants.CHART_CONFIG.SENTIMENT_MAX],
       formatter: value => "".concat(value, "%")
     },

package/dist/main/CrowdViewWidget/components/Chart/chartOptions/getYAxisConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getYAxisConfig.js","names":["_constants","require","getYAxisConfig","_ref","bucketWidth","displayPrecision","type","gridIndex","position","min","val","~~BUCKET_CONFIG~~","~~PRICE_MARGIN_MULTIPLIER~~","max","axisLine","show","axisTick","splitLine","axisLabel","lineHeight","margin","verticalAlignMinLabel","verticalAlignMaxLabel","formatter","value","toFixed","z","CHART_CONFIG","SENTIMENT_MIN","SENTIMENT_MAX","axisPointer","customValues","concat","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getYAxisConfig.ts"],"sourcesContent":["import type { YAXisComponentOption } from 'echarts';\n\nimport { ~~BUCKET_CONFIG,~~ CHART_CONFIG } from '../../../constants';\n\ninterface GetYAxisConfigParams {\n bucketWidth: number;\n displayPrecision: number;\n}\n\nexport const getYAxisConfig = ({\n bucketWidth,\n displayPrecision,\n}: GetYAxisConfigParams): YAXisComponentOption[] => [\n {\n type: 'value',\n gridIndex: 0,\n position: 'right',\n min: (val: { min: number }) ~~=>\~~n val.min - bucketWidth * ~~BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER~~,\n max: (val: { max: number }) ~~=>\~~n val.max + bucketWidth * ~~BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER~~,\n axisLine: { show: false },\n axisTick: { show: false },\n splitLine: { show: false },\n axisLabel: {\n lineHeight: 20,\n margin: 4,\n verticalAlignMinLabel: 'bottom',\n verticalAlignMaxLabel: 'top',\n formatter: (value: number) => value.toFixed(displayPrecision),\n },\n z: 30,\n },\n {\n type: 'value',\n gridIndex: 1,\n position: 'left',\n min: CHART_CONFIG.SENTIMENT_MIN,\n max: CHART_CONFIG.SENTIMENT_MAX,\n axisLine: { show: false },\n axisTick: { show: false },\n axisPointer: { show: false },\n splitLine: { show: false },\n axisLabel: {\n margin: 4,\n lineHeight: 20,\n verticalAlignMinLabel: 'bottom',\n verticalAlignMaxLabel: 'middle',\n customValues: [\n CHART_CONFIG.SENTIMENT_MIN,\n CHART_CONFIG.SENTIMENT_MAX / 5,\n CHART_CONFIG.SENTIMENT_MAX / 2,\n (CHART_CONFIG.SENTIMENT_MAX * 4) / 5,\n CHART_CONFIG.SENTIMENT_MAX,\n ],\n formatter: (value: number) => `${value}%`,\n },\n z: 30,\n },\n];\n"],"mappings":";;;;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;~~AAOO~~,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;IAC7BC,WAAW;IACXC;EACoB,CAAC,~~GAAAF~~,IAAA;EAAA,OAA6B,CAClD;~~IACEG~~,IAAI,EAAE,OAAO;IACbC,SAAS,EAAE,CAAC;IACZC,QAAQ,EAAE,OAAO;IACjBC,GAAG,EAAGC,GAAoB,~~IACxBA~~,GAAG,CAACD,GAAG,~~GAAGL~~,WAAW,~~GAAGO~~,~~wBAAa~~,CAACC,~~uBAAuB~~;~~IAC/DC~~,GAAG,~~EAAGH~~,GAAoB,~~IACxBA~~,GAAG,~~CAACG~~,GAAG,~~GAAGT~~,WAAW,~~GAAGO~~,~~wBAAa~~,~~CAACC~~,~~uBAAuB~~;~~IAC/DE~~,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAM,CAAC;IACzBC,QAAQ,EAAE;MAAED,IAAI,EAAE;IAAM,CAAC;IACzBE,SAAS,EAAE;MAAEF,IAAI,EAAE;IAAM,CAAC;IAC1BG,SAAS,EAAE;MACTC,UAAU,EAAE,EAAE;MACdC,MAAM,EAAE,CAAC;MACTC,qBAAqB,EAAE,QAAQ;MAC/BC,qBAAqB,EAAE,KAAK;MAC5BC,SAAS,EAAGC,KAAa,IAAKA,KAAK,CAACC,OAAO,~~CAACpB~~,gBAAgB;IAC9D,CAAC;~~IACDqB~~,CAAC,EAAE;EACL,CAAC,EACD;~~IACEpB~~,IAAI,EAAE,OAAO;IACbC,SAAS,EAAE,CAAC;IACZC,QAAQ,EAAE,MAAM;IAChBC,GAAG,~~EAAEkB~~,uBAAY,CAACC,aAAa;IAC/Bf,GAAG,~~EAAEc~~,uBAAY,CAACE,aAAa;IAC/Bf,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAM,CAAC;IACzBC,QAAQ,EAAE;MAAED,IAAI,EAAE;IAAM,CAAC;IACzBe,WAAW,EAAE;MAAEf,IAAI,EAAE;IAAM,CAAC;IAC5BE,SAAS,EAAE;MAAEF,IAAI,EAAE;IAAM,CAAC;IAC1BG,SAAS,EAAE;MACTE,MAAM,EAAE,CAAC;MACTD,UAAU,EAAE,EAAE;MACdE,qBAAqB,EAAE,QAAQ;MAC/BC,qBAAqB,~~EAAE~~,QAAQ;~~MAC/BS~~,YAAY,EAAE,CACZJ,uBAAY,CAACC,aAAa,EAC1BD,uBAAY,CAACE,aAAa,GAAG,CAAC,EAC9BF,uBAAY,CAACE,aAAa,GAAG,CAAC,EAC7BF,uBAAY,CAACE,aAAa,GAAG,CAAC,GAAI,CAAC,EACpCF,uBAAY,CAACE,aAAa,CAC3B;MACDN,SAAS,EAAGC,KAAa,OAAAQ,MAAA,CAAQR,KAAK;IACxC,CAAC;IACDE,CAAC,EAAE;EACL,CAAC,CACF;AAAA;AAACO,OAAA,~~CAAA/B~~,cAAA,GAAAA,cAAA","ignoreList":[]}
1	+ {"version":3,"file":"getYAxisConfig.js","names":["_constants","require","getYAxisConfig","_ref","bucketWidth","displayPrecision","isDesktop","type","gridIndex","position","min","val","adjustedMin","Math","floor","max","adjustedMax","ceil","axisLine","show","axisTick","splitLine","axisLabel","lineHeight","margin","verticalAlignMinLabel","verticalAlignMaxLabel","formatter","value","toFixed","z","CHART_CONFIG","SENTIMENT_MIN","SENTIMENT_MAX","axisPointer","customValues","concat","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartOptions/getYAxisConfig.ts"],"sourcesContent":["import type { YAXisComponentOption } from 'echarts';\n\nimport { CHART_CONFIG } from '../../../constants';\n\ninterface GetYAxisConfigParams {\n bucketWidth: number;\n displayPrecision: number;\n isDesktop: boolean;\n}\n\nexport const getYAxisConfig = ({\n bucketWidth,\n displayPrecision,\n isDesktop,\n}: GetYAxisConfigParams): YAXisComponentOption[] => [\n {\n type: 'value',\n gridIndex: 0,\n position: 'right',\n min: (val: { min: number }) => {\n const adjustedMin = val.min - bucketWidth;\n return Math.floor(adjustedMin / bucketWidth) * bucketWidth;\n },\n max: (val: { max: number }) => {\n const adjustedMax = val.max + bucketWidth;\n return Math.ceil(adjustedMax / bucketWidth) * bucketWidth;\n },\n axisLine: { show: false },\n axisTick: { show: false },\n splitLine: { show: false },\n axisLabel: {\n lineHeight: 20,\n margin: 4,\n verticalAlignMinLabel: 'bottom',\n verticalAlignMaxLabel: 'top',\n formatter: (value: number) => value.toFixed(displayPrecision),\n },\n z: 30,\n },\n {\n type: 'value',\n gridIndex: 1,\n position: 'left',\n min: CHART_CONFIG.SENTIMENT_MIN,\n max: CHART_CONFIG.SENTIMENT_MAX,\n axisLine: { show: false },\n axisTick: { show: false },\n axisPointer: { show: false },\n splitLine: { show: false },\n axisLabel: {\n margin: 4,\n lineHeight: 20,\n verticalAlignMinLabel: 'bottom',\n verticalAlignMaxLabel: isDesktop ? 'middle' : 'top',\n customValues: [\n CHART_CONFIG.SENTIMENT_MIN,\n CHART_CONFIG.SENTIMENT_MAX / 5,\n CHART_CONFIG.SENTIMENT_MAX / 2,\n (CHART_CONFIG.SENTIMENT_MAX * 4) / 5,\n CHART_CONFIG.SENTIMENT_MAX,\n ],\n formatter: (value: number) => `${value}%`,\n },\n z: 30,\n },\n];\n"],"mappings":";;;;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAQO,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;IAC7BC,WAAW;IACXC,gBAAgB;IAChBC;EACoB,CAAC,GAAAH,IAAA;EAAA,OAA6B,CAClD;IACEI,IAAI,EAAE,OAAO;IACbC,SAAS,EAAE,CAAC;IACZC,QAAQ,EAAE,OAAO;IACjBC,GAAG,EAAGC,GAAoB,IAAK;MAC7B,MAAMC,WAAW,GAAGD,GAAG,CAACD,GAAG,GAAGN,WAAW;MACzC,OAAOS,IAAI,CAACC,KAAK,CAACF,WAAW,GAAGR,WAAW,CAAC,GAAGA,WAAW;IAC5D,CAAC;IACDW,GAAG,EAAGJ,GAAoB,IAAK;MAC7B,MAAMK,WAAW,GAAGL,GAAG,CAACI,GAAG,GAAGX,WAAW;MACzC,OAAOS,IAAI,CAACI,IAAI,CAACD,WAAW,GAAGZ,WAAW,CAAC,GAAGA,WAAW;IAC3D,CAAC;IACDc,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAM,CAAC;IACzBC,QAAQ,EAAE;MAAED,IAAI,EAAE;IAAM,CAAC;IACzBE,SAAS,EAAE;MAAEF,IAAI,EAAE;IAAM,CAAC;IAC1BG,SAAS,EAAE;MACTC,UAAU,EAAE,EAAE;MACdC,MAAM,EAAE,CAAC;MACTC,qBAAqB,EAAE,QAAQ;MAC/BC,qBAAqB,EAAE,KAAK;MAC5BC,SAAS,EAAGC,KAAa,IAAKA,KAAK,CAACC,OAAO,CAACxB,gBAAgB;IAC9D,CAAC;IACDyB,CAAC,EAAE;EACL,CAAC,EACD;IACEvB,IAAI,EAAE,OAAO;IACbC,SAAS,EAAE,CAAC;IACZC,QAAQ,EAAE,MAAM;IAChBC,GAAG,EAAEqB,uBAAY,CAACC,aAAa;IAC/BjB,GAAG,EAAEgB,uBAAY,CAACE,aAAa;IAC/Bf,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAM,CAAC;IACzBC,QAAQ,EAAE;MAAED,IAAI,EAAE;IAAM,CAAC;IACzBe,WAAW,EAAE;MAAEf,IAAI,EAAE;IAAM,CAAC;IAC5BE,SAAS,EAAE;MAAEF,IAAI,EAAE;IAAM,CAAC;IAC1BG,SAAS,EAAE;MACTE,MAAM,EAAE,CAAC;MACTD,UAAU,EAAE,EAAE;MACdE,qBAAqB,EAAE,QAAQ;MAC/BC,qBAAqB,EAAEpB,SAAS,GAAG,QAAQ,GAAG,KAAK;MACnD6B,YAAY,EAAE,CACZJ,uBAAY,CAACC,aAAa,EAC1BD,uBAAY,CAACE,aAAa,GAAG,CAAC,EAC9BF,uBAAY,CAACE,aAAa,GAAG,CAAC,EAC7BF,uBAAY,CAACE,aAAa,GAAG,CAAC,GAAI,CAAC,EACpCF,uBAAY,CAACE,aAAa,CAC3B;MACDN,SAAS,EAAGC,KAAa,OAAAQ,MAAA,CAAQR,KAAK;IACxC,CAAC;IACDE,CAAC,EAAE;EACL,CAAC,CACF;AAAA;AAACO,OAAA,CAAAnC,cAAA,GAAAA,cAAA","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel.js CHANGED Viewed

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatXAxisAdditionalLabel = void 0;
-const formatXAxisAdditionalLabel = (value, isGreaterThanTwoWeeks) => {
+const formatXAxisAdditionalLabel = (value, isGreaterThanTwoWeeks, locale) => {
   const date = new Date(value);
   if (isNaN(date.getTime())) {
     return '';
   }
-  return "".concat(date.toLocaleDateString(undefined, {
+  return "".concat(date.toLocaleDateString(locale, {
     month: isGreaterThanTwoWeeks ? 'short' : 'long',
     day: isGreaterThanTwoWeeks ? 'numeric' : undefined
   }));

package/dist/main/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"formatXAxisAdditionalLabel.js","names":["formatXAxisAdditionalLabel","value","isGreaterThanTwoWeeks","date","Date","isNaN","getTime","concat","toLocaleDateString","~~undefined~~","~~month~~","~~day~~","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel.ts"],"sourcesContent":["export const formatXAxisAdditionalLabel = (\n value: unknown,\n isGreaterThanTwoWeeks: boolean\n) => {\n const date = new Date(value as string);\n if (isNaN(date.getTime())) {\n return '';\n }\n return `${date.toLocaleDateString(~~undefined~~, {\n month: isGreaterThanTwoWeeks ? 'short' : 'long',\n day: isGreaterThanTwoWeeks ? 'numeric' : undefined,\n })}`;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,0BAA0B,GAAGA,CACxCC,KAAc,EACdC,qBAA8B,~~KAC3B~~;EACH,MAAMC,IAAI,GAAG,IAAIC,IAAI,~~CAACH~~,KAAe,CAAC;EACtC,~~IAAII~~,KAAK,CAACF,IAAI,CAACG,OAAO,CAAC,CAAC,CAAC,EAAE;IACzB,OAAO,EAAE;EACX;EACA,UAAAC,MAAA,CAAUJ,IAAI,CAACK,kBAAkB,~~CAACC~~,~~SAAS~~,EAAE;~~IAC3CC~~,KAAK,EAAER,qBAAqB,GAAG,OAAO,GAAG,MAAM;IAC/CS,GAAG,EAAET,qBAAqB,GAAG,SAAS,~~GAAGO~~;EAC3C,CAAC,CAAC;AACJ,CAAC;~~AAACG~~,OAAA,~~CAAAZ~~,0BAAA,GAAAA,0BAAA","ignoreList":[]}
1	+ {"version":3,"file":"formatXAxisAdditionalLabel.js","names":["formatXAxisAdditionalLabel","value","isGreaterThanTwoWeeks","locale","date","Date","isNaN","getTime","concat","toLocaleDateString","month","day","undefined","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel.ts"],"sourcesContent":["export const formatXAxisAdditionalLabel = (\n value: unknown,\n isGreaterThanTwoWeeks: boolean,\n locale: string\n) => {\n const date = new Date(value as string);\n if (isNaN(date.getTime())) {\n return '';\n }\n return `${date.toLocaleDateString(locale, {\n month: isGreaterThanTwoWeeks ? 'short' : 'long',\n day: isGreaterThanTwoWeeks ? 'numeric' : undefined,\n })}`;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,0BAA0B,GAAGA,CACxCC,KAAc,EACdC,qBAA8B,EAC9BC,MAAc,KACX;EACH,MAAMC,IAAI,GAAG,IAAIC,IAAI,CAACJ,KAAe,CAAC;EACtC,IAAIK,KAAK,CAACF,IAAI,CAACG,OAAO,CAAC,CAAC,CAAC,EAAE;IACzB,OAAO,EAAE;EACX;EACA,UAAAC,MAAA,CAAUJ,IAAI,CAACK,kBAAkB,CAACN,MAAM,EAAE;IACxCO,KAAK,EAAER,qBAAqB,GAAG,OAAO,GAAG,MAAM;IAC/CS,GAAG,EAAET,qBAAqB,GAAG,SAAS,GAAGU;EAC3C,CAAC,CAAC;AACJ,CAAC;AAACC,OAAA,CAAAb,0BAAA,GAAAA,0BAAA","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel.js CHANGED Viewed

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatXAxisLabel = void 0;
 var _constants = require("../../../constants");
-const formatXAxisLabel = (value, isGreaterThanTwoWeeks) => {
+const formatXAxisLabel = (value, isGreaterThanTwoWeeks, locale) => {
   const date = new Date(value);
-  return isGreaterThanTwoWeeks ? "".concat(date.toLocaleTimeString(undefined, {
-    hour: '2-digit',
-    minute: '2-digit'
-  })) : "".concat(_constants.CHART_CONFIG.X_AXIS_DATE_PADDING).concat(date.toLocaleDateString(undefined, {
+  return isGreaterThanTwoWeeks ? "".concat(date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false
+  })) : "".concat(_constants.CHART_CONFIG.X_AXIS_DATE_PADDING).concat(date.toLocaleDateString(locale, {
     day: 'numeric'
   })).concat(_constants.CHART_CONFIG.X_AXIS_DATE_PADDING);
 };

package/dist/main/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"formatXAxisLabel.js","names":["_constants","require","formatXAxisLabel","value","isGreaterThanTwoWeeks","date","Date","concat","toLocaleTimeString","~~undefined~~","~~hour~~","~~minute~~","CHART_CONFIG","X_AXIS_DATE_PADDING","toLocaleDateString","day","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel.ts"],"sourcesContent":["import { CHART_CONFIG } from '../../../constants';\n\nexport const formatXAxisLabel = (\n value: unknown,\n isGreaterThanTwoWeeks: boolean\n) => {\n const date = new Date(value as string);\n return isGreaterThanTwoWeeks\n ? `${date.toLocaleTimeString(~~undefined~~, {\n hour: '~~2-digit~~',\n minute: '2-digit',\n })}`\n : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(~~undefined~~, {\n day: 'numeric',\n })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEO,MAAMC,gBAAgB,GAAGA,CAC9BC,KAAc,EACdC,qBAA8B,~~KAC3B~~;EACH,MAAMC,IAAI,GAAG,IAAIC,IAAI,~~CAACH~~,KAAe,CAAC;EACtC,OAAOC,qBAAqB,~~MAAAG~~,MAAA,CACrBF,IAAI,CAACG,kBAAkB,~~CAACC~~,~~SAAS~~,EAAE;~~IACpCC~~,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC,CAAC,OAAAJ,MAAA,CACCK,uBAAY,CAACC,mBAAmB,EAAAN,MAAA,CAAGF,IAAI,CAACS,kBAAkB,~~CAACL~~,~~SAAS~~,EAAE;~~IACvEM~~,GAAG,EAAE;EACP,CAAC,CAAC,EAAAR,MAAA,CAAGK,uBAAY,CAACC,mBAAmB,CAAE;AAC7C,CAAC;AAACG,OAAA,~~CAAAd~~,gBAAA,GAAAA,gBAAA","ignoreList":[]}
1	+ {"version":3,"file":"formatXAxisLabel.js","names":["_constants","require","formatXAxisLabel","value","isGreaterThanTwoWeeks","locale","date","Date","concat","toLocaleTimeString","hour","minute","hour12","CHART_CONFIG","X_AXIS_DATE_PADDING","toLocaleDateString","day","exports"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel.ts"],"sourcesContent":["import { CHART_CONFIG } from '../../../constants';\n\nexport const formatXAxisLabel = (\n value: unknown,\n isGreaterThanTwoWeeks: boolean,\n locale: string\n) => {\n const date = new Date(value as string);\n return isGreaterThanTwoWeeks\n ? `${date.toLocaleTimeString(locale, {\n hour: 'numeric',\n minute: '2-digit',\n hour12: false,\n })}`\n : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(locale, {\n day: 'numeric',\n })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEO,MAAMC,gBAAgB,GAAGA,CAC9BC,KAAc,EACdC,qBAA8B,EAC9BC,MAAc,KACX;EACH,MAAMC,IAAI,GAAG,IAAIC,IAAI,CAACJ,KAAe,CAAC;EACtC,OAAOC,qBAAqB,MAAAI,MAAA,CACrBF,IAAI,CAACG,kBAAkB,CAACJ,MAAM,EAAE;IACjCK,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE;EACV,CAAC,CAAC,OAAAJ,MAAA,CACCK,uBAAY,CAACC,mBAAmB,EAAAN,MAAA,CAAGF,IAAI,CAACS,kBAAkB,CAACV,MAAM,EAAE;IACpEW,GAAG,EAAE;EACP,CAAC,CAAC,EAAAR,MAAA,CAAGK,uBAAY,CAACC,mBAAmB,CAAE;AAC7C,CAAC;AAACG,OAAA,CAAAf,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/chartUtils/getTooltipFormatter.js CHANGED Viewed

@@ -4,16 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTooltipFormatter = void 0;
+var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _graphql = require("../../../../gql/types/graphql");
 const DATE_FORMAT_OPTIONS = {
-  hour: '2-digit',
-  minute: '2-digit',
-  year: 'numeric',
   day: 'numeric',
   month: 'numeric',
-  timeZoneName: 'short'
+  year: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  hour12: false,
+  timeZoneName: 'shortOffset'
 };
 const SENTIMENT_DISPLAY_PRECISION = 2;
+const TOOLTIP_STYLES = {
+  MOBILE_COLUMN_WIDTH: '33.3%',
+  PADDING_BOTTOM: '4px',
+  FULL_WIDTH: '100%'
+};
 const calculateBucketDisplayPrecision = bucketWidth => {
   var _bucketWidth$toString;
   return ((_bucketWidth$toString = bucketWidth.toString().split('.')[1]) === null || _bucketWidth$toString === void 0 ? void 0 : _bucketWidth$toString.length) || 0;
@@ -37,7 +44,12 @@ const getSentimentOverbalanceLabel = (sentiment, bookType) => {
 };
 const formatCandleData = (candleData, labelCallback) => {
   const [, open, close, low, high] = candleData;
-  return "<p><b>".concat(labelCallback('candle'), ":</b></p>\n<p>").concat(labelCallback('open_price'), ": ").concat(open, " </p>\n<p>").concat(labelCallback('close_price'), ": ").concat(close, " </p>\n<p>").concat(labelCallback('low'), ": ").concat(low, " </p>\n<p>").concat(labelCallback('high'), ": ").concat(high, " </p>\n");
+  const candleLabel = labelCallback('candle');
+  const openLabel = labelCallback('open');
+  const closeLabel = labelCallback('close');
+  const lowLabel = labelCallback('low');
+  const highLabel = labelCallback('high');
+  return "<div><b>".concat(candleLabel, ":</b></div>\n<div>").concat(openLabel, ": ").concat(open, " </div>\n<div>").concat(closeLabel, ": ").concat(close, " </div>\n<div>").concat(lowLabel, ": ").concat(low, " </div>\n<div>").concat(highLabel, ": ").concat(high, " </div>\n");
 };
 const formatBookData = _ref => {
   let {
@@ -45,17 +57,18 @@ const formatBookData = _ref => {
     bucketWidth,
     bucketDisplayPrecision,
     bookType,
-    labelCallback
+    labelCallback,
+    isDesktop
   } = _ref;
-  const bookLabelKey = bookType === _graphql.BookType.Order ? 'orders' : 'positions';
+  const bookLabelKey = bookType === _graphql.BookType.Order ? 'orders' : 'trades';
   const priceRangeStart = matchedBucket.price.toFixed(bucketDisplayPrecision);
   const priceRangeEnd = (matchedBucket.price + bucketWidth).toFixed(bucketDisplayPrecision);
   const sentimentLabel = getSentimentOverbalanceLabel(matchedBucket.sentiment, bookType);
-  const sentimentValue = Math.abs(matchedBucket.sentiment).toFixed(bucketDisplayPrecision);
-  return "<br /><p><b>".concat(labelCallback(bookLabelKey), ":</b></p>\n<p>").concat(labelCallback('price_range'), ": ").concat(priceRangeStart, " - ").concat(priceRangeEnd, " </p>\n<p>").concat(labelCallback(sentimentLabel), ": ").concat(sentimentValue, "% </p>");
+  const sentimentValue = Math.abs(matchedBucket.sentiment);
+  return isDesktop ? "<div><b>".concat(labelCallback(bookLabelKey), ":</b></div>\n<div>").concat(labelCallback('price_range'), ": ").concat(priceRangeStart, " - ").concat(priceRangeEnd, " </div>\n<div>").concat(labelCallback(sentimentLabel), ": ").concat(sentimentValue, "% </div>") : "<div><b>".concat(labelCallback(bookLabelKey), ":</b></div>\n<div>").concat(labelCallback('price_range'), ":</div>\n<div>").concat(priceRangeStart, " - ").concat(priceRangeEnd, " </div>\n<div>").concat(labelCallback(sentimentLabel), ":</div>\n<div>").concat(sentimentValue, "% </div>");
 };
 const formatSentimentData = (sentimentLong, sentimentShort, labelCallback) => {
-  return "<br /><p><b>".concat(labelCallback('sentiment'), ":</b></p>\n<p>").concat(labelCallback('long'), ": ").concat(sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION), "% </p>\n<p>").concat(labelCallback('short'), ": ").concat(sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION), "% </p>");
+  return "<div><b>".concat(labelCallback('sentiment'), ":</b></div>\n<div>").concat(labelCallback('long'), ": ").concat(sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION), "% </div>\n<div>").concat(labelCallback('short'), ": ").concat(sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION), "% </div>");
 };
 const hasValidCandleData = candleData => !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];
 const hasValidSentimentData = (sentimentLong, sentimentShort) => sentimentLong !== null && sentimentShort !== null;
@@ -80,7 +93,10 @@ const getTooltipFormatter = _ref3 => {
     bookType,
     labelCallback,
     sentimentLongs,
-    sentimentShorts
+    sentimentShorts,
+    isDesktop,
+    locale,
+    isDark
   } = _ref3;
   if (!params || !Array.isArray(params) || params.length === 0) {
     return '';
@@ -104,17 +120,59 @@ const getTooltipFormatter = _ref3 => {
   if (!showCandles && !matchedBucket) {
     return '';
   }
-  const timeFormatted = time.toLocaleString(undefined, DATE_FORMAT_OPTIONS);
+  const timeFormatted = time.toLocaleString(locale, DATE_FORMAT_OPTIONS).replace(/\//g, '.');
   const candleSection = showCandles ? formatCandleData(candleData, labelCallback) : '';
   const bookSection = matchedBucket ? formatBookData({
     matchedBucket,
     bucketWidth,
     bucketDisplayPrecision,
     bookType,
-    labelCallback
+    labelCallback,
+    isDesktop
   }) : '';
   const sentimentSection = showSentiment && sentimentLong && sentimentShort ? formatSentimentData(sentimentLong, sentimentShort, labelCallback) : '';
-  return "<p>".concat(timeFormatted, "</p><br />\n").concat(candleSection, "\n").concat(bookSection, "\n").concat(sentimentSection);
+  if (isDesktop) {
+    return buildDesktopTooltip({
+      timeFormatted,
+      candleSection,
+      sentimentSection,
+      bookSection,
+      hasMatchedBucket: !!matchedBucket
+    });
+  }
+  return buildMobileTooltip({
+    timeFormatted,
+    candleSection,
+    sentimentSection,
+    bookSection,
+    isDark
+  });
 };
 exports.getTooltipFormatter = getTooltipFormatter;
+const buildDesktopTooltip = _ref4 => {
+  let {
+    timeFormatted,
+    candleSection,
+    sentimentSection,
+    bookSection,
+    hasMatchedBucket
+  } = _ref4;
+  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
+  const sentimentPadding = hasMatchedBucket ? padding : '0px';
+  return "<div style=\"padding-bottom: ".concat(padding, ";\">").concat(timeFormatted, "</div>\n<div style=\"padding-bottom: ").concat(padding, ";\">").concat(candleSection, "</div>\n<div style=\"padding-bottom: ").concat(sentimentPadding, ";\">").concat(sentimentSection, "</div>\n<div>").concat(bookSection, "</div>\n");
+};
+const buildMobileTooltip = _ref5 => {
+  let {
+    timeFormatted,
+    candleSection,
+    sentimentSection,
+    bookSection,
+    isDark
+  } = _ref5;
+  const backgroundColor = isDark ? _labsWidgetCommon.colorPalette.black : _labsWidgetCommon.colorPalette.white;
+  const columnWidth = TOOLTIP_STYLES.MOBILE_COLUMN_WIDTH;
+  const fullWidth = TOOLTIP_STYLES.FULL_WIDTH;
+  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
+  return "<div style=\"width: ".concat(fullWidth, "; background-color: ").concat(backgroundColor, ";\">\n  <div style=\"padding-bottom: ").concat(padding, ";\">").concat(timeFormatted, "</div>\n  <div style=\"width: ").concat(fullWidth, "; display: flex; justify-content: space-between;\">\n  <div style=\"width: ").concat(columnWidth, ";\">\n").concat(candleSection, "\n</div>\n<div style=\"width: ").concat(columnWidth, ";\">\n").concat(sentimentSection, "\n</div>\n<div style=\"width: ").concat(columnWidth, ";\">\n").concat(bookSection, "\n</div>\n</div>\n</div>");
+};
 //# sourceMappingURL=getTooltipFormatter.js.map