or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

chart-configuration.mdheatmap-visualization.mdindex.mdplugin-registration.md
tile.json

tessl/npm-superset-ui--legacy-plugin-chart-heatmap

Apache Superset legacy heatmap chart plugin providing D3.js-based visualization for correlation matrices and data density patterns.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@superset-ui/legacy-plugin-chart-heatmap@0.18.x

To install, run

npx @tessl/cli install tessl/npm-superset-ui--legacy-plugin-chart-heatmap@0.18.0

index.mddocs/

Superset Legacy Heatmap Chart Plugin

This plugin provides a D3.js-based heatmap chart visualization for Apache Superset. It renders correlation matrices and data density patterns through color-coded cells in a grid format, with interactive tooltips, customizable styling, and legend support.

Package Information

  • Package Name: @superset-ui/legacy-plugin-chart-heatmap
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Version: 0.18.25
  • Installation: npm install @superset-ui/legacy-plugin-chart-heatmap
  • License: Apache-2.0

Dependencies

Runtime Dependencies:

  • d3@^3.5.17 - D3.js library for data visualization
  • d3-svg-legend@^1.x - SVG legend components
  • d3-tip@^0.9.1 - Tooltip library for D3
  • prop-types@^15.6.2 - Runtime type checking

Peer Dependencies:

  • @emotion/react@^11.4.1 - CSS-in-JS styling
  • @superset-ui/chart-controls@* - Chart control components
  • @superset-ui/core@* - Core Superset UI functionality
  • react@^16.13.1 - React framework

Core Imports

import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';

The package provides CommonJS and ES Module builds:

  • Main: lib/index.js (CommonJS)
  • Module: esm/index.js (ES Module)

For direct component access:

import { default as HeatmapChartPlugin } from '@superset-ui/legacy-plugin-chart-heatmap';

Basic Usage

import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';

// Register the plugin
new HeatmapChartPlugin().configure({ key: 'heatmap' }).register();

Use with SuperChart:

import { SuperChart } from '@superset-ui/core';

<SuperChart
  chartType="heatmap"
  width={600}
  height={600}
  formData={{
    // Chart configuration options (control panel field names)
    all_columns_x: 'x_column',
    all_columns_y: 'y_column',
    metric: 'count',
    linearColorScheme: 'schemeBlues',
    showLegend: true,
    showValues: false,
    normalized: false
  }}
  queriesData={[{
    data: {
      records: [
        { x: 'A', y: '1', v: 10, perc: 0.1, rank: 0.5 },
        { x: 'B', y: '2', v: 20, perc: 0.2, rank: 0.7 }
      ],
      extents: [0, 100]
    }
  }]}
/>

Architecture

The plugin is built around several key components:

  • Plugin Class: HeatmapChartPlugin extends Superset's ChartPlugin for integration
  • Chart Metadata: Configuration including category, description, and visual gallery
  • Control Panel: Form controls for chart customization options
  • Transform Functions: Data transformation between Superset and visualization formats
  • D3 Visualization: Core heatmap rendering using D3.js with canvas optimization
  • React Wrapper: Styled React component using reactify pattern with emotion CSS-in-JS theming

Capabilities

Plugin Registration

Main plugin class for registering the heatmap chart with Superset.

class HeatmapChartPlugin extends ChartPlugin {
  constructor();
  configure(options: { key: string }): HeatmapChartPlugin;
  register(): void;
}

Plugin Registration

Chart Configuration

Form data interface used internally for chart customization. These properties are configured through Superset's control panel and passed to the plugin automatically.

interface FormData {
  all_columns_x: string;
  all_columns_y: string;
  metric: string | object;
  linearColorScheme: string;
  bottomMargin: string | number;
  canvasImageRendering: 'pixelated' | 'auto';
  leftMargin: string | number;
  normalized: boolean;
  showLegend: boolean;
  showPerc: boolean;
  showValues: boolean;
  sortXAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
  sortYAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
  xscaleInterval: number;
  yscaleInterval: number;
  yAxisBounds: [number | null, number | null];
  yAxisFormat: string;
  normalize_across: 'heatmap' | 'x' | 'y';
  sort_by_metric: boolean;
}

Chart Configuration

Heatmap Visualization

Core D3.js-based heatmap visualization integrated with React. The plugin automatically handles chart rendering through Superset's framework.

interface HeatmapProps {
  data: {
    records: Array<{
      x: string;
      y: string;
      v: number;
      perc: number;
      rank: number;
    }>;
    extents: [number, number];
  };
  width: number;
  height: number;
  colorScheme: string;
  showLegend: boolean;
  showValues: boolean;
  // Additional visualization options...
}

Heatmap Visualization

API Reference

Main Export

export default class HeatmapChartPlugin extends ChartPlugin {
  constructor();
  configure(options: { key: string }): HeatmapChartPlugin;
  register(): void;
}

Import Requirements

// Required imports for using the plugin
import { ChartPlugin } from '@superset-ui/core';
import { SuperChart } from '@superset-ui/core';

// Peer dependencies that must be available
import React from 'react';
import { Global, css, styled } from '@emotion/react';

Types

interface ChartProps {
  width: number;
  height: number;
  formData: FormData;
  queriesData: Array<{
    data: {
      records: HeatmapRecord[];
      extents: [number, number];
    };
  }>;
}

interface HeatmapRecord {
  x: string;
  y: string;
  v: number;
  perc: number;
  rank: number;
}

interface ChartMetadata {
  category: string;
  name: string;
  description: string;
  tags: string[];
  thumbnail: string;
  useLegacyApi: boolean;
  credits: string[];
  exampleGallery: Array<{
    url: string;
    caption: string;
  }>;
}