amazing-react-charts 1.2.2 → 1.2.4

package/commonStyles.d.ts

@@ -19,14 +19,36 @@ 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 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 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;
+export declare const GaugeLegendContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const GaugeCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    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;

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.DonutWrapper = exports.DASHED_LINE_ICON = exports.CsvDownloadButtonStyle = exports.ChartWrapper = exports.ChartTitle = exports.ChartStorieWrapper = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
+exports.TOOLTIP_DEFAULT_PROPS = exports.TOOLBOX_DEFAULT_PROPS = exports.TITLE_STYLE = 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.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;
-var neutral = _theme.theme.colors.neutral;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+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 = {
@@ -29,16 +34,35 @@ 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: 'Roboto, Helvetica, Arial, sans-serif'
   }
 };
+var COMMON_STYLE = exports.COMMON_STYLE = {
+  fontWeight: 400,
+  color: neutral[200],
+  fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+};
+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 CsvDownloadButtonStyle = exports.CsvDownloadButtonStyle = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (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 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) {
+  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]);

package/core/gauge-chart/GaugeChart.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { IDefaultChartProps, GaugeData } from '../types';
+export interface IProps extends Omit<IDefaultChartProps, 'data'> {
+    data: GaugeData[];
+    legendValue?: number;
+    axisLineWidth?: number;
+    titleFontSize?: number;
+    detailFontSize?: number;
+    height?: number | string;
+    colorLine?: [number, string][];
+    axisLabel?: {
+        limit: number;
+        label: string;
+    }[];
+    legendData?: {
+        icon: JSX.Element;
+        legend: number;
+    }[];
+}
+declare const GaugeChart: (props: IProps) => React.JSX.Element;
+export default GaugeChart;

