Dashboard
Filters

Filters

Customize your dashboard's filters dynamically with VizzlyState. This functionality allows you to modify filters from outside the component, enhancing flexibility in data presentation.

Setup

Refer to the Setup Guide to configure VizzlyState for your environment, ensuring seamless integration and functionality.

Filters

Filter configuration follow the same format as detailed in dashboardFilters.

Adding a Filter addFilter

Define all properties when adding a new filter. The appliesToFields should be unique to avoid conflicts with existing filters.

VizzlyState.set('my_dashboard', {
  addFilter: {
    properties: {
      type: 'dateFilter',
      appliesToFields: [
        {
          dataSetId: 'data_set_1',
          fieldId: 'fie_5',
        },
      ],
      title: '',
      value: null,
      managedByConfiguration: false,
      hidden: true,
      requiresValue: false,
    },
  },
});

Prefix VizzlyState with window for use in HTML.

Updating a Filter updateFilter

When updating a filter, only include the properties that need modification. The appliesToFields is necessary to establish the connection between the existing filter and the updates.

VizzlyState.set('my_dashboard', {
  updateFilter: {
    properties: {
      appliesToFields: [
        {
          dataSetId: 'data_set_1',
          fieldId: 'fie_5',
        },
      ],
      value: null,
    },
  },
});

Updating multiple Filters updateFilters

When updating multiple filters, only include the properties that need modification. The appliesToFields is necessary to establish the connection between the existing filter and the updates.

VizzlyState.set('my_dashboard', {
  updateFilters: [
    {
      properties: {
        appliesToFields: [
          {
            dataSetId: 'data_set_1',
            fieldId: 'fie_5',
          },
        ],
        value: null,
      },
    },
  ],
});

Removing a Filter removeFilter

To remove a filter, provide the appliesToFields associated with the filter you wish to remove.

VizzlyState.set('my_dashboard', {
  removeFilter: [
    {
      dataSetId: 'data_set_1',
      fieldId: 'fie_5',
    },
  ],
});

Code Example

import Vizzly, { VizzlyState } from '@vizzly/dashboard';
 
return (
  <Fragment>
    <button
      onClick={() =>
        VizzlyState.set('identifier-123', {
          updateFilter: {
            properties: {
              appliesToFields: [
                {
                  dataSetId: 'data_set_1',
                  fieldId: 'fie_5',
                },
              ],
              value: {
                type: 'fixedRange',
                after: new Date('2017-01-01T00:00:00.000Z'),
                before: new Date('2017-12-31T23:59:59.000Z'),
              },
            },
          },
        })
      }
    >
      2017
    </button>
    <Vizzly.Dashboard
      id="identifier-123"
      // The dashboard filter needs to be initiated before it can be updated
      dashboardFilters={() => [
        {
          type: 'dateFilter',
          appliesToFields: [
            {
              dataSetId: 'data_set_1',
              fieldId: 'fie_5',
            },
          ],
          title: '',
          value: null,
          managedByConfiguration: false,
          hidden: true,
          requiresValue: false,
        },
      ]}
      // ... more props here
    />
  </Fragment>
);