Skip to content

Fix bar chart label placement (#1182) and config-page select crash #1224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gskjold wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix bar chart label placement (#1182) and config-page select crash #1224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
24f5c39
Fix bar chart value-label placement for short bars
gskjold Jun 25, 2026
8d3c368
Fix "el is not defined" crash when changing price config selects
gskjold Jun 25, 2026
7d5343b
Rebuild embedded UI assets
gskjold Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ui/dist/index.js
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 26 additions & 6 deletions ui/src/lib/BarChart.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,26 @@
};
}

// Vertical placement of a value label.
// top/bot: bar edge (yScale of the value); base: yScale(0); off: labelOffset; rot: label is rotated.
// Rotated labels read along the bar, so they keep the existing (validated) clamp.
// Non-rotated labels are centered (dominant-baseline:middle), so they sit flush to the bar's
// outer edge when they fit, and float just outside the bar when it is too short to contain them.
function impLabelY(top, base, off, rot) {
if (rot) return top > base - off ? top - off : Math.min(top + 10, base - off);
return (base - top) >= off ? top + off / 2 : top - off / 2;
}
function impLabelOutside(top, base, off, rot) {
return rot ? top > base - off : (base - top) < off;
}
function expLabelY(bot, base, off, rot) {
if (rot) return bot < base + 15 ? bot + 15 : bot - 14;
return (bot - base) >= off ? bot - off / 2 : bot + off / 2;
}
function expLabelOutside(bot, base, off, rot) {
return rot ? bot < base + 15 : (bot - base) < off;
}

$: {
heightAvailable = height-titleHeight;
let innerWidth = width - (config.padding.left + config.padding.right);
Expand Down Expand Up @@ -117,12 +137,12 @@
/>

{#if barWidth > 15}
<text
<text
width="{barWidth * 0.95}"
dominant-baseline="middle"
text-anchor="{barWidth < vertSwitch || point.labelAngle ? 'left' : 'middle'}"
fill="{yScale(point.value) > yScale(0)-labelOffset && !config.dark ? point.color : 'white'}"
transform="translate({xScale(i) + barWidth/2} {yScale(point.value) > yScale(0) - labelOffset ? yScale(point.value) - labelOffset : yScale(point.value) + 10}) rotate({point.labelAngle ? point.labelAngle : barWidth < vertSwitch ? 90 : 0})"
fill="{impLabelOutside(yScale(point.value), yScale(0), labelOffset, !!point.labelAngle || barWidth < vertSwitch) && !config.dark ? point.color : 'white'}"
transform="translate({xScale(i) + barWidth/2} {impLabelY(yScale(point.value), yScale(0), labelOffset, !!point.labelAngle || barWidth < vertSwitch)}) rotate({point.labelAngle ? point.labelAngle : barWidth < vertSwitch ? 90 : 0})"
use:fitText={!point.labelAngle && barWidth >= vertSwitch ? barWidth * 0.95 : null}
>{point.label}</text>
{/if}
Expand All @@ -138,12 +158,12 @@
fill="{point.color2 ? point.color2 : point.color}"
/>
{#if barWidth > 15}
<text
<text
width="{barWidth * 0.95}"
dominant-baseline="middle"
text-anchor="{'middle'}"
fill="{yScale(-point.value2) < yScale(0) + 15 && !config.dark ? point.color2 ? point.color2 : point.color : 'white'}"
transform="translate({xScale(i) + (barWidth/2)} {yScale(-point.value2) < yScale(0) + 15 ? yScale(-point.value2) + 15 : yScale(-point.value2) - 14}) rotate({barWidth < vertSwitch ? 90 : 0})"
fill="{expLabelOutside(yScale(-point.value2), yScale(0), labelOffset, barWidth < vertSwitch) && !config.dark ? point.color2 ? point.color2 : point.color : 'white'}"
transform="translate({xScale(i) + (barWidth/2)} {expLabelY(yScale(-point.value2), yScale(0), labelOffset, barWidth < vertSwitch)}) rotate({barWidth < vertSwitch ? 90 : 0})"
use:fitText={barWidth >= vertSwitch ? barWidth * 0.95 : null}
>{point.label2}</text>
{#if point.title2}
Expand Down
13 changes: 13 additions & 0 deletions ui/src/lib/UiFeatureToggle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script>
export let cfg;
export let item;
export let translations = {};
</script>
<div class="w-1/2">
{translations.conf?.ui?.[item.key] ?? item.name}<br/>
<select name="u{item.key}" bind:value={cfg[item.key]} class="in-s">
<option value={0}>{translations.conf?.ui?.disabled ?? "Disabled"}</option>
<option value={1}>{translations.conf?.ui?.enabled ?? "Enabled"}</option>
<option value={2}>{translations.conf?.ui?.auto ?? "Auto"}</option>
</select>
</div>
10 changes: 2 additions & 8 deletions ui/src/routes/ConfigurationRoute.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
import CountrySelectOptions from '../lib/CountrySelectOptions.svelte';
import { push } from 'svelte-spa-router';
import SubnetOptions from '../lib/SubnetOptions.svelte';
import UiFeatureToggle from '../lib/UiFeatureToggle.svelte';
import QrCode from 'svelte-qrcode';

let basepath = "/";
Expand Down Expand Up @@ -870,14 +871,7 @@
<input type="hidden" name="u" value="true"/>
<div class="flex flex-wrap">
{#each uiElements as el}
<div class="w-1/2">
{translations.conf?.ui?.[el.key] ?? el.name}<br/>
<select name="u{el.key}" bind:value={configuration.u[el.key]} class="in-s">
<option value={0}>{translations.conf?.ui?.disabled ?? "Disabled"}</option>
<option value={1}>{translations.conf?.ui?.enabled ?? "Enabled"}</option>
<option value={2}>{translations.conf?.ui?.auto ?? "Auto"}</option>
</select>
</div>
<UiFeatureToggle cfg={configuration.u} item={el} {translations} />
{/each}
<div class="w-1/2">
{translations.conf?.ui?.lang ?? "Language"}
Expand Down
Loading