thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-11-21 23:21:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #63404 from ClickHouse/fix-oklch-for-firefox

Browse Source 
Workaround for `oklch()` inside canvas bug for firefox
This commit is contained in:
Sergei Trifonov 2024-05-10 12:05:35 +00:00 committed by GitHub
commit e8d43fa572
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
programs/server/dashboard.html
View File

@ -538,9 +538,57 @@ let params = default_params;
/// Palette generation for charts
function generatePalette(numColors) {
// oklch() does not work in firefox<=125 inside <canvas> element so we convert it back to rgb for now.
// Based on https://github.com/color-js/color.js/blob/main/src/spaces/oklch.js
const multiplyMatrices = (A, B) => {
return [
A[0]*B[0] + A[1]*B[1] + A[2]*B[2],
A[3]*B[0] + A[4]*B[1] + A[5]*B[2],
A[6]*B[0] + A[7]*B[1] + A[8]*B[2]
];
}
const oklch2oklab = ([l, c, h]) => [
l,
isNaN(h) ? 0 : c * Math.cos(h * Math.PI / 180),
isNaN(h) ? 0 : c * Math.sin(h * Math.PI / 180)
]
const srgbLinear2rgb = rgb => rgb.map(c =>
Math.abs(c) > 0.0031308 ?
(c < 0 ? -1 : 1) * (1.055 * (Math.abs(c) ** (1 / 2.4)) - 0.055) :
12.92 * c
)
const oklab2xyz = lab => {
const LMSg = multiplyMatrices([
1, 0.3963377773761749, 0.2158037573099136,
1, -0.1055613458156586, -0.0638541728258133,
1, -0.0894841775298119, -1.2914855480194092,
], lab)
const LMS = LMSg.map(val => val ** 3)
return multiplyMatrices([
1.2268798758459243, -0.5578149944602171, 0.2813910456659647,
-0.0405757452148008, 1.1122868032803170, -0.0717110580655164,
-0.0763729366746601, -0.4214933324022432, 1.5869240198367816
], LMS)
}
const xyz2rgbLinear = xyz => {
return multiplyMatrices([
3.2409699419045226, -1.537383177570094, -0.4986107602930034,
-0.9692436362808796, 1.8759675015077202, 0.04155505740717559,
0.05563007969699366, -0.20397695888897652, 1.0569715142428786
], xyz)
}
const oklch2rgb = lch => srgbLinear2rgb(xyz2rgbLinear(oklab2xyz(oklch2oklab(lch))))
palette = [];
for (let i = 0; i < numColors; i++) {
palette.push(`oklch(${theme != 'dark' ? 0.75 : 0.5}, 0.15, ${360 * i / numColors})`);
//palette.push(`oklch(${theme != 'dark' ? 0.75 : 0.5}, 0.15, ${360 * i / numColors})`);
let rgb = oklch2rgb([theme != 'dark' ? 0.75 : 0.5, 0.15, 360 * i / numColors]);
palette.push(`rgb(${rgb[0] * 255}, ${rgb[1] * 255}, ${rgb[2] * 255})`);
}
return palette;
}