view

Self-hosted In-browser Custom

If you know the exact view you wish to display, you can use this property to force the Component to be displayed in the Editor.

import Vizzly from '@vizzly/dashboard';
 
export const MyComponent = () => {
 
  const [view,setView] = useState(null)
 
  return (
       <Vizzly.Editor
          // shared properties with a Dashboard
          view={async (dataSets: DataSet[]) => view}
      />;
  )
}

Programmatic

In this function, you will be given all the data sets that your user has access to, which you can use with our @vizzly/services (opens in a new tab) package to build the view dynamically!

Example

import { Editor } from '@vizzly/dashboard';
import { Vizzly } from "@vizzly/services;
 
<Editor
  // shared properties with a Dashboard
  view={async (dataSets: DataSet[]) => {                  
      const chart = new Vizzly.LineChart({ dataSetId: dataSets[0].id });
      chart.updateAttributes({
          // configure your view
      });
 
      const editor = new Vizzly.Editor({ component: chart });
      return editor.build();
  }}
/>;