tessl/npm-bizcharts

A powerful React charting and data visualization library built on top of @antv/g2, providing easy-to-use React components for creating interactive charts and visualizations with TypeScript support

—

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

G Components

Name: tessl/npm-bizcharts
Author: tessl

BizCharts provides access to low-level G rendering components through the GComponents export, enabling custom shape creation, direct canvas manipulation, and advanced rendering control for specialized visualization needs.

Capabilities

Core G Components

Low-level rendering components for creating custom shapes and graphics directly on the canvas.

declare const GComponents: {
  /** Canvas container component */
  Canvas: React.FC<CanvasProps>;
  /** Group container for organizing elements */
  Group: React.FC<GroupProps>;
  /** Circle shape component */
  Circle: React.FC<CircleProps>;
  /** Ellipse shape component */
  Ellipse: React.FC<EllipseProps>;
  /** Image component for bitmap graphics */
  Image: React.FC<ImageProps>;
  /** Line shape component */
  Line: React.FC<LineProps>;
  /** Marker/symbol component */
  Marker: React.FC<MarkerProps>;
  /** Path component for complex shapes */
  Path: React.FC<PathProps>;
  /** Polygon shape component */
  Polygon: React.FC<PolygonProps>;
  /** Polyline component for connected lines */
  Polyline: React.FC<PolylineProps>;
  /** Rectangle shape component */
  Rect: React.FC<RectProps>;
  /** Text rendering component */
  Text: React.FC<TextProps>;
  /** ReactG render function */
  render: (element: React.ReactElement, container: HTMLElement) => void;
};

Canvas Component

Root canvas container for G component rendering with pixel-perfect control.

/**
 * Canvas container component for G rendering
 */
interface CanvasProps {
  /** Canvas width in pixels */
  width: number;
  /** Canvas height in pixels */ 
  height: number;
  /** Device pixel ratio */
  pixelRatio?: number;
  /** Canvas renderer type */
  renderer?: 'canvas' | 'svg';
  /** Container DOM element */
  container?: HTMLElement;
  /** Enable local refresh optimization */
  localRefresh?: boolean;
  /** Canvas cursor style */
  cursor?: string;
  /** Background color */
  background?: string;
  
  // Event handlers
  onClick?: (event: any) => void;
  onMousedown?: (event: any) => void;
  onMouseup?: (event: any) => void;
  onMousemove?: (event: any) => void;
  onMouseenter?: (event: any) => void;
  onMouseleave?: (event: any) => void;
}

declare const Canvas: React.FC<CanvasProps>;

Usage Examples:

import { GComponents } from "bizcharts";
const { Canvas, Group, Circle, Text } = GComponents;

function CustomVisualization() {
  return (
    <Canvas width={400} height={300} renderer="canvas">
      <Group>
        <Circle
          attrs={{
            x: 100,
            y: 100,
            r: 50,
            fill: '#1890ff',
            stroke: '#096dd9',
            lineWidth: 2
          }}
        />
        <Text
          attrs={{
            x: 100,
            y: 100,
            text: 'Custom',
            fontSize: 14,
            fill: '#fff',
            textAlign: 'center',
            textBaseline: 'middle'
          }}
        />
      </Group>
    </Canvas>
  );
}

Shape Components

Individual shape components for precise graphic control.

/**
 * Circle shape component
 */
interface CircleProps {
  attrs: {
    /** X center coordinate */
    x: number;
    /** Y center coordinate */
    y: number;
    /** Circle radius */
    r: number;
    /** Fill color */
    fill?: string;
    /** Stroke color */
    stroke?: string;
    /** Stroke width */
    lineWidth?: number;
    /** Opacity */
    opacity?: number;
    /** Cursor style */
    cursor?: string;
  };
  /** Component visibility */
  visible?: boolean;
  /** Z-index for layering */
  zIndex?: number;
}

/**
 * Rectangle shape component
 */
interface RectProps {
  attrs: {
    /** X coordinate */
    x: number;
    /** Y coordinate */
    y: number;
    /** Rectangle width */
    width: number;
    /** Rectangle height */
    height: number;
    /** Fill color */
    fill?: string;
    /** Stroke color */
    stroke?: string;
    /** Stroke width */
    lineWidth?: number;
    /** Corner radius */
    radius?: number | [number, number, number, number];
    /** Opacity */
    opacity?: number;
  };
  visible?: boolean;
  zIndex?: number;
}

/**
 * Text rendering component
 */
interface TextProps {
  attrs: {
    /** X coordinate */
    x: number;
    /** Y coordinate */
    y: number;
    /** Text content */
    text: string;
    /** Font size */
    fontSize?: number;
    /** Font family */
    fontFamily?: string;
    /** Font weight */
    fontWeight?: string | number;
    /** Text color */
    fill?: string;
    /** Text alignment */
    textAlign?: 'left' | 'center' | 'right';
    /** Baseline alignment */
    textBaseline?: 'top' | 'middle' | 'bottom';
    /** Text rotation angle */
    rotate?: number;
    /** Opacity */
    opacity?: number;
  };
  visible?: boolean;
  zIndex?: number;
}

/**
 * Line shape component
 */
interface LineProps {
  attrs: {
    /** Start X coordinate */
    x1: number;
    /** Start Y coordinate */
    y1: number;
    /** End X coordinate */
    x2: number;
    /** End Y coordinate */
    y2: number;
    /** Line color */
    stroke: string;
    /** Line width */
    lineWidth?: number;
    /** Line dash pattern */
    lineDash?: number[];
    /** Line cap style */
    lineCap?: 'butt' | 'round' | 'square';
    /** Opacity */
    opacity?: number;
  };
  visible?: boolean;
  zIndex?: number;
}

