import type { AreaLineStyle, ChartTypeBits, IAllSeriesStyle, InvalidValueType, ISeriesStyle, LinePointShape, RadarShape } from '@univerjs-pro/engine-chart'; import type { IShapeLineStyle } from '@univerjs-pro/engine-shape'; import type { ISlidePlaceholderData } from '@univerjs-pro/slides'; import type { Injector } from '@univerjs/core'; import type { ISlideChartBuilderInfo, ISlideChartBuilderState, ISlideChartBuildOptions, ISlideChartCellValue, ISlideChartDataSource, ISlideChartTextStyle } from './types'; /** * The slide chart builder. It is used to create or update a chart in a slide. * This builder follows the sheets chart facade style, but slide charts use a real two-dimensional array as the data source. * It does not support `addRange()`. * * @example * ```ts * const fPresentation = univerAPI.getActivePresentation(); * const fSlide = fPresentation.getActiveSlide(); * * const chartInfo = fSlide.newChart() * .setChartType(univerAPI.Enum.ChartType.Column) * .setData([ * ['Month', 'Sales'], * ['Jan', 120], * ['Feb', 180], * ]) * .setUseFirstRowAsHeaders(true) * .setAbsolutePosition(80, 120) * .setWidth(480) * .setHeight(300) * .build(); * fSlide.insertChart(chartInfo); * ``` */ export declare class FChartBuilderBase { protected readonly _injector: Injector; /** * @property {string} unitId The presentation id where the chart is located. */ unitId: string; /** * @property {string} subUnitId The slide id where the chart is located. */ subUnitId: string; /** * @property {string} elementId The chart element id. */ elementId: string; /** * @property {string} chartId The chart resource id. */ chartId: string; /** * @property {number} left The x-coordinate of the chart's top-left corner. */ left: number; /** * @property {number} top The y-coordinate of the chart's top-left corner. */ top: number; /** * @property {number} width The chart width in slide pixels. */ width: number; /** * @property {number} height The chart height in slide pixels. */ height: number; /** * @property {ChartTypeBits} chartType The chart type. */ chartType: ChartTypeBits; /** * @property {ISlideChartDataSource} [dataSource] The chart data source. */ dataSource?: ISlideChartDataSource; /** * @property {ISlideChartBuildOptions} options The chart build options. */ options: ISlideChartBuildOptions; /** * @property {ISlidePlaceholderData} [placeholder] The placeholder metadata associated with the chart. */ placeholder?: ISlidePlaceholderData; /** * @property {IShapeLineStyle} [stroke] The chart frame stroke style. */ stroke?: IShapeLineStyle; constructor(unitId: string, subUnitId: string, _injector: Injector, chartId?: string, elementId?: string); /** * Sets the chart data source. * @param {ISlideChartDataSource} dataSource The two-dimensional data source and header/domain options. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setDataSource({ * values: [ * ['Month', 'Sales'], * ['Jan', 120], * ['Feb', 180], * ], * useFirstRowAsHeaders: true, * useFirstColumnAsDomain: true, * }) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setDataSource(dataSource: ISlideChartDataSource): this; /** * Sets the chart data as a two-dimensional array. * @param {ISlideChartCellValue[][]} values The chart source data. The first row/column can be treated as headers/domain by the related options. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([ * ['Month', 'Sales'], * ['Jan', 120], * ]) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setData(values: ISlideChartCellValue[][]): this; /** * Sets whether the first row should be used as series headers. * @param {boolean} enabled Whether to use the first row as headers. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setUseFirstRowAsHeaders(true) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setUseFirstRowAsHeaders(enabled: boolean): this; /** * Sets whether the first column should be used as the category/domain labels. * @param {boolean} enabled Whether to use the first column as domain labels. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setUseFirstColumnAsDomain(true) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setUseFirstColumnAsDomain(enabled: boolean): this; /** * Sets the chart id. * @param {string} chartId The chart resource id. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setChartId('chart-1') * .setData([['Month', 'Sales'], ['Jan', 120]]) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setChartId(chartId: string): this; /** * Sets the slide element id. * @param {string} elementId The slide element id. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setElementId('chart-element-1') * .setData([['Month', 'Sales'], ['Jan', 120]]) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setElementId(elementId: string): this; /** * Sets the chart type. * @param {ChartTypeBits} chartType The chart type. Which can be found from `univerAPI.Enum.ChartType`. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setChartType(univerAPI.Enum.ChartType.Column) * .setData([['Month', 'Sales'], ['Jan', 120]]) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setChartType(chartType: ChartTypeBits): this; /** * Sets the chart position by absolute slide coordinates. * @param {number} left The x-coordinate of the chart's top-left corner. * @param {number} top The y-coordinate of the chart's top-left corner. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setPosition(80, 120) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setPosition(left: number, top: number): this; /** * Sets the chart position by absolute slide coordinates. * @param {number} left The x-coordinate of the chart's top-left corner. * @param {number} top The y-coordinate of the chart's top-left corner. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setAbsolutePosition(80, 120) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setAbsolutePosition(left: number, top: number): this; /** * Sets the chart size in slide pixels. * @param {number} width The chart width. * @param {number} height The chart height. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setSize(480, 300) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setSize(width: number, height: number): this; /** * Sets the chart width in slide pixels. * @param {number} width The chart width. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setWidth(480) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setWidth(width: number): this; /** * Sets the chart height in slide pixels. * @param {number} height The chart height. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setHeight(300) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setHeight(height: number): this; /** * Sets the placeholder metadata for the chart element. * @param {ISlidePlaceholderData} [placeholder] The placeholder metadata. Pass `undefined` to clear it. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setPlaceholder(undefined) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setPlaceholder(placeholder?: ISlidePlaceholderData): this; /** * Sets the chart frame stroke style. * @param {IShapeLineStyle} [stroke] The stroke style. Pass `undefined` to clear it. * @param {string} [stroke.color] The stroke color. * @param {number} [stroke.width] The stroke width. * @param {number} [stroke.opacity] The stroke opacity. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setStroke({ color: '#d1d5db', width: 1 }) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setStroke(stroke?: IShapeLineStyle): this; /** * Sets options for the chart. A blank path merges the value into the root options object. * @param {string} path The option path, such as `'title.content'` or `'legend.position'`. * @param {unknown} value The option value. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([ * ['Month', 'Sales'], * ['Jan', 120], * ]) * .setOptions('title.content', 'Sales') * .setOptions('legend.position', univerAPI.Enum.LegendPositionEnum.Right) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setOptions(path: string, value: unknown): this; /** * Sets the chart theme. * @param {string} theme The registered chart theme name. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setTheme('default') * .build(); * fSlide.insertChart(chartInfo); * ``` */ setTheme(theme: string): this; /** * Sets the chart title text. * @param {string} title The chart title text. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setTitle('Sales') * .build(); * fSlide.insertChart(chartInfo); * ``` */ setTitle(title: string): this; /** * Sets the x-axis title text. * @param {string} title The x-axis title text. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setXAxisTitle('Month') * .build(); * fSlide.insertChart(chartInfo); * ``` */ setXAxisTitle(title: string): this; /** * Sets the y-axis title text. * @param {string} title The y-axis title text. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setYAxisTitle('Sales') * .build(); * fSlide.insertChart(chartInfo); * ``` */ setYAxisTitle(title: string): this; /** * Sets the right y-axis title text. * @param {string} title The right y-axis title text. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setRightYAxisTitle('Target') * .build(); * fSlide.insertChart(chartInfo); * ``` */ setRightYAxisTitle(title: string): this; /** * Sets the x-axis title text style. * @param {ISlideChartTextStyle} textStyle The x-axis title text style. * @param {string} [textStyle.content] The text content. * @param {number} [textStyle.fontSize] The font size. * @param {string} [textStyle.fontColor] The font color. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setXAxisTextStyle({ content: 'Month', fontSize: 12, fontColor: '#111827' }) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setXAxisTextStyle(textStyle: ISlideChartTextStyle): this; /** * Sets the y-axis title text style. * @param {ISlideChartTextStyle} textStyle The y-axis title text style. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setYAxisTextStyle({ content: 'Sales', fontSize: 12 }) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setYAxisTextStyle(textStyle: ISlideChartTextStyle): this; /** * Sets the right y-axis title text style. * @param {ISlideChartTextStyle} textStyle The right y-axis title text style. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setRightYAxisTextStyle({ content: 'Target', fontSize: 12 }) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setRightYAxisTextStyle(textStyle: ISlideChartTextStyle): this; /** * Sets how invalid values are handled in the chart. * @param {InvalidValueType} invalidValueType The invalid value strategy. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', null]]) * .setInvalidValueStrategy('zero') * .build(); * fSlide.insertChart(chartInfo); * ``` */ setInvalidValueStrategy(invalidValueType: InvalidValueType): this; /** * Sets the axis pointer style. * @param {ISlideChartBuildOptions['axisPointer']} style The axis pointer style. * @param {string} [style.indicatorLineType] The indicator line type. * @param {ChartBorderDashType} [style.indicatorLineColor] The indicator line color or dash type. * @param {string} [style.indicatorLabelColor] The indicator label background color. * @param {string} [style.indicatorLabelTextColor] The indicator label text color. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setAxisPointerStyle({ indicatorLabelTextColor: '#111827' }) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setAxisPointerStyle(style: ISlideChartBuildOptions['axisPointer']): this; /** * Sets styles for all chart series. * @param {Partial} allSeriesStyle The style applied to all series. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setAllSeriesStyle({ color: '#ff0000' }) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setAllSeriesStyle(allSeriesStyle: Partial): this; /** * Sets the style of one chart series. * @param {number|string} index The series index or id. * @param {ISeriesStyle} seriesStyle The series style. * @returns {FChartBuilderBase} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setSeriesStyle(0, { color: '#ff0000' }) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setSeriesStyle(index: number | string, seriesStyle: ISeriesStyle): this; /** * Returns a line chart builder initialized from this builder. * @returns {SlideLineChartBuilder} A line chart builder. */ asLineChart(): SlideLineChartBuilder; /** * Returns a pie chart builder initialized from this builder. * @returns {SlidePieChartBuilder} A pie chart builder. */ asPieChart(): SlidePieChartBuilder; /** * Returns a radar chart builder initialized from this builder. * @returns {SlideRadarChartBuilder} A radar chart builder. */ asRadarChart(): SlideRadarChartBuilder; /** * Builds the chart builder info. This method does not automatically draw the chart on the slide. * A new chart must be inserted via `fSlide.insertChart(chartInfo)`, and an existing chart should be updated via `fSlide.updateChart(chartInfo)`. * @returns {ISlideChartBuilderInfo} The chart builder info. */ build(): ISlideChartBuilderInfo; protected _hydrate(state: ISlideChartBuilderState): void; protected _getState(): ISlideChartBuilderState; } /** * The builder for creating a line chart. * @hideconstructor */ export declare class SlideLineChartBuilder extends FChartBuilderBase { /** * @property {AreaLineStyle} [lineStyle] The line style of the line chart. */ lineStyle?: AreaLineStyle; /** * @property {LinePointShape} [dataPointShape] The data point shape of the line chart. */ dataPointShape?: LinePointShape; /** * @property {string} [dataPointColor] The data point color of the line chart. */ dataPointColor?: string; /** * @property {number} [dataPointSize] The data point size of the line chart. */ dataPointSize?: number; constructor(state: ISlideChartBuilderState, injector: Injector); /** * Sets the line style of the line chart. * @param {AreaLineStyle} lineStyle The line style. * @returns {SlideLineChartBuilder} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .asLineChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setLineStyle('step') * .build(); * fSlide.insertChart(chartInfo); * ``` */ setLineStyle(lineStyle: AreaLineStyle): this; /** * Sets the shape of data points in the line chart. * @param {LinePointShape} dataPointShape The point shape. * @returns {SlideLineChartBuilder} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .asLineChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setDataPointShape(univerAPI.Enum.LinePointShape.Circle) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setDataPointShape(dataPointShape: LinePointShape): this; /** * Sets the data point color of the line chart. * @param {string} dataPointColor The data point color. * @returns {SlideLineChartBuilder} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .asLineChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setDataPointColor('#ff0000') * .build(); * fSlide.insertChart(chartInfo); * ``` */ setDataPointColor(dataPointColor: string): this; /** * Sets the data point size of the line chart. * @param {number} dataPointSize The data point size. * @returns {SlideLineChartBuilder} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .asLineChart() * .setData([['Month', 'Sales'], ['Jan', 120]]) * .setDataPointSize(8) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setDataPointSize(dataPointSize: number): this; /** * Builds the line chart builder info. * @returns {ISlideChartBuilderInfo} The chart builder info. */ build(): ISlideChartBuilderInfo; } /** * The builder for creating a pie chart. * @hideconstructor */ export declare class SlidePieChartBuilder extends FChartBuilderBase { /** * @property {number} [doughnutHole] The doughnut hole size of the pie chart. */ doughnutHole?: number; /** * @property {string} [borderColor] The border color of the pie chart. */ borderColor?: string; /** * @property {boolean} [hasPaddingAngle] Whether the pie chart has padding angle. */ hasPaddingAngle?: boolean; /** * @property {boolean} [isHalfPie] Whether the pie chart is rendered as a half pie. */ isHalfPie?: boolean; /** * @property {boolean} [rosePie] Whether the pie chart is rendered as a rose pie. */ rosePie?: boolean; /** * @property {boolean} [showLabelLine] Whether the pie chart shows label lines. */ showLabelLine?: boolean; constructor(state: ISlideChartBuilderState, injector: Injector); /** * Sets the size of the hole in the center of the pie chart as a percentage of the chart size. * @param {number} doughnutHole The doughnut hole size, usually from 0 to 1. * @returns {SlidePieChartBuilder} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .asPieChart() * .setData([['Type', 'Value'], ['A', 10], ['B', 20]]) * .setDoughnutHole(0.5) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setDoughnutHole(doughnutHole: number): this; /** * Sets the border color of the pie chart. * @param {string} borderColor The border color. * @returns {SlidePieChartBuilder} This builder, for chaining. */ setBorderColor(borderColor: string): this; /** * Sets whether the pie chart has a padding angle. * @param {boolean} hasPaddingAngle Whether the pie chart has a padding angle. * @returns {SlidePieChartBuilder} This builder, for chaining. */ setHasPaddingAngle(hasPaddingAngle: boolean): this; /** * Sets whether the pie chart is rendered as a half pie. * @param {boolean} isHalfPie Whether the pie chart is a half pie. * @returns {SlidePieChartBuilder} This builder, for chaining. */ setIsHalfPie(isHalfPie: boolean): this; /** * Sets whether the pie chart is rendered as a rose pie. * @param {boolean} rosePie Whether the pie chart is a rose pie. * @returns {SlidePieChartBuilder} This builder, for chaining. */ setRosePie(rosePie: boolean): this; /** * Sets whether the pie chart shows label lines. * @param {boolean} showLabelLine Whether to show label lines. * @returns {SlidePieChartBuilder} This builder, for chaining. */ setShowLabelLine(showLabelLine: boolean): this; /** * Builds the pie chart builder info. * @returns {ISlideChartBuilderInfo} The chart builder info. */ build(): ISlideChartBuilderInfo; } /** * The builder for creating a radar chart. * @hideconstructor */ export declare class SlideRadarChartBuilder extends FChartBuilderBase { /** * @property {RadarShape} [shape] The radar chart shape. */ shape?: RadarShape; /** * @property {boolean} [fill] Whether the radar chart area is filled. */ fill?: boolean; constructor(state: ISlideChartBuilderState, injector: Injector); /** * Sets the shape of the radar chart. * @param {RadarShape} shape The radar shape. * @returns {SlideRadarChartBuilder} This builder, for chaining. * * @example * ```ts * const chartInfo = fSlide.newChart() * .asRadarChart() * .setData([['Metric', 'Value'], ['A', 10], ['B', 20]]) * .setShape(univerAPI.Enum.RadarShape.Polygon) * .build(); * fSlide.insertChart(chartInfo); * ``` */ setShape(shape: RadarShape): this; /** * Sets whether the radar chart area is filled. * @param {boolean} fill Whether the radar chart area is filled. * @returns {SlideRadarChartBuilder} This builder, for chaining. */ setFill(fill: boolean): this; /** * Builds the radar chart builder info. * @returns {ISlideChartBuilderInfo} The chart builder info. */ build(): ISlideChartBuilderInfo; }