@univerjs-pro/engine-chart 1.0.0-beta.0 → 1.0.0-beta.2

package/lib/types/models/chart-render/converter/render-spec-operators/visual-map-operator.d.ts

@@ -1,2 +1,6 @@
 import type { EChartRenderSpecOperator } from '../../../../types';
+export declare const VisualMapOrientation: {
+    readonly Horizontal: "horizontal";
+    readonly Vertical: "vertical";
+};
 export declare const visualMapOperator: EChartRenderSpecOperator;

package/lib/types/models/chart-render/echart-render-model.d.ts

@@ -20,6 +20,13 @@ export declare class EChartRenderModel extends Disposable implements IChartRende
     clearAllRuntimeCache(): void;
     dispose(): void;
     toSpec(config: IChartConfig, style: ChartRuntimeStyle): import("echarts").EChartsOption;
+    /**
+     * Determine whether to show an empty state for the chart.
+     * @param chartConfig The chart configuration object.
+     * @param chartStyle The chart style object.
+     * @returns A boolean indicating whether to show an empty state.
+     */
+    private _getShowEmpty;
     stylizeSpec(spec: EChartSpec, stylizeInit: IChartRenderModelStylizeInit<EChartSpec>, rect: IChartHostRect): import("echarts").EChartsOption | {
         backgroundColor: string;
     };
@@ -35,7 +42,6 @@ export declare class EChartRenderEngine extends Disposable implements EChartInst
     static engineName: string;
     private _instance;
     container: HTMLElement | string;
-    private _devicePixelRatio;
     private _lastSpec;
     private readonly _eventHandlers;
     private readonly _nativeEventHandlers;
@@ -48,7 +54,6 @@ export declare class EChartRenderEngine extends Disposable implements EChartInst
     private readonly _emittedElementEventKeys;
     private _emittedElementEventKeysClearQueued;
     constructor();
-    getDevicePixelRatio(): 1 | 2 | undefined;
     mount(id: string | HTMLElement): void;
     resize(echartsProviderOrOptions?: any | IChartRenderRuntimeOptions): void;
     private _ensureChartInstance;
@@ -72,7 +77,6 @@ export declare class EChartRenderEngine extends Disposable implements EChartInst
     private _handleElementEditZrHover;
     private _handleElementEditClick;
     private _handleElementEditZrClick;
-    private _hideTooltip;
     private _ensureEditOverlay;
     private _removeEditOverlay;
     private _clearHoverBorder;

package/lib/types/models/chart-render/edit-overlay/chart-element-edit-overlay.d.ts

@@ -1,5 +1,5 @@
-import type { IChartElementBounds, IChartElementHit } from '../../../types';
 import type { ECharts } from 'echarts';
