tessl/npm-echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Data Operations

Name: tessl/npm-echarts
Author: tessl

Data management capabilities for setting chart data, streaming updates, coordinate conversions, and data transformations.

Capabilities

Data Management

Core functions for managing chart data and streaming updates.

interface EChartsType {
  /**
   * Append data to series for streaming/real-time updates
   * @param params - Data append parameters
   */
  appendData(params: AppendDataParams): void;
}

interface AppendDataParams {
  /** Target series index */
  seriesIndex: number;
  /** Data to append */
  data: any[][];
  /** Whether to shift data (remove oldest when adding new) */
  shift?: boolean;
}

Coordinate Conversion

Convert between logical coordinates and pixel coordinates.

interface EChartsType {
  /**
   * Convert logical coordinates to pixel coordinates
   * @param finder - Coordinate system finder
   * @param value - Logical coordinate value
   * @returns Pixel coordinates
   */
  convertToPixel(finder: ConvertFinder, value: number | number[]): number | number[];
  
  /**
   * Convert pixel coordinates to logical coordinates
   * @param finder - Coordinate system finder  
   * @param value - Pixel coordinate value
   * @returns Logical coordinates
   */
  convertFromPixel(finder: ConvertFinder, value: number | number[]): number | number[];
  
  /**
   * Check if pixel coordinate is within coordinate system
   * @param finder - Coordinate system finder
   * @param value - Pixel coordinate
   * @returns True if point is within coordinate system
   */
  containPixel(finder: ConvertFinder, value: number[]): boolean;
}

interface ConvertFinder {
  seriesIndex?: number;
  seriesId?: string;
  seriesName?: string;
  geoIndex?: number;
  geoId?: string;
  geoName?: string;
  xAxisIndex?: number;
  xAxisId?: string;
  xAxisName?: string;
  yAxisIndex?: number;
  yAxisId?: string;
  yAxisName?: string;
  gridIndex?: number;
  gridId?: string;
  gridName?: string;
}

Usage Example:

// Convert data value to pixel position
const pixelPoint = chart.convertToPixel({ seriesIndex: 0 }, [3, 100]);

// Convert mouse position to data value
const dataPoint = chart.convertFromPixel({ seriesIndex: 0 }, [200, 150]);

// Check if mouse is over chart area
const isInChart = chart.containPixel({ gridIndex: 0 }, [mouseX, mouseY]);

Visual Properties

Access visual encoding properties of chart elements.

interface EChartsType {
  /**
   * Get visual properties from series/data
   * @param finder - Data finder
   * @param visualType - Visual property type
   * @returns Visual property value
   */
  getVisual(finder: VisualFinder, visualType: string): any;
}

interface VisualFinder {
  seriesIndex: number;
  dataIndex?: number;
}

Types

type DataValue = string | number | Date | (string | number | Date)[];

interface DatasetOption {
  id?: string;
  source?: any[] | { [key: string]: any }[];
  dimensions?: (string | DimensionDefinition)[];
  sourceHeader?: boolean;
  transform?: DataTransformOption[];
  fromDatasetIndex?: number;
  fromDatasetId?: string;
  fromTransformResult?: number;
}

interface DimensionDefinition {
  name?: string;
  type?: 'number' | 'ordinal' | 'time';
  displayName?: string;
}

Install with Tessl CLI