@uniai-fe/chart-legacy 0.1.1

package/src/types/props.d.ts

@@ -0,0 +1,271 @@
+import type { TooltipProps, XAxisProps, YAxisProps } from "recharts";
+import type { CategoricalChartProps } from "recharts/types/chart/generateCategoricalChart";
+import type {
+  NameType,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent";
+import type { Props as ResponsiveContainerProps } from "recharts/types/component/ResponsiveContainer";
+
+import type { ChartYAxisDataType } from "./axis";
+import type { ChartCoreDataAxisType, ChartCoreDataSingleType } from "./data";
+import type { AreaGradientProps, ChartLegendBaseType } from "./legend";
+import type { Props as PieProps } from "recharts/types/polar/Pie";
+import type { Props as LineProps } from "recharts/types/cartesian/Line";
+import type { Props as BarProps } from "recharts/types/cartesian/Bar";
+import type { Props as CellProps } from "recharts/types/component/Cell";
+
+/**
+ * 차트 Props; 1차원 차트 데이터
+ * @property {ChartCoreDataSingleType[]} chartData - 차트 렌더링 데이터
+ */
+export type ChartDataSingleProps = {
+  /**
+   * 차트 렌더링 데이터
+   * @property {string | number | null} 임의 데이터
+   * @property {string} name - 데이터 명칭
+   * @property {string} value - 데이터 값
+   * @property {string} unit - 데이터 단위
+   * @property {string} fill - 데이터 색상
+   */
+  chartData: ChartCoreDataSingleType[];
+};
+
+/**
+ * 차트 Props; 2차원 차트 데이터
+ * @property {ChartCoreDataAxisType[]} chartData - 차트 렌더링 데이터
+ */
+export type ChartDataAxisProps = {
+  /**
+   * 차트 렌더링 데이터
+   * @property {string | number | null} 데이터
+   */
+  chartData: ChartCoreDataAxisType[];
+};
+
+/**
+ * 차트 Props; 레전드 데이터
+ * - 레전드 항목수 대로 <Line />, <Bar /> 등을 렌더링
+ * @property {ChartLegendBaseType[]} legendData - 차트 레전드 데이터
+ */
+export type ChartDataLegendDefaultProps = {
+  /**
+   * 차트 레전드 데이터
+   * @property {string} key - 렌더링 키
+   * @property {string} axisCategory - y축 id
+   * @property {string} code - 데이터 키
+   * @property {string} name - 데이터 명칭
+   * @property {string} unit - 데이터 단위
+   * @property {string} color - 데이터 컬러
+   * @property {boolean} active - 데이터 활성화 여부 (레전드 토글 등)
+   * @property {boolean} [highlight] - 포커스 구분
+   */
+  legendData: ChartLegendBaseType[];
+};
+
+/**
+ * 차트 Props; Y축 렌더링 데이터
+ * @property {ChartYAxisDataType[]} yAxisData - y축 카테고리별 생성 데이터
+ */
+export type ChartDataYAxisProps = {
+  /**
+   * y축 카테고리별 생성 데이터
+   * @property {string} key - 렌더링 키
+   * @property {string} axisCategory - y축 id
+   */
+  yAxisData: ChartYAxisDataType[];
+};
+
+/**
+ * 차트 Props; recharts 렌더링 공통 옵션
+ * @property {CategoricalChartProps} chartLayoutOptions - 형태별 차트 렌더링 옵션
+ * @property {TooltipProps<ValueType, NameType>} tooltipOptions - 툴팁 렌더링 옵션
+ * @property {ResponsiveContainerProps} containerOptions - <ResponsiveContainer /> 렌더링 옵션
+ * @property {React.ReactNode} children - 추가 차트요소
+ */
+export type ChartOptionCommonProps = Partial<{
+  /**
+   * 차트 렌더링 옵션
+   * <LineChart />, <BarChart /> 등 차트 속성에 적용
+   * @type {CategoricalChartProps}
+   */
+  chartLayoutOptions: CategoricalChartProps;
+  /**
+   * 툴팁 렌더링 옵션
+   * @type {TooltipProps<ValueType, NameType>}
+   */
+  tooltipOptions: TooltipProps<ValueType, NameType>;
+  /**
+   * <ResponsiveContainer /> 렌더링 옵션
+   * @type {ResponsiveContainerProps}
+   */
+  containerOptions: Omit<ResponsiveContainerProps, "children">;
+  /**
+   * DOM ClassName
+   */
+  className: string;
+  /**
+   * 추가 차트요소
+   * @type {React.ReactNode}
+   */
+  children: React.ReactNode;
+}>;
+
+/**
+ * 차트 Props; recharts axis 렌더링 옵션
+ * @property {XAxisProps} [xAxisOptions] - x축 렌더링 옵션
+ * @property {YAxisProps} [yAxisOptions] - y축 렌더링 옵션
+ * @property {boolean} [isHideGrid] - 그리드 숨김 옵션
+ */
+export type ChartOptionAxisProps = Partial<{
+  /**
+   * x축 렌더링 옵션
+   * @type {XAxisProps}
+   */
+  xAxisOptions: XAxisProps;
+  /**
+   * y축 렌더링 옵션
+   * @type {YAxisProps}
+   */
+  yAxisOptions: YAxisProps;
+  /**
+   * 그리드 렌더링 여부
+   * - 기본값 undefined
+   */
+  isHideGrid: boolean;
+}>;
+
+export type ChartAreaDataLegendProps = ChartLegendBaseType &
+  Partial<{
+    /**
+     * <Area /> 차트 컬러 - 단식
+     */
+    areaColor: string;
+    /**
+     * <Area /> 차트 컬러 - 그라디언트
+     */
+    areaGradient: AreaGradientProps;
+  }>;
+
+/**
+ * 차트 Props; 레전드 데이터; <Area /> 레전드
+ * @property {ChartAreaDataLegendProps[]} legendData - 차트 레전드 데이터
+ */
+export type ChartDataLegendAreaProps = {
+  /**
+   * 차트 레전드 데이터
+   * @property {string} key - 렌더링 키
+   * @property {string} axisCategory - y축 id
+   * @property {string} code - 데이터 키
+   * @property {string} name - 데이터 명칭
+   * @property {string} unit - 데이터 단위
+   * @property {string} color - 데이터 컬러
+   * @property {boolean} active - 데이터 활성화 여부 (레전드 토글 등)
+   * @property {boolean} [highlight] - 포커스 구분
+   * @property {string} [areaColor] - <Area /> 차트 컬러 - 단색
+   * @property {AreaGradientProps} [areaGradient] - <Area /> 차트 컬러 - 그라디언트
+   */
+  legendData: ChartAreaDataLegendProps[];
+};
+
+/**
+ * 차트 Props; 영역 차트
+ */
+export type ChartAreaProps = ChartDataAxisProps &
+  ChartDataLegendAreaProps &
+  ChartDataYAxisProps &
+  ChartOptionCommonProps &
+  ChartOptionAxisProps;
+
+/**
+ * Recharts Props; Line
+ */
+export type RechartLineProps = LineProps;
+/**
+ * 차트 Props; <Line /> 옵션
+ */
+export type ChartLineOptions = Partial<{ lineOptions: RechartLineProps }>;
+/**
+ * 차트 Props; 라인 차트
+ */
+export type ChartLineProps = ChartDataAxisProps &
+  ChartDataLegendAreaProps &
+  ChartDataYAxisProps &
+  ChartOptionCommonProps &
+  ChartOptionAxisProps &
+  ChartLineOptions;
+
+/**
+ * Recharts Props; Bar
+ */
+export type RechartsBarProps = Partial<BarProps>;
+/**
+ * Recharts Props; Cell
+ */
+export type RechartsCellProps = Partial<CellProps>;
+/**
+ * 차트 Props; <Bar /> 옵션
+ */
+export type ChartBarOptions = Partial<{
+  barOptions: RechartsBarProps;
+  cellOptions: RechartsCellProps;
+}>;
+/**
+ * 차트 Props; 막대 차트
+ */
+export type ChartBarProps = ChartDataAxisProps &
+  ChartDataLegendAreaProps &
+  ChartDataYAxisProps &
+  ChartOptionCommonProps &
+  ChartOptionAxisProps &
+  Partial<{
+    /**
+     * 막대 너비
+     */
+    barSize: number;
+    /**
+     * 서로 다른 x축 분포를 나타내는 경우
+     */
+    isUseCell: boolean;
+  }> &
+  ChartBarOptions;
+
+/**
+ * 차트 Props; 도넛차트 렌더링 옵션
+ */
+export type ChartOptionDoughnutProps = Partial<{
+  /**
+   * 도넛차트 width
+   */
+  width: number;
+  /**
+   * 도넛차트 height
+   */
+  height: number;
+  /**
+   * 도넛차트 두께
+   */
+  thickness: number;
+  /**
+   * 도넛차트 시작 각도
+   */
+  startAngle: number;
+  /**
+   * 도넛차트 종료 각도
+   */
+  endAngle: number;
+}>;
+
+/**
+ * 차트 Props; <Pie /> 렌더링 옵션
+ */
+export type ChartOptionPieProps = Partial<{
+  pieOptions: PieProps;
+}>;
+
+/**
+ * 차트 Props; 도넛 차트
+ */
+export type ChartDoughnutProps = ChartDataSingleProps &
+  ChartOptionCommonProps &
+  ChartOptionDoughnutProps &
+  ChartOptionPieProps;

package/src/types/tick.d.ts

@@ -0,0 +1,30 @@
+import type { XAxisProps } from "recharts";
+
+/**
+ * recharts XAxis Tick 커스텀 Props
+ */
+export type RechartsXAxisTickProps = XAxisProps & {
+  // <text> 기본 속성
+  verticalAnchor: "start" | "middle" | "end";
+  // 추가 기본 정보; width, height, index, visibleTicksCount,
+  index: number;
+  // payload - 각 x의 y 데이터; coordinate, value, index, offset, tickCoord, isShow
+  payload: {
+    coordinate: number;
+    value: number | string | null;
+    index: number;
+    offset: number;
+    tickCoord: number;
+    isShow: boolean;
+  };
+};
+
+export type ChartTickXAxisProps = {
+  xAxisProps: RechartsXAxisTickProps;
+} & Partial<{
+  className: string;
+  children: React.ReactNode;
+  tSpanPos: React.SVGProps<SVGTSpanElement>;
+  customValue: React.ReactNode;
+  groupProps: React.SVGProps<SVGGElement>;
+}>;

package/src/utils/getLevel.ts

@@ -0,0 +1,23 @@
+/**
+ * 스코어 레벨 추출 (4단계)
+ * @param {number | ""} value
+ * @param {number} [max] 최대값 (기본값 100)
+ */
+export default function getChartLevel(
+  value: number | "",
+  max: number = 100,
+): number {
+  if (value === "") return 0;
+
+  const stepAmount = max / 4;
+  const danger = stepAmount;
+  const warning = stepAmount * 2;
+  const caution = stepAmount * 3;
+
+  if (value < danger) return 1;
+  else if (danger <= value && value < caution) return 2;
+  else if (caution <= value && value < warning) return 3;
+  else if (value >= warning) return 4;
+
+  return 0;
+}