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

G2 Integration

Name: tessl/npm-bizcharts
Author: tessl

BizCharts provides full access to the underlying @antv/g2 library through the G2 export, enabling advanced users to leverage the complete G2 API for custom visualizations and advanced chart manipulation.

Capabilities

G2 Library Access

Complete access to @antv/g2 library classes, utilities, and functions for advanced chart customization.

import { G2 } from "bizcharts";

/** Complete G2 library re-export */
declare const G2: {
  /** Core chart class */
  Chart: typeof import('@antv/g2').Chart;
  /** View class for multi-chart layouts */
  View: typeof import('@antv/g2').View;
  /** Geometry base class */
  Geometry: typeof import('@antv/g2').Geometry;
  /** Scale utilities */
  Scale: typeof import('@antv/g2').Scale;
  /** Coordinate system utilities */
  Coordinate: typeof import('@antv/g2').Coordinate;
  /** Interaction utilities */
  Interaction: typeof import('@antv/g2').Interaction;
  /** Animation utilities */
  Animation: typeof import('@antv/g2').Animation;
  /** Utility functions */
  Util: typeof import('@antv/g2').Util;
  /** Global configuration */
  Global: typeof import('@antv/g2').Global;
  /** Theme utilities */
  Theme: typeof import('@antv/g2').Theme;
  /** Shape utilities */
  Shape: typeof import('@antv/g2').Shape;
  /** Event system */
  Event: typeof import('@antv/g2').Event;
  /** Facet system */
  Facet: typeof import('@antv/g2').Facet;
  /** Guide/Annotation system */
  Guide: typeof import('@antv/g2').Guide;
  /** Component system */
  Component: typeof import('@antv/g2').Component;
  [key: string]: any;
};

Usage Examples:

import { G2 } from "bizcharts";

// Create a native G2 chart instance
const chart = new G2.Chart({
  container: 'container',
  width: 400,
  height: 300
});

// Use G2 utilities directly
const colorUtil = G2.Util.color;
const customColor = colorUtil.rgb2hex([255, 0, 0]);

// Access G2 global configuration
G2.Global.animate = false;

Direct G2 Chart Creation

Create and manipulate G2 charts directly for maximum control over visualization behavior.

/**
 * Create a native G2 chart with full API access
 */
function createG2Chart(config: {
  container: string | HTMLElement;
  width?: number;
  height?: number;
  autoFit?: boolean;
  padding?: number | number[];
  theme?: string | object;
  [key: string]: any;
}): import('@antv/g2').Chart;

Usage Examples:

import { G2 } from "bizcharts";

// Create G2 chart with advanced configuration
const chart = new G2.Chart({
  container: 'chart-container',
  width: 600,
  height: 400,
  autoFit: true,
  padding: [20, 40, 50, 40],
  theme: 'dark'
});

// Load data
chart.data(data);

// Create geometries using G2 API
chart.line()
  .position('x*y')
  .color('series')
  .shape('smooth');

// Advanced scale configuration
chart.scale('x', {
  type: 'time',
  tickCount: 10,
  range: [0, 1]
});

// Custom interaction
chart.interaction('active-region');

// Render
chart.render();

G2 View System

Access G2's view system for creating complex multi-chart layouts and coordinated visualizations.

/**
 * G2 View class for multi-chart layouts
 */
declare class G2View {
  constructor(config: {
    container?: string | HTMLElement;
    start?: [number, number];
    end?: [number, number];
    padding?: number | number[];
    [key: string]: any;
  });
  
  data(data: any[]): G2View;
  scale(field: string, config: object): G2View;
  coordinate(type: string, config?: object): G2View;
  axis(field: string, config: boolean | object): G2View;
  legend(field: string, config: boolean | object): G2View;
  tooltip(config: boolean | object): G2View;
  annotation(): any;
  interaction(type: string): G2View;
  render(): void;
  destroy(): void;
}

Usage Examples:

import { G2 } from "bizcharts";

// Create main chart
const chart = new G2.Chart({
  container: 'container',
  width: 800,
  height: 600
});

// Create views for different sections
const topView = chart.createView({
  start: [0, 0.6],
  end: [1, 1],
  padding: [20, 40, 0, 40]
});

const bottomView = chart.createView({
  start: [0, 0],
  end: [1, 0.4],
  padding: [0, 40, 40, 40]
});

