useweb/drizzli
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: canvas to echarts #5

Merged
frederic merged 13 commits from canvas-to-echarts into main 2026-02-16 00:33:58 +01:00
Conversation 0 Commits 13 Files Changed 19
-220
5 changed files with 0 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0df546b592 - Show all commits
src/routes/weather/canvas/cloud-cover.ts
-78
View File
@@ -1,78 +0,0 @@
export default (
ctx: CanvasRenderingContext2D | null | undefined,
config: ConfigInterface,
series: Float32Array | null | undefined,
canvasElement: HTMLCanvasElement
): void => {
if (ctx && series) {
ctx.beginPath();
ctx.moveTo(0, 35 + (series[0] ** 1.5 / 1000) * 30);
for (const [index, value] of series.entries()) {
ctx.strokeStyle = '#444';
ctx.lineWidth = 0.1;
const nextValue = series[index + 1];
const xc =
(index * config.deltaX +
0.5 * config.deltaX +
(index * config.deltaX + 1.5 * config.deltaX)) /
2;
const yc = (35 + (value ** 1.5 / 1000) * 30 + 35 + (nextValue ** 1.5 / 1000) * 30) / 2;
ctx.quadraticCurveTo(
index * config.deltaX + 0.5 * config.deltaX,
35 + (value ** 1.5 / 1000) * 30,
xc,
yc
);
}
ctx.quadraticCurveTo(
config.maxX,
35 + (series[series.length - 1] ** 1.5 / 1000) * 30,
config.maxX,
35 + (series[series.length - 1] ** 1.5 / 1000) * 30
);
ctx.quadraticCurveTo(
config.maxX,
35 - (series[series.length - 1] ** 1.5 / 1000) * 30,
config.maxX,
35 - (series[series.length - 1] ** 1.5 / 1000) * 30
);
// same series but reversed
for (const [ind, _v] of series.entries()) {
const index = series.length - 1 - ind;
const value = series[index];
const nextValue = series[index - 1];
ctx.strokeStyle = '#444';
ctx.lineWidth = 0.1;
const xc =
(index * config.deltaX +
0.5 * config.deltaX +
(index * config.deltaX - 0.5 * config.deltaX)) /
2;
const yc = (35 - (value ** 2 / 10000) * 30 + (35 - (nextValue ** 2 / 10000) * 30)) / 2;
ctx.quadraticCurveTo(
index * config.deltaX + 0.5 * config.deltaX,
35 - (value ** 2 / 10000) * 30,
xc,
yc
);
}
ctx.quadraticCurveTo(
0.5 * config.deltaX,
35 - (series[0] ** 1.5 / 1000) * 30,
0,
35 - (series[0] ** 1.5 / 1000) * 30
);
ctx.closePath();
//to fill the space in the shape
ctx.fillStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--muted-foreground').split(' ').join(',')}, 0.5)`;
ctx.fill();
}
};
src/routes/weather/canvas/daylight.ts
-20
View File
@@ -1,20 +0,0 @@
export default (
ctx: CanvasRenderingContext2D | null | undefined,
config: ConfigInterface,
series: Date[]
): void => {
if (ctx) {
for (const [index, value] of series.entries()) {
if (value.getHours() > 6 && value.getHours() < 21) {
ctx.beginPath();
ctx.moveTo(index * config.deltaX, config.maxY);
ctx.lineTo(index * config.deltaX, 0);
ctx.lineTo((index + 1) * config.deltaX, 0);
ctx.lineTo((index + 1) * config.deltaX, config.maxY);
ctx.closePath();
ctx.fillStyle = '#f4ff0014';
ctx.fill();
}
}
}
};
src/routes/weather/canvas/precip.ts
-20
View File
@@ -1,20 +0,0 @@
export default (
ctx: CanvasRenderingContext2D | null | undefined,
config: ConfigInterface,
series: Float32Array | null | undefined,
canvasElement: HTMLCanvasElement
): void => {
if (ctx && series) {
for (const [index, value] of series.entries()) {
ctx.beginPath();
ctx.moveTo(index * config.deltaX + 0.5 * config.deltaX, config.maxY);
ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--primary').split(' ').join(',')}, 1)`;
ctx.lineWidth = 12;
ctx.lineTo(index * config.deltaX + 0.5 * config.deltaX, config.maxY - value ** 0.55 * 45);
ctx.stroke();
ctx.closePath();
}
}
};
src/routes/weather/canvas/raster.ts
-42
View File
@@ -1,42 +0,0 @@
export default (
ctx: CanvasRenderingContext2D | null | undefined,
config: ConfigInterface,
series: Date[],
today: Date,
canvasElement: HTMLCanvasElement
): void => {
if (ctx && series) {
for (const [index, _v] of series.entries()) {
ctx.beginPath();
ctx.moveTo(index * config.deltaX, 0);
ctx.lineTo(index * config.deltaX, config.maxY);
if (series[index].getHours() === 0) {
ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 1)`;
ctx.lineWidth = 3;
} else if (
series[index].getDate() === today.getDate() &&
series[index].getHours() === today.getHours()
) {
// fill now line
// TODO: update this line every minute
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
const minutes = today.getMinutes();
ctx.moveTo(index * config.deltaX + (config.deltaX / 60) * minutes, 0);
ctx.lineTo(index * config.deltaX + (config.deltaX / 60) * minutes, config.maxY);
ctx.stroke();
ctx.closePath();
ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 0.75)`;
ctx.lineWidth = 1;
} else {
ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 0.75)`;
ctx.lineWidth = 1;
}
ctx.stroke();
ctx.closePath();
}
}
};
src/routes/weather/canvas/temp-gradient.ts
-60
View File
@@ -1,60 +0,0 @@
import { getColor } from '../utils/colors';
export default (
ctx: CanvasRenderingContext2D | null | undefined,
config: ConfigInterface,
series: Float32Array | null | undefined,
unit = 'celsius'
): void => {
if (ctx && series) {
const tempGradientFill = ctx.createLinearGradient(0, 0, 0, config.maxY);
tempGradientFill.addColorStop(0, getColor(config.maxTemp, unit) + '5c');
tempGradientFill.addColorStop(0.25, getColor(config.maxTemp, unit) + '5c');
tempGradientFill.addColorStop(0.85, getColor(config.minTemp, unit) + '06');
tempGradientFill.addColorStop(1, getColor(config.minTemp, unit) + '00');
ctx.beginPath();
ctx.moveTo(
0,
0.25 * config.maxY + ((config.maxTemp - series[0]) / config.diffTemp) * 0.55 * config.maxY
);
for (const [index, value] of series.filter((t) => !isNaN(t)).entries()) {
const indexDiffTemp = config.maxTemp - value;
const indexDiffTempNext = config.maxTemp - series[index + 1];
ctx.strokeStyle = '#d3d3d3';
ctx.lineWidth = 4;
const xc =
(index * config.deltaX +
0.5 * config.deltaX +
(index * config.deltaX + 1.5 * config.deltaX)) /
2;
const yc =
(0.25 * config.maxY +
(indexDiffTemp / config.diffTemp) * 0.55 * config.maxY +
(0.25 * config.maxY + (indexDiffTempNext / config.diffTemp) * 0.55 * config.maxY)) /
2;
ctx.quadraticCurveTo(
index * config.deltaX + 0.5 * config.deltaX,
0.25 * config.maxY + (indexDiffTemp / config.diffTemp) * 0.55 * config.maxY,
xc,
yc
);
}
ctx.quadraticCurveTo(
config.maxX,
0.25 * config.maxY +
((config.maxTemp - series[series.length - 1]) / config.diffTemp) * 0.55 * config.maxY,
(config.maxX + config.maxX + config.deltaX) / 2,
0.25 * config.maxY +
((config.maxTemp - series[series.length - 1]) / config.diffTemp) * 0.55 * config.maxY
);
ctx.lineTo(config.maxX, config.maxY);
ctx.lineTo(0, config.maxY);
ctx.closePath();
ctx.fillStyle = tempGradientFill;
ctx.fill();
}
};