Merge pull request #249 from chenz24/fix-charts

pass recharts props
chenz24 · Feb 28, 2023 · 52ec7a5 · 52ec7a5 · vercel · Feb 28, 2023
2 parents 3e11e13 + 0fdd7d1
commit 52ec7a5
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 11 deletions.
diff --git a/.changeset/serious-dots-yawn.md b/.changeset/serious-dots-yawn.md
@@ -0,0 +1,5 @@
+---
+'@kubed/charts': patch
+---
+
+pass recharts props
diff --git a/packages/charts/src/charts/AreaChart/AreaChart.tsx b/packages/charts/src/charts/AreaChart/AreaChart.tsx
@@ -46,6 +46,7 @@ export const AreaChart = ({
   legendAlign = 'right',
   legendFormatter,
   maxActiveCategories = 50,
+  ...rest
 }: AreaChartProps) => {
   const initialActiveCats = categories.slice(0, maxActiveCategories);
   const [activeCategories, setActiveCategories] = useState(initialActiveCats);
@@ -66,7 +67,7 @@ export const AreaChart = ({
 
   return (
     <ResponsiveContainer width="100%" height="100%">
-      <ReChartsAreaChart data={data}>
+      <ReChartsAreaChart data={data} {...rest}>
         {showGridLines ? (
           <CartesianGrid stroke="#d8dee5" strokeDasharray="2 2" horizontal vertical={false} />
         ) : null}

diff --git a/packages/charts/src/charts/BarChart/BarChart.tsx b/packages/charts/src/charts/BarChart/BarChart.tsx
@@ -50,6 +50,7 @@ export const BarChart = ({
   legendAlign = 'right',
   legendFormatter,
   maxActiveCategories = 50,
+  ...rest
 }: BarChartProps) => {
   const initialActiveCats = categories.slice(0, maxActiveCategories);
   const [activeCategories, setActiveCategories] = useState(initialActiveCats);
@@ -74,6 +75,7 @@ export const BarChart = ({
         data={data}
         stackOffset={relative ? 'expand' : 'none'}
         layout={layout === 'vertical' ? 'vertical' : 'horizontal'}
+        {...rest}
       >
         {showGridLines ? (
           <CartesianGrid

diff --git a/packages/charts/src/charts/LineChart/LineChart.tsx b/packages/charts/src/charts/LineChart/LineChart.tsx
@@ -42,6 +42,7 @@ export const LineChart = ({
   legendAlign = 'right',
   legendFormatter,
   maxActiveCategories = 50,
+  ...rest
 }: LineChartProps) => {
   const initialActiveCats = categories.slice(0, maxActiveCategories);
   const [activeCategories, setActiveCategories] = useState(initialActiveCats);
@@ -62,7 +63,7 @@ export const LineChart = ({
 
   return (
     <ResponsiveContainer width="100%" height="100%">
-      <ReChartsLineChart data={data}>
+      <ReChartsLineChart data={data} {...rest}>
         {showGridLines ? (
           <CartesianGrid stroke="#d8dee5" strokeDasharray="2 2" horizontal vertical={false} />
         ) : null}

diff --git a/packages/charts/src/charts/PieChart/PieChart.tsx b/packages/charts/src/charts/PieChart/PieChart.tsx
@@ -54,13 +54,14 @@ export const PieChart = ({
   legendVerticalAlign = 'top',
   legendAlign = 'right',
   legendFormatter,
-  maxActiveCategories = 50,
+  // maxActiveCategories = 50,
+  ...rest
 }: PieChartProps) => {
   const isDonut = variant === 'donut';
 
   return (
     <ResponsiveContainer width="100%" height="100%">
-      <ReChartsDonutChart>
+      <ReChartsDonutChart {...rest}>
         <Pie
           data={parseData(data, colors)}
           cx="50%"

diff --git a/packages/charts/src/components/Tooltip.tsx b/packages/charts/src/components/Tooltip.tsx
@@ -76,11 +76,11 @@ export function Tooltip({
     <TooltipWrapper className={className}>
       <TooltipLabel>{label}</TooltipLabel>
       <ItemWrapper>
-        {payload.map((item) => {
+        {payload.map((item, index) => {
           const legend = legendFormatter ? legendFormatter(item) : item.name;
           const color = item.color || item.payload?.fill;
           return (
-            <TooltipItem color={color}>
+            <TooltipItem color={color} key={`tooltip-${item.name}-${index}`}>
               {legend}: {valueFormatter(item.value)}
             </TooltipItem>
           );

diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
@@ -1,4 +1,5 @@
 export * from './charts/AreaChart/AreaChart';
 export * from './charts/LineChart/LineChart';
 export * from './charts/BarChart/BarChart';
+export * from './charts/PieChart/PieChart';
 export * from './types';
diff --git a/packages/charts/src/types.ts b/packages/charts/src/types.ts
@@ -1,9 +1,10 @@
-export interface ChartBaseProps {
-  data: any[];
+import { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
+
+export interface ChartBaseProps extends CategoricalChartProps {
   categories: string[];
   colors?: string[];
-  height?: number | string;
-  width?: number | string;
+  // height?: number | string;
+  // width?: number | string;
   dataKey: string;
   showXAxis?: boolean;
   showYAxis?: boolean;

diff --git a/scripts/storybook-start.ts b/scripts/storybook-start.ts
@@ -2,7 +2,7 @@ import path from 'path';
 import storybook from '@storybook/react/standalone';
 
 storybook({
-  port: 7000,
+  port: 7001,
   mode: 'dev',
   configDir: path.join(__dirname, '../configs/storybook'),
 });