@domoinc/icon-gauge v0.0.8

IconGauge

Configuration Options

bodyFontSize

Type: number
Default: 14
Units: px

Font size for the body text

chartName

Type: string
Default: "templateChart"

Name of chart for reporting

color

Type: color
Default: "#333333"

Color for the text, lines, and circle

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.

postfix

Type: string
Default: ""

prefix

Type: string
Default: ""

radius

Type: number
Default: 20

Radius of the circle

shape

Type: d3 selection
Default: ""

undefined

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

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 validate(d) {
	          return this.accessor(d) || this.accessor(d) === 0;
	        }

Default accessor:

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

Total

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[2]);
	        }

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 = [
  ['CUSTOMER GROWTH', 100, 100]
];

var shape = d3.select('#ChangeMe');

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

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

setTimeout(function() {
  chart.draw([['CUSTOMER GROWTH', 40, 100]])
}, 1000);