@lobehub/charts 5.0.0 → 5.2.0

package/es/AreaChart/index.js

@@ -2,7 +2,7 @@
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var _excluded = ["data", "categories", "index", "stack", "colors", "valueFormatter", "xAxisLabelFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisAlign", "yAxisWidth", "intervalType", "showAnimation", "animationDuration", "showTooltip", "showLegend", "showGridLines", "showGradient", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories"];
+var _excluded = ["data", "categories", "index", "stack", "colors", "valueFormatter", "xAxisLabelFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisAlign", "yAxisWidth", "intervalType", "showAnimation", "animationDuration", "showTooltip", "showLegend", "showGridLines", "showGradient", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "yAxisDomain", "width", "height", "style", "customCategories"];
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -92,6 +92,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     loading = props.loading,
     xAxisLabel = props.xAxisLabel,
     yAxisLabel = props.yAxisLabel,
+    yAxisDomainOverride = props.yAxisDomain,
     _props$width = props.width,
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
@@ -128,7 +129,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
   var CustomTooltip = customTooltip;
   var paddingValue = !showXAxis && !showYAxis || startEndOnly && !showYAxis ? 0 : 20;
   var categoryColors = constructCategoryColors(categories, colors);
-  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  var yAxisDomain = yAxisDomainOverride !== null && yAxisDomainOverride !== void 0 ? yAxisDomainOverride : getYAxisDomain(autoMinValue, minValue, maxValue);
   var hasOnValueChange = !!onValueChange;
   var onDotClick = function onDotClick(itemData, event) {
     event.stopPropagation();

package/es/BarChart/index.js

@@ -2,7 +2,7 @@
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _templateObject;
-var _excluded = ["data", "categories", "customCategories", "index", "yAxisAlign", "colors", "valueFormatter", "xAxisLabelFormatter", "layout", "stack", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "className", "width", "height", "style"];
+var _excluded = ["data", "categories", "customCategories", "index", "yAxisAlign", "colors", "valueFormatter", "xAxisLabelFormatter", "layout", "stack", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "yAxisDomain", "className", "width", "height", "style"];
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -89,6 +89,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     loading = props.loading,
     xAxisLabel = props.xAxisLabel,
     yAxisLabel = props.yAxisLabel,
+    yAxisDomainOverride = props.yAxisDomain,
     className = props.className,
     _props$width = props.width,
     width = _props$width === void 0 ? '100%' : _props$width,
@@ -161,7 +162,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     setActiveBar(undefined);
   };
-  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  var yAxisDomain = yAxisDomainOverride !== null && yAxisDomainOverride !== void 0 ? yAxisDomainOverride : getYAxisDomain(autoMinValue, minValue, maxValue);
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: className,
     height: height,

package/es/ComposedChart/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ComposedChartProps } from './types';
+export type { ComposedChartProps, SeriesItem, YAxisConfig } from './types';
+declare const ComposedChart: import("react").ForwardRefExoticComponent<ComposedChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ComposedChart;

package/es/ComposedChart/index.js

