Custom charts

Spreadsheet 2 is agnostic of chart renderer. We maintain a schema for the chart, but you can choose to use any chart libraries out ther

import { Suspense, lazy } from "react"
import { CircularLoader, Separator } from "@rowsncolumns/ui";
import { useSubscribeToSheet } from "@rowsncolumns/spreadsheet-state";


const ChartComponent = ({ chart } : ChartComponentProps) => {

  const updateChart = () => {
  }

  // Subscribe to datarange
  useSubscribeToSheet(chart.chartId, chart.spec.dataRange, updateChart);

  // Render chart
  
}

const MySpreadsheet = () => {
  return (
    <CanvasGrid
      charts={[
        {
          chartId: 1,
          position: {
            sheetId: 1,
            overlayPosition: {
              anchorCell: {
                rowIndex: 8,
                columnIndex: 11,
              },
              heightPixels: 200,
              widthPixels: 300,
              offsetXPixels: 10,
              offsetYPixels: 10,
            },
          },
          spec: {
            title: "My chart",
            basicChart: {
              chartType: "BAR",
              series: [
                {
                  series: {
                    sourceRange: {
                      sources: [
                        {
                          startRowIndex: 1,
                          endRowIndex: 10,
                          startColumnIndex: 2,
                          endColumnIndex: 10,
                        },
                      ],
                    },
                  },
                },
              ],
              domains: [
                {
                  domain: {
                    sourceRange: {
                      sources: [
                        {
                          startRowIndex: 1,
                          endRowIndex: 10,
                          startColumnIndex: 2,
                          endColumnIndex: 10,
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
      ]}
      
      getChartComponent={(props: ChartComponentProps) => (
        <Suspense fallback={<CircularLoader />}>
          <ChartComponent
            {...props}
            sheetData={sheetData}
          />
        </Suspense>
      )}
    />
  )
}

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
);