Save and restore state of GraphicWalker

Saving and restoring the state of GraphicWalker

You can access to the store of GraphicWalker, to save and restore the state of the walker, or use it for another component.

import { useState, useMemo, useRef } from 'react';
import { GraphicWalker, type VizSpecStore, type IChart } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
 
    const storeRef = useRef<VizSpecStore>(null);
 
    const [vizSpec, setVizSpec] = useState<IChart[] | null>(null);
 
    return (
        <>
            <button onClick={() => storeRef.current && setVizSpec(storeRef.current.exportCode())}>Save</button>
            <button onClick={() => vizSpec && storeRef.current?.importCode(vizSpec)}>Restore</button>
            <GraphicWalker storeRef={storeRef} dataSource={dataSource} fields={fields} />
        </>
    );
}

Here is a living example:

Using a existing spec to show a GraphicWalker

If you have a exisiting spec that exported from GraphicWalker via exportCode, you can use it to show a GraphicWalker by using chart prop.

import { useMemo } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
import spec from './spec.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return (
        <GraphicWalker data={dataSource} fields={fields} chart={spec} />
    );
}

Using a existing spec for other components

We can use the exported spec for other components, such as GraphicRenderer, PureRenderer.

PureRenderer

This component is used to render a single chart in a spec. In this example, we will render the first chart in the spec.

import { PureRenderer } from '@kanaries/graphic-walker';
import data from './data.json';
import spec from './spec.json';
 
export default function App() {
     return <PureRenderer type="local" rawData={data} visualConfig={spec[0].config} visualState={spec[0].encodings} visualLayout={spec[0].layout} />
}

So We will get a chart that we just saved. (Try click Save button in the first example)

No spec found.

GraphicRenderer

This component is used to render a chart with it's filters editable. It receives the same spec as GraphicWalker. In this example, we will render the first chart in the spec.

import { useMemo } from 'react';
import { GraphicRenderer } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
import spec from './spec.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return (
        <GraphicRenderer data={dataSource} fields={fields} chart={[spec[0]]} />
    );
}

So We will get a chart that we just saved. (Try add a filter and click Save button in the first example)

No spec found.

Dark Mode of Graphic Walker Use Duckdb Wasm as Computation