or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

chart-registry.mdcoordinate-grid-charts.mdcore-utilities.mddata-display-widgets.mdfilters.mdindex.mdlegends.mdmixins.mdordinal-specialized-charts.md
tile.json

chart-registry.mddocs/

Chart Registry and Global Operations

Centralized management system for coordinating multiple charts, handling global operations like filtering and rendering, and managing chart groups for synchronized interactions.

Capabilities

Chart Registry

The global chart registry manages collections of charts organized into groups for coordinated interactions.

/**
 * Global chart registry instance for managing chart coordination
 */
const chartRegistry: ChartRegistry;

interface ChartRegistry {
  /** Check if chart exists in any group */
  has(chart: BaseMixin): boolean;
  
  /** Get list of charts in specific group */
  list(chartGroup?: string): BaseMixin[];
  
  /** Clear all charts from group */
  clear(chartGroup?: string): void;
}

Chart Registration Functions

Functions for adding and removing charts from the registry for coordinated operations.

/**
 * Add chart to registry for group coordination
 * @param {BaseMixin} chart - Chart instance to register
 * @param {String} [chartGroup] - Chart group name, defaults to DEFAULT_CHART_GROUP
 */
function registerChart(chart: BaseMixin, chartGroup?: string): void;

/**
 * Remove chart from registry
 * @param {BaseMixin} chart - Chart instance to deregister
 * @param {String} [chartGroup] - Chart group name, defaults to DEFAULT_CHART_GROUP
 */
function deregisterChart(chart: BaseMixin, chartGroup?: string): void;

/**
 * Check if chart exists in registry
 * @param {BaseMixin} chart - Chart instance to check
 * @returns {Boolean} True if chart is registered
 */
function hasChart(chart: BaseMixin): boolean;

/**
 * Clear all charts from specified group
 * @param {String} [chartGroup] - Chart group to clear, defaults to DEFAULT_CHART_GROUP
 */
function deregisterAllCharts(chartGroup?: string): void;

Usage Example:

import { BarChart, LineChart, registerChart, deregisterChart } from 'dc';

const barChart = new BarChart('#bar-chart');
const lineChart = new LineChart('#line-chart');

// Register charts in default group
registerChart(barChart);
registerChart(lineChart);

// Register charts in custom group
registerChart(barChart, 'dashboard-1');
registerChart(lineChart, 'dashboard-1');

// Remove from registry
deregisterChart(barChart, 'dashboard-1');

Global Filtering Operations

Coordinate filtering operations across all charts in a group.

/**
 * Clear all filters on all charts in group
 * @param {String} [chartGroup] - Chart group name, defaults to DEFAULT_CHART_GROUP
 */
function filterAll(chartGroup?: string): void;

Usage Example:

import { filterAll } from 'dc';

// Clear all filters in default group
filterAll();

// Clear filters in specific group
filterAll('dashboard-1');

// Can also be called on individual charts
barChart.filterAll();

Global Rendering Operations

Coordinate rendering and redrawing operations across chart groups.

/**
 * Render all charts in group (full render including DOM creation)
 * @param {String} [chartGroup] - Chart group name, defaults to DEFAULT_CHART_GROUP
 */
function renderAll(chartGroup?: string): void;

/**
 * Redraw all charts in group (incremental update of existing DOM)
 * @param {String} [chartGroup] - Chart group name, defaults to DEFAULT_CHART_GROUP
 */
function redrawAll(chartGroup?: string): void;

Usage Example:

import { renderAll, redrawAll } from 'dc';

// Initial render of all charts
renderAll();

// After data changes, redraw all charts
redrawAll();

// Render/redraw specific group
renderAll('dashboard-1');
redrawAll('dashboard-1');

Global Focus Operations

Coordinate zoom and focus operations across coordinate grid charts.

/**
 * Reset zoom/focus on all charts in group
 * @param {String} [chartGroup] - Chart group name, defaults to DEFAULT_CHART_GROUP
 */
function refocusAll(chartGroup?: string): void;

Usage Example:

import { refocusAll } from 'dc';

