tessl/npm-swimlane--ngx-charts

Declarative charting framework for Angular that renders charts using SVG elements through Angular's binding system with extensive chart type support and D3.js integration

—

Pending

Overview

Eval results

Files

Gauge Charts

Name: tessl/npm-swimlane--ngx-charts
Author: tessl

Gauge components for displaying single values within defined ranges using circular and linear gauge visualizations.

Capabilities

Circular Gauge

Standard circular gauge chart for displaying a single value with customizable ranges and visual indicators.

@Component({ selector: 'ngx-charts-gauge' })
export class GaugeComponent {
  @Input() results: SingleSeries;
  @Input() legend: boolean = false;
  @Input() legendTitle: string = 'Legend';
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
  @Input() min: number = 0;
  @Input() max: number = 100;
  @Input() units: string = '';
  @Input() bigSegments: number = 10;
  @Input() smallSegments: number = 5;
  @Input() showAxis: boolean = true;
  @Input() startAngle: number = -120;
  @Input() angleSpan: number = 240;
  @Input() activeEntries: any[] = [];
  @Input() axisTickFormatting: any;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() valueFormatting: any;
  @Input() showText: boolean = true;
  @Input() margin: number[] = [10, 20, 10, 20];
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() ariaLabel: string = 'gauge chart';
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  @Output() select: EventEmitter<any> = new EventEmitter();
}

Usage Examples:

import { Component } from '@angular/core';

@Component({
  selector: 'app-gauge',
  template: `
    <ngx-charts-gauge
      [results]="gaugeData"
      [min]="0"
      [max]="100"
      [units]="'%'"
      [bigSegments]="10"
      [smallSegments]="5"
      [showAxis]="true"
      [startAngle]="-120"
      [angleSpan]="240"
      [valueFormatting]="valueFormatter"
      (select)="onSelect($event)">
    </ngx-charts-gauge>
  `
})
export class GaugeComponent {
  gaugeData = [
    { name: 'Progress', value: 73 }
  ];

  valueFormatter = (value: number) => `${value}%`;

  onSelect(event: any): void {
    console.log('Gauge selected:', event);
  }
}

Linear Gauge

Horizontal linear gauge for displaying values in a bar-like format.

@Component({ selector: 'ngx-charts-linear-gauge' })
export class LinearGaugeComponent {
  @Input() results: SingleSeries;
  @Input() min: number = 0;
  @Input() max: number = 100;
  @Input() value: number = 0;
  @Input() units: string = '';
  @Input() previousValue: number;
  @Input() valueFormatting: any;
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'linear gauge';
  
  @Output() select: EventEmitter<any> = new EventEmitter();
}

Linear Gauge Usage:

@Component({
  template: `
    <ngx-charts-linear-gauge
      [value]="currentValue"
      [previousValue]="previousValue"
      [min]="0"
      [max]="1000"
      [units]="'units'"
      [valueFormatting]="valueFormatter">
    </ngx-charts-linear-gauge>
  `
})
export class LinearGaugeComponent {
  currentValue = 750;
  previousValue = 650;
  
  valueFormatter = (value: number) => `${value.toLocaleString()} units`;
}

Percent Gauge

Specialized gauge component optimized for percentage values with built-in formatting.

@Component({ selector: 'ngx-charts-percent-gauge' })
export class PercentGaugeComponent {
  @Input() results: SingleSeries;
  @Input() min: number = 0;
  @Input() max: number = 100;
  @Input() value: number = 0;
  @Input() units: string = '%';
  @Input() valueFormatting: any;
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'percent gauge';
  
  @Output() select: EventEmitter<any> = new EventEmitter();
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
}

Percent Gauge Usage:

@Component({
  template: `
    <ngx-charts-percent-gauge
      [results]="percentData"
      [min]="0"
      [max]="100"
      [valueFormatting]="percentFormatter">
    </ngx-charts-percent-gauge>
  `
})
export class PercentComponent {
  percentData = [
    { name: 'Completion', value: 87.5 }
  ];
  
  percentFormatter = (value: number) => `${value.toFixed(1)}%`;
}

Gauge Configuration

Angle Configuration

Control the arc span and starting angle of circular gauges.

// Angle configuration
@Input() startAngle: number = -120; // Starting angle in degrees (-180 to 180)
@Input() angleSpan: number = 240;   // Total angle span in degrees (1 to 360)

// Common configurations:
// Full circle: startAngle = -180, angleSpan = 360
// Semi-circle: startAngle = -90, angleSpan = 180  
// Three-quarter: startAngle = -120, angleSpan = 240
// Quarter circle: startAngle = -45, angleSpan = 90

Tick Configuration

Customize gauge axis ticks and segments.

// Tick mark configuration
@Input() bigSegments: number = 10;   // Number of major tick marks
@Input() smallSegments: number = 5;  // Number of minor ticks between major ticks
@Input() showAxis: boolean = true;   // Show/hide axis and tick marks
@Input() axisTickFormatting: any;    // Custom tick label formatting function

