jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Merge 96095ec5793a021c44cfa3bfe7f44eb389316def into master

Browse Source
This commit is contained in:
Arjun Choudhary 2022-11-22 14:42:21 +05:30
commit d139d15cb7
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) { if(count > divisor) {
count = 0; count = 0;
y += 20; y += 60;
} }
let x = barWidth * count + 5; let x = barWidth * count + 5;
let label = this.config.truncateLegends ? truncateString(s.labels[i], barWidth/10) : s.labels[i]; 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( let dot = legendDot(
x, x,
y, y,
5, 12,
3,
this.colors[i], this.colors[i],
`${label}: ${formatted}`, `${label}: ${formatted}`,
d,
false false
); );
this.legendArea.appendChild(dot); 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; 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; label = truncate ? truncateString(label, LABEL_MAX_CHARS) : label;
let args = { let args = {
className: 'legend-dot', className: 'legend-dot',
cx: 0, x: 0,
cy: 0, y: 4 - size,
r: size, height: size,
width: size,
rx: radius,
fill: fill fill: fill
}; };
let text = createSVG('text', {
className: 'legend-dataset-text', let textLabel = createSVG('text', {
x: 0, className: 'legend-dataset-label',
x: size,
y: 0, y: 0,
dx: (FONT_SIZE) + 'px', dx: (FONT_SIZE) + 'px',
dy: (FONT_SIZE/3) + 'px', dy: (FONT_SIZE/3) + 'px',
'font-size': (FONT_SIZE * 1.2) + 'px', 'font-size': (FONT_SIZE * 1.6) + 'px',
'text-anchor': 'start', 'text-anchor': 'start',
fill: FONT_FILL, fill: FONT_FILL,
innerHTML: label 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', { let group = createSVG('g', {
transform: `translate(${x}, ${y})` transform: `translate(${x}, ${y})`
}); });
group.appendChild(createSVG("circle", args)); group.appendChild(createSVG("rect", args));
group.appendChild(text); group.appendChild(textLabel);
group.appendChild(textValue);
return group; return group;
} }