@@ -0,0 +1,334 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2;
+var _excluded = ["data", "index", "series", "yAxisLeft", "yAxisRight", "colors", "xAxisLabelFormatter", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "intervalType", "showTooltip", "showLegend", "showGridLines", "allowDecimals", "noDataText", "enableLegendSlider", "rotateLabelX", "tickGap", "loading", "xAxisLabel", "className", "width", "height", "style"];
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Flexbox, Skeleton } from '@lobehub/ui';
+import { css, cssVar, cx } from 'antd-style';
+import { forwardRef, useMemo, useState } from 'react';
+import { Bar, CartesianGrid, Label, Legend, Line, ComposedChart as ReChartsComposedChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import ChartLegend from "../common/ChartLegend";
+import ChartTooltip from "../common/ChartTooltip";
+import CustomYAxisTick from "../common/CustomYAxisTick";
+import NoData from "../common/NoData";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { defaultValueFormatter } from "../utils";
+import { getMaxLabelLength } from "../utils/getMaxLabelLength";
+import { styles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ComposedChart = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _data$at, _yAxisLeft$valueForma3, _yAxisRight$valueForm3;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    index = props.index,
+    _props$series = props.series,
+    series = _props$series === void 0 ? [] : _props$series,
+    yAxisLeft = props.yAxisLeft,
+    yAxisRight = props.yAxisRight,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _props$xAxisLabelForm = props.xAxisLabelFormatter,
+    xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
+    _props$startEndOnly = props.startEndOnly,
+    startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
+    _props$animationDurat = props.animationDuration,
+    animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    _props$showXAxis = props.showXAxis,
+    showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis,
+    _props$showYAxis = props.showYAxis,
+    showYAxis = _props$showYAxis === void 0 ? true : _props$showYAxis,
+    _props$intervalType = props.intervalType,
+    intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
+    _props$showTooltip = props.showTooltip,
+    showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip,
+    _props$showLegend = props.showLegend,
+    showLegend = _props$showLegend === void 0 ? true : _props$showLegend,
+    _props$showGridLines = props.showGridLines,
+    showGridLines = _props$showGridLines === void 0 ? true : _props$showGridLines,
+    _props$allowDecimals = props.allowDecimals,
+    allowDecimals = _props$allowDecimals === void 0 ? true : _props$allowDecimals,
+    noDataText = props.noDataText,
+    _props$enableLegendSl = props.enableLegendSlider,
+    enableLegendSlider = _props$enableLegendSl === void 0 ? false : _props$enableLegendSl,
+    rotateLabelX = props.rotateLabelX,
+    _props$tickGap = props.tickGap,
+    tickGap = _props$tickGap === void 0 ? 5 : _props$tickGap,
+    loading = props.loading,
+    xAxisLabel = props.xAxisLabel,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 280 : _props$height,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(60),
+    _useState2 = _slicedToArray(_useState, 2),
+    legendHeight = _useState2[0],
+    setLegendHeight = _useState2[1];
+  var seriesColorMap = useMemo(function () {
+    var map = new Map();
+    series.forEach(function (s, i) {
+      var _s$color;
+      map.set(s.key, (_s$color = s.color) !== null && _s$color !== void 0 ? _s$color : colors[i % colors.length]);
+    });
+    return map;
+  }, [series, colors]);
+  var categoryColors = seriesColorMap;
+  var customCategories = useMemo(function () {
+    return series.reduce(function (acc, item) {
+      if (item.name) acc[item.key] = item.name;
+      return acc;
+    }, {});
+  }, [series]);
+  var hasRightAxis = series.some(function (s) {
+    return s.axis === 'right';
+  });
+  var leftYAxisWidth = useMemo(function () {
+    var _yAxisLeft$valueForma;
+    if (yAxisLeft !== null && yAxisLeft !== void 0 && yAxisLeft.width) return yAxisLeft.width;
+    var leftFormatter = (_yAxisLeft$valueForma = yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.valueFormatter) !== null && _yAxisLeft$valueForma !== void 0 ? _yAxisLeft$valueForma : defaultValueFormatter;
+    return getMaxLabelLength({
+      data: data,
+      index: index,
+      layout: 'horizontal',
+      valueFormatter: leftFormatter
+    });
+  }, [yAxisLeft, data, index]);
+  var rightYAxisWidth = useMemo(function () {
+    var _yAxisRight$valueForm;
+    if (yAxisRight !== null && yAxisRight !== void 0 && yAxisRight.width) return yAxisRight.width;
+    var rightFormatter = (_yAxisRight$valueForm = yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.valueFormatter) !== null && _yAxisRight$valueForm !== void 0 ? _yAxisRight$valueForm : defaultValueFormatter;
+    return getMaxLabelLength({
+      data: data,
+      index: index,
+      layout: 'horizontal',
+      valueFormatter: rightFormatter
+    });
+  }, [yAxisRight, data, index]);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Block, {
+    active: true,
+    height: height,
+    width: width
+  });
+  var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    height: height,
+    ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+      children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsComposedChart, {
+        data: data,
+        margin: {
+          bottom: xAxisLabel ? 30 : undefined,
+          left: yAxisLeft !== null && yAxisLeft !== void 0 && yAxisLeft.label ? 20 : undefined,
+          right: hasRightAxis ? yAxisRight !== null && yAxisRight !== void 0 && yAxisRight.label ? 20 : 5 : undefined,
+          top: 5
+        },
+        children: [showGridLines && /*#__PURE__*/_jsx(CartesianGrid, {
+          className: styles.gridLines,
+          horizontal: true,
+          vertical: false
+        }), /*#__PURE__*/_jsx(XAxis, {
+          angle: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.angle,
+          axisLine: false,
+          className: styles.label,
+          dataKey: index,
+          dy: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.verticalShift,
+          fill: "",
+          hide: !showXAxis,
+          interval: startEndOnly ? 'preserveStartEnd' : intervalType,
+          minTickGap: tickGap,
+          padding: {
+            left: paddingValue,
+            right: paddingValue
+          },
+          stroke: "",
+          tick: {
+            transform: 'translate(0, 6)'
+          },
+          tickFormatter: xAxisLabelFormatter,
+          tickLine: false,
+          ticks: startEndOnly ? [data[0][index], (_data$at = data.at(-1)) === null || _data$at === void 0 ? void 0 : _data$at[index]] : undefined,
+          children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
+            className: cx(styles.strongLabel, styles.emphasis),
+            offset: -20,
+            position: "insideBottom",
+            style: {
+              fill: cssVar.colorTextSecondary,
+              fontWeight: 500,
+              textAnchor: 'middle'
+            },
+            children: xAxisLabel
+          })
+        }), /*#__PURE__*/_jsx(YAxis, {
+          allowDecimals: allowDecimals,
+          axisLine: false,
+          className: styles.label,
+          domain: yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.domain,
+          fill: "",
+          hide: !showYAxis,
+          orientation: "left",
+          stroke: "",
+          tick: function tick(tickProps) {
+            var _yAxisLeft$valueForma2;
+            return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, tickProps), {}, {
+              align: "left",
+              formatter: (_yAxisLeft$valueForma2 = yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.valueFormatter) !== null && _yAxisLeft$valueForma2 !== void 0 ? _yAxisLeft$valueForma2 : defaultValueFormatter,
+              yAxisLabel: Boolean(yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.label)
+            }));
+          },
+          tickFormatter: (_yAxisLeft$valueForma3 = yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.valueFormatter) !== null && _yAxisLeft$valueForma3 !== void 0 ? _yAxisLeft$valueForma3 : defaultValueFormatter,
+          tickLine: false,
+          type: "number",
+          width: leftYAxisWidth,
+          yAxisId: "left",
+          children: (yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.label) && /*#__PURE__*/_jsx(Label, {
+            angle: -90,
+            className: styles.emphasis,
+            offset: -15,
+            position: "insideLeft",
+            style: {
+              fill: cssVar.colorTextSecondary,
+              fontWeight: 500,
+              textAnchor: 'middle'
+            },
+            children: yAxisLeft.label
+          })
+        }), hasRightAxis && /*#__PURE__*/_jsx(YAxis, {
+          allowDecimals: allowDecimals,
+          axisLine: false,
+          className: styles.label,
+          domain: yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.domain,
+          fill: "",
+          hide: !showYAxis,
+          orientation: "right",
+          stroke: "",
+          tick: function tick(tickProps) {
+            var _yAxisRight$valueForm2;
+            return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, tickProps), {}, {
+              align: "right",
+              anchor: "start",
+              formatter: (_yAxisRight$valueForm2 = yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.valueFormatter) !== null && _yAxisRight$valueForm2 !== void 0 ? _yAxisRight$valueForm2 : defaultValueFormatter,
+              yAxisLabel: Boolean(yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.label)
+            }));
+          },
+          tickFormatter: (_yAxisRight$valueForm3 = yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.valueFormatter) !== null && _yAxisRight$valueForm3 !== void 0 ? _yAxisRight$valueForm3 : defaultValueFormatter,
+          tickLine: false,
+          type: "number",
+          width: rightYAxisWidth,
+          yAxisId: "right",
+          children: (yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.label) && /*#__PURE__*/_jsx(Label, {
+            angle: 90,
+            className: styles.emphasis,
+            offset: -15,
+            position: "insideRight",
+            style: {
+              fill: cssVar.colorTextSecondary,
+              fontWeight: 500,
+              textAnchor: 'middle'
+            },
+            children: yAxisRight.label
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: showTooltip ? function (_ref) {
+            var active = _ref.active,
+              payload = _ref.payload,
+              label = _ref.label;
+            return /*#__PURE__*/_jsx(ChartTooltip, {
+              active: active,
+              categoryColors: categoryColors,
+              customCategories: customCategories,
+              label: label,
+              payload: payload,
+              valueFormatter: function valueFormatter(value, name) {
+                var _ref2, _currentSeries$valueF;
+                var currentSeries = series.find(function (item) {
+                  return item.key === name;
+                });
+                var formatter = (_ref2 = (_currentSeries$valueF = currentSeries === null || currentSeries === void 0 ? void 0 : currentSeries.valueFormatter) !== null && _currentSeries$valueF !== void 0 ? _currentSeries$valueF : (currentSeries === null || currentSeries === void 0 ? void 0 : currentSeries.axis) === 'right' ? yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.valueFormatter : yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.valueFormatter) !== null && _ref2 !== void 0 ? _ref2 : defaultValueFormatter;
+                return formatter(value);
+              }
+            });
+          } : undefined,
+          cursor: {
+            fill: cssVar.colorFillTertiary
+          },
+          isAnimationActive: false,
+          position: {
+            y: 0
+          },
+          wrapperStyle: {
+            outline: 'none'
+          }
+        }), showLegend && /*#__PURE__*/_jsx(Legend, {
+          content: function content(_ref3) {
+            var payload = _ref3.payload;
+            return ChartLegend({
+              payload: payload
+            }, categoryColors, setLegendHeight, undefined, undefined, enableLegendSlider, customCategories);
+          },
+          height: legendHeight,
+          verticalAlign: "top"
+        }), series.map(function (s) {
+          var _seriesColorMap$get, _s$axis;
+          var color = (_seriesColorMap$get = seriesColorMap.get(s.key)) !== null && _seriesColorMap$get !== void 0 ? _seriesColorMap$get : cssVar.colorPrimary;
+          var axisId = (_s$axis = s.axis) !== null && _s$axis !== void 0 ? _s$axis : 'left';
+          if (s.type === 'bar') {
+            return /*#__PURE__*/_jsx(Bar, {
+              animationDuration: animationDuration,
+              className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                      fill: ", ";\n                    "])), color)),
+              dataKey: s.key,
+              fill: "",
+              isAnimationActive: showAnimation,
+              name: s.key,
+              yAxisId: axisId
+            }, s.key);
+          }
+          if (s.type === 'line') {
+            return /*#__PURE__*/_jsx(Line, {
+              animationDuration: animationDuration,
+              className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                      stroke: ", ";\n                    "])), color)),
+              dataKey: s.key,
+              dot: false,
+              isAnimationActive: showAnimation,
+              name: s.key,
+              stroke: "",
+              strokeWidth: 2,
+              type: "monotone",
+              yAxisId: axisId
+            }, s.key);
+          }
+          return null;
+        })]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+ComposedChart.displayName = 'ComposedChart';
+export default ComposedChart;

