@uniai-fe/chart-legacy 0.1.1

package/LICENSE

@@ -0,0 +1,27 @@
+MIT License
+
+Copyright (c) 2025 UNIAI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+This project includes third-party software governed by additional licenses,
+including Apache License 2.0. Refer to `THIRD_PARTY_NOTICES.md` for the full
+text of those notices and any required attributions.

package/README.md

@@ -0,0 +1,3 @@
+# client / chart-legacy
+
+스타일링 도구와 토큰, 디자인 시스템, 컴포넌트 등 관리

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@uniai-fe/chart-legacy",
+  "version": "0.1.1",
+  "description": "Legacy Chart Toolkit for UNIAI FE Projects",
+  "type": "module",
+  "private": false,
+  "sideEffects": false,
+  "license": "MIT",
+  "homepage": "https://www.uniai.co.kr/",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.23.0",
+  "engines": {
+    "node": ">=24",
+    "pnpm": ">=10"
+  },
+  "author": {
+    "name": "GraffitoRyu",
+    "email": "yth4135@naver.com",
+    "url": "https://github.com/GraffitoRyu"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "lint": "eslint . --max-warnings=0",
+    "typecheck": "tsc --project tsconfig.build.json --noEmit",
+    "build": "pnpm typecheck",
+    "dev": "tsc --project tsconfig.build.json --watch --noEmit",
+    "module:lint": "pnpm lint",
+    "module:typecheck": "pnpm typecheck",
+    "module:build": "pnpm build",
+    "chart-legacy:build": "pnpm run build",
+    "chart-legacy:dev": "pnpm run dev"
+  },
+  "module": "./src/index.tsx",
+  "main": "./src/index.tsx",
+  "types": "./src/types/index.d.ts",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./types": "./src/types/index.d.ts",
+    "./scss": "./src/index.scss"
+  },
+  "peerDependencies": {
+    "sass": ">= 15",
+    "react": ">= 19",
+    "react-dom": ">= 19",
+    "styled-components": ">= 6"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@uniai-fe/eslint-config": "workspace:*",
+    "@uniai-fe/next-devkit": "workspace:*",
+    "@uniai-fe/tsconfig": "workspace:*",
+    "@uniai-fe/util-functions": "workspace:*",
+    "@uniai-fe/util-react": "workspace:*",
+    "@uniai-fe/react-hooks": "workspace:*",
+    "@uniai-fe/ui-legacy": "workspace:*",
+    "autoprefixer": "^10.4.22",
+    "clsx": "^2.1.1",
+    "eslint": "^9.39.1",
+    "jotai": "^2.15.1",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "^3.5.0",
+    "sass": "^1.94.2",
+    "styled-components": "^6.1.19",
+    "typescript": "~5.9.3"
+  }
+}

package/src/chart.scss

@@ -0,0 +1,13 @@
+@use "./styles/scss/level.color.scss";
+
+@use "./styles/scss/tick.scss";
+@use "./styles/scss/graph.scss";
+@use "./styles/scss/legend.scss";
+@use "./styles/scss/tooltip.scss";
+@use "./styles/scss/control.scss";
+@use "./styles/scss/filter.scss";
+
+@use "./styles/scss/arc-gauge.scss";
+@use "./styles/scss/arc-meter.scss";
+
+@use "./styles/scss/icon.scss";

package/src/components/Contents.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import StyledChartCommon from "../styles/styled/common";
+
+export default function ChartContents({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledChartCommon.container className={className}>
+      {children}
+    </StyledChartCommon.container>
+  );
+}

package/src/components/control/Button.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledChartControl from "../../styles/styled/control";
+import IconChartControl from "../../icon/Control";
+
+/**
+ * 차트 인터렉션 컨트롤 버튼
+ * @component
+ * @property {"zoom-in" | "zoom-out" | "pan-left" | "pan-right"} role - 버튼 역할
+ * @property {Function} clickEvent - 클릭 이벤트 핸들러
+ * @property {string} [className] - 추가 클래스 이름
+ * @property {React.ReactNode} [children] - 버튼 내부에 렌더링
+ */
+export default function ChartControlButton({
+  className,
+  role,
+  clickEvent,
+  children,
+  disabled,
+}: {
+  role: "zoom-in" | "zoom-out" | "pan-left" | "pan-right";
+  clickEvent: () => void;
+} & Partial<{
+  className: string;
+  children: React.ReactNode;
+  disabled: boolean;
+}>) {
+  return (
+    <StyledChartControl.button
+      type="button"
+      className={clsx("chart-control-button", className)}
+      disabled={disabled}
+      onClick={!disabled ? clickEvent : undefined}
+    >
+      {children || <IconChartControl {...{ role, width: 20, height: 20 }} />}
+    </StyledChartControl.button>
+  );
+}

