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

Chart Container

Name: tessl/npm-bizcharts
Author: tessl

The Chart component is the foundational container for all BizCharts visualizations. It manages the canvas, coordinate system, data binding, and provides the context for all child components.

Capabilities

Chart Component

Creates a chart container with canvas rendering, data management, and coordinate system setup.

/**
 * Chart container component that provides the foundation for BizCharts visualizations
 */
interface IChartProps extends IViewProps {
  /** Force chart update */
  forceUpdate?: boolean;
  /** Chart container DOM element or ID */
  container?: HTMLElement;
  /** Chart width in pixels */
  width?: number;
  /** Chart height in pixels */
  height?: number;  
  /** Auto-fit to container size */
  autoFit?: boolean;
  /** Disable data comparison for performance */
  notCompareData?: boolean;
  /** Device pixel ratio for high-DPI displays */
  pixelRatio?: number;
  /** Chart padding using CSS box model */
  padding?: ViewPadding;
  /** Enable local refresh optimization */
  localRefresh?: boolean;
  /** Chart visibility */
  visible?: boolean;
  /** Default interaction behaviors */
  defaultInteractions?: string[];
  /** Limit geometry rendering within plot area */
  limitInPlot?: boolean;
  /** Chart theme name or theme object */
  theme?: object | string;
  /** Pure mode for performance optimization */
  pure?: boolean;
  
  // Mouse events
  onMousedown?: EventFunc;
  onMouseup?: EventFunc;
  onDblclick?: EventFunc;
  onMouseenter?: EventFunc;
  onMouseout?: EventFunc;
  onMouseover?: EventFunc;
  onMousemove?: EventFunc;
  onMouseleave?: EventFunc;
  onContextmenu?: EventFunc;
  
  // Touch events
  onTouchstart?: EventFunc;
  onTouchmove?: EventFunc;
  onTouchend?: EventFunc;
  onTouchcancel?: EventFunc;
  
  // Chart lifecycle events  
  onPlotClick?: EventFunc;
  onPlotDblclick?: EventFunc;
  onPlotMousedown?: EventFunc;
  onPlotMouseup?: EventFunc;
  onPlotMouseenter?: EventFunc;
  onPlotMouseleave?: EventFunc;
  onPlotMousemove?: EventFunc;
  onPlotContextmenu?: EventFunc;
  
  // Geometry events
  onGetG2Instance?: (chart: any) => void;
}

interface IViewProps {
  /** Chart data array */
  data?: any[];
  /** Data filter function */
  filter?: any;
  /** Child components */
  children?: React.ReactNode;
}

declare const Chart: React.FC<IChartProps>;

Usage Examples:

import React from "react";
import { Chart, Line } from "bizcharts";

// Basic chart setup
function BasicChart() {
  const data = [
    { x: 1, y: 2 },
    { x: 2, y: 5 },
    { x: 3, y: 3 }
  ];

  return (
    <Chart
      height={400}
      width={600}
      data={data}
      autoFit
      padding={[20, 20, 95, 80]}
    >
      <Line position="x*y" />
    </Chart>
  );
}

// Chart with theme and interactions
function ThemedChart() {
  return (
    <Chart
      height={400}
      data={data}
      theme="dark"
      defaultInteractions={['brush-filter']}
      onPlotClick={(e) => console.log('Plot clicked:', e)}
    >
      <Line position="x*y" />
    </Chart>
  );
}

// Chart with custom container
function CustomContainerChart() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  return (
    <div>
      <div ref={containerRef} />
      <Chart
        container={containerRef.current}
        height={400}
        data={data}
        pixelRatio={2}
      >
        <Line position="x*y" />
      </Chart>
    </div>
  );
}

View Component

Creates a chart view for multi-view charts and nested visualizations.

/**
 * Chart view component for creating multi-view charts
 */
interface IViewProps {
  /** View data array */
  data?: any[];
  /** Data filter function or configuration */  
  filter?: any;
  /** Child geometry and chart components */
  children?: React.ReactNode;
  /** View region definition */
  region?: {
    start?: [number, number];
    end?: [number, number];
  };
  /** View padding */
  padding?: ViewPadding;
  /** View coordinate system */
  coordinate?: any;
  /** View interactions */
  interactions?: string[];
  /** View animation */
  animate?: boolean;
}

declare const View: React.FC<IViewProps>;

Usage Examples:

import React from "react";
import { Chart, View, Line, Area } from "bizcharts";

// Multi-view chart
function MultiViewChart() {
  const data1 = [/* first dataset */];
  const data2 = [/* second dataset */];

  return (
    <Chart height={400} autoFit>
      <View data={data1} region={{ start: [0, 0], end: [0.5, 1] }}>
        <Line position="x*y" />
      </View>
      <View data={data2} region={{ start: [0.5, 0], end: [1, 1] }}>
        <Area position="x*y" />
      </View>
    </Chart>
  );
}

// Filtered view
function FilteredViewChart() {
  return (
    <Chart height={400} data={data} autoFit>
      <View filter={[['category', '=', 'A']]}>
        <Line position="x*y" color="category" />
      </View>
    </Chart>
  );
}

Types

// Padding configuration
type ViewPadding = number | [number, number] | [number, number, number] | [number, number, number, number];

// Event handler function
type EventFunc = (event: IEvent) => void;

// Event object
interface IEvent {
  target?: any;
  view?: View;
  gEvent?: any;
  event?: any;
  x?: number;
  y?: number;
  clientX?: number;
  clientY?: number;
  type?: string;
  [key: string]: any;
}