package/es/ComposedChart/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const styles: {
+    emphasis: string;
+    gridLines: string;
+    label: string;
+    strongLabel: string;
+};

package/es/ComposedChart/styles.js

@@ -0,0 +1,13 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
+  return {
+    emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), cssVar.colorBorderSecondary),
+    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextDescription),
+    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextSecondary)
+  };
+});

package/es/ComposedChart/types.d.ts

@@ -0,0 +1,68 @@
+import type { HTMLAttributes } from 'react';
+import type { AxisDomain } from 'recharts/types/util/types';
+import type { NoDataProps } from "../common/NoData";
+import type { IntervalType, LabelFormatter, ValueFormatter } from "../types/charts";
+import type BaseAnimationTimingProps from '../common/BaseAnimationTimingProps';
+export interface SeriesItem {
+    /**
+     * Which y-axis this series is bound to.
+     * @default 'left'
+     */
+    axis?: 'left' | 'right';
+    /** Override color for this series. Falls back to the chart-level `colors` array. */
+    color?: string;
+    /** Data key in the `data` array */
+    key: string;
+    /** Display name shown in legend / tooltip. Defaults to `key`. */
+    name?: string;
+    /** Chart type for this series */
+    type: 'bar' | 'line';
+    /** Per-series value formatter used in tooltip */
+    valueFormatter?: ValueFormatter;
+}
+export interface YAxisConfig {
+    /**
+     * Forward to recharts `YAxis.domain`.
+     * Accepts numbers or `'auto'` / `'dataMin'` / `'dataMax'` / `'dataMin - N'` etc.
+     */
+    domain?: AxisDomain;
+    /** Label string rendered alongside the axis */
+    label?: string;
+    /** Custom tick formatter */
+    valueFormatter?: ValueFormatter;
+    /** Fixed axis width in pixels */
+    width?: number;
+}
+export interface ComposedChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDivElement> {
+    allowDecimals?: boolean;
+    colors?: string[];
+    data: any[];
+    enableLegendSlider?: boolean;
+    height?: string | number;
+    /** The key in `data` used as the shared x-axis category */
+    index: string;
+    intervalType?: IntervalType;
+    loading?: boolean;
+    noDataText?: NoDataProps['noDataText'];
+    rotateLabelX?: {
+        angle: number;
+        verticalShift?: number;
+        xAxisHeight?: number;
+    };
+    /** Series definitions — each item maps to a Bar or Line renderer */
+    series: SeriesItem[];
+    showGridLines?: boolean;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    startEndOnly?: boolean;
+    tickGap?: number;
+    width?: string | number;
+    xAxisLabel?: string;
+    xAxisLabelFormatter?: LabelFormatter;
+    /** Left y-axis configuration */
+    yAxisLeft?: YAxisConfig;
+    /** Right y-axis configuration */
+    yAxisRight?: YAxisConfig;
+}