package/core/gauge-chart/GaugeChart.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
+var _auxiliarFunctions = require("../../lib/auxiliarFunctions");
+var _commonStyles = require("../../commonStyles");
+var _theme = require("flipper-ui/theme");
+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,
+  amber = _theme$colors.amber,
+  green = _theme$colors.green,
+  red = _theme$colors.red,
+  orange = _theme$colors.orange,
+  gray = _theme$colors.gray,
+  neutral = _theme$colors.neutral;
+var GaugeChart = function GaugeChart(props) {
+  var _toolboxTooltip$saveA;
+  var data = props.data,
+    height = props.height,
+    tooltip = props.tooltip,
+    axisLabel = props.axisLabel,
+    colorLine = props.colorLine,
+    legendData = props.legendData,
+    legendValue = props.legendValue,
+    axisLineWidth = props.axisLineWidth,
+    titleFontSize = props.titleFontSize,
+    toolboxTooltip = props.toolboxTooltip,
+    detailFontSize = props.detailFontSize;
+  var CHART_STYLE = {
+    width: '99.9%',
+    height: height || 400
+  };
+  var getColor = function getColor(value) {
+    return value <= (legendValue !== null && legendValue !== void 0 ? legendValue : 75) ? red[500] : green[300];
+  };
+  var formatTooltip = function formatTooltip() {
+    return tooltip ? "".concat(tooltip.label, ": ").concat(Number(tooltip.labelComplement) * 100, " %") : '';
+  };
+  var formatAxisLabel = function formatAxisLabel(value) {
+    var match = axisLabel === null || axisLabel === void 0 ? void 0 : axisLabel.find(function (item) {
+      return item.limit === value;
+    });
+    return match ? match.label : '';
+  };
+  var toolbox = toolboxTooltip && {
+    showTitle: false,
+    top: '10%',
+    right: '15%',
+    feature: {
+      saveAsImage: toolboxTooltip.saveAsImage && (0, _auxiliarFunctions.getSaveAsImage)((_toolboxTooltip$saveA = toolboxTooltip.saveAsImage.title) !== null && _toolboxTooltip$saveA !== void 0 ? _toolboxTooltip$saveA : '')
+    }
+  };
+  var options = {
+    series: [{
+      type: 'gauge',
+      startAngle: 180,
+      endAngle: 0,
+      center: ['50%', '70%'],
+      radius: '90%',
+      min: 0,
+      max: 1,
+      splitNumber: 8,
+      data: data,
+      axisLine: {
+        lineStyle: {
+          width: axisLineWidth !== null && axisLineWidth !== void 0 ? axisLineWidth : 75,
+          color: colorLine !== null && colorLine !== void 0 ? colorLine : [[0.25, red[500]], [0.5, orange[600]], [0.75, amber[500]], [1, green[300]]]
+        }
+      },
+      pointer: {
+        width: 20,
+        length: '95%',
+        offsetCenter: [0, '-5%'],
+        icon: 'path://M12.8,-0.7l12,-40.1H0.7L12.8,-0.7z',
+        itemStyle: {
+          color: gray[900]
+        }
+      },
+      axisTick: {
+        length: 0
+      },
+      splitLine: {
+        length: 0
+      },
+      axisLabel: {
+        color: gray[800],
+        fontSize: 16,
+        distance: -40,
+        rotate: 'tangential',
+        formatter: formatAxisLabel
+      },
+      title: {
+        fontSize: titleFontSize !== null && titleFontSize !== void 0 ? titleFontSize : 30,
+        color: gray[800],
+        offsetCenter: [0, '20%']
+      },
+      detail: {
+        fontSize: detailFontSize !== null && detailFontSize !== void 0 ? detailFontSize : 24,
+        color: gray[900],
+        valueAnimation: true,
+        offsetCenter: [0, '40%'],
+        formatter: function formatter(value) {
+          return Math.round(value * 100) + ' %';
+        }
+      }
+    }],
+    tooltip: {
+      trigger: 'item',
+      formatter: formatTooltip,
+      backgroundColor: "".concat(neutral[200], "99"),
+      textStyle: {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        fontSize: 11.5,
+        color: neutral[50]
+      },
+      extraCssText: 'border: none; padding: 6px;'
+    },
+    toolbox: _objectSpread(_objectSpread({}, toolbox), {}, {
+      tooltip: _objectSpread(_objectSpread({}, _commonStyles.TOOLTIP_DEFAULT_PROPS), {}, {
+        // @ts-expect-error issue
+        // if the trigger it's not set to none, the tooltip shows an arrow
+        trigger: 'none',
+        formatter: function formatter(param) {
+          return "<div>".concat(param.title, "</div>");
+        }
+      })
+    })
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_echartsForReact["default"], {
+    option: options,
+    style: CHART_STYLE
+  }), /*#__PURE__*/_react["default"].createElement(_commonStyles.GaugeLegendContainer, null, legendData === null || legendData === void 0 ? void 0 : legendData.map(function (it, i) {
+    return /*#__PURE__*/_react["default"].createElement(_commonStyles.GaugeLegendContent, {
+      key: i
+    }, /*#__PURE__*/_react["default"].createElement("div", null, it.icon), /*#__PURE__*/_react["default"].createElement(_commonStyles.GaugeCircle, {
+      color: getColor(it.legend)
+    }), /*#__PURE__*/_react["default"].createElement(_commonStyles.GaugeLegend, null, it.legend + ' %'));
+  })));
+};
+var _default = exports["default"] = GaugeChart;

package/core/gauge-chart/GaugeChart.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import GaugeChart from './GaugeChart';
+declare const meta: Meta<typeof GaugeChart>;
+export default meta;
+type Story = StoryObj<typeof GaugeChart>;
+export declare const gaugeChart: Story;
+export declare const gaugeChartWithoutLegend: Story;
+export declare const gaugeChartWithLabelAndTooltip: Story;

package/core/line-chart/LineChart.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
-import type { IDefaultChartProps, EntryDataLine } from '../types';
+import type { IDefaultChartProps } from '../types';
 export interface IProps extends Omit<IDefaultChartProps, 'data'> {
-    data: EntryDataLine[];
+    data: {
+        name: string;
+        type?: string;
+        data: number[];
+    }[];
+    smooth?: boolean;
     colors?: string[];
+    xAxisData: string[];
     showLabel?: boolean;
-    smooth?: boolean;
     disableMarks?: boolean;
     axisNames?: {
         x: string;
         y: string;
     };
 }
-declare const LineChart: (props: IProps) => React.JSX.Element;
-export default LineChart;
+export declare const LineChart: (props: IProps) => React.JSX.Element;

package/core/line-chart/LineChart.js

@@ -1,240 +1,193 @@
 "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;
