@domoinc/ca-percent-gauge-with-text
v5.0.32-dev
Published
CAPercentGaugeWithText - Domo Widget
Downloads
27
Readme
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)