@lobehub/charts 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 LobeHub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,218 @@
+<a name="readme-top"></a>
+
+<div align="center">
+
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
+<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/bar-chart.webp">
+
+<h1>Lobe Charts</h1>
+
+React modern charts components built on recharts
+
+[Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
+
+<!-- SHIELD GROUP -->
+
+[![][npm-release-shield]][npm-release-link]
+[![][vercel-shield]][vercel-link]
+[![][discord-shield]][discord-link]
+[![][npm-downloads-shield]][npm-downloads-link]<br/>
+[![][github-releasedate-shield]][github-releasedate-link]
+[![][github-action-test-shield]][github-action-test-link]
+[![][github-action-release-shield]][github-action-release-link]<br/>
+[![][github-contributors-shield]][github-contributors-link]
+[![][github-forks-shield]][github-forks-link]
+[![][github-stars-shield]][github-stars-link]
+[![][github-issues-shield]][github-issues-link]
+[![][github-license-shield]][github-license-link]
+
+![](https://github.com/user-attachments/assets/71f7ff66-7fc6-49b1-af12-02151c5b1026)
+
+</div>
+
+<details>
+<summary><kbd>Table of contents</kbd></summary>
+
+#### TOC
+
+- [✨ Features](#-features)
+- [📦 Installation](#-installation)
+  - [Compile with NextJS](#compile-with-nextjs)
+- [⌨️ Local Development](#️-local-development)
+- [🤝 Contributing](#-contributing)
+- [🩷 Sponsor](#-sponsor)
+- [🔗 Links](#-links)
+  - [More Products](#more-products)
+  - [Credits](#credits)
+
+####
+
+</details>
+
+## ✨ Features
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 📦 Installation
+
+> \[!IMPORTANT]\
+> This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+
+To install Lobe UI, run the following command:
+
+[![][bun-shield]][bun-link]
+
+```bash
+$ bun add @lobehub/charts
+```
+
+### Compile with NextJS
+
+> \[!NOTE]\
+> By work correct with nextjs ssr, add `transpilePackages: ['@lobehub/charts']` to `next.config.js`. For example:
+
+```js
+// next.config.js
+const nextConfig = {
+  // ...other config
+
+  transpilePackages: ['@lobehub/charts'],
+};
+```
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⌨️ Local Development
+
+You can use Github Codespaces for online development:
+
+[![][codespaces-shield]][codespaces-link]
+
+Or clone it for local development:
+
+```bash
+$ git clone https://github.com/lobehub/lobe-charts.git
+$ cd lobe-charts
+$ bun install
+$ bun start
+```
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤝 Contributing
+
+Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] to get stuck in to show us what you’re made of.
+
+[![][pr-welcome-shield]][pr-welcome-link]
+
+[![][contributors-contrib]][contributors-link]
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🩷 Sponsor
+
+Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.
+
+<a href="https://opencollective.com/lobehub" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
+    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
+  </picture>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🔗 Links
+
+### More Products
+
+- **[🤖 Lobe Chat][lobe-chat] :** An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
+- **[🤯 Lobe Theme][lobe-theme] :** The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
+- **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
+- **[💌 Lobe Commit][lobe-commit] :** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
+
+### Credits
+
+- **recharts** - <https://github.com/recharts/recharts>
+- **tremor** - <https://github.com/tremorlabs/tremor>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+---
+
+<details><summary><h4>📝 License</h4></summary>
+
+[![][fossa-license-shield]][fossa-license-link]
+
+</details>
+
+Copyright © 2023 [LobeHub][profile-link]. <br />
+This project is [MIT](./LICENSE) licensed.
+
+<!-- LINK GROUP -->
+
+[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
+[bun-link]: https://bun.sh
+[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
+[codespaces-link]: https://codespaces.new/lobehub/lobe-charts
+[codespaces-shield]: https://github.com/codespaces/badge.svg
+[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-charts
+[contributors-link]: https://github.com/lobehub/lobe-charts/graphs/contributors
+[discord-link]: https://discord.gg/AYFPHvv2jT
+[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
+[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-charts
+[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-charts.svg?type=large
+[github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-charts/release.yml
+[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-charts/release.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-action-test-link]: https://github.com/actions/workflows/lobehub/lobe-charts/test.yml
+[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-charts/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-contributors-link]: https://github.com/lobehub/lobe-charts/graphs/contributors
+[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-charts?color=c4f042&labelColor=black&style=flat-square
+[github-forks-link]: https://github.com/lobehub/lobe-charts/network/members
+[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-charts?color=8ae8ff&labelColor=black&style=flat-square
+[github-issues-link]: https://github.com/lobehub/lobe-charts/issues
+[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-charts?color=ff80eb&labelColor=black&style=flat-square
+[github-license-link]: https://github.com/lobehub/lobe-charts/blob/master/LICENSE
+[github-license-shield]: https://img.shields.io/github/license/lobehub/lobe-charts?color=white&labelColor=black&style=flat-square
+[github-releasedate-link]: https://github.com/lobehub/lobe-charts/releases
+[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-charts?labelColor=black&style=flat-square
+[github-stars-link]: https://github.com/lobehub/lobe-charts/network/stargazers
+[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-charts?color=ffcb47&labelColor=black&style=flat-square
+[lobe-chat]: https://github.com/lobehub/lobe-chat
+[lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
+[lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
+[lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
+[npm-downloads-link]: https://www.npmjs.com/package/@lobehub/charts
+[npm-downloads-shield]: https://img.shields.io/npm/dt/@lobehub/charts?labelColor=black&style=flat-square
+[npm-release-link]: https://www.npmjs.com/package/@lobehub/charts
+[npm-release-shield]: https://img.shields.io/npm/v/@lobehub/charts?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
+[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
+[profile-link]: https://github.com/lobehub
+[vercel-link]: https://charts.lobehub.com
+[vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com

package/es/AreaChart/index.d.ts

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

package/es/AreaChart/index.js

@@ -0,0 +1,388 @@
+'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, _templateObject4, _templateObject5;
+var _excluded = ["data", "categories", "index", "stack", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showAnimation", "animationDuration", "showTooltip", "showLegend", "showGridLines", "showGradient", "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 { Area, CartesianGrid, Dot, Label, Legend, Line, AreaChart as ReChartsAreaChart, 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 AreaChart = /*#__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$stack = props.stack,
+    stack = _props$stack === void 0 ? false : _props$stack,
+    _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$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    _props$animationDurat = props.animationDuration,
+    animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
+    _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$showGradient = props.showGradient,
+    showGradient = _props$showGradient === void 0 ? true : _props$showGradient,
+    _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 || startEndOnly && !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(ReChartsAreaChart, {
+        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: theme.colorTextSecondary,
+            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$get2, _categoryColors$get3;
+          return /*#__PURE__*/_jsx("defs", {
+            children: showGradient ? /*#__PURE__*/_jsxs("linearGradient", {
+              className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),
+              id: categoryColors.get(category),
+              x1: "0",
+              x2: "0",
+              y1: "0",
+              y2: "1",
+              children: [/*#__PURE__*/_jsx("stop", {
+                offset: "5%",
+                stopColor: "currentColor",
+                stopOpacity: activeDot || activeLegend && activeLegend !== category ? 0.15 : 0.4
+              }), /*#__PURE__*/_jsx("stop", {
+                offset: "95%",
+                stopColor: "currentColor",
+                stopOpacity: 0
+              })]
+            }) : /*#__PURE__*/_jsx("linearGradient", {
+              className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : theme.colorPrimary)),
+              id: categoryColors.get(category),
+              x1: "0",
+              x2: "0",
+              y1: "0",
+              y2: "1",
+              children: /*#__PURE__*/_jsx("stop", {
+                stopColor: "currentColor",
+                stopOpacity: activeDot || activeLegend && activeLegend !== category ? 0.1 : 0.3
+              })
+            })
+          }, category);
+        }), categories.map(function (category) {
+          var _categoryColors$get5;
+          return /*#__PURE__*/_jsx(Area, {
+            activeDot: function activeDot(props) {
+              var _categoryColors$get4;
+              var dotCx = props.cx,
+                dotCy = props.cy,
+                stroke = props.stroke,
+                strokeLinecap = props.strokeLinecap,
+                strokeLinejoin = props.strokeLinejoin,
+                strokeWidth = props.strokeWidth,
+                dataKey = props.dataKey;
+              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: "",
+                onClick: function onClick(dotProps, event) {
+                  return onDotClick(props, event);
+                },
+                r: 5,
+                stroke: stroke,
+                strokeLinecap: strokeLinecap,
+                strokeLinejoin: strokeLinejoin,
+                strokeWidth: strokeWidth
+              });
+            },
+            animationDuration: animationDuration,
+            className: cx(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get5 = categoryColors.get(category)) !== null && _categoryColors$get5 !== void 0 ? _categoryColors$get5 : 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$get6;
+                return /*#__PURE__*/_jsx(Dot, {
+                  className: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                          fill: ", ";\n                        "])), (_categoryColors$get6 = categoryColors.get(dataKey)) !== null && _categoryColors$get6 !== void 0 ? _categoryColors$get6 : theme.colorPrimary)),
+                  cx: dotCx,
+                  cy: dotCy,
+                  fill: "",
+                  r: 5,
+                  stroke: stroke,
+                  strokeLinecap: strokeLinecap,
+                  strokeLinejoin: strokeLinejoin,
+                  strokeWidth: strokeWidth,
+                  style: {
+                    cursor: onValueChange ? 'pointer' : undefined
+                  }
+                }, index);
+              }
+              return /*#__PURE__*/_jsx(Fragment, {}, index);
+            },
+            fill: "url(#".concat(categoryColors.get(category), ")"),
+            isAnimationActive: showAnimation,
+            name: category,
+            stackId: stack ? 'a' : undefined,
+            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
+      })
+    })
+  }));
+});
+AreaChart.displayName = 'AreaChart';
+export default AreaChart;

package/es/AreaChart/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/AreaChart/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/BarChart/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import BaseChartProps from "../common/BaseChartProps";
+export interface BarChartProps extends BaseChartProps {
+    barCategoryGap?: string | number;
+    layout?: 'vertical' | 'horizontal';
+    relative?: boolean;
+    stack?: boolean;
+}
+declare const BarChart: import("react").ForwardRefExoticComponent<BarChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BarChart;