add log scale

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
Ronni Skansing
2025-10-28 19:03:20 +01:00
parent f5e273cdfc
commit 87faa398ca
@@ -131,6 +131,7 @@
let chartData = [];
let xScale, yScale;
let useLogScale = false;
// Time range filter for campaigns
const timeRanges = [
@@ -277,7 +278,9 @@
const yExtent = [0, 100];
xScale = createLinearScale(xExtent, [margin.left, width - margin.right]);
yScale = createLinearScale(yExtent, [height - margin.bottom, margin.top]);
yScale = useLogScale
? createLogScale(yExtent, [height - margin.bottom, margin.top])
: createLinearScale(yExtent, [height - margin.bottom, margin.top]);
createGridLines(svg);
createAxes(svg);
@@ -382,6 +385,20 @@
return (value) => r0 + k * (value - d0);
}
// log scale for y axis (clamps to min > 0)
function createLogScale(domain, range) {
const [d0, d1] = domain;
const [r0, r1] = range;
const min = Math.max(d0, 0.1);
const logd0 = Math.log10(min);
const logd1 = Math.log10(d1);
const k = (r1 - r0) / (logd1 - logd0 || 1);
return (value) => {
const v = Math.max(value, 0.1);
return r0 + k * (Math.log10(v) - logd0);
};
}
function createGridLines(svg) {
// Create subtle gradient for grid lines
const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
@@ -488,7 +505,7 @@
text.setAttribute('x', (margin.left - 10).toString());
text.setAttribute('y', (y - 2).toString());
text.setAttribute('text-anchor', 'end');
text.setAttribute('font-size', '11');
text.setAttribute('font-size', useLogScale ? '8' : '11');
text.setAttribute(
'fill',
document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#6B7280'
@@ -1025,7 +1042,10 @@
});
// Only create chart when width is set and chartData is ready
$: if (containerReady && chartContainer && width > 0 && chartData.length > 1 && movingAvgN) {
$: if (
(containerReady && chartContainer && width > 0 && chartData.length > 1 && movingAvgN) ||
useLogScale
) {
createChart();
}
</script>
@@ -1159,6 +1179,12 @@
style="height: 1.5rem;"
/>
</label>
<label
class="flex items-center gap-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-200"
>
Log scale:
<input type="checkbox" bind:checked={useLogScale} class="accent-blue-600" />
</label>
</div>
</div>
<div class="mb-8"></div>