// Reset zoom on all charts
refocusAll();

// Reset zoom on specific group
refocusAll('dashboard-1');

Chart Group Patterns

Default Chart Group

Charts registered without specifying a group go into the default group:

import { BarChart, registerChart, constants } from 'dc';

const chart = new BarChart('#chart');
registerChart(chart); // Goes to constants.DEFAULT_CHART_GROUP

// These operations affect the default group
renderAll();
filterAll();
redrawAll();

Custom Chart Groups

Use custom groups to create independent dashboard sections:

import { BarChart, LineChart, PieChart, renderAll, filterAll } from 'dc';

// Dashboard 1 charts
const sales1 = new BarChart('#sales1');
const profit1 = new LineChart('#profit1');
registerChart(sales1, 'dashboard-1');
registerChart(profit1, 'dashboard-1');

// Dashboard 2 charts  
const sales2 = new PieChart('#sales2');
const profit2 = new BarChart('#profit2');
registerChart(sales2, 'dashboard-2');
registerChart(profit2, 'dashboard-2');

// Independent operations
renderAll('dashboard-1');  // Only renders charts in group 1
filterAll('dashboard-2');  // Only clears filters in group 2

Automatic Registration

Charts automatically register themselves when created with a chartGroup parameter:

import { BarChart } from 'dc';

// Automatically registered to 'sales-dashboard' group
const chart = new BarChart('#chart', 'sales-dashboard');

// No need to call registerChart() manually
renderAll('sales-dashboard');

Event Coordination

Charts within the same group automatically coordinate their filter events:

import { BarChart, LineChart } from 'dc';

const categoryChart = new BarChart('#categories', 'main');
const timeChart = new LineChart('#timeline', 'main');

categoryChart
  .dimension(categoryDimension)
  .group(categoryGroup);

timeChart
  .dimension(timeDimension)
  .group(timeGroup);

// When user brushes on timeChart, categoryChart automatically updates
// When user clicks on categoryChart bar, timeChart automatically updates

Chart Lifecycle Management

Proper Chart Cleanup

Always deregister charts when removing them from the DOM:

import { deregisterChart } from 'dc';

// Before removing chart from DOM
deregisterChart(chart);
chart.root().remove(); // Remove from DOM

// Or clear entire group
deregisterAllCharts('dashboard-1');

Dynamic Chart Management

Add and remove charts dynamically:

import { BarChart, registerChart, deregisterChart, redrawAll } from 'dc';

function addChart(containerId, group) {
  const chart = new BarChart(containerId, group)
    .dimension(someDimension)
    .group(someGroup);
    
  chart.render();
  return chart;
}

function removeChart(chart, group) {
  deregisterChart(chart, group);
  chart.root().remove();
  redrawAll(group); // Update remaining charts
}

Performance Considerations

Batch Operations

Group related operations to minimize redraws:

import { filterAll, redrawAll } from 'dc';

// Bad: Multiple individual operations
chart1.filter('value1');
chart2.filter('value2');
chart3.filter('value3');

// Good: Batch operations
chart1.filter('value1');
chart2.filter('value2');
chart3.filter('value3');
redrawAll(); // Single coordinated redraw

Selective Group Operations

Use specific groups to limit operation scope:

// Only update charts related to current user action
redrawAll('user-selection-charts');

// Keep other dashboards unchanged
// redrawAll('admin-charts'); // Not called

Types

interface ChartRegistry {
  has(chart: BaseMixin): boolean;
  list(chartGroup?: string): BaseMixin[];
  clear(chartGroup?: string): void;
}

interface GlobalOperations {
  registerChart(chart: BaseMixin, chartGroup?: string): void;
  deregisterChart(chart: BaseMixin, chartGroup?: string): void;
  hasChart(chart: BaseMixin): boolean;
  deregisterAllCharts(chartGroup?: string): void;
  filterAll(chartGroup?: string): void;
  renderAll(chartGroup?: string): void;
  redrawAll(chartGroup?: string): void;
  refocusAll(chartGroup?: string): void;
}

const DEFAULT_CHART_GROUP: string;