@lobehub/charts 1.0.0

package/es/DonutChart/renderInactiveShape.js

@@ -0,0 +1,27 @@
+import { Sector } from 'recharts';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var renderInactiveShape = function renderInactiveShape(props) {
+  var cx = props.cx,
+    cy = props.cy,
+    innerRadius = props.innerRadius,
+    outerRadius = props.outerRadius,
+    startAngle = props.startAngle,
+    endAngle = props.endAngle,
+    className = props.className;
+  return /*#__PURE__*/_jsx("g", {
+    children: /*#__PURE__*/_jsx(Sector, {
+      className: className,
+      cx: cx,
+      cy: cy,
+      endAngle: endAngle,
+      fill: "",
+      innerRadius: innerRadius,
+      opacity: 0.3,
+      outerRadius: outerRadius,
+      startAngle: startAngle,
+      style: {
+        outline: 'none'
+      }
+    })
+  });
+};

package/es/DonutChart/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    emphasis: import("antd-style").SerializedStyles;
+    gridLines: import("antd-style").SerializedStyles;
+    label: import("antd-style").SerializedStyles;
+    strongLabel: import("antd-style").SerializedStyles;
+}>;

package/es/DonutChart/styles.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  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  "])), token.colorBorderSecondary),
+    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextDescription),
+    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+  };
+});

package/es/LineChart/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import BaseChartProps from "../common/BaseChartProps";
+import { CurveType } from "../types";
+export interface LineChartProps extends BaseChartProps {
+    connectNulls?: boolean;
+    curveType?: CurveType;
+}
+declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default LineChart;

package/es/LineChart/index.js

