Controls

Enhance your dashboard's adaptability with VizzlyState, a feature designed to dynamically modify filters from outside the component. This allows for a flexible data presentation, catering to real-time changes and user interactions.

Setup

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

reload()

To ensure your dashboard always displays the most up-to-date information, the reload() method offers a straightforward solution. This method refreshes the dashboard's data, ideal for responding to data changes or user role updates.

Usage

Incorporate reload() into your application to allow users or system admins to refresh dashboard data on demand. Below are examples in React and HTML for implementing the reload functionality.

Code Example

import Vizzly, { VizzlyState } from '@vizzly/dashboard';
 
return (
  <Fragment>
    <button
      onClick={() =>
        VizzlyState.reload('identifier-123')
      }
    >
      Reload Dashboard
    </button>
    <Vizzly.Dashboard
      id="identifier-123"
      // Your dashboard properties go here, such as `identity`
    />
  </Fragment>
);

save()

The save() function enhances dashboard interactivity by enabling developers to save the dashboard state from outside the component. This capability, especially when combined with featureToggles.disableAutoSave, provides developers with precise control over when and how the dashboard state is preserved. It's ideal for implementing custom save triggers or integrating save functionality into a larger application workflow, offering flexibility in user experience design.

It's important to ensure that the scope is set to read_write to utilize the save() function.

Code Example

import Vizzly, { VizzlyState } from '@vizzly/dashboard';
 
return (
  <Fragment>
    <button
      onClick={() =>
        VizzlyState.save('identifier-123')
      }
    >
      Save
    </button>
    <Vizzly.Dashboard
      id="identifier-123"
      // Your dashboard properties go here, such as `identity`
    />
  </Fragment>
);

resizing()

Overview

To enhance the user experience for applications that utilize side navigation panels, we have introduced a dynamic resizing feature. This feature ensures that our component adjusts seamlessly when the side navigation panel is toggled open or closed. By setting a boolean value, users can enable the resizing state, providing a smooth and adaptive interface.

Key Benefits

• Improved Layout Adaptability: The dynamic resizing feature ensures that the component remains perfectly aligned and functional, regardless of changes in the navigation panel's state.
• Enhanced User Experience: Users will experience a more responsive and intuitive interface, especially in applications with frequently toggled side navigation panels.
• Easy Integration: This feature can be effortlessly integrated into existing setups, requiring minimal adjustments and providing immediate benefits.

How It Works

The resizing state is controlled by a boolean value that can be set within your application. When enabled, the component dynamically adjusts its size to accommodate changes in the navigation panel. This ensures that your application's layout remains consistent and user-friendly.

Implementation

To enable the resizing feature, set the resizing property to true in your component's configuration. Here's a quick example to demonstrate its usage:

Code Example

() => {
  const [nav, setNav] = useState("open");
 
  return (
    <Fragment>
      <div  style={nav === "open" ? {width: 240} : {width: 80}}>
        <button
          onClick={() =>
            VizzlyState.resizing('identifier-123', nav === "open");
            setNav("closed")
          }
        >
          {nav}
        </button>
      </div>
      <div>
        <Vizzly.Dashboard
          id="identifier-123"
            // Your dashboard properties go here, such as `identity`
        />
      </div>
    </Fragment>
  );
}

Optional Params

You can optionally set the timeout for the resizing state if the default of 100ms isn't sufficient.

{
  timeout?: number
}
 

  VizzlyState.resizing('identifier-123', << boolean >>, { timeout: << number >> });

drilldown()

The drilldown() function allows you to programmatically change the drilldown state of your dashboard. This can be useful for implementing custom drilldown functionality or for dynamically updating the drilldown state based on user interactions.

How to use

If you enable the developerTools option viewRawAttributes in your dashboard's configuration, you can see the available attributes.

The properties you can use can be found in timeDimension or dimension in the attributes.

Code Example

import Vizzly, { VizzlyState } from '@vizzly/dashboard';
 
return (
  <Fragment>
    <button
      onClick={() =>
        VizzlyState.drilldown('identifier-123', {
            viewId: '<< VIEW ID >>',
            existingField: {
              field: '<< FIELD ID >>',
              // if the field is not a date you can set it to 'none'
              function: '<< FIELD FUNCTION >>'',
              value: '<< FIELD VALUE TO DRILL DOWN ON >>',
            },
            newField: {
              field: '<< FIELD ID >>',
              // if the field is not a date you can set it to 'none'
              function: '<< FIELD FUNCTION >>'',
            },
          })
      }
    >
      Save
    </button>
    <Vizzly.Dashboard
      id="identifier-123"
      // Your dashboard properties go here, such as `identity`
    />
  </Fragment>
);

Feature Control

You can change featureToggles through VizzlyState. This will allow you to dynamically change the way your dashboard behaves with out having to reload the dashboard.

Code Example

import Vizzly, { VizzlyState } from '@vizzly/dashboard';
 
return (
  <Fragment>
    <button
      onClick={() =>
        VizzlyState.set('identifier-123', { featureToggles: { disableAutoSave: true } })
      }
    >
      Save
    </button>
    <Vizzly.Dashboard
      id="identifier-123"
      // Your dashboard properties go here, such as `identity`
    />
  </Fragment>
);