차트 수정정중, 라인바 차트 개발

2025-03-12 11:02:10 +09:00
parent b79629704a
commit 104a7b0079
5 changed files with 125 additions and 23 deletions
@@ -12,11 +12,11 @@ import {
 } from "./lib/chart";
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

-export default function Chart(props: { chartStyle: CSSProperties | undefined; chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
  return (
    <Card>
        <CardContent>
-            <ChartContainer style={props.chartStyle} config={props.chartConfig}>
+            <ChartContainer config={props.chartConfig}>
                <BarChart accessibilityLayer data={props.chartData}>
                    <CartesianGrid vertical={false} />
                    <XAxis
@@ -15,14 +15,13 @@ import {
 import type { CSSProperties } from "react";

 // eslint-disable-next-line react-refresh/only-export-components
-export default (props: { chartConfig: ChartConfig; chartStyle: CSSProperties | undefined; chartData: never[] | undefined; }) =>{
+export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; }) =>{
  return (
    <Card className="flex flex-col">
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={props.chartConfig}
          className="mx-auto aspect-square max-h-[300px]"
-          style={props.chartStyle}
        >
          <PieChart>
            <ChartTooltip
@@ -0,0 +1,101 @@
+"use client"
+import type { CSSProperties } from "react";
+import { Bar, CartesianGrid, ComposedChart, Legend, Line, Tooltip, XAxis, YAxis } from "recharts";
+import {
+  Card,
+  CardContent
+} from "./lib/card";
+import {
+  ChartContainer,
+  type ChartConfig
+} from "./lib/chart";
+import React from "react";
+
+// 툴팁 커스텀 css
+/** 차트 기본 스타일 */
+const styles = {
+  tooltipDiv: {
+    borderRadius: "5px",
+    backgroundColor: "white",
+    padding: "10px",
+    boxShadow: "0px 2px 10px rgba(0,0,0,0.2)",
+    width: "180px", // 적절한 크기로 설정
+  } as React.CSSProperties,
+  tooltipLabel: {
+    fontWeight: "bold",
+    fontSize: "12px",
+    marginBottom: "5px",
+    borderBottom: "1px solid #ddd",
+    paddingBottom: "3px",
+  } as React.CSSProperties,
+  tooltipText: {
+    fontSize: "10px",
+  } as React.CSSProperties,
+  legendContainer: {
+    display: "flex",
+    justifyContent: "center",
+    gap: "20px",
+    fontSize: "9px",
+    fontWeight : "bold",
+    marginTop: "10px",
+  } as CSSProperties,
+};
+
+// 커스텀 툴팁
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div style={styles.tooltipDiv}>
+        <p style={styles.tooltipLabel}>{label}</p>
+        {payload.map((item, index) => (
+          <div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
+            {/* 색상 박스 추가 (범례 색상과 동일) */}
+            <div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
+            <span style={styles.tooltipText}>{`${item.name}: ${item.value}`}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return null;
+};
+
+// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
+const CustomLegend = (props: any) => {
+  const { payload } = props;
+  return (
+    <div style={styles.legendContainer}>
+      {payload.map((entry, index) => (
+        <div key={`legend-${index}`} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <div style={{ width: "12px", height: "12px", backgroundColor: entry.color, borderRadius: "50%" }}></div>
+          <span>{entry.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+  return (
+    <Card>
+      <CardContent>
+        <ChartContainer config={props.chartConfig}>
+          <ComposedChart data={props.chartData}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="label" />
+            {/* 왼쪽 Y축: lineVal (정상) */}
+            <YAxis yAxisId="left" orientation="left" />
+            {/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
+            <YAxis yAxisId="right" orientation="right" reversed />
+            <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
+            <Legend content={CustomLegend}/>
+            {/* 바 차트 (오른쪽 Y축 사용, 위에서 아래로) */}
+            <Bar yAxisId="right" dataKey="barVal" fill="#8884d8" name="강수량(mm/일)"/>
+            {/* 라인 차트 (왼쪽 Y축 사용) */}
+            <Line yAxisId="left" type="monotone" dataKey="lineVal" stroke="orange" strokeWidth={2} dot={{r: 0}} name="BOD(mg/L)"/>
+         </ComposedChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
@@ -12,11 +12,11 @@ import {
 } from "./lib/chart";
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts";

-export default function Linechart(props: { chartStyle: CSSProperties | undefined; chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
  return (
    <Card>
      <CardContent>
-        <ChartContainer style={props.chartStyle} config={props.chartConfig}>
+        <ChartContainer config={props.chartConfig}>
          <LineChart
            accessibilityLayer
            data={props.chartData}
@@ -1,17 +1,10 @@
 
-import React from 'react'
+import React from 'react';
 import BarChart from './BarChart';
-import LineChart from './LineChart';
 import DoughnutChart from './DoughnutChart';
-import {type ChartConfig } from './lib/chart';
-
-/** 차트 기본 스타일 */
-const styles = {
-    divHeight : {
-        height: '400px',
-        width : '500px'
-    } as React.CSSProperties
-}
+import { type ChartConfig } from './lib/chart';
+import LineChart from './LineChart';
+import LineBarchart from './LineBarChart';

 /**차트 FORM */
 const CHART_FORM = {
@@ -20,7 +13,9 @@ const CHART_FORM = {
  /**라인 차트 형태*/
  LINE:'line',
  /**도넛 차트 형태*/
-  DN :'daughnut'
+  DN :'daughnut',
+  /**LINE,BAR차트 */
+  LINEBAR : 'linebar'
 };

 function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; }) {
@@ -34,21 +29,28 @@ function MainChart(props: { chartForm: string; chartConfig: any; chartData: any;
  } else if( props.chartForm == CHART_FORM.LINE ){
    return (
      <div>
-        <LineChart chartConfig={props.chartConfig} chartStyle={styles.divHeight} chartData={props.chartData}>
+        <LineChart chartConfig={props.chartConfig} chartData={props.chartData}>
        </LineChart>
      </div>
    );
  } else if( props.chartForm == CHART_FORM.DN ){
    return (
      <div>
-        <DoughnutChart chartConfig={props.chartConfig} chartStyle={styles.divHeight} chartData={props.chartData}>
+        <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData}>
        </DoughnutChart>
      </div>
    );
+  } else if (props.chartForm == CHART_FORM.LINEBAR){
+    return (
+      <div className='w-100'>
+        <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData}>
+        </LineBarchart>
+      </div>
+    );
  }
 }

-export {MainChart};
+export { MainChart };
 // eslint-disable-next-line react-refresh/only-export-components
-export {CHART_FORM};
-export type {ChartConfig};
+  export { CHART_FORM };
+  export type { ChartConfig };