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}
            enable3D={enable3D}
          />
        )}
      >

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

3-D charts and Content-Security-Policy

BAR_3D / LINE_3D / AREA_3D / SURFACE_3D specs (Excel's 3-D chart classes, kept on the spec as sourceChartType) render through echarts-gl, which is lazy-loaded the first time one is drawn. echarts-gl needs WebGL and — through claygl's new Function — a page whose script-src allows 'unsafe-eval'. When either is missing the chart renders as its 2-D fallback instead.

Pass enable3D={false} to both ChartComponent and ChartEditor to opt out up front: echarts-gl is never loaded, every 3-D spec stays on its 2-D fallback and the Chart editor hides the 3-D presets. The spec's sourceChartType is left as authored, so an imported 3-D chart still exports as one.