Analytical Designer

Analytical Designer is the GoodData editor for creating visualizations from your data. The user drags attributes, metrics, and facts from the catalog into the drop zones, changes the visualization type and its properties in the configuration panel, filters the data, and saves the result so that it can be added to dashboards. For how the editor works for its users, see Analytical Designer in the GoodData Cloud documentation.

@gooddata/sdk-ui-analytical-designer is the Analytical Designer application as a React component, AnalyticalDesigner. It looks and works the same as Analytical Designer in GoodData Cloud: the same catalog, drop zones, configuration panel, filters, and saving. You render it inside your own React application, on your backend instance, without an iframe. You configure it with props, react to what the user does through typed callbacks, send it commands through a ref, and replace parts of its user interface with your own components. It is the counterpart of the Dashboard component for visualizations.

Start with Embed Analytical Designer, then look up the props on the AnalyticalDesigner component page. To open Analytical Designer from an embedded dashboard instead, see Edit visualizations on a dashboard.