File

src/gauge-defaults.service.ts

Index

Properties

Properties

animated
animated: boolean
Type : boolean

Whether to animate changing the gauge

animationDuration
animationDuration: number
Type : number

Animation duration in seconds

color
color: function
Type : function

Function that returns a string color value for the gauge''s fill (value dial)

dialClass
dialClass: string
Type : string

The CSS class of the gauge's dial

dialEndAngle
dialEndAngle: number
Type : number

The angle in degrees to end the dial. This MUST be less than dialStartAngle

dialRadius
dialRadius: number
Type : number

The radius of the gauge

dialStartAngle
dialStartAngle: number
Type : number

The angle in degrees to start the dial

gaugeClass
gaugeClass: string
Type : string

The CSS class of the gauge

label
label: function
Type : function

Function that returns a string label that will be rendered in the center. This function will be passed the current value

max
max: number
Type : number

The maximum value for the gauge

min
min: number
Type : number

The minumum value for the gauge

showValue
showValue: boolean
Type : boolean

Whether to show the value at the center of the gauge

value
value: number
Type : number

The value of the gauge

valueClass
valueClass: string
Type : string

The CSS class of the gauge's text

valueDialClass
valueDialClass: string
Type : string

The CSS class of the gauge's fill (value dial)

export interface GaugeOptions {
  /**
   * The angle in degrees to start the dial
   */
  dialStartAngle?: number;

  /**
   * The angle in degrees to end the dial. This MUST be less than dialStartAngle
   */
  dialEndAngle?: number;

  /**
   * The radius of the gauge
   */
  dialRadius?: number;

  /**
   * The minumum value for the gauge
   */
  min?: number;

  /**
   * The maximum value for the gauge
   */
  max?: number;

  /**
   * Function that returns a string label that will be rendered in the center. This function will be passed the current value
   */
  label?: (value: number) => string;

  /**
   * Function that returns a string color value for the gauge''s fill (value dial)
   */
  color?: (value: number) => string;

  /**
   * Whether to show the value at the center of the gauge
   */
  showValue?: boolean;

  /**
   * The CSS class of the gauge
   */
  gaugeClass?: string;

  /**
   * The CSS class of the gauge's dial
   */
  dialClass?: string;

  /**
   * The CSS class of the gauge's fill (value dial)
   */
  valueDialClass?: string;

  /**
   * 	The CSS class of the gauge's text
   */
  valueClass?: string;

  /**
   * The value of the gauge
   */
  value?: number;

  /**
   * Whether to animate changing the gauge
   */
  animated?: boolean;

  /**
   * Animation duration in seconds
   */
  animationDuration?: number;
}

export class GaugeDefaults implements GaugeOptions {
  /**
   * The angle in degrees to start the dial
   */
  dialStartAngle: number = 135;

  /**
   * The angle in degrees to end the dial. This MUST be less than dialStartAngle
   */
  dialEndAngle: number = 45;

  /**
   * The radius of the gauge
   */
  dialRadius: number = 40;

  /**
   * The minimum value for the gauge
   */
  min: number = 0;

  /**
   * The maximum value for the gauge
   */
  max: number = 100;

  /**
   * Function that returns a string label that will be rendered in the center. This function will be passed the current value
   */
  label: (value: number) => string;

  /**
   * Function that returns a string color value for the gauge''s fill (value dial)
   */
  color: (value: number) => string;

  /**
   * Whether to show the value at the center of the gauge
   */
  showValue: boolean = true;

  /**
   * The CSS class of the gauge
   */
  gaugeClass: string = 'gauge';

  /**
   * The CSS class of the gauge's dial
   */
  dialClass: string = 'dial';

  /**
   * The CSS class of the gauge's fill (value dial)
   */
  valueDialClass: string = 'value';

  /**
   * 	The CSS class of the gauge's text
   */
  valueClass: string = 'value-text';

  /**
   * The value of the gauge
   */
  value: number;

  /**
   * Whether to animate changing the gauge
   */
  animated: boolean = false;

  /**
   * Animation duration in seconds
   */
  animationDuration: number;
}

results matching ""

    No results matching ""