@domoinc/range-gauge v5.0.2
RangeGauge
A gauge displaying a range, an average and a current value
Configuration Options
caretWidth
Type: number
Default: 8
Units: px
undefined
chartName
Type: string
Default: "RangeGauge"
Name of chart for reporting
currentIndicatorFontSize
Type: number
Default: 14
Units: px
Font size for the value
currentIndicatorPostfix
Type: string
Default: ""
Text added after the value
currentIndicatorPrefix
Type: string
Default: ""
Text added before the value
currentIndicatorTransitionDuration
Type: number
Default: 500
Transition time of the current indicator (in ms)
generalFillBadColor
Type: color
Default: "#E4584F"
The range will start at this color
generalFillGoodColor
Type: color
Default: "#80C25D"
The range will transition to this color from the middle to the end
generalFillNeutralColor
Type: color
Default: "#E5E5E5"
The range will transition to this color from the start to the middle
height
Type: number
Default: 12
Units: px
Height of the bar
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.
markerFontSize
Type: number
Default: 12
Units: px
Font size for the indicator
markerTextPrefix
Type: string
Default: "AVG "
Text added before the indicator
markerTextSuffix
Type: string
Default: ""
Text added after the indicator
minMaxFontSize
Type: number
Default: 12
Units: px
Font size for the range values
minMaxPostfix
Type: string
Default: ""
Text added after the range values
minMaxPrefix
Type: string
Default: ""
Text added before the range values
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showMarkerTextValue
Type: select
Default: {"name":"Show","value":true}
Show or hide the indicator value
textColor
Type: color
Default: "#333"
Text color of all labels and values
textFontFamily
Type: string
Default: "Open Sans"
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 bar
Data Definition
Average
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }
Default accessor:
function (line) { return Number(line[3]); }
CurrentValue
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }
Default accessor:
function (line) { return Number(line[0]); }
RangeMax
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }
Default accessor:
function (line) { return Number(line[2]); }
RangeMin
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }
Default accessor:
function (line) { return Number(line[1]); }
Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [
['5000', 0, '10000', 7500]
];
var height = 12;
var width = 400;
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
width: 500,
height: 500
})
.append('g')
.attr('transform', 'translate(50,250)')
.chart('RangeGauge')
.c({
'width': width,
'height': height,
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data[0]);
// d3.select('svg').insert('rect', ':first-child')
// .attr('height', 500)
// .attr('width', 500)
// .attr('stroke', 'black')
// .style('fill', 'white')
// .style('fill-opacity', 0);
// setTimeout(function() {
// chart.draw(['2000', 0, 10000, 6000])
// }, 2000);