@uniai-fe/ui-legacy 0.1.5 → 0.1.7

package/src/chart/components/graphs/ArcMeter.tsx

@@ -1,112 +0,0 @@
-"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

@@ -1,132 +0,0 @@
-"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

@@ -1,179 +0,0 @@
-"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

@@ -1,90 +0,0 @@
-"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/chart/components/graphs/Line.tsx

@@ -1,123 +0,0 @@
-"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/chart/components/graphs/index.tsx

@@ -1,17 +0,0 @@
-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/chart/components/ticks/XAxis.tsx

@@ -1,39 +0,0 @@
-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/chart/components/ticks/index.tsx

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