@icij/murmur-next 4.0.18 → 4.1.1

package/lib/components/TinyPagination.vue

@@ -62,7 +62,7 @@
 
 <script lang="ts">
 import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
-import { defineComponent, PropType, ref, computed, onBeforeMount } from 'vue'
+import { defineComponent, PropType, ref, computed, onBeforeMount, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { library, default as Fa } from './Fa'
@@ -187,6 +187,10 @@ export default defineComponent({
 
     const currentPageInput = ref<number | string>(pageValue.value)
 
+    watch(() => props.modelValue, (value) => {
+      currentPageInput.value = value
+    })
+
     function applyPageForm(): void {
       if (!isNaN(currentPageInput.value as number)) {
         emit('update:modelValue', +currentPageInput.value)

package/lib/composables/chart.ts

@@ -4,14 +4,15 @@ import isObject from 'lodash/isObject'
 import isString from 'lodash/isString'
 import max from 'lodash/max'
 import some from 'lodash/some'
-import { ComponentPublicInstance, computed, onMounted, ref, watch } from 'vue'
+import { ComponentPublicInstance, computed, toRef, toValue, ref, watch, onMounted, nextTick } from 'vue'
 import { isUrl } from '@/utils/strings'
 import { Ref, SetupContext } from '@vue/runtime-core'
 import useResizeObserver from '@/composables/resizeObserver'
-import { watchEffect } from 'vue'
 
 type ChartContext<T extends string[]> = SetupContext<[...T, ...string[]]>
+
 type ChartEmit = Pick<ChartContext<['resized', 'loaded']>, 'emit'>
+
 type ChartProps = {
   chartHeightRatio: { type: NumberConstructor }
   data: {
@@ -28,13 +29,13 @@ type ChartProps = {
   socialModeRatio: { default: number; type: NumberConstructor }
 }
 
-export function getChartProps(props: any): ChartProps {
+export function getChartProps(props: any): any {
   return {
-    chartHeightRatio: props.chartHeightRatio,
-    data: props.data,
-    dataUrlType: props.dataUrlType,
-    socialMode: props.socialMode,
-    socialModeRatio: props.socialModeRatio
+    chartHeightRatio: toRef(props, 'chartHeightRatio'),
+    data: toRef(props, 'data'),
+    dataUrlType: toRef(props, 'dataUrlType'),
+    socialMode: toRef(props, 'socialMode'),
+    socialModeRatio: toRef(props, 'socialModeRatio')
   }
 }
 
@@ -76,10 +77,13 @@ export const chartProps = (): ChartProps => ({
     default: 5 / 4
   }
 })
+
 export const chartEmits = ['resized', 'loaded']
+
 type Chart = {
   dataHasHighlights: any
   loadedData: any
+  mounted: Ref<boolean>,
   xAxisYearFormat: (year: number | string) => number | string
   elementsMaxBBox: ({
     selector,
@@ -93,42 +97,51 @@ type Chart = {
   d3Formatter: any
   baseHeightRatio: any
 }
+
 export function useChart(
   resizableRef: Ref<ComponentPublicInstance<HTMLElement> | null>,
-  props: ChartProps,
+  props: any,
   { emit }: ChartEmit,
   isLoaded: Ref<boolean>,
   onResized?: ()=>void,
   afterLoaded?: () => Promise<any>
 ): Chart {
+
   const { resizeRef, resizeState } = useResizeObserver(resizableRef)
   const loadedData = ref<unknown|unknown[]>([])
+  const mounted = ref<boolean>(false)
+  const dataRef = toRef(props.data)
+  const dataUrlTypeRef = toRef(props.dataUrlType)
+  
+  onMounted(() => {
+    nextTick(() => {
+      mounted.value = true
+    })
+  })
 
-  onMounted(async () => {
+  watch([dataRef, dataUrlTypeRef], async () => { 
     await document.fonts?.ready
+    
+    const data = toValue(dataRef)
+    const dataUrlType = toValue(dataUrlTypeRef)
 
-    watchEffect(async () => {
-      if (!isLoaded.value) {
-        if (isString(props.data)) {
-          // @ts-expect-error introspection in typescript is tricky
-          loadedData.value = await d3[props.dataUrlType](props.data)
-        } else {
-          loadedData.value = props.data as unknown as []
-        }
-
-        if (afterLoaded) {
-          await afterLoaded()
-        }
-        isLoaded.value = true
-        emit('loaded')
-      }
-
-      if (isLoaded.value && onResized) {
-        onResized()
-        emit('resized')
-      }
-    })
-  })
+    if (isString(data)) {
+      // @ts-expect-error introspection in typescript is tricky
+      loadedData.value = await d3[dataUrlType](data)
+    } else {
+      loadedData.value = data as unknown as []
+    }
+
+    await afterLoaded?.()
+    isLoaded.value = true
+    emit('loaded')
+    
+    if (onResized) {
+      onResized()
+      emit('resized')
+    }
+  }, { immediate: true })
+  
   function elementsMaxBBox({
     selector = 'text',
     defaultWidth = null,
@@ -160,9 +173,11 @@ export function useChart(
     // previously using narrowWidth but it is automatically updated through resizeObserver state reactivity
     return resizeState.narrowWidth ? '’' + String(year).slice(2, 4) : year
   }
+
   function highlighted(datum: { highlight: boolean }) {
     return datum.highlight
   }
+
   function d3Formatter(value: any, formatter: any) {
     if (isFunction(formatter)) {
       return formatter(value)
@@ -171,15 +186,18 @@ export function useChart(
     }
     return value
   }
+
   const baseHeightRatio = computed(() => {
-    return (
-      props.chartHeightRatio ||
-      (props.socialMode ? props.socialModeRatio : 9 / 16)
-    )
+    const chartHeightRatio = toValue(props.chartHeightRatio)
+    const socialMode = toValue(props.socialMode)
+    const socialModeRatio = toValue(props.socialModeRatio)
+    return chartHeightRatio || (socialMode ? socialModeRatio : 9 / 16)
   })
+
   const dataHasHighlights = computed(() => {
-    if (Array.isArray(props.data)) {
-      return some(props.data, highlighted)
+    const data = toValue(dataRef)
+    if (Array.isArray(data)) {
+      return some(data, highlighted)
     }
     return false
   })
@@ -193,6 +211,7 @@ export function useChart(
 
   return {
     loadedData,
+    mounted,
     elementsMaxBBox,
     xAxisYearFormat,
     d3Formatter,

package/lib/composables/queryObserver.ts

@@ -0,0 +1,66 @@
+import get from 'lodash/get'
+import first from 'lodash/first'
+
+import { Ref, reactive } from 'vue'
+
+type ElementMap = {
+  [selector: string]: HTMLElement[]
+}
+
+type ObserverMap = {
+  [selector: string]: MutationObserver
+}
+
+export function useQueryObserver(rootRef: Ref<HTMLElement | null>) {
+  const elements = reactive<ElementMap>({})
+  const observers = reactive<ObserverMap>({})
+
+  const hasElements = (selector: string): boolean => {
+    return get(elements, [selector, 'length'], 0) > 0
+  }
+  
+  const hasObserver = (selector: string): boolean => {
+    return selector in observers
+  }
+  
+  const updateElements = (selector: string): HTMLElement[] | null => {
+    // We search for the give selector until element are found
+    if (rootRef.value && !hasElements(selector)) {
+      elements[selector] = Array.from(rootRef.value.querySelectorAll(selector))
+    }
+    return elements[selector] ?? null
+  }
+  
+  const observerCallback = (selector: string) => {
+    return () => {
+      updateElements(selector)
+      if (hasElements(selector)) {
+        observers[selector].disconnect()
+      }
+    }
+  }
+  
+  const observe = (selector: string) =>  {
+    updateElements(selector)
+    // Wait for the root ref to exist and only create the observer once by selector
+    if (rootRef.value && !hasObserver(selector)) {
+      observers[selector] = new MutationObserver(observerCallback(selector))
+      observers[selector].observe(rootRef.value, { childList: true, subtree: true, })
+    }
+    return observers[selector]
+  }
+
+  const querySelector = (selector: string) => {
+    return first(querySelectorAll(selector))
+  }
+
+  const querySelectorAll = (selector: string) => {
+    observe(selector)
+    return get(elements, selector, [])
+  }
+
+  return {
+    querySelector,
+    querySelectorAll,
+  }
+}

package/lib/datavisualisations/ColumnChart.vue

@@ -1,13 +1,5 @@
 <script lang="ts">
-import {
-  ComponentPublicInstance,
-  computed,
-  defineComponent,
-  PropType,
-  ref,
-  watchEffect,
-  onMounted
-} from 'vue'
+import { ComponentPublicInstance, computed, defineComponent, PropType, ref, watch } from 'vue'
 import { identity, iteratee, sortBy } from 'lodash'
 import * as d3 from 'd3'
 import { chartProps, getChartProps, useChart } from '@/composables/chart'
@@ -19,11 +11,9 @@ type ColumnBar = {
   x: number
   y: number
 }
-//import chart from '../mixins/chart'
 
 export default defineComponent({
   name: 'ColumnChart',
-  //mixins: [chart],
   props: {
     /**
      * Color of each column (uses the CSS variable --column-color by default)
@@ -177,6 +167,7 @@ export default defineComponent({
     const isLoaded = ref(false)
     const {
       loadedData,
+      mounted,
       elementsMaxBBox,
       d3Formatter,
       baseHeightRatio,
@@ -341,9 +332,12 @@ export default defineComponent({
     }
 
     function update() {
-      if (!el.value) {
+      if (!mounted.value) {
         return
       }
+
+      d3.select('.column-chart__axis > *').remove()
+
       d3.select(el.value)
         .select('.column-chart__axis--x')
         .call(xAxis.value as any)
@@ -368,10 +362,9 @@ export default defineComponent({
         datum.highlight || props.highlights.includes(datum[props.timeseriesKey])
       )
     }
-
-    watchEffect(async () => {
-      update()
-    })
+    
+    watch([width, height, loadedData, mounted], update.bind(this), { immediate: true})
+    watch(() => props.socialMode, update.bind(this), { immediate: true})
 
     return {
       el,
@@ -380,6 +373,7 @@ export default defineComponent({
       height,
       margin,
       padded,
+      isLoaded,
       shownTooltip,
       bars,
       select,
@@ -399,7 +393,8 @@ export default defineComponent({
       'column-chart--has-highlights': dataHasHighlights,
       'column-chart--hover': hover,
       'column-chart--stripped': stripped,
-      'column-chart--social-mode': socialMode
+      'column-chart--social-mode': socialMode,
+      'column-chart--loaded': isLoaded
     }"
     :style="{
       '--column-color': columnColor,
@@ -493,7 +488,7 @@ export default defineComponent({
 
   &__columns__item {
     fill: var(--column-color, var(--dark, $dark));
-
+    
     &--highlight {
       fill: var(--column-highlight-color, var(--primary, $primary));
     }

package/lib/datavisualisations/StackedBarChart.vue

@@ -7,16 +7,9 @@ import kebabCase from 'lodash/kebabCase'
 import keys from 'lodash/keys'
 import without from 'lodash/without'
 import sortBy from 'lodash/sortBy'
-import {
-  ComponentPublicInstance,
-  computed,
-  defineComponent,
-  nextTick,
-  PropType,
-  ref,
-  watch
-} from 'vue'
+import { ComponentPublicInstance, computed, defineComponent, PropType, ref, watch } from 'vue'
 import { chartProps, getChartProps, useChart } from '@/composables/chart.js'
+import { useQueryObserver } from '@/composables/queryObserver.js'
 import { isArray } from 'lodash'
 
 export default defineComponent({
@@ -147,8 +140,14 @@ export default defineComponent({
     const highlightTimeout = ref<NodeJS.Timeout | undefined>(undefined)
     const isLoaded = ref(false)
     const el = ref<ComponentPublicInstance<HTMLElement> | null>(null)
-    const { loadedData, baseHeightRatio, d3Formatter, dataHasHighlights } =
-      useChart(el, getChartProps(props), { emit }, isLoaded)
+    const { 
+      loadedData, 
+      mounted,
+      baseHeightRatio, 
+      d3Formatter, 
+      dataHasHighlights 
+    } = useChart(el, getChartProps(props), { emit }, isLoaded)
+    const { querySelectorAll } = useQueryObserver(el)
 
     const hasConstraintHeight = computed(() => {
       return props.fixedHeight !== null || props.socialMode
@@ -162,6 +161,7 @@ export default defineComponent({
         ? loadedData.value
         : sortBy(loadedData.value, props.sortBy)
     })
+
     const discoveredKeys = computed((): any[] => {
       if (props.keys.length) {
         return props.keys
@@ -177,22 +177,30 @@ export default defineComponent({
         .domain(discoveredKeys.value)
         .range(props.barColors)
     })
+
     const maxValue = computed(() => {
       return d3.max(loadedData.value || [], (datum, i) => {
         return totalRowValue(i)
       })
     })
+
     const hasHighlights = computed(() => {
       return !!highlightedKeys.value.length
     })
+
     const hasRowHighlights = computed(() => {
       return !!props.rowHighlights.length
     })
+
+    const hasAnyHighlights = computed(() => {
+      return hasHighlights.value || hasRowHighlights.value || dataHasHighlights.value
+    })
+
     const height = computed(() => {
       if (props.fixedHeight !== null) {
         return `${props.fixedHeight}px`
       }
-      return props.socialMode && el.value
+      return props.socialMode && mounted.value && el.value
         ? `${el.value.offsetWidth * baseHeightRatio.value}px`
         : 'auto'
     })
@@ -258,14 +266,10 @@ export default defineComponent({
       return { width, backgroundColor }
     }
 
-    // function barHeightBounds(height:number) {
-    //   return Math.min(Math.max(height, props.minBarHeight), props.maxBarHeight)
-    // }
-    async function stackBarAndValue(i: number | string) {
-      if (!sortedData.value) {
+    function stackBarAndValue(i: number | string) {
+      if (!mounted.value) {
         return []
       }
-      await nextTick()
       // Collect sizes first
       const stack = discoveredKeys.value.map((key: string) => {
         const { bar, row, value } = queryBarAndValue(i as number, key)
@@ -276,31 +280,34 @@ export default defineComponent({
         const barWidth = bar.offsetWidth
         const rowEdge = row.getBoundingClientRect().left + row.offsetWidth
         const valueWidth = value.offsetWidth
-        return { key, barEdge, barWidth, rowEdge, valueWidth }
+        const overflow = false
+        const pushed = false
+        return { key, barEdge, barWidth, rowEdge, valueWidth, overflow, pushed }
       })
       // Infer value's display
       return stack.map((desc, index) => {
+        // Value must be visible out of the bar (overflow) if the size of the value label is bigger than the bar
         desc.overflow = desc.valueWidth >= desc.barWidth
-        if (index > 0) {
+        // If the value not out of the bar, we must ensure its predecesor isn't.
+        if (!desc.overflow && index > 0) {
           const prevDesc = stack[index - 1]
           const bothValuesWidth = desc.valueWidth + prevDesc.valueWidth
-          desc.overflow =
-            desc.overflow ||
-            (prevDesc.overflow && desc.barWidth < bothValuesWidth)
+          desc.overflow = prevDesc.overflow && desc.barWidth < bothValuesWidth
         }
-        desc.pushed =
-          desc.barEdge + desc.valueWidth > desc.rowEdge && desc.overflow
+        // Value must be pushed to the other side (left) if the value label is outside of the bar (overflow)
+        // and if the size of the value label isn't fitting in the row
+        desc.pushed = desc.overflow && desc.barEdge + desc.valueWidth > desc.rowEdge
         return desc
       })
     }
 
     function queryBarAndValue(i: number, key: string) {
-      if (!sortedData.value) {
+      if (!mounted.value) {
         return {}
       }
       const barClass = 'stacked-bar-chart__groups__item__bars__item'
       const rowSelector = '.stacked-bar-chart__groups__item'
-      const row = el.value?.querySelectorAll(rowSelector)[i] as HTMLElement
+      const row = querySelectorAll(rowSelector)[i] as HTMLElement
       const normalizedKey = normalizeKey(key)
       const barSelector = `.${barClass}--${normalizedKey}`
       const bar = row?.querySelector(barSelector) as HTMLElement
@@ -309,24 +316,32 @@ export default defineComponent({
       return { bar, row, value }
     }
 
-    async function hasValueOverflow(i: number | string, key: string) {
-      const stack = await stackBarAndValue(i)
-      return get(find(stack, { key }), 'overflow')
+    function hasValueOverflow(i: number | string, key: string) {
+      try {
+        const stack = stackBarAndValue(i)
+        return find(stack, { key })?.overflow
+      } catch {
+        return false
+      }
     }
-
-    async function hasValuePushed(i: number | string, key: string) {
-      const stack = await stackBarAndValue(i)
-      return get(find(stack, { key }), 'pushed')
+    
+    function hasValuePushed(i: number | string, key: string) {
+      try {
+        const stack = stackBarAndValue(i)
+        return find(stack, { key })?.pushed
+      } catch {
+        return false
+      }
     }
 
-    async function hasValueHidden(i: number | string, key: string) {
+    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 = await hasValueOverflow(i, key)
-      const keyN = await hasValueOverflow(i, nextKey)
+      const keyC = hasValueOverflow(i, key)
+      const keyN = hasValueOverflow(i, nextKey)
       return keyC && keyN
     }
 
@@ -334,47 +349,20 @@ export default defineComponent({
       return props.hideEmptyValues && !sortedData.value[i][key]
     }
 
-    // async function barItemClasses(i,key){
-    //   const stack = await stackBarAndValue(i)
-    //   const hasOv = get(find(stack, {key}), 'overflow')
-    //   const hasPu = get(find(stack, {key}), 'pushed')
-    //
-    //   const keyIndex = discoveredKeys.value.indexOf(key)
-    //   const nextKey = discoveredKeys.value[keyIndex + 1]
-    //   let hasNextOv= false
-    //   if(nextKey){
-    //     const stackNext = await stackBarAndValue(keyIndex + 1)
-    //     hasNextOv = get(find(stackNext, {key}), 'overflow')
-    //   }
-    //   const hasHiddenV = hasOv && hasNextOv
-    //   const classes = {
-    //     hiddenValue:isHidden(keyIndex, key),
-    //     overflow:hasOv,
-    //     pushed:hasPu,
-    //     hidden:hasHiddenV
-    //   }
-    //   return classes
-    // }
-
     function formatXDatum(d: string) {
       return d3Formatter(d, props.xAxisTickFormat)
     }
 
-    watch(
-      () => props.highlights,
-      (newHighlights) => {
-        highlightedKeys.value = newHighlights
-      }
-    )
+    watch(() => props.highlights, (newHighlights) => {
+      highlightedKeys.value = newHighlights
+    })
 
     return {
       colorScale,
-      dataHasHighlights,
       discoveredKeys,
       el,
       hasConstraintHeight,
-      hasHighlights,
-      hasRowHighlights,
+      hasAnyHighlights,
       height,
       sortedData,
       barStyle,
@@ -392,24 +380,6 @@ export default defineComponent({
       restoreHighlights
     }
   }
-
-  // watch: {
-  //   relative() {
-  //     this.$nextTick(this.$forceUpdate)
-  //   },
-  //   height() {
-  //     this.$nextTick(this.$forceUpdate)
-  //   },
-  //   sortBy() {
-  //     this.$nextTick(this.$forceUpdate)
-  //   },
-  //   highlights:{
-  //     deep:true,
-  //     handler() {
-  //       this.highlightedKeys = this.highlights
-  //     }
-  //   }
-  // },
 })
 </script>
 <template>
@@ -418,8 +388,7 @@ export default defineComponent({
     :class="{
       'stacked-bar-chart--social-mode': socialMode,
       'stacked-bar-chart--label-above': labelAbove,
-      'stacked-bar-chart--has-highlights':
-        hasHighlights || hasRowHighlights || dataHasHighlights,
+      'stacked-bar-chart--has-highlights': hasAnyHighlights,
       'stacked-bar-chart--has-constraint-height': hasConstraintHeight,
       'stacked-bar-chart--has-label-above': labelAbove
     }"
@@ -456,7 +425,7 @@ export default defineComponent({
       <div
         v-for="(datum, i) in sortedData"
         :key="i"
-        :class="{ 'flex-column': labelAbove }"
+        :class="{ 'flex-column': labelAbove, }"
         class="stacked-bar-chart__groups__item border-bottom flex-fill d-flex align-items-center"
       >
         <div
@@ -474,18 +443,11 @@ export default defineComponent({
             :class="{
               [`stacked-bar-chart__groups__item__bars__item--${normalizeKey(key)}`]: true,
               [`stacked-bar-chart__groups__item__bars__item--${j}n`]: true,
-              'stacked-bar-chart__groups__item__bars__item--highlighted':
-                isHighlighted(key) || isRowHighlighted(i),
-              'stacked-bar-chart__groups__item__bars__item--hidden': isHidden(
-                i,
-                key
-              ),
-              'stacked-bar-chart__groups__item__bars__item--value-overflow':
-                hasValueOverflow(i, key),
-              'stacked-bar-chart__groups__item__bars__item--value-pushed':
-                hasValuePushed(i, key),
-              'stacked-bar-chart__groups__item__bars__item--value-hidden':
-                hasValueHidden(i, key)
+              'stacked-bar-chart__groups__item__bars__item--highlighted': isHighlighted(key) || isRowHighlighted(i),
+              'stacked-bar-chart__groups__item__bars__item--hidden': isHidden(i, key),
+              'stacked-bar-chart__groups__item__bars__item--value-overflow': hasValueOverflow(i, key),
+              'stacked-bar-chart__groups__item__bars__item--value-pushed': hasValuePushed(i, key),
+              'stacked-bar-chart__groups__item__bars__item--value-hidden': hasValueHidden(i, key)
             }"
             :style="barStyle(i, key)"
             class="stacked-bar-chart__groups__item__bars__item"