@oanda/labs-currency-power-balance-widget 1.0.29 → 1.0.31

package/CHANGELOG.md

@@ -3,6 +3,258 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.31 (2024-02-28)
+
+
+
+## 1.0.91 (2024-02-23)
+
+
+
+## 1.0.90 (2024-02-23)
+
+
+
+## 1.0.89 (2024-02-21)
+
+
+
+## 1.0.88 (2024-02-21)
+
+
+
+## 1.0.87 (2024-02-20)
+
+
+
+## 1.0.86 (2024-02-20)
+
+
+
+## 1.0.85 (2024-02-13)
+
+
+
+## 1.0.84 (2024-02-13)
+
+
+
+## 1.0.83 (2024-02-09)
+
+
+
+## 1.0.82 (2024-02-05)
+
+
+
+## 1.0.81 (2024-02-05)
+
+
+
+## 1.0.80 (2024-02-05)
+
+
+
+## 1.0.79 (2024-02-05)
+
+
+
+## 1.0.78 (2024-01-30)
+
+
+
+## 1.0.77 (2024-01-25)
+
+
+
+## 1.0.76 (2024-01-25)
+
+
+
+## 1.0.75 (2024-01-22)
+
+
+
+## 1.0.74 (2024-01-22)
+
+
+
+## 1.0.73 (2024-01-22)
+
+
+
+## 1.0.72 (2024-01-19)
+
+
+
+## 1.0.71 (2024-01-18)
+
+
+
+## 1.0.70 (2024-01-17)
+
+
+
+## 1.0.69 (2024-01-17)
+
+
+
+## 1.0.68 (2024-01-15)
+
+
+
+## 1.0.67 (2024-01-15)
+
+
+
+## 1.0.66 (2024-01-12)
+
+
+
+## 1.0.65 (2024-01-11)
+
+
+
+## 1.0.64 (2024-01-11)
+
+
+
+## 1.0.63 (2024-01-11)
+
+
+
+## 1.0.62 (2024-01-10)
+
+**Note:** Version bump only for package @oanda/labs-currency-power-balance-widget
+
+
+
+
+
+## 1.0.30 (2024-02-23)
+
+
+
+## 1.0.90 (2024-02-23)
+
+
+
+## 1.0.89 (2024-02-21)
+
+
+
+## 1.0.88 (2024-02-21)
+
+
+
+## 1.0.87 (2024-02-20)
+
+
+
+## 1.0.86 (2024-02-20)
+
+
+
+## 1.0.85 (2024-02-13)
+
+
+
+## 1.0.84 (2024-02-13)
+
+
+
+## 1.0.83 (2024-02-09)
+
+
+
+## 1.0.82 (2024-02-05)
+
+
+
+## 1.0.81 (2024-02-05)
+
+
+
+## 1.0.80 (2024-02-05)
+
+
+
+## 1.0.79 (2024-02-05)
+
+
+
+## 1.0.78 (2024-01-30)
+
+
+
+## 1.0.77 (2024-01-25)
+
+
+
+## 1.0.76 (2024-01-25)
+
+
+
+## 1.0.75 (2024-01-22)
+
+
+
+## 1.0.74 (2024-01-22)
+
+
+
+## 1.0.73 (2024-01-22)
+
+
+
+## 1.0.72 (2024-01-19)
+
+
+
+## 1.0.71 (2024-01-18)
+
+
+
+## 1.0.70 (2024-01-17)
+
+
+
+## 1.0.69 (2024-01-17)
+
+
+
+## 1.0.68 (2024-01-15)
+
+
+
+## 1.0.67 (2024-01-15)
+
+
+
+## 1.0.66 (2024-01-12)
+
+
+
+## 1.0.65 (2024-01-11)
+
+
+
+## 1.0.64 (2024-01-11)
+
+
+
+## 1.0.63 (2024-01-11)
+
+
+
+## 1.0.62 (2024-01-10)
+
+**Note:** Version bump only for package @oanda/labs-currency-power-balance-widget
+
+
+
+
+
 ## 1.0.29 (2024-02-23)
 
 

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Y_LABEL_SIZE_MOBILE = exports.Y_LABEL_SIZE = exports.X_LABEL_SIZE_MOBILE = exports.X_LABEL_SIZE = exports.VERTICAL_LINE_COUNT = exports.TOOLTIP_LINE_COLOR_CONFIG = exports.LEGEND_HEIGHT_MOBILE = exports.LEGEND_HEIGHT = exports.COLOR_CONFIG = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
+exports.Y_LABEL_SIZE_MOBILE = exports.Y_LABEL_SIZE = exports.X_LABEL_SIZE_MOBILE = exports.X_LABEL_SIZE = exports.VERTICAL_LINE_COUNT = exports.TOOLTIP_LINE_COLOR_CONFIG = exports.LEGEND_HEIGHT_MOBILE = exports.LEGEND_HEIGHT = exports.COLOR_CONFIG = exports.CHART_WIDTH = exports.CHART_HEIGHT = exports.CANDLE_NUMBER_HOUR = exports.CANDLE_MINUTE = void 0;
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 const X_LABEL_SIZE = exports.X_LABEL_SIZE = 90;
 const X_LABEL_SIZE_MOBILE = exports.X_LABEL_SIZE_MOBILE = 110;
@@ -14,6 +14,8 @@ const CHART_HEIGHT = exports.CHART_HEIGHT = 425;
 const LEGEND_HEIGHT = exports.LEGEND_HEIGHT = 50;
 const LEGEND_HEIGHT_MOBILE = exports.LEGEND_HEIGHT_MOBILE = 70;
 const VERTICAL_LINE_COUNT = exports.VERTICAL_LINE_COUNT = 10;
