@lobehub/charts 1.0.0

package/es/ScatterChart/index.js

@@ -0,0 +1,304 @@
+'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;
+var _excluded = ["data", "x", "y", "size", "category", "colors", "showOpacity", "sizeRange", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "showTooltip", "showLegend", "showGridLines", "autoMinXValue", "minXValue", "maxXValue", "autoMinYValue", "minYValue", "maxYValue", "allowDecimals", "noDataText", "onValueChange", "customTooltip", "rotateLabelX", "className", "enableLegendSlider", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height"];
+import { css } from 'antd-style';
+import { forwardRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { CartesianGrid, Label, Legend, ScatterChart as ReChartsScatterChart, ResponsiveContainer, Scatter, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';
+import { renderShape } from "./renderShape";
+import ChartLegend from "../common/ChartLegend";
+import { constructCategories, constructCategoryColors, deepEqual, getYAxisDomain } from "../common/utils";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { defaultValueFormatter } from "../utils";
+import NoData from "../common/NoData";
+import ScatterChartTooltip from "./ScatterChartTooltip";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ScatterChart = /*#__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,
+    x = props.x,
+    y = props.y,
+    size = props.size,
+    category = props.category,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _props$showOpacity = props.showOpacity,
+    showOpacity = _props$showOpacity === void 0 ? false : _props$showOpacity,
+    _props$sizeRange = props.sizeRange,
+    sizeRange = _props$sizeRange === void 0 ? [1, 1000] : _props$sizeRange,
+    _props$valueFormatter = props.valueFormatter,
+    valueFormatter = _props$valueFormatter === void 0 ? {
+      size: defaultValueFormatter,
+      x: defaultValueFormatter,
+      y: 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$autoMinXValue = props.autoMinXValue,
+    autoMinXValue = _props$autoMinXValue === void 0 ? false : _props$autoMinXValue,
+    minXValue = props.minXValue,
+    maxXValue = props.maxXValue,
+    _props$autoMinYValue = props.autoMinYValue,
+    autoMinYValue = _props$autoMinYValue === void 0 ? false : _props$autoMinYValue,
+    minYValue = props.minYValue,
+    maxYValue = props.maxYValue,
+    _props$allowDecimals = props.allowDecimals,
+    allowDecimals = _props$allowDecimals === void 0 ? true : _props$allowDecimals,
+    noDataText = props.noDataText,
+    onValueChange = props.onValueChange,
+    customTooltip = props.customTooltip,
+    rotateLabelX = props.rotateLabelX,
+    className = props.className,
+    _props$enableLegendSl = props.enableLegendSlider,
+    enableLegendSlider = _props$enableLegendSl === void 0 ? false : _props$enableLegendSl,
+    _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 _useState = useState(60),
+    _useState2 = _slicedToArray(_useState, 2),
+    legendHeight = _useState2[0],
+    setLegendHeight = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeNode = _useState4[0],
+    setActiveNode = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeLegend = _useState6[0],
+    setActiveLegend = _useState6[1];
+  var hasOnValueChange = !!onValueChange;
+  function onNodeClick(data, index, event) {
+    event.stopPropagation();
+    if (!hasOnValueChange) return;
+    if (deepEqual(activeNode, data.node)) {
+      setActiveLegend(undefined);
+      setActiveNode(undefined);
+      onValueChange === null || onValueChange === void 0 || onValueChange(null);
+    } else {
+      setActiveNode(data.node);
+      setActiveLegend(data.payload[category]);
+      onValueChange === null || onValueChange === void 0 || onValueChange(_objectSpread({
+        categoryClicked: data.payload[category],
+        eventType: 'bubble'
+      }, data.payload));
+    }
+  }
+  function onCategoryClick(dataKey) {
+    if (!hasOnValueChange) return;
+    if (dataKey === activeLegend && !activeNode) {
+      setActiveLegend(undefined);
+      onValueChange === null || onValueChange === void 0 || onValueChange(null);
+    } else {
+      setActiveLegend(dataKey);
+      onValueChange === null || onValueChange === void 0 || onValueChange({
+        categoryClicked: dataKey,
+        eventType: 'category'
+      });
+    }
+    setActiveNode(undefined);
+  }
+  var categories = constructCategories(data, category);
+  var categoryColors = constructCategoryColors(categories, colors);
+
+  //maybe rename getYAxisDomain to getAxisDomain
+  var xAxisDomain = getYAxisDomain(autoMinXValue, minXValue, maxXValue);
+  var yAxisDomain = getYAxisDomain(autoMinYValue, minYValue, maxYValue);
+  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(ReChartsScatterChart, {
+        margin: {
+          bottom: xAxisLabel ? 20 : undefined,
+          left: 20,
+          right: 20,
+          top: 5
+        },
+        onClick: hasOnValueChange && (activeLegend || activeNode) ? function () {
+          setActiveNode(undefined);
+          setActiveLegend(undefined);
+          onValueChange === null || onValueChange === void 0 || onValueChange(null);
+        } : undefined,
+        children: [showGridLines ? /*#__PURE__*/_jsx(CartesianGrid, {
+          className: styles.gridLines,
+          horizontal: true,
+          vertical: true
+        }) : null, x ? /*#__PURE__*/_jsx(XAxis, {
+          allowDataOverflow: true,
+          angle: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.angle,
+          axisLine: false,
+          className: styles.label,
+          dataKey: x,
+          domain: xAxisDomain,
+          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,
+          name: x,
+          stroke: "",
+          tick: {
+            transform: 'translate(0, 6)'
+          },
+          tickFormatter: valueFormatter.x,
+          tickLine: false,
+          ticks: startEndOnly ? [data[0][x], data.at(-1)[x]] : undefined,
+          type: "number",
+          children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
+            className: cx(styles.strongLabel, styles.emphasis),
+            offset: -20,
+            position: "insideBottom",
+            children: xAxisLabel
+          })
+        }) : null, y ? /*#__PURE__*/_jsx(YAxis, {
+          allowDataOverflow: true,
+          allowDecimals: allowDecimals,
+          axisLine: false,
+          className: styles.label,
+          dataKey: y,
+          domain: yAxisDomain,
+          fill: "",
+          hide: !showYAxis,
+          name: y,
+          stroke: "",
+          tick: {
+            transform: 'translate(-3, 0)'
+          },
+          tickFormatter: valueFormatter.y,
+          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
+          })
+        }) : null, /*#__PURE__*/_jsx(Tooltip, {
+          content: showTooltip ? function (_ref) {
+            var _payload$;
+            var active = _ref.active,
+              payload = _ref.payload,
+              label = _ref.label;
+            var color = category ? payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 || (_payload$ = _payload$.payload) === null || _payload$ === void 0 ? void 0 : _payload$[category] : label;
+            return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
+              active: active,
+              label: color,
+              payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
+                var _categoryColors$get;
+                return _objectSpread(_objectSpread({}, payloadItem), {}, {
+                  color: (_categoryColors$get = categoryColors.get(color)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
+                });
+              })
+            }) : /*#__PURE__*/_jsx(ScatterChartTooltip, {
+              active: active,
+              axis: {
+                size: size,
+                x: x,
+                y: y
+              },
+              category: category,
+              categoryColors: categoryColors,
+              label: color,
+              payload: payload,
+              valueFormatter: valueFormatter
+            });
+          } : undefined,
+          cursor: {
+            stroke: '#d1d5db',
+            strokeWidth: 1
+          },
+          isAnimationActive: false,
+          wrapperStyle: {
+            outline: 'none'
+          }
+        }), size ? /*#__PURE__*/_jsx(ZAxis, {
+          dataKey: size,
+          name: size,
+          range: sizeRange,
+          type: "number"
+        }) : null, categories.map(function (cat) {
+          var _categoryColors$get2, _categoryColors$get3;
+          return /*#__PURE__*/_jsx(Scatter, {
+            animationDuration: animationDuration,
+            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                      fill: ", ";\n                    "])), (_categoryColors$get2 = categoryColors.get(cat)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary), showOpacity && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        stroke: ", ";\n                      "])), (_categoryColors$get3 = categoryColors.get(cat)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : theme.colorPrimary)),
+            data: category ? data.filter(function (d) {
+              return d[category] === cat;
+            }) : data,
+            fill: "url(#".concat(categoryColors.get(cat), ")"),
+            fillOpacity: showOpacity ? 0.7 : 1,
+            isAnimationActive: showAnimation,
+            name: cat,
+            onClick: onNodeClick,
+            shape: function shape(props) {
+              return renderShape(props, activeNode, activeLegend);
+            },
+            style: {
+              cursor: onValueChange ? 'pointer' : undefined
+            }
+          }, cat);
+        }), 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]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+ScatterChart.displayName = 'ScatterChart';
+export default ScatterChart;

