@tremorvideo/pie

Component Pie

Pie component handles the rendering of simple pie / donut chart using d3.

Model Structure

{
	data: [{
		classname: "data1",
		value: 60
	}, {
		classname: "data2",
		value: 60
	}, {
		classname: "data3",
		value: 120
	}, {
		classname: "data4",
		value: 60
	}]
}

Controller

Main

Pie.Main initializes and hooks Model.Main and View.Main

var controller = new Pie.Main({
	model: {
		data: data
	},
	view: {
		el: "#pie",
		width: 200,
		height: 200,
		radius: 90
	}
});

controller.model.set("data", data);

Percentage

Pie.Percentage initializes and hooks Model.Percentage and View.Main or View.Percentage based on initialization option.

var controller = new Pie.Percentage({
	model: {
		percentage: 0
	},
	view: {
		el: "#pie",
		width: 200,
		height: 200,
		radius: 90,
		innerRadius: 70,
		startAngle: 35,
		endAngle: 325,
		showLabel: false
	}
});

controller.model.set("percentage", 70);

Widget

Pie.Widget initializes and hooks Model.Percentage and View.Widget.

var controller = new Pie.Widget({
	model: {
		percentage: 0,
		icon: '<i class="s-blu-viewable-completions"></i>',
		label: 'Impression<br>Share'
	},
	view: {
		el: "#pie",
		showTotal: true
	}
});

controller.model.set("percentage", 70);