+exports.LineChart = void 0;
 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,
-  gray = _theme$colors.gray,
-  neutral = _theme$colors.neutral;
-var takeYdata = function takeYdata(entryData) {
-  return entryData.map(function (item) {
-    return item.result;
-  });
-};
-var LineChart = function LineChart(props) {
+var neutral = _theme.theme.colors.neutral;
+echarts.use([_components.GridComponent, _components.TitleComponent, _renderers.CanvasRenderer, _components.LegendComponent, _components.TooltipComponent, _components.ToolboxComponent, _charts.LineChart, _components.DataZoomInsideComponent, _components.DataZoomSliderComponent]);
+var LineChart = exports.LineChart = function LineChart(props) {
   var _toolboxTooltip$saveA, _toolboxTooltip$dataV;
   var data = props.data,
+    grid = props.grid,
+    title = props.title,
     width = props.width,
-    gridProps = props.grid,
-    colors = props.colors,
     xType = props.xType,
+    yType = props.yType,
+    colors = props.colors,
+    smooth = props.smooth,
+    xAxisData = props.xAxisData,
+    showLabel = props.showLabel,
     dateFormat = props.dateFormat,
     rotateLabel = props.rotateLabel,
-    fontLabelSize = props.fontLabelSize,
-    yType = props.yType,
+    scrollStart = props.scrollStart,
     yComplement = props.yComplement,
-    titleProps = props.title,
-    toolboxTooltip = props.toolboxTooltip,
-    showLabel = props.showLabel,
-    smooth = props.smooth,
     disableMarks = props.disableMarks,
-    scrollStart = props.scrollStart;
-  var yData = data[0].values.map(function (item) {
-    return item.result;
-  });
-  var xData = data[0].values.map(function (item) {
-    return item.label;
-  });
-  var names = data.map(function (item) {
-    return item.name;
-  });
-  var formatLabel = function formatLabel(chartValues) {
-    var data = chartValues.data;
+    fontLabelSize = props.fontLabelSize,
+    toolboxTooltip = props.toolboxTooltip;
+  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;
+    }
     return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(data)) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(Number(data), yComplement !== null && yComplement !== void 0 ? yComplement : '');
   };
-  var series = data.map(function (item) {
-    return {
-      type: 'line',
-      name: item.name,
-      data: takeYdata(item.values),
-      showSymbol: !disableMarks,
-      lineStyle: {
-        width: 1.5,
-        type: item.name === 'ref' ? 'dashed' : undefined
-      },
-      smooth: smooth,
-      label: {
-        show: showLabel,
-        position: 'top',
-        fontSize: yType === 'time' ? 10 : 11.5,
-        color: neutral[200],
-        distance: 1.1,
-        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 @typescript-eslint/no-unused-expressions
-          formatLabel;
-        }
-      }
+  var formatTooltip = function formatTooltip(lines) {
+    var takeComplement = function takeComplement(value) {
+      return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(value)) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(Number(value), yComplement !== null && yComplement !== void 0 ? yComplement : '');
     };
-  });
+    var linesTooltips = lines.map(function (line) {
+      return line.seriesName + ': ' + takeComplement(Number(line.value)) + '<br>';
+    });
+    var tooltipTitle = xType === 'time' ? (0, _auxiliarFunctions.formatTime)(dateFormat === 'yyyy-MM' ? lines[0].name + '-02' : lines[0].name, (0, _auxiliarFunctions.getDateFormatType)(dateFormat !== null && dateFormat !== void 0 ? dateFormat : 'yyyy-MM')) : lines[0].name;
+    return "".concat(tooltipTitle, " <br> ").concat(linesTooltips.join(' '));
+  };
   var arrayInitialSize = scrollStart || (dateFormat === 'yyyy-MM' ? 12 : 30);
   var tooltipLabelFormat = dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd/MM/yyyy';
