jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[aggregation] add dot legend

Browse Source
This commit is contained in:
Prateeksha Singh 2018-04-14 08:20:50 +05:30
parent 7ccb2c5a54
commit cf5985fd9a
13 changed files with 109 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -591,6 +591,35 @@ function legendBar(x, y, size, fill='none', label) {
return group;
}
function legendDot(x, y, size, fill='none', label) {
let args = {
className: 'legend-dot',
cx: 0,
cy: 0,
r: size,
fill: fill
};
let text = createSVG('text', {
className: 'legend-dataset-text',
x: 0,
y: 0,
dx: (FONT_SIZE) + 'px',
dy: (FONT_SIZE/3) + 'px',
'font-size': (FONT_SIZE * 1.2) + 'px',
'text-anchor': 'start',
fill: FONT_FILL,
innerHTML: label
});
let group = createSVG('g', {
transform: `translate(${x}, ${y})`
});
group.appendChild(createSVG("circle", args));
group.appendChild(text);
return group;
}
function makeText(className, x, y, content, fontSize = FONT_SIZE) {
return createSVG('text', {
className: className,
@ -1594,31 +1623,30 @@ class AggregationChart extends BaseChart {
});
s.grandTotal = s.sliceTotals.reduce((a, b) => a + b, 0);
this.center = {
x: this.width / 2,
y: this.height / 2
};
}
renderLegend() {
// let s = this.state;
let s = this.state;
this.legendArea.textContent = '';
// this.statsWrapper.textContent = '';
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
// this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
// let xValues = s.labels;
// this.legendTotals.map((d, i) => {
// if(d) {
// let stats = $.create('div', {
// className: 'stats',
// inside: this.statsWrapper
// });
// stats.innerHTML = `<span class="indicator">
// <i style="background: ${this.colors[i]}"></i>
// <span class="text-muted">${xValues[i]}:</span>
// ${d}
// </span>`;
// }
// });
//
this.legendTotals.map((d, i) => {
let barWidth = 110;
let rect = legendDot(
barWidth * i + 5,
'0',
5,
this.colors[i],
`${s.labels[i]}: ${d}`
);
this.legendArea.appendChild(rect);
});
}
}
@ -2130,17 +2158,9 @@ class PieChart extends AggregationChart {
calc() {
super.calc();
this.center = {
x: this.width / 2,
y: this.height / 2
};
let s = this.state;
this.radius = (this.height > this.width ? this.center.x : this.center.y);
this.calcSlices();
}
calcSlices() {
let s = this.state;
const { radius, clockWise } = this;
const prevSlicesProperties = s.slicesProperties || [];

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

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

@ -50,6 +50,7 @@ lineCompositeChart.parent.addEventListener('data-select', (e) => {
// ================================================================================
let args = {
title: "My Awesome Chart",
data: typeData,
type: 'axis-mixed',
height: 250,

3
docs/assets/js/index.min.js vendored
View File

@ -272,6 +272,8 @@ var heatmapData = {
end: end
};
// ================================================================================
var c1 = document.querySelector("#chart-composite-1");
var c2 = document.querySelector("#chart-composite-2");
@ -316,6 +318,7 @@ lineCompositeChart.parent.addEventListener('data-select', function (e) {
// ================================================================================
var args = {
title: "My Awesome Chart",
data: typeData,
type: 'axis-mixed',
height: 250,

2
docs/assets/js/index.min.js.map
View File

File diff suppressed because one or more lines are too long

40
src/js/charts/AggregationChart.js
View File

@ -1,4 +1,5 @@
import BaseChart from './BaseChart';
import { legendDot } from '../utils/draw';
export default class AggregationChart extends BaseChart {
constructor(parent, args) {
@ -46,30 +47,29 @@ export default class AggregationChart extends BaseChart {
});
s.grandTotal = s.sliceTotals.reduce((a, b) => a + b, 0);
this.center = {
x: this.width / 2,
y: this.height / 2
};
}
renderLegend() {
// let s = this.state;
let s = this.state;
this.legendArea.textContent = '';
// this.statsWrapper.textContent = '';
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
// this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
// let xValues = s.labels;
// this.legendTotals.map((d, i) => {
// if(d) {
// let stats = $.create('div', {
// className: 'stats',
// inside: this.statsWrapper
// });
// stats.innerHTML = `<span class="indicator">
// <i style="background: ${this.colors[i]}"></i>
// <span class="text-muted">${xValues[i]}:</span>
// ${d}
// </span>`;
// }
// });
//
this.legendTotals.map((d, i) => {
let barWidth = 110;
let rect = legendDot(
barWidth * i + 5,
'0',
5,
this.colors[i],
`${s.labels[i]}: ${d}`
);
this.legendArea.appendChild(rect);
});
}
}

10
src/js/charts/PieChart.js
View File

@ -31,18 +31,8 @@ export default class PieChart extends AggregationChart {
calc() {
super.calc();
let s = this.state;
this.center = {
x: this.width / 2,
y: this.height / 2
};
this.radius = (this.height > this.width ? this.center.x : this.center.y);
this.calcSlices();
}
calcSlices() {
let s = this.state;
const { radius, clockWise } = this;
const prevSlicesProperties = s.slicesProperties || [];

29
src/js/utils/draw.js
View File

@ -201,6 +201,35 @@ export function legendBar(x, y, size, fill='none', label) {
return group;
}
export function legendDot(x, y, size, fill='none', label) {
let args = {
className: 'legend-dot',
cx: 0,
cy: 0,
r: size,
fill: fill
};
let text = createSVG('text', {
className: 'legend-dataset-text',
x: 0,
y: 0,
dx: (FONT_SIZE) + 'px',
dy: (FONT_SIZE/3) + 'px',
'font-size': (FONT_SIZE * 1.2) + 'px',
'text-anchor': 'start',
fill: FONT_FILL,
innerHTML: label
});
let group = createSVG('g', {
transform: `translate(${x}, ${y})`
});
group.appendChild(createSVG("circle", args));
group.appendChild(text);
return group;
}
export function makeText(className, x, y, content, fontSize = FONT_SIZE) {
return createSVG('text', {
className: className,