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.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Superset Legacy Heatmap Chart Plugin

Name: tessl/npm-superset-ui--legacy-plugin-chart-heatmap
Author: tessl

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;
  }>;
}