UI-2853: Use new Chart declaration following upgrade (#34)

submodules/myOffice/myOffice.css

@@ -121,6 +121,17 @@
 	margin: 7px 0;
 }
 
+#myoffice_container .devices-section-content .devices-canvas-wrapper {
+	width: 130px;
+	height: 130px;
+}
+
+#myoffice_container .numbers-canvas-wrapper {
+	width: 100px;
+	height: 120px;
+	float: left;
+}
+
 #myoffice_container .devices-section-content .devices-chart-legend {
 	margin-left: 150px;
 	margin-right: 10px;

submodules/myOffice/myOffice.js

@@ -67,53 +67,51 @@ define(function(require) {
 						directoryLink: myOfficeData.directoryLink
 					},
 					template = $(monster.template(self, 'myOffice-layout', dataTemplate)),
-					chartOptions = {
-						animateScale: true,
-						segmentShowStroke: false,
-						// segmentStrokeWidth: 1,
-						animationSteps: 50,
-						animationEasing: 'easeOutCirc',
-						percentageInnerCutout: 60
-					},
-					devicesChart = new Chart(template.find('#dashboard_devices_chart').get(0).getContext('2d')).Doughnut(
-						myOfficeData.devicesData.totalCount > 0
-						? $.map(myOfficeData.devicesData, function(val) {
-							return typeof val === 'object' ? {
-								value: val.count,
-								color: val.color
-							} : null;
-						}).sort(function(a, b) { return b.value - a.value; })
-						: [{ value: 1, color: '#DDD' }],
-						chartOptions
-					),
-					assignedNumbersChart = new Chart(template.find('#dashboard_assigned_numbers_chart').get(0).getContext('2d')).Doughnut(
-						myOfficeData.assignedNumbersData.totalCount > 0
-						? $.map(myOfficeData.assignedNumbersData, function(val) {
-							return typeof val === 'object' ? {
-								value: val.count,
-								color: val.color
-							} : null;
-						}).sort(function(a, b) { return b.value - a.value; })
-						: [{ value: 1, color: '#DDD' }],
-						chartOptions
-					),
-					numberTypesChart = new Chart(template.find('#dashboard_number_types_chart').get(0).getContext('2d')).Doughnut(
-						// $.map(myOfficeData.numberTypesData, function(val) {
-						// 	return {
-						// 		value: val.count,
-						// 		color: val.color
-						// 	};
-						// }).sort(function(a, b) { return b.value - a.value ; }),
-						myOfficeData.classifiedNumbers.length > 0
-						? $.map(myOfficeData.classifiedNumbers, function(val, index) {
-							return typeof val === 'object' ? {
-								value: val.count,
-								color: val.color
-							} : null;
-						})
-						: [{ value: 1, color: '#DDD' }],
-						chartOptions
-					);
+					$devicesCanvas = template.find('#dashboard_devices_chart'),
+					$assignedNumbersCanvas = template.find('#dashboard_assigned_numbers_chart'),
+					$classifiedNumbersCanvas = template.find('#dashboard_number_types_chart'),
+					emptyDataSet = [
+						{
+							count: 1,
+							color: '#ddd'
+						}
+					],
+					devicesDataSet = _.chain(myOfficeData.devicesData).omit('totalCount').sortBy('count').value(),
+					assignedNumbersDataSet = _.chain(myOfficeData.assignedNumbersData).omit('totalCount').sortBy('count').value(),
+					classifiedNumbersDataSet = _.chain(myOfficeData.classifiedNumbers).sortBy('count').value(),
+					createDoughnutCanvas = function createDoughnutCanvas($target) {
+						var args = Array.prototype.slice.call(arguments),
+							datasets;
+
+						args.splice(0, 1);
+
+						datasets = args;
+
+						return new Chart($target, $.extend(true, {
+							type: 'doughnut',
+							options: {
+								legend: {
+									display: false
+								},
+								tooltips: {
+									enabled: false
+								},
+								animation: {
+									easing: 'easeOutCirc',
+									animateScale: true
+								},
+								events: []
+							}
+						}, {
+							data: {
+								datasets: datasets
+							}
+						}));
+					};
+
+				devicesDataSet = _.isEmpty(devicesDataSet) ? emptyDataSet : devicesDataSet;
+				assignedNumbersDataSet = _.isEmpty(assignedNumbersDataSet) ? emptyDataSet : assignedNumbersDataSet;
+				classifiedNumbersDataSet = _.isEmpty(classifiedNumbersDataSet) ? emptyDataSet : classifiedNumbersDataSet;
 
 				// Trick to adjust the vertical positioning of the number types legend
 				if (myOfficeData.classifiedNumbers.length <= 3) {
@@ -130,6 +128,24 @@ define(function(require) {
 					.empty()
 					.append(template);
 
+				createDoughnutCanvas($devicesCanvas, {
+					data: _.pluck(devicesDataSet, 'count'),
+					backgroundColor: _.pluck(devicesDataSet, 'color'),
+					borderWidth: 0
+				});
+
+				createDoughnutCanvas($assignedNumbersCanvas, {
+					data: _.pluck(assignedNumbersDataSet, 'count'),
+					backgroundColor: _.pluck(assignedNumbersDataSet, 'color'),
+					borderWidth: 0
+				});
+
+				createDoughnutCanvas($classifiedNumbersCanvas, {
+					data: _.pluck(classifiedNumbersDataSet, 'count'),
+					backgroundColor: _.pluck(classifiedNumbersDataSet, 'color'),
+					borderWidth: 0
+				});
+
 				self.myOfficeCheckWalkthrough();
 
 				callback && callback();

views/myOffice-layout.html

@@ -46,7 +46,9 @@
 				</div>
 				<div class="left-section-content devices-section-content">
 					<div class="devices-chart">
-						<canvas id="dashboard_devices_chart" class="pull-left" width="130" height="130"></canvas>
+						<div class="devices-canvas-wrapper pull-left">
+							<canvas id="dashboard_devices_chart"></canvas>
+						</div>
 						<div class="devices-chart-legend">
 							<ul>
 								{{#each devicesList}}
@@ -164,7 +166,9 @@
 						<span class="number">{{totalNumbers}}</span>
 					</div>
 					<div class="chart-container clearfix">
-						<canvas id="dashboard_assigned_numbers_chart" class="pull-left" width="100" height="120"></canvas>
+						<div class="numbers-canvas-wrapper">
+							<canvas id="dashboard_assigned_numbers_chart"></canvas>
+						</div>
 						<div class="chart-legend assigned-numbers-legend">
 							<ul>
 								{{#each assignedNumbersList}}
@@ -177,7 +181,9 @@
 						</div>
 					</div>
 					<div class="chart-container clearfix">
-						<canvas id="dashboard_number_types_chart" class="pull-left" width="100" height="120"></canvas>
+						<div class="numbers-canvas-wrapper">
+							<canvas id="dashboard_number_types_chart"></canvas>
+						</div>
 						<div class="chart-legend number-types-legend">
 							<ul>
 								{{#each classifiedNumbers}}