Drill Anywhere

Interactive Visualization with Drill-Down and Column Switching

This documentation section highlights the key functionalities and unique features of the Dashboard component, which leverages the RestBI SDK for dynamic data interaction. This component allows users to explore data through interactive charts, with the ability to drill down into specific data points and switch between different dimensions and metrics.

Key Features

1. Dynamic Data Queries

   • Query Construction: The component builds a query dynamically based on user-selected dimensions, metrics, and filters. The RestBIClient executes these queries against the currently provided data model (activeModel), enabling flexible data retrieval.

   • Code Reference:

const query: Query = {
  columns: [selectedDimension, selectedMetric],
  filters: filters,
  limit: 50,
  sortBy: {
      name: selectedMetric,
      direction: SortDirection.DESC,
  },
};
client.executeQuery(query, activeModel).then((data) => {
  setChartData(data);
});

Drill-Anywhere Functionality

• Interactive Drill-Anywhere: Users can click on a chart data point to drill down into more detailed data. The component captures the clicked data point and opens a modal to select a new dimension for drilling down.

• Filter Application: A new filter is automatically added based on the clicked dimension's value, refining the query to show more detailed data.

• Code Reference:

const drillDown = (newDimension: string) => {
  const newFilter = {
      column: selectedDimension,
      operator: "=",
      value: drillDownValue,
  };
  const updatedFilters = [...filters, newFilter];
  setSelectedDimension(newDimension);
  setFilters(updatedFilters);
};

Dimension and Metric Switching

• Flexible Column Selection: Users can switch between different dimensions and metrics through dropdown menus. The available columns are dynamically loaded based on the data model, ensuring that users only see relevant options.

• Automatic Chart Update: Once a new dimension or metric is selected, the component re-executes the query, and the chart is updated to reflect the new data structure.

• Code Reference:

<Select
  value={selectedDimension}
  onChange={(e) => setSelectedDimension(e.target.value as string)}
  label="Dimension"
>
  {activeModel && activeModel.tables
      .flatMap((table: Table) =>
      table.columns.map((column: Column) => {
          if (inferColumnType(column) === ColumnType.DIMENSION) {
              return (<MenuItem key={column.name} value={column.name}>
                  {column.name}
              </MenuItem>);
          }
          return null;
      })
  )}
</Select>

Filter Management

• Interactive Filters: Each applied filter is displayed as a component that users can manage individually. Filters can be adjusted or removed, which will automatically trigger a new query and update the chart.

• Code Reference:

<Filter
  filter={filter}
  column={
    activeModel.tables.flatMap((table: Table) => table.columns).find((col: Column) => col.name === filter.column) || { id: 'unknown', name: filter.column, dataType: ColumnDataType.STRING } as Column
  }
  onFilterChange={(newFilter) => {
    setFilters(filters.map((f) => f.column === newFilter.column ? newFilter : f));
  }}
  onClose={() => {
    setFilters(filters.filter((f) => f.column !== filter.column));
  }}
/>