tessl/npm-ant-design--charts

A React chart library based on G2Plot providing comprehensive data visualization components including line charts, bar charts, pie charts, and many other statistical chart types with TypeScript support and responsive design

—

Pending

Overview

Eval results

Files

Advanced Visualizations

Name: tessl/npm-ant-design--charts
Author: tessl

Specialized charts for complex data visualization including heatmaps, treemaps, chord diagrams, sankey diagrams, and word clouds. Perfect for hierarchical data, relationships, flows, and multi-dimensional analysis.

Capabilities

Heatmap

Creates heatmaps for density visualization and correlation matrices.

/**
 * Heatmap component for density visualization
 * @param props - Heatmap configuration extending G2Plot HeatmapOptions
 * @returns React component
 */
function Heatmap(props: HeatmapConfig): JSX.Element;

interface HeatmapConfig extends HeatmapOptions, ContainerConfig<HeatmapOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

import { Heatmap } from "@ant-design/charts";

const HeatmapExample = () => {
  const data = [
    { name: 'A', day: 'Monday', value: 12 },
    { name: 'A', day: 'Tuesday', value: 15 },
    { name: 'B', day: 'Monday', value: 8 },
    { name: 'B', day: 'Tuesday', value: 22 },
  ];

  const config = {
    data,
    xField: 'name',
    yField: 'day',
    colorField: 'value',
  };

  return <Heatmap {...config} />;
};

Treemap

Creates treemaps for hierarchical data visualization with nested rectangles.

/**
 * Treemap component for hierarchical data
 * @param props - Treemap configuration extending G2Plot TreemapOptions
 * @returns React component
 */
function Treemap(props: TreemapConfig): JSX.Element;

interface TreemapConfig extends TreemapOptions, ContainerConfig<TreemapOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

import { Treemap } from "@ant-design/charts";

const TreemapExample = () => {
  const data = {
    name: 'root',
    children: [
      { name: 'A', value: 60 },
      { name: 'B', value: 40 },
      {
        name: 'C',
        children: [
          { name: 'C1', value: 20 },
          { name: 'C2', value: 15 },
        ],
      },
    ],
  };

  const config = {
    data,
    colorField: 'name',
  };

  return <Treemap {...config} />;
};

Sunburst

Creates sunburst charts for multi-level hierarchical data visualization.

/**
 * Sunburst component for multi-level hierarchical data
 * @param props - Sunburst configuration extending G2Plot SunburstOptions
 * @returns React component
 */
function Sunburst(props: SunburstConfig): JSX.Element;

interface SunburstConfig extends SunburstOptions, ContainerConfig<SunburstOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

import { Sunburst } from "@ant-design/charts";

const SunburstExample = () => {
  const data = {
    name: 'root',
    children: [
      {
        name: 'A',
        children: [
          { name: 'A1', value: 10 },
          { name: 'A2', value: 15 },
        ],
      },
      {
        name: 'B',
        children: [
          { name: 'B1', value: 20 },
          { name: 'B2', value: 8 },
        ],
      },
    ],
  };

  const config = {
    data,
    colorField: 'name',
  };

  return <Sunburst {...config} />;
};

Chord Diagram

Creates chord diagrams for relationship visualization between entities.

/**
 * Chord diagram component for relationship visualization
 * @param props - Chord configuration extending G2Plot ChordOptions
 * @returns React component
 */
function Chord(props: ChordConfig): JSX.Element;

interface ChordConfig extends ChordOptions, ContainerConfig<ChordOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

import { Chord } from "@ant-design/charts";

const ChordExample = () => {
  const data = [
    { source: 'A', target: 'B', value: 10 },
    { source: 'A', target: 'C', value: 20 },
    { source: 'B', target: 'C', value: 15 },
    { source: 'B', target: 'D', value: 8 },
  ];

  const config = {
    data,
    sourceField: 'source',
    targetField: 'target',
    weightField: 'value',
  };

  return <Chord {...config} />;
};

Sankey Diagram

Creates sankey diagrams for flow visualization between nodes.

/**
 * Sankey diagram component for flow visualization
 * @param props - Sankey configuration extending G2Plot SankeyOptions
 * @returns React component
 */
function Sankey(props: SankeyConfig): JSX.Element;

interface SankeyConfig extends SankeyOptions, ContainerConfig<SankeyOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

import { Sankey } from "@ant-design/charts";

const SankeyExample = () => {
  const data = [
    { source: 'A', target: 'X', value: 10 },
    { source: 'A', target: 'Y', value: 5 },
    { source: 'B', target: 'X', value: 8 },
    { source: 'B', target: 'Z', value: 12 },
  ];

  const config = {
    data,
    sourceField: 'source',
    targetField: 'target',
    weightField: 'value',
  };

  return <Sankey {...config} />;
};

Word Cloud

Creates word clouds for text frequency visualization.

/**
 * Word cloud component for text frequency visualization
 * @param props - WordCloud configuration extending G2Plot WordCloudOptions
 * @returns React component
 */
function WordCloud(props: WordCloudConfig): JSX.Element;

interface WordCloudConfig extends WordCloudOptions, ContainerConfig<WordCloudOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

import { WordCloud } from "@ant-design/charts";

const WordCloudExample = () => {
  const data = [
    { text: 'React', value: 100 },
    { text: 'TypeScript', value: 80 },
    { text: 'JavaScript', value: 75 },
    { text: 'Charts', value: 60 },
    { text: 'Visualization', value: 50 },
  ];

  const config = {
    data,
    wordField: 'text',
    weightField: 'value',
    colorField: 'text',
  };

  return <WordCloud {...config} />;
};

Waterfall Chart

Creates waterfall charts for cumulative effects visualization.

/**
 * Waterfall chart component for cumulative effects
 * @param props - Waterfall configuration extending G2Plot WaterfallOptions
 * @returns React component
 */
function Waterfall(props: WaterfallConfig): JSX.Element;

interface WaterfallConfig extends WaterfallOptions, ContainerConfig<WaterfallOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

import { Waterfall } from "@ant-design/charts";

const WaterfallExample = () => {
  const data = [
    { type: 'Starting', value: 100 },
    { type: 'Sales', value: 30 },
    { type: 'Marketing', value: -15 },
    { type: 'Operations', value: -8 },
    { type: 'Ending', value: 107 },
  ];

  const config = {
    data,
    xField: 'type',
    yField: 'value',
  };

  return <Waterfall {...config} />;
};

Funnel Chart

Creates funnel charts for process visualization and conversion analysis.

/**
 * Funnel chart component for process visualization
 * @param props - Funnel configuration extending G2Plot FunnelOptions
 * @returns React component
 */
function Funnel(props: FunnelConfig): JSX.Element;

interface FunnelConfig extends FunnelOptions, ContainerConfig<FunnelOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

import { Funnel } from "@ant-design/charts";

const FunnelExample = () => {
  const data = [
    { stage: 'Visitors', value: 1000 },
    { stage: 'Leads', value: 300 },
    { stage: 'Customers', value: 100 },
    { stage: 'Advocates', value: 30 },
  ];

  const config = {
    data,
    xField: 'stage',
    yField: 'value',
  };

  return <Funnel {...config} />;
};

Install with Tessl CLI

npx tessl i tessl/npm-ant-design--charts

docs

advanced-visualizations.md

specialized-charts.md

statistical-charts.md

tiny-charts.md

tile.json

tessl/npm-ant-design--charts