@@ -0,0 +1,347 @@
+'use client';
+
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height"];
+import { css } from 'antd-style';
+import { Fragment, forwardRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { CartesianGrid, Dot, Label, Legend, Line, LineChart as ReChartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import ChartLegend from "../common/ChartLegend";
+import ChartTooltip from "../common/ChartTooltip";
+import NoData from "../common/NoData";
+import { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } from "../common/utils";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { defaultValueFormatter } from "../utils";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme,
+    styles = _useStyles.styles;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$categories = props.categories,
+    categories = _props$categories === void 0 ? [] : _props$categories,
+    index = props.index,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _props$valueFormatter = props.valueFormatter,
+    valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$startEndOnly = props.startEndOnly,
+    startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
+    _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$yAxisWidth = props.yAxisWidth,
+    yAxisWidth = _props$yAxisWidth === void 0 ? 56 : _props$yAxisWidth,
+    _props$intervalType = props.intervalType,
+    intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
+    _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$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$autoMinValue = props.autoMinValue,
+    autoMinValue = _props$autoMinValue === void 0 ? false : _props$autoMinValue,
+    _props$curveType = props.curveType,
+    curveType = _props$curveType === void 0 ? 'linear' : _props$curveType,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
+    _props$connectNulls = props.connectNulls,
+    connectNulls = _props$connectNulls === void 0 ? false : _props$connectNulls,
+    _props$allowDecimals = props.allowDecimals,
+    allowDecimals = _props$allowDecimals === void 0 ? true : _props$allowDecimals,
+    noDataText = props.noDataText,
+    className = props.className,
+    onValueChange = props.onValueChange,
+    _props$enableLegendSl = props.enableLegendSlider,
+    enableLegendSlider = _props$enableLegendSl === void 0 ? false : _props$enableLegendSl,
+    customTooltip = props.customTooltip,
+    rotateLabelX = props.rotateLabelX,
+    _props$tickGap = props.tickGap,
+    tickGap = _props$tickGap === void 0 ? 5 : _props$tickGap,
+    xAxisLabel = props.xAxisLabel,
+    yAxisLabel = props.yAxisLabel,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? '20rem' : _props$height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var CustomTooltip = customTooltip;
+  var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
+  var _useState = useState(60),
+    _useState2 = _slicedToArray(_useState, 2),
+    legendHeight = _useState2[0],
+    setLegendHeight = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeDot = _useState4[0],
+    setActiveDot = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeLegend = _useState6[0],
+    setActiveLegend = _useState6[1];
+  var categoryColors = constructCategoryColors(categories, colors);
+  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  var hasOnValueChange = !!onValueChange;
+  function onDotClick(itemData, event) {
+    event.stopPropagation();
+    if (!hasOnValueChange) return;
+    if (itemData.index === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) && itemData.dataKey === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) || hasOnlyOneValueForThisKey(data, itemData.dataKey) && activeLegend && activeLegend === itemData.dataKey) {
+      setActiveLegend(undefined);
+      setActiveDot(undefined);
+      onValueChange === null || onValueChange === void 0 || onValueChange(null);
+    } else {
+      setActiveLegend(itemData.dataKey);
+      setActiveDot({
+        dataKey: itemData.dataKey,
+        index: itemData.index
+      });
+      onValueChange === null || onValueChange === void 0 || onValueChange(_objectSpread({
+        categoryClicked: itemData.dataKey,
+        eventType: 'dot'
+      }, itemData.payload));
+    }
+  }
+  function onCategoryClick(dataKey) {
+    if (!hasOnValueChange) return;
+    if (dataKey === activeLegend && !activeDot || hasOnlyOneValueForThisKey(data, dataKey) && activeDot && activeDot.dataKey === dataKey) {
+      setActiveLegend(undefined);
+      onValueChange === null || onValueChange === void 0 || onValueChange(null);
+    } else {
+      setActiveLegend(dataKey);
+      onValueChange === null || onValueChange === void 0 || onValueChange({
+        categoryClicked: dataKey,
+        eventType: 'category'
+      });
+    }
+    setActiveDot(undefined);
+  }
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    height: height,
+    ref: ref,
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+      children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsLineChart, {
+        data: data,
+        margin: {
+          bottom: xAxisLabel ? 30 : undefined,
+          left: yAxisLabel ? 20 : undefined,
+          right: yAxisLabel ? 5 : undefined,
+          top: 5
+        },
+        onClick: hasOnValueChange && (activeLegend || activeDot) ? function () {
+          setActiveDot(undefined);
+          setActiveLegend(undefined);
+          onValueChange === null || onValueChange === void 0 || onValueChange(null);
+        } : undefined,
+        children: [showGridLines ? /*#__PURE__*/_jsx(CartesianGrid, {
+          className: styles.gridLines,
+          horizontal: true,
+          vertical: false
+        }) : undefined, /*#__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: "",
+          height: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.xAxisHeight,
+          hide: !showXAxis,
+          interval: startEndOnly ? 'preserveStartEnd' : intervalType,
+          minTickGap: tickGap,
+          padding: {
+            left: paddingValue,
+            right: paddingValue
+          },
+          stroke: "",
+          tick: {
+            transform: 'translate(0, 6)'
+          },
+          tickLine: false,
+          ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
+          children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
+            className: cx(styles.strongLabel, styles.emphasis),
+            offset: -20,
+            position: "insideBottom",
+            children: xAxisLabel
+          })
+        }), /*#__PURE__*/_jsx(YAxis, {
+          allowDecimals: allowDecimals,
+          axisLine: false,
+          className: styles.label,
+          domain: yAxisDomain,
+          fill: "",
+          hide: !showYAxis,
+          stroke: "",
+          tick: {
+            transform: 'translate(-3, 0)'
+          },
+          tickFormatter: valueFormatter,
+          tickLine: false,
+          type: "number",
+          width: yAxisWidth,
+          children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
+            angle: -90,
+            className: cx(styles.strongLabel, styles.emphasis),
+            offset: -15,
+            position: "insideLeft",
+            style: {
+              textAnchor: 'middle'
+            },
+            children: yAxisLabel
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: showTooltip ? function (_ref) {
+            var active = _ref.active,
+              payload = _ref.payload,
+              label = _ref.label;
+            return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
+              active: active,
+              label: label,
+              payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
+                var _categoryColors$get;
+                return _objectSpread(_objectSpread({}, payloadItem), {}, {
+                  color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
+                });
+              })
+            }) : /*#__PURE__*/_jsx(ChartTooltip, {
+              active: active,
+              categoryColors: categoryColors,
+              label: label,
+              payload: payload,
+              valueFormatter: valueFormatter
+            });
+          } : undefined,
+          cursor: {
+            stroke: '#d1d5db',
+            strokeWidth: 1
+          },
+          isAnimationActive: false,
+          position: {
+            y: 0
+          },
+          wrapperStyle: {
+            outline: 'none'
+          }
+        }), showLegend ? /*#__PURE__*/_jsx(Legend, {
+          content: function content(_ref2) {
+            var payload = _ref2.payload;
+            return ChartLegend({
+              payload: payload
+            }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
+              return onCategoryClick(clickedLegendItem);
+            } : undefined, enableLegendSlider);
+          },
+          height: legendHeight,
+          verticalAlign: "top"
+        }) : undefined, categories.map(function (category) {
+          var _categoryColors$get3;
+          return /*#__PURE__*/_jsx(Line, {
+            activeDot: function activeDot(props) {
+              var _categoryColors$get2;
+              var dotCx = props.dotCx,
+                dotCy = props.dotCy,
+                stroke = props.stroke,
+                strokeLinecap = props.strokeLinecap,
+                strokeLinejoin = props.strokeLinejoin,
+                strokeWidth = props.strokeWidth,
+                dataKey = props.dataKey;
+              return /*#__PURE__*/_jsx(Dot, {
+                className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        fill: ", ";\n                      "])), (_categoryColors$get2 = categoryColors.get(dataKey)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),
+                cx: dotCx,
+                cy: dotCy,
+                fill: "",
+                onClick: function onClick(dotProps, event) {
+                  return onDotClick(props, event);
+                },
+                r: 5,
+                stroke: stroke,
+                strokeLinecap: strokeLinecap,
+                strokeLinejoin: strokeLinejoin,
+                strokeWidth: strokeWidth
+              });
+            },
+            animationDuration: animationDuration,
+            className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : theme.colorPrimary)),
+            connectNulls: connectNulls,
+            dataKey: category,
+            dot: function dot(props) {
+              var stroke = props.stroke,
+                strokeLinecap = props.strokeLinecap,
+                strokeLinejoin = props.strokeLinejoin,
+                strokeWidth = props.strokeWidth,
+                dotCx = props.cx,
+                dotCy = props.cy,
+                dataKey = props.dataKey,
+                index = props.index;
+              if (hasOnlyOneValueForThisKey(data, category) && !(activeDot || activeLegend && activeLegend !== category) || (activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) === index && (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) === category) {
+                var _categoryColors$get4;
+                return /*#__PURE__*/_jsx(Dot, {
+                  className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                          fill: ", ";\n                        "])), (_categoryColors$get4 = categoryColors.get(dataKey)) !== null && _categoryColors$get4 !== void 0 ? _categoryColors$get4 : theme.colorPrimary)),
+                  cx: dotCx,
+                  cy: dotCy,
+                  fill: "",
+                  r: 5,
+                  stroke: stroke,
+                  strokeLinecap: strokeLinecap,
+                  strokeLinejoin: strokeLinejoin,
+                  strokeWidth: strokeWidth
+                }, index);
+              }
+              return /*#__PURE__*/_jsx(Fragment, {}, index);
+            },
+            isAnimationActive: showAnimation,
+            name: category,
+            stroke: "",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeOpacity: activeDot || activeLegend && activeLegend !== category ? 0.3 : 1,
+            strokeWidth: 2,
+            type: curveType
+          }, category);
+        }), onValueChange ? categories.map(function (category) {
+          return /*#__PURE__*/_jsx(Line, {
+            connectNulls: connectNulls,
+            dataKey: category,
+            fill: "transparent",
+            legendType: "none",
+            name: category,
+            onClick: function onClick(props, event) {
+              event.stopPropagation();
+              var name = props.name;
+              onCategoryClick(name);
+            },
+            stroke: "transparent",
+            strokeOpacity: 0,
+            strokeWidth: 12,
+            style: {
+              cursor: 'pointer'
+            },
+            tooltipType: "none",
+            type: curveType
+          }, category);
+        }) : undefined]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+LineChart.displayName = 'LineChart';
+export default LineChart;