+const CANDLE_NUMBER_HOUR = exports.CANDLE_NUMBER_HOUR = 12;
+const CANDLE_MINUTE = exports.CANDLE_MINUTE = 5;
 const COLOR_CONFIG = exports.COLOR_CONFIG = {
   USD: _labsWidgetCommon.colorPalette.greenLight,
   EUR: _labsWidgetCommon.colorPalette.turquoiseLight,

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["_labsWidgetCommon","require","X_LABEL_SIZE","exports","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","COLOR_CONFIG","USD","colorPalette","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreen75Lighter","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\n\nconst COLOR_CONFIG: Record<string, string> = {\n  USD: colorPalette.greenLight,\n  EUR: colorPalette.turquoiseLight,\n  GBP: colorPalette.violetLight,\n  JPY: colorPalette.raspberryLight,\n  CHF: colorPalette.bottleGreen75Lighter,\n  AUD: colorPalette.orange,\n  CAD: colorPalette.midnight75Lighter,\n  NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n  DARK: colorPalette.orange,\n  LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  CHART_WIDTH,\n  CHART_HEIGHT,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  VERTICAL_LINE_COUNT,\n  COLOR_CONFIG,\n  TOOLTIP_LINE_COLOR_CONFIG,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEA,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,mBAAmB,GAAAD,OAAA,CAAAC,mBAAA,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAAF,OAAA,CAAAE,mBAAA,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAAJ,OAAA,CAAAI,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAL,OAAA,CAAAK,YAAA,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAAN,OAAA,CAAAM,aAAA,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAG,EAAE;AAE9B,MAAMC,YAAoC,GAAAT,OAAA,CAAAS,YAAA,GAAG;EAC3CC,GAAG,EAAEC,8BAAY,CAACC,UAAU;EAC5BC,GAAG,EAAEF,8BAAY,CAACG,cAAc;EAChCC,GAAG,EAAEJ,8BAAY,CAACK,WAAW;EAC7BC,GAAG,EAAEN,8BAAY,CAACO,cAAc;EAChCC,GAAG,EAAER,8BAAY,CAACS,oBAAoB;EACtCC,GAAG,EAAEV,8BAAY,CAACW,MAAM;EACxBC,GAAG,EAAEZ,8BAAY,CAACa,iBAAiB;EACnCC,GAAG,EAAEd,8BAAY,CAACe;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAA3B,OAAA,CAAA2B,yBAAA,GAAG;EAChCC,IAAI,EAAEjB,8BAAY,CAACW,MAAM;EACzBO,KAAK,EAAElB,8BAAY,CAACmB;AACtB,CAAC"}
+{"version":3,"file":"constants.js","names":["_labsWidgetCommon","require","X_LABEL_SIZE","exports","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","CANDLE_NUMBER_HOUR","CANDLE_MINUTE","COLOR_CONFIG","USD","colorPalette","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreen75Lighter","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\nconst CANDLE_NUMBER_HOUR = 12;\nconst CANDLE_MINUTE = 5;\n\nconst COLOR_CONFIG: Record<string, string> = {\n  USD: colorPalette.greenLight,\n  EUR: colorPalette.turquoiseLight,\n  GBP: colorPalette.violetLight,\n  JPY: colorPalette.raspberryLight,\n  CHF: colorPalette.bottleGreen75Lighter,\n  AUD: colorPalette.orange,\n  CAD: colorPalette.midnight75Lighter,\n  NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n  DARK: colorPalette.orange,\n  LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  CHART_WIDTH,\n  CHART_HEIGHT,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  VERTICAL_LINE_COUNT,\n  COLOR_CONFIG,\n  TOOLTIP_LINE_COLOR_CONFIG,\n  CANDLE_NUMBER_HOUR,\n  CANDLE_MINUTE,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEA,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,mBAAmB,GAAAD,OAAA,CAAAC,mBAAA,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAAF,OAAA,CAAAE,mBAAA,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAAJ,OAAA,CAAAI,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAL,OAAA,CAAAK,YAAA,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAAN,OAAA,CAAAM,aAAA,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAG,EAAE;AAC9B,MAAMC,kBAAkB,GAAAT,OAAA,CAAAS,kBAAA,GAAG,EAAE;AAC7B,MAAMC,aAAa,GAAAV,OAAA,CAAAU,aAAA,GAAG,CAAC;AAEvB,MAAMC,YAAoC,GAAAX,OAAA,CAAAW,YAAA,GAAG;EAC3CC,GAAG,EAAEC,8BAAY,CAACC,UAAU;EAC5BC,GAAG,EAAEF,8BAAY,CAACG,cAAc;EAChCC,GAAG,EAAEJ,8BAAY,CAACK,WAAW;EAC7BC,GAAG,EAAEN,8BAAY,CAACO,cAAc;EAChCC,GAAG,EAAER,8BAAY,CAACS,oBAAoB;EACtCC,GAAG,EAAEV,8BAAY,CAACW,MAAM;EACxBC,GAAG,EAAEZ,8BAAY,CAACa,iBAAiB;EACnCC,GAAG,EAAEd,8BAAY,CAACe;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAA7B,OAAA,CAAA6B,yBAAA,GAAG;EAChCC,IAAI,EAAEjB,8BAAY,CAACW,MAAM;EACzBO,KAAK,EAAElB,8BAAY,CAACmB;AACtB,CAAC"}

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.xAxisLabelFormatter = exports.tooltipFormatter = void 0;
+exports.xAxisLabelFormatter = exports.tooltipFormatter = exports.isMonthWeek = exports.intervalFormatter = void 0;
+var _graphql = require("../../../../gql/types/graphql");
+var _constants = require("./constants");
 const getDateAndTime = param => {
   const dateAndTime = param.split('T');
   return {
@@ -26,15 +28,35 @@ const dateTimeFormat = _ref => {
     day: 'numeric'
   }), ", ").concat(time, " UTC");
 };
+const isMonthWeek = timeUnit => timeUnit === _graphql.CurrencyPowerBalanceTimeUnit.M3 || timeUnit === _graphql.CurrencyPowerBalanceTimeUnit.M1 || timeUnit === _graphql.CurrencyPowerBalanceTimeUnit.W1;
+exports.isMonthWeek = isMonthWeek;
 const xAxisLabelFormatter = (label, timeUnit) => {
   const {
     date,
     time
   } = getDateAndTime(label);
-  const isDateFormat = timeUnit.startsWith('M') || timeUnit.startsWith('W') || time === '00:00';
+  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';
   return isDateFormat ? dateFormat(date) : time;
 };
 exports.xAxisLabelFormatter = xAxisLabelFormatter;
+const intervalFormatter = (dataLength, timeUnit) => {
+  let offset = 0;
+  return isMonthWeek(timeUnit) ? Math.round(dataLength / _constants.VERTICAL_LINE_COUNT) : (index, value) => {
+    const everyTwoHours = index % 24 === 0 + offset;
+    if (timeUnit === _graphql.CurrencyPowerBalanceTimeUnit.H24 && index === 0) {
+      offset = _constants.CANDLE_NUMBER_HOUR - new Date(value).getMinutes() / _constants.CANDLE_MINUTE;
+    }
+    const hoursIntervalConditions = {
+      [_graphql.CurrencyPowerBalanceTimeUnit.H4]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),
+      [_graphql.CurrencyPowerBalanceTimeUnit.H8]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),
+      [_graphql.CurrencyPowerBalanceTimeUnit.H24]: everyTwoHours && value.endsWith(':00:00Z'),
+      [_graphql.CurrencyPowerBalanceTimeUnit.PreviousDay]: everyTwoHours,
+      [_graphql.CurrencyPowerBalanceTimeUnit.CurrentDay]: value.endsWith(':00:00Z')
+    };
+    return hoursIntervalConditions[timeUnit];
+  };
+};
+exports.intervalFormatter = intervalFormatter;
 const tooltipFormatter = values => {
   const date = dateTimeFormat(getDateAndTime(values[0].value[0]));
   const row = values.sort((_ref2, _ref3) => {

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","names":["getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","xAxisLabelFormatter","label","timeUnit","isDateFormat","startsWith","exports","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n  const dateAndTime = param.split('T');\n\n  return {\n    date: dateAndTime[0],\n    time: dateAndTime[1].substring(0, 5),\n  };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = timeUnit.startsWith('M') || timeUnit.startsWith('W') || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n  const row = values\n    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n    .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ${marker}\n        <span>${seriesName}</span>\n      </div>\n      <span>${value[1]}</span>\n    </div>`);\n\n  return `<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">${date}</span>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nexport {\n  tooltipFormatter,\n  xAxisLabelFormatter,\n};\n"],"mappings":";;;;;;AAGA,MAAMA,cAAc,GAAIC,KAAa,IAAK;EACxC,MAAMC,WAAW,GAAGD,KAAK,CAACE,KAAK,CAAC,GAAG,CAAC;EAEpC,OAAO;IACLC,IAAI,EAAEF,WAAW,CAAC,CAAC,CAAC;IACpBG,IAAI,EAAEH,WAAW,CAAC,CAAC,CAAC,CAACI,SAAS,CAAC,CAAC,EAAE,CAAC;EACrC,CAAC;AACH,CAAC;AAED,MAAMC,UAAU,GAAIH,IAAY,OAAAI,MAAA,CAAQ,IAAIC,IAAI,CAACL,IAAI,CAAC,CAACM,kBAAkB,CAACC,SAAS,EAAE;EAAEC,KAAK,EAAE,SAAS;EAAEC,GAAG,EAAE;AAAU,CAAC,CAAC,CAAE;AAE5H,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;IAAEX,IAAI;IAAEC;EAAqC,CAAC,GAAAU,IAAA;EAAA,UAAAP,MAAA,CAAQ,IAAIC,IAAI,CAACL,IAAI,CAAC,CAACM,kBAAkB,CAACC,SAAS,EAAE;IAAEK,IAAI,EAAE,SAAS;IAAEJ,KAAK,EAAE,SAAS;IAAEC,GAAG,EAAE;EAAU,CAAC,CAAC,QAAAL,MAAA,CAAKH,IAAI;AAAA,CAAM;AAEhM,MAAMY,mBAAmB,GAAGA,CAACC,KAAa,EAAEC,QAAsC,KAAK;EACrF,MAAM;IAAEf,IAAI;IAAEC;EAAK,CAAC,GAAGL,cAAc,CAACkB,KAAK,CAAC;EAC5C,MAAME,YAAY,GAAGD,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,IAAIF,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,IAAIhB,IAAI,KAAK,OAAO;EAE7F,OAAOe,YAAY,GAAGb,UAAU,CAACH,IAAI,CAAC,GAAGC,IAAI;AAC/C,CAAC;AAACiB,OAAA,CAAAL,mBAAA,GAAAA,mBAAA;AAEF,MAAMM,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAMpB,IAAI,GAAGU,cAAc,CAACd,cAAc,CAACwB,MAAM,CAAC,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAE/D,MAAMC,GAAG,GAAGF,MAAM,CACfG,IAAI,CAAC,CAAAC,KAAA,EAAAC,KAAA;IAAA,IAAC;MAAEJ,KAAK,EAAEK;IAAO,CAAC,GAAAF,KAAA;IAAA,IAAE;MAAEH,KAAK,EAAEM;IAAO,CAAC,GAAAF,KAAA;IAAA,OAAKG,MAAM,CAACD,MAAM,CAAC,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,MAAM,CAAC,CAAC,CAAC,CAAC;EAAA,EAAC,CACrFG,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,MAAM;MAAEC,UAAU;MAAEX;IAAM,CAAC,GAAAS,KAAA;IAAA,yJAAA1B,MAAA,CAE7B2B,MAAM,sBAAA3B,MAAA,CACA4B,UAAU,yCAAA5B,MAAA,CAEZiB,KAAK,CAAC,CAAC,CAAC;EAAA,CACX,CAAC;EAEV,uGAAAjB,MAAA,CACqCJ,IAAI,mBAAAI,MAAA,CACrCkB,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AAEpB,CAAC;AAACf,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}
+{"version":3,"file":"formatters.js","names":["_graphql","require","_constants","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","CurrencyPowerBalanceTimeUnit","M3","M1","W1","exports","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","offset","Math","round","VERTICAL_LINE_COUNT","index","value","everyTwoHours","H24","CANDLE_NUMBER_HOUR","getMinutes","CANDLE_MINUTE","hoursIntervalConditions","H4","endsWith","H8","PreviousDay","CurrentDay","tooltipFormatter","values","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { CANDLE_MINUTE, CANDLE_NUMBER_HOUR, VERTICAL_LINE_COUNT } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n  const dateAndTime = param.split('T');\n\n  return {\n    date: dateAndTime[0],\n    time: dateAndTime[1].substring(0, 5),\n  };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n  || timeUnit === CurrencyPowerBalanceTimeUnit.M1\n  || timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n  dataLength: number,\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n) => {\n  let offset = 0;\n\n  return isMonthWeek(timeUnit)\n    ? Math.round(dataLength / VERTICAL_LINE_COUNT)\n    : (index: number, value: string) => {\n      const everyTwoHours = index % 24 === 0 + offset;\n\n      if (timeUnit === CurrencyPowerBalanceTimeUnit.H24 && index === 0) {\n        offset = CANDLE_NUMBER_HOUR - new Date(value).getMinutes() / CANDLE_MINUTE;\n      }\n\n      const hoursIntervalConditions: Record<string, boolean> = {\n        [CurrencyPowerBalanceTimeUnit.H4]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),\n        [CurrencyPowerBalanceTimeUnit.H8]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),\n        [CurrencyPowerBalanceTimeUnit.H24]: everyTwoHours && value.endsWith(':00:00Z'),\n        [CurrencyPowerBalanceTimeUnit.PreviousDay]: everyTwoHours,\n        [CurrencyPowerBalanceTimeUnit.CurrentDay]: value.endsWith(':00:00Z'),\n      };\n\n      return hoursIntervalConditions[timeUnit];\n    };\n};\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n  const row = values\n    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n    .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ${marker}\n        <span>${seriesName}</span>\n      </div>\n      <span>${value[1]}</span>\n    </div>`);\n\n  return `<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">${date}</span>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nexport {\n  isMonthWeek,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n  intervalFormatter,\n};\n"],"mappings":"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"}

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js

@@ -69,10 +69,11 @@ const getOption = (values, timeUnit, isDark) => {
         show: true
       },
       axisLabel: {
+        padding: [0, 0, 0, 4],
+        align: 'left',
         margin: 10,
-        showMinLabel: false,
         rotate: -45,
-        interval: Math.round(seriesData[0].data.length / _constants.VERTICAL_LINE_COUNT),
+        interval: (0, _formatters.intervalFormatter)(seriesData[0].data.length, timeUnit),
         formatter: label => (0, _formatters.xAxisLabelFormatter)(label, timeUnit)
       }
     },

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["_constants","require","_formatters","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","lineStyle","data","_ref2","point","price","legendData","Object","keys","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","formatter","tooltipFormatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","margin","showMinLabel","rotate","interval","Math","round","length","VERTICAL_LINE_COUNT","label","xAxisLabelFormatter","yAxis","position","splitNumber","boundaryGap","showMaxLabel","series","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';\nimport { tooltipFormatter, xAxisLabelFormatter } from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n  values: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n) => {\n  const seriesData = values.map(({ currency, power }) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    lineStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\n  }));\n\n  const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      axisTick: {\n        show: false,\n      },\n      axisLine: { show: false },\n      splitLine: {\n        show: true,\n      },\n      axisLabel: {\n        margin: 10,\n        showMinLabel: false,\n        rotate: -45,\n        interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),\n        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      boundaryGap: ['10%', '10%'],\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: seriesData,\n  };\n};\n\nexport { getOption };\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAGA,MAAME,SAAS,GAAGA,CAChBC,MAA8B,EAC9BC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,MAAM,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACtDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDS,SAAS,EAAE;QACTF,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDU,IAAI,EAAET,KAAK,CAACH,GAAG,CAACa,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,GAAGC,MAAM,CAACC,IAAI,CAACR,uBAAY,CAAC,CAACV,GAAG,CAAEE,QAAQ,KAAM;IAC9DE,IAAI,EAAEF,QAAQ;IACdM,SAAS,EAAE;MACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;EAEH,OAAO;IACLiB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNR,IAAI,EAAEI,UAAU;MAChBK,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE,GAAG;QACTC,CAAC,EAAE,CAAC;QACJhB,SAAS,EAAE;UACTF,KAAK,EAAEX,MAAM,GAAG8B,oCAAyB,CAACC,IAAI,GAAGD,oCAAyB,CAACE;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEC,4BAAgB;MAC3BC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACL7B,IAAI,EAAE,UAAU;MAChB8B,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE,KAAK;QACnBC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAEC,IAAI,CAACC,KAAK,CAAC9C,UAAU,CAAC,CAAC,CAAC,CAACa,IAAI,CAACkC,MAAM,GAAGC,8BAAmB,CAAC;QACrEhB,SAAS,EAAGiB,KAAa,IAAK,IAAAC,+BAAmB,EAACD,KAAK,EAAEnD,QAAQ;MACnE;IACF,CAAC;IACDqD,KAAK,EAAE;MACL7C,IAAI,EAAE,OAAO;MACb8C,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdf,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBiB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3Bd,SAAS,EAAE;QACTe,YAAY,EAAE,KAAK;QACnBb,YAAY,EAAE;MAChB;IACF,CAAC;IACDc,MAAM,EAAExD;EACV,CAAC;AACH,CAAC;AAACyD,OAAA,CAAA7D,SAAA,GAAAA,SAAA"}
+{"version":3,"file":"getOption.js","names":["_constants","require","_formatters","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","COLOR_CONFIG","lineStyle","data","_ref2","point","price","legendData","Object","keys","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","formatter","tooltipFormatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","padding","align","margin","rotate","interval","intervalFormatter","length","label","xAxisLabelFormatter","yAxis","position","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport { intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n  values: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n) => {\n  const seriesData = values.map(({ currency, power }) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    lineStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\n  }));\n\n  const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      axisTick: {\n        show: false,\n      },\n      axisLine: { show: false },\n      splitLine: {\n        show: true,\n      },\n      axisLabel: {\n        padding: [0, 0, 0, 4],\n        align: 'left',\n        margin: 10,\n        rotate: -45,\n        interval: intervalFormatter(seriesData[0].data.length, timeUnit),\n        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      boundaryGap: ['10%', '10%'],\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: seriesData,\n  };\n};\n\nexport { getOption };\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAGA,MAAME,SAAS,GAAGA,CAChBC,MAA8B,EAC9BC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,MAAM,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACtDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDS,SAAS,EAAE;QACTF,KAAK,EAAEC,uBAAY,CAACR,QAAQ;MAC9B,CAAC;MACDU,IAAI,EAAET,KAAK,CAACH,GAAG,CAACa,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,GAAGC,MAAM,CAACC,IAAI,CAACR,uBAAY,CAAC,CAACV,GAAG,CAAEE,QAAQ,KAAM;IAC9DE,IAAI,EAAEF,QAAQ;IACdM,SAAS,EAAE;MACTC,KAAK,EAAEC,uBAAY,CAACR,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;EAEH,OAAO;IACLiB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNR,IAAI,EAAEI,UAAU;MAChBK,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE,GAAG;QACTC,CAAC,EAAE,CAAC;QACJhB,SAAS,EAAE;UACTF,KAAK,EAAEX,MAAM,GAAG8B,oCAAyB,CAACC,IAAI,GAAGD,oCAAyB,CAACE;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEC,4BAAgB;MAC3BC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACL7B,IAAI,EAAE,UAAU;MAChB8B,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACrBC,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,EAAE;QACVC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAE,IAAAC,6BAAiB,EAAC9C,UAAU,CAAC,CAAC,CAAC,CAACa,IAAI,CAACkC,MAAM,EAAEjD,QAAQ,CAAC;QAChEkC,SAAS,EAAGgB,KAAa,IAAK,IAAAC,+BAAmB,EAACD,KAAK,EAAElD,QAAQ;MACnE;IACF,CAAC;IACDoD,KAAK,EAAE;MACL5C,IAAI,EAAE,OAAO;MACb6C,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdd,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBgB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3Bb,SAAS,EAAE;QACTc,YAAY,EAAE,KAAK;QACnBC,YAAY,EAAE;MAChB;IACF,CAAC;IACDC,MAAM,EAAExD;EACV,CAAC;AACH,CAAC;AAACyD,OAAA,CAAA7D,SAAA,GAAAA,SAAA"}

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.js

@@ -13,7 +13,7 @@ const getResponsiveOption = (isDesktop, isMobile, isDark) => {
     chartHeight: _constants.CHART_HEIGHT,
     xLabelsSize: isMobile ? _constants.X_LABEL_SIZE_MOBILE : _constants.X_LABEL_SIZE,
     yLabelSize: isMobile ? _constants.Y_LABEL_SIZE_MOBILE : _constants.Y_LABEL_SIZE,
-    bottomLeftBox: isDesktop,
+    bottomLeftBox: false,
     marginBottom: isMobile ? _constants.LEGEND_HEIGHT_MOBILE : _constants.LEGEND_HEIGHT
   });
   return {

package/dist/main/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getResponsiveOption.js","names":["_labsWidgetCommon","require","_constants","getResponsiveOption","isDesktop","isMobile","isDark","baseGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE_MOBILE","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","bottomLeftBox","marginBottom","LEGEND_HEIGHT_MOBILE","LEGEND_HEIGHT","yAxis","axisLabel","margin","grid","name","top","left","right","concat","bottom","graphic","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\n\nconst getResponsiveOption = (isDesktop: boolean, isMobile: boolean, isDark: boolean) => {\n  const baseGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,\n    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,\n    bottomLeftBox: isDesktop,\n    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,\n  });\n\n  return {\n    yAxis: {\n      axisLabel: {\n        margin: isDesktop ? 8 : 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,\n        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...baseGridLines,\n    ],\n  };\n};\n\nexport { getResponsiveOption };\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAWA,MAAME,mBAAmB,GAAGA,CAACC,SAAkB,EAAEC,QAAiB,EAAEC,MAAe,KAAK;EACtF,MAAMC,aAAa,GAAG,IAAAC,8BAAY,EAAC;IACjCF,MAAM;IACNG,UAAU,EAAEC,sBAAW;IACvBC,WAAW,EAAEC,uBAAY;IACzBC,WAAW,EAAER,QAAQ,GAAGS,8BAAmB,GAAGC,uBAAY;IAC1DC,UAAU,EAAEX,QAAQ,GAAGY,8BAAmB,GAAGC,uBAAY;IACzDC,aAAa,EAAEf,SAAS;IACxBgB,YAAY,EAAEf,QAAQ,GAAGgB,+BAAoB,GAAGC;EAClD,CAAC,CAAC;EAEF,OAAO;IACLC,KAAK,EAAE;MACLC,SAAS,EAAE;QACTC,MAAM,EAAErB,SAAS,GAAG,CAAC,GAAG;MAC1B;IACF,CAAC;IACDsB,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE,KAAK;MACXC,KAAK,KAAAC,MAAA,CAAK1B,QAAQ,GAAGY,8BAAmB,GAAGC,uBAAY,OAAI;MAC3Dc,MAAM,KAAAD,MAAA,CAAK1B,QAAQ,GAAGS,8BAAmB,GAAGC,uBAAY;IAC1D,CAAC,CACF;IACDkB,OAAO,EAAE,CACP,GAAG1B,aAAa;EAEpB,CAAC;AACH,CAAC;AAAC2B,OAAA,CAAA/B,mBAAA,GAAAA,mBAAA"}
+{"version":3,"file":"getResponsiveOption.js","names":["_labsWidgetCommon","require","_constants","getResponsiveOption","isDesktop","isMobile","isDark","baseGridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","X_LABEL_SIZE_MOBILE","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","bottomLeftBox","marginBottom","LEGEND_HEIGHT_MOBILE","LEGEND_HEIGHT","yAxis","axisLabel","margin","grid","name","top","left","right","concat","bottom","graphic","exports"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\n\nconst getResponsiveOption = (isDesktop: boolean, isMobile: boolean, isDark: boolean) => {\n  const baseGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,\n    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,\n    bottomLeftBox: false,\n    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,\n  });\n\n  return {\n    yAxis: {\n      axisLabel: {\n        margin: isDesktop ? 8 : 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,\n        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...baseGridLines,\n    ],\n  };\n};\n\nexport { getResponsiveOption };\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAWA,MAAME,mBAAmB,GAAGA,CAACC,SAAkB,EAAEC,QAAiB,EAAEC,MAAe,KAAK;EACtF,MAAMC,aAAa,GAAG,IAAAC,8BAAY,EAAC;IACjCF,MAAM;IACNG,UAAU,EAAEC,sBAAW;IACvBC,WAAW,EAAEC,uBAAY;IACzBC,WAAW,EAAER,QAAQ,GAAGS,8BAAmB,GAAGC,uBAAY;IAC1DC,UAAU,EAAEX,QAAQ,GAAGY,8BAAmB,GAAGC,uBAAY;IACzDC,aAAa,EAAE,KAAK;IACpBC,YAAY,EAAEf,QAAQ,GAAGgB,+BAAoB,GAAGC;EAClD,CAAC,CAAC;EAEF,OAAO;IACLC,KAAK,EAAE;MACLC,SAAS,EAAE;QACTC,MAAM,EAAErB,SAAS,GAAG,CAAC,GAAG;MAC1B;IACF,CAAC;IACDsB,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE,KAAK;MACXC,KAAK,KAAAC,MAAA,CAAK1B,QAAQ,GAAGY,8BAAmB,GAAGC,uBAAY,OAAI;MAC3Dc,MAAM,KAAAD,MAAA,CAAK1B,QAAQ,GAAGS,8BAAmB,GAAGC,uBAAY;IAC1D,CAAC,CACF;IACDkB,OAAO,EAAE,CACP,GAAG1B,aAAa;EAEpB,CAAC;AACH,CAAC;AAAC2B,OAAA,CAAA/B,mBAAA,GAAAA,mBAAA"}

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js

@@ -8,6 +8,8 @@ const CHART_HEIGHT = 425;
 const LEGEND_HEIGHT = 50;
 const LEGEND_HEIGHT_MOBILE = 70;
 const VERTICAL_LINE_COUNT = 10;
+const CANDLE_NUMBER_HOUR = 12;
+const CANDLE_MINUTE = 5;
 const COLOR_CONFIG = {
   USD: colorPalette.greenLight,
   EUR: colorPalette.turquoiseLight,
@@ -22,5 +24,5 @@ const TOOLTIP_LINE_COLOR_CONFIG = {
   DARK: colorPalette.orange,
   LIGHT: colorPalette.bottleGreenDark
 };
-export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG };
+export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE };
 //# sourceMappingURL=constants.js.map

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["colorPalette","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","COLOR_CONFIG","USD","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreen75Lighter","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\n\nconst COLOR_CONFIG: Record<string, string> = {\n  USD: colorPalette.greenLight,\n  EUR: colorPalette.turquoiseLight,\n  GBP: colorPalette.violetLight,\n  JPY: colorPalette.raspberryLight,\n  CHF: colorPalette.bottleGreen75Lighter,\n  AUD: colorPalette.orange,\n  CAD: colorPalette.midnight75Lighter,\n  NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n  DARK: colorPalette.orange,\n  LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  CHART_WIDTH,\n  CHART_HEIGHT,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  VERTICAL_LINE_COUNT,\n  COLOR_CONFIG,\n  TOOLTIP_LINE_COLOR_CONFIG,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AAExD,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAE9B,MAAMC,YAAoC,GAAG;EAC3CC,GAAG,EAAEX,YAAY,CAACY,UAAU;EAC5BC,GAAG,EAAEb,YAAY,CAACc,cAAc;EAChCC,GAAG,EAAEf,YAAY,CAACgB,WAAW;EAC7BC,GAAG,EAAEjB,YAAY,CAACkB,cAAc;EAChCC,GAAG,EAAEnB,YAAY,CAACoB,oBAAoB;EACtCC,GAAG,EAAErB,YAAY,CAACsB,MAAM;EACxBC,GAAG,EAAEvB,YAAY,CAACwB,iBAAiB;EACnCC,GAAG,EAAEzB,YAAY,CAAC0B;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAG;EAChCC,IAAI,EAAE5B,YAAY,CAACsB,MAAM;EACzBO,KAAK,EAAE7B,YAAY,CAAC8B;AACtB,CAAC;AAED,SACE7B,YAAY,EACZC,mBAAmB,EACnBC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,oBAAoB,EACpBC,mBAAmB,EACnBC,YAAY,EACZiB,yBAAyB"}
+{"version":3,"file":"constants.js","names":["colorPalette","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","VERTICAL_LINE_COUNT","CANDLE_NUMBER_HOUR","CANDLE_MINUTE","COLOR_CONFIG","USD","greenLight","EUR","turquoiseLight","GBP","violetLight","JPY","raspberryLight","CHF","bottleGreen75Lighter","AUD","orange","CAD","midnight75Lighter","NZD","gold","TOOLTIP_LINE_COLOR_CONFIG","DARK","LIGHT","bottleGreenDark"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nconst X_LABEL_SIZE = 90;\nconst X_LABEL_SIZE_MOBILE = 110;\nconst Y_LABEL_SIZE_MOBILE = 35;\nconst Y_LABEL_SIZE = 45;\nconst CHART_WIDTH = 9999;\nconst CHART_HEIGHT = 425;\nconst LEGEND_HEIGHT = 50;\nconst LEGEND_HEIGHT_MOBILE = 70;\nconst VERTICAL_LINE_COUNT = 10;\nconst CANDLE_NUMBER_HOUR = 12;\nconst CANDLE_MINUTE = 5;\n\nconst COLOR_CONFIG: Record<string, string> = {\n  USD: colorPalette.greenLight,\n  EUR: colorPalette.turquoiseLight,\n  GBP: colorPalette.violetLight,\n  JPY: colorPalette.raspberryLight,\n  CHF: colorPalette.bottleGreen75Lighter,\n  AUD: colorPalette.orange,\n  CAD: colorPalette.midnight75Lighter,\n  NZD: colorPalette.gold,\n};\n\nconst TOOLTIP_LINE_COLOR_CONFIG = {\n  DARK: colorPalette.orange,\n  LIGHT: colorPalette.bottleGreenDark,\n};\n\nexport {\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  CHART_WIDTH,\n  CHART_HEIGHT,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  VERTICAL_LINE_COUNT,\n  COLOR_CONFIG,\n  TOOLTIP_LINE_COLOR_CONFIG,\n  CANDLE_NUMBER_HOUR,\n  CANDLE_MINUTE,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AAExD,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAG,GAAG;AACxB,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,aAAa,GAAG,CAAC;AAEvB,MAAMC,YAAoC,GAAG;EAC3CC,GAAG,EAAEb,YAAY,CAACc,UAAU;EAC5BC,GAAG,EAAEf,YAAY,CAACgB,cAAc;EAChCC,GAAG,EAAEjB,YAAY,CAACkB,WAAW;EAC7BC,GAAG,EAAEnB,YAAY,CAACoB,cAAc;EAChCC,GAAG,EAAErB,YAAY,CAACsB,oBAAoB;EACtCC,GAAG,EAAEvB,YAAY,CAACwB,MAAM;EACxBC,GAAG,EAAEzB,YAAY,CAAC0B,iBAAiB;EACnCC,GAAG,EAAE3B,YAAY,CAAC4B;AACpB,CAAC;AAED,MAAMC,yBAAyB,GAAG;EAChCC,IAAI,EAAE9B,YAAY,CAACwB,MAAM;EACzBO,KAAK,EAAE/B,YAAY,CAACgC;AACtB,CAAC;AAED,SACE/B,YAAY,EACZC,mBAAmB,EACnBC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,oBAAoB,EACpBC,mBAAmB,EACnBG,YAAY,EACZiB,yBAAyB,EACzBnB,kBAAkB,EAClBC,aAAa"}

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js

@@ -1,3 +1,5 @@
+import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { CANDLE_MINUTE, CANDLE_NUMBER_HOUR, VERTICAL_LINE_COUNT } from './constants';
 const getDateAndTime = param => {
   const dateAndTime = param.split('T');
   return {
@@ -20,14 +22,32 @@ const dateTimeFormat = _ref => {
     day: 'numeric'
   }), ", ").concat(time, " UTC");
 };
+const isMonthWeek = timeUnit => timeUnit === CurrencyPowerBalanceTimeUnit.M3 || timeUnit === CurrencyPowerBalanceTimeUnit.M1 || timeUnit === CurrencyPowerBalanceTimeUnit.W1;
 const xAxisLabelFormatter = (label, timeUnit) => {
   const {
     date,
     time
   } = getDateAndTime(label);
-  const isDateFormat = timeUnit.startsWith('M') || timeUnit.startsWith('W') || time === '00:00';
+  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';
   return isDateFormat ? dateFormat(date) : time;
 };
+const intervalFormatter = (dataLength, timeUnit) => {
+  let offset = 0;
+  return isMonthWeek(timeUnit) ? Math.round(dataLength / VERTICAL_LINE_COUNT) : (index, value) => {
+    const everyTwoHours = index % 24 === 0 + offset;
+    if (timeUnit === CurrencyPowerBalanceTimeUnit.H24 && index === 0) {
+      offset = CANDLE_NUMBER_HOUR - new Date(value).getMinutes() / CANDLE_MINUTE;
+    }
+    const hoursIntervalConditions = {
+      [CurrencyPowerBalanceTimeUnit.H4]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),
+      [CurrencyPowerBalanceTimeUnit.H8]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),
+      [CurrencyPowerBalanceTimeUnit.H24]: everyTwoHours && value.endsWith(':00:00Z'),
+      [CurrencyPowerBalanceTimeUnit.PreviousDay]: everyTwoHours,
+      [CurrencyPowerBalanceTimeUnit.CurrentDay]: value.endsWith(':00:00Z')
+    };
+    return hoursIntervalConditions[timeUnit];
+  };
+};
 const tooltipFormatter = values => {
   const date = dateTimeFormat(getDateAndTime(values[0].value[0]));
   const row = values.sort((_ref2, _ref3) => {
@@ -48,5 +68,5 @@ const tooltipFormatter = values => {
   });
   return "<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">".concat(date, "</span>\n    ").concat(row.join('\n'), "\n  </div>");
 };
-export { tooltipFormatter, xAxisLabelFormatter };
+export { isMonthWeek, tooltipFormatter, xAxisLabelFormatter, intervalFormatter };
 //# sourceMappingURL=formatters.js.map

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/formatters.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","names":["getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","xAxisLabelFormatter","label","timeUnit","isDateFormat","startsWith","tooltipFormatter","values","value","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n  const dateAndTime = param.split('T');\n\n  return {\n    date: dateAndTime[0],\n    time: dateAndTime[1].substring(0, 5),\n  };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = timeUnit.startsWith('M') || timeUnit.startsWith('W') || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n  const row = values\n    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n    .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ${marker}\n        <span>${seriesName}</span>\n      </div>\n      <span>${value[1]}</span>\n    </div>`);\n\n  return `<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">${date}</span>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nexport {\n  tooltipFormatter,\n  xAxisLabelFormatter,\n};\n"],"mappings":"AAGA,MAAMA,cAAc,GAAIC,KAAa,IAAK;EACxC,MAAMC,WAAW,GAAGD,KAAK,CAACE,KAAK,CAAC,GAAG,CAAC;EAEpC,OAAO;IACLC,IAAI,EAAEF,WAAW,CAAC,CAAC,CAAC;IACpBG,IAAI,EAAEH,WAAW,CAAC,CAAC,CAAC,CAACI,SAAS,CAAC,CAAC,EAAE,CAAC;EACrC,CAAC;AACH,CAAC;AAED,MAAMC,UAAU,GAAIH,IAAY,OAAAI,MAAA,CAAQ,IAAIC,IAAI,CAACL,IAAI,CAAC,CAACM,kBAAkB,CAACC,SAAS,EAAE;EAAEC,KAAK,EAAE,SAAS;EAAEC,GAAG,EAAE;AAAU,CAAC,CAAC,CAAE;AAE5H,MAAMC,cAAc,GAAGC,IAAA;EAAA,IAAC;IAAEX,IAAI;IAAEC;EAAqC,CAAC,GAAAU,IAAA;EAAA,UAAAP,MAAA,CAAQ,IAAIC,IAAI,CAACL,IAAI,CAAC,CAACM,kBAAkB,CAACC,SAAS,EAAE;IAAEK,IAAI,EAAE,SAAS;IAAEJ,KAAK,EAAE,SAAS;IAAEC,GAAG,EAAE;EAAU,CAAC,CAAC,QAAAL,MAAA,CAAKH,IAAI;AAAA,CAAM;AAEhM,MAAMY,mBAAmB,GAAGA,CAACC,KAAa,EAAEC,QAAsC,KAAK;EACrF,MAAM;IAAEf,IAAI;IAAEC;EAAK,CAAC,GAAGL,cAAc,CAACkB,KAAK,CAAC;EAC5C,MAAME,YAAY,GAAGD,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,IAAIF,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,IAAIhB,IAAI,KAAK,OAAO;EAE7F,OAAOe,YAAY,GAAGb,UAAU,CAACH,IAAI,CAAC,GAAGC,IAAI;AAC/C,CAAC;AAED,MAAMiB,gBAAgB,GAAIC,MAAgC,IAAK;EAC7D,MAAMnB,IAAI,GAAGU,cAAc,CAACd,cAAc,CAACuB,MAAM,CAAC,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAE/D,MAAMC,GAAG,GAAGF,MAAM,CACfG,IAAI,CAAC,CAAAC,KAAA,EAAAC,KAAA;IAAA,IAAC;MAAEJ,KAAK,EAAEK;IAAO,CAAC,GAAAF,KAAA;IAAA,IAAE;MAAEH,KAAK,EAAEM;IAAO,CAAC,GAAAF,KAAA;IAAA,OAAKG,MAAM,CAACD,MAAM,CAAC,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,MAAM,CAAC,CAAC,CAAC,CAAC;EAAA,EAAC,CACrFG,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,MAAM;MAAEC,UAAU;MAAEX;IAAM,CAAC,GAAAS,KAAA;IAAA,yJAAAzB,MAAA,CAE7B0B,MAAM,sBAAA1B,MAAA,CACA2B,UAAU,yCAAA3B,MAAA,CAEZgB,KAAK,CAAC,CAAC,CAAC;EAAA,CACX,CAAC;EAEV,uGAAAhB,MAAA,CACqCJ,IAAI,mBAAAI,MAAA,CACrCiB,GAAG,CAACW,IAAI,CAAC,IAAI,CAAC;AAEpB,CAAC;AAED,SACEd,gBAAgB,EAChBL,mBAAmB"}
+{"version":3,"file":"formatters.js","names":["CurrencyPowerBalanceTimeUnit","CANDLE_MINUTE","CANDLE_NUMBER_HOUR","VERTICAL_LINE_COUNT","getDateAndTime","param","dateAndTime","split","date","time","substring","dateFormat","concat","Date","toLocaleDateString","undefined","month","day","dateTimeFormat","_ref","year","isMonthWeek","timeUnit","M3","M1","W1","xAxisLabelFormatter","label","isDateFormat","intervalFormatter","dataLength","offset","Math","round","index","value","everyTwoHours","H24","getMinutes","hoursIntervalConditions","H4","endsWith","H8","PreviousDay","CurrentDay","tooltipFormatter","values","row","sort","_ref2","_ref3","valueA","valueB","Number","map","_ref4","marker","seriesName","join"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts"],"sourcesContent":["import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\nimport { CANDLE_MINUTE, CANDLE_NUMBER_HOUR, VERTICAL_LINE_COUNT } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nconst getDateAndTime = (param: string) => {\n  const dateAndTime = param.split('T');\n\n  return {\n    date: dateAndTime[0],\n    time: dateAndTime[1].substring(0, 5),\n  };\n};\n\nconst dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}`;\n\nconst dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;\n\nconst isMonthWeek = (\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n) => timeUnit === CurrencyPowerBalanceTimeUnit.M3\n  || timeUnit === CurrencyPowerBalanceTimeUnit.M1\n  || timeUnit === CurrencyPowerBalanceTimeUnit.W1;\n\nconst xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {\n  const { date, time } = getDateAndTime(label);\n  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';\n\n  return isDateFormat ? dateFormat(date) : time;\n};\n\nconst intervalFormatter = (\n  dataLength: number,\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n) => {\n  let offset = 0;\n\n  return isMonthWeek(timeUnit)\n    ? Math.round(dataLength / VERTICAL_LINE_COUNT)\n    : (index: number, value: string) => {\n      const everyTwoHours = index % 24 === 0 + offset;\n\n      if (timeUnit === CurrencyPowerBalanceTimeUnit.H24 && index === 0) {\n        offset = CANDLE_NUMBER_HOUR - new Date(value).getMinutes() / CANDLE_MINUTE;\n      }\n\n      const hoursIntervalConditions: Record<string, boolean> = {\n        [CurrencyPowerBalanceTimeUnit.H4]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),\n        [CurrencyPowerBalanceTimeUnit.H8]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),\n        [CurrencyPowerBalanceTimeUnit.H24]: everyTwoHours && value.endsWith(':00:00Z'),\n        [CurrencyPowerBalanceTimeUnit.PreviousDay]: everyTwoHours,\n        [CurrencyPowerBalanceTimeUnit.CurrentDay]: value.endsWith(':00:00Z'),\n      };\n\n      return hoursIntervalConditions[timeUnit];\n    };\n};\n\nconst tooltipFormatter = (values: TooltipFormatterParams[]) => {\n  const date = dateTimeFormat(getDateAndTime(values[0].value[0]));\n\n  const row = values\n    .sort(({ value: valueA }, { value: valueB }) => Number(valueB[1]) - Number(valueA[1]))\n    .map(({ marker, seriesName, value }) => `<div style=\"display:flex;align-items:center;\">\n      <div style=\"display:flex;align-items:center;width:50px;margin-right:10px;\">\n        ${marker}\n        <span>${seriesName}</span>\n      </div>\n      <span>${value[1]}</span>\n    </div>`);\n\n  return `<div style=\"display:flex; flex-direction:column;\">\n    <span style=\"margin-bottom:5px;\">${date}</span>\n    ${row.join('\\n')}\n  </div>`;\n};\n\nexport {\n  isMonthWeek,\n  tooltipFormatter,\n  xAxisLabelFormatter,\n  intervalFormatter,\n};\n"],"mappings":"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"}

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js

@@ -1,5 +1,5 @@
-import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';
-import { tooltipFormatter, xAxisLabelFormatter } from './formatters';
+import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
+import { intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';
 const getOption = (values, timeUnit, isDark) => {
   const seriesData = values.map(_ref => {
     let {
@@ -63,10 +63,11 @@ const getOption = (values, timeUnit, isDark) => {
         show: true
       },
       axisLabel: {
+        padding: [0, 0, 0, 4],
+        align: 'left',
         margin: 10,
-        showMinLabel: false,
         rotate: -45,
-        interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),
+        interval: intervalFormatter(seriesData[0].data.length, timeUnit),
         formatter: label => xAxisLabelFormatter(label, timeUnit)
       }
     },

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","VERTICAL_LINE_COUNT","tooltipFormatter","xAxisLabelFormatter","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","Object","keys","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","formatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","margin","showMinLabel","rotate","interval","Math","round","length","label","yAxis","position","splitNumber","boundaryGap","showMaxLabel","series"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';\nimport { tooltipFormatter, xAxisLabelFormatter } from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n  values: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n) => {\n  const seriesData = values.map(({ currency, power }) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    lineStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\n  }));\n\n  const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      axisTick: {\n        show: false,\n      },\n      axisLine: { show: false },\n      splitLine: {\n        show: true,\n      },\n      axisLabel: {\n        margin: 10,\n        showMinLabel: false,\n        rotate: -45,\n        interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),\n        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      boundaryGap: ['10%', '10%'],\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: seriesData,\n  };\n};\n\nexport { getOption };\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,yBAAyB,EAAEC,mBAAmB,QAAQ,aAAa;AAC1F,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,cAAc;AAGpE,MAAMC,SAAS,GAAGA,CAChBC,MAA8B,EAC9BC,QAAsC,EACtCC,MAAe,KACZ;EACH,MAAMC,UAAU,GAAGH,MAAM,CAACI,GAAG,CAACC,IAAA;IAAA,IAAC;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAAA,OAAM;MACtDG,IAAI,EAAEF,QAAQ;MACdG,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE;QACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;MAC9B,CAAC;MACDQ,SAAS,EAAE;QACTD,KAAK,EAAEnB,YAAY,CAACY,QAAQ;MAC9B,CAAC;MACDS,IAAI,EAAER,KAAK,CAACH,GAAG,CAACY,KAAA;QAAA,IAAC;UAAEC,KAAK;UAAEC;QAAM,CAAC,GAAAF,KAAA;QAAA,OAAK,CAACC,KAAK,EAAEC,KAAK,CAAC;MAAA;IACtD,CAAC;EAAA,CAAC,CAAC;EAEH,MAAMC,UAAU,GAAGC,MAAM,CAACC,IAAI,CAAC3B,YAAY,CAAC,CAACU,GAAG,CAAEE,QAAQ,KAAM;IAC9DE,IAAI,EAAEF,QAAQ;IACdM,SAAS,EAAE;MACTC,KAAK,EAAEnB,YAAY,CAACY,QAAQ;IAC9B;EACF,CAAC,CAAC,CAAC;EAEH,OAAO;IACLgB,SAAS,EAAE,KAAK;IAChBC,MAAM,EAAE;MACNR,IAAI,EAAEI,UAAU;MAChBK,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;QACXC,IAAI,EAAE,GAAG;QACTC,CAAC,EAAE,CAAC;QACJhB,SAAS,EAAE;UACTD,KAAK,EAAEX,MAAM,GAAGP,yBAAyB,CAACoC,IAAI,GAAGpC,yBAAyB,CAACqC;QAC7E;MACF,CAAC;MACDC,SAAS,EAAEpC,gBAAgB;MAC3BqC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACL1B,IAAI,EAAE,UAAU;MAChB2B,QAAQ,EAAE;QACRC,IAAI,EAAE;MACR,CAAC;MACDC,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBE,SAAS,EAAE;QACTF,IAAI,EAAE;MACR,CAAC;MACDG,SAAS,EAAE;QACTC,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE,KAAK;QACnBC,MAAM,EAAE,CAAC,EAAE;QACXC,QAAQ,EAAEC,IAAI,CAACC,KAAK,CAAC3C,UAAU,CAAC,CAAC,CAAC,CAACY,IAAI,CAACgC,MAAM,GAAGnD,mBAAmB,CAAC;QACrEqC,SAAS,EAAGe,KAAa,IAAKlD,mBAAmB,CAACkD,KAAK,EAAE/C,QAAQ;MACnE;IACF,CAAC;IACDgD,KAAK,EAAE;MACLxC,IAAI,EAAE,OAAO;MACbyC,QAAQ,EAAE,OAAO;MACjBC,WAAW,EAAE,CAAC;MACdb,QAAQ,EAAE;QAAED,IAAI,EAAE;MAAM,CAAC;MACzBD,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAM,CAAC;MACzBe,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;MAC3BZ,SAAS,EAAE;QACTa,YAAY,EAAE,KAAK;QACnBX,YAAY,EAAE;MAChB;IACF,CAAC;IACDY,MAAM,EAAEnD;EACV,CAAC;AACH,CAAC;AAED,SAASJ,SAAS"}
+{"version":3,"file":"getOption.js","names":["COLOR_CONFIG","TOOLTIP_LINE_COLOR_CONFIG","intervalFormatter","tooltipFormatter","xAxisLabelFormatter","getOption","values","timeUnit","isDark","seriesData","map","_ref","currency","power","name","type","symbol","showSymbol","itemStyle","color","lineStyle","data","_ref2","point","price","legendData","Object","keys","animation","legend","bottom","icon","tooltip","trigger","axisPointer","axis","z","DARK","LIGHT","formatter","extraCssText","xAxis","axisTick","show","axisLine","splitLine","axisLabel","padding","align","margin","rotate","interval","length","label","yAxis","position","splitNumber","boundaryGap","showMaxLabel","showMinLabel","series"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts"],"sourcesContent":["import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';\nimport { intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';\nimport { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';\n\nconst getOption = (\n  values: CurrencyPowerBalance[],\n  timeUnit: CurrencyPowerBalanceTimeUnit,\n  isDark: boolean,\n) => {\n  const seriesData = values.map(({ currency, power }) => ({\n    name: currency,\n    type: 'line',\n    symbol: 'circle',\n    showSymbol: false,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    lineStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n    data: power.map(({ point, price }) => [point, price]),\n  }));\n\n  const legendData = Object.keys(COLOR_CONFIG).map((currency) => ({\n    name: currency,\n    itemStyle: {\n      color: COLOR_CONFIG[currency],\n    },\n  }));\n\n  return {\n    animation: false,\n    legend: {\n      data: legendData,\n      bottom: 10,\n      icon: 'circle',\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        axis: 'x',\n        z: 0,\n        lineStyle: {\n          color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,\n        },\n      },\n      formatter: tooltipFormatter,\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      axisTick: {\n        show: false,\n      },\n      axisLine: { show: false },\n      splitLine: {\n        show: true,\n      },\n      axisLabel: {\n        padding: [0, 0, 0, 4],\n        align: 'left',\n        margin: 10,\n        rotate: -45,\n        interval: intervalFormatter(seriesData[0].data.length, timeUnit),\n        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      splitNumber: 5,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      boundaryGap: ['10%', '10%'],\n      axisLabel: {\n        showMaxLabel: false,\n        showMinLabel: false,\n      },\n    },\n    series: seriesData,\n  };\n};\n\nexport { getOption };\n"],"mappings":"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"}

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.js

@@ -7,7 +7,7 @@ const getResponsiveOption = (isDesktop, isMobile, isDark) => {
     chartHeight: CHART_HEIGHT,
     xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,
     yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,
-    bottomLeftBox: isDesktop,
+    bottomLeftBox: false,
     marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT
   });
   return {

package/dist/module/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getResponsiveOption.js","names":["getGridLines","CHART_HEIGHT","CHART_WIDTH","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","Y_LABEL_SIZE_MOBILE","getResponsiveOption","isDesktop","isMobile","isDark","baseGridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","bottomLeftBox","marginBottom","yAxis","axisLabel","margin","grid","name","top","left","right","concat","bottom","graphic"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\n\nconst getResponsiveOption = (isDesktop: boolean, isMobile: boolean, isDark: boolean) => {\n  const baseGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,\n    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,\n    bottomLeftBox: isDesktop,\n    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,\n  });\n\n  return {\n    yAxis: {\n      axisLabel: {\n        margin: isDesktop ? 8 : 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,\n        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...baseGridLines,\n    ],\n  };\n};\n\nexport { getResponsiveOption };\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SACEC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,oBAAoB,EACpBC,YAAY,EACZC,mBAAmB,EACnBC,YAAY,EACZC,mBAAmB,QACd,aAAa;AAEpB,MAAMC,mBAAmB,GAAGA,CAACC,SAAkB,EAAEC,QAAiB,EAAEC,MAAe,KAAK;EACtF,MAAMC,aAAa,GAAGb,YAAY,CAAC;IACjCY,MAAM;IACNE,UAAU,EAAEZ,WAAW;IACvBa,WAAW,EAAEd,YAAY;IACzBe,WAAW,EAAEL,QAAQ,GAAGL,mBAAmB,GAAGD,YAAY;IAC1DY,UAAU,EAAEN,QAAQ,GAAGH,mBAAmB,GAAGD,YAAY;IACzDW,aAAa,EAAER,SAAS;IACxBS,YAAY,EAAER,QAAQ,GAAGP,oBAAoB,GAAGD;EAClD,CAAC,CAAC;EAEF,OAAO;IACLiB,KAAK,EAAE;MACLC,SAAS,EAAE;QACTC,MAAM,EAAEZ,SAAS,GAAG,CAAC,GAAG;MAC1B;IACF,CAAC;IACDa,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE,KAAK;MACXC,KAAK,KAAAC,MAAA,CAAKjB,QAAQ,GAAGH,mBAAmB,GAAGD,YAAY,OAAI;MAC3DsB,MAAM,KAAAD,MAAA,CAAKjB,QAAQ,GAAGL,mBAAmB,GAAGD,YAAY;IAC1D,CAAC,CACF;IACDyB,OAAO,EAAE,CACP,GAAGjB,aAAa;EAEpB,CAAC;AACH,CAAC;AAED,SAASJ,mBAAmB"}
+{"version":3,"file":"getResponsiveOption.js","names":["getGridLines","CHART_HEIGHT","CHART_WIDTH","LEGEND_HEIGHT","LEGEND_HEIGHT_MOBILE","X_LABEL_SIZE","X_LABEL_SIZE_MOBILE","Y_LABEL_SIZE","Y_LABEL_SIZE_MOBILE","getResponsiveOption","isDesktop","isMobile","isDark","baseGridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","bottomLeftBox","marginBottom","yAxis","axisLabel","margin","grid","name","top","left","right","concat","bottom","graphic"],"sources":["../../../../../../src/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  LEGEND_HEIGHT,\n  LEGEND_HEIGHT_MOBILE,\n  X_LABEL_SIZE,\n  X_LABEL_SIZE_MOBILE,\n  Y_LABEL_SIZE,\n  Y_LABEL_SIZE_MOBILE,\n} from './constants';\n\nconst getResponsiveOption = (isDesktop: boolean, isMobile: boolean, isDark: boolean) => {\n  const baseGridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,\n    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,\n    bottomLeftBox: false,\n    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,\n  });\n\n  return {\n    yAxis: {\n      axisLabel: {\n        margin: isDesktop ? 8 : 6,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '0px',\n        left: '0px',\n        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,\n        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...baseGridLines,\n    ],\n  };\n};\n\nexport { getResponsiveOption };\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SACEC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,oBAAoB,EACpBC,YAAY,EACZC,mBAAmB,EACnBC,YAAY,EACZC,mBAAmB,QACd,aAAa;AAEpB,MAAMC,mBAAmB,GAAGA,CAACC,SAAkB,EAAEC,QAAiB,EAAEC,MAAe,KAAK;EACtF,MAAMC,aAAa,GAAGb,YAAY,CAAC;IACjCY,MAAM;IACNE,UAAU,EAAEZ,WAAW;IACvBa,WAAW,EAAEd,YAAY;IACzBe,WAAW,EAAEL,QAAQ,GAAGL,mBAAmB,GAAGD,YAAY;IAC1DY,UAAU,EAAEN,QAAQ,GAAGH,mBAAmB,GAAGD,YAAY;IACzDW,aAAa,EAAE,KAAK;IACpBC,YAAY,EAAER,QAAQ,GAAGP,oBAAoB,GAAGD;EAClD,CAAC,CAAC;EAEF,OAAO;IACLiB,KAAK,EAAE;MACLC,SAAS,EAAE;QACTC,MAAM,EAAEZ,SAAS,GAAG,CAAC,GAAG;MAC1B;IACF,CAAC;IACDa,IAAI,EAAE,CACJ;MACEC,IAAI,EAAE,WAAW;MACjBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE,KAAK;MACXC,KAAK,KAAAC,MAAA,CAAKjB,QAAQ,GAAGH,mBAAmB,GAAGD,YAAY,OAAI;MAC3DsB,MAAM,KAAAD,MAAA,CAAKjB,QAAQ,GAAGL,mBAAmB,GAAGD,YAAY;IAC1D,CAAC,CACF;IACDyB,OAAO,EAAE,CACP,GAAGjB,aAAa;EAEpB,CAAC;AACH,CAAC;AAED,SAASJ,mBAAmB"}

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/constants.d.ts

@@ -7,9 +7,11 @@ declare const CHART_HEIGHT = 425;
 declare const LEGEND_HEIGHT = 50;
 declare const LEGEND_HEIGHT_MOBILE = 70;
 declare const VERTICAL_LINE_COUNT = 10;
+declare const CANDLE_NUMBER_HOUR = 12;
+declare const CANDLE_MINUTE = 5;
 declare const COLOR_CONFIG: Record<string, string>;
 declare const TOOLTIP_LINE_COLOR_CONFIG: {
     DARK: string;
     LIGHT: string;
 };
-export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, };
+export { X_LABEL_SIZE, X_LABEL_SIZE_MOBILE, Y_LABEL_SIZE_MOBILE, Y_LABEL_SIZE, CHART_WIDTH, CHART_HEIGHT, LEGEND_HEIGHT, LEGEND_HEIGHT_MOBILE, VERTICAL_LINE_COUNT, COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, CANDLE_NUMBER_HOUR, CANDLE_MINUTE, };

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/formatters.d.ts

@@ -1,5 +1,7 @@
 import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
 import { TooltipFormatterParams } from './types';
+declare const isMonthWeek: (timeUnit: CurrencyPowerBalanceTimeUnit) => boolean;
 declare const xAxisLabelFormatter: (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => string;
+declare const intervalFormatter: (dataLength: number, timeUnit: CurrencyPowerBalanceTimeUnit) => number | ((index: number, value: string) => boolean);
 declare const tooltipFormatter: (values: TooltipFormatterParams[]) => string;
-export { tooltipFormatter, xAxisLabelFormatter, };
+export { isMonthWeek, tooltipFormatter, xAxisLabelFormatter, intervalFormatter, };

package/dist/types/CurrencyPowerBalanceWidget/components/Chart/options/getOption.d.ts

@@ -35,10 +35,11 @@ declare const getOption: (values: CurrencyPowerBalance[], timeUnit: CurrencyPowe
             show: boolean;
         };
         axisLabel: {
+            padding: number[];
+            align: string;
             margin: number;
-            showMinLabel: boolean;
             rotate: number;
-            interval: number;
+            interval: number | ((index: number, value: string) => boolean);
             formatter: (label: string) => string;
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-power-balance-widget",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "description": "Labs Currency Power Balance Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.90",
+    "@oanda/labs-widget-common": "^1.0.92",
     "@oanda/mono-i18n": "9.0.0",
     "echarts": "5.4.3",
     "echarts-for-react": "3.0.2",
@@ -23,5 +23,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "7523e69532a4aaefd52cfdbff7825060ac1fe898"
+  "gitHead": "8b8ecedc3a0715bfc7b70be8cce9902546a489a4"
 }

package/src/CurrencyPowerBalanceWidget/components/Chart/options/constants.tsx

@@ -9,6 +9,8 @@ const CHART_HEIGHT = 425;
 const LEGEND_HEIGHT = 50;
 const LEGEND_HEIGHT_MOBILE = 70;
 const VERTICAL_LINE_COUNT = 10;
+const CANDLE_NUMBER_HOUR = 12;
+const CANDLE_MINUTE = 5;
 
 const COLOR_CONFIG: Record<string, string> = {
   USD: colorPalette.greenLight,
@@ -38,4 +40,6 @@ export {
   VERTICAL_LINE_COUNT,
   COLOR_CONFIG,
   TOOLTIP_LINE_COLOR_CONFIG,
+  CANDLE_NUMBER_HOUR,
+  CANDLE_MINUTE,
 };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/formatters.ts

@@ -1,4 +1,5 @@
 import { CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+import { CANDLE_MINUTE, CANDLE_NUMBER_HOUR, VERTICAL_LINE_COUNT } from './constants';
 import { TooltipFormatterParams } from './types';
 
 const getDateAndTime = (param: string) => {
@@ -14,13 +15,46 @@ const dateFormat = (date: string) => `${new Date(date).toLocaleDateString(undefi
 
 const dateTimeFormat = ({ date, time }: { date: string, time: string }) => `${new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric' })}, ${time} UTC`;
 
+const isMonthWeek = (
+  timeUnit: CurrencyPowerBalanceTimeUnit,
+) => timeUnit === CurrencyPowerBalanceTimeUnit.M3
+  || timeUnit === CurrencyPowerBalanceTimeUnit.M1
+  || timeUnit === CurrencyPowerBalanceTimeUnit.W1;
+
 const xAxisLabelFormatter = (label: string, timeUnit: CurrencyPowerBalanceTimeUnit) => {
   const { date, time } = getDateAndTime(label);
-  const isDateFormat = timeUnit.startsWith('M') || timeUnit.startsWith('W') || time === '00:00';
+  const isDateFormat = isMonthWeek(timeUnit) || time === '00:00';
 
   return isDateFormat ? dateFormat(date) : time;
 };
 
+const intervalFormatter = (
+  dataLength: number,
+  timeUnit: CurrencyPowerBalanceTimeUnit,
+) => {
+  let offset = 0;
+
+  return isMonthWeek(timeUnit)
+    ? Math.round(dataLength / VERTICAL_LINE_COUNT)
+    : (index: number, value: string) => {
+      const everyTwoHours = index % 24 === 0 + offset;
+
+      if (timeUnit === CurrencyPowerBalanceTimeUnit.H24 && index === 0) {
+        offset = CANDLE_NUMBER_HOUR - new Date(value).getMinutes() / CANDLE_MINUTE;
+      }
+
+      const hoursIntervalConditions: Record<string, boolean> = {
+        [CurrencyPowerBalanceTimeUnit.H4]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),
+        [CurrencyPowerBalanceTimeUnit.H8]: value.endsWith(':00:00Z') || value.endsWith(':30:00Z'),
+        [CurrencyPowerBalanceTimeUnit.H24]: everyTwoHours && value.endsWith(':00:00Z'),
+        [CurrencyPowerBalanceTimeUnit.PreviousDay]: everyTwoHours,
+        [CurrencyPowerBalanceTimeUnit.CurrentDay]: value.endsWith(':00:00Z'),
+      };
+
+      return hoursIntervalConditions[timeUnit];
+    };
+};
+
 const tooltipFormatter = (values: TooltipFormatterParams[]) => {
   const date = dateTimeFormat(getDateAndTime(values[0].value[0]));
 
@@ -41,6 +75,8 @@ const tooltipFormatter = (values: TooltipFormatterParams[]) => {
 };
 
 export {
+  isMonthWeek,
   tooltipFormatter,
   xAxisLabelFormatter,
+  intervalFormatter,
 };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts

@@ -1,5 +1,5 @@
-import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';
-import { tooltipFormatter, xAxisLabelFormatter } from './formatters';
+import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG } from './constants';
+import { intervalFormatter, tooltipFormatter, xAxisLabelFormatter } from './formatters';
 import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
 
 const getOption = (
@@ -57,10 +57,11 @@ const getOption = (
         show: true,
       },
       axisLabel: {
+        padding: [0, 0, 0, 4],
+        align: 'left',
         margin: 10,
-        showMinLabel: false,
         rotate: -45,
-        interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),
+        interval: intervalFormatter(seriesData[0].data.length, timeUnit),
         formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),
       },
     },

package/src/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.ts

@@ -17,7 +17,7 @@ const getResponsiveOption = (isDesktop: boolean, isMobile: boolean, isDark: bool
     chartHeight: CHART_HEIGHT,
     xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,
     yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,
-    bottomLeftBox: isDesktop,
+    bottomLeftBox: false,
     marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,
   });
 

package/test/chartFormatters.test.ts

@@ -2,9 +2,18 @@
  * @jest-environment jsdom
  */
 
-import { xAxisLabelFormatter, tooltipFormatter } from '../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters';
+import { intervalFormatter, xAxisLabelFormatter, tooltipFormatter } from '../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters';
 import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
 
+describe('intervalFormatter', () => {
+  it('should return number of intervals for timeUnit equal to 3 months', () => {
+    expect(intervalFormatter(30, CurrencyPowerBalanceTimeUnit.M3)).toEqual(3);
+  });
+  it('should return function timeUnit equal to 24 hours', () => {
+    expect(intervalFormatter(30, CurrencyPowerBalanceTimeUnit.H24)).toEqual(expect.any(Function));
+  });
+});
+
 describe('tooltipFormatter', () => {
   it('should sort & format tooltip content', () => {
     const values = [{