Editor quick start

import { useState } from 'react';
import { GraphProvider, Graph } from '@graphysdk/core';
import { EditorProvider, GraphPanel } from '@graphysdk/editor';

function MyEditor() {
  const [config, setConfig] = useState({
    data: {
      columns: [
        { key: 'month', label: 'Month' },
        { key: 'sales', label: 'Sales' },
      ],
      rows: [
        { month: 'Jan', sales: 1000 },
        { month: 'Feb', sales: 1200 },
        { month: 'Mar', sales: 1100 },
      ],
    },
    type: 'column',
  });

  return (
    <GraphProvider
      config={config}
      onChange={(changedValues, currentValues) => {
        setConfig(currentValues);
      }}
    >
      <EditorProvider>
        <div style={{ display: 'flex', gap: '20px' }}>
          {/* The graph - use mode="editor" for inline editing */}
          <Graph mode="editor" />

          {/* Editor panel */}
          <GraphPanel />
        </div>
      </EditorProvider>
    </GraphProvider>
  );
}

import { useState } from 'react';
import { GraphProvider, Graph } from '@graphysdk/core';
import { EditorProvider, GraphPanel, AxesPanel, ColorPanel, DataTable } from '@graphysdk/editor';

function MyEditor() {
  const [config, setConfig] = useState({
    data: {
      columns: [
        { key: 'category', label: 'Category' },
        { key: 'value', label: 'Value' },
      ],
      rows: [
        { category: 'A', value: 100 },
        { category: 'B', value: 150 },
        { category: 'C', value: 120 },
      ],
    },
    type: 'column',
    content: {
      title: 'Sales by category',
    },
  });

  return (
    <GraphProvider
      config={config}
      onChange={(changedValues, currentValues) => {
        setConfig(currentValues);
      }}
    >
      <EditorProvider>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: '20px' }}>
          {/* Main content area */}
          <div>
            <Graph mode="editor" />
            <DataTable />
          </div>

          {/* Editor sidebar */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <GraphPanel />
            <AxesPanel />
            <ColorPanel />
          </div>
        </div>
      </EditorProvider>
    </GraphProvider>
  );
}