@domoinc/ca-percent-gauge-with-text

CAPercentGaugeWithText

Configuration Options

badValueThreshold

Type: number
Default: 0.33

Any value below this percent indicates something is bad

centerBackgroundArc

Type: boolean
Default: false

undefined

centerFillColor

Type: color
Default: "#FFFFFF"

Color for the background

centerFillOpacity

Type: number
Default: 100
Units: %

Transparency factor of the background (0 is transparent, 100 is full color)

chartName

Type: string
Default: "CAPercentGaugeWithText"

Name of chart for reporting

drawDuration

Type: number
Default: 1500

Draw duration in milliseconds

ease

Type: string
Default: "cubic-in-out"

One the built in d3 easing functions.

fontWeight

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

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

gaugeBadFill

Type: color
Default: "#F27E79"

Fill color that indicates something is bad

gaugeFillPrimaryColor

Type: color
Default: "#73B0D7"

Fill color for the gauge

gaugeGoodFill

Type: color
Default: "#91D0BC"

Fill color that indicates something is good

gaugeNeutralFill

Type: color
Default: "#FCCF84"

Fill color that indicates something is neutral

generalNotFilledColor

Type: color
Default: "#E4E5E5"

Fill color that indicates something is empty

generalSeparatorColor

Type: color
Default: "#FFFFFF"

Border color for each element

goodValueThreshold

Type: number
Default: 0.67

Any value above this percent indicates something is good

height

Type: number
Default: 400
Units: px

Height of the widget

innerArcOffset

Type: number
Default: 0.5

A percentage which controls the width of the background arc. Larger percent => Smaller background arc

innerArcRadius

Type: number
Default: 0.85

A percentage which controls the width of the arcs. Larger percent => Smaller arcs

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: true

Boolean whether or not percent is shown

startArcAtTop

Type: boolean
Default: false

If true, arc begins at the top and moves clockwise

strokeWidth

Type: number
Default: 1
Units: px

Width of the element's border

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

textSize

Type: number
Default: 36
Units: px

Font size for the value

updateSizeableConfigs

Type: boolean
Default: true

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

useColorRanges

Type: boolean
Default: false

If true, use good/neutral/bad fills

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)); }

Default accessor:

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

Events

Dispatch Events

External Events

external:mouseover
external:mouseout

Example

//Setup some fake data
var data = [
  ['Sales', 0.78],
  // ['Sales', -333],
];

//for gauge with text
var aHeight = 172;
var aWidth = 172;

//for gauge
// var aHeight = 400;
// var aWidth = 400;

//Initialze the widget
var chart = d3.select('#vis')
  .select('svg')
  .append('g')
  .attr('transform', 'translate(19,142)') //for gauge with text
  // .attr('transform', 'translate(50,53)') //for gauge
  .chart('CAPercentGaugeWithText')
  .c({
    width: aWidth,
    height: aHeight,
  });

//Render the chart with data
chart.draw(data);

setTimeout(function () {
  chart.trigger('external:mouseover');
}, 2500)

setTimeout(function () {
  chart.trigger('external:mouseout');
}, 3500)