Managing dashboards

To manage your user's dashboards, you can use the Vizzly.useDashboardManager react hook. You need to supply the identity callback so we know who the current user is, and also the query engine config, or the URL of your deployed Vizzly query engine.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { useDashboardManager } from '@vizzly/dashboard';

const fetchIdentity = async () => {
  const response = await fetch(
    '<< Your identity endpoint >>'
  );
  if (response.ok) {
    const tokens = await response.json();

    return tokens.accessTokens;
  }

  return null;
};

function App() {
  const { dashboards, createDashboard } = useDashboardManager(
    fetchIdentity,
    '<< Your query engine endpoint >>'
  );

  return (
    <>
      <ul>
        {dashboards.map(dashboard => (
          <li>{dashboard.id}</li>
        ))}
      </ul>
      <button onClick={() => createDashboard({})}>
        Create a new dashboard
      </button>
    </>
  );
}

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);

Provided hook functions

• dashboards is the list of dashboards the current user has.

• deleteDashboard is a function that will instantly remove the dashboard. You may want to first prompt the user if they are sure they wish to delete the dashboard, before calling this function for a better user experience.

• createDashboard will create a new dashboard. By default it will make a copy of the parent dashboard, but you can override this by setting the dashboard property in the first argument options.

• updateDashboardMeta is a function that allows you to store any key-value pairs with a dashboard. You will provide the dashboardId of the copy as the first argument, and the object as the second argument. Any subsequent updates to the metadata will merge with the previously set values.