@advt-gpt-chart/package 3.1.0 → 3.1.2

package/README.md

@@ -1,55 +1,55 @@
-# advt-gpt-chart 可视化组件库
-
-## 特性
-
-- 📊 支持13+图表类型（折线图/柱状图/饼图/雷达图等）
-- 🎨 内置Light/Dark双主题体系
-- 📝 Markdown协议直接渲染图表
-<!-- - 🌐 国际化多语言支持 -->
-- 🛠 完善的TypeScript类型定义
-
-# 安装依赖
-
-```bash
-npm install @advt-gpt-chart/package
-pnpm install @advt-gpt-chart/package
-```
-
-# 使用
-```tsx
-import { ConfigProvider, Line, GPTVis } from '@advt-gpt-chart/package';
-
-function App() {
-
-    const markdownContent = `
-        以下是为你绘制的一个饼图
-        \`\`\`vis-chart
-        {
-        "type": "pie",
-        "data": [
-            { "category": "分类一", "value": 27 },
-            { "category": "分类二", "value": 25 },
-            { "category": "分类三", "value": 18 },
-            { "category": "分类四", "value": 15 },
-            { "category": "分类五", "value": 10 },
-            { "category": "其他", "value": 5 }
-        ],
-        "nameField": "category",
-        "valField": "value"
-        }
-        \`\`\`
-        `;
-
-  return (
-    <ConfigProvider theme="dark">
-      {/* 直接使用图表组件 */}
-      <Line data={[...]} />
-
-      {/* 通过Markdown渲染 */}
-      <GPTVis>
-        {markdownContent}
-      </GPTVis>
-    </ConfigProvider>
-  );
-}
-```
+# advt-gpt-chart 可视化组件库
+
+## 特性
+
+- 📊 支持13+图表类型（折线图/柱状图/饼图/雷达图等）
+- 🎨 内置Light/Dark双主题体系
+- 📝 Markdown协议直接渲染图表
+<!-- - 🌐 国际化多语言支持 -->
+- 🛠 完善的TypeScript类型定义
+
+# 安装依赖
+
+```bash
+npm install @advt-gpt-chart/package
+pnpm install @advt-gpt-chart/package
+```
+
+# 使用
+```tsx
+import { ConfigProvider, Line, GPTVis } from '@advt-gpt-chart/package';
+
+function App() {
+
+    const markdownContent = `
+        以下是为你绘制的一个饼图
+        \`\`\`vis-chart
+        {
+        "type": "pie",
+        "data": [
+            { "category": "分类一", "value": 27 },
+            { "category": "分类二", "value": 25 },
+            { "category": "分类三", "value": 18 },
+            { "category": "分类四", "value": 15 },
+            { "category": "分类五", "value": 10 },
+            { "category": "其他", "value": 5 }
+        ],
+        "nameField": "category",
+        "valField": "value"
+        }
+        \`\`\`
+        `;
+
+  return (
+    <ConfigProvider theme="dark">
+      {/* 直接使用图表组件 */}
+      <Line data={[...]} />
+
+      {/* 通过Markdown渲染 */}
+      <GPTVis>
+        {markdownContent}
+      </GPTVis>
+    </ConfigProvider>
+  );
+}
+```

package/dist/Chart/ChartBase/constants.d.ts

@@ -23,6 +23,10 @@ type CompositeAxisSpec = {
     label?: any;
     grid?: any;
     title?: any;
+    offset?: number;
+    min?: number;
+    max?: number;
+    [key: string]: any;
 };
 export type Tools = {
     formatValue: (field: string, value: any) => any;
@@ -80,7 +84,7 @@ export declare const getLineStyle: () => {
     };
 };
 export declare const getCartesianAxesSpec: (options: CartesianOptions, tools?: Tools) => ICartesianAxisSpec[];
-export declare const getCompositeAxesSpec: (series: any[], yFields: string[]) => CompositeAxisSpec[];
+export declare const getCompositeAxesSpec: (series: any[], yFields: string[], yAxesConfig?: any[], seriesIds?: string[]) => CompositeAxisSpec[];
 export declare const getCartesianTootipSpec: ({ xField, yField, seriesField }: CartesianTooltipOptions, tools?: Tools) => {
     mark: {
         updateTitle: (prev: any) => any;

package/dist/Chart/ChartBase/types.d.ts

@@ -1,11 +1,14 @@
 import type { IChartSpec } from '@visactor/vchart';
 import type { ComponentType } from 'react';
+import type { ChartProps } from '../../Chart/ChartCodeRender/type';
 import { ContextMenu } from '../../GPTVis/hooks/useChartStore';
 import { BaseChartProps, DataItem } from '../../types';
-import { ChartJson } from '../ChartCodeRender/type';
 import { Dataset, FieldInfoItem } from '../Dataset/types';
 import { DataSource } from '../DataSource/types';
-export interface MergedProps extends ChartJson {
+/**
+ * 合并后的属性类型，包含上下文菜单回调
+ */
+export interface MergedProps extends Partial<ChartProps> {
     onContextMenu?: (menu: ContextMenu) => void;
 }
 export interface VChartBaseProps {
@@ -13,6 +16,10 @@ export interface VChartBaseProps {
     spec?: Partial<IChartSpec>;
     mergedProps: MergedProps;
 }
+/**
+ * 基础 VChart 配置类型
+ * 注意：此类型已整合到 ChartProps 中，建议优先使用 ChartProps
+ */
 export interface BaseVChartConfig<T = DataItem> {
     data: T[];
     columns?: FieldInfoItem[];
@@ -22,5 +29,9 @@ export interface BaseVChartConfig<T = DataItem> {
     dataSource?: DataSource;
     dataset?: Dataset;
 }
-export interface BaseVChartProps extends BaseChartProps, BaseVChartConfig {
+/**
+ * 基础 VChart 属性类型
+ * 注意：此类型已整合到 ChartProps 中，建议优先使用 ChartProps
+ */
+export interface BaseVChartProps extends BaseChartProps, Partial<BaseVChartConfig> {
 }

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

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import type { Components, ExtraProps } from 'react-markdown';
 import { ChartType, DataItem } from '../../types';
 import { TimeGrainType } from '../../utils';
-import { DataFormat, FieldInfoItem } from '../Dataset/types';
+import { DataFormat, Dataset, FieldInfoItem } from '../Dataset/types';
 import { DataSource } from '../DataSource/types';
 export interface MetricItem {
     id: string;
@@ -55,6 +55,7 @@ export type WithChartCodeOptions = {
 export interface ChartJson {
     type: ChartType;
     data: DataItem[];
+    dataset?: Dataset;
     chartId?: string;
     chartName?: string;
     xField?: string;
@@ -88,4 +89,45 @@ type CodeRenderer = FC<React.ClassAttributes<HTMLElement> & React.HTMLAttributes
 interface LanguageRenderers {
     [key: string]: CodeRenderer;
 }
+/**
+ * 统一的图表 Props 类型
+ * 整合了 ChartJson 和 BaseVChartProps，用于所有图表组件和 hooks
+ */
+export interface ChartProps extends Partial<ChartJson> {
+    /** 图表类型 */
+    type?: ChartType;
+    /** 数据（必需） */
+    data?: DataItem[];
+    /** 图表样式 */
+    chartStyle?: React.CSSProperties;
+    /** 类名 */
+    className?: string;
+    /** 子节点 */
+    children?: React.ReactNode;
+    /** 图表规格配置 */
+    spec?: any;
+    /** 图表主题 */
+    chartTheme?: string;
+    /** 上下文菜单回调 */
+    onContextMenu?: (menu: any) => void;
+}
+/**
+ * useChartConfigTools 的配置选项
+ */
+export interface UseChartConfigToolsOptions {
+    /** 图表配置 */
+    props: ChartProps;
+}
+/**
+ * useChartConfigTools 的返回值类型
+ */
+export interface ChartConfigTools {
+    /** 标签配置 */
+    label: any;
+    /** 获取图表尺寸 */
+    getDimensions: () => {
+        width: number;
+        height: number;
+    };
+}
 export {};

package/dist/Chart/ChartControllers/DataFormat/utils.d.ts

@@ -9,4 +9,9 @@ export declare const formatTypeInitOptions: ({
     value: string;
     desc: string;
 })[];
+export declare const valueUnitInitOptions: {
+    key: string;
+    label: string;
+    value: string;
+}[];
 export declare function getUnit(valueUnit: string, unit: string): string;

package/dist/Chart/ChartControllers/utils.d.ts

@@ -14,6 +14,7 @@ export declare function handleParamsControlInfo(metricInfo: any, chartJson: Char
             formatType: any;
             decimalPlaces: any;
             suffix: string;
+            valueUnit: any;
         };
     } | null;
 } | null;
@@ -43,6 +44,7 @@ export declare const getDataFormat: (metricName: string, info: any) => {
         formatType: any;
         decimalPlaces: any;
         suffix: string;
+        valueUnit: any;
     };
 } | null;
 export declare function queryMql2Params(mql: string | Object): any;

package/dist/Chart/ChartWrapper/utils.d.ts

@@ -9,6 +9,7 @@ export declare function isChartAdvisor(chartJson: ChartJson): boolean;
 export declare function chartAdvisor(chartJson: ChartJson): Promise<{
     type: any;
     data: import("../..").DataItem[];
+    dataset?: import("../Dataset/types").Dataset;
     chartId?: string;
     chartName?: string;
     xField?: string;

package/dist/Chart/Dataset/types.d.ts

@@ -2,7 +2,7 @@ export type DatasetType = 'dataSource' | 'static';
 export type Dataset = {
     type?: DatasetType;
     data?: any[];
-    transfromData?: {
+    transformData?: {
         data?: any[];
         foldData?: any[];
         isMetricFolded?: boolean;
@@ -26,6 +26,7 @@ export interface MetricFormat {
     decimalPlaces?: number;
     prefix?: string;
     suffix?: string;
+    valueUnit?: string;
 }
 export type DataFormat = {
     [metricName: string]: MetricFormat;

package/dist/Chart/Dataset/useDataset.d.ts

@@ -23,12 +23,12 @@ export declare const getKeys: () => {
 export declare const transform2Dataset: (chartJson: ChartJson) => {
     fieldInfo?: undefined;
     type?: undefined;
-    transfromData?: undefined;
+    transformData?: undefined;
     data?: undefined;
 } | {
     fieldInfo: FieldInfoItem[];
     type: DatasetType;
-    transfromData: {
+    transformData: {
         data: {
             [x: string]: any;
         }[];

package/dist/Charts/Composite/types.d.ts

@@ -1,11 +1,31 @@
 import type { BaseVChartConfig, BaseVChartProps, DataItem } from '../../types';
 import { BarConfig } from '../Bar/types';
 export type CompositeSeriesType = 'bar' | 'line' | 'area' | 'scatter';
+export type YAxisOrient = 'left' | 'right';
+export type YAxisConfig = {
+    id?: string;
+    orient?: YAxisOrient;
+    title?: {
+        visible?: boolean;
+        text?: string;
+    };
+    label?: Record<string, any>;
+    type?: string;
+    min?: number;
+    max?: number;
+    grid?: {
+        visible?: boolean;
+    };
+    offset?: number;
+    [key: string]: any;
+};
 export type CompositeSeries = Omit<BarConfig, 'data' | 'chartName'> & {
     type: CompositeSeriesType;
     data?: DataItem[];
+    yAxisId?: string;
 };
 export type CompositeConfig = Omit<BaseVChartConfig, 'data'> & {
     series: CompositeSeries[];
+    yAxes?: YAxisConfig[];
 };
 export type CompositeProps = BaseVChartProps & Partial<CompositeConfig>;

package/dist/Charts/common/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useChartConfigTools } from './useChartConfigTools';

package/dist/Charts/common/hooks/useChartConfigTools.d.ts

@@ -0,0 +1,43 @@
+import type { ILabelSpec } from '@visactor/vchart';
+import type { ChartConfigTools, ChartProps, UseChartConfigToolsOptions as ChartConfigToolsOptions } from '../../../Chart/ChartCodeRender/type';
+export type IMultiLabelSpec<T extends Omit<ILabelSpec, 'position'>> = T | T[];
+interface ChartDimensions {
+    width: number;
+    height: number;
+}
+interface UseChartConfigToolsOptions extends ChartConfigToolsOptions {
+    props: ChartProps;
+}
+interface ChartConfigToolsResult extends ChartConfigTools {
+    label: IMultiLabelSpec<Omit<ILabelSpec, 'position'>>;
+    getDimensions: () => ChartDimensions;
+}
+/**
+ * 通用图表配置工具 Hook
+ *
+ * 用于统一管理图表的智能配置（label、tooltip、axis 等）
+ * 目前只实现了 label 模块，后续可扩展其他配置
+ *
+ * 通过原生方式获取图表容器宽度：
+ * 1. 优先使用 .chart-content 容器的宽度
+ * 2. 使用 ResizeObserver 监听容器尺寸变化
+ *
+ * @example
+ * ```typescript
+ * const chartConfig = useChartConfigTools({
+ *   props,
+ * });
+ *
+ * // 使用
+ * label: {
+ *   visible: true,
+ *   position: 'top',
+ *   ...chartConfig.label,
+ * }
+ * ```
+ *
+ * @param options - 配置选项
+ * @returns ChartConfigToolsResult - 图表配置工具集
+ */
+export declare function useChartConfigTools(options: UseChartConfigToolsOptions): ChartConfigToolsResult;
+export {};

package/dist/Charts/common/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Common module for Charts
+ *
+ * Provides shared utilities, hooks, and configurations for all chart components
+ */
+export * from './hooks';

package/dist/ConfigProvider/hooks/useConfig.d.ts

@@ -18,6 +18,13 @@ export declare function useCommonGlobalConfig(name: Charts): {
     lang?: string;
 };
 export type ChartConfig = AreaConfig | BarConfig | FunnelConfig | GaugeConfig | HeatmapConfig | LineConfig | PieConfig | RadarConfig | ScatterConfig | TableConfig | IndicatorConfig | CompositeConfig;
+/**
+ * VChart 配置 Hook
+ * @param name - 图表名称
+ * @param defaultConfig - 默认配置
+ * @param props - 图表属性
+ * @returns 合并后的配置和属性
+ */
 export declare function useVChartConfig<T1 extends ChartConfig>(name: Charts, defaultConfig: Partial<T1> | ((props: T1) => any), props: Partial<T1>): {
     mergedProps: any;
     options: any;

package/dist/GPTVis/hooks/useChartStore.d.ts

@@ -1,6 +1,6 @@
-import { ChartJson } from '../../Chart/ChartCodeRender/type';
+import type { ChartJson } from '../../Chart/ChartCodeRender/type';
 import { ChartControllersState } from '../../Chart/ChartControllers';
-import { Dataset } from '../../Chart/Dataset/types';
+import type { Dataset } from '../../Chart/Dataset/types';
 import { DataSourceQueryInfo } from '../../Chart/DataSource/types';
 import { BaseChartProps } from '../../types';
 export interface ContextMenu {
@@ -24,7 +24,7 @@ export interface QueryError {
     message: string;
 }
 export interface DetailData {
-    visible: boolean;
+    visible?: boolean;
     error?: string;
     loading?: boolean;
 }
@@ -33,7 +33,13 @@ export interface ChartControllersConfig extends ChartControllersState {
 export interface VizChartState {
     theme: string;
     chartLoading?: boolean;
+    /** 图表配置（包含 dataset） */
     chartJson: ChartJson;
+    /**
+     * 转换后的数据集
+     * 注意：这是从 chartJson 转换而来的独立数据集，用于图表渲染
+     * 与 chartJson.dataset 可能不同，包含 fold、merge 等转换操作后的数据
+     */
     dataset: Dataset;
     controllerConfig: ChartControllersConfig;
     contextMenu: ContextMenu;