package/es/ScatterChart/renderShape.d.ts

@@ -0,0 +1 @@
+export declare const renderShape: (props: any, activeNode: any | undefined, activeLegend: string | undefined) => import("react/jsx-runtime").JSX.Element;

package/es/ScatterChart/renderShape.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Dot } from 'recharts';
+import { deepEqual } from "../common/utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var renderShape = function renderShape(props, activeNode, activeLegend) {
+  var cx = props.cx,
+    cy = props.cy,
+    width = props.width,
+    node = props.node,
+    fillOpacity = props.fillOpacity,
+    name = props.name;
+  return /*#__PURE__*/_jsx(Dot, {
+    cx: cx,
+    cy: cy,
+    opacity: activeNode || activeLegend && activeLegend !== name ? deepEqual(activeNode, node) ? fillOpacity : 0.3 : fillOpacity,
+    r: width / 2
+  });
+};

package/es/ScatterChart/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/ScatterChart/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/common/BaseAnimationTimingProps.d.ts

@@ -0,0 +1,7 @@
+interface BaseAnimationTimingProps {
+    animationDuration?: number;
+    height?: string | number;
+    showAnimation?: boolean;
+    width?: string | number;
+}
+export default BaseAnimationTimingProps;

package/es/common/BaseAnimationTimingProps.js

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

