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

Graph Components

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

Advanced graph visualizations for network data, organizational charts, and flow analysis built on @antv/g6. These components are designed for complex relational data and provide interactive features like zooming, panning, and node interaction.

Capabilities

Flow Analysis Graph

Creates flow analysis graphs with card-style nodes for business process visualization.

/**
 * Flow analysis graph component for business process visualization
 * @param props - FlowAnalysisGraph configuration
 * @returns React component
 */
function FlowAnalysisGraph(props: FlowAnalysisGraphConfig): JSX.Element;

interface FlowAnalysisGraphConfig extends Omit<CommonConfig, 'data'> {
  data: {
    nodes: FlowAnalysisNodeData[];
    edges: FlowGraphEdgeData[];
  };
}

type FlowAnalysisNodeData = NodeData<{
  title?: string;
  items?: CardItems[];
}[]>;

type FlowGraphEdgeData = EdgeData<string>;

Usage Example:

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

const FlowAnalysisExample = () => {
  const data = {
    nodes: [
      {
        id: '1',
        value: [
          {
            title: 'Revenue',
            items: [
              { text: 'Q1', value: '$1.2M' },
              { text: 'Q2', value: '$1.5M' },
            ],
          },
        ],
      },
      {
        id: '2',
        value: [
          {
            title: 'Costs',
            items: [
              { text: 'Marketing', value: '$200K' },
              { text: 'Operations', value: '$800K' },
            ],
          },
        ],
      },
    ],
    edges: [
      { source: '1', target: '2', value: 'flows to' },
    ],
  };

  const config = {
    data,
    autoFit: true,
    fitCenter: true,
  };

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

Radial Tree Graph

Creates radial tree graphs for hierarchical data visualization in a circular layout.

/**
 * Radial tree graph component for hierarchical data
 * @param props - RadialTreeGraph configuration
 * @returns React component
 */
function RadialTreeGraph(props: RadialTreeGraphConfig): JSX.Element;

interface RadialTreeGraphConfig extends CommonConfig {
  data: TreeGraphData;
}

type TreeGraphData = NodeData<{
  title?: string;
  items?: CardItems[];
}[]>;

Usage Example:

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

const RadialTreeExample = () => {
  const data = {
    id: 'root',
    value: [
      {
        title: 'CEO',
        items: [{ text: 'John Doe' }],
      },
    ],
    children: [
      {
        id: 'child1',
        value: [
          {
            title: 'CTO',
            items: [{ text: 'Jane Smith' }],
          },
        ],
        children: [
          {
            id: 'grandchild1',
            value: [
              {
                title: 'Senior Dev',
                items: [{ text: 'Bob Johnson' }],
              },
            ],
          },
        ],
      },
    ],
  };

  const config = {
    data,
    autoFit: true,
    fitCenter: true,
  };

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

Decomposition Tree Graph

Creates decomposition tree graphs for breaking down complex problems or processes.

/**
 * Decomposition tree graph component for problem breakdown
 * @param props - DecompositionTreeGraph configuration
 * @returns React component
 */
function DecompositionTreeGraph(props: DecompositionTreeGraphConfig): JSX.Element;

interface DecompositionTreeGraphConfig extends CommonConfig {
  data: TreeGraphData;
}

Usage Example:

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

const DecompositionTreeExample = () => {
  const data = {
    id: 'problem',
    value: [
      {
        title: 'Main Problem',
        items: [{ text: 'System Performance', value: 'Critical' }],
      },
    ],
    children: [
      {
        id: 'subproblem1',
        value: [
          {
            title: 'Database',
            items: [{ text: 'Slow queries', value: 'High' }],
          },
        ],
      },
      {
        id: 'subproblem2',
        value: [
          {
            title: 'Frontend',
            items: [{ text: 'Bundle size', value: 'Medium' }],
          },
        ],
      },
    ],
  };

  const config = {
    data,
    autoFit: true,
    fitCenter: true,
  };

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

Organization Graph

Creates organization charts for displaying organizational structure.

/**
 * Organization graph component for org charts
 * @param props - OrganizationGraph configuration
 * @returns React component
 */
function OrganizationGraph(props: OrganizationGraphConfig): JSX.Element;

interface OrganizationGraphConfig extends CommonConfig {
  data: TreeGraphData;
}

Usage Example:

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

const OrganizationExample = () => {
  const data = {
    id: 'ceo',
    value: [
      {
        title: 'CEO',
        items: [
          { text: 'Name', value: 'John Doe' },
          { text: 'Department', value: 'Executive' },
        ],
      },
    ],
    children: [
      {
        id: 'cto',
        value: [
          {
            title: 'CTO',
            items: [
              { text: 'Name', value: 'Jane Smith' },
              { text: 'Department', value: 'Technology' },
            ],
          },
        ],
      },
      {
        id: 'cfo',
        value: [
          {
            title: 'CFO',
            items: [
              { text: 'Name', value: 'Bob Wilson' },
              { text: 'Department', value: 'Finance' },
            ],
          },
        ],
      },
    ],
  };

  const config = {
    data,
    autoFit: true,
    fitCenter: true,
  };

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

Fund Flow Graph

Creates fund flow graphs for financial flow analysis and tracking.

/**
 * Fund flow graph component for financial flow analysis
 * @param props - FundFlowGraph configuration
 * @returns React component
 */
function FundFlowGraph(props: FundFlowGraphConfig): JSX.Element;

interface FundFlowGraphConfig extends Omit<CommonConfig, 'data'> {
  data: FlowGraphDatum;
}

interface FlowGraphDatum {
  nodes: FlowGraphNodeData[];
  edges: FlowGraphEdgeData[];
}

type FlowGraphNodeData = NodeData<{
  title?: string;
  items?: CardItems[];
}[]>;

Usage Example:

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

const FundFlowExample = () => {
  const data = {
    nodes: [
      {
        id: 'source',
        value: [
          {
            title: 'Investment Fund',
            items: [
              { text: 'Total', value: '$10M' },
              { text: 'Available', value: '$8M' },
            ],
          },
        ],
      },
      {
        id: 'project1',
        value: [
          {
            title: 'Project Alpha',
            items: [
              { text: 'Allocated', value: '$3M' },
              { text: 'Status', value: 'Active' },
            ],
          },
        ],
      },
      {
        id: 'project2',
        value: [
          {
            title: 'Project Beta',
            items: [
              { text: 'Allocated', value: '$2M' },
              { text: 'Status', value: 'Planning' },
            ],
          },
        ],
      },
    ],
    edges: [
      { source: 'source', target: 'project1', value: '$3M' },
      { source: 'source', target: 'project2', value: '$2M' },
    ],
  };

  const config = {
    data,
    autoFit: true,
    fitCenter: true,
  };

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

Common Graph Configuration

Base Configuration

interface CommonConfig extends GraphContainerConfig {
  /** Auto-fit the graph to container */
  autoFit?: boolean;
  /** Center the graph in container */
  fitCenter?: boolean;
  /** Graph width */
  width?: number;
  /** Graph height */
  height?: number;
  /** Pixel ratio for high-DPI displays */
  pixelRatio?: number;
  /** Graph data */
  data: Datum;
  /** Layout configuration */
  layout?: any;
  /** Edge configuration */
  edgeCfg?: EdgeCfg;
  /** Node configuration */
  nodeCfg?: NodeCfg;
  /** Marker configuration */
  markerCfg: IMarkerCfg;
  /** Minimap configuration */
  minimapCfg?: MiniMapConfig;
  /** Interactive behaviors */
  behaviors?: string[];
  /** Enable animations */
  animate?: boolean;
  /** Adjust layout automatically */
  adjustLayout?: boolean;
  /** Graph ready callback */
  onReady?: (graph: IGraph) => void;
}

interface GraphContainerConfig {
  style?: React.CSSProperties;
  className?: string;
  loading?: boolean;
  loadingTemplate?: React.ReactElement;
  errorTemplate?: (e: Error) => React.ReactNode;
}

Node and Edge Configuration

interface NodeCfg {
  /** Node type */
  type?: string;
  /** Node size */
  size?: number | number[];
  /** Node anchor points */
  anchorPoints?: number[][];
  /** Node style */
  style?: IShapeStyle;
  /** Node label style */
  label?: {
    style?: ILabelStyle;
  };
  /** Node state styles */
  nodeStateStyles?: StateStyles;
  /** Link to node center */
  linkCenter?: boolean;
}

interface EdgeCfg {
  /** Edge type */
  type?: string;
  /** Edge label */
  label?: {
    content?: string | ((edge: EdgeCfg) => string);
    style?: ILabelStyle;
  };
  /** Start arrow */
  startArrow?: IArrowConfig;
  /** End arrow */
  endArrow?: IArrowConfig;
  /** Edge style */
  style?: IShapeStyle;
  /** Edge state styles */
  edgeStateStyles?: StateStyles;
}

Data Structures

interface NodeData<T> {
  id: string;
  value: T;
  children?: NodeData<T>[];
}

interface EdgeData<T> {
  source: string;
  target: string;
  value?: T;
}

interface CardItems {
  text: string | number;
  value?: string | number;
  icon?: string;
}

Deprecated Graph Components

The following graph components are deprecated and will be removed in future versions. They are still available for backward compatibility:

Deprecated Components from obsolescent/graph

/**
 * @deprecated Use OrganizationGraph instead
 */
function OrganizationTreeGraph(props: OrganizationTreeGraphConfig): JSX.Element;

/**
 * @deprecated Use FlowAnalysisGraph instead  
 */
function DagreGraph(props: DagreGraphConfig): JSX.Element;

/**
 * @deprecated Use DecompositionTreeGraph instead
 */
function IndentedTree(props: IndentedTreeConfig): JSX.Element;

/**
 * @deprecated Use FundFlowGraph instead
 */
function DagreFundFlowGraph(props: DagreFundFlowGraphConfig): JSX.Element;

Deprecated Components from obsolescent/graphs

/**
 * @deprecated Use DecompositionTreeGraph instead
 */
function IndentedTreeGraph(props: IndentedTreeGraphConfig): JSX.Element;

/**
 * @deprecated Use OrganizationGraph instead
 */
function OrganizationalGraph(props: OrganizationalGraphConfig): JSX.Element;

/**
 * @deprecated Use RadialTreeGraph instead
 */
function RadialGraph(props: RadialGraphConfig): JSX.Element;

Interactive Features

All graph components support:

Zooming and Panning: Mouse wheel zoom and drag to pan
Node Selection: Click to select nodes
Minimap: Optional minimap for navigation in large graphs
Custom Behaviors: Configurable interaction behaviors
Responsive Layout: Automatic layout adjustment
Animation: Smooth transitions and animations

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