mgv-backoffice 1.35.0 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",

package/src/components/BaseBarDistribution.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseBarDistribution from './BaseBarDistribution.vue'
+import type { DistributionBar } from '../types/distribution'
+
+const BARS: DistributionBar[] = [
+  { label: '0.5', count: 1 },
+  { label: '1', count: 4 },
+  { label: '2', count: 2 },
+]
+
+describe('BaseBarDistribution', () => {
+  it('renders one bar per entry with its count and label', () => {
+    const wrap = mount(BaseBarDistribution, { props: { bars: BARS } })
+    const bars = wrap.findAll('div[title]')
+    expect(bars).toHaveLength(3)
+    expect(wrap.text()).toContain('4')
+    expect(wrap.text()).toContain('0.5')
+  })
+
+  it('scales bar heights against the tallest count, with a 3px floor', () => {
+    const wrap = mount(BaseBarDistribution, {
+      props: { bars: [...BARS, { label: '9', count: 0 }], maxBarHeight: 56 },
+    })
+    const heights = wrap
+      .findAll('.rounded-t')
+      .map((el) => el.attributes('style'))
+    // count 4 → full height; count 2 → half; count 0 → 3px floor.
+    expect(heights[1]).toContain('height: 56px')
+    expect(heights[2]).toContain('height: 28px')
+    expect(heights[3]).toContain('height: 3px')
+  })
+
+  it('builds singular/plural tooltips with the prefix and noun', () => {
+    const wrap = mount(BaseBarDistribution, {
+      props: { bars: BARS, titlePrefix: 'Take profit', countNoun: 'variant' },
+    })
+    const titles = wrap
+      .findAll('div[title]')
+      .map((el) => el.attributes('title'))
+    expect(titles[0]).toBe('Take profit 0.5: 1 variant')
+    expect(titles[1]).toBe('Take profit 1: 4 variants')
+  })
+
+  it('exposes the aria label on the chart container', () => {
+    const wrap = mount(BaseBarDistribution, {
+      props: { bars: BARS, ariaLabel: 'Distribution of X' },
+    })
+    expect(wrap.get('[role="img"]').attributes('aria-label')).toBe('Distribution of X')
+  })
+})

package/src/components/BaseBarDistribution.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Compact value-distribution chart: one thin rounded bar per distinct value,
+// count labelled on top and the value underneath — scrolls sideways when
+// there are many bars. Pure Tailwind, no chart library. Extracted from
+// TradeAutomation's variant-stats modal, where it summarises how often each
+// parameter value occurs across generated strategy variants.
+import { computed } from 'vue'
+import type { DistributionBar } from '../types/distribution'
+
+const props = withDefaults(
+  defineProps<{
+    /** Bars in display order (callers sort ascending for numeric values). */
+    bars: DistributionBar[]
+    /** Accessible description of what the chart shows. */
+    ariaLabel?: string
+    /** Noun for each bar's tooltip count, e.g. "variant" → "3 variants". */
+    countNoun?: string
+    /** Tooltip prefix before the value, e.g. the field name. */
+    titlePrefix?: string
+    /** Height of the tallest bar, in px. */
+    maxBarHeight?: number
+    /** Tailwind classes for the bar fill. */
+    barClass?: string
+  }>(),
+  {
+    ariaLabel: 'Value distribution',
+    countNoun: 'item',
+    titlePrefix: '',
+    maxBarHeight: 56,
+    barClass: 'bg-emerald-500/80 dark:bg-emerald-400/80',
+  },
+)
+
+const maxCount = computed(() => Math.max(1, ...props.bars.map((b) => b.count)))
+
+const barHeight = (b: DistributionBar): number =>
+  Math.max(3, Math.round((b.count / maxCount.value) * props.maxBarHeight))
+
+const barTitle = (b: DistributionBar): string =>
+  `${props.titlePrefix ? `${props.titlePrefix} ` : ''}${b.label}: ${b.count} ${props.countNoun}${
+    b.count === 1 ? '' : 's'
+  }`
+</script>
+
+<template>
+  <div
+    class="flex items-end gap-1.5 overflow-x-auto pb-1"
+    role="img"
+    :aria-label="ariaLabel"
+  >
+    <div
+      v-for="b in bars"
+      :key="b.label"
+      class="flex min-w-7 flex-1 flex-col items-center gap-0.5"
+      :title="barTitle(b)"
+    >
+      <span class="text-[10px] tabular-nums text-slate-400 dark:text-slate-500">
+        {{ b.count }}
+      </span>
+      <div
+        class="w-full max-w-8 rounded-t"
+        :class="barClass"
+        :style="{ height: `${barHeight(b)}px` }"
+      />
+      <span
+        class="max-w-full truncate font-mono text-[10px] text-slate-500 dark:text-slate-400"
+        :title="b.label"
+      >
+        {{ b.label }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/BasePageHeader.vue

@@ -6,7 +6,11 @@
     Slots:
       • icon    — the page-specific Heroicon. Receives an `iconClass`
         slot prop carrying the theme-aware text colour, so callers can
-        bind `:class="iconClass"` on their icon component.
+        bind `:class="iconClass"` on their icon component. The badge
+        square only renders when this slot is filled, so icon-less apps
+        get a plain title/subtitle header.
+      • subtitle — rich subtitle content (links, emphasis); overrides
+        the `subtitle` prop.
       • actions — refresh / destructive buttons rendered on the right.
 
     Props:
@@ -16,18 +20,27 @@
         ('emerald' | 'sky' | 'red' | 'amber'). Defaults to 'emerald'.
       • maxWidthClass — Tailwind max-w utility constraining the header
         width so sibling views can share a footprint. Defaults to
-        'max-w-4xl'.
+        'max-w-4xl'; pass '' to skip the width wrapper entirely (the
+        header then spans whatever container it sits in).
+      • align — vertical alignment of the title block vs the actions:
+        'center' (default) or 'end' (actions sit on the title baseline).
+      • marginClass — space under the header. Defaults to 'mb-8'; pass
+        '' when the parent already manages vertical rhythm (space-y-*).
   -->
-  <div :class="['mx-auto px-4 sm:px-6', maxWidthClass]">
+  <header :class="maxWidthClass ? ['mx-auto px-4 sm:px-6', maxWidthClass] : undefined">
     <!--
       flex-wrap + gap so a long title and the action buttons reflow onto
       separate rows on narrow (mobile) viewports instead of the actions
       overflowing off the right edge of the screen. min-w-0 on the title
       group lets a long title truncate rather than shoving the actions out.
     -->
-    <div class="flex flex-wrap items-center justify-between gap-3 mb-8">
+    <div
+      class="flex flex-wrap justify-between gap-3"
+      :class="[align === 'end' ? 'items-end' : 'items-center', marginClass]"
+    >
       <div class="flex items-center gap-3 min-w-0">
         <div
+          v-if="$slots.icon"
           class="w-10 h-10 rounded-lg flex items-center justify-center"
           :class="badgeBgClass"
         >
@@ -37,8 +50,8 @@
           <h1 class="text-2xl font-bold" :class="t.primaryTextSoft">
             {{ title }}
           </h1>
-          <p v-if="subtitle" class="text-sm" :class="t.dimTextAlt">
-            {{ subtitle }}
+          <p v-if="subtitle || $slots.subtitle" class="text-sm" :class="t.dimTextAlt">
+            <slot name="subtitle">{{ subtitle }}</slot>
           </p>
         </div>
       </div>
@@ -46,7 +59,7 @@
         <slot name="actions" />
       </div>
     </div>
-  </div>
+  </header>
 </template>
 
 <script setup lang="ts">
@@ -62,11 +75,15 @@ const props = withDefaults(
     subtitle?: string
     iconColor?: IconColor
     maxWidthClass?: string
+    align?: 'center' | 'end'
+    marginClass?: string
   }>(),
   {
     subtitle: '',
     iconColor: 'emerald',
     maxWidthClass: 'max-w-4xl',
+    align: 'center',
+    marginClass: 'mb-8',
   },
 )
 

