jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[formatted] data by index and format

Browse Source
This commit is contained in:
Prateeksha Singh 2018-04-19 09:08:06 +05:30
parent 436685872e
commit 942574a44a
10 changed files with 66 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
dist/frappe-charts.esm.js vendored
View File

@ -236,12 +236,13 @@ class SvgTip {
this.listValues.map((set, i) => {
const color = this.colors[i] || 'black';
let value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
let li = $.create('li', {
styles: {
'border-top': `3px solid ${color}`
},
innerHTML: `<strong style="display: block;">${ set.value === 0 || set.value ? set.value : '' }</strong>
innerHTML: `<strong style="display: block;">${ value === 0 || value ? value : '' }</strong>
${set.title ? set.title : '' }`
});
@ -3420,18 +3421,30 @@ class AxisChart extends BaseChart {
this.dataByIndex = {};
let s = this.state;
// let formatY = this.config.formatTooltipY;
let formatX = this.config.formatTooltipX;
let formatY = this.config.formatTooltipY;
let titles = s.xAxis.labels;
if(formatX && formatX(titles[0])) {
titles = titles.map(d=>formatX(d));
}
// formatY = formatY && formatY(s.yAxis.labels[0]) ? formatY : 0;
titles.map((label, index) => {
let values = this.state.datasets.map((set, i) => {
let value = set.values[index];
return {
title: set.name,
value: value,
yPos: set.yPositions[index],
color: this.colors[i],
formatted: formatY ? formatY(value) : value,
};
});
// yVal = formatY ? formatY(set.values[i]) : set.values[i]
this.dataByIndex[index] = {
label: label,
formattedLabel: formatX ? formatX(label) : label,
xPos: s.xAxis.positions[index],
values: values,
yExtreme: s.yExtremes[index],
};
});
}
bindTooltip() {
@ -3456,18 +3469,13 @@ class AxisChart extends BaseChart {
if(!s.yExtremes) return;
let index = getClosestInArray(relX, s.xAxis.positions, true);
let dbi = this.dataByIndex[index];
this.tip.setValues(
s.xAxis.positions[index] + this.tip.offset.x,
s.yExtremes[index] + this.tip.offset.y,
{name: s.xAxis.labels[index], value: ''},
this.data.datasets.map((set, i) => {
return {
title: set.name,
value: set.values[index],
color: this.colors[i],
};
}),
dbi.xPos + this.tip.offset.x,
dbi.yExtreme + this.tip.offset.y,
{name: dbi.formattedLabel, value: ''},
dbi.values,
index
);

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js.map 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

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

File diff suppressed because one or more lines are too long

7
docs/index.html
View File

@ -78,7 +78,12 @@
title: "My Awesome Chart",
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
height: 300,
colors: ['purple', '#ffa3ef', 'red']
colors: ['purple', '#ffa3ef', 'red'],
tooltipOptions: {
formatTooltipX: d => (d + '').toUpperCase(),
formatTooltipY: d => d + ' pts',
}
});
chart.export();

43
src/js/charts/AxisChart.js
View File

@ -353,18 +353,30 @@ export default class AxisChart extends BaseChart {
this.dataByIndex = {};
let s = this.state;
// let formatY = this.config.formatTooltipY;
let formatX = this.config.formatTooltipX;
let formatY = this.config.formatTooltipY;
let titles = s.xAxis.labels;
if(formatX && formatX(titles[0])) {
titles = titles.map(d=>formatX(d));
}
// formatY = formatY && formatY(s.yAxis.labels[0]) ? formatY : 0;
titles.map((label, index) => {
let values = this.state.datasets.map((set, i) => {
let value = set.values[index];
return {
title: set.name,
value: value,
yPos: set.yPositions[index],
color: this.colors[i],
formatted: formatY ? formatY(value) : value,
};
});
// yVal = formatY ? formatY(set.values[i]) : set.values[i]
this.dataByIndex[index] = {
label: label,
formattedLabel: formatX ? formatX(label) : label,
xPos: s.xAxis.positions[index],
values: values,
yExtreme: s.yExtremes[index],
}
});
}
bindTooltip() {
@ -389,18 +401,13 @@ export default class AxisChart extends BaseChart {
if(!s.yExtremes) return;
let index = getClosestInArray(relX, s.xAxis.positions, true);
let dbi = this.dataByIndex[index];
this.tip.setValues(
s.xAxis.positions[index] + this.tip.offset.x,
s.yExtremes[index] + this.tip.offset.y,
{name: s.xAxis.labels[index], value: ''},
this.data.datasets.map((set, i) => {
return {
title: set.name,
value: set.values[index],
color: this.colors[i],
};
}),
dbi.xPos + this.tip.offset.x,
dbi.yExtreme + this.tip.offset.y,
{name: dbi.formattedLabel, value: ''},
dbi.values,
index
);

3
src/js/objects/SvgTip.js
View File

@ -64,12 +64,13 @@ export default class SvgTip {
this.listValues.map((set, i) => {
const color = this.colors[i] || 'black';
let value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
let li = $.create('li', {
styles: {
'border-top': `3px solid ${color}`
},
innerHTML: `<strong style="display: block;">${ set.value === 0 || set.value ? set.value : '' }</strong>
innerHTML: `<strong style="display: block;">${ value === 0 || value ? value : '' }</strong>
${set.title ? set.title : '' }`
});