@domoinc/budget-donut

BudgetDonut

A donut with a budget arc appearing on hover

<img src=media/widget.png height=500 width=500>

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