CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dc

A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

data-display-widgets.mddocs/

Data Display and Interactive Widgets

Components for displaying data summaries, providing user interaction controls, and creating dashboard elements beyond traditional charts.

Capabilities

DataCount

Display widget showing the number of records selected out of total records in crossfilter.

/**
 * Create a Data Count Widget
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class DataCount extends BaseMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get crossfilter instance */
  crossfilter(crossfilter?: any): any | DataCount;
  
  /** Set/get groupAll accessor */
  groupAll(groupAll?: any): any | DataCount;
  
  /** Set/get HTML template */
  html(htmlTemplate?: object): object | DataCount;
  
  /** Set/get format numbers */
  formatNumber(formatter?: Function): Function | DataCount;
}

/** Factory function for creating DataCount instances */
function dataCount(parent: string | Element | d3.Selection, chartGroup?: string): DataCount;

Usage Example:

import { DataCount } from 'dc';

const dataCount = new DataCount('#data-count')
  .crossfilter(cf)
  .groupAll(cf.groupAll())
  .html({
    some: '<strong>%filter-count</strong> selected out of <strong>%total-count</strong> records',
    all: 'All <strong>%total-count</strong> records selected. Click on charts to apply filters.'
  });

dataCount.render();

DataTable

Sortable data table widget for displaying detailed record information with pagination.

/**
 * Create a Data Table Widget
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class DataTable extends BaseMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get table size (number of rows) */
  size(size?: number): number | DataTable;
  
  /** Set/get column definitions */
  columns(columns?: (string | object)[]): (string | object)[] | DataTable;
  
  /** Set/get sort function */
  sortBy(sortFunction?: Function): Function | DataTable;
  
  /** Set/get sort order */
  order(order?: Function): Function | DataTable;
  
  /** Set/get whether to show groups */
  showGroups(show?: boolean): boolean | DataTable;
  
  /** Set/get section function for grouping */
  section(sectionFunction?: Function): Function | DataTable;
  
  /** Begin new group */
  beginSlice(start?: number): number | DataTable;
  
  /** End group */
  endSlice(end?: number): number | DataTable;
}

/** Factory function for creating DataTable instances */
function dataTable(parent: string | Element | d3.Selection, chartGroup?: string): DataTable;

Usage Example:

import { DataTable } from 'dc';

const dataTable = new DataTable('#data-table')
  .dimension(dateDimension)
  .group(d => d.date.getFullYear())
  .size(20)
  .columns([
    'date',
    'category',
    {
      label: 'Amount',
      format: d => d3.format('$,.2f')(d.amount)
    }
  ])
  .sortBy(d => d.date)
  .order(d3.descending);

dataTable.render();

DataGrid

Grid-based data display widget for showing data in a flexible grid layout.

/**
 * Create a Data Grid Widget
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class DataGrid extends BaseMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get grid size (number of items) */
  size(size?: number): number | DataGrid;
  
  /** Set/get HTML content function */
  html(htmlFunction?: Function): Function | DataGrid;
  
  /** Set/get HTML group function */
  htmlGroup(htmlGroupFunction?: Function): Function | DataGrid;
  
  /** Set/get sort function */
  sortBy(sortFunction?: Function): Function | DataGrid;
  
  /** Set/get sort order */
  order(order?: Function): Function | DataGrid;
  
  /** Begin slice for pagination */
  beginSlice(start?: number): number | DataGrid;
  
  /** End slice for pagination */
  endSlice(end?: number): number | DataGrid;
}

/** Factory function for creating DataGrid instances */
function dataGrid(parent: string | Element | d3.Selection, chartGroup?: string): DataGrid;

NumberDisplay

Large number display widget for showing single metric values with optional trend indicators.

/**
 * Create a Number Display Widget
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class NumberDisplay extends BaseMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get number format function */
  formatNumber(formatter?: Function): Function | NumberDisplay;
  
  /** Set/get HTML template */
  html(htmlTemplate?: object): object | NumberDisplay;
  
  /** Set/get value accessor */
  valueAccessor(accessor?: Function): Function | NumberDisplay;
}

/** Factory function for creating NumberDisplay instances */
function numberDisplay(parent: string | Element | d3.Selection, chartGroup?: string): NumberDisplay;

Usage Example:

import { NumberDisplay } from 'dc';

const numberDisplay = new NumberDisplay('#number-display')
  .group(totalGroup)
  .formatNumber(d3.format(',.0f'))
  .valueAccessor(d => d.value)
  .html({
    one: '<span style="color: steelblue; font-size: 26px;">%number</span>',
    some: '<span style="color: steelblue; font-size: 26px;">%number</span>',
    none: '<span style="color: darkgray; font-size: 22px;">N/A</span>'
  });

