@domoinc/status-indicator-table v1.0.3

StatusIndicatorTable

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)

cellHeight

Type: number
Default: 50
Units: px

Height of each indicator

cellPadding

Type: number
Default: 10

Spacing between each indicator

cellWidth

Type: number
Default: 50
Units: px

Width of each indicator

chartName

Type: string
Default: "StatusIndicatorTable"

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: undefined
Default: undefined

undefined

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

vertical

Type: boolean
Default: true

True if you want a horizontal column, false if you want a horizontal row

width

Type: undefined
Default: undefined

undefined

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 = [
  ['Moe Rogerson', 1000],
  ['Lyle Simpson', 2000],
  ['Tucker House', 3000],
  ['Lizette Styles', 1000],
  ['Tiffani Tuft', 2000],
  ['Sophy Brand', 3000],
  ['Brayden Sargent', 3000],
  ['Rowan Darby', 3000]
];

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

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


chart.c({
    width: 400,
  })
  .draw(data);
chart.c({
    width: 100,
  })
  .draw(data);