amazing-react-charts 1.2.3 → 1.2.5

package/commonStyles.d.ts

@@ -10,6 +10,7 @@ export declare const CHART_HEIGHT: {
     width: string;
     height: number;
 };
+export declare const fontFamily = "Roboto, Helvetica, Arial, sans-serif";
 export declare const TOOLBOX_DEFAULT_PROPS: {
     showTitle: boolean;
     right: string;
@@ -19,14 +20,37 @@ export declare const TOOLTIP_DEFAULT_PROPS: {
     backgroundColor: string;
     extraCssText: string;
     textStyle: {
-        fontFamily: string;
         fontSize: number;
         color: string;
+        fontFamily: string;
     };
 };
+export declare const COMMON_STYLE: {
+    fontWeight: number;
+    color: string;
+    fontFamily: string;
+};
+export declare const LEGEND_STYLE: {
+    fontWeight: number;
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+};
+export declare const TITLE_STYLE: {
+    fontWeight: number;
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+};
+export declare const AXIS_SPLIT_LINE: {
+    type: string;
+    opacity: number;
+    color: string;
+};
 export declare const PictorialWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DonutWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChartStorieWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ChartContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChartWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChartTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const GaugeLegendContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -35,4 +59,4 @@ export declare const GaugeCircle: import("styled-components/dist/types").IStyled
     color?: string;
 }>> & string;
 export declare const GaugeLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CsvDownloadButtonStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const CsvDownloadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/commonStyles.js

