Cleanup pie chart

docs/assets/js/index.js

@@ -88,7 +88,7 @@ let type_chart = new Chart({
 	parent: "#chart-types",
 	title: "My Awesome Chart",
 	data: type_data,
-	type: 'pie',
+	type: 'bar',
 	height: 250,
 	// is_series: 1
 });

docs/index.html

@@ -85,10 +85,10 @@
   });</code></pre>
               <div id="chart-types" class="border"></div>
               <div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-type='bar'>Bar Chart</button>
+                <button type="button" class="btn btn-sm btn-secondary active" data-type='bar'>Bar Chart</button>
                 <button type="button" class="btn btn-sm btn-secondary" data-type='line'>Line Chart</button>
-                <button type="button" class="btn btn-sm btn-secondary active" data-type='pie'>Pie Chart</button>
                 <button type="button" class="btn btn-sm btn-secondary" data-type='scatter'>Scatter Chart</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
                 <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
               </div>
               <p class="text-muted">

src/scripts/charts.js

@@ -21,7 +21,7 @@ const chartTypes = {
 	scatter: ScatterChart,
 	percentage: PercentageChart,
 	heatmap: Heatmap,
-	pie:PieChart
+	pie: PieChart
 };
 
 function getChartByType(chartType = 'line', options) {

src/scripts/charts/BaseChart.js

@@ -38,7 +38,7 @@ export default class BaseChart {
 		}
 		this.has_legend = has_legend;
 
-		this.chart_types = ['line', 'scatter', 'bar', 'percentage', 'heatmap','pie'];
+		this.chart_types = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie'];
 
 		this.set_margins(height);
 	}
@@ -51,11 +51,11 @@ export default class BaseChart {
 
 		// Only across compatible types
 		let compatible_types = {
-			bar: ['line', 'scatter', 'percentage','pie'],
-			line: ['scatter', 'bar', 'percentage','pie'],
-			pie: ['line', 'scatter', 'percentage','bar'],
-			scatter: ['line', 'bar', 'percentage','pie'],
-			percentage: ['bar', 'line', 'scatter','pie'],
+			bar: ['line', 'scatter', 'percentage', 'pie'],
+			line: ['scatter', 'bar', 'percentage', 'pie'],
+			pie: ['line', 'scatter', 'percentage', 'bar'],
+			scatter: ['line', 'bar', 'percentage', 'pie'],
+			percentage: ['bar', 'line', 'scatter', 'pie'],
 			heatmap: []
 		};
 

src/scripts/charts/PieChart.js

@@ -1,6 +1,6 @@
 import BaseChart from './BaseChart';
 import $ from '../helpers/dom';
-import {LightenDarkenColor} from '../helpers/utils';
+import { lightenDarkenColor } from '../helpers/utils';
 const ANGLE_RATIO = Math.PI / 180;
 const FULL_ANGLE = 360;
 
@@ -119,13 +119,13 @@ export default class PieChart extends BaseChart {
 				angle:diffAngle
 			});
 			if(init){
-				this.elements_to_animate.push([{unit: slice, array: this.slices, index: this.slices.length - 1}, 
-					{d:this.makeArcPath(startPosition,endPosition)}, 
+				this.elements_to_animate.push([{unit: slice, array: this.slices, index: this.slices.length - 1},
+					{d:this.makeArcPath(startPosition,endPosition)},
 					650, "easein",null,{
 						d:curPath
 					}]);
 			}
-			
+
 		});
 		if(init){
 			this.run_animation();
@@ -152,7 +152,7 @@ export default class PieChart extends BaseChart {
 			}
 		}, 650);
 	}
-	
+
 	calTranslateByAngle(property){
 		const{radius,hoverRadio} = this;
 		const position = PieChart.getPositionByAngle(property.startAngle+(property.angle / 2),radius);
@@ -162,7 +162,7 @@ export default class PieChart extends BaseChart {
 		if(!path) return;
 		if(flag){
 			$.transform(path,this.calTranslateByAngle(this.slicesProperties[i]));
-			path.setAttribute('fill',LightenDarkenColor(this.colors[i],50));
+			path.setAttribute('fill',lightenDarkenColor(this.colors[i],50));
 			let g_off = $.offset(this.svg);
 			let x = e.pageX - g_off.left + 10;
 			let y = e.pageY - g_off.top - 10;

src/scripts/helpers/dom.js

@@ -116,6 +116,7 @@ $.runSVGAnimation = (svg_container, elements) => {
 
 	return anim_svg;
 };
+
 $.transform = (element, style)=>{
 	element.style.transform = style;
 	element.style.webkitTransform = style;
@@ -123,10 +124,12 @@ $.transform = (element, style)=>{
 	element.style.mozTransform = style;
 	element.style.oTransform = style;
 };
+
 $.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_values={}) => {
 
 	let anim_element = element.cloneNode(true);
 	let new_element = element.cloneNode(true);
+
 	for(var attributeName in props) {
 		let animate_element;
 		if(attributeName === 'transform') {
@@ -136,6 +139,7 @@ $.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_v
 		}
 		let current_value = old_values[attributeName] || element.getAttribute(attributeName);
 		let value = props[attributeName];
+
 		let anim_attr = {
 			attributeName: attributeName,
 			from: current_value,

src/scripts/helpers/utils.js

@@ -17,7 +17,7 @@ function limitColor(r){
 	return r;
 }
 
-export function LightenDarkenColor(col,amt) {
+export function lightenDarkenColor(col,amt) {
 	let usePound = false;
 	if (col[0] == "#") {
 		col = col.slice(1);