Properties
dashboardFilters

dashboardFilters

Set dashboard filters with default values on your dashboard.

Usage

Single select filter

<Vizzly.Dashboard
  // All the data sets available on the dashboard are passed back to you
  // in this callback.
  dashboardFilters={(dataSets) => [
    {
      // What type of dashboard filter are you setting?
      // Can be either `singleSelectFilter` or `dateFilter`
      type: 'singleSelectFilter',
 
      // Does this filter require a value to be set?
      // Note that if this is set to true, the dashboard will not render
      // until a value has been chosen, or you have set the `value` property
      requiresValue: false,
 
      // What is the value of the filter.
      value: 'Computing',
 
      // Which fields in the various data sets are affected by this filter?
      appliesToFields: [
        {
          // The string ID of the field in the data set provided below.
          fieldId: 'product_inventory_id',
 
          // The string ID of the data set.
          dataSetId: 'shop_customers',
        },
      ],
 
      // Setting this attribute will fetch data from the fields defined
      // in `optionsPulledFrom` and display them to your user. Upon selection,
      // it will apply the value to the fields defined in `appliesToFields`.
 
      // By default, this attribute can be undefined or an empty array,
      // and it will use the value defined in `appliesToFields`.
      optionsPulledFrom: [
        {
          // The string ID of the field in the data set provided below.
          fieldId: 'id',
 
          // The string ID of the data set.
          dataSetId: 'product_inventory',
        },
      ],
    },
  ]}
  // more dashboard props
/>

Relative date time filter

<Vizzly.Dashboard
  // All the data sets available on the dashboard, are passed back to you
  // in this callback...
  dashboardFilters={(dataSets) => [
    {
      // What type of dashboard filter are you setting?
      // Can be either `singleSelectFilter` or `dateTimeFilter`
      type: 'dateTimeFilter',
 
      // Does this filter require a value to be set?
      // Note that if this is set to true, the dashboard will not render
      // until a value has been chosen, or you have set the `value` property
      requiresValue: false,
 
      // What is the value of the filter.
      value: {
        type: 'relative',
        // ID of a relative filter set in the `dateTimeFilterOptions` property
        // https://docs.vizzly.co/dashboard/properties/dateTimeFilterOptions
        value: '_vizzly_past_3_days',
      },
 
      // Which fields are affected by this filter?
      appliesToFields: [
        {
          // ID of the affected field
          fieldId: 'fie_1',
 
          // The string ID of the data set.
          dataSetId: 'data-set-one',
        },
      ],
    },
  ]}
  // more dashboard props
/>

Custom range date time filter

<Vizzly.Dashboard
  // All the data sets available on the dashboard, are passed back to you
  // in this callback...
  dashboardFilters={(dataSets) => ({
    // What type of dashboard filter are you setting?
    // Can be either `singleSelectFilter` or `dateTimeFilter`
    type: 'dateTimeFilter',
 
    // Does this filter require a value to be set?
    // Note that if this is set to true, the dashboard will not render
    // until a value has been chosen, or you have set the `value` property
    requiresValue: false,
 
    // What is the value of the filter.
    value: {
      type: 'fixedRange',
      // ID of a relative filter set in the `dateTimeFilterOptions` property
      // https://docs.vizzly.co/dashboard/properties/dateTimeFilterOptions
      before: Date | null,
      after: Date | null,
    },
 
    // Which fields are affected by this filter?
    appliesToFields: [
      {
        // ID of the affected field
        fieldId: 'fie_1',
 
        // The string ID of the data set.
        dataSetId: 'data-set-one',
      },
    ],
  })}
  // more dashboard props
/>

Default values

Programmatic dashboard filters

To set default values for dashboard filters that are defined in this callback, you can set the value property.

User-added dashboard filters

To set default values for dashboard filters that have been added through the UI, you can iterate through the user-added dashboard filters provided as the second argument to the dashboardFilters function. You can then inspect the fields that the filter applies to and set the value for the filter. For example;

<Vizzly.Dashboard
  dashboardFilters={(dataSets, userDefinedDashboardFilters) => {
    let isFilterOnCountryField = userDefinedDashboardFilters?.[0].appliesToFields?.[0].fieldId == 'fie_country';
 
    if (isFilterOnCountryField) {
      userDefinedDashboardFilters[0].value = 'Argentina';
    }
 
    return userDefinedDashboardFilters;
  }}
/>
Default relative time options
Relative filter descriptionRelative filter ID