@domoinc/status-indicator v1.0.3

StatusIndicator

The color is based on where the value is in a range (either bad, neutra, or good).

Configuration Options

badFill

Type: color
Default: "#E4584F"

Color when the value is less than the neutral threshold

bodyFontColor

Type: color
Default: "#333333"

Font color for the body text

bodyFontFamily

Type: string
Default: "Open Sans"

Font type for the body text

bodyFontSize

Type: number
Default: 14
Units: px

Font size for the body text

bodyFontWeight

Type: select
Default: {"name":"400 - Regular","value":400}

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

chartName

Type: string
Default: "StatusIndicator"

Name of chart for Reporting.

goodFill

Type: color
Default: "#80C25D"

Color when the value is more than the good threshold

goodValue

Type: array
Default: 3000

height

Type: number
Default: 400
Units: px

Height of the widget

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.

neutralFill

Type: color
Default: "#FACD88"

Color when the value is more than the neutral threshold

neutralValue

Type: array
Default: 2000

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textLength

Type: number
Default: 50
Units: px

Maximum length of the text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

Label

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return line[0] === undefined ? undefined : String(line[0]); }

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

function (line) { return Number(line[1]); }

Events

Dispatch Events

External Events

Example

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

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

//Setup some fake data
var data = [
  ['Quota', 1000],
];

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({
    height: '500px',
    width: '500px'
  })
  .append("g")
  .chart("StatusIndicator")
  .c({
    width: 50,
    height: 50
  });

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

setTimeout(function() {
  chart.draw([['Quota', 2000]]);
}, 1000);

setTimeout(function() {
  chart.draw([['Quota', 3000]]);
}, 2000);