✨ feat: Add new charts

lobehub · Jul 17, 2024 · ecff501 · ecff501
1 parent 07c4cc6
commit ecff501
Show file tree

Hide file tree

Showing 63 changed files with 1,440 additions and 208 deletions.
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
+    "@icons-pack/react-simple-icons": "^9.6.0",
     "@lobehub/lint": "^1.24.3",
     "@lobehub/ui": "^1.146.8",
     "@testing-library/react": "^14.3.1",

diff --git a/src/AreaChart/demos/axis.tsx b/src/AreaChart/demos/axis.tsx
@@ -1,6 +1,6 @@
-import { AreaChart } from '@lobehub/charts';
+import { AreaChart, AreaChartProps } from '@lobehub/charts';
 
-const chartdata = [
+const data: AreaChartProps['data'] = [
   {
     Inverters: 2338,
     SolarPanels: 2890,
@@ -63,15 +63,15 @@ const chartdata = [
   },
 ];
 
-const valueFormatter = (number: number) => {
+const valueFormatter: AreaChartProps['valueFormatter'] = (number) => {
   return '$ ' + new Intl.NumberFormat('us').format(number).toString();
 };
 
 export default () => {
   return (
     <AreaChart
       categories={['SolarPanels', 'Inverters']}
-      data={chartdata}
+      data={data}
       index="date"
       valueFormatter={valueFormatter}
       xAxisLabel="Month of Year"

diff --git a/src/AreaChart/demos/clickEvent.tsx b/src/AreaChart/demos/clickEvent.tsx
@@ -1,9 +1,9 @@
-import { AreaChart, EventProps } from '@lobehub/charts';
+import { AreaChart, AreaChartProps, EventProps } from '@lobehub/charts';
 import { Highlighter } from '@lobehub/ui';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const chartdata = [
+const data: AreaChartProps['data'] = [
   {
     2022: 45,
     2023: 78,
@@ -74,7 +74,7 @@ export default () => {
       <AreaChart
         categories={['2022', '2023']}
         connectNulls={true}
-        data={chartdata}
+        data={data}
         index="date"
         onValueChange={(v) => setValue(v)}
         yAxisWidth={30}

diff --git a/src/AreaChart/demos/customColors.tsx b/src/AreaChart/demos/customColors.tsx
@@ -1,7 +1,7 @@
-import { AreaChart } from '@lobehub/charts';
+import { AreaChart, AreaChartProps } from '@lobehub/charts';
 import { useTheme } from 'antd-style';
 
-const chartdata = [
+const data: AreaChartProps['data'] = [
   {
     'Distance Running': 167,
     'Hatha Yoga': 115,
@@ -58,7 +58,7 @@ export default () => {
     <AreaChart
       categories={['Distance Running', 'Road Cycling', 'Open Water Swimming']}
       colors={[theme.purple, theme.cyan, '#ffcc33']}
-      data={chartdata}
+      data={data}
       index="date"
       yAxisWidth={30}
     />

diff --git a/src/AreaChart/demos/customTooltip.tsx b/src/AreaChart/demos/customTooltip.tsx
@@ -1,9 +1,9 @@
-import { AreaChart, ChartTooltipFrame } from '@lobehub/charts';
+import { AreaChart, AreaChartProps, ChartTooltipFrame } from '@lobehub/charts';
 import { Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
-const chartdata = [
+const data: AreaChartProps['data'] = [
   {
     Running: 167,
     date: 'Jan 23',
@@ -30,17 +30,10 @@ const chartdata = [
   },
 ];
 
-type CustomTooltipTypeBar = {
-  active: boolean | undefined;
-  label: any;
-  payload: any;
-};
-
 export default () => {
   const theme = useTheme();
 
-  const customTooltip = (props: CustomTooltipTypeBar) => {
-    const { payload, active } = props;
+  const customTooltip: AreaChartProps['customTooltip'] = ({ payload, active }) => {
     if (!active || !payload) return null;
     return (
       <ChartTooltipFrame gap={4} padding={8}>
@@ -70,7 +63,7 @@ export default () => {
       <AreaChart
         categories={['Running']}
         customTooltip={customTooltip}
-        data={chartdata}
+        data={data}
         index="date"
         yAxisWidth={30}
       />

diff --git a/src/AreaChart/demos/example.tsx b/src/AreaChart/demos/example.tsx
@@ -1,7 +1,7 @@
-import { AreaChart } from '@lobehub/charts';
+import { AreaChart, AreaChartProps } from '@lobehub/charts';
 import { Flexbox } from 'react-layout-kit';
 
-const chartdata = [
+const data: AreaChartProps['data'] = [
   {
     Inverters: 2338,
     SolarPanels: 2890,
@@ -64,7 +64,7 @@ const chartdata = [
   },
 ];
 
-const valueFormatter = (number: number) => {
+const valueFormatter: AreaChartProps['valueFormatter'] = (number) => {
   return '$ ' + new Intl.NumberFormat('us').format(number).toString();
 };
 
@@ -75,7 +75,7 @@ export default () => {
       <h2 style={{ marginTop: 4 }}>$34,567</h2>
       <AreaChart
         categories={['SolarPanels', 'Inverters']}
-        data={chartdata}
+        data={data}
         index="date"
         valueFormatter={valueFormatter}
         yAxisWidth={65}

diff --git a/src/AreaChart/demos/index.tsx b/src/AreaChart/demos/index.tsx
@@ -1,7 +1,7 @@
-import { AreaChart } from '@lobehub/charts';
+import { AreaChart, AreaChartProps } from '@lobehub/charts';
 import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
-const chartdata = [
+const data: AreaChartProps['data'] = [
   {
     Inverters: 2338,
     SolarPanels: 2890,
@@ -64,12 +64,13 @@ const chartdata = [
   },
 ];
 
-const dataFormatter = (number: number) => `$${Intl.NumberFormat('us').format(number).toString()}`;
+const valueFormatter: AreaChartProps['valueFormatter'] = (number: number) =>
+  `$${Intl.NumberFormat('us').format(number).toString()}`;
 
 export default () => {
   const store = useCreateStore();
 
-  const props: any = useControls(
+  const props: AreaChartProps | any = useControls(
     {
       allowDecimals: true,
       animationDuration: {
@@ -116,10 +117,10 @@ export default () => {
     <StoryBook levaStore={store}>
       <AreaChart
         categories={['SolarPanels', 'Inverters']}
-        data={chartdata}
+        data={data}
         index={'date'}
         onValueChange={(v) => console.log(v)}
-        valueFormatter={dataFormatter}
+        valueFormatter={valueFormatter}
         {...props}
       />
     </StoryBook>

diff --git a/src/AreaChart/index.tsx b/src/AreaChart/index.tsx
@@ -79,6 +79,7 @@ const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>((props, ref) => {
     yAxisLabel,
     width = '100%',
     height = '20rem',
+    style,
     ...rest
   } = props;
   const CustomTooltip = customTooltip;
@@ -91,7 +92,7 @@ const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>((props, ref) => {
   const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   const hasOnValueChange = !!onValueChange;
 
-  function onDotClick(itemData: any, event: MouseEvent) {
+  const onDotClick = (itemData: any, event: MouseEvent) => {
     event.stopPropagation();
 
     if (!hasOnValueChange) return;
@@ -116,9 +117,9 @@ const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>((props, ref) => {
         ...itemData.payload,
       });
     }
-  }
+  };
 
-  function onCategoryClick(dataKey: string) {
+  const onCategoryClick = (dataKey: string) => {
     if (!hasOnValueChange) return;
     if (
       (dataKey === activeLegend && !activeDot) ||
@@ -134,9 +135,16 @@ const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>((props, ref) => {
       });
     }
     setActiveDot(undefined);
-  }
+  };
   return (
-    <Flexbox className={className} height={height} ref={ref} width={width} {...rest}>
+    <Flexbox
+      className={className}
+      height={height}
+      ref={ref}
+      style={{ position: 'relative', ...style }}
+      width={width}
+      {...rest}
+    >
       <ResponsiveContainer>
         {data?.length ? (
           <ReChartsAreaChart

diff --git a/src/BarChart/demos/axis.tsx b/src/BarChart/demos/axis.tsx
@@ -1,7 +1,7 @@
-import { BarChart } from '@lobehub/charts';
+import { BarChart, BarChartProps } from '@lobehub/charts';
 import { Flexbox } from 'react-layout-kit';
 
-const chartdata = [
+const data: BarChartProps['data'] = [
   {
     'Number of threatened species': 2488,
     'name': 'Amphibians',
@@ -32,18 +32,18 @@ const chartdata = [
   },
 ];
 
-const dataFormatter = (number: number) => Intl.NumberFormat('us').format(number).toString();
+const valueFormatter: BarChartProps['valueFormatter'] = (number) =>
+  Intl.NumberFormat('us').format(number).toString();
 
 export default () => {
   return (
     <Flexbox>
       <h4>Number of species threatened with extinction (2021)</h4>
       <BarChart
         categories={['Number of threatened species']}
-        className="mt-6"
-        data={chartdata}
+        data={data}
         index="name"
-        valueFormatter={dataFormatter}
+        valueFormatter={valueFormatter}
         xAxisLabel="Species"
         yAxisLabel="Count"
         yAxisWidth={48}

diff --git a/src/BarChart/demos/clickEvent.tsx b/src/BarChart/demos/clickEvent.tsx
@@ -1,9 +1,9 @@
-import { BarChart, EventProps } from '@lobehub/charts';
+import { BarChart, BarChartProps, EventProps } from '@lobehub/charts';
 import { Highlighter } from '@lobehub/ui';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const chartdata = [
+const data: BarChartProps['data'] = [
   {
     '2022': 45,
     '2023': 78,
@@ -73,7 +73,7 @@ export default () => {
       <h4>Closed Pull Requests</h4>
       <BarChart
         categories={['2022', '2023']}
-        data={chartdata}
+        data={data}
         index="date"
         onValueChange={(v) => setValue(v)}
         yAxisWidth={36}

diff --git a/src/BarChart/demos/customColors.tsx b/src/BarChart/demos/customColors.tsx
@@ -1,7 +1,7 @@
-import { BarChart } from '@lobehub/charts';
+import { BarChart, BarChartProps } from '@lobehub/charts';
 import { useTheme } from 'antd-style';
 
-const chartdata = [
+const data: BarChartProps['data'] = [
   {
     'Distance Running': 167,
     'Hatha Yoga': 115,
@@ -58,7 +58,7 @@ export default () => {
     <BarChart
       categories={['Distance Running', 'Road Cycling', 'Open Water Swimming']}
       colors={[theme.purple, theme.colorSuccess, '#ffcc33']}
-      data={chartdata}
+      data={data}
       index="date"
       yAxisWidth={36}
     />

diff --git a/src/BarChart/demos/customTooltip.tsx b/src/BarChart/demos/customTooltip.tsx
@@ -1,9 +1,9 @@
-import { BarChart, ChartTooltipFrame } from '@lobehub/charts';
+import { BarChart, BarChartProps, ChartTooltipFrame } from '@lobehub/charts';
 import { Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
-const chartdata = [
+const data: BarChartProps['data'] = [
   {
     Running: 167,
     date: 'Jan 23',
@@ -42,17 +42,10 @@ const chartdata = [
   },
 ];
 
-type CustomTooltipTypeBar = {
-  active: boolean | undefined;
-  label: any;
-  payload: any;
-};
-
 export default () => {
   const theme = useTheme();
 
-  const customTooltip = (props: CustomTooltipTypeBar) => {
-    const { payload, active } = props;
+  const customTooltip: BarChartProps['customTooltip'] = ({ payload, active }) => {
     if (!active || !payload) return null;
     return (
       <ChartTooltipFrame gap={4} padding={8}>
@@ -83,7 +76,7 @@ export default () => {
       <BarChart
         categories={['Running']}
         customTooltip={customTooltip}
-        data={chartdata}
+        data={data}
         index="date"
         yAxisWidth={36}
       />

diff --git a/src/BarChart/demos/example.tsx b/src/BarChart/demos/example.tsx
@@ -1,7 +1,7 @@
-import { BarChart } from '@lobehub/charts';
+import { BarChart, BarChartProps } from '@lobehub/charts';
 import { Flexbox } from 'react-layout-kit';
 
-const chartdata = [
+const data: BarChartProps['data'] = [
   {
     'Number of threatened species': 2488,
     'name': 'Amphibians',
@@ -32,7 +32,8 @@ const chartdata = [
   },
 ];
 
-const dataFormatter = (number: number) => Intl.NumberFormat('us').format(number).toString();
+const valueFormatter: BarChartProps['valueFormatter'] = (number) =>
+  Intl.NumberFormat('us').format(number).toString();
 
 export default () => {
   return (
@@ -41,9 +42,9 @@ export default () => {
       <BarChart
         categories={['Number of threatened species']}
         className="mt-6"
-        data={chartdata}
+        data={data}
         index="name"
-        valueFormatter={dataFormatter}
+        valueFormatter={valueFormatter}
         yAxisWidth={48}
       />
     </Flexbox>