package/es/common/BaseChartProps.d.ts

@@ -0,0 +1,47 @@
+import { ComponentType, HTMLAttributes } from 'react';
+import type { NoDataProps } from "./NoData";
+import { IntervalType, ValueFormatter } from "../types";
+import type BaseAnimationTimingProps from './BaseAnimationTimingProps';
+import { CustomTooltipProps } from './CustomTooltipProps';
+type FixedProps = {
+    categoryClicked: string;
+    eventType: 'dot' | 'category' | 'bar' | 'slice' | 'bubble';
+};
+type BaseEventProps = FixedProps & {
+    [key: string]: number | string;
+};
+export type EventProps = BaseEventProps | null | undefined;
+interface BaseChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDivElement> {
+    allowDecimals?: boolean;
+    autoMinValue?: boolean;
+    categories: string[];
+    colors?: string[];
+    customTooltip?: ComponentType<CustomTooltipProps>;
+    data: any[];
+    enableLegendSlider?: boolean;
+    height?: string | number;
+    index: string;
+    intervalType?: IntervalType;
+    maxValue?: number;
+    minValue?: number;
+    noDataText?: NoDataProps['noDataText'];
+    onValueChange?: (value: EventProps) => void;
+    rotateLabelX?: {
+        angle: number;
+        verticalShift?: number;
+        xAxisHeight?: number;
+    };
+    showGridLines?: boolean;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    startEndOnly?: boolean;
+    tickGap?: number;
+    valueFormatter?: ValueFormatter;
+    width?: string | number;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    yAxisWidth?: number;
+}
+export default BaseChartProps;

package/es/common/BaseChartProps.js

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

package/es/common/ChartLegend.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from 'react';
+declare const ChartLegend: ({ payload }: any, categoryColors: Map<string, string>, setLegendHeight: Dispatch<SetStateAction<number>>, activeLegend: string | undefined, onClick?: ((category: string, color: string) => void) | undefined, enableLegendSlider?: boolean) => import("react/jsx-runtime").JSX.Element;
+export default ChartLegend;

package/es/common/ChartLegend.js

@@ -0,0 +1,39 @@
+import { useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Legend from "../components/Legend";
+import { useOnWindowResize } from "../hooks/useOnWindowResize";
+import { jsx as _jsx } from "react/jsx-runtime";
+var calculateHeight = function calculateHeight(height) {
+  return height ? Number(height) + 20 // 20px extra padding
+  : 60;
+}; // default height
+
+var ChartLegend = function ChartLegend(_ref, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider) {
+  var payload = _ref.payload;
+  var legendRef = useRef(null);
+  useOnWindowResize(function () {
+    var _legendRef$current;
+    setLegendHeight(calculateHeight((_legendRef$current = legendRef.current) === null || _legendRef$current === void 0 ? void 0 : _legendRef$current.clientHeight));
+  });
+  var filteredPayload = payload.filter(function (item) {
+    return item.type !== 'none';
+  });
+  return /*#__PURE__*/_jsx(Flexbox, {
+    align: 'center',
+    horizontal: true,
+    justify: 'flex-end',
+    ref: legendRef,
+    children: /*#__PURE__*/_jsx(Legend, {
+      activeLegend: activeLegend,
+      categories: filteredPayload.map(function (entry) {
+        return entry.value;
+      }),
+      colors: filteredPayload.map(function (entry) {
+        return categoryColors.get(entry.value);
+      }),
+      enableLegendSlider: enableLegendSlider,
+      onClickLegendItem: onClick
+    })
+  });
+};
+export default ChartLegend;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FlexboxProps } from 'react-layout-kit';
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+}>;
+export declare const ChartTooltipFrame: import("react").NamedExoticComponent<FlexboxProps>;
+export default ChartTooltipFrame;

