Implementation:Apache Druid PieChartModule
| Knowledge Sources | |
|---|---|
| Domains | Web_Console, Data_Visualization |
| Last Updated | 2026-02-10 10:00 GMT |
Overview
PieChartModule is a visualization module that renders aggregated data as an interactive pie chart using Apache ECharts, with support for slice drilling and an optional "Others" category.
Description
The module registers with the ModuleRepository under the id 'pie-chart' and accepts a split column, a measure, a slice limit, and a showOthers flag. It constructs a SQL query that groups by the split column expression (cast to VARCHAR), orders by the measure descending, and limits to the configured number of slices. When showOthers is enabled, a second query computes the aggregate for all values not in the top-N, adding an "Others" slice. The chart is rendered using ECharts in dark mode with a vertical legend, consistent dimension-based coloring via ColorAssigner, and click-to-select interaction that shows a PortalBubble with the value and a "Zoom in" button to filter on the clicked slice.
Usage
This module is available as "Pie chart" in the explore view's module picker. It is rendered by ModulePane when a user wants to visualize the distribution of a single measure across categorical values.
Code Reference
Source Location
- Repository: Apache Druid
- File: web-console/src/views/explore-view/modules/pie-chart-module/pie-chart-module.tsx
- Lines: 1-310
Signature
interface PieChartParameterValues {
splitColumn: ExpressionMeta;
measure: ExpressionMeta;
limit: number;
showOthers: boolean;
}
// Registered via:
ModuleRepository.registerModule<PieChartParameterValues>({
id: 'pie-chart',
title: 'Pie chart',
icon: IconNames.PIE_CHART,
parameters: { ... },
component: function PieChartModule(props): JSX.Element,
});
Import
// Module is auto-registered via side-effect import:
import './views/explore-view/modules/pie-chart-module/pie-chart-module';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| splitColumn | ExpressionMeta | Yes | The dimension column to split the pie by (each unique value becomes a slice) |
| measure | ExpressionMeta | Yes | The aggregate measure determining the size of each slice |
| limit | number | Yes | Maximum number of slices to display (default: 5) |
| showOthers | boolean | No | Whether to aggregate remaining values into an "Others" slice (default: true) |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered chart | JSX.Element | An ECharts pie chart with click interaction, PortalBubble tooltips, and zoom-in filtering |
Usage Examples
Module auto-registration
// The module registers itself when the file is imported.
// Users select "Pie chart" from the ModulePicker.
// Example parameter values:
const parameterValues = {
splitColumn: cityExpression,
measure: sumRevenueMeasure,
limit: 10,
showOthers: true,
};
Click-to-filter interaction
// When a user clicks a pie slice, a PortalBubble shows the value
// and a "Zoom in" button. Clicking "Zoom in" adds a WHERE filter:
setWhere(updateFilterClause(where, C('city').equal('San Francisco')));