// Example tick formatter
const tickFormatter = (value: number) => {
  if (value >= 1000) return `${value / 1000}K`;
  return value.toString();
};

Range and Scale

Define the value range and scale for gauge measurements.

// Range configuration
@Input() min: number = 0;     // Minimum gauge value
@Input() max: number = 100;   // Maximum gauge value
@Input() units: string = '';  // Unit label (e.g., '%', 'rpm', 'mph')

// The gauge automatically scales the input value to fit within the range
// Values outside the range are clamped to min/max bounds

Supporting Components

// Gauge arc component for rendering the gauge background and value arc
@Component({ selector: 'g[ngx-charts-gauge-arc]' })
export class GaugeArcComponent {
  @Input() backgroundArc: any;
  @Input() valueArc: any;
  @Input() cornerRadius: number;
  @Input() colors: any;
  @Input() isActive: boolean = false;
  @Input() tooltipDisabled: boolean = false;
  @Input() valueFormatting: any;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() animations: boolean = true;
  
  @Output() select: EventEmitter<any> = new EventEmitter();
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
}

// Gauge axis component for rendering tick marks and labels
@Component({ selector: 'g[ngx-charts-gauge-axis]' })
export class GaugeAxisComponent {
  @Input() bigSegments: any[];
  @Input() smallSegments: any[];
  @Input() min: number;
  @Input() max: number;
  @Input() angleSpan: number;
  @Input() startAngle: number;
  @Input() radius: number;
  @Input() valueScale: any;
  @Input() tickFormatting: any;
}

Value Formatting

// Value formatting function type
type ValueFormatting = (value: number) => string;

// Common formatters for different use cases
const percentFormatter: ValueFormatting = (value) => `${value.toFixed(1)}%`;
const currencyFormatter: ValueFormatting = (value) => `$${value.toLocaleString()}`;
const decimalFormatter: ValueFormatting = (value) => value.toFixed(2);
const integerFormatter: ValueFormatting = (value) => Math.round(value).toString();
const unitFormatter = (unit: string): ValueFormatting => (value) => `${value} ${unit}`;

// Custom formatting with thresholds
const thresholdFormatter: ValueFormatting = (value) => {
  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
  if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;
  return value.toString();
};

Color Schemes and Thresholds

// Gauge supports standard color schemes plus threshold-based coloring
@Input() colorScheme: any;
@Input() customColors: any;

// Example threshold-based coloring
const gaugeColorScheme = {
  domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5']
};

// Custom colors for specific value ranges
const customGaugeColors = [
  { name: 'Low', value: '#5AA454' },      // 0-30: Green
  { name: 'Medium', value: '#FFAE42' },   // 30-70: Orange  
  { name: 'High', value: '#E44D25' }      // 70-100: Red
];

Multi-Value Gauges

// Gauges can display multiple values using array input
interface MultiValueGaugeData {
  name: string;
  value: number;
  min?: number;
  max?: number;
}

// Example multi-value gauge data
const multiGaugeData: MultiValueGaugeData[] = [
  { name: 'CPU', value: 65, max: 100 },
  { name: 'Memory', value: 42, max: 100 },
  { name: 'Disk', value: 89, max: 100 }
];

Advanced Features

Previous Value Comparison

Linear gauges support displaying previous values for trend indication.

// Previous value comparison (linear gauge only)
@Input() previousValue: number;

// Automatically shows trend indicator (increase/decrease)
// Renders subtle background bar showing previous position

Animation Control

// Animation configuration
@Input() animations: boolean = true;

// When enabled, provides smooth transitions for:
// - Value changes
// - Arc drawing animations
// - Color transitions
// - Scale updates

Responsive Behavior

// Margin configuration for responsive layout
@Input() margin: number[] = [10, 20, 10, 20]; // [top, right, bottom, left]

// Gauges automatically scale to fit container while maintaining aspect ratio
// Text and tick sizes adjust based on available space

Data Structures

// Gauge data structure
interface GaugeData extends DataItem {
  min?: number;  // Override global min for this value
  max?: number;  // Override global max for this value
}

// Gauge supports both single and multi-value datasets
type GaugeDataSet = GaugeData | GaugeData[];

Accessibility

// ARIA support for screen readers
@Input() ariaLabel: string = 'gauge chart';

// Automatically provides:
// - Value announcements
// - Range descriptions  
// - Progress indicators
// - Keyboard navigation support

Use Cases

Gauge charts are ideal for:

Performance Metrics: CPU usage, memory consumption, disk space
Progress Indicators: Task completion, loading progress, goal achievement
KPI Dashboards: Sales targets, customer satisfaction scores, efficiency ratings
Monitoring Systems: Temperature readings, pressure gauges, speed indicators
Quality Metrics: Test coverage, uptime percentages, error rates

Install with Tessl CLI

npx tessl i tessl/npm-swimlane--ngx-charts

docs