package/src/components/control/Container.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledChartControl from "../../styles/styled/control";
+
+/**
+ * 차트 인터렉션 컨트롤 컨테이너
+ * @component
+ * @property {string} [className] - 추가 클래스 이름
+ * @property {React.ReactNode} children - 자식 컴포넌트
+ */
+export default function ChartControlContainer({
+  className,
+  children,
+}: {
+  children: React.ReactNode;
+} & Partial<{
+  className: string;
+}>) {
+  return (
+    <StyledChartControl.container
+      className={clsx("chart-control-container", className)}
+    >
+      {children}
+    </StyledChartControl.container>
+  );
+}

package/src/components/control/Provider.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import type { ChartControlContext, ChartControlRange } from "../../types";
+
+/**
+ * 차트 컨트롤을 위한 데이터 컨텍스트
+ * @context
+ * @desc
+ * - {object[]} originData 원본 차트 데이터
+ * - {{ start: number; end: number; }} indexRange 현재 X축 인덱스 범위
+ * - {function} setRange X축 범위 업데이트 함수
+ */
+const ChartControlContext = createContext<ChartControlContext>({
+  originData: [],
+  indexRange: { start: 0, end: 0 },
+  setIndexRange: () => {},
+});
+
+/**
+ * 차트 컨트롤을 위한 데이터 컨텍스트 공급자
+ * @component
+ * @param {object} props
+ * @param {object[]} props.originData 원본 차트 데이터
+ * @param {React.ReactNode} props.children
+ */
+export default function ChartControlProvider<
+  ChartData extends object = object,
+>({
+  originData,
+  children,
+}: {
+  /**
+   * 원본 차트 데이터
+   * @type {object[]}
+   */
+  originData: ChartData[];
+  children: React.ReactNode;
+}) {
+  const [indexRange, setIndexRange] = useState<ChartControlRange>({
+    start: 0,
+    end: originData.length > 1 ? originData.length - 1 : 0,
+  });
+
+  // 초기 데이터 로딩 시(0 -> N) 전체 범위로 동기 업데이트하여 깜빡임 방지
+  const prevLenRef = useRef<number>(originData.length);
+  useLayoutEffect(() => {
+    const prev = prevLenRef.current;
+    const next = originData.length;
+    if (prev === 0 && next > 0) {
+      setIndexRange({ start: 0, end: Math.max(0, next - 1) });
+    }
+    prevLenRef.current = next;
+  }, [originData.length]);
+
+  // 데이터 길이가 변할 때 현재 indexRange를 데이터 범위에 맞춰 정돈
+  useLayoutEffect(() => {
+    const total = originData.length;
+    if (total < 0) return;
+    const maxEnd = Math.max(0, total - 1);
+
+    // 비어있는 경우 0,0 고정
+    if (total === 0) {
+      if (indexRange.start !== 0 || indexRange.end !== 0)
+        setIndexRange({ start: 0, end: 0 });
+      return;
+    }
+
+    // 현재 윈도우 길이 보존 시도
+    const length = Math.max(1, indexRange.end - indexRange.start + 1);
+
+    // 범위를 넘어가면 오른쪽 끝에 맞춰 재정렬
+    if (indexRange.end > maxEnd || indexRange.start > maxEnd) {
+      const newEnd = maxEnd;
+      const newStart = Math.max(0, newEnd - Math.min(length, total) + 1);
+      if (newStart !== indexRange.start || newEnd !== indexRange.end)
+        setIndexRange({ start: newStart, end: newEnd });
+    }
+  }, [originData.length, indexRange.start, indexRange.end]);
+
+  return (
+    <ChartControlContext.Provider
+      value={{
+        originData,
+        indexRange,
+        setIndexRange,
+      }}
+    >
+      {children}
+    </ChartControlContext.Provider>
+  );
+}
+
+/**
+ * 차트 컨트롤 데이터 컨텍스트를 사용하기 위한 커스텀 훅
+ * @hook
+ * @desc
+ * - {object[]} originData 원본 차트 데이터
+ * - {{ start: number; end: number; }} indexRange 현재 X축 인덱스 범위
+ * - {function} setIndexRange X축 범위 업데이트 함수
+ * @return {ChartControlContext} { originData, indexRange, setIndexRange }
+ */
+export function useChartContext<
+  ChartData extends object,
+>(): ChartControlContext<ChartData> {
+  const context = useContext(ChartControlContext);
+  if (!context) {
+    throw new Error("차트 데이터에 대한 컨텍스트를 찾을 수 없습니다.");
+  }
+  return context as ChartControlContext<ChartData>;
+}

package/src/components/control/index.tsx

