@lobehub/charts 5.1.0 → 5.2.1

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ComposedChartProps } from './types';
-export type { ComposedChartProps, SeriesItem } 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

@@ -188,6 +188,7 @@ var ComposedChart = /*#__PURE__*/forwardRef(function (props, ref) {
           allowDecimals: allowDecimals,
           axisLine: false,
           className: styles.label,
+          domain: yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.domain,
           fill: "",
           hide: !showYAxis,
           orientation: "left",
@@ -197,7 +198,6 @@ var ComposedChart = /*#__PURE__*/forwardRef(function (props, ref) {
             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,
-              textAnchor: "end",
               yAxisLabel: Boolean(yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.label)
             }));
           },
@@ -222,6 +222,7 @@ var ComposedChart = /*#__PURE__*/forwardRef(function (props, ref) {
           allowDecimals: allowDecimals,
           axisLine: false,
           className: styles.label,
+          domain: yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.domain,
           fill: "",
           hide: !showYAxis,
           orientation: "right",
@@ -230,8 +231,8 @@ var ComposedChart = /*#__PURE__*/forwardRef(function (props, ref) {
             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,
-              textAnchor: "start",
               yAxisLabel: Boolean(yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.label)
             }));
           },
@@ -252,40 +253,9 @@ var ComposedChart = /*#__PURE__*/forwardRef(function (props, ref) {
             },
             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;
+          content: function content(_ref) {
+            var payload = _ref.payload;
             return ChartLegend({
               payload: payload
             }, categoryColors, setLegendHeight, undefined, undefined, enableLegendSlider, customCategories);
@@ -322,6 +292,38 @@ var ComposedChart = /*#__PURE__*/forwardRef(function (props, ref) {
             }, s.key);
           }
           return null;
+        }), showTooltip && /*#__PURE__*/_jsx(Tooltip, {
+          content: function content(_ref2) {
+            var active = _ref2.active,
+              payload = _ref2.payload,
+              label = _ref2.label;
+            return /*#__PURE__*/_jsx(ChartTooltip, {
+              active: active,
+              categoryColors: categoryColors,
+              customCategories: customCategories,
+              label: label,
+              payload: payload,
+              valueFormatter: function valueFormatter(value, name) {
+                var _ref3, _currentSeries$valueF;
+                var currentSeries = series.find(function (item) {
+                  return item.key === name;
+                });
+                var formatter = (_ref3 = (_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 && _ref3 !== void 0 ? _ref3 : defaultValueFormatter;
+                return formatter(value);
+              }
+            });
+          },
+          cursor: {
+            stroke: cssVar.colorTextSecondary,
+            strokeWidth: 1
+          },
+          isAnimationActive: false,
+          position: {
+            y: 0
+          },
+          wrapperStyle: {
+            outline: 'none'
+          }
         })]
       }) : /*#__PURE__*/_jsx(NoData, {
         noDataText: noDataText

package/es/ComposedChart/types.d.ts

@@ -1,4 +1,5 @@
 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';
@@ -20,6 +21,11 @@ export interface SeriesItem {
     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 */

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/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,7 +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 } from './ComposedChart';
+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/package.json

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