package/es/LineChart/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    emphasis: import("antd-style").SerializedStyles;
+    gridLines: import("antd-style").SerializedStyles;
+    label: import("antd-style").SerializedStyles;
+    strongLabel: import("antd-style").SerializedStyles;
+}>;

package/es/LineChart/styles.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  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  "])), token.colorBorderSecondary),
+    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextDescription),
+    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+  };
+});

package/es/ScatterChart/ScatterChartTooltip.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ScatterChartValueFormatter } from "../types";
+export interface ScatterChartTooltipProps {
+    active: boolean | undefined;
+    axis: any;
+    category?: string;
+    categoryColors: Map<string, string>;
+    label: string;
+    payload: any;
+    valueFormatter: ScatterChartValueFormatter;
+}
+declare const ScatterChartTooltip: React.NamedExoticComponent<ScatterChartTooltipProps>;
+export default ScatterChartTooltip;

package/es/ScatterChart/ScatterChartTooltip.js

@@ -0,0 +1,83 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { Circle } from 'lucide-react';
+import React, { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { ChartTooltipFrame } from "../common/ChartTooltip/ChartTooltipFrame";
+import { defaultValueFormatter } from "../utils";
+import ScatterChartTooltipRow from "./ScatterChartTooltipRow";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    header: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-weight: 500;\n    border-bottom: 1px solid ", ";\n  "])), token.colorBorderSecondary)
+  };
+});
+var ScatterChartTooltip = /*#__PURE__*/memo(function (_ref2) {
+  var _categoryColors$get, _payload$;
+  var label = _ref2.label,
+    active = _ref2.active,
+    payload = _ref2.payload,
+    valueFormatter = _ref2.valueFormatter,
+    axis = _ref2.axis,
+    category = _ref2.category,
+    categoryColors = _ref2.categoryColors;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme,
+    styles = _useStyles.styles;
+  var color = category ? (_categoryColors$get = categoryColors.get(payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.payload[category])) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary : theme.colorPrimary;
+  if (active && payload) {
+    return /*#__PURE__*/_jsxs(ChartTooltipFrame, {
+      children: [/*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        className: cx(styles.header),
+        gap: 8,
+        horizontal: true,
+        paddingBlock: 8,
+        paddingInline: 16,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          color: color,
+          fill: color,
+          icon: Circle,
+          size: {
+            fontSize: 10
+          }
+        }), /*#__PURE__*/_jsx(Typography.Paragraph, {
+          ellipsis: true,
+          style: {
+            margin: 0
+          },
+          children: label
+        })]
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        gap: 4,
+        paddingBlock: 8,
+        paddingInline: 16,
+        style: {
+          marginTop: 4
+        },
+        children: payload.map(function (_ref3, idx) {
+          var _Object$keys$find, _valueFormatter;
+          var value = _ref3.value,
+            name = _ref3.name;
+          var valueFormatterKey = (_Object$keys$find = Object.keys(axis).find(function (key) {
+            return axis[key] === name;
+          })) !== null && _Object$keys$find !== void 0 ? _Object$keys$find : '';
+          var valueFormatterFn = (_valueFormatter = valueFormatter[valueFormatterKey]) !== null && _valueFormatter !== void 0 ? _valueFormatter : defaultValueFormatter;
+          return /*#__PURE__*/_jsx(ScatterChartTooltipRow, {
+            name: name,
+            value: valueFormatter && valueFormatterFn ? valueFormatterFn(value) : "".concat(value)
+          }, "id-".concat(idx));
+        })
+      })]
+    });
+  }
+  return null;
+});
+export default ScatterChartTooltip;