@@ -0,0 +1,12 @@
+import ChartControlButton from "./Button";
+import ChartControlContainer from "./Container";
+import ChartControlProvider, { useChartContext } from "./Provider";
+
+const ChartControl = {
+  Provider: ChartControlProvider,
+  useContext: useChartContext,
+  Container: ChartControlContainer,
+  Button: ChartControlButton,
+};
+
+export default ChartControl;

package/src/components/custom/ActivePieSector.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Sector } from "recharts";
+import type { Props } from "recharts/types/shape/Sector";
+
+export default function ChartActivePieSector({
+  cx,
+  cy,
+  innerRadius,
+  outerRadius,
+  startAngle,
+  endAngle,
+  fill,
+}: Props) {
+  return (
+    <Sector
+      cx={cx}
+      cy={cy}
+      innerRadius={innerRadius}
+      outerRadius={
+        typeof outerRadius === "number" ? outerRadius + 2 : outerRadius
+      }
+      startAngle={startAngle}
+      endAngle={endAngle}
+      fill={fill}
+      cornerRadius={0}
+    />
+  );
+}

package/src/components/graphs/ArcGauge.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useMemo } from "react";
+import { lengthFormat } from "@uniai-fe/util-functions";
+import StyledArcGauge from "../../styles/styled/arc-gauge";
+import ArcGaugeTrack from "../../svg/gauge-track.min.svg";
+
+/**
+ * 차트 템플릿; 반원 게이지
+ * - 체중균일도 차트 등에 사용
+ */
+export default function ChartArcGauge({
+  className,
+  value,
+  unit,
+}: {
+  className?: string;
+  value: number | "";
+  unit: string;
+}) {
+  const v = useMemo((): string => {
+    if (typeof value !== "number") return "-";
+    return lengthFormat(value, 0);
+  }, [value]);
+
+  const level = useMemo((): number => {
+    if (typeof value !== "number") return 0;
+
+    if (value <= 25) return 1;
+    else if (25 < value && value <= 50) return 2;
+    else if (50 < value && value <= 75) return 3;
+    else if (75 < value) return 4;
+    return 0;
+  }, [value]);
+
+  const degree = useMemo((): number => {
+    if (typeof value !== "number") return 0;
+
+    if (value <= 0) return 0;
+    else if (value > 100) return 180;
+    return ((value * Math.PI) / 180) * 100;
+  }, [value]);
+
+  return (
+    <StyledArcGauge.container className={className}>
+      <StyledArcGauge.track>
+        <ArcGaugeTrack />
+        {value !== "" && (
+          <StyledArcGauge.point $level={level} $degree={degree} />
+        )}
+      </StyledArcGauge.track>
+      <StyledArcGauge.value>
+        <strong>{v}</strong>
+        <span>{unit}</span>
+      </StyledArcGauge.value>
+    </StyledArcGauge.container>
+  );
+}

