@uniai-fe/chart-legacy 0.1.1

package/src/components/graphs/Bar.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  type BarProps,
+  type CellProps,
+  type XAxisProps,
+  type YAxisProps,
+} from "recharts";
+import type { ChartBarProps } from "../../types";
+import { useChartSize } from "@uniai-fe/react-hooks";
+
+/**
+ * 차트 템플릿; 막대 차트
+ * @param {ChartLineProps} props
+ */
+export default function ChartBar({
+  barSize = 25,
+  chartData,
+  legendData,
+  yAxisData,
+  chartLayoutOptions,
+  xAxisOptions,
+  yAxisOptions,
+  isHideGrid,
+  isUseCell,
+  tooltipOptions,
+  containerOptions,
+  barOptions,
+  cellOptions,
+  children: extraChartComponents,
+}: ChartBarProps) {
+  const { singleSizeOptions, sizeOptions } = useChartSize();
+
+  return (
+    <ResponsiveContainer
+      width="100%"
+      height="100%"
+      {...sizeOptions(containerOptions)}
+    >
+      <BarChart
+        {...sizeOptions({
+          margin: { top: 10, left: 0, right: 0, bottom: 0 },
+          ...chartLayoutOptions,
+        })}
+        // margin={{
+        //   top: rem(10),
+        //   left: 0,
+        //   right: 0,
+        //   bottom: 0,
+        //   ...objectSizeOptions(chartLayoutOptions.margin),
+        // }}
+        data={chartData}
+      >
+        {!isHideGrid && yAxisData?.[0] && (
+          <CartesianGrid vertical={false} yAxisId={yAxisData[0].axisCategory} />
+        )}
+        {tooltipOptions && <Tooltip {...tooltipOptions} />}
+        <XAxis
+          axisLine={false}
+          {...sizeOptions<XAxisProps>({
+            tickSize: 0,
+            tickMargin: 10,
+            padding: { left: 30, right: 30 },
+            ...xAxisOptions,
+          })}
+          // padding={{
+          //   left: rem(30),
+          //   right: rem(30),
+          //   ...objectSizeOptions(xAxisOptions?.padding),
+          // }}
+          // tickSize={singleSizeOptions(xAxisOptions?.tickSize || 0)}
+          // tickMargin={singleSizeOptions(xAxisOptions?.tickMargin || 10)}
+          // height={singleSizeOptions(xAxisOptions?.height)}
+        />
+        {yAxisData.map(({ key, axisCategory }) => (
+          <YAxis
+            key={key}
+            yAxisId={axisCategory}
+            axisLine={false}
+            hide={true}
+            {...sizeOptions<YAxisProps>({ tickSize: 0, ...yAxisOptions })}
+            // tickSize={singleSizeOptions(yAxisOptions?.tickSize || 0)}
+            // width={singleSizeOptions<YAxisWidth>(yAxisOptions?.width)}
+          />
+        ))}
+        {!isUseCell &&
+          legendData
+            .filter(({ active }) => active)
+            .map(
+              ({
+                key,
+                code,
+                axisCategory,
+                name,
+                unit,
+                color,
+                strokeColor,
+                strokeStyle,
+                strokeWidth,
+                highlight,
+              }) => (
+                <Bar
+                  key={key}
+                  barSize={singleSizeOptions(barSize)}
+                  type="monotone"
+                  dataKey={code}
+                  yAxisId={axisCategory}
+                  name={name}
+                  unit={unit}
+                  fill={color}
+                  {...(strokeColor
+                    ? {
+                        strokeWidth:
+                          strokeWidth || "var(--chart-data-line-width)",
+                        stroke: strokeColor,
+                        strokeDasharray: strokeStyle,
+                      }
+                    : {})}
+                  {...(typeof highlight === "boolean" && highlight === false
+                    ? { strokeOpacity: 0.3 }
+                    : {})}
+                  isAnimationActive={false}
+                  {...sizeOptions<BarProps>(barOptions)}
+                />
+              ),
+            )}
+        {isUseCell && (
+          <Bar
+            barSize={singleSizeOptions(barSize)}
+            type="monotone"
+            dataKey="value"
+            yAxisId={legendData[0].axisCategory}
+            isAnimationActive={false}
+            {...sizeOptions<BarProps>(barOptions)}
+          >
+            {legendData.map(
+              ({
+                key,
+                name,
+                color,
+                strokeColor,
+                strokeStyle,
+                strokeWidth,
+                highlight,
+              }) => (
+                <Cell
+                  key={key}
+                  name={name}
+                  fill={color}
+                  {...(strokeColor
+                    ? {
+                        strokeWidth:
+                          strokeWidth || "var(--chart-data-line-width)",
+                        stroke: strokeColor,
+                        strokeDasharray: strokeStyle,
+                      }
+                    : {})}
+                  {...(typeof highlight === "boolean" && highlight === false
+                    ? { strokeOpacity: 0.3 }
+                    : {})}
+                  {...sizeOptions<CellProps>(cellOptions)}
+                />
+              ),
+            )}
+          </Bar>
+        )}
+        {extraChartComponents}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}

package/src/components/graphs/Doughnut.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useMemo } from "react";
+import { Pie, PieChart, ResponsiveContainer } from "recharts";
+import type { ChartDoughnutProps } from "../../types";
+import type { Props } from "recharts/types/polar/Pie";
+import { useChartSize } from "@uniai-fe/react-hooks";
+
+/**
+ * 차트 템플릿; 도넛 차트
+ * @param {ChartDoughnutProps} props
+ */
+export default function ChartDoughnut({
+  width: size = 200,
+  height,
+  thickness = 30,
+  startAngle = 90,
+  endAngle = -360,
+  chartData,
+  chartLayoutOptions,
+  containerOptions,
+  pieOptions,
+  className,
+  children: extraChartComponents,
+}: ChartDoughnutProps) {
+  const { rem, sizeOptions } = useChartSize();
+
+  const sizeRem = useMemo((): number => rem(size), [rem, size]);
+  const heightSize = useMemo(
+    (): number =>
+      typeof height === "number" && height > 0 ? rem(height) : sizeRem,
+    [height, sizeRem, rem],
+  );
+
+  const defaultPieProps = useMemo(
+    (): Props => ({
+      cx: sizeRem / 2,
+      cy: heightSize / 2,
+      innerRadius: sizeRem / 2 - thickness,
+      outerRadius: sizeRem / 2,
+      startAngle,
+      endAngle,
+      paddingAngle: 0,
+      labelLine: false,
+      isAnimationActive: false,
+      strokeWidth: 0,
+      dataKey: "value",
+      ...sizeOptions(pieOptions),
+    }),
+    [
+      endAngle,
+      heightSize,
+      pieOptions,
+      sizeRem,
+      startAngle,
+      thickness,
+      sizeOptions,
+    ],
+  );
+
+  return (
+    <ResponsiveContainer
+      height="100%"
+      {...sizeOptions(containerOptions)}
+      width={containerOptions?.width || sizeRem || "100%"}
+      className={className}
+    >
+      <PieChart
+        // margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
+        {...sizeOptions({
+          margin: { top: 0, left: 0, right: 0, bottom: 0 },
+          ...chartLayoutOptions,
+        })}
+        width={sizeRem}
+        height={heightSize}
+        // preserveAspectRatio="xMinYMin meet"
+      >
+        {/* <Pie
+          {...defaultPieProps}
+          // 도넛 트랙
+          dataKey="track"
+          data={[{ ...chartData[0], fill: "var(--chart-level-color-0)" }]}
+          ref={null}
+        /> */}
+        <Pie {...defaultPieProps} data={chartData} />
+        {extraChartComponents}
+      </PieChart>
+    </ResponsiveContainer>
+  );
+}

