EditorProvider

EditorProvider is the context provider for editor components. It manages editor-specific state and must wrap all editor panels, sections and other controls. It should be placed inside a GraphProvider.

Basic usage

import { GraphProvider } from '@graphysdk/core';
import { EditorProvider } from '@graphysdk/editor';

<GraphProvider config={config}>
  <EditorProvider>{/* Editor panels / sections / controls go here */}</EditorProvider>
</GraphProvider>;

Props

React.ReactNode

required

Child components to be wrapped by the provider.

EditorComponentRegistry

List of overrides for internal components. See EditorComponentRegistry

CustomColorInputConfig[]

Custom color configuration for series styling in the editor.By default, the editor automatically generates color inputs based on the data series. Use this prop to override that behavior with custom configurations.Type: Array<{ text: string, seriesConfigKey: string, symbol?: LegendSymbolType, color?: string }>

const customColorInputs = [
  { text: 'Revenue', seriesConfigKey: 'revenue' },
  { text: 'Profit', seriesConfigKey: 'profit', symbol: 'bar' },
];

<EditorProvider customColorInputs={customColorInputs}>{/* Editor panels */}</EditorProvider>;

GraphThemeOption[]

Available theme options to display in the editor theme selector.Each option has a label (string or function receiving a translate function), a value (GraphTheme), and an optional renderIcon callback.You can use the pre-built defaultThemeOptions which provides light and dark options with icons.

import { graphyLightTheme, graphyDarkTheme, SunIcon, MoonIcon } from '@graphysdk/core';

const themeOptions = [
  { label: 'Light', value: graphyLightTheme, renderIcon: () => <SunIcon /> },
  { label: 'Dark', value: graphyDarkTheme, renderIcon: () => <MoonIcon /> },
  { label: 'Custom', value: myCustomTheme },
];

<EditorProvider themeOptions={themeOptions}>{/* Editor panels */}</EditorProvider>;

Or use the built-in defaults:

import { defaultThemeOptions } from '@graphysdk/editor';

<EditorProvider themeOptions={defaultThemeOptions}>{/* Editor panels */}</EditorProvider>;

(value: GraphTheme) => void

Callback invoked when the user changes the graph theme in the editor.

<EditorProvider
  onThemeChange={(theme) => {
    console.log('Theme changed to:', theme.id);
  }}
>
  {/* Editor panels */}
</EditorProvider>

EditorTheme

Customize the editor UI theme (typography, colors, font weights, etc.). Defaults to editorLightTheme. You can use the pre-built editorLightTheme or editorDarkTheme, or create a custom theme.See EditorTheme for the full type definition and available font tokens.

import { editorLightTheme } from '@graphysdk/editor'; // or editorDarkTheme

const customEditorTheme = {
  ...editorLightTheme,
  values: {
    ...editorLightTheme.values,
    fontSectionTitle: '600 14px Inter',
  },
};

<EditorProvider theme={customEditorTheme}>{/* Editor panels with custom fonts */}</EditorProvider>;

Complete example

import { useState } from 'react';
import { GraphProvider, Graph, graphyLightTheme, graphyDarkTheme } from '@graphysdk/core';
import { EditorProvider, GraphPanel, defaultThemeOptions, editorLightTheme } from '@graphysdk/editor';
import type { GraphConfig, GraphTheme } from '@graphysdk/core';

function MyEditor() {
  const [config, setConfig] = useState<GraphConfig>({
    data: {
      columns: [
        { key: 'category', label: 'Category' },
        { key: 'value', label: 'Value' },
      ],
      rows: [
        { category: 'A', value: 100 },
        { category: 'B', value: 200 },
      ],
    },
    type: 'column',
  });

  return (
    <GraphProvider config={config} onChange={(update) => setConfig({ ...config, ...update })}>
      <EditorProvider
        themeOptions={defaultThemeOptions}
        onThemeChange={(theme) => {
          console.log('User selected theme:', theme.id);
        }}
        theme={editorLightTheme}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          <Graph />
          <GraphPanel />
        </div>
      </EditorProvider>
    </GraphProvider>
  );
}

Type definitions

interface EditorProviderProps {
  children: React.ReactNode;
  customColorInputs?: CustomColorInputConfig[];
  themeOptions?: GraphThemeOption[];
  onThemeChange?: GraphThemeChangeHandler;
  theme?: EditorTheme;
}

interface CustomColorInputConfig {
  text: string;
  seriesConfigKey: SeriesConfigKey;
  symbol?: LegendSymbolType;
  color?: string;
}

interface GraphThemeOption {
  label: string | ((t: TranslateFunction) => string);
  value: GraphTheme;
  renderIcon?: () => React.ReactNode;
}

type GraphThemeChangeHandler = (value: GraphTheme) => void;

GraphProvider - State management and configuration
EditorTheme - Editor theme type and font tokens
Editor panels - Available editor components
Editor quick start - Getting started with the editor

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

Basic usage

Props

Complete example

Type definitions

​Basic usage

​Props

​Complete example

​Type definitions

​Related

Basic usage

Props

Complete example

Type definitions

Related