@univerjs-pro/sheets-chart-ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/lib/types/services/sheets-chart-host-provider.service.d.ts

@@ -1,35 +1,59 @@
+import type { ChartHostRenderMode, IDomChartHost, IImageChartHost } from '@univerjs-pro/engine-chart';
 import type { Rect } from '@univerjs/engine-render';
 import type { Observable } from 'rxjs';
+import type { ChartHostHandle } from './sheet-chart-host';
 import { Disposable } from '@univerjs/core';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { SheetCanvasFloatDomManagerService } from '@univerjs/sheets-drawing-ui';
+import { ChartSnapshotStoreService } from './chart-snapshot-store.service';
+export { createHostElement } from './sheet-chart-host';
 export interface IChartHostProviderService {
-    ensureHost: (chartId: string) => Promise<{
+    ensureHost(chartId: string, mode: 'image'): Promise<IImageChartHost | null>;
+    ensureHost(chartId: string, mode: 'dom'): Promise<IDomChartHost | null>;
+    ensureHost(chartId: string, mode: ChartHostRenderMode): Promise<IImageChartHost | IDomChartHost | null>;
+    ensureHost(chartId: string): Promise<{
         mountNode: string | HTMLElement;
-        dispose?: () => void;
+        dispose: () => void;
     }>;
     setHostStyle: (chartId: string, style: Record<string, any>) => void;
     getHostSize: (chartId: string) => Rect | null;
     removeHost$: Observable<string>;
+    removeHost: (chartId: string) => void;
     checkHost: (chartId: string) => boolean;
+    syncHostLayout: (chartId: string) => void;
+    isDomReady: (chartId: string) => boolean;
+    markHostNotReady: (chartId: string) => void;
+    invalidateSnapshot: (chartId: string) => void;
 }
-export declare function createHostElement(width: number, height: number): HTMLDivElement;
 export declare class SheetsChartHostProviderService extends Disposable implements IChartHostProviderService {
     private readonly _sheetCanvasFloatDomManagerService;
     private _renderManagerService;
-    private _mountNodes;
+    private readonly _chartSnapshotStoreService;
+    private _chartHostMap;
+    private _activeDomReadyChartIds;
     private _removeHost$;
     readonly removeHost$: Observable<string>;
-    constructor(_sheetCanvasFloatDomManagerService: SheetCanvasFloatDomManagerService, _renderManagerService: IRenderManagerService);
+    constructor(_sheetCanvasFloatDomManagerService: SheetCanvasFloatDomManagerService, _renderManagerService: IRenderManagerService, _chartSnapshotStoreService: ChartSnapshotStoreService);
     private _getSceneAndTransformerByDrawingSearch;
     setBorder(id: string, color: string): void;
     setHostStyle(id: string, style: Record<string, any>): void;
     getHostSize(id: string): Rect | null;
     checkHost(id: string): boolean;
-    ensureHost(id: string): Promise<{
-        mountNode: HTMLElement;
-        dispose: () => void;
-    }>;
-    private _createHost;
+    syncHostLayout(id: string): void;
+    removeHost(id: string): void;
+    ensureHost(id: string): Promise<ChartHostHandle>;
+    ensureHost(id: string, mode: 'image'): Promise<IImageChartHost | null>;
+    ensureHost(id: string, mode: 'dom'): Promise<IDomChartHost | null>;
+    ensureHost(id: string, mode: ChartHostRenderMode): Promise<IImageChartHost | IDomChartHost | null>;
+    isDomReady(id: string): boolean;
+    markHostNotReady(id: string): void;
+    invalidateSnapshot(id: string): void;
+    private _createImageChartHost;
+    private _getOrCreateSheetChartHost;
+    private _markHostReady;
+    private _getChartSnapshotKey;
+    private _requestChartCanvasRender;
+    private _getHostPlacement;
+    dispose(): void;
 }
 export declare const IChartHostProviderService: import("@wendellhu/redi").IdentifierDecorator<IChartHostProviderService>;

package/lib/types/util.d.ts

@@ -1,9 +1,10 @@
 import type { IChartSourceMultiRangeItem, ISheetChartSourceSingleRange } from '@univerjs-pro/sheets-chart';
 import type { IUniverInstanceService, Nullable } from '@univerjs/core';
+import type { LocaleKey } from './locale/types';
 import { ChartTypeBits } from '@univerjs-pro/engine-chart';
 export declare function serializeChartDataRange(rangeInfo: Nullable<ISheetChartSourceSingleRange | IChartSourceMultiRangeItem[]>, univerInstanceService: IUniverInstanceService): string;
 export interface IChartTypeOption {
-    label: string;
+    label: LocaleKey;
     value: ChartTypeBits;
     icon: string;
 }

package/lib/types/views/chart-edit-panel/Options.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { LocaleKey } from '../../locale/types';
 import type { IChartOptionType } from '../../services/sheets-chart-ui.service';
 import { AreaLineStyle, AxisAlignEnum, ChartBorderDashType, ChartTrendlineType, InvalidValueType, LabelContentType, LegendPositionEnum, LinePointShape, PieLabelPosition, RadarShape, SelectModeEnum, SeriesLabelPosition, TextAlign, TextVerticalAlign, TitlePositionEnum, WaterfallStackTypeEnum } from '@univerjs-pro/engine-chart';
 export type OptionType = IChartOptionType;
@@ -8,7 +9,7 @@ export declare const defaultOption: {
 };
 export declare const chartTypeToIcon: Record<string, ReactNode>;
 export declare const seriesChartTypeOptions: {
-    label: string;
+    label: "sheets-chart-ui.categoryDefaultName" | "sheets-chart-ui.seriesDefaultName" | "sheets-chart-ui.theIndexItem" | "sheets-chart-ui.none" | "sheets-chart-ui.line" | "sheets-chart-ui.stack" | "sheets-chart-ui.fill" | "sheets-chart-ui.value" | "sheets-chart-ui.default" | "sheets-chart-ui.category" | "sheets-chart-ui.series" | "sheets-chart-ui.color" | "sheets-chart-ui.min" | "sheets-chart-ui.max" | "sheets-chart-ui.border" | "sheets-chart-ui.point" | "sheets-chart-ui.chartType" | "sheets-chart-ui.legend" | "sheets-chart-ui.gradientFill" | "sheets-chart-ui.backgroundColor" | "sheets-chart-ui.position" | "sheets-chart-ui.reset" | "sheets-chart-ui.aggregate" | "sheets-chart-ui.doughnutHole" | "sheets-chart-ui.indicatorLineType" | "sheets-chart-ui.indicatorLineColor" | "sheets-chart-ui.blank" | "sheets-chart-ui.chartStyle" | "sheets-chart-ui.cloud.word" | "sheets-chart-ui.cloud.frequency" | "sheets-chart-ui.waterfall.positive" | "sheets-chart-ui.waterfall.negative" | "sheets-chart-ui.waterfall.subtotal" | "sheets-chart-ui.boxplot.min" | "sheets-chart-ui.boxplot.max" | "sheets-chart-ui.boxplot.q1" | "sheets-chart-ui.boxplot.median" | "sheets-chart-ui.boxplot.q3" | "sheets-chart-ui.bubble.emptyTips" | "sheets-chart-ui.relation.emptyTips" | "sheets-chart-ui.pareto.lineName" | "sheets-chart-ui.msg.emptyTips" | "sheets-chart-ui.msg.sankeyCircularTips" | "sheets-chart-ui.align.left" | "sheets-chart-ui.align.right" | "sheets-chart-ui.align.center" | "sheets-chart-ui.dataRange" | "sheets-chart-ui.insertChart" | "sheets-chart-ui.editChart" | "sheets-chart-ui.openChartPanel" | "sheets-chart-ui.deleteChart" | "sheets-chart-ui.hideChartPanel" | "sheets-chart-ui.setupChart" | "sheets-chart-ui.customChart" | "sheets-chart-ui.themes" | "sheets-chart-ui.allSeries" | "sheets-chart-ui.addSeries" | "sheets-chart-ui.moreSettings" | "sheets-chart-ui.chartBorderColor" | "sheets-chart-ui.chartAndAxisTitles" | "sheets-chart-ui.legendSelectMode" | "sheets-chart-ui.dataLabels" | "sheets-chart-ui.gridlinesAndTicks" | "sheets-chart-ui.indicatorLine" | "sheets-chart-ui.indicatorLabel" | "sheets-chart-ui.indicatorValue" | "sheets-chart-ui.withOpacity" | "sheets-chart-ui.withColor" | "sheets-chart-ui.withThickness" | "sheets-chart-ui.withType" | "sheets-chart-ui.withSize" | "sheets-chart-ui.withShape" | "sheets-chart-ui.withFormat" | "sheets-chart-ui.dataPoint" | "sheets-chart-ui.dataNodeShape" | "sheets-chart-ui.addDataPoint" | "sheets-chart-ui.percentage" | "sheets-chart-ui.lineDashType" | "sheets-chart-ui.visualMapScope" | "sheets-chart-ui.cloud.title" | "sheets-chart-ui.shape.polygon" | "sheets-chart-ui.shape.circle" | "sheets-chart-ui.shape.square" | "sheets-chart-ui.shape.triangle" | "sheets-chart-ui.shape.diamond" | "sheets-chart-ui.shape.rect" | "sheets-chart-ui.shape.roundRect" | "sheets-chart-ui.shape.pin" | "sheets-chart-ui.shape.arrow" | "sheets-chart-ui.shape.none" | "sheets-chart-ui.shape.emptyCircle" | "sheets-chart-ui.shape.emptySquare" | "sheets-chart-ui.shape.emptyTriangle" | "sheets-chart-ui.shape.emptyDiamond" | "sheets-chart-ui.shape.emptyRect" | "sheets-chart-ui.shape.emptyRoundRect" | "sheets-chart-ui.shape.emptyPin" | "sheets-chart-ui.shape.emptyArrow" | "sheets-chart-ui.waterfall.arrangement" | "sheets-chart-ui.waterfall.stacked" | "sheets-chart-ui.waterfall.stackType" | "sheets-chart-ui.waterfall.showSubtotal" | "sheets-chart-ui.waterfall.positiveStyle" | "sheets-chart-ui.waterfall.negativeStyle" | "sheets-chart-ui.waterfall.subtotalStyle" | "sheets-chart-ui.waterfall.positiveLegendText" | "sheets-chart-ui.waterfall.negativeLegendText" | "sheets-chart-ui.waterfall.subtotalLegendText" | "sheets-chart-ui.radar.fill" | "sheets-chart-ui.bubble.size" | "sheets-chart-ui.bubble.label" | "sheets-chart-ui.bubble.xAxis" | "sheets-chart-ui.bubble.yAxis" | "sheets-chart-ui.dialog.setFormat" | "sheets-chart-ui.dialog.numfmt.date" | "sheets-chart-ui.dialog.numfmt.currency" | "sheets-chart-ui.dialog.numfmt.cancel" | "sheets-chart-ui.dialog.numfmt.general" | "sheets-chart-ui.dialog.numfmt.confirm" | "sheets-chart-ui.dialog.numfmt.accounting" | "sheets-chart-ui.dialog.numfmt.thousandthPercentile" | "sheets-chart-ui.dialog.numfmt.fieldSetting" | "sheets-chart-ui.dialog.numfmt.formatTypes" | "sheets-chart-ui.dialog.numfmt.generalDesc" | "sheets-chart-ui.dialog.numfmt.accountingDesc" | "sheets-chart-ui.dialog.numfmt.currencyDesc" | "sheets-chart-ui.dialog.numfmt.dateDesc" | "sheets-chart-ui.dialog.numfmt.thousandthPercentileDesc" | "sheets-chart-ui.dialog.numfmt.decimalPlaces" | "sheets-chart-ui.dialog.numfmt.currencyTypes" | "sheets-chart-ui.dialog.numfmt.negativeNumberTypes" | "sheets-chart-ui.dialog.numfmt.dateTypes" | "sheets-chart-ui.titles.title" | "sheets-chart-ui.titles.xAxisTitle" | "sheets-chart-ui.titles.yAxisTitle" | "sheets-chart-ui.titles.rightYAxisTitle" | "sheets-chart-ui.titles.titlePosition" | "sheets-chart-ui.titles.subTitle" | "sheets-chart-ui.titles.mainTitle" | "sheets-chart-ui.titles.titleFormat" | "sheets-chart-ui.titles.titleText" | "sheets-chart-ui.titles.titleAlign" | "sheets-chart-ui.relation.auto" | "sheets-chart-ui.relation.circular" | "sheets-chart-ui.relation.force" | "sheets-chart-ui.relation.title" | "sheets-chart-ui.relation.emphasis" | "sheets-chart-ui.relation.layoutType" | "sheets-chart-ui.relation.useValueAsSymbolSize" | "sheets-chart-ui.relation.repulsion" | "sheets-chart-ui.relation.edgeLength" | "sheets-chart-ui.relation.gravity" | "sheets-chart-ui.relation.rotateLabel" | "sheets-chart-ui.relation.forceOptions" | "sheets-chart-ui.pareto.lineSeries" | "sheets-chart-ui.pareto.barSeries" | "sheets-chart-ui.lineType.line" | "sheets-chart-ui.lineType.smooth" | "sheets-chart-ui.lineType.step" | "sheets-chart-ui.dashType.solid" | "sheets-chart-ui.dashType.dot" | "sheets-chart-ui.dashType.dash" | "sheets-chart-ui.axes.axis" | "sheets-chart-ui.axes.axisOptions" | "sheets-chart-ui.axes.horizontalAxis" | "sheets-chart-ui.axes.verticalAxis" | "sheets-chart-ui.axes.rightVerticalAxis" | "sheets-chart-ui.axes.leftAxis" | "sheets-chart-ui.axes.rightAxis" | "sheets-chart-ui.axes.useRightAxis" | "sheets-chart-ui.stackType.stack" | "sheets-chart-ui.stackType.percent" | "sheets-chart-ui.permission.editErr" | "sheets-chart-ui.msg.invalidSource" | "sheets-chart-ui.invalidType.zero" | "sheets-chart-ui.invalidType.gaps" | "sheets-chart-ui.invalidType.connectDataPointsWithStraightLines" | "sheets-chart-ui.seriesBlock.format" | "sheets-chart-ui.seriesBlock.dataPointStyle" | "sheets-chart-ui.axisPositionType.center" | "sheets-chart-ui.axisPositionType.start" | "sheets-chart-ui.axisPositionType.end" | "sheets-chart-ui.settingsLabels.switchToRowOrColumn" | "sheets-chart-ui.settingsLabels.useAsCategoryLabels" | "sheets-chart-ui.settingsLabels.showEmptyCellsAs" | "sheets-chart-ui.positionType.left" | "sheets-chart-ui.positionType.right" | "sheets-chart-ui.positionType.bottom" | "sheets-chart-ui.positionType.top" | "sheets-chart-ui.positionType.hide" | "sheets-chart-ui.positionType.auto" | "sheets-chart-ui.positionType.inside" | "sheets-chart-ui.positionType.outside" | "sheets-chart-ui.alignY.bottom" | "sheets-chart-ui.alignY.top" | "sheets-chart-ui.alignY.middle" | "sheets-chart-ui.legendSelectModeType.single" | "sheets-chart-ui.legendSelectModeType.multiple" | "sheets-chart-ui.legendSelectModeType.close" | "sheets-chart-ui.legendVisualMapType.continuous" | "sheets-chart-ui.legendVisualMapType.piecewise" | "sheets-chart-ui.gridlines.text" | "sheets-chart-ui.gridlines.majorGridlines" | "sheets-chart-ui.ticks.majorTick" | "sheets-chart-ui.ticks.tickPosition" | "sheets-chart-ui.ticks.tickLength" | "sheets-chart-ui.styleEditPanel.padAngle" | "sheets-chart-ui.styleEditPanel.useDateAxis" | "sheets-chart-ui.styleEditPanel.rosePie" | "sheets-chart-ui.styleEditPanel.showLabelLine" | "sheets-chart-ui.styleEditPanel.gap" | "sheets-chart-ui.styleEditPanel.useAbsValue" | "sheets-chart-ui.styleEditPanel.wordCloudShape" | "sheets-chart-ui.styleEditPanel.showLabels" | "sheets-chart-ui.styleEditPanel.showDataLabels" | "sheets-chart-ui.styleEditPanel.halfPie" | "sheets-chart-ui.styleEditPanel.pieValScale" | "sheets-chart-ui.styleEditPanel.pieValSuffix" | "sheets-chart-ui.styleEditPanel.pieDigitalFixed" | "sheets-chart-ui.styleEditPanel.reverseAxisOrder" | "sheets-chart-ui.styleEditPanel.showAxisLine" | "sheets-chart-ui.styleEditPanel.labelPosition" | "sheets-chart-ui.styleEditPanel.labelText" | "sheets-chart-ui.styleEditPanel.repeatWordCould" | "sheets-chart-ui.styleEditPanel.labelRotate" | "sheets-chart-ui.styleEditPanel.dateAxisTips" | "sheets-chart-ui.trendline.exp" | "sheets-chart-ui.trendline.linear" | "sheets-chart-ui.trendline.log" | "sheets-chart-ui.trendline.movingAvg" | "sheets-chart-ui.trendline.poly" | "sheets-chart-ui.trendline.pow" | "sheets-chart-ui.trendline.name" | "sheets-chart-ui.trendline.formula" | "sheets-chart-ui.trendline.displayName" | "sheets-chart-ui.trendline.order" | "sheets-chart-ui.trendline.period" | "sheets-chart-ui.trendline.showFormula" | "sheets-chart-ui.trendline.showR2" | "sheets-chart-ui.trendline.addTrendLine" | "sheets-chart-ui.trendline.trendlineType" | "sheets-chart-ui.trendline.trendlineName" | "sheets-chart-ui.trendline.trendlineColor" | "sheets-chart-ui.trendline.trendlineThickness" | "sheets-chart-ui.trendline.trendlineDashType" | "sheets-chart-ui.trendline.r2" | "sheets-chart-ui.chartTypes.line" | "sheets-chart-ui.chartTypes.column" | "sheets-chart-ui.chartTypes.wordCloud" | "sheets-chart-ui.chartTypes.waterfall" | "sheets-chart-ui.chartTypes.bar" | "sheets-chart-ui.chartTypes.scatter" | "sheets-chart-ui.chartTypes.pie" | "sheets-chart-ui.chartTypes.radar" | "sheets-chart-ui.chartTypes.funnel" | "sheets-chart-ui.chartTypes.sankey" | "sheets-chart-ui.chartTypes.boxplot" | "sheets-chart-ui.chartTypes.heatmap" | "sheets-chart-ui.chartTypes.bubble" | "sheets-chart-ui.chartTypes.combination" | "sheets-chart-ui.chartTypes.area" | "sheets-chart-ui.chartTypes.relation" | "sheets-chart-ui.chartTypes.pareto" | "sheets-chart-ui.chartTypes.areaStacked" | "sheets-chart-ui.chartTypes.areaPercentStacked" | "sheets-chart-ui.chartTypes.barStacked" | "sheets-chart-ui.chartTypes.barPercentStacked" | "sheets-chart-ui.chartTypes.donut" | "sheets-chart-ui.chartTypes.stock";
     value: string;
 }[];
 export declare const titleOptions: readonly [{
@@ -96,10 +97,10 @@ export declare const axisLabelRotateOptions: {
     label: string;
     value: string;
 }[];
-export declare const trendlineTypeOptions: {
-    label: string;
+export declare const trendlineTypeOptions: Array<{
+    label: LocaleKey;
     value: ChartTrendlineType;
-}[];
+}>;
 export declare const trendlineToIcon: Record<string, ReactNode>;
 export declare const trendlineOrderOptions: {
     label: string;
@@ -175,11 +176,11 @@ export declare const invalidValueOptions: {
 export declare const labelContentTypeList: LabelContentType[];
 export declare const labelContentOptions: {
     value: string;
-    label: string;
+    label: LocaleKey;
 }[];
 export declare const pieLabelContentOptions: {
     value: string;
-    label: string;
+    label: LocaleKey;
 }[];
 export declare const tickLengthOptions: {
     label: string;