From cd646918e98c3cc7b09150381d53e9e6d5d541c8 Mon Sep 17 00:00:00 2001 From: canisminor1990 Date: Mon, 6 Jan 2025 20:53:16 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Update=20to=20recharts=203.?= =?UTF-8?q?0.0-alpha.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 10 +------ src/AreaChart/index.tsx | 1 + src/AreaChart/styles.ts | 5 ++++ src/BarChart/index.tsx | 1 + src/BarChart/styles.ts | 5 ++++ src/DonutChart/index.tsx | 36 ++++++++++++++++++-------- src/DonutChart/renderActiveShape.tsx | 22 ++++++++++++++++ src/DonutChart/renderInactiveShape.tsx | 3 ++- src/DonutChart/styles.ts | 5 ++++ src/FunnelChart/index.tsx | 1 + src/FunnelChart/styles.ts | 3 +++ src/LineChart/index.tsx | 1 + src/LineChart/styles.ts | 5 ++++ src/ScatterChart/index.tsx | 3 ++- src/ScatterChart/styles.ts | 5 ++++ src/SparkChart/SparkAreaChart.tsx | 11 +++++--- src/SparkChart/SparkBarChart.tsx | 6 +++-- src/SparkChart/SparkLineChart.tsx | 11 +++++--- src/SparkChart/styles.ts | 9 +++++++ 19 files changed, 113 insertions(+), 30 deletions(-) create mode 100644 src/DonutChart/renderActiveShape.tsx create mode 100644 src/SparkChart/styles.ts diff --git a/package.json b/package.json index 348549b..c5f6cc8 100644 --- 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 index fecca28..4e1063d 100644 --- a/src/AreaChart/index.tsx +++ b/src/AreaChart/index.tsx @@ -161,6 +161,7 @@ const AreaChart = forwardRef((props, ref) => { {data?.length ? ( ({ + chart: css` + svg { + outline: none; + } + `, emphasis: css` overflow: hidden; text-overflow: ellipsis; diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index 1739e83..328b13a 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -147,6 +147,7 @@ const BarChart = forwardRef((props, ref) => { {data?.length ? ( ({ + chart: css` + svg { + outline: none; + } + `, emphasis: css` overflow: hidden; text-overflow: ellipsis; diff --git a/src/DonutChart/index.tsx b/src/DonutChart/index.tsx index 14101e0..ece2bda 100644 --- 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((props, ref) => { } }, [activeIndex]); - if (loading || !data) return ; - const onShapeClick = (data: any, index: number, event: MouseEvent) => { event.stopPropagation(); @@ -120,6 +127,15 @@ const DonutChart = forwardRef((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 ; + return ( ((props, ref) => { {data?.length ? ( ((props, ref) => { ) : null} ((props, ref) => { /> {isDonut && ( { + const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, className } = props; + + return ( + + + + ); +}; diff --git a/src/DonutChart/renderInactiveShape.tsx b/src/DonutChart/renderInactiveShape.tsx index be9edd5..507fcee 100644 --- 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 index 2c0cc43..49e3f5b 100644 --- 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 index 2f1992a..3d81f9d 100644 --- a/src/FunnelChart/index.tsx +++ b/src/FunnelChart/index.tsx @@ -310,6 +310,7 @@ const FunnelChart = forwardRef((props, ref) => {data?.length ? ( <> setTooltip({ x: 0, y: 0 })} onMouseMove={(e) => { const fakeTouch = { diff --git a/src/FunnelChart/styles.ts b/src/FunnelChart/styles.ts index 50a7071..a508441 100644 --- 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 index 3e7c4e8..e4f68ad 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -157,6 +157,7 @@ const LineChart = forwardRef((props, ref) => { {data?.length ? ( ({ + chart: css` + svg { + outline: none; + } + `, emphasis: css` overflow: hidden; text-overflow: ellipsis; diff --git a/src/ScatterChart/index.tsx b/src/ScatterChart/index.tsx index e5fb12b..56f8262 100644 --- 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((props, ref) {data?.length ? ( ({ + chart: css` + svg { + outline: none; + } + `, emphasis: css` overflow: hidden; text-overflow: ellipsis; diff --git a/src/SparkChart/SparkAreaChart.tsx b/src/SparkChart/SparkAreaChart.tsx index c23d14a..7bfa7e2 100644 --- 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((props, ref) => { - const { cx, theme } = useStyles(); + const { cx, theme, styles } = useStyles(); const themeColorRange = useThemeColorRange(); const { @@ -65,7 +66,11 @@ const SparkAreaChart = forwardRef((props, r > {data?.length ? ( - + {categories.map((category) => { diff --git a/src/SparkChart/SparkBarChart.tsx b/src/SparkChart/SparkBarChart.tsx index cfd5e29..ee591fc 100644 --- a/src/SparkChart/SparkBarChart.tsx +++ b/src/SparkChart/SparkBarChart.tsx @@ -7,12 +7,13 @@ 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; @@ -20,7 +21,7 @@ export interface SparkBarChartProps extends BaseSparkChartProps { } const SparkBarChart = forwardRef((props, ref) => { - const { cx, theme } = useStyles(); + const { cx, theme, styles } = useStyles(); const themeColorRange = useThemeColorRange(); const { data = [], @@ -60,6 +61,7 @@ const SparkBarChart = forwardRef((props, ref {data?.length ? ( ((props, ref) => { - const { cx, theme } = useStyles(); + const { cx, theme, styles } = useStyles(); const themeColorRange = useThemeColorRange(); const { data = [], @@ -60,7 +61,11 @@ const SparkLineChart = forwardRef((props, r > {data?.length ? ( - + {categories.map((category) => ( diff --git a/src/SparkChart/styles.ts b/src/SparkChart/styles.ts new file mode 100644 index 0000000..ceccf0a --- /dev/null +++ b/src/SparkChart/styles.ts @@ -0,0 +1,9 @@ +import { createStyles } from 'antd-style'; + +export const useStyles = createStyles(({ css }) => ({ + chart: css` + svg { + outline: none; + } + `, +}));