@icij/murmur-next 4.7.5 → 4.8.1

package/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import * as d3 from 'd3'
 import keysFn from 'lodash/keys'
-import find from 'lodash/find'
 import get from 'lodash/get'
 import identity from 'lodash/identity'
 import sortByFn from 'lodash/sortBy'
@@ -15,7 +14,6 @@ import {
   watch
 } from 'vue'
 import { getChartProps, useChart } from '@/composables/useChart'
-import { useQueryObserver } from '@/composables/useQueryObserver'
 
 defineOptions({
   name: 'StackedColumnChart'
@@ -157,7 +155,6 @@ const highlightedKeys = ref(props.highlights)
 const highlightTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined)
 const isLoaded = ref(false)
 const el = ref<ComponentPublicInstance<HTMLElement> | null>(null)
-const { querySelector, querySelectorAll } = useQueryObserver(el.value)
 
 const {
   elementsMaxBBox,
@@ -383,11 +380,12 @@ function stackBarAndValue(i: string | number): StackItem[] {
 }
 
 function queryBarAndValue(i: number, key: string) {
-  if (!mounted.value) {
+  const root = el.value as unknown as HTMLElement
+  if (!mounted.value || !root) {
     return {}
   }
   const rowSelector = '.stacked-column-chart__groups__item'
-  const row = querySelectorAll(rowSelector)[i] as HTMLElement
+  const row = root.querySelectorAll(rowSelector)[i] as HTMLElement
   const barSelector = `.stacked-column-chart__groups__item__bars__item--${key}`
   const bar = row.querySelector(barSelector) as HTMLElement
   const valueSelector = '.stacked-column-chart__groups__item__bars__item__value'
@@ -399,37 +397,64 @@ function isHidden(i: string | number, key: string) {
   return props.hideEmptyValues && !sortedData.value[i as number][key]
 }
 
-function hasValueOverflow(i: string | number, key: string) {
-  try {
-    const stack = stackBarAndValue(i)
-    return find(stack, { key })?.overflow
-  }
-  catch {
-    return false
+interface LabelState {
+  overflow: boolean
+  pushed: boolean
+  hidden: boolean
+}
+
+const labelStates = ref<Record<string, LabelState>>({})
+
+function labelStateKey(i: number | string, key: string) {
+  return `${i}-${key}`
+}
+
+function computeLabelStates() {
+  const root = el.value as unknown as HTMLElement
+  if (!root || !mounted.value || !sortedData.value?.length) return
+
+  const states: Record<string, LabelState> = {}
+
+  for (let i = 0; i < sortedData.value.length; i++) {
+    try {
+      const stack = stackBarAndValue(i)
+      for (const item of stack) {
+        states[labelStateKey(i, item.key)] = {
+          overflow: item.overflow,
+          pushed: item.pushed,
+          hidden: false
+        }
+      }
+      // A value is hidden when both it and the next key overflow
+      for (let j = 0; j < stack.length; j++) {
+        const nextItem = stack[j + 1]
+        if (nextItem && stack[j].overflow && nextItem.overflow) {
+          states[labelStateKey(i, stack[j].key)].hidden = true
+        }
+      }
+    }
+    catch {
+      // If measurement fails for a row, skip it
+    }
   }
+
+  labelStates.value = states
+}
+
+function hasValueOverflow(i: string | number, key: string) {
+  return labelStates.value[labelStateKey(i, key)]?.overflow ?? false
 }
 
 function hasValuePushed(i: string | number, key: string) {
-  try {
-    const stack = stackBarAndValue(i)
-    return find(stack, { key })?.pushed
-  }
-  catch {
-    return false
-  }
+  return labelStates.value[labelStateKey(i, key)]?.pushed ?? false
 }
 
 function hasValueHidden(i: string | number, key: string) {
-  const keyIndex = discoveredKeys.value.indexOf(key)
-  const nextKey = discoveredKeys.value[keyIndex + 1]
-  if (!nextKey) {
-    return false
-  }
-  return hasValueOverflow(i, key) && hasValueOverflow(i, nextKey)
+  return labelStates.value[labelStateKey(i, key)]?.hidden ?? false
 }
 
 function formatXDatum(d: string) {
-  return d3Formatter(d, props.yAxisTickFormat)
+  return d3Formatter(d, props.xAxisTickFormat)
 }
 
 function formatYDatum(d: string) {
@@ -445,13 +470,17 @@ watch(
 
 watch(sortedData, async () => {
   await nextTick()
+  const root = el.value as unknown as HTMLElement
+  if (!root) return
   // This must be set after the column have been rendered
-  const element = querySelector('.stacked-column-chart__groups__item__bars')
+  const element = root.querySelector('.stacked-column-chart__groups__item__bars') as HTMLElement
   // Update the left axis only if the bars exists
   if (element) {
-    leftAxisHeight.value = (element as HTMLElement).offsetHeight
+    leftAxisHeight.value = element.offsetHeight
     leftAxisCanvas.value.call(leftAxis.value as any)
   }
+  // Compute label overflow/pushed/hidden states after DOM layout
+  computeLabelStates()
 })
 </script>
 
@@ -484,8 +513,8 @@ watch(sortedData, async () => {
         <span
           class="stacked-column-chart__legend__item__box"
           :style="{ 'background-color': colorScale(key) }"
-        >
-          {{ groupName(key) }}</span>
+        />
+        <span class="stacked-column-chart__legend__item__label">{{ groupName(key) }}</span>
       </li>
     </ul>
     <div class="d-flex flex-grow-1 position-relative overflow-hidden">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.7.5",
+  "version": "4.8.1",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",