refactor: make component props more consistent

outerbase · Jan 31, 2025 · dd4677d · dd4677d
1 parent da91ec5
commit dd4677d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 33 deletions.
diff --git a/src/app/storybook/chart/page.tsx b/src/app/storybook/chart/page.tsx
@@ -4,7 +4,7 @@ import Chart, { ChartData, ChartValue } from "@/components/chart";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
 
-const chatValue: ChartValue[] = [
+const data: ChartData[] = [
   {
     package_year: 2021,
     package_count: 33,
@@ -35,7 +35,7 @@ const chatValue: ChartValue[] = [
   },
 ];
 
-const lineChartData: ChartData = {
+const lineChartValue: ChartValue = {
   connection_id: null,
   created_at: "2025-01-30T02:57:34.579Z",
   id: "2bdc1dc4-21de-4b5f-90d2-384e40288769",
@@ -73,7 +73,7 @@ const lineChartData: ChartData = {
   workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
 };
 
-const barChartData: ChartData = {
+const barChartValue: ChartValue = {
   connection_id: null,
   created_at: "2025-01-30T02:56:40.851Z",
   id: "fed7cd59-6be9-4f43-af6d-b730d14be984",
@@ -114,7 +114,7 @@ const barChartData: ChartData = {
   workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
 };
 
-const pieChartData: ChartData = {
+const pieChartValue: ChartValue = {
   connection_id: null,
   created_at: "2025-01-30T03:00:40.963Z",
   id: "602f5960-e2db-4359-8008-c87629c1d169",
@@ -153,16 +153,16 @@ const pieChartData: ChartData = {
 };
 
 export default function StorybookChartPage() {
-  const [chartData, setChartData] = useState(lineChartData);
-  const [items, setItems] = useState(chatValue);
+  const [chartValue, setChartValue] = useState(lineChartValue);
+  const [items, setItems] = useState(data);
   const [modifier, setModifier] = useState({});
 
   return (
     <div>
       <div>
         <Button
           onClick={() => {
-            setChartData(lineChartData);
+            setChartValue(lineChartValue);
             setItems(items);
             setModifier({
               title: {
@@ -180,7 +180,7 @@ export default function StorybookChartPage() {
         <Button
           className="ml-2"
           onClick={() => {
-            setChartData(barChartData);
+            setChartValue(barChartValue);
             setItems(items);
             setModifier({
               title: {
@@ -198,7 +198,7 @@ export default function StorybookChartPage() {
         <Button
           className="ml-2"
           onClick={() => {
-            setChartData(pieChartData);
+            setChartValue(pieChartValue);
             setItems(items);
             setModifier({
               title: {
@@ -215,7 +215,7 @@ export default function StorybookChartPage() {
         </Button>
       </div>
       <div>
-        <Chart chartData={chartData} chartValue={items} modifier={modifier} />
+        <Chart value={chartValue} data={items} modifier={modifier} />
       </div>
     </div>
   );

diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
@@ -32,7 +32,7 @@ interface ChartParams {
   connection_id: string | null;
 }
 
-export interface ChartData {
+export interface ChartValue {
   connection_id: string | null;
   created_at: string;
   id: string;
@@ -45,29 +45,25 @@ export interface ChartData {
   workspace_id: string;
 }
 
-export interface ChartValue {
+export interface ChartData {
   [key: string]: any;
 }
 
 export type ChartType = "line" | "bar" | "pie" | "column" | "scatter";
 
 interface OuterbaseChartProps {
-  chartValue: ChartValue[];
-  chartData: ChartData;
+  data: ChartData[];
+  value: ChartValue;
   modifier?: EChartsOption;
 }
 
-export default function Chart({
-  chartValue,
-  chartData,
-  modifier,
-}: OuterbaseChartProps) {
+export default function Chart({ value, data, modifier }: OuterbaseChartProps) {
   const domRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const props = transfromOutbaseChartData({
-      chartValue,
-      chartData,
+      value,
+      data,
       modifier,
     });
     if (domRef.current) {
@@ -79,30 +75,30 @@ export default function Chart({
       chartInstance.clear();
       chartInstance.setOption(props);
     }
-  }, [domRef, chartValue, chartData, modifier]);
+  }, [domRef, value, data, modifier]);
 
   return <div ref={domRef} className="h-[400px] w-[500px]"></div>;
 }
 
 export function transfromOutbaseChartData({
-  chartValue,
-  chartData,
+  value,
+  data,
   modifier,
 }: OuterbaseChartProps) {
-  const xAxisData = chartValue.map(
-    (item) => item[chartData?.params?.options?.xAxisKey] ?? ""
+  const xAxisData = data.map(
+    (item) => item[value?.params?.options?.xAxisKey] ?? ""
   );
-  const seriesData = chartData?.params?.options?.yAxisKeys.map((key) => {
-    const color = chartData?.params?.options?.yAxisKeyColors?.[key] ?? "";
-    const chartType = chartData?.type;
+  const seriesData = value?.params?.options?.yAxisKeys.map((key) => {
+    const color = value?.params?.options?.yAxisKeyColors?.[key] ?? "";
+    const chartType = value?.type;
     const baseSeries = {
       name: key,
-      type: chartData.type,
-      data: chartValue.map((item) => {
+      type: value.type,
+      data: data.map((item) => {
         if (chartType === "pie") {
           return {
             value: item[key],
-            name: item[chartData?.params?.options?.xAxisKey] ?? "",
+            name: item[value?.params?.options?.xAxisKey] ?? "",
           };
         } else {
           return item[key];
@@ -118,7 +114,7 @@ export function transfromOutbaseChartData({
     return baseSeries;
   });
 
-  if (chartData.type === "pie") {
+  if (value.type === "pie") {
     return {
       series: seriesData,
       ...modifier,