tessl/npm-ant-design--plots

A React chart library based on G2 providing 30+ statistical chart components with TypeScript support and extensive customization options

—

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

@ant-design/plots

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

@ant-design/plots is a comprehensive React chart library based on the G2 visualization grammar. It provides 30+ statistical chart components with TypeScript support, responsive design, and extensive customization options designed for modern React applications within the Ant Design ecosystem.

Package Information

Package Name: @ant-design/plots
Package Type: npm
Language: TypeScript
Installation: npm install @ant-design/plots

Core Imports

import { Line, Column, Pie, Bar, Area } from "@ant-design/plots";
import type { LineConfig, ColumnConfig, PieConfig } from "@ant-design/plots";

For CommonJS:

const { Line, Column, Pie, Bar, Area } = require("@ant-design/plots");

Import G2 utilities:

import { G2, ChartEvent, register, measureTextWidth } from "@ant-design/plots";

Basic Usage

import React from "react";
import { Line } from "@ant-design/plots";

const MyChart: React.FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
  ];

  const config = {
    data,
    xField: 'year',
    yField: 'value',
    tooltip: {
      title: 'Year',
    },
  };

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

Architecture

@ant-design/plots is built around several key components:

React Components: Each chart type is a React component that forwards refs to chart instances
G2 Integration: Built on top of G2 visualization grammar with complete G2 API access
Configuration System: Context-based configuration provider for global chart settings
Type System: Full TypeScript integration with specific Config types for each chart
Base Chart: Common BaseChart component that all charts extend from
Chart Factory: Utility function makeChartComp creates chart components dynamically

Capabilities

Basic Chart Types

Core statistical chart components for common data visualization needs.

// Line Charts
const Line: ForwardRefExoticComponent<PropsWithoutRef<LineConfig> & RefAttributes<Chart>>;

// Column Charts  
const Column: ForwardRefExoticComponent<PropsWithoutRef<ColumnConfig> & RefAttributes<Chart>>;

// Bar Charts
const Bar: ForwardRefExoticComponent<PropsWithoutRef<BarConfig> & RefAttributes<Chart>>;

// Area Charts
const Area: ForwardRefExoticComponent<PropsWithoutRef<AreaConfig> & RefAttributes<Chart>>;

// Pie Charts
const Pie: ForwardRefExoticComponent<PropsWithoutRef<PieConfig> & RefAttributes<Chart>>;

// Scatter Plots
const Scatter: ForwardRefExoticComponent<PropsWithoutRef<ScatterConfig> & RefAttributes<Chart>>;

Basic Chart Types

Advanced Chart Types

Specialized chart components for complex data visualization scenarios.

// Dual Axis Charts
const DualAxes: ForwardRefExoticComponent<PropsWithoutRef<DualAxesConfig> & RefAttributes<Chart>>;

// Funnel Charts
const Funnel: ForwardRefExoticComponent<PropsWithoutRef<FunnelConfig> & RefAttributes<Chart>>;

// Radar Charts
const Radar: ForwardRefExoticComponent<PropsWithoutRef<RadarConfig> & RefAttributes<Chart>>;

// Waterfall Charts
const Waterfall: ForwardRefExoticComponent<PropsWithoutRef<WaterfallConfig> & RefAttributes<Chart>>;

// Stock Charts
const Stock: ForwardRefExoticComponent<PropsWithoutRef<StockConfig> & RefAttributes<Chart>>;

Advanced Chart Types

Statistical Chart Types

Statistical analysis and distribution visualization components.

// Histogram
const Histogram: ForwardRefExoticComponent<PropsWithoutRef<HistogramConfig> & RefAttributes<Chart>>;

// Box Plot
const Box: ForwardRefExoticComponent<PropsWithoutRef<BoxConfig> & RefAttributes<Chart>>;

// Violin Plot
const Violin: ForwardRefExoticComponent<PropsWithoutRef<ViolinConfig> & RefAttributes<Chart>>;

// Heatmap
const Heatmap: ForwardRefExoticComponent<PropsWithoutRef<HeatmapConfig> & RefAttributes<Chart>>;

Statistical Chart Types

Specialty Chart Types

Unique visualization components for specific use cases.

