@domoinc/single-value-gauge v0.1.1

SingleValueGauge

A single value indicator inside a color gauge

Configuration Options

abbrNumber

Type: select
Default: {"name":"Abbreviate","value":true}

Set the format of the number to be fully written out or abbreviated when the value is 1000 or greater (e.g. if abbreviated, 1000 will be 1K)

alignment

Type: select
Default: {"name":"Align Text Left","value":"left"}

The horizontal alignment of the text relative to the widget's chart bounds

animationDuration

Type: number
Default: 500
Units: ms

Duration of time for the initial animation

arrowOffset

Type: number
Default: -6

Distance of arrow from the text (negative is further away)

badRangeValue

Type: number
Default: 40

Any value below this number indicates something is bad

chartName

Type: string
Default: "templateChart"

Name of chart for reporting

decTrendColor

Type: color
Default: "#E4584F"

Fill color that indicates something is bad

fontSize

Type: number
Default: 48
Units: px

Font size for the text

fontWeight

Type: select
Default: {"name":"300 - Light","value":300}

Greater values correspond to increased font boldness (some fonts do not support every value)

gaugeBadStroke

Type: color
Default: "#C92E25"

Border color that indicates something is bad

gaugeGoodStroke

Type: color
Default: "#559E38"

Border color that indicates something is good

gaugeNeutralStroke

Type: color
Default: "#D7D9DA"

Border color that indicates something is neutral

goodRangeValue

Type: number
Default: 70

Any value above this number indicates something is good

height

Type: number
Default: 400
Units: px

Height of the widget

hoverEvent

Type: select
Default: {"name":"Enable","value":true}

Enable or disable the animation triggered by moving the mouse over the widget

incTrendColor

Type: color
Default: "#80C25D"

Fill color that indicates something is good

indicatorColor

Type: color
Default: "#333333"

Font color for the text

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

magnitudeFontSize

Type: number
Default: null
Units: px

Font size for the abbreviation symbol for large numbers (e.g. if 1000 abbreviates to '1K', the symbol is 'K')

noTrendColor

Type: color
Default: "#E5E5E5"

Fill color that indicates something is neutral

numDecimal

Type: select
Default: {"name":"Default"}

Set the number of decimal places to be displayed

offsetArrowHeadWidth

Type: number
Default: 0
Units: px

Width of the arrowhead (0 is default, negative and positive is narrower and wider respectively)

offsetArrowLength

Type: number
Default: 0
Units: px

Length of the arrow (0 is default, negative and positive is shorter and longer respectively)

offsetArrowWidth

Type: number
Default: 0
Units: px

Width of the arrow (0 is default, negative and positive is narrower and wider respectively)

postfixFontSize

Type: number
Default: null
Units: px

Font size for the suffix (if empty, the font size will be the same as the font size above)

postfixString

Type: string
Default: ""

Text added after the indicator

prefixFontSize

Type: number
Default: null
Units: px

Font size for the prefix (if empty, the font size will be the same as the font size above)

prefixString

Type: string
Default: ""

Text added before the indicator

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showArrow

Type: select
Default: {"name":"Show","value":true}

Flag that dictates if the trend arrow is drawn

symbolAlignment

Type: select
Default: {"name":"Align Text Bottom","value":"bottom"}

The vertical alignment of the prefix, suffix, and abbreviation symbol relative to the number value

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

useContrastColors

Type: boolean
Default: false

Flag that dictates whether or not to use the good and bad color configs

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

Label

Type: string

Default validate:

function validate(d) {
	          return this.accessor(d) || this.accessor(d) === 0;
	        }

Default accessor:

function accessor(line) {
	          return line[0];
	        }

Value

Type: number

Default validate:

function validate(d) {
	          return (this.accessor(d) || this.accessor(d) === 0) && this.accessor(d) >= 0;
	        }

Default accessor:

function accessor(line) {
	          return parseFloat(line[1]);
	        }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['Gauge Value', 87]
];

//Initialze the widget
var chartGroup = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g')
  .attr('transform', 'translate(125,125)');
  
var chart = new SingleValueGauge(chartGroup)
  .c({
    width: 250,
    height: 250
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);