@domoinc/budgetdonut
v2.0.1
Published
BudgetDonut - Domo Widget
Downloads
5
Readme
BudgetDonut
A donut with a budget arc appearing on hover
Configuration Options
bounceOutPercent
Type: number
Default: 1.05
Percent of the inner - outer radius to bounce out on hover
chartName
Type: string
Default: BudgetDonut
Name of chart for reporting
chartPrimarySeriesColors
Type: colorArray
Default: #D9EBFD,#B7DAF5,#90c4e4,#73B0D7,#4E8CBA,#31689B,#DDF4BA,#BBE491,#A0D771,#80C25D,#559E38,#387B26,#FDECAD,#FCCF84,#FBAD56,#FB8D34,#E45621,#A43724,#F3E4FE,#DDC8EF,#C5ACDE,#B391CA,#8F6DC0,#7940A1,#FCD7E6,#FBB6DD,#F395CD,#EE76BF,#CF51AC,#A62A92,#D8F4DE,#ABE4CA,#8DD5BE,#68BEA8,#46998A,#227872,#FDDDDD,#FCBCB7,#FD9A93,#FD7F76,#e45850,#c92e25
The primary colors used to represent series data
colorScale
Type: function
Default: ``
undefined
generalSeparatorColor
Type: color
Default: #FFFFFF
Color of each slice's stroke (separator)
generalWashoutColor
Type: color
Default: #E4E5E5
Fill color of any donut slice that is not being hovered
height
Type: number
Default: 250
Units: px
innerRadius
Type: number
Default: 166.25
Radius to the inside of the Donut
innerTextPadding
Type: number
Default: 20
Padding for the inner text elements
labelFontSize
Type: number
Default: 50
Units: px
The font size used for the label text
labelTextColor
Type: color
Default: #888888
Text color of the label displayed in the center of the donut
outerRadius
Type: number
Default: 273.5
Radius to the outside of the Donut
overBudgetColor
Type: color
Default: #E4584F
Color of budget arc and percent text color when spending is over budget
percentTextSize
Type: undefined
Default: 14
Text size of the percent text
percentageTextPadding
Type: number
Default: 110
Units: px
How far out to move the percentage text
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showInnerTextIndicator
Type: boolean
Default: true
Shows/Hides the text indicator in the center of the donut
sliceStrokeWidth
Type: number
Default: 1
Units: px
Stroke width of each donut slice
sortData
Type: boolean
Default: true
If true it will sort the data in descending order
textFontFamily
Type: string
Default: Open Sans
Tooltip text font family
underBudgetColor
Type: color
Default: #80C25D
Color of budget arc and percent text color when spending is under budget
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueFontSize
Type: number
Default: 48
Units: px
The font size used for the value text
valueTextColor
Type: color
Default: #333
Text color of the value displayed in the center of the donut
width
Type: number
Default: 250
Units: px
Data Definition
actual
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }
Default accessor:
function (line) { return Number(line[1]); }
budget
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }
Default accessor:
function (line) { return Number(line[2]); }
label
Type: string
Default validate:
function (d) {
return this.accessor(d) !== undefined;
}
Default accessor:
function (line) {
return line[0] === undefined ? undefined : String(line[0]);
}
name
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)) && this.accessor(d) >= 0 && this.accessor(d);
}
Default accessor:
function (line) {
return Number(line[1]);
}
Events
Dispatch Events
dispatch:mouseover
dispatch:mouseout
External Events
Example
//Setup some fake data
var data = [
['North', 40, 50 ],
['South', 100, 30 ],
['East', 80, 10 ],
['West', 100, 100 ],
];
var aHeight = 400;
var aWidth = 400;
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr('width', 500 + 'px')
.attr('height', 500 + 'px')
.append('g')
.attr('transform', 'translate(50,50)')
.chart('BudgetDonut')
.c({
'width': aWidth,
'height': aHeight,
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
var dataObjNorth = {
data: ['North', 100, 50],
name: 'North',
series: 'North',
totalData: {
data: ['North', 100, 50],
endAngle: 1.6534698176788387,
startAngle: 0,
value: 100,
}
};
var dataObjSouth = {
data: ['South', 100, 30],
name: 'South',
series: 'South',
totalData: {
data: ['South', 100, 50],
endAngle: 3.3069396353576774,
startAngle: 1.6534698176788387,
value: 100,
}
};
setTimeout(function(d) {
chart.trigger('dispatch:mouseover', dataObjNorth);
chart.trigger('external:mouseover', dataObjNorth);
}, 2000);
setTimeout(function(d) {
chart.trigger('dispatch:mouseover', dataObjSouth);
chart.trigger('external:mouseover', dataObjSouth);
}, 3000);
setTimeout(function(d) {
chart.trigger('dispatch:mouseout');
chart.trigger('external:mouseout');
}, 4000);