// Word Cloud
const WordCloud: ForwardRefExoticComponent<PropsWithoutRef<WordCloudConfig> & RefAttributes<Chart>>;

// Treemap
const Treemap: ForwardRefExoticComponent<PropsWithoutRef<TreemapConfig> & RefAttributes<Chart>>;

// Sankey Diagram
const Sankey: ForwardRefExoticComponent<PropsWithoutRef<SankeyConfig> & RefAttributes<Chart>>;

// Gauge
const Gauge: ForwardRefExoticComponent<PropsWithoutRef<GaugeConfig> & RefAttributes<Chart>>;

// Liquid Chart
const Liquid: ForwardRefExoticComponent<PropsWithoutRef<LiquidConfig> & RefAttributes<Chart>>;

Specialty Chart Types

Tiny Chart Components

Compact chart components optimized for small spaces and dashboard use.

const Tiny: {
  Line: ForwardRefExoticComponent<PropsWithoutRef<TinyLineConfig> & RefAttributes<Chart>>;
  Area: ForwardRefExoticComponent<PropsWithoutRef<TinyAreaConfig> & RefAttributes<Chart>>;
  Column: ForwardRefExoticComponent<PropsWithoutRef<TinyColumnConfig> & RefAttributes<Chart>>;
  Progress: ForwardRefExoticComponent<PropsWithoutRef<TinyProgressConfig> & RefAttributes<Chart>>;
  Ring: ForwardRefExoticComponent<PropsWithoutRef<CommonConfig<TinyRingOptions>> & RefAttributes<Chart>>;
};

Tiny Chart Components

Core Components

Base component that all chart components extend from.

// Base chart component
const Base: ForwardRefExoticComponent<PropsWithoutRef<CommonConfig> & RefAttributes<Chart>>;

Configuration and Context

Global configuration system for setting defaults across all chart types.

const ConfigProvider: ForwardRefExoticComponent<PropsWithoutRef<ConfigProviderProps> & RefAttributes<any>>;

interface ConfigProviderProps extends ConfigValue {
  children?: ReactNode;
}

interface ConfigValue {
  common?: CommonConfig;
  [chartType: string]: any; // Specific chart configurations
}

Configuration System

Utilities and Integration

Utility functions and G2 integration for advanced chart customization.

// Text measurement utility
function measureTextWidth(text: string, font?: string): number;

// G2 module and utilities
const G2: typeof import('@antv/g2');
const ChartEvent: typeof import('@antv/g2').ChartEvent;
const register: typeof import('@antv/g2').register;

Utilities and G2 Integration

Common Types

// React types
type ForwardRefExoticComponent<P> = import('react').ForwardRefExoticComponent<P>;
type PropsWithoutRef<P> = import('react').PropsWithoutRef<P>;
type RefAttributes<T> = import('react').RefAttributes<T>;
type ReactNode = import('react').ReactNode;

// Chart instance interface
interface Chart {
  toDataURL?: (type?: string, encoderOptions?: number) => string;
  downloadImage?: (name?: string, type?: string, encoderOptions?: number) => string;
}

// Common configuration for all charts
interface CommonConfig<T = Spec> extends AttachConfig, ContainerConfig {
  data?: Datum;
  readonly chartType?: string;
}

// Event handling
interface AttachConfig {
  tooltip?: false | Tooltip;
  onReady?: (chart: Chart) => void;
  onEvent?: (chart: Chart, event: PlotEvent) => void;
}

// Data types
type Datum = import('@antv/g2').Data | any[];
type PlotEvent = any;
type Tooltip = import('@antv/g2').TooltipComponent;

// Container configuration
interface ContainerConfig {
  className?: string;
  style?: React.CSSProperties;
  loading?: boolean;
  loadingTemplate?: React.ReactNode;
  errorTemplate?: (error: Error) => React.ReactNode;
}

// G2 types
type Spec = import('@antv/g2').Spec;
type StackYTransform = import('@antv/g2').StackYTransform;
type NormalizeYTransform = import('@antv/g2').NormalizeYTransform;
type SortByTransform = import('@antv/g2').SortByTransform;
type DodgeXTransform = import('@antv/g2').DodgeXTransform;