@weing-dev/ui-kit-primitive 0.5.0 → 0.5.1

package/dist/components/Chart/Chart.gradient.d.ts

@@ -0,0 +1,10 @@
+import { Color, Scriptable, ScriptableContext } from 'chart.js';
+/**
+ * canvas gradient 는 chartArea(레이아웃 결과)가 있어야 만들 수 있어 정적 색으로 못 박는다.
+ * chart.js 의 scriptable backgroundColor(렌더 시 ctx 주입)로 lazy 생성한다 —
+ * 순수함수 빌더 안에서도 함수만 반환하면 되고 plugin/useEffect 가 불필요하다.
+ *
+ * 색 토큰을 canvas 가 직접 못 읽는 것과 같은 제약을 같은 패턴(런타임 해석)으로 푼다.
+ */
+/** 세로 방향 그라데이션(상단 from → 하단 to). chartArea 미정(레이아웃 전)이면 from 단색으로 폴백. */
+export declare const verticalGradient: (from: string, to: string) => Scriptable<Color, ScriptableContext<"line">>;

package/dist/components/Chart/Chart.options.d.ts

@@ -1,5 +1,5 @@
 import { ChartData, ChartOptions } from 'chart.js';
-import { CategoricalData, ChartBaseProps, ChartKind, PointStyle, ProportionData } from './Chart.type';
+import { AxisConfig, CategoricalData, ChartBaseProps, ChartKind, PointStyle, ProportionData } from './Chart.type';
 import { ChartAxisTokens } from './Chart.palette';
 import { StyleSources } from './Chart.style';
 export declare const deepMerge: <T>(base: T, over?: Partial<T>) => T;
@@ -18,7 +18,12 @@ type BuildOptionArgs = {
     tokens: ChartAxisTokens;
     /** 종류별 추가 옵션 (indexAxis, cutout, scales stacked 등). 차트별 전용 키 허용 위해 느슨한 타입 */
     extra?: Record<string, unknown>;
+    /** 직교좌표 y축 설정 (max/min/단위 포맷). y1 정의 시 우측 보조축(듀얼축) 생성 */
+    axes?: {
+        y?: AxisConfig;
+        y1?: AxisConfig;
+    };
 };
 /** 프리셋 → L2(options deep-merge) → L3(rawOptions 통째 대체) */
-export declare const buildOptions: ({ kind, base, tokens, extra }: BuildOptionArgs) => ChartOptions;
+export declare const buildOptions: ({ kind, base, tokens, extra, axes }: BuildOptionArgs) => ChartOptions;
 export {};

package/dist/components/Chart/Chart.type.d.ts

