@ztwoint/z-ui 0.1.115 → 0.1.116

package/dist/types/components/chart-card/config/colors.d.ts

@@ -0,0 +1,29 @@
+import type { ChartType } from '../chart-card.config.types';
+export declare const COLOR_PALETTES: {
+    readonly default: readonly ["#2563eb", "#7c3aed", "#d97706", "#16a34a", "#dc2626", "#0284c7"];
+    readonly brand: readonly ["#2563eb", "#3b82f6", "#1d4ed8", "#60a5fa"];
+    readonly success: readonly ["#16a34a", "#22c55e", "#15803d", "#4ade80"];
+    readonly warning: readonly ["#d97706", "#f59e0b", "#b45309", "#fbbf24"];
+    readonly danger: readonly ["#dc2626", "#ef4444", "#b91c1c", "#f87171"];
+    readonly purple: readonly ["#7c3aed", "#8b5cf6", "#6d28d9", "#a78bfa"];
+    readonly neutral: readonly ["#5d5d5d", "#6d6d6d", "#4f4f4f", "#888888"];
+};
+export declare const CHART_THEME_PALETTES: Record<ChartType, Record<string, ReadonlyArray<string>>>;
+export declare const UI_COLORS: {
+    readonly text: {
+        readonly primary: "#000000";
+        readonly secondary: "#5d5d5d";
+        readonly muted: "#888888";
+    };
+    readonly border: {
+        readonly light: "#e7e7e7";
+        readonly default: "#d1d1d1";
+        readonly medium: "#b0b0b0";
+    };
+    readonly background: {
+        readonly default: "#ffffff";
+        readonly light: "#fafafa";
+        readonly medium: "#f6f6f6";
+    };
+};
+export declare function getThemePalette(type: ChartType, theme: string): string[];

package/dist/types/components/chart-card/config/defaults.d.ts

@@ -0,0 +1,164 @@
+import type { ChartOptions } from '../chart-card.config.types';
+export declare const DEFAULT_CHART_HEIGHT = 400;
+export declare const DEFAULT_CHART_WIDTH = "100%";
+export declare const DEFAULT_FONT_FAMILY = "Inter Variable, sans-serif";
+export declare const COMMON_TEXT_STYLE: {
+    fontFamily: string;
+    color: "#000000";
+};
+export declare function buildTitleConfig(title: string, options?: ChartOptions['title']): {
+    text: string;
+    textStyle: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    left: "center" | "left" | "right";
+    top: number;
+    padding: number[];
+} | undefined;
+export declare function buildTooltipConfig(options?: ChartOptions['tooltip']): {
+    trigger: "axis" | "item";
+    backgroundColor: "#ffffff";
+    borderColor: "#d1d1d1";
+    borderWidth: number;
+    textStyle: {
+        fontFamily: string;
+        color: "#000000";
+    };
+} | undefined;
+export declare function buildLegendConfig(data: string[], hasTitle?: boolean, options?: ChartOptions['legend']): {
+    data: string[];
+    top: string | number;
+    bottom: string | number | undefined;
+    left: string | number;
+    right: string | number | undefined;
+    orient: "horizontal" | "vertical";
+    itemGap: number;
+    padding: number[];
+    textStyle: {
+        fontSize: number;
+        fontFamily: string;
+        color: "#000000";
+    };
+    itemWidth: number;
+    itemHeight: number;
+} | undefined;
+export declare function buildAxisLabelConfig(rotate?: number): {
+    rotate?: number | undefined;
+    color: "#5d5d5d";
+    fontFamily: string;
+    fontSize: number;
+};
+export declare function buildAxisLineConfig(show?: boolean): {
+    show: boolean;
+    lineStyle: {
+        color: "#d1d1d1";
+    };
+};
+export declare function buildSplitLineConfig(show?: boolean): {
+    show: boolean;
+    lineStyle: {
+        color: "#e7e7e7";
+    };
+};
+export declare function buildGridConfig(hasTitle: boolean, hasLegend?: boolean, legendPosition?: 'top' | 'bottom' | 'left' | 'right', customGrid?: ChartOptions['grid']): {
+    left: string | number;
+    right: string | number;
+    bottom: string | number;
+    top: string | number;
+    containLabel: boolean;
+};
+export declare function buildXAxisConfig(data: string[], boundaryGap?: boolean, options?: ChartOptions['xAxis']): {
+    show: boolean;
+    type?: undefined;
+    data?: undefined;
+    boundaryGap?: undefined;
+    name?: undefined;
+    nameLocation?: undefined;
+    nameGap?: undefined;
+    nameTextStyle?: undefined;
+    axisLine?: undefined;
+    axisLabel?: undefined;
+    splitLine?: undefined;
+} | {
+    type: "category";
+    data: string[];
+    boundaryGap: boolean;
+    name: string | undefined;
+    nameLocation: "end" | "middle" | "start";
+    nameGap: number | undefined;
+    nameTextStyle: {
+        fontSize: number;
+        fontWeight: number;
+        fontFamily: string;
+        color: "#000000";
+    } | undefined;
+    axisLine: {
+        show: boolean;
+        lineStyle: {
+            color: "#d1d1d1";
+        };
+    };
+    axisLabel: {
+        rotate?: number | undefined;
+        color: "#5d5d5d";
+        fontFamily: string;
+        fontSize: number;
+    };
+    splitLine: {
+        show: boolean;
+        lineStyle: {
+            color: "#e7e7e7";
+        };
+    };
+    show?: undefined;
+};
+export declare function buildYAxisConfig(options?: ChartOptions['yAxis']): {
+    show: boolean;
+    type?: undefined;
+    name?: undefined;
+    nameLocation?: undefined;
+    nameGap?: undefined;
+    nameRotate?: undefined;
+    nameTextStyle?: undefined;
+    min?: undefined;
+    max?: undefined;
+    axisLine?: undefined;
+    axisLabel?: undefined;
+    splitLine?: undefined;
+} | {
+    type: "value";
+    name: string | undefined;
+    nameLocation: "end" | "middle" | "start";
+    nameGap: number | undefined;
+    nameRotate: number;
+    nameTextStyle: {
+        fontSize: number;
+        fontWeight: number;
+        fontFamily: string;
+        color: "#000000";
+    } | undefined;
+    min: number | undefined;
+    max: number | undefined;
+    axisLine: {
+        show: boolean;
+        lineStyle: {
+            color: "#d1d1d1";
+        };
+    };
+    axisLabel: {
+        rotate?: number | undefined;
+        color: "#5d5d5d";
+        fontFamily: string;
+        fontSize: number;
+    };
+    splitLine: {
+        show: boolean;
+        lineStyle: {
+            color: "#e7e7e7";
+        };
+    };
+    show?: undefined;
+};