package/src/components/graphs/ArcMeter.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useMemo } from "react";
+
+import ChartDoughnut from "./Doughnut";
+import getChartLevel from "../../utils/getLevel";
+
+import type { ChartDoughnutProps } from "../../types";
+import StyledArcMeter from "../../styles/styled/arc-meter";
+import { lengthFormat } from "@uniai-fe/util-functions";
+
+/**
+ * 차트 템플릿; 반원 미터
+ * - AI 건강지수 차트 등에 사용
+ * @param {ChartDoughnutProps} props
+ * @param {string} [props.className]
+ * @param {object} props.data 데이터
+ * @param {string} props.data.name 데이터 이름
+ * @param {number | ""} props.data.value 값 (스코어)
+ * @param {string} [props.data.unit] 데이터 단위
+ * @param {number} [props.max] 최대값 (기본값 100)
+ * @param {ChartDoughnutProps} [props.doughnutOptions] <ChartDoughnut /> Props 옵션
+ */
+export default function ChartArcMeter({
+  className,
+  data: d,
+  max = 100,
+  doughnutOptions,
+}: {
+  className?: string;
+  data: { name: string; value: number | ""; unit?: string };
+  max?: number;
+  doughnutOptions?: ChartDoughnutProps;
+}) {
+  const START_ANGLE = 180;
+  const WIDTH = 180;
+  const THICKNESS = 14;
+
+  const POINT_BORDER = 5;
+  const POINT_RADIUS = THICKNESS / 2 + POINT_BORDER / 2;
+
+  const point = useMemo((): { x: number; y: number } => {
+    const pos = { x: 0, y: 0 };
+    if (typeof d.value !== "number") return pos;
+
+    // -90 ~ 90
+    const startDegree = -90;
+    const rangeDegree = 180;
+    const angle = (d.value / max) * rangeDegree + startDegree;
+    const distance = WIDTH / 2 - THICKNESS / 2;
+    const radian = (angle * Math.PI) / rangeDegree;
+
+    pos.x = WIDTH / 2 + distance * Math.sin(radian);
+    pos.y = WIDTH / 2 - distance * Math.cos(radian);
+
+    return pos;
+  }, [max, d.value]);
+
+  const color = useMemo((): string => {
+    const level = getChartLevel(d.value, max);
+    return `var(--chart-level-color-${level})`;
+  }, [max, d.value]);
+
+  return (
+    <StyledArcMeter.container className={className} $height={WIDTH / 2}>
+      <ChartDoughnut
+        width={WIDTH}
+        height={WIDTH / 2}
+        thickness={THICKNESS}
+        startAngle={START_ANGLE}
+        endAngle={START_ANGLE - 180}
+        pieOptions={{
+          cy: WIDTH / 2,
+          cornerRadius: THICKNESS / 2,
+          dataKey: "value",
+        }}
+        chartData={[
+          {
+            name: d.name,
+            value: typeof d.value === "number" ? d.value : 0,
+            track: max,
+            fill: color,
+            unit: d.unit || "",
+          },
+          {
+            name: "",
+            value: typeof d.value === "number" ? max - d.value : max,
+            track: max,
+            fill: "transparent",
+            unit: "",
+          },
+        ]}
+        {...doughnutOptions}
+      >
+        {typeof d.value === "number" && (
+          <circle
+            cx={point.x}
+            cy={point.y}
+            r={POINT_RADIUS}
+            fill="var(--color_0)"
+            stroke={color}
+            strokeWidth={POINT_BORDER}
+          />
+        )}
+      </ChartDoughnut>
+      <StyledArcMeter.text $color={color}>
+        <strong>{lengthFormat(d.value)}</strong>
+        {d.unit && <span>{d.unit}</span>}
+      </StyledArcMeter.text>
+    </StyledArcMeter.container>
+  );
+}

package/src/components/graphs/Area.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  type XAxisProps,
+  type YAxisProps,
+} from "recharts";
+import type { ChartAreaDataLegendProps, ChartAreaProps } from "../../types";
+import { useChartSize } from "@uniai-fe/react-hooks";
+
+export default function ChartArea({
+  chartData,
+  legendData,
+  yAxisData,
+  chartLayoutOptions,
+  xAxisOptions,
+  yAxisOptions,
+  isHideGrid,
+  tooltipOptions,
+  containerOptions,
+  children: extraComponents,
+}: ChartAreaProps) {
+  const { sizeOptions } = useChartSize();
+
+  const iaValidGradient = ({ areaGradient }: ChartAreaDataLegendProps) =>
+    areaGradient && areaGradient.selectorId && areaGradient.gradient.length > 1;
+
+  return (
+    <ResponsiveContainer
+      width="100%"
+      height="100%"
+      {...sizeOptions(containerOptions)}
+    >
+      <AreaChart
+        // 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,
+          })}
+        />
+        {yAxisData.map(({ key, axisCategory }) => (
+          <YAxis
+            key={key}
+            yAxisId={axisCategory}
+            axisLine={false}
+            hide={true}
+            {...sizeOptions<YAxisProps>({ tickSize: 0, ...yAxisOptions })}
+          />
+        ))}
+        {legendData.filter(iaValidGradient).length > 0 ? (
+          <defs>
+            {legendData.filter(iaValidGradient).map(
+              ({ areaGradient }) =>
+                areaGradient && (
+                  <linearGradient
+                    key={areaGradient.selectorId}
+                    id={areaGradient.selectorId}
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    {areaGradient.gradient.map(({ key, offset, color }) => (
+                      <stop key={key} offset={offset} stopColor={color} />
+                    ))}
+                  </linearGradient>
+                ),
+            )}
+          </defs>
+        ) : null}
+        {legendData
+          .filter(({ active }) => active)
+          .map(
+            ({
+              key,
+              code,
+              axisCategory,
+              name,
+              unit,
+              color,
+              areaColor,
+              areaGradient,
+              highlight,
+            }) => (
+              <Area
+                key={key}
+                type="monotone"
+                dataKey={code}
+                yAxisId={axisCategory}
+                name={name}
+                unit={unit}
+                stroke={color}
+                strokeWidth="var(--chart-data-line-width)"
+                fill={
+                  areaGradient?.selectorId
+                    ? `url(#${areaGradient.selectorId})`
+                    : areaColor || undefined
+                }
+                {...(typeof highlight === "boolean" && highlight === false
+                  ? { strokeOpacity: 0.3 }
+                  : {})}
+                dot={false}
+                isAnimationActive={false}
+              />
+            ),
+          )}
+
+        {extraComponents}
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}