jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: update legend dots

Browse Source
This commit is contained in:
Shivam Mishra 2020-07-28 14:15:34 +05:30
parent fbe314d9f9
commit 96095ec579
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,7 +75,7 @@ export default class AggregationChart extends BaseChart {
}
if(count > divisor) {
count = 0;
y += 20;
y += 60;
}
let x = barWidth * count + 5;
let label = this.config.truncateLegends ? truncateString(s.labels[i], barWidth/10) : s.labels[i];
@ -83,9 +83,11 @@ export default class AggregationChart extends BaseChart {
let dot = legendDot(
x,
y,
5,
12,
3,
this.colors[i],
`${label}: ${formatted}`,
d,
false
);
this.legendArea.appendChild(dot);

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

@ -239,33 +239,49 @@ export function legendBar(x, y, size, fill='none', label, truncate=false) {
return group;
}
export function legendDot(x, y, size, fill='none', label, truncate=false) {
export function legendDot(x, y, size, radius, fill='none', label, value, truncate=false) {
label = truncate ? truncateString(label, LABEL_MAX_CHARS) : label;
let args = {
className: 'legend-dot',
cx: 0,
cy: 0,
r: size,
x: 0,
y: 4 - size,
height: size,
width: size,
rx: radius,
fill: fill
};
let text = createSVG('text', {
className: 'legend-dataset-text',
x: 0,
let textLabel = createSVG('text', {
className: 'legend-dataset-label',
x: size,
y: 0,
dx: (FONT_SIZE) + 'px',
dy: (FONT_SIZE/3) + 'px',
'font-size': (FONT_SIZE * 1.2) + 'px',
'font-size': (FONT_SIZE * 1.6) + 'px',
'text-anchor': 'start',
fill: FONT_FILL,
innerHTML: label
});
let textValue = createSVG('text', {
className: 'legend-dataset-value',
x: size,
y: FONT_SIZE + 10,
dx: (FONT_SIZE) + 'px',
dy: (FONT_SIZE/3) + 'px',
'font-size': (FONT_SIZE * 1.2) + 'px',
'text-anchor': 'start',
fill: FONT_FILL,
innerHTML: value
});
let group = createSVG('g', {
transform: `translate(${x}, ${y})`
});
group.appendChild(createSVG("circle", args));
group.appendChild(text);
group.appendChild(createSVG("rect", args));
group.appendChild(textLabel);
group.appendChild(textValue);
return group;
}