jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

add semantic tooltip formatting

Browse Source
This commit is contained in:
pratu16x7 2017-11-14 05:17:38 +05:30
parent 3de049c451
commit e3d9ed0eae
10 changed files with 48 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
dist/frappe-charts.min.cjs.js vendored
View File

@ -1045,8 +1045,6 @@ var BaseChart = function () {
subtitle = _ref$subtitle === undefined ? '' : _ref$subtitle, subtitle = _ref$subtitle === undefined ? '' : _ref$subtitle,
_ref$colors = _ref.colors, _ref$colors = _ref.colors,
colors = _ref$colors === undefined ? [] : _ref$colors, colors = _ref$colors === undefined ? [] : _ref$colors,
_ref$format_lambdas = _ref.format_lambdas,
format_lambdas = _ref$format_lambdas === undefined ? {} : _ref$format_lambdas,
_ref$summary = _ref.summary, _ref$summary = _ref.summary,
summary = _ref$summary === undefined ? [] : _ref$summary, summary = _ref$summary === undefined ? [] : _ref$summary,
_ref$is_navigable = _ref.is_navigable, _ref$is_navigable = _ref.is_navigable,
@ -1066,7 +1064,6 @@ var BaseChart = function () {
this.subtitle = subtitle; this.subtitle = subtitle;
this.data = data; this.data = data;
this.format_lambdas = format_lambdas;
this.specific_values = data.specific_values || []; this.specific_values = data.specific_values || [];
this.summary = summary; this.summary = summary;
@ -1369,9 +1366,8 @@ var AxisChart = function (_BaseChart) {
_this.is_series = args.is_series; _this.is_series = args.is_series;
_this.get_y_label = _this.format_lambdas.y_label; _this.format_tooltip_y = args.format_tooltip_y;
_this.get_y_tooltip = _this.format_lambdas.y_tooltip; _this.format_tooltip_x = args.format_tooltip_x;
_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
_this.zero_line = _this.height; _this.zero_line = _this.height;
@ -1730,6 +1726,16 @@ var AxisChart = function (_BaseChart) {
var _this11 = this; var _this11 = this;
if (!this.y_min_tops) return; if (!this.y_min_tops) return;
var titles = this.x;
if (this.format_tooltip_x && this.format_tooltip_x(this.x[0])) {
titles = this.x.map(function (d) {
return _this11.format_tooltip_x(d);
});
}
var y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]);
for (var i = this.x_axis_positions.length - 1; i >= 0; i--) { for (var i = this.x_axis_positions.length - 1; i >= 0; i--) {
var x_val = this.x_axis_positions[i]; var x_val = this.x_axis_positions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1]; // let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
@ -1737,16 +1743,15 @@ var AxisChart = function (_BaseChart) {
var x = x_val + this.translate_x; var x = x_val + this.translate_x;
var y = this.y_min_tops[i] + this.translate_y; var y = this.y_min_tops[i] + this.translate_y;
var title = this.x.formatted && this.x.formatted.length > 0 ? this.x.formatted[i] : this.x[i]; var title = titles[i];
var values = this.y.map(function (set$$1, j) { var values = this.y.map(function (set$$1, j) {
return { return {
title: set$$1.title, title: set$$1.title,
value: set$$1.formatted ? set$$1.formatted[i] : set$$1.values[i], value: y_format ? _this11.format_tooltip_y(set$$1.values[i]) : set$$1.values[i],
color: set$$1.color || _this11.colors[j] color: set$$1.color || _this11.colors[j]
}; };
}); });
// TODO: upside-down tooltips for negative values?
this.tip.set_values(x, y, title, '', values); this.tip.set_values(x, y, title, '', values);
this.tip.show_tip(); this.tip.show_tip();
break; break;
@ -2547,10 +2552,6 @@ var PercentageChart = function (_BaseChart) {
_this.type = 'percentage'; _this.type = 'percentage';
_this.get_y_label = _this.format_lambdas.y_label;
_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
_this.max_slices = 10; _this.max_slices = 10;
_this.max_legend_points = 6; _this.max_legend_points = 6;
@ -2729,9 +2730,6 @@ var PieChart = function (_BaseChart) {
var _this = possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, args)); var _this = possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, args));
_this.type = 'pie'; _this.type = 'pie';
_this.get_y_label = _this.format_lambdas.y_label;
_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
_this.elements_to_animate = null; _this.elements_to_animate = null;
_this.hoverRadio = args.hoverRadio || 0.1; _this.hoverRadio = args.hoverRadio || 0.1;
_this.max_slices = 10; _this.max_slices = 10;

30
dist/frappe-charts.min.esm.js vendored
View File

@ -1043,8 +1043,6 @@ var BaseChart = function () {
subtitle = _ref$subtitle === undefined ? '' : _ref$subtitle, subtitle = _ref$subtitle === undefined ? '' : _ref$subtitle,
_ref$colors = _ref.colors, _ref$colors = _ref.colors,
colors = _ref$colors === undefined ? [] : _ref$colors, colors = _ref$colors === undefined ? [] : _ref$colors,
_ref$format_lambdas = _ref.format_lambdas,
format_lambdas = _ref$format_lambdas === undefined ? {} : _ref$format_lambdas,
_ref$summary = _ref.summary, _ref$summary = _ref.summary,
summary = _ref$summary === undefined ? [] : _ref$summary, summary = _ref$summary === undefined ? [] : _ref$summary,
_ref$is_navigable = _ref.is_navigable, _ref$is_navigable = _ref.is_navigable,
@ -1064,7 +1062,6 @@ var BaseChart = function () {
this.subtitle = subtitle; this.subtitle = subtitle;
this.data = data; this.data = data;
this.format_lambdas = format_lambdas;
this.specific_values = data.specific_values || []; this.specific_values = data.specific_values || [];
this.summary = summary; this.summary = summary;
@ -1367,9 +1364,8 @@ var AxisChart = function (_BaseChart) {
_this.is_series = args.is_series; _this.is_series = args.is_series;
_this.get_y_label = _this.format_lambdas.y_label; _this.format_tooltip_y = args.format_tooltip_y;
_this.get_y_tooltip = _this.format_lambdas.y_tooltip; _this.format_tooltip_x = args.format_tooltip_x;
_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
_this.zero_line = _this.height; _this.zero_line = _this.height;
@ -1728,6 +1724,16 @@ var AxisChart = function (_BaseChart) {
var _this11 = this; var _this11 = this;
if (!this.y_min_tops) return; if (!this.y_min_tops) return;
var titles = this.x;
if (this.format_tooltip_x && this.format_tooltip_x(this.x[0])) {
titles = this.x.map(function (d) {
return _this11.format_tooltip_x(d);
});
}
var y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]);
for (var i = this.x_axis_positions.length - 1; i >= 0; i--) { for (var i = this.x_axis_positions.length - 1; i >= 0; i--) {
var x_val = this.x_axis_positions[i]; var x_val = this.x_axis_positions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1]; // let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
@ -1735,16 +1741,15 @@ var AxisChart = function (_BaseChart) {
var x = x_val + this.translate_x; var x = x_val + this.translate_x;
var y = this.y_min_tops[i] + this.translate_y; var y = this.y_min_tops[i] + this.translate_y;
var title = this.x.formatted && this.x.formatted.length > 0 ? this.x.formatted[i] : this.x[i]; var title = titles[i];
var values = this.y.map(function (set$$1, j) { var values = this.y.map(function (set$$1, j) {
return { return {
title: set$$1.title, title: set$$1.title,
value: set$$1.formatted ? set$$1.formatted[i] : set$$1.values[i], value: y_format ? _this11.format_tooltip_y(set$$1.values[i]) : set$$1.values[i],
color: set$$1.color || _this11.colors[j] color: set$$1.color || _this11.colors[j]
}; };
}); });
// TODO: upside-down tooltips for negative values?
this.tip.set_values(x, y, title, '', values); this.tip.set_values(x, y, title, '', values);
this.tip.show_tip(); this.tip.show_tip();
break; break;
@ -2545,10 +2550,6 @@ var PercentageChart = function (_BaseChart) {
_this.type = 'percentage'; _this.type = 'percentage';
_this.get_y_label = _this.format_lambdas.y_label;
_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
_this.max_slices = 10; _this.max_slices = 10;
_this.max_legend_points = 6; _this.max_legend_points = 6;
@ -2727,9 +2728,6 @@ var PieChart = function (_BaseChart) {
var _this = possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, args)); var _this = possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, args));
_this.type = 'pie'; _this.type = 'pie';
_this.get_y_label = _this.format_lambdas.y_label;
_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
_this.elements_to_animate = null; _this.elements_to_animate = null;
_this.hoverRadio = args.hoverRadio || 0.1; _this.hoverRadio = args.hoverRadio || 0.1;
_this.max_slices = 10; _this.max_slices = 10;

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
docs/assets/js/index.js
View File

@ -22,7 +22,6 @@ let line_composite_data = {
"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0], "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],
// "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],
// "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"],
}] }]
}; };
@ -97,7 +96,9 @@ let type_chart = new Chart({
data: type_data, data: type_data,
type: 'bar', type: 'bar',
height: 250, height: 250,
is_series: 1 is_series: 1,
format_tooltip_x: d => (d + '').toUpperCase(),
format_tooltip_y: d => d + ' pts'
}); });
Array.prototype.slice.call( Array.prototype.slice.call(

4
docs/index.html
View File

@ -83,7 +83,9 @@
title: "My Awesome Chart", title: "My Awesome Chart",
data: data, data: data,
type: 'bar', // or 'line', 'scatter', 'pie', 'percentage' type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
height: 250 height: 250,
format_tooltip_x: d => (d + '').toUpperCase(),
format_tooltip_y: d => d + ' pts'
});</code></pre> });</code></pre>
<div id="chart-types" class="border"></div> <div id="chart-types" class="border"></div>
<div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group"> <div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">

