@icij/murmur-next 4.7.4 → 4.8.0

package/lib/components/App/AppIcon.vue

@@ -97,8 +97,12 @@ const color = computed(() => {
   return colorVariant
 })
 
+const isPercentSize = computed(() => {
+  return typeof props.size === 'string' && props.size.endsWith('%')
+})
+
 const isRawSize = computed(() => {
-  return !['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', undefined].includes(props.size)
+  return !['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', undefined].includes(props.size) && !isPercentSize.value
 })
 
 const hasSize = computed(() => {
@@ -109,6 +113,7 @@ const style = computed(() => {
   return {
     '--app-icon-color': color.value,
     '--app-icon-raw-size': isRawSize.value ? props.size : undefined,
+    '--app-icon-percent-size': isPercentSize.value ? props.size : undefined,
     '--app-icon-size': hasSize.value ? props.size : undefined,
     '--app-icon-scale': props.scale ?? 1,
     '--app-icon-spin-duration': props.spinDuration,
@@ -122,6 +127,7 @@ const classList = computed(() => {
     [`app-icon--size-${props.size}`]: hasSize.value,
     [`app-icon--has-size`]: hasSize.value,
     [`app-icon--raw-size`]: isRawSize.value,
+    [`app-icon--percent-size`]: isPercentSize.value,
     [`app-icon--hover`]: currentHover.value,
     [`app-icon--spin`]: props.spin,
     [`app-icon--spin-reverse`]: props.spinReverse,
@@ -171,6 +177,16 @@ const classList = computed(() => {
     font-size: var(--app-icon-raw-size);
   }
 
+  &--percent-size {
+    width: var(--app-icon-percent-size);
+    height: auto;
+
+    :deep(svg) {
+      width: 100%;
+      height: auto;
+    }
+  }
+
   &--spin :deep(svg) {
     animation: app-icon-spin var(--app-icon-spin-duration, 1s) linear infinite;
   }

package/lib/datavisualisations/ColumnChart/ColumnChart.vue

@@ -16,6 +16,7 @@ interface ColumnBar {
   height: number
   x: number
   y: number
+  isTotal?: boolean
 }
 
 export interface ColumnChartProps {
@@ -131,6 +132,23 @@ export interface ColumnChartProps {
    * Aspect ratio to use in social mode.
    */
   socialModeRatio?: number
+  /**
+   * Display columns as a waterfall chart where each bar starts where the previous one ended.
+   */
+  waterfall?: boolean
+  /**
+   * Show a total bar at the end of the waterfall chart displaying the sum of all values.
+   * Only applies when `waterfall` is true.
+   */
+  waterfallTotal?: boolean
+  /**
+   * Label for the waterfall total bar on the x-axis.
+   */
+  waterfallTotalLabel?: string
+  /**
+   * Color for the waterfall total bar. Falls back to currentColor.
+   */
+  waterfallTotalColor?: string | null
 }
 
 const props = withDefaults(defineProps<ColumnChartProps>(), {
@@ -161,7 +179,11 @@ const props = withDefaults(defineProps<ColumnChartProps>(), {
   dataUrlType: 'json',
   chartHeightRatio: undefined,
   socialMode: false,
-  socialModeRatio: 5 / 4
+  socialModeRatio: 5 / 4,
+  waterfall: false,
+  waterfallTotal: false,
+  waterfallTotalLabel: 'Total',
+  waterfallTotalColor: null
 })
 
 const emit = defineEmits<{
@@ -245,16 +267,29 @@ const padded = computed((): { width: number, height: number } => {
 })
 
 const scaleX = computed((): d3.ScaleBand<string> => {
+  const domain = sortedData.value.map(iteratee(props.timeseriesKey))
+  if (props.waterfall && props.waterfallTotal) {
+    domain.push(props.waterfallTotalLabel)
+  }
   return d3
     .scaleBand()
-    .domain(sortedData.value.map(iteratee(props.timeseriesKey)))
+    .domain(domain)
     .range([0, padded.value.width])
     .padding(props.barPadding)
 })
 
+const waterfallTotalValue = computed((): number => {
+  return d3.sum(sortedData.value, iteratee(props.seriesName)) ?? 0
+})
+
 const scaleY = computed((): d3.ScaleLinear<number, number> => {
-  const maxValue
-    = props.maxValue ?? d3.max(sortedData.value, iteratee(props.seriesName))
+  let maxValue: number
+  if (props.waterfall) {
+    maxValue = props.maxValue ?? waterfallTotalValue.value
+  }
+  else {
+    maxValue = props.maxValue ?? d3.max(sortedData.value, iteratee(props.seriesName))
+  }
   return d3
     .scaleLinear()
     .domain([0, maxValue])
@@ -262,13 +297,44 @@ const scaleY = computed((): d3.ScaleLinear<number, number> => {
 })
 
 const bars = computed((): ColumnBar[] => {
+  const barWidth = Math.max(1, Math.abs(scaleX.value.bandwidth()) - props.barMargin)
+
+  if (props.waterfall) {
+    let cumulative = 0
+    const waterfallBars: ColumnBar[] = sortedData.value.map((datum: any) => {
+      const value = datum[props.seriesName]
+      cumulative += value
+      return {
+        datum,
+        width: barWidth,
+        height: Math.abs(padded.value.height - scaleY.value(value)),
+        x: (scaleX.value(datum[props.timeseriesKey]) ?? 0) + props.barMargin / 2,
+        y: scaleY.value(cumulative)
+      }
+    })
+
+    if (props.waterfallTotal) {
+      const totalDatum = {
+        [props.timeseriesKey]: props.waterfallTotalLabel,
+        [props.seriesName]: waterfallTotalValue.value
+      }
+      waterfallBars.push({
+        datum: totalDatum,
+        width: barWidth,
+        height: Math.abs(padded.value.height - scaleY.value(waterfallTotalValue.value)),
+        x: (scaleX.value(props.waterfallTotalLabel) ?? 0) + props.barMargin / 2,
+        y: scaleY.value(waterfallTotalValue.value),
+        isTotal: true
+      })
+    }
+
+    return waterfallBars
+  }
+
   return sortedData.value.map((datum: any) => {
     return {
       datum,
-      width: Math.max(
-        1,
-        Math.abs(scaleX.value.bandwidth()) - props.barMargin
-      ),
+      width: barWidth,
       height: Math.abs(
         padded.value.height - scaleY.value(datum[props.seriesName])
       ),
@@ -298,9 +364,14 @@ const xAxisTickValues = computed((): string[] => {
   const ticks
     = props.xAxisTicks ?? sortedData.value.map(iteratee(props.timeseriesKey))
   // Then filter out ticks according to `this.xAxisHiddenTicks`
-  return ticks.map((tick: string, i: number) => {
+  const filtered = ticks.map((tick: string, i: number) => {
     return (i + 1) % xAxisHiddenTicks.value ? null : tick
   }) as string[]
+  // Add the total label for waterfall charts
+  if (props.waterfall && props.waterfallTotal) {
+    filtered.push(props.waterfallTotalLabel)
+  }
+  return filtered
 })
 
 const xAxis = computed((): d3.Axis<string> => {
@@ -383,11 +454,13 @@ watch(() => props.socialMode, update, { immediate: true })
       'column-chart--hover': hover,
       'column-chart--stripped': stripped,
       'column-chart--social-mode': socialMode,
-      'column-chart--loaded': isLoaded
+      'column-chart--loaded': isLoaded,
+      'column-chart--waterfall': waterfall
     }"
     :style="{
       '--column-color': columnColor,
-      '--column-highlight-color': columnHighlightColor
+      '--column-highlight-color': columnHighlightColor,
+      '--column-total-color': waterfallTotalColor
     }"
     class="column-chart"
   >
@@ -414,7 +487,8 @@ watch(() => props.socialMode, update, { immediate: true })
           v-for="(bar, index) in bars"
           :key="index"
           :class="{
-            'column-chart__columns__item--highlight': highlighted(bar.datum)
+            'column-chart__columns__item--highlight': highlighted(bar.datum),
+            'column-chart__columns__item--total': bar.isTotal
           }"
           :style="{ transform: `translate(${bar.x}px, 0px)` }"
           class="column-chart__columns__item"
@@ -500,6 +574,10 @@ watch(() => props.socialMode, update, { immediate: true })
       fill: var(--column-highlight-color, var(--primary, $primary));
     }
 
+    &--total {
+      fill: var(--column-total-color, currentColor);
+    }
+
     &__placeholder {
       opacity: 0;
 

package/lib/datavisualisations/StackedBarChart/StackedBarChart.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import * as d3 from 'd3'
-import find from 'lodash/find'
 import get from 'lodash/get'
 import identity from 'lodash/identity'
 import kebabCase from 'lodash/kebabCase'
 import keysFn from 'lodash/keys'
 import without from 'lodash/without'
 import sortByFn from 'lodash/sortBy'
-import { ComponentPublicInstance, computed, ref, watch } from 'vue'
+import { ComponentPublicInstance, computed, nextTick, ref, watch } from 'vue'
 import { getChartProps, useChart } from '@/composables/useChart'
-import { useQueryObserver } from '@/composables/useQueryObserver'
 import { isArray } from 'lodash'
 
 defineOptions({
@@ -150,8 +148,6 @@ const {
   dataHasHighlights
 } = useChart(el, getChartProps(props), { emit }, isLoaded)
 
-const { querySelectorAll } = useQueryObserver(el.value)
-
 const hasConstraintHeight = computed(() => {
   return props.fixedHeight !== null || props.socialMode
 })
@@ -308,12 +304,13 @@ function stackBarAndValue(i: number | string): StackItem[] {
 }
 
 function queryBarAndValue(i: number, key: string) {
-  if (!mounted.value) {
+  const root = el.value as unknown as HTMLElement
+  if (!mounted.value || !root) {
     return {}
   }
   const barClass = 'stacked-bar-chart__groups__item__bars__item'
   const rowSelector = '.stacked-bar-chart__groups__item'
-  const row = querySelectorAll(rowSelector)[i] as HTMLElement
+  const row = root.querySelectorAll(rowSelector)[i] as HTMLElement
   const normalizedKey = normalizeKey(key)
   const barSelector = `.${barClass}--${normalizedKey}`
   const bar = row?.querySelector(barSelector) as HTMLElement
@@ -322,35 +319,59 @@ function queryBarAndValue(i: number, key: string) {
   return { bar, row, value }
 }
 
-function hasValueOverflow(i: number | string, 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
+        }
+      }
+      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: number | string, key: string) {
+  return labelStates.value[labelStateKey(i, key)]?.overflow ?? false
 }
 
 function hasValuePushed(i: number | string, 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: number | string, key: string) {
-  const keyIndex = discoveredKeys.value.indexOf(key)
-  const nextKey = discoveredKeys.value[keyIndex + 1]
-  if (!nextKey) {
-    return false
-  }
-  const keyC = hasValueOverflow(i, key)
-  const keyN = hasValueOverflow(i, nextKey)
-  return keyC && keyN
+  return labelStates.value[labelStateKey(i, key)]?.hidden ?? false
 }
 
 function isHidden(i: number | string, key: string) {
@@ -364,6 +385,12 @@ function formatXDatum(d: string) {
 watch(() => props.highlights, (newHighlights: string[]) => {
   highlightedKeys.value = newHighlights
 })
+
+// Compute label states after DOM layout
+watch(sortedData, async () => {
+  await nextTick()
+  computeLabelStates()
+})
 </script>
 
 <template>

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,33 +397,60 @@ 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) {
@@ -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.4",
+  "version": "4.8.0",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",