Graphic Walker Export Chart Config API

🙏Q&A
1

When you embed graphic walker in your own service, it would be great to allow users to save their visualizations in your service. In this case, you need a way to access graphic-walker’s view state, export, and save it.

Graphic Walker now does not provide a direct callback to export the view status when changing, but it will be supported in version 0.5.0.

Now, in version 4.x, it provides a ref that allows you to get the store inside graphic-walker. You can pass a ref variable to it to get the store and then use all internal API on it.

Example of export chart’s config

// in a react functional component:
const gw = useRef<IGlobalStore | null>(null);

function exportChartConfigs () {
  let chartConfigList = [];
  if (gw.current) {
    chartConfigList = gw.current.vizStore.exportViewSpec();
  }
  return chartConfigList;
}


return <div>
  <button onClick={exportChartConfigs}>Export Charts</button>
  <GraphicWalker storeRef={gw} />
</div>

Or Play with a live demo in Code Sandbox