+import type { IChartElementBounds, IChartElementHit } from '../../../types';
 import type { ChartElementEditBorderType, IChartElementEditOverlayPalette } from './types';
 export declare class ChartElementEditOverlay {
     private readonly _getInstance;

package/lib/types/models/chart-render/edit-overlay/resolve-chart-element-hit-layout.d.ts

@@ -1,5 +1,5 @@
-import type { IChartElementBounds, IChartElementHit } from '../../../types';
 import type { ECharts } from 'echarts';
+import type { IChartElementBounds, IChartElementHit } from '../../../types';
 import type { IChartElementHitLayout, IResolvedChartElementOverlay } from './types';
 export declare function toChartElementFiniteNumber(value: unknown): number | undefined;
 export declare function getChartElementTarget(params: any): any;

package/lib/types/models/chart-render/style/chart-runtime-style.d.ts

@@ -10,5 +10,4 @@ import { ChartTypeBits } from '../../../enum';
  * the runtime render style consumed by physical-position operators.
  */
 export declare function resolveChartRuntimeStyle(style: ChartRuntimeStyle, chartType?: ChartTypeBits): ChartRuntimeStyle;
-export declare function resolveChartRuntimeStyle(style: ChartStyle, chartType?: ChartTypeBits): ChartStyle;
 export declare function resolveChartStyleBackgroundColor(style?: Pick<ChartStyle, 'backgroundColor'> | null): string;

package/lib/types/models/common/constants/default-chart-style.d.ts

@@ -20,19 +20,19 @@ export declare const MODERN_GAUGE_STYLE: {
     readonly axisTick: {
         readonly visible: false;
         readonly splitNumber: 2;
-        readonly length: 6;
+        readonly length: 5;
         readonly width: 1;
         readonly color: "gray.700";
     };
     readonly splitLine: {
         readonly visible: false;
-        readonly length: 10;
+        readonly length: 8;
         readonly width: 2;
         readonly color: "gray.700";
     };
     readonly axisLabel: {
         readonly visible: false;
-        readonly distance: 14;
+        readonly distance: 12;
         readonly color: "gray.700";
         readonly fontSize: 12;
         readonly bold: false;
@@ -61,18 +61,18 @@ export declare const MODERN_GAUGE_STYLE: {
     };
     readonly title: {
         readonly visible: true;
-        readonly offsetY: 0.65;
+        readonly offsetY: 0.95;
         readonly color: "gray.700";
-        readonly fontSize: 14;
+        readonly fontSize: 12;
         readonly bold: false;
         readonly italic: false;
         readonly family: "Arial";
     };
     readonly detail: {
         readonly visible: true;
-        readonly offsetY: 0.35;
+        readonly offsetY: 0.65;
         readonly color: "gray.700";
-        readonly fontSize: 32;
+        readonly fontSize: 14;
         readonly bold: true;
         readonly italic: false;
         readonly family: "Arial";
@@ -98,19 +98,19 @@ export declare const CLASSIC_GAUGE_STYLE: {
     readonly axisTick: {
         readonly visible: true;
         readonly splitNumber: 5;
-        readonly length: 6;
+        readonly length: 8;
         readonly width: 1;
         readonly color: "gray.700";
     };
     readonly splitLine: {
         readonly visible: true;
-        readonly length: 10;
+        readonly length: 12;
         readonly width: 2;
         readonly color: "gray.700";
     };
     readonly axisLabel: {
         readonly visible: true;
-        readonly distance: 14;
+        readonly distance: 12;
         readonly color: "gray.700";
         readonly fontSize: 12;
         readonly bold: false;
@@ -139,18 +139,18 @@ export declare const CLASSIC_GAUGE_STYLE: {
     };
     readonly title: {
         readonly visible: true;
-        readonly offsetY: 0.65;
+        readonly offsetY: 0.95;
         readonly color: "gray.700";
-        readonly fontSize: 14;
+        readonly fontSize: 12;
         readonly bold: false;
         readonly italic: false;
         readonly family: "Arial";
     };
     readonly detail: {
         readonly visible: true;
-        readonly offsetY: 0.35;
+        readonly offsetY: 0.65;
         readonly color: "gray.700";
-        readonly fontSize: 20;
+        readonly fontSize: 14;
         readonly bold: true;
         readonly italic: false;
         readonly family: "Arial";
@@ -175,7 +175,7 @@ export declare const STATUS_DIAL_GAUGE_STYLE: {
     };
     readonly axisLabel: {
         readonly visible: true;
-        readonly distance: 14;
+        readonly distance: 12;
         readonly color: "gray.700";
         readonly fontSize: 12;
         readonly bold: false;
@@ -203,19 +203,19 @@ export declare const STATUS_DIAL_GAUGE_STYLE: {
         readonly rounded: true;
     };
     readonly title: {
-        readonly offsetY: 0.65;
+        readonly offsetY: 0.95;
         readonly visible: true;
         readonly color: "gray.700";
-        readonly fontSize: 14;
+        readonly fontSize: 12;
         readonly bold: false;
         readonly italic: false;
         readonly family: "Arial";
     };
     readonly detail: {
-        readonly offsetY: 0.35;
-        readonly fontSize: 24;
+        readonly offsetY: 0.65;
         readonly visible: true;
         readonly color: "gray.700";
+        readonly fontSize: 14;
         readonly bold: true;
         readonly italic: false;
         readonly family: "Arial";
@@ -229,7 +229,7 @@ export declare const STATUS_DIAL_GAUGE_STYLE: {
     readonly axisTick: {
         readonly visible: false;
         readonly splitNumber: 2;
-        readonly length: 6;
+        readonly length: 5;
         readonly width: 1;
         readonly color: "gray.700";
     };
@@ -273,18 +273,18 @@ export declare const PROGRESS_GAUGE_STYLE: {
     };
     readonly title: {
         readonly visible: true;
-        readonly offsetY: 0.65;
+        readonly offsetY: 0.95;
         readonly color: "gray.700";
-        readonly fontSize: 14;
+        readonly fontSize: 12;
         readonly bold: false;
         readonly italic: false;
         readonly family: "Arial";
     };
     readonly detail: {
         readonly visible: true;
-        readonly offsetY: 0.35;
+        readonly offsetY: 0.65;
         readonly color: "gray.700";
-        readonly fontSize: 32;
+        readonly fontSize: 14;
         readonly bold: true;
         readonly italic: false;
         readonly family: "Arial";
@@ -330,9 +330,9 @@ export declare const MINIMAL_GAUGE_STYLE: {
     };
     readonly detail: {
         readonly visible: true;
-        readonly offsetY: 0.35;
+        readonly offsetY: 0.65;
         readonly color: "gray.700";
-        readonly fontSize: 32;
+        readonly fontSize: 14;
         readonly bold: true;
         readonly italic: false;
         readonly family: "Arial";
@@ -359,19 +359,19 @@ export declare const GAUGE_STYLE_TEMPLATES: {
         readonly axisTick: {
             readonly visible: false;
             readonly splitNumber: 2;
-            readonly length: 6;
+            readonly length: 5;
             readonly width: 1;
             readonly color: "gray.700";
         };
         readonly splitLine: {
             readonly visible: false;
-            readonly length: 10;
+            readonly length: 8;
             readonly width: 2;
             readonly color: "gray.700";
         };
         readonly axisLabel: {
             readonly visible: false;
-            readonly distance: 14;
+            readonly distance: 12;
             readonly color: "gray.700";
             readonly fontSize: 12;
             readonly bold: false;
@@ -400,18 +400,18 @@ export declare const GAUGE_STYLE_TEMPLATES: {
         };
         readonly title: {
             readonly visible: true;
-            readonly offsetY: 0.65;
+            readonly offsetY: 0.95;
             readonly color: "gray.700";
-            readonly fontSize: 14;
+            readonly fontSize: 12;
             readonly bold: false;
             readonly italic: false;
             readonly family: "Arial";
         };
         readonly detail: {
             readonly visible: true;
-            readonly offsetY: 0.35;
+            readonly offsetY: 0.65;
             readonly color: "gray.700";
-            readonly fontSize: 32;
+            readonly fontSize: 14;
             readonly bold: true;
             readonly italic: false;
             readonly family: "Arial";
@@ -437,19 +437,19 @@ export declare const GAUGE_STYLE_TEMPLATES: {
         readonly axisTick: {
             readonly visible: true;
             readonly splitNumber: 5;
-            readonly length: 6;
+            readonly length: 8;
             readonly width: 1;
             readonly color: "gray.700";
         };
         readonly splitLine: {
             readonly visible: true;
-            readonly length: 10;
+            readonly length: 12;
             readonly width: 2;
             readonly color: "gray.700";
         };
         readonly axisLabel: {
             readonly visible: true;
-            readonly distance: 14;
+            readonly distance: 12;
             readonly color: "gray.700";
             readonly fontSize: 12;
             readonly bold: false;
@@ -478,18 +478,18 @@ export declare const GAUGE_STYLE_TEMPLATES: {
         };
         readonly title: {
             readonly visible: true;
-            readonly offsetY: 0.65;
+            readonly offsetY: 0.95;
             readonly color: "gray.700";
-            readonly fontSize: 14;
+            readonly fontSize: 12;
             readonly bold: false;
             readonly italic: false;
             readonly family: "Arial";
         };
         readonly detail: {
             readonly visible: true;
-            readonly offsetY: 0.35;
+            readonly offsetY: 0.65;
             readonly color: "gray.700";
-            readonly fontSize: 20;
+            readonly fontSize: 14;
             readonly bold: true;
             readonly italic: false;
             readonly family: "Arial";
@@ -534,18 +534,18 @@ export declare const GAUGE_STYLE_TEMPLATES: {
         };
         readonly title: {
             readonly visible: true;
-            readonly offsetY: 0.65;
+            readonly offsetY: 0.95;
             readonly color: "gray.700";
-            readonly fontSize: 14;
+            readonly fontSize: 12;
             readonly bold: false;
             readonly italic: false;
             readonly family: "Arial";
         };
         readonly detail: {
             readonly visible: true;
-            readonly offsetY: 0.35;
+            readonly offsetY: 0.65;
             readonly color: "gray.700";
-            readonly fontSize: 32;
+            readonly fontSize: 14;
             readonly bold: true;
             readonly italic: false;
             readonly family: "Arial";
@@ -591,9 +591,9 @@ export declare const GAUGE_STYLE_TEMPLATES: {
         };
         readonly detail: {
             readonly visible: true;
-            readonly offsetY: 0.35;
+            readonly offsetY: 0.65;
             readonly color: "gray.700";
-            readonly fontSize: 32;
+            readonly fontSize: 14;
             readonly bold: true;
             readonly italic: false;
             readonly family: "Arial";
@@ -822,19 +822,19 @@ export declare const defaultChartConfig: {
         readonly axisTick: {
             readonly visible: true;
             readonly splitNumber: 5;
-            readonly length: 6;
+            readonly length: 8;
             readonly width: 1;
             readonly color: "gray.700";
         };
         readonly splitLine: {
             readonly visible: true;
-            readonly length: 10;
+            readonly length: 12;
             readonly width: 2;
             readonly color: "gray.700";
         };
         readonly axisLabel: {
             readonly visible: true;
-            readonly distance: 14;
+            readonly distance: 12;
             readonly color: "gray.700";
             readonly fontSize: 12;
             readonly bold: false;
@@ -863,18 +863,18 @@ export declare const defaultChartConfig: {
         };
         readonly title: {
             readonly visible: true;
-            readonly offsetY: 0.65;
+            readonly offsetY: 0.95;
             readonly color: "gray.700";
-            readonly fontSize: 14;
+            readonly fontSize: 12;
             readonly bold: false;
             readonly italic: false;
             readonly family: "Arial";
         };
         readonly detail: {
             readonly visible: true;
-            readonly offsetY: 0.35;
+            readonly offsetY: 0.65;
             readonly color: "gray.700";
-            readonly fontSize: 20;
+            readonly fontSize: 14;
             readonly bold: true;
             readonly italic: false;
             readonly family: "Arial";

package/lib/types/models/common/constants/default.d.ts

@@ -1,4 +1,5 @@
-import type { ChartStyle } from '../../../types';
+import type { ChartDirection, ChartRuntimeStyle } from '../../../types';
+export declare const DEFAULT_CHART_DIRECTION: ChartDirection;
 export declare const EChartRenderEngineName = "EChartRenderEngine";
 export declare const defaultChartWidth = 468;
 export declare const defaultChartHeight = 369;
@@ -6,7 +7,7 @@ export declare const LegendPadding = 15;
 export declare const TitleOrLegendPadding = 12;
 export declare const TitleDefaultStartPosition = 8;
 export declare const DEFAULT_CHART_LAYOUT_PADDING = 14;
-export declare function getChartLayoutPadding(style?: ChartStyle): number;
+export declare function getChartLayoutPadding(style: ChartRuntimeStyle): number;
 export declare const TitleLineHeightBase = 1.2;
 export declare const AxisLabelMaxPercent = 0.15;
 export declare const defaultBubbleSize = 0.12;

package/lib/types/plugin.d.ts

@@ -1,5 +1,5 @@
-import { IConfigService, Injector, Plugin, UniverInstanceType } from '@univerjs/core';
 import type { IUniverChartConfig } from './config/config';
+import { IConfigService, Injector, Plugin, UniverInstanceType } from '@univerjs/core';
 /** Registers the shared chart rendering runtime used by every chart host. */
 export declare class UniverChartPlugin extends Plugin {
     private readonly _config;

package/lib/types/types.d.ts

@@ -35,6 +35,11 @@ export interface IDimensionDefinition {
 export type DimensionDefinitionLoose = IDimensionDefinition['name'] | IDimensionDefinition;
 export type OptionDataValue = string | number | Date | null | undefined;
 export type ChartDataSourceValues = OptionDataValue[][];
+export interface IUniverDataSetCategorySpan {
+    fieldIndex: number;
+    startIndex: number;
+    endIndex: number;
+}
 /**
  * Canonical chart dataset used by chart context operators and chart-data builders.
  *
@@ -51,6 +56,11 @@ export interface IUniverDataSet {
     dimensions: Array<DimensionDefinitionLoose>;
     sourceType?: ChartSourceDataTypeEnum[][];
     sourceLabels?: string[][];
+    /**
+     * Explicit category grouping topology. Absence enables adjacent path-prefix inference;
+     * an empty array explicitly keeps repeated adjacent values as separate groups.
+     */
+    categorySpans?: IUniverDataSetCategorySpan[];
 }
 /** Ordered field names that define the persisted Candlestick OHLC mapping contract. */
 export declare const CHART_CANDLESTICK_MAPPING_FIELDS: readonly ["openIndex", "highIndex", "lowIndex", "closeIndex"];
@@ -356,6 +366,8 @@ export interface IChartContext {
     categoryType?: CategoryType;
     /** Ordered selected Label field indexes. */
     categoryIndexes?: number[];
+    /** Whether ordered category indexes should render as one root-to-leaf category axis. */
+    multiLevelCategoryAxis?: boolean;
     /**
      * the flag to indicate whether the chart use date axis, only all category data is date type, the chart will use date axis, if there are some string type data, the chart will use category axis even the flag is true.
      */
@@ -470,6 +482,28 @@ export interface IChartDataCategory {
     useDateAxis: boolean;
     items: IChartDataItem[];
     keys: string[];
+    hierarchy?: IChartDataCategoryHierarchy;
+}
+export interface IChartDataCategoryLevel {
+    index: number;
+    name: string;
+}
+export interface IChartDataCategoryHierarchy {
+    levels: IChartDataCategoryLevel[];
+    roots: IChartDataCategoryGroup[];
+}
+export interface IChartDataCategoryGroup {
+    label: string;
+    startIndex: number;
+    endIndex: number;
+    children?: IChartDataCategoryGroup[];
+}
+export interface IChartDataCategorySegment {
+    level: number;
+    label: string;
+    path: string[];
+    startIndex: number;
+    endIndex: number;
 }
 export interface IChartDataSeries {
     index: number;
@@ -694,9 +728,6 @@ export interface IChartPlotArea {
     height: number;
 }
 export interface IChartStyle {
-    runtime: IChartRuntimeContext;
-    /** Runtime-only locale direction. It must not be persisted in chart snapshots. */
-    direction: ChartDirection;
     width: number;
     height: number;
     theme: string;
@@ -825,7 +856,8 @@ export interface IRelationForceOptions {
 }
 export type ChartStyle = DeepPartial<IChartStyle>;
 export type ChartRenderRuntimeContext = Omit<DeepPartial<IChartRuntimeContext>, 'localeTexts'> & Pick<IChartRuntimeContext, 'localeTexts'>;
-export type ChartRuntimeStyle = Omit<ChartStyle, 'runtime'> & {
+export type ChartRuntimeStyle = ChartStyle & {
+    direction: ChartDirection;
     runtime: ChartRenderRuntimeContext;
 };
 export interface IChartConfig extends IChartData {
@@ -840,7 +872,7 @@ export interface IChartSnapshot {
     dataAggregation?: IChartDataAggregation;
 }
 /** Persisted chart field selection accepted by the snapshot reader. */
-export interface IChartSnapshotContext extends Pick<IChartContext, 'categoryIndexes' | 'seriesIndexes' | 'histogram'> {
+export interface IChartSnapshotContext extends Pick<IChartContext, 'categoryIndexes' | 'multiLevelCategoryAxis' | 'seriesIndexes' | 'useDateAxis' | 'histogram'> {
     /** Historical snapshot field decoded only when `categoryIndexes` is absent. */
     categoryIndex?: number;
 }
@@ -903,7 +935,13 @@ export interface IChartRenderModelImageExportInput extends IChartRenderInput {
     width: number;
     height: number;
 }
+export declare const ChartImageExportFormat: {
+    readonly PNG: "png";
+    readonly SVG: "svg";
+};
+export type ChartImageExportFormat = (typeof ChartImageExportFormat)[keyof typeof ChartImageExportFormat];
 export interface IChartRenderModelImageExportOptions {
+    format?: ChartImageExportFormat;
     pixelRatio?: number;
     backgroundColor?: string | null;
 }
@@ -911,7 +949,8 @@ export interface IChartRenderModelImageExportResult {
     dataUrl: string;
     width: number;
     height: number;
-    pixelRatio: number;
+    /** Explicit raster pixel ratio. Omitted when the renderer owns the default and for vector exports. */
+    pixelRatio?: number;
 }
 export interface IChartRenderInstance extends IDisposable {
     readonly mode: ChartHostRenderMode;
@@ -974,6 +1013,7 @@ export type ChartImageSource = {
 export interface IChartRenderAsImageOptions {
     width: number;
     height: number;
+    format?: ChartImageExportFormat;
     pixelRatio?: number;
     backgroundColor?: string;
     echartsProvider?: any;

package/lib/types/util.d.ts

@@ -7,7 +7,6 @@ export declare const chartBitsUtils: {
 };
 export declare function mergeChartConfig<T extends object>(current: T | undefined, update: Partial<T>): T;
 export declare const setProperty: (data: Record<string, any>, propertyPath: string, value: any) => void;
-export declare const getProperty: <T = any>(data: Record<string, any> | undefined, propertyPath: string) => T | undefined;
 /**
  * Set graphic element to data.
  * because we use graphic element to draw watermark title, so we need to set it to data.

package/lib/types/utils/compact.d.ts

@@ -1,4 +1,10 @@
+/** Copies only the top-level container while preserving nested references. */
+export declare function shallowClone<T>(value: T): T;
 /** Deep-clones a value while removing own properties whose value is undefined. */
 export declare function cloneWithoutUndefined<T>(value: T): T;
 /** Returns an undefined-free record, or undefined when no fields remain. */
 export declare function compactRecord<T extends object>(value: T): T | undefined;
+/** Returns a shallow copy without own string fields whose value is undefined. */
+export declare function omitUndefinedFields<T extends object>(value: T): T;
+/** Deletes own string fields whose value is undefined and preserves object identity. */
+export declare function deleteUndefinedFields<T extends object>(target: T): T;

package/lib/types/utils/device-pixel-ratio.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_CHART_DEVICE_PIXEL_RATIO = 2;