package/es/ComposedChart/types.js

@@ -0,0 +1 @@
+export {};

package/es/LineChart/index.js

@@ -2,7 +2,7 @@
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "xAxisLabelFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "yAxisAlign", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories", "loading"];
+var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "xAxisLabelFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "yAxisAlign", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "yAxisDomain", "width", "height", "style", "customCategories", "loading"];
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -87,6 +87,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
     tickGap = _props$tickGap === void 0 ? 5 : _props$tickGap,
     xAxisLabel = props.xAxisLabel,
     yAxisLabel = props.yAxisLabel,
+    yAxisDomainOverride = props.yAxisDomain,
     _props$width = props.width,
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
@@ -124,7 +125,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
   var CustomTooltip = customTooltip;
   var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
   var categoryColors = constructCategoryColors(categories, colors);
-  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  var yAxisDomain = yAxisDomainOverride !== null && yAxisDomainOverride !== void 0 ? yAxisDomainOverride : getYAxisDomain(autoMinValue, minValue, maxValue);
   var hasOnValueChange = !!onValueChange;
   var onDotClick = function onDotClick(itemData, event) {
     event.stopPropagation();

package/es/common/BaseChartProps.d.ts

@@ -1,4 +1,5 @@
 import { ComponentType, HTMLAttributes } from 'react';
+import type { AxisDomain } from 'recharts/types/util/types';
 import type { NoDataProps } from "./NoData";
 import { IntervalType, LabelFormatter, ValueFormatter } from "../types/charts";
 import type BaseAnimationTimingProps from './BaseAnimationTimingProps';
@@ -47,6 +48,10 @@ interface BaseChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDi
     xAxisLabel?: string;
     xAxisLabelFormatter?: LabelFormatter;
     yAxisAlign?: 'left' | 'right';
+    /**
+     * Forward to recharts `YAxis.domain`. When set, overrides `autoMinValue` / `minValue` / `maxValue`.
+     */
+    yAxisDomain?: AxisDomain;
     yAxisLabel?: string;
     yAxisWidth?: number;
 }