@@ -1,4 +1,4 @@
-import { ChartOptions } from 'chart.js';
+import { ChartOptions, Plugin } from 'chart.js';
 import { default as React } from 'react';
 /** 단일 시리즈 간편 입력: bar/pie/doughnut 한 줄짜리 */
 export type SimpleDatum = {
@@ -10,9 +10,24 @@ export type SimpleDatum = {
 /** 다중 시리즈 한 줄 */
 export type ChartSeries = {
     name: string;
-    values: number[];
+    /** null = 데이터 없는 구간(선 끊김). spanGaps 로 이을지 제어 */
+    values: (number | null)[];
     /** 이 시리즈만 색 강제 — cascade [2] */
     color?: string;
+    /** 이 시리즈가 참조할 y축 id. 보조축 연결 시 "y1" (듀얼축) */
+    yAxisID?: string;
+    /** 점선 패턴 (예: [4,4]). line 전용 */
+    borderDash?: number[];
+    /** null 값 구간을 선으로 이을지 여부 (기본 chart.js 기본값=false 동작) */
+    spanGaps?: boolean;
+    /**
+     * 면적 gradient 채우기 (line 전용). true=시리즈 색 기반 자동 alpha,
+     * {from,to}=명시 색. 켜면 fill 자동 활성.
+     */
+    gradient?: boolean | {
+        from?: string;
+        to?: string;
+    };
 };
 /** 다중 시리즈 입력 */
 export type SeriesData = {
@@ -44,9 +59,18 @@ export type ChartThemeValue = {
     defaults?: ChartStyleDefaults;
     presets?: ChartPreset;
 };
-export type ChartKind = "bar" | "line" | "pie" | "doughnut";
+export type ChartKind = "bar" | "line" | "pie" | "doughnut" | "radar";
 export type LegendOption = boolean | "top" | "bottom" | "left" | "right";
 export type PointStyle = "circle" | "rect" | "triangle" | false;
+/** 직교좌표(bar/line) 축 설정. 듀얼축·단위 포맷 노출 */
+export type AxisConfig = {
+    max?: number;
+    min?: number;
+    /** 눈금 단위 포맷터 (예: (v) => `${v}건`) → ticks.callback */
+    tickFormat?: (value: number) => string;
+    /** 축 제목 */
+    title?: string;
+};
 export type ChartBaseProps = {
     title?: string;
     /** true=top, false=숨김, 또는 위치 지정 */
@@ -73,6 +97,11 @@ export type ChartBaseProps = {
     options?: ChartOptions;
     /** L3: 프리셋 무시하고 raw 통째 대체 */
     rawOptions?: ChartOptions;
+    /**
+     * 커스텀 chart.js 플러그인 (인스턴스 한정 주입). afterDraw/beforeDatasetsDraw 등으로
+     * 캔버스에 직접 드로잉. 플러그인 옵션은 L2 `options.plugins.<id>` 로 전달.
+     */
+    plugins?: Plugin[];
 };
 export type BarChartProps = ChartBaseProps & {
     data: CategoricalData;
@@ -81,6 +110,10 @@ export type BarChartProps = ChartBaseProps & {
     /** L0 승격 스타일: 막대 모서리 둥글기 */
     barRadius?: number;
     barThickness?: number;
+    /** 주 y축 설정 (max/min/단위 포맷) */
+    yAxis?: AxisConfig;
+    /** 보조 y축 (우측). 정의 시 생성 — 시리즈 `yAxisID:"y1"` 로 연결 (듀얼축) */
+    y1Axis?: AxisConfig;
 };
 export type LineChartProps = ChartBaseProps & {
     data: CategoricalData;
@@ -91,6 +124,10 @@ export type LineChartProps = ChartBaseProps & {
     /** L0 승격 스타일 */
     pointStyle?: PointStyle;
     lineWidth?: number;
+    /** 주 y축 설정 (max/min/단위 포맷) */
+    yAxis?: AxisConfig;
+    /** 보조 y축 (우측). 정의 시 생성 — 시리즈 `yAxisID:"y1"` 로 연결 (듀얼축) */
+    y1Axis?: AxisConfig;
 };
 export type PieChartProps = ChartBaseProps & {
     data: ProportionData;
@@ -102,6 +139,14 @@ export type DoughnutChartProps = ChartBaseProps & {
     /** 0~1, 도넛 구멍 크기 (기본 0.6) */
     cutout?: number;
 };
+export type RadarChartProps = ChartBaseProps & {
+    /** 단일 시리즈(labels+values) 또는 다중 시리즈 모두 허용 */
+    data: CategoricalData;
+    /** 방사축 최댓값 (suggestedMax). 미지정 시 자동 */
+    max?: number;
+    /** 다각형 면적 채우기 (기본 true) */
+    fill?: boolean;
+};
 /** ChartRenderer가 받는 통합 타입. type으로 좁히면 data가 자동 결정 → `as` 캐스팅 제거 */
 export type AnyChartProps = ({
     type: "bar";
@@ -111,4 +156,6 @@ export type AnyChartProps = ({
     type: "pie";
 } & PieChartProps) | ({
     type: "doughnut";
-} & DoughnutChartProps);
+} & DoughnutChartProps) | ({
+    type: "radar";
+} & RadarChartProps);

package/dist/components/Chart/charts/RadarChart.d.ts

@@ -0,0 +1,3 @@
+import { RadarChartProps } from '../Chart.type';
+declare const RadarChart: (props: RadarChartProps) => import("react/jsx-runtime").JSX.Element;
+export default RadarChart;

package/dist/entry/chart.d.ts

@@ -2,5 +2,6 @@ export { default as BarChart } from '../components/Chart/charts/BarChart';
 export { default as LineChart } from '../components/Chart/charts/LineChart';
 export { default as PieChart } from '../components/Chart/charts/PieChart';
 export { default as DoughnutChart } from '../components/Chart/charts/DoughnutChart';
+export { default as RadarChart } from '../components/Chart/charts/RadarChart';
 export { ChartThemeProvider } from '../components/Chart/Chart.theme';
-export type { BarChartProps, LineChartProps, PieChartProps, DoughnutChartProps, ChartBaseProps, ChartThemeValue, ChartPreset, ChartStyleDefaults, SimpleDatum, ChartSeries, SeriesData, CategoricalData, ProportionData, PaletteInput, } from '../components/Chart/Chart.type';
+export type { BarChartProps, LineChartProps, PieChartProps, DoughnutChartProps, RadarChartProps, ChartBaseProps, AxisConfig, ChartThemeValue, ChartPreset, ChartStyleDefaults, SimpleDatum, ChartSeries, SeriesData, CategoricalData, ProportionData, PaletteInput, } from '../components/Chart/Chart.type';