Charts

Based on Apache eCharts - https://echarts.apache.org/en

Installation

yarn install @rowsncolumns/charts

Integrating with Spreadsheet

import { ButtonInsertChart, CanvasGrid } from "@rowsncolumns/spreadsheet"
import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state"
import { useChart, ChartComponent, ChartEditorDialog, ChartEditor } from "@rowsncolumns/chart"

const App = () => {

  // useSpreadsheetState
  const {
    activeSheetId,
    activeCell,
    selections,
    rowCount,
    columnCount,
    getSheetId,
    getSheetName,
    getSeriesValuesFromRange,
    getDomainValuesFromRange,
    sheetObserver,
    onRequestCalculate
  } = useSpreadsheetState({})

  // Charts module
  const {
    onRequestEditChart,
    onDeleteChart,
    onMoveChart,
    onResizeChart,
    onUpdateChart,
    onCreateChart,
    selectedChart,
  } = useCharts({
    createHistory,
    onChangeCharts,
  });


  return (
    <>
      <ButtonInsertChart onClick={() => onCreateChart(activeSheetId, activeCell, selections)} />
      <CanvasGrid
        getChartComponent={(props) => (
          <ChartComponent
            {...props}
            isDarkMode={isDarkMode}
            getSeriesValuesFromRange={getSeriesValuesFromRange}
            getDomainValuesFromRange={getDomainValuesFromRange}
            sheetObserver={sheetObserver}
            onRequestEdit={onRequestEditChart}
            onRequestCalculate={onRequestCalculate}
          />
        )}
      >

      <ChartEditorDialog>
        <ChartEditor
          sheetId={activeSheetId}
          chart={selectedChart}
          onSubmit={onUpdateChart}
          rowCount={rowCount}
          columnCount={columnCount}
          getSheetName={getSheetName}
          getSheetId={getSheetId}
        />
      </ChartEditorDialog>
    </>
  )
}