package/src/components/graphs/Line.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  type LineProps,
+  type XAxisProps,
+  type YAxisProps,
+} from "recharts";
+import type { ChartLineProps } from "../../types";
+import { useChartSize } from "@uniai-fe/react-hooks";
+
+/**
+ * 차트 템플릿; 라인 차트
+ * @param {ChartLineProps} props
+ */
+export default function ChartLine({
+  chartData,
+  legendData,
+  yAxisData,
+  chartLayoutOptions,
+  xAxisOptions,
+  yAxisOptions,
+  isHideGrid,
+  tooltipOptions,
+  containerOptions,
+  lineOptions,
+  children: extraChartComponents,
+}: ChartLineProps) {
+  const { sizeOptions } = useChartSize();
+
+  return (
+    <ResponsiveContainer
+      width="100%"
+      height="100%"
+      {...sizeOptions(containerOptions)}
+    >
+      <LineChart
+        // margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
+        {...sizeOptions({
+          margin: { top: 0, left: 0, right: 0, bottom: 0 },
+          ...chartLayoutOptions,
+        })}
+        data={chartData}
+      >
+        {!isHideGrid && yAxisData?.[0] && (
+          <CartesianGrid vertical={false} yAxisId={yAxisData[0].axisCategory} />
+        )}
+        {tooltipOptions && <Tooltip {...tooltipOptions} />}
+        <XAxis
+          axisLine={false}
+          {...sizeOptions<XAxisProps>({
+            padding: { left: 30, right: 30 },
+            tickSize: 0,
+            tickMargin: 10,
+            ...xAxisOptions,
+          })}
+          // padding={{
+          //   left: rem(30),
+          //   right: rem(30),
+          //   ...objectSizeOptions(xAxisOptions?.padding),
+          // }}
+          // tickSize={singleSizeOptions(xAxisOptions?.tickSize || 0)}
+          // tickMargin={singleSizeOptions(xAxisOptions?.tickMargin || 10)}
+          // height={singleSizeOptions(xAxisOptions?.height)}
+        />
+        {yAxisData.map(({ key, axisCategory }) => (
+          <YAxis
+            key={key}
+            yAxisId={axisCategory}
+            axisLine={false}
+            hide={true}
+            {...sizeOptions<YAxisProps>({ tickSize: 0, ...yAxisOptions })}
+            // tickSize={singleSizeOptions(yAxisOptions?.tickSize || 0)}
+            // width={singleSizeOptions<YAxisWidth>(yAxisOptions?.width)}
+          />
+        ))}
+        {legendData
+          .filter(({ active }) => active)
+          .map(
+            ({
+              key,
+              code,
+              axisCategory,
+              name,
+              unit,
+              color,
+              highlight,
+              strokeStyle,
+            }) => (
+              <Line
+                key={key}
+                type="monotone"
+                dataKey={code}
+                yAxisId={axisCategory}
+                name={name}
+                unit={unit}
+                stroke={color}
+                strokeWidth="var(--chart-data-line-width)"
+                {...(strokeStyle
+                  ? {
+                      strokeDasharray: strokeStyle,
+                    }
+                  : {})}
+                {...(typeof highlight === "boolean" && highlight === false
+                  ? { strokeOpacity: 0.3 }
+                  : {})}
+                dot={false}
+                isAnimationActive={false}
+                {...sizeOptions<LineProps>(lineOptions)}
+              />
+            ),
+          )}
+        {extraChartComponents}
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}

package/src/components/graphs/index.tsx

@@ -0,0 +1,17 @@
+import ChartArcGauge from "./ArcGauge";
+import ChartArcMeter from "./ArcMeter";
+import ChartArea from "./Area";
+import ChartBar from "./Bar";
+import ChartDoughnut from "./Doughnut";
+import ChartLine from "./Line";
+
+const ChartGraph = {
+  Bar: ChartBar,
+  Line: ChartLine,
+  Area: ChartArea,
+  Doughnut: ChartDoughnut,
+  ArcGauge: ChartArcGauge,
+  ArcMeter: ChartArcMeter,
+};
+
+export default ChartGraph;

package/src/components/ticks/XAxis.tsx

@@ -0,0 +1,39 @@
+import type { ChartTickXAxisProps } from "../../types";
+import { getXAxisTextAttr } from "@uniai-fe/util-react";
+
+/**
+ * 차트 템플릿 > tick; XAxis
+ * @param {ChartTickXAxisProps} props
+ * @param {RechartsXAxisTickProps} props.xAxisProps x축 옵션
+ */
+export default function ChartTickXAxis({
+  className,
+  children,
+  xAxisProps,
+  groupProps,
+  tSpanPos,
+  customValue,
+}: ChartTickXAxisProps) {
+  // recharts.js XAxis tick의 기본 props
+  const {
+    x,
+    // 추가 기본 정보; index, visibleTicksCount,
+    // index,
+    // payload - 각 x의 y 데이터; coordinate, value, index, offset, tickCoord, isShow
+    payload,
+  } = xAxisProps;
+
+  return (
+    <g className={className} {...groupProps}>
+      <text
+        {...getXAxisTextAttr(xAxisProps)}
+        className="recharts-text recharts-cartesian-axis-tick-value"
+      >
+        <tspan {...tSpanPos} x={x}>
+          {customValue || payload.value}
+        </tspan>
+      </text>
+      {children}
+    </g>
+  );
+}

package/src/components/ticks/index.tsx

@@ -0,0 +1,7 @@
+import ChartTickXAxis from "./XAxis";
+
+const ChartTick = {
+  X: ChartTickXAxis,
+};
+
+export default ChartTick;

package/src/components.tsx

@@ -0,0 +1,17 @@
+import ChartContents from "./components/Contents";
+import ChartControl from "./components/control";
+import ChartActivePieSector from "./components/custom/ActivePieSector";
+import ChartGraph from "./components/graphs";
+import ChartTick from "./components/ticks";
+
+const Chart = {
+  ContentsContainer: ChartContents,
+  Graph: ChartGraph,
+  Tick: ChartTick,
+  Control: ChartControl,
+  Custom: {
+    ActivePieSector: ChartActivePieSector,
+  },
+};
+
+export default Chart;

package/src/icon/Control.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconChart from "../styles/styled/icon";
+
+import ZoomInIcon from "../../svg/control/zoom-in.svg";
+import ZoomOutIcon from "../../svg/control/zoom-out.svg";
+import PanLeftIcon from "../../svg/control/pan-left.svg";
+import PanRightIcon from "../../svg/control/pan-right.svg";
+
+/**
+ * 차트 인터렉션 컨트롤 버튼 아이콘
+ * @component
+ * @param
+ */
+export default function IconChartControl({
+  className,
+  role,
+  width = 20,
+  height = 20,
+}: {
+  role: "zoom-in" | "zoom-out" | "pan-left" | "pan-right";
+} & Partial<{
+  className: string;
+  width: number;
+  height: number;
+}>) {
+  return (
+    <StyledIconChart.container
+      className={clsx("icon-chart-control", className)}
+      $width={width}
+      $height={height}
+    >
+      {role === "zoom-in" && <ZoomInIcon viewBox="0 0 20 20" />}
+      {role === "zoom-out" && <ZoomOutIcon viewBox="0 0 20 20" />}
+      {role === "pan-left" && <PanLeftIcon viewBox="0 0 20 20" />}
+      {role === "pan-right" && <PanRightIcon viewBox="0 0 20 20" />}
+    </StyledIconChart.container>
+  );
+}

package/src/icon/index.tsx

@@ -0,0 +1,7 @@
+import IconChartControl from "./Control";
+
+const IconChart = {
+  Control: IconChartControl,
+};
+
+export default IconChart;

package/src/index.tsx

@@ -0,0 +1,3 @@
+export { default as Chart } from "./components";
+export { default as StyledChart } from "./styled";
+export type * from "./types";

package/src/styled.tsx

@@ -0,0 +1,7 @@
+import StyledIconChart from "./styles/styled/icon";
+
+const StyledChart = {
+  Icon: StyledIconChart,
+};
+
+export default StyledChart;

package/src/styles/scss/arc-gauge.scss

@@ -0,0 +1,11 @@
+:root {
+  --chart-arc-gauge-text-color: var(--color_90);
+  --chart-arc-gauge-text-weight: 600;
+
+  --chart-arc-gauge-value-size: 46px;
+  --chart-arc-gauge-unit-size: 30px;
+
+  --chart-arc-gauge-point-size: 22px;
+  --chart-arc-gauge-point-color: var(--color_90);
+  --chart-arc-gauge-point-border-width: 5px;
+}

package/src/styles/scss/arc-meter.scss

@@ -0,0 +1,6 @@
+:root {
+  --chart-arc-meter-text-weight: 600;
+
+  --chart-arc-meter-text-value-size: 46px;
+  --chart-arc-meter-text-unit-size: 30px;
+}

package/src/styles/scss/control.scss

@@ -0,0 +1,34 @@
+:root {
+  --chart-control-button-margin: 0.4rem;
+}
+// .charts-zoom-pan-control-container {
+//   display: flex;
+//   align-items: center;
+//   .chart-zoom-pan-button {
+//     margin-left: 6px;
+//     svg {
+//       rect {
+//         stroke: var(--color_40);
+//         transition: stroke 0.12s;
+//       }
+//       path {
+//         fill: var(--color_40);
+//         transition: fill 0.12s;
+//       }
+//     }
+//     &:not([disabled]):hover {
+//       svg {
+//         rect {
+//           stroke: var(--color_60);
+//         }
+//         path {
+//           fill: var(--color_60);
+//         }
+//       }
+//     }
+//     &[disabled] {
+//       opacity: 0.5;
+//       cursor: default;
+//     }
+//   }
+// }

package/src/styles/scss/graph.scss

@@ -0,0 +1,3 @@
+:root {
+  --chart-data-line-width: 1.4px;
+}

package/src/styles/scss/icon.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-chart-control-color-default: var(--color_40);
+}

package/src/styles/scss/legend.scss

@@ -0,0 +1,35 @@
+:root {
+  --chart-legend-gap: 10px;
+
+  --chart-legend-text-size: 12px;
+  --chart-legend-text-color: var(--color_90);
+  --chart-legend-text-weight: 400;
+
+  --chart-legend-point-margin: 3px;
+  --chart-legend-point-size: 10px;
+}
+
+.recharts-legend-wrapper {
+  width: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  .recharts-default-legend {
+    display: flex;
+    align-items: center;
+    .recharts-legend-item {
+      margin-right: 0 !important;
+      margin-left: var(--chart-legend-gap);
+      display: flex !important;
+      align-items: center;
+      user-select: none;
+    }
+    .recharts-legend-item-text {
+      font-size: var(--chart-legend-text-size);
+      font-weight: 400;
+      color: var(--color_90) !important;
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+}

package/src/styles/scss/level.color.scss

@@ -0,0 +1,7 @@
+:root {
+  --chart-level-color-0: var(--color_20);
+  --chart-level-color-1: var(--red);
+  --chart-level-color-2: var(--orange);
+  --chart-level-color-3: var(--green);
+  --chart-level-color-4: var(--color-light-blue-600);
+}