doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bar charts read right in Arabic, and the value column fits its longest number

Browse source 
rega, row 82 (gospel-internet board at ?lang=ar; gospel-resources charts share the component): under an
inherited rtl the SVG's text-anchor start flipped, so category labels ran off the left edge and value
labels drew back over their bars ('869' cut to '9'). The chart's SVG is direction:ltr, since its geometry
is left-to-right by construction; each label still shapes as Arabic. In every locale the value column was a
fixed 74px, which clipped '10,160,000' in a 335px card; it now fits the longest value label (never under
74px). Needs eyes: row 82 in ar and en.
This commit is contained in:
Doxa Maps 2026-09-27 08:50:07 +00:00
parent 1775f5acb5
commit 5a2aa4e168
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
library/components/charts/BarChart.vue
View file

@ -95,8 +95,13 @@ const labelW = computed(() => {
return Math.max(96, Math.min(260, Math.round((width.value || 640) * 0.34)))
})
// Room on the right for the printed value when a bar runs long.
const VALUE_GUTTER = 74
const plotW = computed(() => Math.max(40, (width.value || 640) - labelW.value - VALUE_GUTTER))
// The value column fits the LONGEST value label (rega, row 82: a fixed 74px clipped "10,160,000" at the edge
// of a 335px card). ~7px per character at the value font, plus the 8px gap and a margin; never under 74.
const VALUE_GUTTER = computed(() => {
const longest = Math.max(0, ...rows.value.filter((r) => !r.unknown).map((r) => String(props.format(total(r))).length))
return Math.max(74, longest * 7 + 16)
})
const plotW = computed(() => Math.max(40, (width.value || 640) - labelW.value - VALUE_GUTTER.value))
const rowStep = computed(() => props.barHeight + props.gap)
const svgH = computed(() => Math.max(rowStep.value, rows.value.length * rowStep.value + 6))
@ -192,7 +197,10 @@ useShadowStyles(
<div v-if="!rows.length" class="bc-empty">{{ emptyText }}</div>
<svg v-else :width="width || 640" :height="svgH" role="img" :aria-label="ariaLabel">
<!-- direction:ltr on the SVG: its geometry is left-to-right by construction (labels at x=0, values after
the bar end). Under an inherited rtl, text-anchor start flips, so labels ran off the left edge and
values back over their bars (rega, row 82, ar). Each label's own text still shapes as Arabic. -->
<svg v-else :width="width || 640" :height="svgH" role="img" :aria-label="ariaLabel" direction="ltr" style="direction:ltr">
<defs>
<!-- Hatching means NOT MEASURED. It must not look like a small bar. -->
<pattern :id="`${uid}-hatch`" width="7" height="7" patternUnits="userSpaceOnUse"