numberDisplay.render();

SelectMenu

Dropdown selection widget for filtering data by selecting values from a list.

/**
 * Create a Select Menu Widget
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class SelectMenu extends BaseMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get multiple selection */
  multiple(multiple?: boolean): boolean | SelectMenu;
  
  /** Set/get number format */
  numberVisible(count?: number): number | SelectMenu;
  
  /** Set/get option key accessor */
  promptText(text?: string): string | SelectMenu;
  
  /** Set/get option value accessor */
  promptValue(value?: any): any | SelectMenu;
  
  /** Set/get ordering function */
  order(orderFunction?: Function): Function | SelectMenu;
}

/** Factory function for creating SelectMenu instances */
function selectMenu(parent: string | Element | d3.Selection, chartGroup?: string): SelectMenu;

CboxMenu

Checkbox menu widget for multi-select filtering with individual checkbox controls.

/**
 * Create a Checkbox Menu Widget
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class CboxMenu extends BaseMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get ordering function */
  order(orderFunction?: Function): Function | CboxMenu;
  
  /** Set/get prompt text */
  promptText(text?: string): string | CboxMenu;
}

/** Factory function for creating CboxMenu instances */
function cboxMenu(parent: string | Element | d3.Selection, chartGroup?: string): CboxMenu;

Usage Example:

import { CboxMenu } from 'dc';

const cboxMenu = new CboxMenu('#cbox-menu')
  .dimension(categoryDimension)
  .group(categoryGroup)
  .order((a, b) => a.key.localeCompare(b.key))
  .promptText('Select categories...');

cboxMenu.render();

TextFilterWidget

Text input widget for filtering data based on text search criteria.

/**
 * Create a Text Filter Widget
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class TextFilterWidget extends BaseMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get placeholder text */
  placeHolderText(text?: string): string | TextFilterWidget;
  
  /** Set/get whether to normalize text */
  normalize(normalize?: Function): Function | TextFilterWidget;
}

/** Factory function for creating TextFilterWidget instances */
function textFilterWidget(parent: string | Element | d3.Selection, chartGroup?: string): TextFilterWidget;

Usage Example:

import { TextFilterWidget } from 'dc';

const textFilter = new TextFilterWidget('#text-filter')
  .dimension(textDimension)
  .placeHolderText('Search...')
  .normalize(text => text.toLowerCase());

textFilter.render();

Common Widget Patterns

HTML Template Structure

Many widgets use HTML templates with placeholder variables:

interface HTMLTemplate {
  /** Template when no data matches filters */
  none?: string;
  
  /** Template when exactly one item matches */
  one?: string;
  
  /** Template when multiple items match */
  some?: string;
  
  /** Template when all items match (no filters) */
  all?: string;
}

// Template variables:
// %total-count - Total number of records
// %filter-count - Number of filtered records  
// %number - The actual value/number

Data Table Column Definitions

DataTable columns can be strings (property names) or objects with formatting:

interface ColumnDefinition {
  /** Column header label */
  label: string;
  
  /** Format function for cell values */
  format: (d: any, row: any) => string;
}

// Example column definitions:
const columns = [
  'name',                    // Simple property access
  {
    label: 'Formatted Date',
    format: d => d3.timeFormat('%Y-%m-%d')(d.date)
  },
  {
    label: 'Currency',
    format: d => d3.format('$,.2f')(d.amount)
  }
];

Pagination and Slicing

DataTable and DataGrid support pagination through slice methods:

// Show records 0-19 (first page)
table.beginSlice(0).endSlice(20);

// Show records 20-39 (second page)  
table.beginSlice(20).endSlice(40);

// Or use size() for simple pagination
table.size(20);  // Show first 20 records

Types

interface HTMLTemplate {
  none?: string;
  one?: string;
  some?: string;
  all?: string;
}

interface ColumnDefinition {
  label: string;
  format: (d: any, row: any) => string;
}

interface DataDisplayWidget extends BaseMixin {
  size(size?: number): number | DataDisplayWidget;
  sortBy(sortFunction?: Function): Function | DataDisplayWidget;
  order(order?: Function): Function | DataDisplayWidget;
  beginSlice(start?: number): number | DataDisplayWidget;
  endSlice(end?: number): number | DataDisplayWidget;
}

docs

chart-registry.md

coordinate-grid-charts.md

core-utilities.md

data-display-widgets.md

filters.md

index.md

legends.md

mixins.md

ordinal-specialized-charts.md

tile.json