dashboard

dashboard is an object within the theme property for overriding empty dashboard cell styles and 'more' button styles.

<Vizzly.Dashboard
  // ...
  theme={{
    dashboard: {
      // Empty Cells
      borderRadius: "0.75rem",
      icon: {
        // 'More' Buttons (3 dots)
        background: "transparent",
        borderRadius: 0,
      },
    },
  }}
/>

Empty Cells

Empty Cells are shown within <Vizzly.Dashboard/> when new cells are created or when a cell View is removed.

'More' Buttons

'More' Buttons are shown within <Vizzly.Dashboard/> to the right of dashboard cells (empty or filled). To override styles for the dropdown shown when 'More' Buttons are clicked, use popoverMenu.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    dashboard: {
      // Default Values
 
      // Empty Cells
      borderRadius: "0.75rem",
      borderWidth: 2,
      borderColor: "#d7d9dc",
      borderStyle: "solid",
      icon: {
        // 'More' Buttons (3 dots)
        color: "#414a95",
        background: "transparent",
        borderRadius: 0,
        padding: 0,
        "&:disabled": {
          color: "#414a95",
          background: "transparent",
        },
        "&:hover": {
          color: "#6A7383",
          background: "transparent",
        },
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}