package/es/common/ChartTooltip/ChartTooltipFrame.js

@@ -0,0 +1,28 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["children"];
+var _templateObject;
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-shadow: ", ";\n  "])), token.colorBgElevated, token.colorBorderSecondary, token.borderRadiusLG, token.boxShadow)
+  };
+});
+export var ChartTooltipFrame = /*#__PURE__*/memo(function (_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: styles.container
+  }, rest), {}, {
+    children: children
+  }));
+});
+export default ChartTooltipFrame;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface ChartTooltipRowProps {
+    color: string;
+    name: string;
+    value: string;
+}
+declare const ChartTooltipRow: import("react").NamedExoticComponent<ChartTooltipRowProps>;
+export default ChartTooltipRow;

package/es/common/ChartTooltip/ChartTooltipRow.js

@@ -0,0 +1,58 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { Circle } from 'lucide-react';
+import { 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,
+    color = _ref2.color;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    gap: 32,
+    horizontal: true,
+    justify: 'space-between',
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      gap: 8,
+      horizontal: true,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        color: color,
+        fill: color,
+        icon: Circle,
+        size: {
+          fontSize: 10
+        }
+      }), /*#__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/common/ChartTooltip/index.d.ts

@@ -0,0 +1,10 @@
+import { ValueFormatter } from "../../types";
+export interface ChartTooltipProps {
+    active: boolean | undefined;
+    categoryColors: Map<string, string>;
+    label: string;
+    payload: any;
+    valueFormatter: ValueFormatter;
+}
+declare const ChartTooltip: ({ active, payload, label, categoryColors, valueFormatter, }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ChartTooltip;

package/es/common/ChartTooltip/index.js

@@ -0,0 +1,65 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+import ChartTooltipFrame from "./ChartTooltipFrame";
+import ChartTooltipRow from "./ChartTooltipRow";
+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 ChartTooltip = function ChartTooltip(_ref2) {
+  var active = _ref2.active,
+    payload = _ref2.payload,
+    label = _ref2.label,
+    categoryColors = _ref2.categoryColors,
+    valueFormatter = _ref2.valueFormatter;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme,
+    styles = _useStyles.styles;
+  if (active && payload) {
+    var filteredPayload = payload.filter(function (item) {
+      return item.type !== 'none';
+    });
+    return /*#__PURE__*/_jsxs(ChartTooltipFrame, {
+      children: [/*#__PURE__*/_jsx(Flexbox, {
+        className: cx(styles.header),
+        paddingBlock: 8,
+        paddingInline: 16,
+        children: /*#__PURE__*/_jsx(Typography.Paragraph, {
+          ellipsis: true,
+          style: {
+            margin: 0
+          },
+          children: label
+        })
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        gap: 4,
+        paddingBlock: 8,
+        paddingInline: 16,
+        style: {
+          marginTop: 4
+        },
+        children: filteredPayload.map(function (_ref3, idx) {
+          var _categoryColors$get;
+          var value = _ref3.value,
+            name = _ref3.name;
+          return /*#__PURE__*/_jsx(ChartTooltipRow, {
+            color: (_categoryColors$get = categoryColors.get(name)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary,
+            name: name,
+            value: valueFormatter(value)
+          }, "id-".concat(idx));
+        })
+      })]
+    });
+  }
+  return null;
+};
+export default ChartTooltip;

package/es/common/CustomTooltipProps.d.ts

@@ -0,0 +1,6 @@
+import { NameType, Payload } from 'recharts/types/component/DefaultTooltipContent';
+export type CustomTooltipProps = {
+    active: boolean | undefined;
+    label: NameType | undefined;
+    payload: Payload<string | number | (string | number)[], string | number>[] | undefined;
+};

package/es/common/CustomTooltipProps.js

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

package/es/common/NoData.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface NoDataProps {
+    className?: string;
+    noDataText?: ReactNode | {
+        desc: ReactNode;
+        title: ReactNode;
+    };
+}
+declare const NoData: import("react").NamedExoticComponent<NoDataProps>;
+export default NoData;