package/es/ScatterChart/ScatterChartTooltipRow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ChartTooltipRowProps {
+    name: string;
+    value: string;
+}
+declare const ChartTooltipRow: React.NamedExoticComponent<ChartTooltipRowProps>;
+export default ChartTooltipRow;

package/es/ScatterChart/ScatterChartTooltipRow.js

@@ -0,0 +1,43 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    number: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-weight: 500;\n  "]))),
+    title: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextSecondary)
+  };
+});
+var ChartTooltipRow = /*#__PURE__*/memo(function (_ref2) {
+  var value = _ref2.value,
+    name = _ref2.name;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    gap: 32,
+    horizontal: true,
+    justify: 'space-between',
+    children: [/*#__PURE__*/_jsx(Typography.Paragraph, {
+      className: styles.title,
+      ellipsis: true,
+      style: {
+        margin: 0
+      },
+      children: name
+    }), /*#__PURE__*/_jsx(Typography.Paragraph, {
+      className: styles.number,
+      style: {
+        margin: 0
+      },
+      children: value
+    })]
+  });
+});
+export default ChartTooltipRow;

package/es/ScatterChart/index.d.ts

@@ -0,0 +1,51 @@
+import { ComponentType, HTMLAttributes } from 'react';
+import { CustomTooltipProps } from "../common/CustomTooltipProps";
+import type { EventProps } from "../types";
+import { IntervalType, ValueFormatter } from "../types";
+import BaseAnimationTimingProps from '../common/BaseAnimationTimingProps';
+import { type NoDataProps } from '../common/NoData';
+export type ScatterChartValueFormatter = {
+    size?: ValueFormatter;
+    x?: ValueFormatter;
+    y?: ValueFormatter;
+};
+export interface ScatterChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDivElement> {
+    allowDecimals?: boolean;
+    autoMinXValue?: boolean;
+    autoMinYValue?: boolean;
+    category: string;
+    colors?: string[];
+    customTooltip?: ComponentType<CustomTooltipProps>;
+    data: any[];
+    enableLegendSlider?: boolean;
+    intervalType?: IntervalType;
+    maxXValue?: number;
+    maxYValue?: number;
+    minXValue?: number;
+    minYValue?: number;
+    noDataText?: NoDataProps['noDataText'];
+    onValueChange?: (value: EventProps) => void;
+    rotateLabelX?: {
+        angle: number;
+        verticalShift: number;
+        xAxisHeight: number;
+    };
+    showGridLines?: boolean;
+    showLegend?: boolean;
+    showOpacity?: boolean;
+    showTooltip?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    size?: string;
+    sizeRange?: number[];
+    startEndOnly?: boolean;
+    tickGap?: number;
+    valueFormatter?: ScatterChartValueFormatter;
+    x: string;
+    xAxisLabel?: string;
+    y: string;
+    yAxisLabel?: string;
+    yAxisWidth?: number;
+}
+declare const ScatterChart: import("react").ForwardRefExoticComponent<ScatterChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ScatterChart;