@@ -4,12 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOOLTIP_DEFAULT_PROPS = exports.TOOLBOX_DEFAULT_PROPS = exports.STRAIGHT_LINE_ICON = exports.PictorialWrapper = exports.MIN_WIDTH = exports.GaugeLegendContent = exports.GaugeLegendContainer = exports.GaugeLegend = exports.GaugeCircle = exports.DonutWrapper = exports.DASHED_LINE_ICON = exports.CsvDownloadButtonStyle = exports.ChartWrapper = exports.ChartTitle = exports.ChartStorieWrapper = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
+exports.fontFamily = exports.TOOLTIP_DEFAULT_PROPS = exports.TOOLBOX_DEFAULT_PROPS = exports.TITLE_STYLE = exports.STRAIGHT_LINE_ICON = exports.PictorialWrapper = exports.MIN_WIDTH = exports.LEGEND_STYLE = exports.GaugeLegendContent = exports.GaugeLegendContainer = exports.GaugeLegend = exports.GaugeCircle = exports.DonutWrapper = exports.DASHED_LINE_ICON = exports.CsvDownloadButton = exports.ChartWrapper = exports.ChartTitle = exports.ChartStorieWrapper = exports.ChartContainer = exports.COMMON_STYLE = exports.CHART_WIDTH = exports.CHART_HEIGHT = exports.AXIS_SPLIT_LINE = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = require("flipper-ui/theme");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var neutral = _theme.theme.colors.neutral;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+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) { (0, _defineProperty2["default"])(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; }
+var _theme$colors = _theme.theme.colors,
+  gray = _theme$colors.gray,
+  neutral = _theme$colors.neutral;
 var STRAIGHT_LINE_ICON = exports.STRAIGHT_LINE_ICON = 'path://M0 0H25H50V2H25H0V0Z';
 var DASHED_LINE_ICON = exports.DASHED_LINE_ICON = 'path://M180 1000 l0 -40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40z, M810 ' + '1000 l0 -40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40zm, M1440 1000 l0 ' + '-40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40z';
 var MIN_WIDTH = exports.MIN_WIDTH = {
@@ -22,6 +27,7 @@ var CHART_HEIGHT = exports.CHART_HEIGHT = {
   width: '99.9%',
   height: 300
 };
+var fontFamily = exports.fontFamily = 'Roboto, Helvetica, Arial, sans-serif';
 var TOOLBOX_DEFAULT_PROPS = exports.TOOLBOX_DEFAULT_PROPS = {
   showTitle: false,
   right: '9.52%'
@@ -29,22 +35,39 @@ var TOOLBOX_DEFAULT_PROPS = exports.TOOLBOX_DEFAULT_PROPS = {
 var TOOLTIP_DEFAULT_PROPS = exports.TOOLTIP_DEFAULT_PROPS = {
   show: true,
   backgroundColor: "".concat(neutral[200], "90"),
-  extraCssText: 'border: none; padding: 5px;',
+  extraCssText: 'border: none; padding: 6px;',
   textStyle: {
-    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-    fontSize: 12,
-    color: neutral[50]
+    fontSize: 11.5,
+    color: neutral[50],
+    fontFamily: fontFamily
   }
 };
+var COMMON_STYLE = exports.COMMON_STYLE = {
+  fontWeight: 400,
+  color: neutral[200],
+  fontFamily: fontFamily
+};
+var LEGEND_STYLE = exports.LEGEND_STYLE = _objectSpread({
+  fontSize: 11.5
+}, COMMON_STYLE);
+var TITLE_STYLE = exports.TITLE_STYLE = _objectSpread({
+  fontSize: 16
+}, COMMON_STYLE);
+var AXIS_SPLIT_LINE = exports.AXIS_SPLIT_LINE = {
+  type: 'dashed',
+  opacity: 0.2,
+  color: gray[800]
+};
 var PictorialWrapper = exports.PictorialWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 330px;\n    margin: 0 auto;\n"])));
 var DonutWrapper = exports.DonutWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 500px;\n    margin: 0 auto;\n"])));
 var ChartStorieWrapper = exports.ChartStorieWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 50%;\n    margin: 0 auto;\n"])));
-var ChartWrapper = exports.ChartWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    position: relative;\n"])));
-var ChartTitle = exports.ChartTitle = _styledComponents["default"].h1(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    font-family: Roboto, Helvetica, Arial, sans-serif;\n    color: ", ";\n    top: 5;\n    margin: 0px;\n    font-size: 16px;\n    font-weight: 400;\n    position: absolute;\n"])), neutral[200]);
-var GaugeLegendContainer = exports.GaugeLegendContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    justify-content: center;\n"])));
-var GaugeLegendContent = exports.GaugeLegendContent = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n    font-family: Roboto, Helvetica, Arial, sans-serif;\n"])));
-var GaugeCircle = exports.GaugeCircle = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 20px;\n    height: 20px;\n    margin-bottom: 4px;\n    border-radius: 100%;\n    background-color: ", ";\n"])), function (props) {
+var ChartContainer = exports.ChartContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n"])));
+var ChartWrapper = exports.ChartWrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    position: relative;\n"])));
+var ChartTitle = exports.ChartTitle = _styledComponents["default"].h1(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    font-family: Roboto, Helvetica, Arial, sans-serif;\n    color: ", ";\n    top: 5;\n    margin: 0px;\n    font-size: 16px;\n    font-weight: 400;\n    position: absolute;\n"])), neutral[200]);
+var GaugeLegendContainer = exports.GaugeLegendContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    justify-content: center;\n"])));
+var GaugeLegendContent = exports.GaugeLegendContent = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n    font-family: Roboto, Helvetica, Arial, sans-serif;\n"])));
+var GaugeCircle = exports.GaugeCircle = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 20px;\n    height: 20px;\n    margin-bottom: 4px;\n    border-radius: 100%;\n    background-color: ", ";\n"])), function (props) {
   return props.color;
 });
-var GaugeLegend = exports.GaugeLegend = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n    font-size: 14px;\n"])));
-var CsvDownloadButtonStyle = exports.CsvDownloadButtonStyle = _styledComponents["default"].button(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n    font-weight: bold;\n    background: ", ";\n    text-transform: uppercase;\n    border: none;\n    width: 40px;\n    height: 20px;\n    cursor: pointer;\n    display: block;\n    position: absolute;\n    margin-top: -295px;\n    margin-left: 80%;\n\n    &:hover::after {\n        content: 'Save as CSV';\n        position: absolute;\n        text-transform: none;\n        font-weight: lighter;\n        top: 123%;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: ", ";\n        opacity: 55%;\n        color: ", ";\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 12px;\n        height: 19px;\n        white-space: nowrap;\n        text-align: center;\n        display: flex;\n        align-items: center;\n    }\n"])), neutral[50], neutral[200], neutral[50]);
+var GaugeLegend = exports.GaugeLegend = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n    font-size: 14px;\n"])));
+var CsvDownloadButton = exports.CsvDownloadButton = _styledComponents["default"].button(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n    font-weight: bold;\n    background: ", ";\n    text-transform: uppercase;\n    border: none;\n    width: 40px;\n    height: 20px;\n    cursor: pointer;\n    display: block;\n    position: absolute;\n    margin-top: -295px;\n    margin-left: 80%;\n\n    &:hover::after {\n        content: 'Save as CSV';\n        position: absolute;\n        text-transform: none;\n        font-weight: lighter;\n        top: 123%;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: ", ";\n        opacity: 55%;\n        color: ", ";\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 12px;\n        height: 19px;\n        white-space: nowrap;\n        text-align: center;\n        display: flex;\n        align-items: center;\n    }\n"])), neutral[50], neutral[200], neutral[50]);

package/core/area-chart/AreaChart.js

@@ -1,62 +1,89 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireDefault(require("react"));
-var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
+var _charts = require("echarts/charts");
+var _components = require("echarts/components");
+var echarts = _interopRequireWildcard(require("echarts/core"));
+var _renderers = require("echarts/renderers");
+var _core2 = _interopRequireDefault(require("echarts-for-react/lib/core"));
 var _auxiliarFunctions = require("../../lib/auxiliarFunctions");
 var _commonStyles = require("../../commonStyles");
 var _theme = require("flipper-ui/theme");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2["default"])(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; }
 var _theme$colors = _theme.theme.colors,
   blue = _theme$colors.blue,
-  gray = _theme$colors.gray,
   neutral = _theme$colors.neutral;
+echarts.use([_components.GridComponent, _components.TitleComponent, _renderers.CanvasRenderer, _components.LegendComponent, _components.TooltipComponent, _components.ToolboxComponent, _charts.LineChart, _components.DataZoomInsideComponent, _components.DataZoomSliderComponent]);
 var AreaChart = function AreaChart(props) {
   var _toolboxTooltip$saveA, _toolboxTooltip$dataV;
   var data = props.data,
-    xType = props.xType,
+    grid = props.grid,
     color = props.color,
-    tooltipProps = props.tooltip,
+    width = props.width,
+    title = props.title,
     yType = props.yType,
-    _props$lineMarkValue = props.lineMarkValue,
-    lineMarkValue = _props$lineMarkValue === void 0 ? 0 : _props$lineMarkValue,
-    _props$lineMarkColor = props.lineMarkColor,
-    lineMarkColor = _props$lineMarkColor === void 0 ? '' : _props$lineMarkColor,
-    _props$lineMakeName = props.lineMakeName,
-    lineMakeName = _props$lineMakeName === void 0 ? '' : _props$lineMakeName,
-    tooltipComplement = props.tooltipComplement,
-    yComplement = props.yComplement,
+    xType = props.xType,
+    tooltip = props.tooltip,
     dateFormat = props.dateFormat,
-    gridProps = props.grid,
-    width = props.width,
+    yComplement = props.yComplement,
     rotateLabel = props.rotateLabel,
+    scrollStart = props.scrollStart,
     fontLabelSize = props.fontLabelSize,
-    titleProps = props.title,
     toolboxTooltip = props.toolboxTooltip,
-    scrollStart = props.scrollStart;
-  var markLine = lineMarkValue && data.map(function () {
-    return lineMarkValue;
+    tooltipComplement = props.tooltipComplement,
+    _props$lineMarkName = props.lineMarkName,
+    lineMarkName = _props$lineMarkName === void 0 ? '' : _props$lineMarkName,
+    _props$lineMarkValue = props.lineMarkValue,
+    lineMarkValue = _props$lineMarkValue === void 0 ? 0 : _props$lineMarkValue,
+    _props$lineMarkColor = props.lineMarkColor,
+    lineMarkColor = _props$lineMarkColor === void 0 ? '' : _props$lineMarkColor;
+  var xData = data.map(function (item) {
+    return item.label;
   });
-  var yData = data.map(function (item) {
+  var chartData = data.map(function (item) {
     return item.result;
   });
-  var xData = data.map(function (item) {
-    return item.label;
+  var markLineData = lineMarkValue && xData.map(function () {
+    return lineMarkValue;
   });
-  var WIDTH_OPTS = {
-    width: width || 'auto'
-  };
-  var formatLabel = function formatLabel(chartValues) {
+  var formatDinamicLabel = function formatDinamicLabel(chartValues) {
     var data = chartValues.data;
     return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(data)).toString() + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(Number(data), yComplement !== null && yComplement !== void 0 ? yComplement : '').toString();
   };
+  var formatSingleTooltip = function formatSingleTooltip(chartValues) {
+    var _chartValues$ = chartValues[0],
+      axisValueLabel = _chartValues$.axisValueLabel,
+      data = _chartValues$.data;
+    var label = tooltip === null || tooltip === void 0 ? void 0 : tooltip.label;
+    var result = tooltip === null || tooltip === void 0 ? void 0 : tooltip.result;
+    var complement = tooltipComplement ? tooltipComplement : '';
+    var values = yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(data)) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(Number(data), yComplement !== null && yComplement !== void 0 ? yComplement : '').toString();
+    return "".concat(label, ": ").concat((0, _auxiliarFunctions.formatTooltip)(axisValueLabel, dateFormat), " <br>\n      ").concat(result, ": ").concat(values, " <br>\n      ").concat(complement);
+  };
+  var formatLabel = function formatLabel(item) {
+    var data = item.data;
+    if (typeof yComplement === 'function' && (0, _typeof2["default"])(item) === 'object') {
+      return yComplement(item.data);
+    }
+    if (typeof yComplement === 'function') {
+      return yComplement;
+    }
+    if (yType === 'time') {
+      return (0, _auxiliarFunctions.timeConvert)(Number(data)).toString() + 'h';
+    }
+    return (0, _auxiliarFunctions.takeLabelComplement)(Number(data), '').toString();
+  };
   var dinamicData = function dinamicData(item, charts) {
     var isTime = yType === 'time' ? 3400 : 4500;
     var dataRange = item.end - item.start;
@@ -65,12 +92,11 @@ var AreaChart = function AreaChart(props) {
       return charts.setOption({
         series: [{
           label: {
-            formatter: formatLabel,
             show: true,
-            position: 'top',
-            fontSize: yType === 'time' ? 10 : 11.5,
+            distance: 1.1,
             color: neutral[200],
-            distance: 1.1
+            formatter: formatDinamicLabel,
+            fontSize: yType === 'time' ? 10 : 11.5
           }
         }]
       });
@@ -83,22 +109,40 @@ var AreaChart = function AreaChart(props) {
       }]
     });
   };
-  var formatSingleTooltip = function formatSingleTooltip(chartValues) {
-    var label = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.label;
-    var result = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.result;
-    var _chartValues$ = chartValues[0],
-      axisValueLabel = _chartValues$.axisValueLabel,
-      data = _chartValues$.data;
-    var complement = tooltipComplement ? tooltipComplement : '';
-    var values = yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(data)) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(Number(data), yComplement !== null && yComplement !== void 0 ? yComplement : '');
-    return "".concat(label, ": ").concat((0, _auxiliarFunctions.formatTooltip)(axisValueLabel, dateFormat), " <br>\n      ").concat(result, ": ").concat(values, " <br>\n      ").concat(complement);
+  var series = {
+    type: 'line',
+    data: chartData,
+    label: _objectSpread({
+      show: true,
+      distance: 1.1,
+      formatter: formatLabel,
+      fontSize: yType === 'time' ? 10 : 11.5
+    }, _commonStyles.COMMON_STYLE),
+    itemStyle: {
+      color: color
+    },
+    lineStyle: {
+      color: color || blue[800]
+    },
+    areaStyle: {
+      opacity: 0.2,
+      color: color || blue[800]
+    }
   };
-  var toolbox = toolboxTooltip && _objectSpread(_objectSpread({}, _commonStyles.TOOLBOX_DEFAULT_PROPS), {}, {
-    feature: {
-      saveAsImage: toolboxTooltip.saveAsImage && (0, _auxiliarFunctions.getSaveAsImage)((_toolboxTooltip$saveA = toolboxTooltip.saveAsImage.title) !== null && _toolboxTooltip$saveA !== void 0 ? _toolboxTooltip$saveA : ''),
-      dataView: toolboxTooltip.dataView && (0, _auxiliarFunctions.getDataView)((_toolboxTooltip$dataV = toolboxTooltip.dataView.title) !== null && _toolboxTooltip$dataV !== void 0 ? _toolboxTooltip$dataV : '')
+  var seriesMarkLine = {
+    type: 'line',
+    symbolSize: 0,
+    showSymbol: false,
+    data: markLineData,
+    name: lineMarkName,
+    emphasis: {
+      scale: false
+    },
+    lineStyle: {
+      width: 2,
+      color: lineMarkColor
     }
-  });
+  };
   var zoomEvent = {
     dataZoom: dinamicData
   };
@@ -106,176 +150,113 @@ var AreaChart = function AreaChart(props) {
   var tooltipLabelFormat = dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd/MM/yyyy';
   var scrollable = xData.length > arrayInitialSize ? [{
     type: 'inside',
-    start: (0, _auxiliarFunctions.getInitialValues)(xData.length, dateFormat, scrollStart),
     end: 100,
     zoomLock: true,
-    zoomOnMouseWheel: 'shift'
+    zoomOnMouseWheel: 'shift',
+    start: (0, _auxiliarFunctions.getInitialValues)(xData.length, dateFormat, scrollStart)
   }, {
-    bottom: 10,
-    show: true,
     type: 'slider',
-    start: (0, _auxiliarFunctions.getInitialValues)(xData.length, dateFormat, scrollStart),
+    show: true,
+    bottom: 10,
     end: 100,
+    start: (0, _auxiliarFunctions.getInitialValues)(xData.length, dateFormat, scrollStart),
     labelFormatter: function labelFormatter(_, item) {
       return (0, _auxiliarFunctions.formatTime)(item, tooltipLabelFormat);
     }
   }] : [];
-  var options = {
-    // @ts-expect-error fix
-    series: [{
-      type: 'line',
-      data: yData,
-      label: {
-        formatter: function formatter(item) {
-          if (typeof yComplement === 'function' && (0, _typeof2["default"])(item) === 'object') {
-            return yComplement(item.data);
-          }
-          if (typeof yComplement === 'function') {
-            return yComplement;
-          }
-
-          // this can't be returned
-          // it breaks the labels
-          // eslint-disable-next-line @stylistic/max-len
-          // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-          formatLabel;
-        },
-        show: true,
-        position: 'top',
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: yType === 'time' ? 10 : 11.5,
-        color: neutral[200],
-        distance: 1.1
-      },
-      lineStyle: {
-        color: color || blue[800]
-      },
-      areaStyle: {
-        color: color || blue[800],
-        opacity: 0.2
-      },
-      itemStyle: {
-        color: color
-      }
-    }, {
-      name: lineMakeName,
-      symbolSize: 0,
-      showSymbol: false,
-      type: 'line',
-      data: markLine,
-      lineStyle: {
-        color: lineMarkColor
+  var toolbox = toolboxTooltip && _objectSpread(_objectSpread({}, _commonStyles.TOOLBOX_DEFAULT_PROPS), {}, {
+    feature: {
+      saveAsImage: toolboxTooltip.saveAsImage && (0, _auxiliarFunctions.getSaveAsImage)((_toolboxTooltip$saveA = toolboxTooltip.saveAsImage.title) !== null && _toolboxTooltip$saveA !== void 0 ? _toolboxTooltip$saveA : ''),
+      dataView: toolboxTooltip.dataView && (0, _auxiliarFunctions.getDataView)((_toolboxTooltip$dataV = toolboxTooltip.dataView.title) !== null && _toolboxTooltip$dataV !== void 0 ? _toolboxTooltip$dataV : '')
+    }
+  });
+  var options = function options() {
+    return {
+      dataZoom: scrollable,
+      color: [lineMarkColor],
+      series: [series, seriesMarkLine],
+      grid: _objectSpread(_objectSpread({}, grid || {
+        bottom: 75
+      }), {}, {
+        show: true
+      }),
+      title: {
+        text: title,
+        left: '6.2%',
+        textStyle: _objectSpread({}, _commonStyles.TITLE_STYLE)
       },
-      emphasis: {
-        scale: false
-      }
-    }],
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: xData,
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'dashed',
-          opacity: 0.2,
-          color: gray[800]
-        }
+      xAxis: {
+        type: 'category',
+        data: xData,
+        boundaryGap: false,
+        splitLine: {
+          show: true,
+          lineStyle: _objectSpread({}, _commonStyles.AXIS_SPLIT_LINE)
+        },
+        axisLabel: _objectSpread(_objectSpread({}, _commonStyles.COMMON_STYLE), {}, {
+          rotate: rotateLabel || 0,
+          fontSize: fontLabelSize || 11.5,
+          formatter: function formatter(item) {
+            return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(item, (0, _auxiliarFunctions.getDateFormatType)(dateFormat || 'yyyy-MM')) : item;
+          }
+        })
       },
-      axisLabel: {
-        formatter: function formatter(item) {
-          return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(item, (0, _auxiliarFunctions.getDateFormatType)(dateFormat || 'yyyy-MM')) : item;
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: true,
+          lineStyle: _objectSpread({}, _commonStyles.AXIS_SPLIT_LINE)
         },
-        rotate: rotateLabel || 0,
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: fontLabelSize || 11.5,
-        color: neutral[200]
-      }
-    },
-    yAxis: {
-      max: lineMarkValue ? _auxiliarFunctions.fixedDomain : _auxiliarFunctions.getDomain,
-      type: 'value',
-      splitLine: {
-        show: true,
-        lineStyle: {
+        axisTick: {
+          show: true
+        },
+        axisLine: {
+          show: true,
           type: 'dashed',
-          opacity: 0.2,
-          color: gray[800]
-        }
-      },
-      axisLabel: {
-        margin: yType === 'time' ? 16 : 14,
-        formatter: function formatter(item) {
-          return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(item) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(item, yComplement !== null && yComplement !== void 0 ? yComplement : '').toString();
+          lineStyle: {
+            color: neutral[200]
+          }
         },
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: fontLabelSize || 11.5,
-        color: neutral[200]
+        axisLabel: _objectSpread(_objectSpread({}, _commonStyles.COMMON_STYLE), {}, {
+          fontSize: fontLabelSize || 11.5,
+          margin: yType === 'time' ? 16 : 14,
+          formatter: function formatter(item) {
+            return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(item) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(item, yComplement !== null && yComplement !== void 0 ? yComplement : '').toString();
+          }
+        }),
+        max: lineMarkValue ? _auxiliarFunctions.fixedDomain : _auxiliarFunctions.getDomain
       },
-      axisLine: {
-        show: true
+      legend: {
+        top: 30,
+        icon: _commonStyles.STRAIGHT_LINE_ICON,
+        textStyle: _objectSpread({}, _commonStyles.COMMON_STYLE)
       },
-      axisTick: {
-        // @ts-expect-error issue
-        // https://github.com/apache/incubator-echarts/issues/13618
-        alignWithLabel: true,
-        show: true
-      }
-    },
-    color: [lineMarkColor],
-    grid: _objectSpread(_objectSpread({}, gridProps || {
-      bottom: 75
-    }), {}, {
-      show: true
-    }),
-    legend: {
-      icon: _commonStyles.STRAIGHT_LINE_ICON,
-      top: 30,
-      data: [lineMakeName],
-      itemGap: 30,
-      textStyle: {
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        color: neutral[200]
-      }
-    },
-    title: {
-      left: '6.2%',
-      show: titleProps !== undefined,
-      text: titleProps,
-      textAlign: 'left',
-      textStyle: {
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: 16,
-        fontWeight: 400,
-        color: neutral[200]
-      }
-    },
-    tooltip: tooltipProps && {
-      formatter: formatSingleTooltip,
-      trigger: 'axis',
-      backgroundColor: "".concat(neutral[200], "99"),
-      textStyle: {
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: 11.5,
-        color: neutral[50]
-      },
-      extraCssText: 'border: none; padding: 6px;'
-    },
-    dataZoom: scrollable,
-    toolbox: _objectSpread(_objectSpread({}, toolbox), {}, {
-      tooltip: _objectSpread(_objectSpread({}, _commonStyles.TOOLTIP_DEFAULT_PROPS), {}, {
-        formatter: function formatter(param) {
-          return "<div>".concat(param.title, "</div>");
-        }
+      tooltip: tooltip && _objectSpread({
+        trigger: 'axis',
+        formatter: formatSingleTooltip
+      }, _commonStyles.TOOLTIP_DEFAULT_PROPS),
+      toolbox: _objectSpread(_objectSpread({}, toolbox), {}, {
+        tooltip: _objectSpread(_objectSpread({}, _commonStyles.TOOLTIP_DEFAULT_PROPS), {}, {
+          formatter: function formatter(param) {
+            return "<div>".concat(param.title, "</div>");
+          }
+        })
       })
-    })
+    };
   };
-  return /*#__PURE__*/_react["default"].createElement(_echartsForReact["default"], {
-    lazyUpdate: true,
+  return /*#__PURE__*/_react["default"].createElement(_core2["default"], {
     notMerge: true,
-    style: _commonStyles.CHART_HEIGHT,
-    opts: WIDTH_OPTS,
-    option: options,
+    lazyUpdate: true,
+    echarts: echarts,
+    option: options(),
+    style: {
+      width: '99.9%',
+      height: 300
+    },
+    opts: {
+      renderer: 'canvas',
+      width: width !== null && width !== void 0 ? width : 'auto'
+    },
     onEvents: zoomEvent
   });
 };

package/core/audiometry-chart/AudiometryChart.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import type { IDefaultChartProps, TAudiometryDataEntry, AudiometryDataTooltip, LineStyleType, TSimpleLegend } from '../types';
 export interface IProps extends Omit<IDefaultChartProps, 'data'> {
-    data: TAudiometryDataEntry[][];
     height?: number;
-    lineType?: LineStyleType;
-    symbolsSize?: number;
     colors?: string[];
-    legendsPosition?: 'top' | 'bottom';
     legendGap?: number;
-    legendType?: 'scroll' | 'plain';
-    legends?: TSimpleLegend[];
+    symbolsSize?: number;
     legendPadding?: number;
+    tooltipMarker?: boolean;
     legendItemWidth?: number;
     legendItemHeight?: number;
-    tooltipMarker?: boolean;
+    lineType?: LineStyleType;
+    legends?: TSimpleLegend[];
+    data: TAudiometryDataEntry[][];
+    legendType?: 'scroll' | 'plain';
+    legendsPosition?: 'top' | 'bottom';
     formatTooltip?(items: AudiometryDataTooltip[]): string;
 }
 declare const AudiometryChart: (props: IProps) => React.JSX.Element;