LeoVasanko/pagerite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Analytics: stronger chart fills, line specimen for the day legend

Browse Source 
Area and bar fills at 0.6 opacity (were a near-invisible 0.15); the day
view's 'Last 24 hours' legend entry uses the same full-opacity accent
line as the other entries instead of a translucent bar swatch.
This commit is contained in:
LeoVasanko
2026-09-18 13:54:33 +00:00
parent 2d221f6204
commit 4522b8fa40
1 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/VisitorCharts.vue
+8 -14
View File
@@ -123,19 +123,13 @@ const viewChart = computed(() => buildChart(withTypical(allViews.value), now.val
class="yaxis-label">{{ axisLabel(c.chart.unit, c.ylabel) }}</text> class="yaxis-label">{{ axisLabel(c.chart.unit, c.ylabel) }}</text>
<text v-for="t in c.chart.xticks" :key="'x' + t.x" :x="t.x" :y="CHART_H + MARGIN_B - 8" <text v-for="t in c.chart.xticks" :key="'x' + t.x" :x="t.x" :y="CHART_H + MARGIN_B - 8"
text-anchor="middle" class="xlab">{{ t.label }}</text> text-anchor="middle" class="xlab">{{ t.label }}</text>
<!-- Legend, top right inside the plot: current data in accent (week <!-- Legend, top right inside the plot: current data in accent
curve or day bars) and the typical history curve in muted. --> (week label, or "Last 24 hours" on the day view) and the
typical history curve in muted. -->
<g v-if="c.legend && c.chart.typical"> <g v-if="c.legend && c.chart.typical">
<template v-if="c.chart.bars"> <line :x1="CHART_W - 118" :x2="CHART_W - 98" y1="10" y2="10" class="line" />
<rect :x="CHART_W - 118" y="5" width="20" height="9" class="bar" /> <text :x="CHART_W - 92" y="10" dominant-baseline="middle"
<text :x="CHART_W - 92" y="10" dominant-baseline="middle" class="leglab">{{ c.chart.bars ? 'Last 24 hours' : c.chart.series[0].label }}</text>
class="leglab">Last 24 hours</text>
</template>
<template v-else>
<line :x1="CHART_W - 118" :x2="CHART_W - 98" y1="10" y2="10" class="line" />
<text :x="CHART_W - 92" y="10" dominant-baseline="middle"
class="leglab">{{ c.chart.series[0].label }}</text>
</template>
<line :x1="CHART_W - 118" :x2="CHART_W - 98" y1="25" y2="25" <line :x1="CHART_W - 118" :x2="CHART_W - 98" y1="25" y2="25"
class="line past" style="opacity: 0.6" /> class="line past" style="opacity: 0.6" />
<text :x="CHART_W - 92" y="25" dominant-baseline="middle" <text :x="CHART_W - 92" y="25" dominant-baseline="middle"
@@ -202,12 +196,12 @@ const viewChart = computed(() => buildChart(withTypical(allViews.value), now.val
.chart .area { .chart .area {
fill: var(--accent); fill: var(--accent);
opacity: 0.15; opacity: 0.6;
} }
.chart .bar { .chart .bar {
fill: var(--accent); fill: var(--accent);
opacity: 0.15; opacity: 0.6;
} }
.chart .line { .chart .line {