lists

lists is an object within the theme property for overriding styles content shown in lists.

<Vizzly.Dashboard
  // ...
  theme={{
    lists: {
      background: "#ffffff",
      border: "2px solid #dbdcdf",
      borderRadius: "8px",
      fontSize: "13px",
      icon: {
        // 'x' icons for removing list items
        color: "rgba(31, 41, 55, 0.6)",
        background: "#ffffff",
        border: "none",
      },
    },
  }}
/>

One

one

Two

two

Three

three

Lists

Lists are featured within <Vizzly.Dashboard/> in the following loctions:

On Views, lists are used for adding new local filters.
In the View Editor, within the 'Data' tab, lists are used for metrics, comparisons (single stats), grouping, time dimensions (combo charts), sorting, drilldowns (tables and column/horizontal bar charts), filters, and custom metrics.
In the View Editor, within the 'Data' tab 'Advanced options', lists are used for filters and custom metrics.
In the View Editor, within the 'Format' tab, lists are used for conditional formatting, prefixes (tables), and goal lines.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    lists: {
      // Default Values
      background: "#ffffff",
      border: "2px solid #dbdcdf",
      borderRadius: "8px",
      boxShadow: "unset",
      color: "inherit",
      fontSize: "13px",
      title: {
        // Labels above list items
        color: "inherit",
        fontFamily: "inherit",
        fontSize: "14px",
        fontWeight: 400,
        lineHeight: "initial",
        margin: "0",
      },
      icon: {
        // 'x' icons for removing list items
        color: "rgba(31, 41, 55, 0.6)",
        background: "#ffffff",
        border: "none",
      },
      select: {
        // List item select dropdown controls (e.g. 'Count'/'Unique', 'Asc'/'Desc' etc)
        padding: "4px 0 3px 16px",
        fontSize: "13px",
        fontWeight: 400,
        color: "#374151",
        "&:hover": {
          background: "#f9f9f9",
        },
      },
      row: {
        padding: "1px 1.5px 3.5px 8px",
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}