colors as a generic array arg for both axis and pies

dist/frappe-charts.esm.js

@@ -1271,7 +1271,7 @@ class AxisChart extends BaseChart {
 		if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
 			this.y.map((d, i) => {
 				d.svg_units = [];
-				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
+				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, this.colors[i]);
 				this.make_new_units(d, i);
 				this.calc_y_dependencies();
 			});
@@ -1283,7 +1283,7 @@ class AxisChart extends BaseChart {
 		}
 		this.y.map((d, i) => {
 			d.svg_units = [];
-			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
+			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, this.colors[i]);
 			this.make_new_units(d, i);
 		});
 	}
@@ -1296,7 +1296,7 @@ class AxisChart extends BaseChart {
 			data.push({values: d.values});
 			d.svg_units = [];
 
-			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
+			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, this.colors[i]);
 			this.make_new_units(d, i);
 		});
 
@@ -1320,7 +1320,7 @@ class AxisChart extends BaseChart {
 		this.make_new_units_for_dataset(
 			this.x_axis_positions,
 			d.y_tops,
-			d.color || this.colors[i],
+			this.colors[i],
 			i,
 			this.y.length
 		);
@@ -1413,7 +1413,7 @@ class AxisChart extends BaseChart {
 					return {
 						title: set.title,
 						value: y_format ? this.format_tooltip_y(set.values[i]) : set.values[i],
-						color: set.color || this.colors[j],
+						color: this.colors[j],
 					};
 				});
 
@@ -1451,7 +1451,7 @@ class AxisChart extends BaseChart {
 			this.sum_units
 		);
 
-		// this.make_path && this.make_path(d, i, old_x, old_y, d.color || this.colors[i]);
+		// this.make_path && this.make_path(d, i, old_x, old_y, this.colors[i]);
 
 		this.updating = false;
 	}
