@domoinc/person-bubble-with-gauge

PersonBubbleWithGauge

A person bubble with a percent gauge

Configuration Options

chartName

Type: string
Default: "PersonBubbleWithGauge"

Name of chart for Reporting.

gaugeFillColor

Type: color
Default: "#73B0D7"

Fill color of the gauge

gaugeNotFilledColor

Type: color
Default: "#E4E5E5"

Color of the portion of the gauge that is not filled

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.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showPercent

Type: boolean
Default: false

Boolean whether or not percent is shown

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

ActualValue

Type: number

Default validate:

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

Default accessor:

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

ImageURL

Type: string

Default validate:

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

Default accessor:

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

Name

Type: string

Default validate:

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

Default accessor:

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

ProjectedValue

Type: number

Default validate:

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

Default accessor:

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

Events

Dispatch Events

dispatch:mouseover
dispatch:mouseout
dispatch:click

External Events

external:mouseover
external:mouseout
external:click

Example

//Setup some fake data
var data = [
  ['James Stewart', 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg', 1000, 800]
];

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

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