From 5a2aa4e16818366c74dd16a4910de9f6df266c55 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Sun, 27 Sep 2026 08:50:07 +0000
Subject: [PATCH] Bar charts read right in Arabic, and the value column fits
 its longest number

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.
---
 library/components/charts/BarChart.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/library/components/charts/BarChart.vue b/library/components/charts/BarChart.vue
index 1f3512ee5..f7641a221 100644
--- a/library/components/charts/BarChart.vue
+++ b/library/components/charts/BarChart.vue
@@ -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"