package/es/common/ChartTooltip/index.d.ts

@@ -9,7 +9,7 @@ export interface ChartTooltipProps {
     footer?: ReactNode;
     label: string;
     payload: any;
-    valueFormatter: ValueFormatter;
+    valueFormatter: ValueFormatter | ((value: number, name?: string) => string);
 }
 declare const ChartTooltip: ({ active, payload, label, categoryColors, valueFormatter, customCategories, footer, }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ChartTooltip;

package/es/common/ChartTooltip/index.js

@@ -53,7 +53,7 @@ var ChartTooltip = function ChartTooltip(_ref2) {
           return /*#__PURE__*/_jsx(ChartTooltipRow, {
             color: (_categoryColors$get = categoryColors.get(name)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary,
             name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[name]) || name,
-            value: valueFormatter(value)
+            value: valueFormatter(value, name)
           }, "id-".concat(idx));
         })
       }), footer]

package/es/common/CustomYAxisTick.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ValueFormatter } from "../types/charts";
 interface CustomYAxisTickProps {
     align: 'left' | 'right';
+    anchor?: 'end' | 'middle' | 'start';
     formatter: ValueFormatter;
     payload: {
         value: number;

package/es/common/CustomYAxisTick.js

@@ -7,15 +7,17 @@ var CustomYAxisTick = /*#__PURE__*/memo(function (_ref) {
     y = _ref.y,
     payload = _ref.payload,
     align = _ref.align,
-    formatter = _ref.formatter;
+    formatter = _ref.formatter,
+    anchor = _ref.anchor;
   var yAxisLabelWidth = yAxisLabel ? 24 : 0;
+  var resolvedTextAnchor = anchor !== null && anchor !== void 0 ? anchor : align === 'left' ? 'start' : 'end';
   return /*#__PURE__*/_jsx("g", {
     transform: "translate(".concat(align === 'left' ? yAxisLabelWidth : x + yAxisLabelWidth, ",").concat(y, ")"),
     children: /*#__PURE__*/_jsx("text", {
       dy: 4,
       fill: cssVar.colorTextDescription,
       fontSize: 12,
-      textAnchor: align === 'left' ? 'start' : 'end',
+      textAnchor: resolvedTextAnchor,
       x: 0,
       y: 0,
       children: formatter(payload.value)

package/es/index.d.ts

@@ -5,6 +5,7 @@ export { type Bar, default as BarList, type BarListProps } from './BarList';
 export { default as ChartTooltip, type ChartTooltipProps } from './common/ChartTooltip';
 export { default as ChartTooltipFrame } from './common/ChartTooltip/ChartTooltipFrame';
 export { default as ChartTooltipRow } from './common/ChartTooltip/ChartTooltipRow';
+export { default as ComposedChart, type ComposedChartProps, type SeriesItem, type YAxisConfig, } from './ComposedChart';
 export * from './DataBars';
 export { default as DonutChart, type DonutChartProps } from './DonutChart';
 export { default as FunnelChart, type FunnelChartProps } from './FunnelChart';

package/es/index.js

@@ -5,6 +5,7 @@ export { default as BarList } from "./BarList";
 export { default as ChartTooltip } from "./common/ChartTooltip";
 export { default as ChartTooltipFrame } from "./common/ChartTooltip/ChartTooltipFrame";
 export { default as ChartTooltipRow } from "./common/ChartTooltip/ChartTooltipRow";
+export { default as ComposedChart } from "./ComposedChart";
 export * from "./DataBars";
 export { default as DonutChart } from "./DonutChart";
 export { default as FunnelChart } from "./FunnelChart";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",