Skip to content

Commit

Permalink
add semantic tooltip formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@pratu16x7
pratu16x7 committed Nov 13, 2017
1 parent 3de049c commit e3d9ed0
Show file tree
Hide file tree
Showing 10 changed files with 48 additions and 53 deletions.
30 changes: 14 additions & 16 deletions dist/frappe-charts.min.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1045,8 +1045,6 @@ var BaseChart = function () {
subtitle = _ref$subtitle === undefined ? '' : _ref$subtitle,
_ref$colors = _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,
summary = _ref$summary === undefined ? [] : _ref$summary,
_ref$is_navigable = _ref.is_navigable,
Expand All @@ -1066,7 +1064,6 @@ var BaseChart = function () {
this.subtitle = subtitle;

this.data = data;
this.format_lambdas = format_lambdas;

this.specific_values = data.specific_values || [];
this.summary = summary;
Expand Down Expand Up @@ -1369,9 +1366,8 @@ var AxisChart = function (_BaseChart) {

_this.is_series = args.is_series;

_this.get_y_label = _this.format_lambdas.y_label;
_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
_this.format_tooltip_y = args.format_tooltip_y;
_this.format_tooltip_x = args.format_tooltip_x;

_this.zero_line = _this.height;

Expand Down Expand Up @@ -1730,23 +1726,32 @@ var AxisChart = function (_BaseChart) {
var _this11 = this;

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--) {
var x_val = this.x_axis_positions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
if (relX > x_val - this.avg_unit_width / 2) {
var x = x_val + this.translate_x;
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) {
return {
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]
};
});

// TODO: upside-down tooltips for negative values?
this.tip.set_values(x, y, title, '', values);
this.tip.show_tip();
break;
Expand Down Expand Up @@ -2547,10 +2552,6 @@ var PercentageChart = function (_BaseChart) {

_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_legend_points = 6;

Expand Down Expand Up @@ -2729,9 +2730,6 @@ var PieChart = function (_BaseChart) {
var _this = possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, args));

_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.hoverRadio = args.hoverRadio || 0.1;
_this.max_slices = 10;
Expand Down
30 changes: 14 additions & 16 deletions dist/frappe-charts.min.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1043,8 +1043,6 @@ var BaseChart = function () {
subtitle = _ref$subtitle === undefined ? '' : _ref$subtitle,
_ref$colors = _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,
summary = _ref$summary === undefined ? [] : _ref$summary,
_ref$is_navigable = _ref.is_navigable,
Expand All @@ -1064,7 +1062,6 @@ var BaseChart = function () {
this.subtitle = subtitle;

this.data = data;
this.format_lambdas = format_lambdas;

this.specific_values = data.specific_values || [];
this.summary = summary;
Expand Down Expand Up @@ -1367,9 +1364,8 @@ var AxisChart = function (_BaseChart) {

_this.is_series = args.is_series;

_this.get_y_label = _this.format_lambdas.y_label;
_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
_this.format_tooltip_y = args.format_tooltip_y;
_this.format_tooltip_x = args.format_tooltip_x;

_this.zero_line = _this.height;

Expand Down Expand Up @@ -1728,23 +1724,32 @@ var AxisChart = function (_BaseChart) {
var _this11 = this;

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--) {
var x_val = this.x_axis_positions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
if (relX > x_val - this.avg_unit_width / 2) {
var x = x_val + this.translate_x;
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) {
return {
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]
};
});

// TODO: upside-down tooltips for negative values?
this.tip.set_values(x, y, title, '', values);
this.tip.show_tip();
break;
Expand Down Expand Up @@ -2545,10 +2550,6 @@ var PercentageChart = function (_BaseChart) {

_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_legend_points = 6;

Expand Down Expand Up @@ -2727,9 +2728,6 @@ var PieChart = function (_BaseChart) {
var _this = possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, args));

_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.hoverRadio = args.hoverRadio || 0.1;
_this.max_slices = 10;
Expand Down
2 changes: 1 addition & 1 deletion dist/frappe-charts.min.iife.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/js/frappe-charts.min.js
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions docs/assets/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, 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"],
}]
};

Expand Down Expand Up @@ -97,7 +96,9 @@ let type_chart = new Chart({
data: type_data,
type: 'bar',
height: 250,
is_series: 1
is_series: 1,
format_tooltip_x: d => (d + '').toUpperCase(),
format_tooltip_y: d => d + ' pts'
});

Array.prototype.slice.call(
Expand Down
4 changes: 3 additions & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ <h6 class="margin-vertical-rem">
title: "My Awesome Chart",
data: data,
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>
<div id="chart-types" class="border"></div>
<div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">
Expand Down
19 changes: 12 additions & 7 deletions src/scripts/charts/AxisChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,8 @@ export default class AxisChart extends BaseChart {

this.is_series = args.is_series;

this.get_y_label = this.format_lambdas.y_label;
this.get_y_tooltip = this.format_lambdas.y_tooltip;
this.get_x_tooltip = this.format_lambdas.x_tooltip;
this.format_tooltip_y = args.format_tooltip_y;
this.format_tooltip_x = args.format_tooltip_x;

this.zero_line = this.height;

Expand Down Expand Up @@ -348,24 +347,30 @@ export default class AxisChart extends BaseChart {

map_tooltip_x_position_and_show(relX) {
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--) {
let x_val = this.x_axis_positions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
if(relX > x_val - this.avg_unit_width/2) {
let x = x_val + this.translate_x;
let y = this.y_min_tops[i] + this.translate_y;

let title = this.x.formatted && this.x.formatted.length>0
? this.x.formatted[i] : this.x[i];
let title = titles[i];
let values = this.y.map((set, j) => {
return {
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],
};
});

// TODO: upside-down tooltips for negative values?
this.tip.set_values(x, y, title, '', values);
this.tip.show_tip();
break;
Expand Down
2 changes: 0 additions & 2 deletions src/scripts/charts/BaseChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export default class BaseChart {
title = '',
subtitle = '',
colors = [],
format_lambdas = {},
summary = [],

is_navigable = 0,
Expand All @@ -28,7 +27,6 @@ export default class BaseChart {
this.subtitle = subtitle;

this.data = data;
this.format_lambdas = format_lambdas;

this.specific_values = data.specific_values || [];
this.summary = summary;
Expand Down
4 changes: 0 additions & 4 deletions src/scripts/charts/PercentageChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ export default class PercentageChart extends BaseChart {
super(args);
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_legend_points = 6;

Expand Down
3 changes: 0 additions & 3 deletions src/scripts/charts/PieChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@ export default class PieChart extends BaseChart {
constructor(args) {
super(args);
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.hoverRadio = args.hoverRadio || 0.1;
this.max_slices = 10;
Expand Down

0 comments on commit e3d9ed0

Please sign in to comment.