@uniai-fe/ui-legacy 0.1.1

package/src/chart/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/chart/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/chart/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/chart/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/chart/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>
+  );
+}

package/src/chart/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/chart/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>
+  );
+}