Charts

export enum ChartAttributeBits {
  Stack = 1 << 30,
  PercentStack = 1 << 29 | ChartAttributeBits.Stack,
  Horizontal = 1 << 28,
}

export enum ChartTypeBits {
  None = 0,
  Line = 1 << 1,
  Column = 1 << 2,
  ColumnStacked = ChartTypeBits.Column | ChartAttributeBits.Stack,
  ColumnPercentStacked = ChartTypeBits.Column | ChartAttributeBits.PercentStack,
  Bar = 1 << 2 | ChartAttributeBits.Horizontal,
  BarStacked = ChartTypeBits.Bar | ChartAttributeBits.Stack,
  BarPercentStacked = ChartTypeBits.Bar | ChartAttributeBits.PercentStack,
  Pie = 1 << 3,
  Doughnut = 1 << 8 | ChartTypeBits.Pie,
  Area = 1 << 4,
  AreaStacked = ChartTypeBits.Area | ChartAttributeBits.Stack,
  AreaPercentStacked = ChartTypeBits.Area | ChartAttributeBits.PercentStack,
  Radar = 1 << 5,
  Scatter = 1 << 6,
  Combination = 1 << 7,
}

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
   * ```typescript
   * 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
  }
  /**
   * @property {string} [backgroundColor] The background color of the chart.
   */
  backgroundColor?: string
  /**
   * @property {string} [borderColor] The border color of the chart.
   */
  borderColor?: string
  /**
   * @property {boolean} [gradientFill] Whether to use gradient fill.This property does not work in line charts.
   */
  gradientFill?: boolean
  /**
   * @property {string} [theme] The theme of the chart.
   */
  theme?: string
  /**
   * @property {InvalidValueType} [invalidValueType] The display mode for empty cells.
   */
  invalidValueType?: InvalidValueType
}

const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Create a line chart
const chartInfo = fWorksheet.newChart()
  // As a line chart
  .asLineChart()
  // Set the data source A1:D6
  .addRange('A1:D6')
  // Set the starting position to the upper-left corner of cell B2
  .setPosition(1, 1, 0, 0)
  // Set the indicator line style
  .setAxisPointerStyle({
    indicatorLabelColor: '#ff0000',
    indicatorLineType: univerAPI.Enum.ChartBorderDashType.Solid,
    indicatorLineColor: '#00ff00',
    indicatorLabelTextColor: '#0000ff',
  })
  // Set the data point size to 10
  .setDataPointSize(10)
  // Set the data point shape to circular
  .setDataPointShape(univerAPI.Enum.LinePointShape.CIRCLE)
  // Generate builder info
  .build()
const fChart = await fWorksheet.insertChart(chartInfo)

// Update the chart after 3 seconds
setTimeout(() => {
  if (fChart) {
    // Get the first series data
    const first = fChart.getSeriesData()[0]
    // Set the color of the first series to red
    const newChartInfo = fWorksheet.newChart(fChart)
      .setSeriesStyle(first.index, {
        color: '#ff0000',
      })
      .build()
    // Update the chart
    fSheet.updateChart(newChartInfo)
  }
}, 3000)