@icij/murmur-next 4.7.5 → 4.8.1

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,15 +364,25 @@ 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> => {
   return d3
     .axisBottom(scaleX.value)
-    .tickFormat((d: any) => d3Formatter(d, props.xAxisTickFormat))
+    .tickFormat((d: any) => {
+      if (props.waterfall && props.waterfallTotal && d === props.waterfallTotalLabel) {
+        return d
+      }
+      return d3Formatter(d, props.xAxisTickFormat)
+    })
     .tickValues(xAxisTickValues.value)
 })
 
@@ -379,15 +455,17 @@ watch(() => props.socialMode, update, { immediate: true })
   <div
     ref="el"
     :class="{
-      'column-chart--has-highlights': dataHasHighlights,
+      'column-chart--has-highlights': dataHasHighlights || highlights.length > 0,
       '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 +492,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 +579,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/LineChart/LineChart.vue

@@ -22,8 +22,26 @@ const castCall = (fnOrValue = identity, ...rest: any[]) =>
 export interface LineChartProps {
   /**
    * Color of the line. Falls back to theme's dark color.
+   * Used for single-series mode (when `keys` is not set).
    */
   lineColor?: string | null
+  /**
+   * Colors for each line when using multi-series mode (`keys`).
+   */
+  lineColors?: string[]
+  /**
+   * Field names in data objects for each line series.
+   * When set, enables multi-line mode. When empty, falls back to `seriesName`.
+   */
+  keys?: string[]
+  /**
+   * Display names for each key in the legend.
+   */
+  groups?: string[]
+  /**
+   * Hide the legend (only relevant in multi-line mode).
+   */
+  hideLegend?: boolean
   /**
    * Fixed width for y-axis labels in pixels. If not set, width is calculated automatically.
    */
@@ -34,6 +52,7 @@ export interface LineChartProps {
   fixedHeight?: number | null
   /**
    * Field name in data objects containing the y-axis value.
+   * Used for single-series mode (when `keys` is not set).
    */
   seriesName?: string
   /**
@@ -76,6 +95,10 @@ export interface LineChartProps {
 
 const props = withDefaults(defineProps<LineChartProps>(), {
   lineColor: null,
+  lineColors: () => [],
+  keys: () => [],
+  groups: () => [],
+  hideLegend: false,
   fixedLabelWidth: null,
   fixedHeight: null,
   seriesName: 'value',
@@ -95,10 +118,17 @@ const emit = defineEmits<{
   resized: []
 }>()
 
+interface LineSeries {
+  key: string
+  path: string | null
+  color: string | null
+}
+
 const width = ref(0)
 const height = ref(0)
 const el = ref<ComponentPublicInstance<HTMLElement> | null>(null)
 const line = ref<d3.Line<[number, number]> | null>(null)
+const lines = ref<LineSeries[]>([])
 const isLoaded = ref(false)
 
 const {
@@ -109,6 +139,40 @@ const {
   baseHeightRatio
 } = useChart(el, getChartProps(props), { emit }, isLoaded, setSizes)
 
+const isMultiLine = computed(() => props.keys.length > 0)
+
+const activeKeys = computed(() => {
+  return isMultiLine.value ? props.keys : [props.seriesName]
+})
+
+const colorScale = computed(() => {
+  return d3
+    .scaleOrdinal<string>()
+    .domain(activeKeys.value)
+    .range(props.lineColors.length ? props.lineColors : d3.schemeCategory10)
+})
+
+const highlightedKey = ref<string | null>(null)
+
+const hasHighlight = computed(() => highlightedKey.value !== null)
+
+function highlight(key: string) {
+  highlightedKey.value = key
+}
+
+function resetHighlight() {
+  highlightedKey.value = null
+}
+
+function isHighlighted(key: string) {
+  return highlightedKey.value === key
+}
+
+function groupName(key: string) {
+  const index = props.keys.indexOf(key)
+  return props.groups[index] || key
+}
+
 const labelWidth = computed(() => {
   if (props.fixedLabelWidth) {
     return props.fixedLabelWidth
@@ -162,10 +226,12 @@ const formattedData = computed(() => {
     return []
   }
   return loadedData.value.map((d: any) => {
-    // toRaw prevent modifying the Proxy object created with the props.data
-    let rawD = toRaw(d)
+    // Clone to avoid mutating reactive source data (parseTime on already-parsed Date returns null)
+    const rawD = { ...toRaw(d) }
     rawD[props.timeseriesKey] = parseTime(d[props.timeseriesKey])
-    rawD[props.seriesName] = +d[props.seriesName]
+    for (const key of activeKeys.value) {
+      rawD[key] = +d[key]
+    }
     return rawD
   })
 })
@@ -191,19 +257,34 @@ function update() {
   scale.value.x.domain(
     d3.extent(formattedData.value, (d: any) => d[props.timeseriesKey]) as [Date, Date]
   )
-  scale.value.y.domain([
-    0,
-    d3.max(formattedData.value, (d: any) => d[props.seriesName]) as number
-  ])
 
-  const points = formattedData.value.map((d: any) => {
-    return {
+  // Y domain covers all series
+  const maxY = d3.max(activeKeys.value, (key) => {
+    return d3.max(formattedData.value, (d: any) => d[key]) as number
+  }) as number
+  scale.value.y.domain([0, maxY])
+
+  if (isMultiLine.value) {
+    lines.value = activeKeys.value.map((key) => {
+      const points = formattedData.value.map((d: any) => ({
+        x: scale.value.x(d[props.timeseriesKey]),
+        y: scale.value.y(d[key])
+      }))
+      return {
+        key,
+        path: createLine(points as any) as unknown as string,
+        color: colorScale.value(key)
+      }
+    })
+  }
+  else {
+    const points = formattedData.value.map((d: any) => ({
       x: scale.value.x(d[props.timeseriesKey]),
       y: scale.value.y(d[props.seriesName])
-    }
-  })
+    }))
+    line.value = createLine(points as any) as any
+  }
 
-  line.value = createLine(points as any) as any
   d3.select(el.value)
     .select('.line-chart__axis--x')
     .call(
@@ -234,8 +315,31 @@ watchEffect(() => {
     ref="el"
     class="line-chart"
     :style="{ '--line-color': lineColor }"
-    :class="{ 'line-chart--social-mode': socialMode }"
+    :class="{
+      'line-chart--social-mode': socialMode,
+      'line-chart--multi': isMultiLine,
+      'line-chart--has-highlight': hasHighlight
+    }"
   >
+    <ul
+      v-if="isMultiLine && !hideLegend"
+      class="line-chart__legend list-inline"
+    >
+      <li
+        v-for="key in activeKeys"
+        :key="key"
+        class="line-chart__legend__item list-inline-item d-inline-flex"
+        :class="{ 'line-chart__legend__item--highlighted': isHighlighted(key) }"
+        @mouseover="highlight(key)"
+        @mouseleave="resetHighlight()"
+      >
+        <span
+          class="line-chart__legend__item__box"
+          :style="{ 'background-color': colorScale(key) }"
+        />
+        <span class="line-chart__legend__item__label">{{ groupName(key) }}</span>
+      </li>
+    </ul>
     <svg
       :width="width"
       :height="height"
@@ -255,7 +359,20 @@ watchEffect(() => {
         >
       </g>
       <g :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }">
+        <template v-if="isMultiLine">
+          <path
+            v-for="series in lines"
+            :key="series.key"
+            class="line-chart__line"
+            :class="{ 'line-chart__line--highlighted': isHighlighted(series.key) }"
+            :d="series.path"
+            :style="{ stroke: series.color }"
+            @mouseover="highlight(series.key)"
+            @mouseleave="resetHighlight()"
+          />
+        </template>
         <path
+          v-else
           class="line-chart__line"
           :d="line"
         />
@@ -273,6 +390,29 @@ watchEffect(() => {
     fill: currentColor;
   }
 
+  &__legend {
+    &__item {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      padding-right: $spacer * 0.5;
+      transition: opacity 0.3s, filter 0.3s;
+
+      .line-chart--has-highlight &:not(&--highlighted) {
+        opacity: 0.2;
+        filter: grayscale(30%) brightness(10%);
+      }
+
+      &__box {
+        height: 1em;
+        width: 1em;
+        border-radius: 0.5em;
+        display: inline-block;
+        margin-right: $spacer * 0.5;
+      }
+    }
+  }
+
   &__axis {
     .domain {
       display: none;
@@ -291,6 +431,11 @@ watchEffect(() => {
     fill: none;
     stroke: var(--line-color, var(--dark, $dark));
     stroke-width: 3px;
+    transition: opacity 0.3s;
+
+    .line-chart--has-highlight &:not(&--highlighted) {
+      opacity: 0.15;
+    }
   }
 }
 </style>

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>