-  var scrollable = xData.length > arrayInitialSize ? [{
+  var scrollable = xAxisData.length > arrayInitialSize ? [{
     type: 'inside',
-    start: (0, _auxiliarFunctions.getInitialValues)(xData.length, dateFormat, scrollStart),
+    start: (0, _auxiliarFunctions.getInitialValues)(xAxisData.length, dateFormat, scrollStart),
     end: 100,
     zoomLock: true,
     zoomOnMouseWheel: 'shift'
   }, {
-    bottom: 10,
     show: true,
+    bottom: 10,
     type: 'slider',
-    start: (0, _auxiliarFunctions.getInitialValues)(xData.length, dateFormat, scrollStart),
+    start: (0, _auxiliarFunctions.getInitialValues)(xAxisData.length, dateFormat, scrollStart),
     end: 100,
     labelFormatter: function labelFormatter(_, item2) {
       return (0, _auxiliarFunctions.formatTime)(item2, tooltipLabelFormat);
     }
   }] : [];
-  var formatTooltip = function formatTooltip(lines) {
-    var takeComplement = function takeComplement(value) {
-      return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(value)) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(Number(value), yComplement !== null && yComplement !== void 0 ? yComplement : '');
-    };
-    var linesTooltips = lines.map(function (line) {
-      return line.seriesName + ': ' + takeComplement(Number(line.value)) + '<br>';
-    });
-    var tooltipTitle = xType === 'time' ? (0, _auxiliarFunctions.formatTime)(dateFormat === 'yyyy-MM' ? lines[0].name + '-02' : lines[0].name, (0, _auxiliarFunctions.getDateFormatType)(dateFormat !== null && dateFormat !== void 0 ? dateFormat : 'yyyy-MM')) : lines[0].name;
-    return "".concat(tooltipTitle, " <br> ").concat(linesTooltips.join(' '));
-  };
   var toolbox = toolboxTooltip && _objectSpread(_objectSpread({}, _commonStyles.TOOLBOX_DEFAULT_PROPS), {}, {
-    showTitle: false,
-    right: '9.52%',
     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 = {
-    color: colors,
-    series: series,
-    xAxis: {
-      type: 'category',
-      data: xData,
-      boundaryGap: false,
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'dashed',
-          opacity: 0.2,
-          color: gray[800]
-        }
+  var series = data.map(function (item) {
+    var _item$type;
+    return _objectSpread(_objectSpread({}, item), {}, {
+      smooth: smooth,
+      showSymbol: !disableMarks,
+      type: (_item$type = item.type) !== null && _item$type !== void 0 ? _item$type : 'line',
+      label: {
+        distance: 1.1,
+        show: showLabel,
+        color: neutral[200],
+        formatter: formatLabel,
+        fontSize: yType === 'time' ? 10 : 11.5
       },
-      axisLabel: {
-        formatter: function formatter(item) {
-          return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(dateFormat === 'yyyy-MM' ? item + '-02' : item, (0, _auxiliarFunctions.getDateFormatType)(dateFormat !== null && dateFormat !== void 0 ? dateFormat : 'yyyy-MM')) : item;
-        },
-        rotate: rotateLabel || 0,
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontWeight: 400,
-        fontSize: fontLabelSize || 11.5,
-        color: neutral[200]
+      lineStyle: {
+        width: 1.5,
+        type: item.name === 'ref' ? 'dashed' : undefined
       }
-    },
-    yAxis: {
-      type: 'value',
-      data: yData,
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'dashed',
-          opacity: 0.2,
-          color: gray[800]
-        }
+    });
+  });
+  var getOption = function getOption() {
+    return {
+      color: colors,
+      series: series,
+      dataZoom: scrollable,
+      grid: _objectSpread(_objectSpread({}, grid || {
+        bottom: 75
+      }), {}, {
+        show: true
+      }),
+      title: {
+        text: title,
+        left: '6.2%',
+        textStyle: _objectSpread({}, _commonStyles.TITLE_STYLE)
       },
-      axisLabel: {
-        margin: yType === 'time' ? 16 : 14,
-        formatter: function formatter(item) {
-          return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(item).toString() + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(item, yComplement !== null && yComplement !== void 0 ? yComplement : '').toString();
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        boundaryGap: false,
+        splitLine: {
+          show: true,
+          lineStyle: _objectSpread({}, _commonStyles.AXIS_SPLIT_LINE)
         },
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontWeight: 400,
-        fontSize: fontLabelSize || 11.5,
-        color: neutral[200]
+        axisLabel: _objectSpread(_objectSpread({}, _commonStyles.COMMON_STYLE), {}, {
+          rotate: rotateLabel || 0,
+          fontSize: fontLabelSize || 11.5,
+          formatter: function formatter(item) {
+            return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(dateFormat === 'yyyy-MM' ? item + '-02' : item, (0, _auxiliarFunctions.getDateFormatType)(dateFormat !== null && dateFormat !== void 0 ? dateFormat : 'yyyy-MM')) : item;
+          }
+        })
       },
-      axisTick: {
-        // @ts-expect-error issue
-        // https://github.com/apache/incubator-echarts/issues/13618
-        alignWithLabel: true,
-        show: true
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: true,
+          lineStyle: _objectSpread({}, _commonStyles.AXIS_SPLIT_LINE)
+        },
+        axisTick: {
+          show: true
+        },
+        axisLine: {
+          show: true,
+          type: 'solid',
+          lineStyle: {
+            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).toString() + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(item, yComplement !== null && yComplement !== void 0 ? yComplement : '');
+          }
+        })
       },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: neutral[200]
-        }
-      }
-    },
-    grid: _objectSpread(_objectSpread({}, gridProps || {
-      bottom: 75
-    }), {}, {
-      show: true
-    }),
-    // @ts-expect-error issue
-    legend: {
-      data: names,
-      icon: _commonStyles.STRAIGHT_LINE_ICON,
-      textStyle: {
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontWeight: 400,
-        color: neutral[200]
-      }
-    },
-    tooltip: {
-      formatter: formatTooltip,
-      trigger: 'axis',
-      backgroundColor: "".concat(neutral[200], "99"),
-      textStyle: {
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-        fontSize: 11.5,
-        color: neutral[50]
+      legend: {
+        icon: _commonStyles.STRAIGHT_LINE_ICON,
+        textStyle: _objectSpread({}, _commonStyles.COMMON_STYLE)
       },
-      extraCssText: 'border: none; padding: 6px;'
-    },
-    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]
-      }
-    },
-    dataZoom: scrollable,
-    toolbox: _objectSpread(_objectSpread({}, toolbox), {}, {
-      tooltip: _objectSpread(_objectSpread({}, _commonStyles.TOOLTIP_DEFAULT_PROPS), {}, {
-        formatter: function formatter(param) {
-          return "<div>".concat(param.title, "</div>");
-        }
+      tooltip: _objectSpread({
+        trigger: 'axis',
+        formatter: formatTooltip
+      }, _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_WIDTH,
-    opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
-    option: options
+    lazyUpdate: true,
+    echarts: echarts,
+    option: getOption(),
+    style: {
+      width: width !== null && width !== void 0 ? width : '99.9%'
+    },
+    opts: {
+      renderer: 'canvas',
+      width: 'auto'
+    }
   });
-};
-var _default = exports["default"] = LineChart;
+};

package/core/line-chart/LineChart.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import LineChart from './LineChart';
+import { LineChart } from './LineChart';
 declare const meta: Meta<typeof LineChart>;
 export default meta;
 type Story = StoryObj<typeof LineChart>;

package/core/types.d.ts

@@ -87,10 +87,6 @@ export type TooltipEntryProps = {
     labelComplement?: string | number;
     resultComplement?: string | number;
 };
-export type EntryDataLine = {
-    name?: string;
-    values: EntryData[];
-};
 export type EntryData = {
     label: string;
     result: number;
@@ -102,6 +98,10 @@ export type PictorialEntryData = {
     value: number;
     symbol: string;
 };
+export type GaugeData = {
+    value: number;
+    name: string;
+};
 export type EntryDataNTuples = Array<EntryData[]>;
 export type DomainValues = {
     min: number;

package/index.d.ts

@@ -4,7 +4,6 @@ export { default as CoordinateLineChart } from './core/coordinate-line-chart/Coo
 export { default as DonutChart } from './core/donut-chart/DonutChart';
 export { default as ForecastAreaChart } from './core/forecast-area-chart/ForecastAreaChart';
 export { default as HorizontalBarChart } from './core/horizontal-bar-chart/HorizontalBarChart';
-export { default as LineChart } from './core/line-chart/LineChart';
 export { default as MultipurposeChart } from './core/multipurpose-chart/MultipurposeChart';
 export { default as PictorialChart } from './core/pictorial-chart/PictorialChart';
 export { default as PieChart } from './core/pie-chart/PieChart';

package/index.js

@@ -46,12 +46,6 @@ Object.defineProperty(exports, "HorizontalBarChart", {
     return _HorizontalBarChart["default"];
   }
 });
-Object.defineProperty(exports, "LineChart", {
-  enumerable: true,
-  get: function get() {
-    return _LineChart["default"];
-  }
-});
 Object.defineProperty(exports, "MultipurposeChart", {
   enumerable: true,
   get: function get() {
@@ -100,7 +94,6 @@ var _CoordinateLineChart = _interopRequireDefault(require("./core/coordinate-lin
 var _DonutChart = _interopRequireDefault(require("./core/donut-chart/DonutChart"));
 var _ForecastAreaChart = _interopRequireDefault(require("./core/forecast-area-chart/ForecastAreaChart"));
 var _HorizontalBarChart = _interopRequireDefault(require("./core/horizontal-bar-chart/HorizontalBarChart"));
-var _LineChart = _interopRequireDefault(require("./core/line-chart/LineChart"));
 var _MultipurposeChart = _interopRequireDefault(require("./core/multipurpose-chart/MultipurposeChart"));
 var _PictorialChart = _interopRequireDefault(require("./core/pictorial-chart/PictorialChart"));
 var _PieChart = _interopRequireDefault(require("./core/pie-chart/PieChart"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "amazing-react-charts",
-    "version": "1.2.2",
+    "version": "1.2.4",
     "description": "An amazing react charts package based in echarts",
     "main": "dist/index.js",
     "license": "MIT",
@@ -29,7 +29,7 @@
         "test": "NODE_ENV=test jest --no-cache --verbose --passWithNoTests --noStackTrace --runInBand --updateSnapshot"
     },
     "dependencies": {
-        "echarts": "5.5.1",
+        "echarts": "5.6.0",
         "echarts-for-react": "3.0.2"
     },
     "devDependencies": {
@@ -40,26 +40,27 @@
         "@babel/preset-env": "7.26.9",
         "@babel/preset-react": "7.26.3",
         "@babel/preset-typescript": "7.26.0",
-        "@storybook/addon-essentials": "8.5.8",
+        "@storybook/addon-essentials": "8.6.0",
         "@storybook/addon-webpack5-compiler-babel": "3.0.5",
-        "@storybook/blocks": "8.5.8",
-        "@storybook/react": "8.5.8",
-        "@storybook/react-webpack5": "8.5.8",
-        "@stylistic/eslint-plugin": "4.0.1",
+        "@storybook/blocks": "8.6.0",
+        "@storybook/react": "8.6.0",
+        "@storybook/react-webpack5": "8.6.0",
+        "@stylistic/eslint-plugin": "4.1.0",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.6.3",
         "@testing-library/react": "16.2.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "29.5.14",
-        "@types/node": "22.13.4",
+        "@types/node": "22.13.5",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
-        "@typescript-eslint/eslint-plugin": "8.24.1",
-        "@typescript-eslint/parser": "8.24.1",
-        "canvas": "2.11.2",
+        "@typescript-eslint/eslint-plugin": "8.25.0",
+        "@typescript-eslint/parser": "8.25.0",
+        "canvas": "3.1.0",
+        "cross-env": "^7.0.3",
         "date-fns": "4.1.0",
-        "eslint": "9.20.1",
-        "eslint-config-prettier": "10.0.1",
+        "eslint": "9.21.0",
+        "eslint-config-prettier": "10.0.2",
         "eslint-import-resolver-typescript": "3.8.3",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.3",
@@ -68,16 +69,16 @@
         "flipper-ui": "0.35.6",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "prettier": "3.5.1",
+        "prettier": "3.5.2",
         "ramda": "0.30.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "8.5.8",
+        "storybook": "8.6.0",
         "styled-components": "6.1.15",
-        "ts-jest": "29.2.5",
+        "ts-jest": "29.2.6",
         "ts-node": "10.9.2",
         "typescript": "5.7.3",
-        "typescript-eslint": "8.24.1",
+        "typescript-eslint": "8.25.0",
         "webpack": "5.98.0"
     },
     "peerDependencies": {

package/test/gauge-chart.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';