바차트 수정완료 - 색상 및 상세 디자인 수정예정

packages/common/business_components/src/ui/chart/BarChart.tsx

@@ -1,42 +1,72 @@
 "use client"
-import type { CSSProperties } from "react";
-import {
-  Card,
-  CardContent
-} from "./lib/card";
+import { Bar, BarChart, CartesianGrid, Legend, XAxis, YAxis } from "recharts";
 import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
   type ChartConfig
 } from "./lib/chart";
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
-export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle: string}) {
+const tooltipClass = "!p-4 text-[12px] w-[9vw] h-[5vw]";
+
+type BarChartProps = {
+  chartConfig: ChartConfig | undefined;
+  chartData: any[] | undefined;
+  chartTitle: string;
+  chartClassName?: string;
+  graphSize?: number;
+  yFieldText?: string;
+  showLegend?: boolean;
+}
+
+export default function Chart({chartConfig=undefined, chartData=[], chartTitle='차트', chartClassName='w-full h-full', graphSize=40, yFieldText='', showLegend=false} : BarChartProps) {
+  const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5"];
+
   return (
-    <Card className="h-full">
-      <CardContent className="h-full">
-        {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
-        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
-          {props.chartTitle}
-        </div>): null}
-        <div className="h-[calc(100%-42px)] flex justify-center">
-          <ChartContainer config={props.chartConfig} className="h-full w-full">
-              <BarChart accessibilityLayer data={props.chartData} className="h-full">
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                    dataKey="label"
-                    tickLine={false}
-                    tickMargin={10}
-                    axisLine={false}
-                    tickFormatter={(value) => value.slice(0, 3)}
+    <>
+    {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
+      <div className="!mt-3 text-[2.5rem] font-bold">
+      {chartTitle}
+      </div>): null}
+      <div className="flex justify-center">
+        <ChartContainer config={chartConfig ?? {}} className={chartClassName + " !w-[90%]"}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="label"
+              tickLine={true}
+              tickMargin={10}
+              axisLine={true}
+              fontSize={13}
+              fontWeight={500}
+            />
+            <YAxis 
+              tickLine={true}
+              tickMargin={10}
+              tickCount={6}
+              axisLine={true}
+              fontSize={12}
+              fontWeight={500}
+              label={yFieldText ? { value: yFieldText, className:"text-[13px] foont-bold", position: 'top', textAnchor: 'middle', offset: 20 } : undefined}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent className={tooltipClass} indicator="dashed" />}/>
+            {chartData && chartData.length > 0 && (
+              Object.keys(chartData[0])
+                .filter(key => key !== "label")
+                .map((key, idx) => (
+                  <Bar
+                    dataKey={key}
+                    radius={5}
+                    key={key}
+                    barSize={graphSize}
+                    fill={colors[idx % colors.length]}
                   />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />}/>
-                  <Bar dataKey="val" radius={10} />
-              </BarChart>
-          </ChartContainer>
-        </div>
-      </CardContent>
-    </Card>
+                ))
+              )}
+            {showLegend && <Legend verticalAlign="top" height={32} iconSize={15} className="!text-[20px]" fontSize={20} align="right"/>}
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </>
   )
 }

packages/common/business_components/src/ui/chart/index.tsx

@@ -18,15 +18,26 @@ const CHART_FORM = {
   LINEBAR : 'linebar'
 };
 
-function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; chartTitle:string; }) {
+type MainChartProps = {
+  chartForm: string;
+  chartConfig: any;
+  chartData: any;
+  chartTitle: string;
+  chartClassName?: string;
+  graphSize?: number;
+  yFieldText? : string;
+  showLegend? : boolean;
+}
+
+function MainChart(props: MainChartProps) {
   if( props.chartForm == CHART_FORM.BAR ){
     return (
-      <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} showLegend={props.showLegend}>
       </BarChart>
     );
   } else if( props.chartForm == CHART_FORM.LINE ){
     return (
-      <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} >
       </LineChart>
     );
   } else if( props.chartForm == CHART_FORM.DN ){