colors as a generic array arg for both axis and pies
This commit is contained in:
pratu16x7
parent
8d99624b64
commit
caad701ed6
18
dist/frappe-charts.esm.js
vendored
18
dist/frappe-charts.esm.js
vendored
@ -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_new_units_for_dataset(old_x, old_y, d.color || this.colors[i], i, this.y.length);
|
||||
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, 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);
|
||||
|
||||
2
dist/frappe-charts.min.cjs.js
vendored
2
dist/frappe-charts.min.cjs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.esm.js
vendored
2
dist/frappe-charts.min.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.iife.js
vendored
2
dist/frappe-charts.min.iife.js
vendored
File diff suppressed because one or more lines are too long
2
docs/assets/js/frappe-charts.min.js
vendored
2
docs/assets/js/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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) => {
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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": [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
|
||||
}]
|
||||
}
|
||||
@ -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_new_units_for_dataset(old_x, old_y, d.color || this.colors[i], i, this.y.length);
|
||||
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, 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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user