@univerjs-pro/sheets-chart-ui 0.5.1 → 0.5.2

package/lib/types/commands/commands/sheets-chart.command.d.ts

@@ -1,4 +1,4 @@
-import { ChartTypeBits } from '@univerjs-pro/sheets-chart';
+import { IChartUpdateConfigMutationParams, ChartTypeBits } from '@univerjs-pro/sheets-chart';
 import { ICommand, IRange } from '@univerjs/core';
 import { ISheetCommandSharedParams } from '@univerjs/sheets';
 export interface IInsertChartCommandParams extends ISheetCommandSharedParams {
@@ -6,6 +6,16 @@ export interface IInsertChartCommandParams extends ISheetCommandSharedParams {
     chartId: string;
     theme?: string;
     chartType: ChartTypeBits;
+    position?: {
+        x: number;
+        y: number;
+    };
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    borderColor?: string;
+    config?: IChartUpdateConfigMutationParams;
+    isRowDirection?: boolean;
 }
 /**
  */

package/lib/types/const.d.ts

@@ -6,3 +6,4 @@ export declare const TitleOrLegendPadding = 12;
 export declare const TitleDefaultStartPosition = 8;
 export declare const defaultChartPadding = 14;
 export declare const TitleLineHeightBase = 1.2;
+export declare const AxisLabelMaxPercent = 0.15;

package/lib/types/facade/chart-builder/builder-util.d.ts

@@ -0,0 +1,4 @@
+import { ChartTypeBits, IChartUpdateConfigMutationParams } from '@univerjs-pro/sheets-chart';
+import { IChartBuildOptions } from './chart-builder-base';
+export declare const setPropertyIfExist: (spec: Record<string, any>, path: string, value: unknown) => void;
+export declare const transformBuildInfoToMutation: (unitId: string, chartId: string, chartType: ChartTypeBits, buildInfo?: IChartBuildOptions) => undefined | IChartUpdateConfigMutationParams;

package/lib/types/facade/chart-builder/chart-builder-base.d.ts

@@ -0,0 +1,568 @@
+import { AreaLineStyle, ChartBorderDashType, ChartTypeBits, IAllSeriesStyle, IAxisOptions, InvalidValueType, ISeriesStyle, LegendPositionEnum, SelectModeEnum, TitlePositionEnum } from '@univerjs-pro/sheets-chart';
+import { Injector, IRange, Workbook, FBase } from '@univerjs/core';
+export interface IChartBuilderInfo {
+    unitId: string;
+    subUnitId: string;
+    chartId: string;
+    range: IRange | undefined;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    chartType: ChartTypeBits;
+    options: IChartBuildOptions;
+    isRowDirection: boolean;
+}
+export interface IChartTextStyle {
+    /**
+     * @property {string} [titleContent] The content of the chart title.
+     */
+    content?: string;
+    /**
+     * @property {number} [font] The font family for the chart title.
+     */
+    font?: number;
+    /**
+     * @property {number} [fontSize] The font size for the chart title.
+     */
+    fontSize?: number;
+    /**
+     * @property {string} [fontColor] The font color for the chart title.
+     */
+    fontColor?: string;
+    /**
+     * @property {string} [fontStyle] The font style for the chart title.
+     */
+    fontStyle?: string;
+    /**
+     * @property {string} [fontWeight] The font weight for the chart title.
+     */
+    fontWeight?: string;
+    /**
+     * @property {string} [alignment] The alignment of the chart title.
+     */
+    alignment?: string;
+}
+export interface IChartBuildOptions {
+    /**
+     * @property {string} [title] The title of the chart.
+     */
+    title?: {
+        /**
+         * @property {string} [titlePosition] The position of the chart title.
+         */
+        position?: TitlePositionEnum;
+    } & IChartTextStyle;
+    /**
+     * @property {string} [legend] The legend of the chart.
+     */
+    legend?: {
+        /**
+         * @property {string} [legendPosition] The position of the legend.The possible values are 'top', 'bottom', 'left', 'right' & 'hide'.
+         */
+        position?: LegendPositionEnum;
+        /**
+         * @property {number} [fontSize] The font size of the legend.
+         */
+        fontSize?: number;
+        /**
+         * @property {string} [color] The font color of the legend.
+         */
+        color?: string;
+        /**
+         * @property {string} [bold] The font style of the legend.
+         */
+        bold?: boolean;
+        /**
+         * @property {string} [italic] The font weight of the legend.
+         */
+        italic?: boolean;
+        /**
+         * @property {SelectModeEnum} [selectMode] The select mode of the legend.The possible values are 'single', 'multiple' & 'close'.
+         */
+        selectMode?: SelectModeEnum;
+    };
+    /**
+     * @property {string} [xAxisTitle] The x-axis title of the chart.
+     * @example
+     * ```ts
+     * chartBuilder.setOptions('xAxisTitle.content', 'xAxis Title text')
+     * .setOptions('xAxisTitle.font', 1)
+     * .setOptions('xAxisTitle.fontSize', 12)
+     * .setOptions('xAxisTitle.fontColor', '#ff0000')
+     * .build();
+     * ```
+     */
+    xAxisTitle?: IChartTextStyle;
+    /**
+     * @property {string} [rightYAxisTitle] The right y-axis title of the chart.
+     */
+    yAxisTitle?: IChartTextStyle;
+    /**
+     * @property {string} [rightYAxisTitle] The right y-axis title of the chart.
+     */
+    rightYAxisTitle?: IChartTextStyle;
+    xAxis?: IAxisOptions;
+    yAxis?: IAxisOptions;
+    yRightAxis?: IAxisOptions;
+    axisPointer?: {
+        /**
+         * @property {string} [indicatorLineType] The line type of the axis pointer.
+         */
+        indicatorLineType?: string;
+        /**
+         * @property {ChartBorderDashType} [indicatorLineColor] The line color of the axis pointer.The maybe values are 'solid', 'dotted', 'dashed'.
+         */
+        indicatorLineColor?: ChartBorderDashType;
+        /**
+         * @property {string} [indicatorLabelColor] The line width of the axis pointer.
+         */
+        indicatorLabelColor?: string;
+        /**
+         * @property {string} [indicatorLabelTextColor] The font color of the axis pointer.
+         */
+        indicatorLabelTextColor?: string;
+    };
+    allSeriesStyle?: IAllSeriesStyle;
+    seriesStyleMap?: {
+        [id: string]: ISeriesStyle;
+    };
+    /**
+     * @property {string} [area] The area of line/area chart.
+     */
+    area?: {
+        lineStyle: AreaLineStyle;
+    };
+    backgroundColor?: string;
+    borderColor?: string;
+    gradientFill?: boolean;
+    theme?: string;
+    invalidValueType?: InvalidValueType;
+}
+export declare class FChartBuilderBase extends FBase {
+    protected readonly _workbook: Workbook;
+    protected readonly _injector: Injector;
+    unitId: string;
+    subUnitId: string;
+    chartId: string;
+    range: IRange | undefined;
+    sourceSheetName: string | undefined;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    chartType: ChartTypeBits;
+    options: IChartBuildOptions;
+    transposeRowsAndColumns: boolean;
+    constructor(unitId: string, subUnitId: string, workbook: Workbook, injector: Injector, chartId?: string);
+    /**
+     * Gets the chart type of the chart this builder modifies.
+     * @description The chart type of the chart this builder modifies. The chart type (ChartTypeBits) can be found from package @univerjs-pro/sheets-chart.
+     * Please pay attention to the type of the chart you are creating,  a Pie chart have a property of Doughnut is donut chart, and a Pie chart have a property of Rose is rose pie chart.But the chart builder will not change the chart type to the corresponding chart type.
+     * @returns {ChartTypeBits} ChartType - The chart type of the chart this builder modifies.
+     */
+    getChartType(): ChartTypeBits;
+    /**
+     * Adds a range to the chart this builder modifies
+     * @param {IRange | string} range The range string or object to add for chart source data.
+     * @returns {FChartBuilderBase} -this builder, for chaining
+     */
+    addRange(range: IRange | string): FChartBuilderBase;
+    /**
+     * Clears the range from the chart this builder modifies
+     * @returns {FChartBuilderBase} -this builder, for chaining
+     */
+    clearRange(): FChartBuilderBase;
+    /**
+     * Sets the position, changing where the chart appears on the sheet. anchorRowPos and anchorColPos are 0-indexed.This api can only work in the active sheet.
+     * @description The chart's start anchor position is the top left-hand corner of the chart. The rowOffset and columnOffset are the pixel offsets from the anchor position.
+     * @param {number} anchorRowPos The chart's top side is anchored in this row.
+     * @param {number} anchorColPos The chart's left side is anchored in this column.
+     * @param {number} rowOffset The chart's top left-hand corner is offset by this many pixels.
+     * @param {number} columnOffset The chart's lower left-hand corner is offset by this many pixels.
+     * @returns -this builder, for chaining
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *  .setChartType(ChartTypeBits.Column)
+     *  // set the chart's top side is anchored in row 2, left side is anchored in column 5, and the chart's top left-hand corner is offset by 20 pixels.
+     *  .setPosition(2, 5, 20, 20)
+     *  .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setPosition(anchorRowPos: number, anchorColPos: number, rowOffset: number, columnOffset: number): FChartBuilderBase;
+    /**
+     * Sets the position, changing where the chart appears on the sheet by pixel.
+     * @description The chart's start anchor position is the top left-hand corner of the chart. This api is opposite to setPosition.
+     * @param {number} x The x-coordinate of the chart's top left-hand corner.
+     * @param {number} y The y-coordinate of the chart's top left-hand corner.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * .setChartType(ChartTypeBits.Column)
+     * // set the chart's top left-hand corner is at (100, 200) pixels.
+     * .setAbsolutePosition(100, 200)
+     * .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setAbsolutePosition(x: number, y: number): FChartBuilderBase;
+    /**
+     * The type of chart to create.
+     * @param {ChartTypeBits} chartType The type of chart to create.Which can be found from package @univerjs-pro/sheets-chart.
+     * @description The type of chart to create. The following are the possible values: Line,Column,ColumnStacked,ColumnPercentStacked,Bar,BarStacked,BarPercentStacked,Pie,Doughnut,Area,AreaStacked,AreaPercentStacked,Radar,Scatter,Combination
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *   .setChartType(ChartTypeBits.Column)
+     *   .setPosition(1, 1, 0, 0)
+     *   .build();
+     * fSheet.insertChart(chartInfo);
+     * // update chart type to line
+     * const updateBuilder = fSheet.newChart();
+     * const updateChartInfo = updateBuilder.setChartType(ChartTypeBits.Line).build();
+     * fSheet.updateChart(updateChartInfo);
+     * ```
+     */
+    setChartType(chartType: ChartTypeBits): FChartBuilderBase;
+    /**
+     * Sets the width of the chart in pixels.
+     * @param {number} width The width of the chart in pixels.
+     * @returns -this builder, for chaining.
+     */
+    setWidth(width: number): FChartBuilderBase;
+    /**
+     * Sets the height of the chart in pixels.
+     * @param {number} height The height of the chart in pixels.
+     * @returns -this builder, for chaining.
+     */
+    setHeight(height: number): FChartBuilderBase;
+    /**
+     * The options for the chart. This function will overwrite  existing options and merge new options property.
+     * @param {string} optionPath The path of the option to set. A '' path means the root of the options object.
+     * @param  {IChartBuildOptions[T] | IChartBuildOptions} optionVal The value to set. Undefined value will be ignore , and null means delete the property.If a path is '', the value must be the whole options object.
+     * @returns The builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fWorkSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fWorkSheet.newChart().asPieChart();
+     *
+     * const chartBuilderInfo1 = chartBuilder
+     *     .addRange('A1:D6')
+     *     .setOptions('title.content', 'mcc')
+     *     .setOptions('legend.position', 'right')
+     *      .setDoughnutHole(0.5)
+     *      .setHasPaddingAngle(true)
+     *      .setRosePie(true)
+     *      .setIsHalfPie(true)
+     *     .build();
+     * // setOptions can be replaced by setOptions('', { ... })
+     * const chartBuilderInfo2 = chartBuilder
+     *     .addRange('A1:D6')
+     *     .setOptions('', {
+     *     "title": {
+     *         "content": "mcc"
+     *     },
+     *     "legend": {
+     *         "position": "right"
+     *     },
+     *     "pie": {
+     *         "doughnutHole": 0.5,
+     *         "hasPaddingAngle": true,
+     *         "isHalfPie": true,
+     *         "rosePie": true
+     *     }
+     * }).build();
+     * fWorkSheet.insertChart(chartBuilderInfo1);
+     * // or they are same effect
+     * // fWorkSheet.insertChart(chartBuilderInfo2);
+     */
+    setOptions<T extends keyof IChartBuildOptions>(optionPath: T | '', optionVal: IChartBuildOptions[T] | IChartBuildOptions): FChartBuilderBase;
+    /**
+     * Sets whether to transpose the rows and columns of the chart.
+     * @param {boolean} transposeRowsAndColumns Whether to transpose the rows and columns of the chart.The default value is false.
+     * @returns -this builder, for chaining.
+     */
+    setTransposeRowsAndColumns(transposeRowsAndColumns: boolean): FChartBuilderBase;
+    /**
+     * Sets the theme of the chart. If the theme name not registered, a default theme will be used.
+     * @param {string} theme The theme name of the chart.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *  .setChartType(ChartTypeBits.Column)
+     *  .setPosition(1, 1, 0, 0)
+     *  .setTheme('univer1')
+     *  .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setTheme(theme: string): FChartBuilderBase;
+    /**
+     * Sets the title of the chart x-axis.
+     * @param {string} title The title of the chart x-axis.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *   .setChartType(ChartTypeBits.Column)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setXAxisTitle('xAxis Title text')
+     *   .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setXAxisTitle(title: string): FChartBuilderBase;
+    /**
+     * Sets the title of the chart y-axis.
+     * @param {string} title The title of the chart y-axis.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *  .setChartType(ChartTypeBits.Line)
+     *  .setPosition(1, 1, 0, 0)
+     *  .setYAxisTitle('yAxis Title text')
+     *  .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setYAxisTitle(title: string): FChartBuilderBase;
+    /**
+     * Sets the title of the chart right y-axis.
+     * @param {string} title The title of the chart right y-axis.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * .setChartType(ChartTypeBits.Line)
+     * .setPosition(1, 1, 0, 0)
+     * .setRightYAxisTitle('rightYAxis Title text')
+     * .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setRightYAxisTitle(title: string): FChartBuilderBase;
+    /**
+     * Sets the text style for the chart x-axis.
+     * @param {IChartTextStyle} textStyle The text style for the chart x-axis.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *  .setChartType(ChartTypeBits.Column)
+     * .setPosition(1, 1, 0, 0)
+     * .setXAxisTextStyle({ content: 'xAxis Title text', fontSize: 12, fontColor: '#ff0000' })
+     * .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setXAxisTextStyle(textStyle: IChartTextStyle): FChartBuilderBase;
+    /**
+     * Sets the text style for the chart y-axis.
+     * @param {IChartTextStyle} textStyle The text style for the chart y-axis.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * .setChartType(ChartTypeBits.Line)
+     * .setPosition(1, 1, 0, 0)
+     * .setYAxisTextStyle({ content: 'yAxis Title text', fontSize: 12, fontColor: '#ff0000' })
+     * .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setYAxisTextStyle(textStyle: IChartTextStyle): FChartBuilderBase;
+    /**
+     * Sets the text style for the chart right y-axis. Only works in charts have right y-axis.
+     * @param {IChartTextStyle} textStyle The text style for the chart right y-axis.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * .setChartType(ChartTypeBits.Line)
+     * .setPosition(1, 1, 0, 0)
+     * .setRightYAxisTextStyle({ content: 'rightYAxis Title text', fontSize: 12, fontColor: '#ff0000' })
+     * .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setRightYAxisTextStyle(textStyle: IChartTextStyle): FChartBuilderBase;
+    /**
+     * Sets how to handle invalid data in the chart.The possible values are 'zero', 'break' & 'link'.
+     * @description The default value is 'zero'. It means that invalid data will be treated as zero. 'break' means that the chart will have a gap where the invalid data is. 'link' means that the chart will connect the data points on either side of the invalid data.
+     * @param {InvalidValueType} invalidValueType The type of invalid value to use.
+     * @returns -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * .setChartType(ChartTypeBits.Line)
+     * .setPosition(1, 1, 0, 0)
+     * .setInvalidValueAs(InvalidValueType.Zero)
+     * .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setInvalidValueStrategy(invalidValueType: InvalidValueType): FChartBuilderBase;
+    /**
+     * Sets the axis pointer style
+     * @param {IChartBuildOptions['axisPointer']} style The style for the axis pointer.
+     * @typedef AxisPointerStyle
+     * @property {string} [indicatorLabelColor] The line color of the axis pointer.
+     * @property {string} [indicatorLabelTextColor] The font color of the axis pointer.
+     * @property {ChartBorderDashType} [indicatorLineType] The line type of the axis pointer.
+     * @property {string} [indicatorLineColor] The line width of the axis pointer.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *  .setChartType(ChartTypeBits.Line)
+     *  .setPosition(1, 1, 0, 0)
+     *  .setAxisPointerStyle({
+     *      indicatorLabelColor: '#ff0000',
+     *      indicatorLineType: ChartBorderDashType.Solid,
+     *      indicatorLineColor: '#00ff00',
+     *      indicatorLabelTextColor: '#0000ff',
+     *  })
+     *  .build();
+     * fSheet.insertChart(chartInfo);
+     *
+     * // a AxisPointerStyle can be defined like following:
+     *  const chartInfo = chartBuilder.setOptions('axisPointer.indicatorLineColor', '#ff0000')
+     * .setOptions('axisPointer.indicatorLineType', ChartBorderDashType.Solid)
+     * .setOptions('axisPointer.indicatorLineColor', '#00ff00')
+     * .setOptions('axisPointer.indicatorLabelTextColor', '#0000ff')
+     * .build();
+     * ```
+     */
+    setAxisPointerStyle(style: IChartBuildOptions['axisPointer']): FChartBuilderBase;
+    /**
+     * Sets styles for all series.
+     * @typedef allSeriesStyle
+     * @property {ChartTypeBits} chartType The chart type of the series.It only works in combination chart, and the value must be one of ChartTypeBits.Line | ChartTypeBits.Column | ChartTypeBits.Area;
+     * @property {boolean} rightYAxis Use the right y-axis for the series.
+     * @property {string} color The color of the series.
+     * @property {number} fillOpacity The opacity of the series fill.
+     * @property {string} border.color The color of the series border.
+     * @property {number} border.opacity The opacity of the series border.
+     * @property {number} border.width The width of the series border.
+     * @property {ChartBorderDashType} border.dashType The dash type of the series border.
+     * @property {ISeriesLabelStyle} label The label style of the series.
+     * @property {IPointStyle} point The point style of the series.
+     * @property {IDataPointStyle} dataPoints The data point style of the series.Radar chart does not support this property.
+     * @param {allSeriesStyle} allSeriesStyle The style for all series.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *    .setChartType(ChartTypeBits.Line)
+     *    .setPosition(1, 1, 0, 0)
+     *    .setALLSeriesStyle({
+     *      chartType: ChartTypeBits.Line,
+     *      rightYAxis: false,
+     *      color: '#ff0000',
+     *      fillOpacity: 0.5,
+     *      border: {
+     *          color: '#00ff00',
+     *          opacity: 0.5,
+     *          width: 1,
+     *          dashType: ChartBorderDashType.Solid,
+     *       })
+     *    .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    setAllSeriesStyle(allSeriesStyle: IAllSeriesStyle): FChartBuilderBase;
+    /**
+     * Sets the series style by series index.
+     * @description Like setALLSeriesStyle, this difference is the style only set for the provide sty
+     * @param {number | string} index The index of the series to set the style for.
+     * @param {ISeriesStyle} seriesStyle The style for the series.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     * @example
+     * ```ts
+     *  const fWorkbook = univerAPI.getActiveWorkbook();
+     *  const fSheet = fWorkbook.getActiveSheet();
+     *  const chartBuilder = fSheet.newChart();
+     *  const chartInfo = chartBuilder.addRange('A1:D6').setChartType(2).setPosition(1, 1, 0, 0).build();
+     *  const fChart = await fSheet.insertChart(chartInfo);
+     *  // should wait the chart rendered
+     *  setTimeout( () => {
+     *      if (fChart) {
+     *          const chartBuilder = fSheet.newChart(fChart);
+     *          // get the series data
+     *          const first = fChart.getSeriesData()[0];
+     *          chartBuilder.setSeriesStyle(first.index, {
+     *              color: '#ff0000',
+     *          }).build();
+     *          fSheet.updateChart(chartBuilder);
+     *      }
+     *  }
+     *  , 1000);
+     * ```
+     */
+    setSeriesStyle(index: number | string, seriesStyle: ISeriesStyle): FChartBuilderBase;
+    /**
+     * Builds the chart to reflect all changes made to it.
+     * @description This method does not automatically draw the chart on top of the spreadsheet. A new chart must be inserted via sheet.insertChart(chart), and an existing chart should be updated via sheet.updateChart(chart).
+     * @returns {IChartBuilderInfo} -The chart builder info.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart();
+     * const chartInfo = chartBuilder.addRange('A1:D6')
+     *    .setChartType(ChartTypeBits.Column)
+     *    .setPosition(1, 1, 0, 0)
+     *    .setWidth(600)
+     *    .setHeight(400)
+     *    .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    build(): IChartBuilderInfo;
+}

package/lib/types/facade/chart-builder/line-chart-builder.d.ts

@@ -0,0 +1,55 @@
+import { AreaLineStyle, LinePointShape } from '@univerjs-pro/sheets-chart';
+import { Injector, Workbook } from '@univerjs/core';
+import { IChartBuilderInfo, FChartBuilderBase } from './chart-builder-base';
+export declare class LineChartBuilder extends FChartBuilderBase {
+    lineStyle: AreaLineStyle;
+    dataPointShape: LinePointShape;
+    dataPointColor: string;
+    dataPointSize: number;
+    constructor(unitId: string, subUnitId: string, workbook: Workbook, injector: Injector, chartId?: string);
+    /**
+     * The line style of the area chart.
+     * @param lineStyle
+     * @returns - The builder, for chaining.
+     */
+    setLineStyle(lineStyle: AreaLineStyle): LineChartBuilder;
+    /**
+     * The shape of the data point in the line chart.
+     * @param dataPointShape
+     * @returns - The builder, for chaining.
+     */
+    setDataPointShape(dataPointShape: LinePointShape): LineChartBuilder;
+    /**
+     * The color of the data point in the line chart.
+     * @param dataPointColor
+     * @returns - The builder, for chaining.
+     */
+    setDataPointColor(dataPointColor: string): LineChartBuilder;
+    /**
+     * The size of the data point in the line chart.
+     * @param dataPointSize
+     * @returns - The builder, for chaining.
+     */
+    setDataPointSize(dataPointSize: number): LineChartBuilder;
+    /**
+     * Builds the chart to reflect all changes made to it.
+     * @description This method does not automatically draw the chart on top of the spreadsheet. A new chart must be inserted via sheet.insertChart(chart), and an existing chart should be updated via sheet.updateChart(chart).
+     * @returns {IChartBuilderInfo} The chart builder info.
+     * @example
+     * ```ts
+     * const fWorkbook = univerAPI.getActiveWorkbook();
+     * const fSheet = fWorkbook.getActiveSheet();
+     * const chartBuilder = fSheet.newChart().asLineChart();
+     * const chartInfo = chartBuilder.addRange('A1:B8')
+     *  .setLineStyle('smooth') // AreaLineStyle.Smooth
+     *  .setDataPointShape('triangle')
+     *  .setDataPointSize(10)
+     *  .build();
+     * fSheet.insertChart(chartInfo);
+     * ```
+     */
+    build(): IChartBuilderInfo;
+}
+export declare class LineChartBuilderMixin extends FChartBuilderBase {
+    asLineChart(): LineChartBuilder;
+}