// Configure each view independently
topView.data(timeSeriesData)
  .line()
  .position('date*value')
  .color('series');

bottomView.data(barData)
  .interval()
  .position('category*count')
  .color('category');

chart.render();

G2 Utility Functions

Access G2's utility library for data processing, color manipulation, and mathematical operations.

declare const G2Util: {
  /** Color utilities */
  color: {
    rgb2hex(rgb: [number, number, number]): string;
    hex2rgb(hex: string): [number, number, number];
    toRGB(color: string): string;
    modifyAlpha(color: string, alpha: number): string;
  };
  
  /** Mathematical utilities */
  math: {
    snapEqual(v1: number, v2: number, scale: number): boolean;  
    snapFloor(num: number, scale: number): number;
    snapMultiple(v: number, base: number, scale: number): number;
  };
  
  /** Data processing utilities */
  data: {
    getRange(values: number[]): [number, number];
    isInRange(value: number, range: [number, number]): boolean;
    normalizeValue(value: number, range: [number, number]): number;
  };
  
  /** DOM utilities */
  dom: {
    getWidth(el: HTMLElement): number;
    getHeight(el: HTMLElement): number;
    modifyCSS(el: HTMLElement, css: object): void;
  };
  [key: string]: any;
};

Advanced Customization

Use G2's shape, theme, and interaction systems for deep customization.

/**
 * Register custom shapes, themes, and interactions
 */
declare namespace G2Registration {
  /** Register custom geometry shape */
  function registerShape(
    geomType: string,
    shapeName: string,
    shapeConfig: object
  ): void;
  
  /** Register custom theme */
  function registerTheme(
    themeName: string,
    themeConfig: object
  ): void;
  
  /** Register custom interaction */
  function registerInteraction(
    interactionName: string,
    interactionConfig: object
  ): void;
}

Usage Examples:

import { G2 } from "bizcharts";

// Register custom shape
G2.registerShape('point', 'custom-star', {
  draw(cfg, container) {
    // Custom shape drawing logic
    return container.addShape('path', {
      attrs: {
        path: 'M0,0 L10,0 L15,10 L5,15 Z',
        fill: cfg.color,
        stroke: cfg.color
      }
    });
  }
});

// Register custom theme
G2.registerTheme('custom-corporate', {
  colors10: ['#1f77b4', '#ff7f0e', '#2ca02c'],
  backgroundColor: '#fafafa',
  plotBackgroundColor: '#ffffff',
  fontFamily: 'Arial, sans-serif'
});

// Use custom registrations
const chart = new G2.Chart({
  container: 'container',
  theme: 'custom-corporate'
});

chart.point()
  .position('x*y')
  .shape('custom-star');

Integration Patterns

Mixed BizCharts and G2 Usage

Combine BizCharts React components with direct G2 manipulation for maximum flexibility.

import React, { useRef, useEffect } from 'react';
import { Chart, Line, useChartInstance } from 'bizcharts';
import { G2 } from 'bizcharts';

function HybridChart({ data }) {
  const chartRef = useRef();
  const chart = useChartInstance();
  
  useEffect(() => {
    if (chart) {
      // Use G2 API directly on BizCharts instance
      chart.interaction('brush');
      
      // Add custom annotation using G2
      chart.annotation().text({
        position: ['50%', '10%'],
        content: 'Custom G2 Annotation',
        style: {
          fontSize: 14,
          fill: '#666'
        }
      });
      
      chart.render();
    }
  }, [chart]);
  
  return (
    <Chart height={400} data={data} ref={chartRef}>
      <Line position="x*y" />
    </Chart>
  );
}

Performance Optimization with G2

Use G2's advanced features for performance optimization in large datasets.

import { G2 } from "bizcharts";

// Enable G2 performance optimizations
G2.Global.animate = false; // Disable animations for performance
G2.Global.widthRatio = 1;  // Adjust rendering precision

// Use G2's data sampling for large datasets
const chart = new G2.Chart({ container: 'container' });
chart.data(largeDataset);

// Enable geometry sampling
chart.line()
  .position('x*y')
  .size(1) // Thinner lines for performance
  .animate(false); // Disable animations

// Use G2's built-in data sampling
chart.scale('x', {
  type: 'time',
  mask: 'MM-DD', // Simplified labels
  tickCount: 5   // Fewer ticks
});