✨ feat: Update to recharts 3.0.0-alpha.0

lobehub · Jan 6, 2025 · cd64691 · cd64691
1 parent 3e5965e
commit cd64691
Show file tree

Hide file tree

Showing 19 changed files with 113 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "date-fns": "^3.6.0",
-    "recharts": "^2.15.0"
+    "recharts": "^3.0.0-alpha.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
@@ -121,13 +121,5 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
-  },
-  "pnpm": {
-    "overrides": {
-      "react-is": "^19.0.0"
-    }
-  },
-  "overrides": {
-    "react-is": "^19.0.0"
   }
 }
diff --git a/src/AreaChart/index.tsx b/src/AreaChart/index.tsx
@@ -161,6 +161,7 @@ const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>((props, ref) => {
       <ResponsiveContainer>
         {data?.length ? (
           <ReChartsAreaChart
+            className={styles.chart}
             data={data}
             margin={{
               bottom: xAxisLabel ? 30 : undefined,

diff --git a/src/AreaChart/styles.ts b/src/AreaChart/styles.ts
@@ -1,6 +1,11 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  chart: css`
+    svg {
+      outline: none;
+    }
+  `,
   emphasis: css`
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
@@ -147,6 +147,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
         {data?.length ? (
           <ReChartsBarChart
             barCategoryGap={barCategoryGap}
+            className={styles.chart}
             data={data}
             layout={layout === 'vertical' ? 'vertical' : 'horizontal'}
             margin={{

diff --git a/src/BarChart/styles.ts b/src/BarChart/styles.ts
@@ -1,6 +1,11 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  chart: css`
+    svg {
+      outline: none;
+    }
+  `,
   emphasis: css`
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/DonutChart/index.tsx b/src/DonutChart/index.tsx
@@ -2,7 +2,15 @@
 
 import { Skeleton } from 'antd';
 import { css, useThemeMode } from 'antd-style';
-import { CSSProperties, ComponentType, MouseEvent, forwardRef, useEffect, useState } from 'react';
+import {
+  CSSProperties,
+  ComponentType,
+  MouseEvent,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { Pie, PieChart as ReChartsDonutChart, ResponsiveContainer, Tooltip } from 'recharts';
 
@@ -16,6 +24,7 @@ import { defaultValueFormatter, isOnSeverSide } from '@/utils';
 
 import { DonutChartTooltip } from './DonutChartTooltip';
 import { parseLabelInput } from './inputParser';
+import { renderActiveShape } from './renderActiveShape';
 import { renderInactiveShape } from './renderInactiveShape';
 import { useStyles } from './styles';
 
@@ -89,8 +98,6 @@ const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {
     }
   }, [activeIndex]);
 
-  if (loading || !data) return <Skeleton.Button active block style={{ height, width }} />;
-
   const onShapeClick = (data: any, index: number, event: MouseEvent) => {
     event.stopPropagation();
 
@@ -120,6 +127,15 @@ const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {
       };
     });
 
+  const paredData = useMemo(() => parseData(data, colors), [data, colors]);
+
+  const paredDonutData = useMemo(
+    () => parseData([{ [category]: 1 }], [isDarkMode ? 'rgba(0,0,0,.33)' : 'rgba(0,0,0,.1)']),
+    [category, isDarkMode],
+  );
+
+  if (loading || !data) return <Skeleton.Button active block style={{ height, width }} />;
+
   return (
     <Flexbox
       className={className}
@@ -132,6 +148,7 @@ const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {
       <ResponsiveContainer>
         {data?.length ? (
           <ReChartsDonutChart
+            className={styles.chart}
             margin={{ bottom: 0, left: 0, right: 0, top: 0 }}
             onClick={
               hasOnValueChange && activeIndex
@@ -157,11 +174,11 @@ const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {
               </text>
             ) : null}
             <Pie
-              activeIndex={activeIndex}
+              activeShape={renderActiveShape}
               animationDuration={animationDuration}
               cx="50%"
               cy="50%"
-              data={parseData(data, colors)}
+              data={paredData}
               dataKey={category}
               endAngle={-270}
               inactiveShape={renderInactiveShape}
@@ -181,19 +198,16 @@ const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {
             />
             {isDonut && (
               <Pie
-                activeIndex={activeIndex}
+                activeShape={renderActiveShape}
                 animationDuration={animationDuration}
                 cx="50%"
                 cy="50%"
-                data={parseData(
-                  [{ [category]: 1 }],
-                  [isDarkMode ? 'rgba(0,0,0,.33)' : 'rgba(0,0,0,.1)'],
-                )}
+                data={paredDonutData}
                 dataKey={category}
                 endAngle={-270}
                 inactiveShape={renderInactiveShape}
                 innerRadius={isDonut ? '75%' : '0%'}
-                isAnimationActive={false}
+                isAnimationActive={showAnimation}
                 nameKey={index}
                 outerRadius="80%"
                 startAngle={90}

diff --git a/src/DonutChart/renderActiveShape.tsx b/src/DonutChart/renderActiveShape.tsx
@@ -0,0 +1,22 @@
+import { Sector } from 'recharts';
+import { PieSectorDataItem } from 'recharts/types/polar/Pie';
+
+export const renderActiveShape = (props: PieSectorDataItem) => {
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, className } = props;
+
+  return (
+    <g>
+      <Sector
+        className={className}
+        cx={cx}
+        cy={cy}
+        endAngle={endAngle}
+        fill=""
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        style={{ outline: 'none' }}
+      />
+    </g>
+  );
+};
diff --git a/src/DonutChart/renderInactiveShape.tsx b/src/DonutChart/renderInactiveShape.tsx
@@ -1,6 +1,7 @@
 import { Sector } from 'recharts';
+import { PieSectorDataItem } from 'recharts/types/polar/Pie';
 
-export const renderInactiveShape = (props: any) => {
+export const renderInactiveShape = (props: PieSectorDataItem) => {
   const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, className } = props;
 
   return (

diff --git a/src/DonutChart/styles.ts b/src/DonutChart/styles.ts
@@ -1,6 +1,11 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  chart: css`
+    svg {
+      outline: none;
+    }
+  `,
   emphasis: css`
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/FunnelChart/index.tsx b/src/FunnelChart/index.tsx
@@ -310,6 +310,7 @@ const FunnelChart = forwardRef<HTMLDivElement, FunnelChartProps>((props, ref) =>
       {data?.length ? (
         <>
           <svg
+            className={styles.chart}
             onMouseLeave={() => setTooltip({ x: 0, y: 0 })}
             onMouseMove={(e) => {
               const fakeTouch = {

diff --git a/src/FunnelChart/styles.ts b/src/FunnelChart/styles.ts
@@ -1,6 +1,9 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  chart: css`
+    outline: none;
+  `,
   emphasis: css`
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
@@ -157,6 +157,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
       <ResponsiveContainer>
         {data?.length ? (
           <ReChartsLineChart
+            className={styles.chart}
             data={data}
             margin={{
               bottom: xAxisLabel ? 30 : undefined,

diff --git a/src/LineChart/styles.ts b/src/LineChart/styles.ts
@@ -1,6 +1,11 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  chart: css`
+    svg {
+      outline: none;
+    }
+  `,
   emphasis: css`
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/ScatterChart/index.tsx b/src/ScatterChart/index.tsx
@@ -79,7 +79,7 @@ export interface ScatterChartProps
   showXAxis?: boolean;
   showYAxis?: boolean;
   size?: string;
-  sizeRange?: number[];
+  sizeRange?: [number, number];
   startEndOnly?: boolean;
   tickGap?: number;
   valueFormatter?: ScatterChartValueFormatter;
@@ -214,6 +214,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
       <ResponsiveContainer>
         {data?.length ? (
           <ReChartsScatterChart
+            className={styles.chart}
             margin={{
               bottom: xAxisLabel ? 20 : undefined,
               left: 20,

diff --git a/src/ScatterChart/styles.ts b/src/ScatterChart/styles.ts
@@ -1,6 +1,11 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  chart: css`
+    svg {
+      outline: none;
+    }
+  `,
   emphasis: css`
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/SparkChart/SparkAreaChart.tsx b/src/SparkChart/SparkAreaChart.tsx
@@ -7,13 +7,14 @@ import { Flexbox } from 'react-layout-kit';
 import { Area, AreaChart as ReChartsAreaChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import { AxisDomain } from 'recharts/types/util/types';
 
-import { useStyles } from '@/AreaChart/styles';
 import BaseSparkChartProps from '@/common/BaseSparkChartProps';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
 import { CurveType } from '@/types/charts';
 
+import { useStyles } from './styles';
+
 export interface SparkAreaChartProps extends BaseSparkChartProps {
   connectNulls?: boolean;
   curveType?: CurveType;
@@ -23,7 +24,7 @@ export interface SparkAreaChartProps extends BaseSparkChartProps {
 }
 
 const SparkAreaChart = forwardRef<HTMLDivElement, SparkAreaChartProps>((props, ref) => {
-  const { cx, theme } = useStyles();
+  const { cx, theme, styles } = useStyles();
   const themeColorRange = useThemeColorRange();
 
   const {
@@ -65,7 +66,11 @@ const SparkAreaChart = forwardRef<HTMLDivElement, SparkAreaChartProps>((props, r
     >
       <ResponsiveContainer>
         {data?.length ? (
-          <ReChartsAreaChart data={data} margin={{ bottom: 1, left: 1, right: 1, top: 1 }}>
+          <ReChartsAreaChart
+            className={styles.chart}
+            data={data}
+            margin={{ bottom: 1, left: 1, right: 1, top: 1 }}
+          >
             <YAxis domain={yAxisDomain as AxisDomain} hide />
             <XAxis dataKey={index} hide />
             {categories.map((category) => {

diff --git a/src/SparkChart/SparkBarChart.tsx b/src/SparkChart/SparkBarChart.tsx
@@ -7,20 +7,21 @@ import { Flexbox } from 'react-layout-kit';
 import { Bar, BarChart as ReChartsBarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import { AxisDomain } from 'recharts/types/util/types';
 
-import { useStyles } from '@/BarChart/styles';
 import BaseSparkChartProps from '@/common/BaseSparkChartProps';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
 
+import { useStyles } from './styles';
+
 export interface SparkBarChartProps extends BaseSparkChartProps {
   loading?: boolean;
   relative?: boolean;
   stack?: boolean;
 }
 
 const SparkBarChart = forwardRef<HTMLDivElement, SparkBarChartProps>((props, ref) => {
-  const { cx, theme } = useStyles();
+  const { cx, theme, styles } = useStyles();
   const themeColorRange = useThemeColorRange();
   const {
     data = [],
@@ -60,6 +61,7 @@ const SparkBarChart = forwardRef<HTMLDivElement, SparkBarChartProps>((props, ref
       <ResponsiveContainer>
         {data?.length ? (
           <ReChartsBarChart
+            className={styles.chart}
             data={data}
             margin={{ bottom: 0, left: -1.5, right: -1.5, top: 0 }}
             stackOffset={relative ? 'expand' : 'none'}

diff --git a/src/SparkChart/SparkLineChart.tsx b/src/SparkChart/SparkLineChart.tsx
@@ -7,21 +7,22 @@ import { Flexbox } from 'react-layout-kit';
 import { Line, LineChart as ReChartsLineChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import { AxisDomain } from 'recharts/types/util/types';
 
-import { useStyles } from '@/LineChart/styles';
 import BaseSparkChartProps from '@/common/BaseSparkChartProps';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
 import { CurveType } from '@/types/charts';
 
+import { useStyles } from './styles';
+
 export interface SparkLineChartProps extends BaseSparkChartProps {
   connectNulls?: boolean;
   curveType?: CurveType;
   loading?: boolean;
 }
 
 const SparkLineChart = forwardRef<HTMLDivElement, SparkLineChartProps>((props, ref) => {
-  const { cx, theme } = useStyles();
+  const { cx, theme, styles } = useStyles();
   const themeColorRange = useThemeColorRange();
   const {
     data = [],
@@ -60,7 +61,11 @@ const SparkLineChart = forwardRef<HTMLDivElement, SparkLineChartProps>((props, r
     >
       <ResponsiveContainer>
         {data?.length ? (
-          <ReChartsLineChart data={data} margin={{ bottom: 1, left: 1, right: 1, top: 1 }}>
+          <ReChartsLineChart
+            className={styles.chart}
+            data={data}
+            margin={{ bottom: 1, left: 1, right: 1, top: 1 }}
+          >
             <YAxis domain={yAxisDomain as AxisDomain} hide />
             <XAxis dataKey={index} hide />
             {categories.map((category) => (

diff --git a/src/SparkChart/styles.ts b/src/SparkChart/styles.ts
@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => ({
+  chart: css`
+    svg {
+      outline: none;
+    }
+  `,
+}));