/**
 * Path component for complex shapes
 */
interface PathProps {
  attrs: {
    /** SVG path string */
    path: string;
    /** Fill color */
    fill?: string;
    /** Stroke color */
    stroke?: string;
    /** Stroke width */
    lineWidth?: number;
    /** Line dash pattern */
    lineDash?: number[];
    /** Opacity */
    opacity?: number;
  };
  visible?: boolean;
  zIndex?: number;
}

Group Component

Container component for organizing and transforming multiple shapes together.

/**
 * Group container for organizing G components
 */
interface GroupProps {
  /** Group position and transformation */
  attrs?: {
    /** X translation */
    x?: number;
    /** Y translation */
    y?: number;
    /** Rotation angle in radians */
    rotate?: number;
    /** Scale factor */
    scale?: number | [number, number];
    /** Transformation matrix */
    matrix?: number[];
    /** Opacity for entire group */
    opacity?: number;
  };
  /** Group visibility */
  visible?: boolean;
  /** Z-index for layering */
  zIndex?: number;
  /** Child components */
  children?: React.ReactNode;
  
  // Event handlers
  onClick?: (event: any) => void;
  onMouseenter?: (event: any) => void;
  onMouseleave?: (event: any) => void;
}

declare const Group: React.FC<GroupProps>;

Usage Examples:

import { GComponents } from "bizcharts";
const { Canvas, Group, Circle, Rect, Text } = GComponents;

function GroupedShapes() {
  return (
    <Canvas width={500} height={400}>
      <Group 
        attrs={{ x: 50, y: 50, rotate: Math.PI / 6 }}
        onClick={(e) => console.log('Group clicked')}
      >
        <Rect
          attrs={{
            x: 0, y: 0,
            width: 100, height: 60,
            fill: '#f0f0f0',
            stroke: '#d9d9d9',
            radius: 4
          }}
        />
        <Text
          attrs={{
            x: 50, y: 30,
            text: 'Rotated Group',
            fontSize: 12,
            fill: '#333',
            textAlign: 'center',
            textBaseline: 'middle'
          }}
        />
        <Circle
          attrs={{
            x: 20, y: 45,
            r: 5,
            fill: '#52c41a'
          }}
        />
      </Group>
    </Canvas>
  );
}

ReactG Render Function

Direct rendering function for G components outside of React component trees.

/**
 * Render G components directly to DOM container
 */
function render(
  element: React.ReactElement,
  container: HTMLElement
): void;

Usage Examples:

import { GComponents } from "bizcharts";
const { Canvas, Circle, render } = GComponents;

// Render G components directly
const container = document.getElementById('chart-container');

const customGraphic = (
  <Canvas width={300} height={200}>
    <Circle
      attrs={{
        x: 150,
        y: 100,
        r: 40,
        fill: '#1890ff'
      }}
    />
  </Canvas>
);

render(customGraphic, container);

Advanced Usage Patterns

Custom Shape Creation

Use G components to create reusable custom shapes for specialized visualizations.

import React from 'react';
import { GComponents } from "bizcharts";
const { Group, Path, Circle, Text } = GComponents;

function CustomIcon({ x, y, size, color, label }) {
  const iconPath = `M${x},${y} L${x+size},${y+size/2} L${x},${y+size} Z`;
  
  return (
    <Group attrs={{ x, y }}>
      <Path
        attrs={{
          path: iconPath,
          fill: color,
          stroke: '#000',
          lineWidth: 1
        }}
      />
      <Circle
        attrs={{
          x: size/2,
          y: size/2,
          r: 3,
          fill: '#fff'
        }}
      />
      <Text
        attrs={{
          x: size/2,
          y: size + 15,
          text: label,
          fontSize: 10,
          fill: '#666',
          textAlign: 'center'
        }}
      />
    </Group>
  );
}

Animation with G Components

Animate G components using React state and effects.

import React, { useState, useEffect } from 'react';
import { GComponents } from "bizcharts";
const { Canvas, Circle } = GComponents;

function AnimatedCircle() {
  const [radius, setRadius] = useState(10);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setRadius(r => r === 50 ? 10 : r + 2);
    }, 100);
    
    return () => clearInterval(timer);
  }, []);
  
  return (
    <Canvas width={200} height={200}>
      <Circle
        attrs={{
          x: 100,
          y: 100,
          r: radius,
          fill: '#1890ff',
          opacity: 0.8
        }}
      />
    </Canvas>
  );
}

Integration with Chart Data

Combine G components with chart data for custom overlays and annotations.

import React from 'react';
import { Chart, Line, GComponents } from "bizcharts";
const { Canvas, Group, Rect, Text } = GComponents;

function ChartWithCustomOverlay({ data, annotations }) {
  return (
    <div style={{ position: 'relative' }}>
      <Chart height={400} data={data}>
        <Line position="x*y" />
      </Chart>
      
      {/* Custom overlay using G components */}
      <div style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}>
        <Canvas width={400} height={400} renderer="svg">
          {annotations.map((annotation, index) => (
            <Group key={index} attrs={{ x: annotation.x, y: annotation.y }}>
              <Rect
                attrs={{
                  x: -20, y: -10,
                  width: 40, height: 20,
                  fill: '#ff4d4f',
                  opacity: 0.8,
                  radius: 2
                }}
              />
              <Text
                attrs={{
                  x: 0, y: 0,
                  text: annotation.label,
                  fontSize: 10,
                  fill: '#fff',
                  textAlign: 'center',
                  textBaseline: 'middle'
                }}
              />
            </Group>
          ))}
        </Canvas>
      </div>
    </div>
  );
}