luis/sysmon-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fill series before stroking

Browse Source
This commit is contained in:
luisdralves
2024-05-06 17:27:07 +01:00
parent 62de8ccafa
commit e7b178279e
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/client/components/chart-cards/common/chart/index.tsx
View File

@@ -89,24 +89,34 @@ export const CanvasChart = ({ total, hueOffset = 0, domain, hardDomain, data, fo
ctx.lineCap = 'round'; ctx.lineCap = 'round';
ctx.lineJoin = 'round'; ctx.lineJoin = 'round';
const drawSeries = (type: 'fill' | 'stroke') => {
for (let i = 0; i < total; i++) { for (let i = 0; i < total; i++) {
ctx.fillStyle = getFillColor(hueOffset + (360 * Number(i)) / total); if (type === 'fill') ctx.fillStyle = getFillColor(hueOffset + (360 * Number(i)) / total);
ctx.strokeStyle = getStrokeColor(hueOffset + (360 * Number(i)) / total); if (type === 'stroke') ctx.strokeStyle = getStrokeColor(hueOffset + (360 * Number(i)) / total);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(-xMargin, height); ctx.moveTo(-xMargin, height);
ctx.lineTo(-xMargin, height - (height * (history[0][1][i] ?? 0)) / max.current); ctx.lineTo(-xMargin, height - (height * (history[0][1][i] ?? 0)) / max.current);
for (const [timestamp, values] of history) { for (const [timestamp, values] of history) {
const x = xFromTimestamp(timestamp, width); const x = xFromTimestamp(timestamp, width);
const y = height - (height * (values[i] ?? 0)) / max.current; const y = height - (height * (values[i] ?? 0)) / max.current;
ctx.lineTo(x, y); ctx.lineTo(x, y);
} }
ctx.lineTo(width + xMargin, height - (height * (history[0][1][i] ?? 0)) / max.current); ctx.lineTo(width + xMargin, height - (height * (history[0][1][i] ?? 0)) / max.current);
ctx.lineTo(width + xMargin, height); ctx.lineTo(width + xMargin, height);
ctx.stroke();
ctx.fill(); if (type === 'fill') ctx.fill();
if (type === 'stroke') ctx.stroke();
ctx.closePath(); ctx.closePath();
} }
};
drawSeries('fill');
drawSeries('stroke');
}, fps); }, fps);
return ( return (