@@ -1593,8 +1593,8 @@ class AxisChart extends BaseChart {
 			// Pre-prep, equilize no of positions between old and new
 			let [old_x, old_y, new_x, new_y] = this.calc_old_and_new_postions(d, i);
 			if(this.no_of_extra_pts >= 0) {
-				this.make_path && this.make_path(d, i, old_x, old_y, d.color || this.colors[i]);
+				this.make_path && this.make_path(d, i, old_x, old_y, this.colors[i]);
-				this.make_new_units_for_dataset(old_x, old_y, d.color || this.colors[i], i, this.y.length);
+				this.make_new_units_for_dataset(old_x, old_y, this.colors[i], i, this.y.length);
 			}
 			d.path && this.animate_path(d, i, old_x, old_y, new_x, new_y);
 			this.animate_units(d, i, old_x, old_y, new_x, new_y);
@@ -1603,7 +1603,7 @@ class AxisChart extends BaseChart {
 		// TODO: replace with real units
 		setTimeout(() => {
 			this.y.map((d, i) => {
-				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
+				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, this.colors[i]);
 				this.make_new_units(d, i);
 			});
 		}, 400);

docs/assets/js/index.js

@@ -9,7 +9,6 @@ let bar_composite_data = {
 
 	datasets: [{
 		"title": "Events",
-		"color": "orange",
 		"values": report_count_list,
 		// "formatted": report_count_list.map(d => d + " reports")
 	}]
@@ -18,7 +17,6 @@ let bar_composite_data = {
 let line_composite_data = {
 	labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
 	datasets: [{
-		"color": "green",
 		"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
 		// "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40],
 		// "values": [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40],
@@ -51,6 +49,7 @@ let bar_composite_chart = new Chart ({
 	data: bar_composite_data,
 	type: 'bar',
 	height: 180,
+	colors: ['orange'],
 	is_navigable: 1,
 	is_series: 1
 	// region_fill: 1
@@ -61,6 +60,7 @@ let line_composite_chart = new Chart ({
 	data: line_composite_data,
 	type: 'line',
 	height: 180,
+	colors: ['green'],
 	is_series: 1
 });
 
@@ -77,15 +77,15 @@ let type_data = {
 
 	datasets: [
 		{
-			title: "Some Data", color: "light-blue",
+			title: "Some Data",
 			values: [25, 40, 30, 35, 8, 52, 17, -4]
 		},
 		{
-			title: "Another Set", color: "violet",
+			title: "Another Set",
 			values: [25, 50, -10, 15, 18, 32, 27, 14]
 		},
 		{
-			title: "Yet Another", color: "blue",
+			title: "Yet Another",
 			values: [15, 20, -3, -15, 58, 12, -17, 37]
 		}
 	]
@@ -97,6 +97,7 @@ let type_chart = new Chart({
 	data: type_data,
 	type: 'bar',
 	height: 250,
+	colors: ['light-blue', 'violet', 'blue'],
 	is_series: 1,
     format_tooltip_x: d => (d + '').toUpperCase(),
     format_tooltip_y: d => d + ' pts'
@@ -131,7 +132,6 @@ let trends_data = {
 		2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016] ,
 	datasets: [
 		{
-			"color": "blue",
 			"values": [132.9, 150.0, 149.4, 148.0,  94.4,  97.6,  54.1,  49.2,  22.5, 18.4,
 				39.3, 131.0, 220.1, 218.9, 198.9, 162.4,  91.0,  60.5,  20.6,  14.8,
 				33.9, 123.0, 211.1, 191.8, 203.3, 133.0,  76.1,  44.9,  25.1,  11.6,
@@ -147,6 +147,7 @@ let plot_chart_args = {
 	data: trends_data,
 	type: 'line',
 	height: 250,
+	colors: ['blue'],
 	is_series: 1,
 	show_dots: 0,
 	heatline: 1,
@@ -206,7 +207,6 @@ let get_update_data = (source_array, length=10) => {
 let update_data = {
 	labels: get_update_data(update_data_all_labels),
 	datasets: [{
-		"color": "red",
 		"values": get_update_data(update_data_all_values)
 	}],
 	"specific_values": [
@@ -224,6 +224,7 @@ let update_chart = new Chart({
 	data: update_data,
 	type: 'line',
 	height: 250,
+	colors: ['red'],
 	is_series: 1,
 	region_fill: 1
 });
@@ -286,8 +287,6 @@ let events_data = {
 	labels: ["Ganymede", "Callisto", "Io", "Europa"],
 	datasets: [
 		{
-			// "title": "km",
-			"color": "grey",
 			"values": distances,
 			"formatted": distances.map(d => d*1000 + " km")
 		}
@@ -300,6 +299,7 @@ let events_chart = new Chart({
 	data: events_data,
 	type: 'bar',
 	height: 250,
+	colors: ['grey'],
 	is_navigable: 1,
 });
 
@@ -320,11 +320,9 @@ let aggr_data = {
 	labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
 	datasets: [
 		{
-			"color": "purple",
 			"values": [25, 40, 30, 35, 8, 52, 17]
 		},
 		{
-			"color": "orange",
 			"values": [25, 50, -10, 15, 18, 32, 27]
 
 		}
@@ -335,7 +333,8 @@ let aggr_chart = new Chart({
 	parent: "#chart-aggr",
 	data: aggr_data,
 	type: 'bar',
-	height: 250
+	height: 250,
+	colors: ['purple', 'orange'],
 });
 
 document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {

docs/index.html

@@ -64,15 +64,15 @@
 
     datasets: [
       {
-        title: "Some Data", color: "light-blue",
+        title: "Some Data",
         values: [25, 40, 30, 35, 8, 52, 17, -4]
       },
       {
-        title: "Another Set", color: "violet",
+        title: "Another Set",
         values: [25, 50, -10, 15, 18, 32, 27, 14]
       },
       {
-        title: "Yet Another", color: "blue",
+        title: "Yet Another",
         values: [15, 20, -3, -15, 58, 12, -17, 37]
       }
     ]
@@ -83,8 +83,15 @@
     title: "My Awesome Chart",
     data: data,
     type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
-    // colors: ['#000000', '#ece7f2', 'light-blue'], // use direct hex code or preset color
     height: 250,
+
+    colors: ['#7cd6fd', 'violet', 'blue'],
+    // hex-codes or these preset colors;
+    // defaults (in order):
+    // ['light-blue', 'blue', 'violet', 'red',
+    // 'orange', 'yellow', 'green', 'light-green',
+    // 'purple', 'magenta', 'grey', 'dark-grey']
+
     format_tooltip_x: d => (d + '').toUpperCase(),
     format_tooltip_y: d => d + ' pts'
   });</code></pre>
@@ -99,10 +106,6 @@
               <p class="text-muted">
                 <a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
               </p>
-
-              <pre><code class="hljs javascript margin-vertical-px">  // colors: 'green', 'blue', 'violet', 'red', 'orange',
-  //         'yellow', 'light-blue', 'light-green', 'purple',
-  //         'magenta', 'grey', 'dark-grey'</code></pre>
             </div>
           </div>
 

docs/test_data.json

@@ -1,10 +0,0 @@
-{
-	"labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
-	"datasets": [{
-		"color": "green",
-		"values": [0, 0, 0, 61500, 82936.88, 24010, 0, 0, 25840, 508048.82, 116820, 0],
-		"formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
-		"y_tops": [100, 100, 100, 89.75, 86.17718666666667, 95.99833333333333, 100, 100, 95.69333333333333, 15.32519666666667, 80.53, 100],
-		"data_units": [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
-	}]
-}

src/scripts/charts/AxisChart.js

@@ -235,7 +235,7 @@ export default class AxisChart extends BaseChart {
 		if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
 			this.y.map((d, i) => {
 				d.svg_units = [];
-				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
+				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, this.colors[i]);
 				this.make_new_units(d, i);
 				this.calc_y_dependencies();
 			});
@@ -247,7 +247,7 @@ export default class AxisChart extends BaseChart {
 		}
 		this.y.map((d, i) => {
 			d.svg_units = [];
-			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
+			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, this.colors[i]);
 			this.make_new_units(d, i);
 		});
 	}
@@ -260,7 +260,7 @@ export default class AxisChart extends BaseChart {
 			data.push({values: d.values});
 			d.svg_units = [];
 
-			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
+			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, this.colors[i]);
 			this.make_new_units(d, i);
 		});
 
@@ -284,7 +284,7 @@ export default class AxisChart extends BaseChart {
 		this.make_new_units_for_dataset(
 			this.x_axis_positions,
 			d.y_tops,
-			d.color || this.colors[i],
+			this.colors[i],
 			i,
 			this.y.length
 		);
@@ -377,7 +377,7 @@ export default class AxisChart extends BaseChart {
 					return {
 						title: set.title,
 						value: y_format ? this.format_tooltip_y(set.values[i]) : set.values[i],
-						color: set.color || this.colors[j],
+						color: this.colors[j],
 					};
 				});
 
@@ -415,7 +415,7 @@ export default class AxisChart extends BaseChart {
 			this.sum_units
 		);
 
-		// this.make_path && this.make_path(d, i, old_x, old_y, d.color || this.colors[i]);
+		// this.make_path && this.make_path(d, i, old_x, old_y, this.colors[i]);
 
 		this.updating = false;
 	}
@@ -557,8 +557,8 @@ export default class AxisChart extends BaseChart {
 			// Pre-prep, equilize no of positions between old and new
 			let [old_x, old_y, new_x, new_y] = this.calc_old_and_new_postions(d, i);
 			if(this.no_of_extra_pts >= 0) {
-				this.make_path && this.make_path(d, i, old_x, old_y, d.color || this.colors[i]);
+				this.make_path && this.make_path(d, i, old_x, old_y, this.colors[i]);
-				this.make_new_units_for_dataset(old_x, old_y, d.color || this.colors[i], i, this.y.length);
+				this.make_new_units_for_dataset(old_x, old_y, this.colors[i], i, this.y.length);
 			}
 			d.path && this.animate_path(d, i, old_x, old_y, new_x, new_y);
 			this.animate_units(d, i, old_x, old_y, new_x, new_y);
@@ -567,7 +567,7 @@ export default class AxisChart extends BaseChart {
 		// TODO: replace with real units
 		setTimeout(() => {
 			this.y.map((d, i) => {
-				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
+				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, this.colors[i]);
 				this.make_new_units(d, i);
 			});
 		}, 400);