package/dist/types/components/chart-card/index.d.ts

@@ -0,0 +1,10 @@
+export { ChartCard } from './chart-card';
+export type { ChartCardProps } from './chart-card.types';
+export { LoadingState, EmptyState, ErrorState } from './chart-card-states';
+export type { ChartType, ChartTheme, LineChartTheme, BarChartTheme, ChartConfig, BarChartConfig, LineChartConfig, ChartSeries, ChartData, ChartOptions, SeriesStyleConfig, } from './chart-card.config.types';
+export { UI_COLORS, COLOR_PALETTES, getThemePalette } from './config/colors';
+export { validateChartConfig, validateChartData } from './validators/config-validator';
+export type { ValidationResult } from './validators/config-validator';
+export { buildBarChartOptions } from './builders/bar-chart-builder';
+export { buildLineChartOptions } from './builders/line-chart-builder';
+export { buildChartOptions, isChartTypeSupported, registeredChartTypes, } from './builders/chart-builder-factory';

package/dist/types/components/chart-card/validators/config-validator.d.ts

@@ -0,0 +1,7 @@
+import type { ChartConfig, ChartData } from '../chart-card.config.types';
+export interface ValidationResult {
+    valid: boolean;
+    error?: string;
+}
+export declare function validateChartConfig(config: ChartConfig): ValidationResult;
+export declare function validateChartData(data: ChartData): ValidationResult;

package/dist/types/index.d.ts

@@ -28,6 +28,8 @@ export * from './components/assets/icons';
 export * from './components/segmented-control';
 export * from './components/popover/popover';
 export * from './components/dynamic-table';
+export * from './components/chart';
+export * from './components/chart-card';
 export * from './components/radio-card/radio-card';
 export * from './lib/theme.hook';
 export * from './lib/utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.115",
+  "version": "0.1.116",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -101,6 +101,8 @@
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "echarts": "^5.6.0",
+    "echarts-for-react": "^3.0.2",
     "lucide-react": "^0.525.0",
     "radix-ui": "^1.4.3",
     "react-country-flag": "^3.1.0",