package/src/composables/usePolling.ts

@@ -35,6 +35,10 @@ export function usePolling(
 
   let timer: ReturnType<typeof setInterval> | null = null
   const active = ref(false)
+  // True only when the visibility handler paused an ACTIVE loop. A loop the
+  // caller stopped explicitly (stop(), e.g. an auto-refresh toggle) must stay
+  // stopped across hide/show cycles instead of being silently restarted.
+  let suspendedByVisibility = false
 
   function startTimer() {
     if (timer !== null || intervalMs === null) return
@@ -49,6 +53,7 @@ export function usePolling(
   }
 
   function start() {
+    suspendedByVisibility = false
     if (active.value) return
     active.value = true
     if (immediate) void fn()
@@ -56,19 +61,26 @@ export function usePolling(
   }
 
   function stop() {
+    suspendedByVisibility = false
     active.value = false
     stopTimer()
   }
 
   function onVisibilityChange() {
     if (document.visibilityState === 'visible') {
-      // Refresh right away so stale data doesn't linger for a full
-      // interval after the user returns, then re-arm the timer.
+      // Only resume a loop THIS handler paused — a caller-stopped loop
+      // stays stopped. Refresh right away so stale data doesn't linger
+      // for a full interval after the user returns, then re-arm the timer.
+      if (!suspendedByVisibility) return
+      suspendedByVisibility = false
       active.value = true
       void fn()
       startTimer()
     } else {
-      stop()
+      if (!active.value) return
+      active.value = false
+      stopTimer()
+      suspendedByVisibility = true
     }
   }
 

package/src/index.ts

@@ -50,6 +50,7 @@ export { default as BaseStatBreakdown } from './components/BaseStatBreakdown.vue
 export { default as BaseFilterChip } from './components/BaseFilterChip.vue'
 export { default as BaseCredentialsForm } from './components/BaseCredentialsForm.vue'
 export { default as BasePillPickerModal } from './components/BasePillPickerModal.vue'
+export { default as BaseBarDistribution } from './components/BaseBarDistribution.vue'
 export type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue'
 
 // Composables
@@ -94,6 +95,7 @@ export type { TableColumn } from './types/table'
 export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField'
 export type { StatBreakdownItem } from './types/statBreakdown'
 export type { PillPickerItem } from './types/pillPicker'
+export type { DistributionBar } from './types/distribution'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'

package/src/types/distribution.ts

@@ -0,0 +1,7 @@
+/** One bar of a BaseBarDistribution chart. */
+export interface DistributionBar {
+  /** Value rendered under the bar (already formatted for display). */
+  label: string
+  /** Occurrences of this value — drives the bar height. */
+  count: number
+}