19
src/scripts/charts/AxisChart.js
View File

@ -14,9 +14,8 @@ export default class AxisChart extends BaseChart {
this.is_series = args.is_series; this.is_series = args.is_series;
this.get_y_label = this.format_lambdas.y_label; this.format_tooltip_y = args.format_tooltip_y;
this.get_y_tooltip = this.format_lambdas.y_tooltip; this.format_tooltip_x = args.format_tooltip_x;
this.get_x_tooltip = this.format_lambdas.x_tooltip;
this.zero_line = this.height; this.zero_line = this.height;
@ -348,6 +347,14 @@ export default class AxisChart extends BaseChart {
map_tooltip_x_position_and_show(relX) { map_tooltip_x_position_and_show(relX) {
if(!this.y_min_tops) return; if(!this.y_min_tops) return;
let titles = this.x;
if(this.format_tooltip_x && this.format_tooltip_x(this.x[0])) {
titles = this.x.map(d=>this.format_tooltip_x(d));
}
let y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]);
for(var i=this.x_axis_positions.length - 1; i >= 0 ; i--) { for(var i=this.x_axis_positions.length - 1; i >= 0 ; i--) {
let x_val = this.x_axis_positions[i]; let x_val = this.x_axis_positions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1]; // let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
@ -355,17 +362,15 @@ export default class AxisChart extends BaseChart {
let x = x_val + this.translate_x; let x = x_val + this.translate_x;
let y = this.y_min_tops[i] + this.translate_y; let y = this.y_min_tops[i] + this.translate_y;
let title = this.x.formatted && this.x.formatted.length>0 let title = titles[i];
? this.x.formatted[i] : this.x[i];
let values = this.y.map((set, j) => { let values = this.y.map((set, j) => {
return { return {
title: set.title, title: set.title,
value: set.formatted ? set.formatted[i] : set.values[i], value: y_format ? this.format_tooltip_y(set.values[i]) : set.values[i],
color: set.color || this.colors[j], color: set.color || this.colors[j],
}; };
}); });
// TODO: upside-down tooltips for negative values?
this.tip.set_values(x, y, title, '', values); this.tip.set_values(x, y, title, '', values);
this.tip.show_tip(); this.tip.show_tip();
break; break;

2
src/scripts/charts/BaseChart.js
View File

@ -10,7 +10,6 @@ export default class BaseChart {
title = '', title = '',
subtitle = '', subtitle = '',
colors = [], colors = [],
format_lambdas = {},
summary = [], summary = [],
is_navigable = 0, is_navigable = 0,
@ -28,7 +27,6 @@ export default class BaseChart {
this.subtitle = subtitle; this.subtitle = subtitle;
this.data = data; this.data = data;
this.format_lambdas = format_lambdas;
this.specific_values = data.specific_values || []; this.specific_values = data.specific_values || [];
this.summary = summary; this.summary = summary;

4
src/scripts/charts/PercentageChart.js
View File

@ -6,10 +6,6 @@ export default class PercentageChart extends BaseChart {
super(args); super(args);
this.type = 'percentage'; this.type = 'percentage';
this.get_y_label = this.format_lambdas.y_label;
this.get_x_tooltip = this.format_lambdas.x_tooltip;
this.get_y_tooltip = this.format_lambdas.y_tooltip;
this.max_slices = 10; this.max_slices = 10;
this.max_legend_points = 6; this.max_legend_points = 6;

3
src/scripts/charts/PieChart.js
View File

@ -9,9 +9,6 @@ export default class PieChart extends BaseChart {
constructor(args) { constructor(args) {
super(args); super(args);
this.type = 'pie'; this.type = 'pie';
this.get_y_label = this.format_lambdas.y_label;
this.get_x_tooltip = this.format_lambdas.x_tooltip;
this.get_y_tooltip = this.format_lambdas.y_tooltip;
this.elements_to_animate = null; this.elements_to_animate = null;
this.hoverRadio = args.hoverRadio || 0.1; this.hoverRadio = args.hoverRadio || 0.1;
this.max_slices = 10; this.max_slices = 10;