#434

frontend/src/components/counts/CountsAxes.tsx

@@ -1,8 +1,11 @@
+import LocalisedText from '@/components/LocalisedText'
 import SortableList from '@/components/common/SortableList'
-import { countsAxisFields, countsFilterFields, readCountsJSON, useCountsDefinition }
+import { countsAxisFields, countsAxisLabel, countsFilterFields,
+	 readCountsJSON, useCountsDefinition }
     from '@/lib/countsDefinitions'
 import { useClientMotion } from '@/lib/useClientMotion'
 import { cn, inputClass } from '@/lib/utils'
+import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { CountsAxis } from '@/lib/countsDefinitions'
@@ -13,6 +16,7 @@ const CountsAxes = ({ params, update }: {
 ) => {
   const { label, message } = useUITranslation ('counts')
   const definition = useCountsDefinition ()
+  const locale = useLocale ()
   const motion = useClientMotion ()
   const available = countsAxisFields (definition, params.get ('definition') === 'history')
   const rows = readCountsJSON<CountsAxis[]> (params, 'rows', [])
@@ -22,8 +26,11 @@ const CountsAxes = ({ params, update }: {
       available: available.map (field => field.key).filter (id => !axes.some (
           axis => axis.field === id)),
       rows: rows.map (axis => axis.field), cols: cols.map (axis => axis.field) }
-  const name = (id: string) => message (
-      available.find (field => field.key === id)?.label ?? 'axis')
+  const name = (id: string) => {
+    const axis = axes.find (item => item.field === id)
+    return axis == null ? message (available.find (field => field.key === id)?.label ?? 'axis')
+	: countsAxisLabel (axis, definition, locale)
+  }
   const commit = (next: Record<string, string[]>) => {
     for (const group of ['rows', 'cols'] as const)
       update (group, JSON.stringify (next[group].map (field => axes.find (
@@ -46,7 +53,7 @@ const CountsAxes = ({ params, update }: {
 	return <div className={cn ('flex items-center gap-2 text-sm',
 	    group !== 'available' && 'flex-wrap')}>
 	  <span className="min-w-0 flex-1 break-words">
-	    {label (available.find (field => field.key === id)?.label ?? 'axis')}
+	    <LocalisedText language={name (id).language}>{name (id).text}</LocalisedText>
 	  </span>
 	  {group === 'available' && <span className="ml-auto inline-flex shrink-0 gap-1">
             {(['rows', 'cols'] as const).map (target => <button key={target} type="button"