@icij/murmur-next 4.0.17 → 4.1.0

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"

package/lib/datavisualisations/StackedColumnChart.vue

@@ -11,11 +11,13 @@ import {
   ComponentPublicInstance,
   computed,
   defineComponent,
+  getCurrentInstance,
   ref,
   nextTick,
   watch
 } from 'vue'
 import { chartProps, getChartProps, useChart } from '@/composables/chart.js'
+import { useQueryObserver } from '@/composables/queryObserver.js'
 
 export default defineComponent({
   name: 'StackedColumnChart',
@@ -186,14 +188,17 @@ export default defineComponent({
     const highlightTimeout = ref<NodeJS.Timeout | undefined>(undefined)
     const isLoaded = ref(false)
     const el = ref<ComponentPublicInstance<HTMLElement> | null>(null)
+    const { querySelector, querySelectorAll } = useQueryObserver(el)
 
     const {
       elementsMaxBBox,
-      baseHeightRatio,
+      baseHeightRatio,  
       loadedData,
+      mounted,
       d3Formatter,
       dataHasHighlights
     } = useChart(el, getChartProps(props), { emit }, isLoaded, setSizes)
+
     const sortedData = computed(() => {
       if (!isLoaded.value) {
         return []
@@ -223,8 +228,6 @@ export default defineComponent({
       return !!highlightedKeys.value.length
     })
 
-    // different
-
     const hasColumnHighlights = computed(() => {
       return !!props.columnHighlights.length
     })
@@ -242,7 +245,7 @@ export default defineComponent({
           .tickFormat((d) => d3Formatter(d, props.yAxisTickFormat))
           .tickSize(width.value - leftAxisLabelsWidth.value)
           .tickPadding(props.yAxisTickPadding)
-      } /*, {cache: false}*/
+      }
     )
     const leftAxisLabelsWidth = computed(
       () => {
@@ -252,7 +255,7 @@ export default defineComponent({
           elementsMaxBBox({ selector, defaultWidth }).width +
           props.yAxisTickPadding
         )
-      } /*, {cache: false}*/
+      }
     )
 
     const leftAxisCanvas = computed(() => {
@@ -260,6 +263,7 @@ export default defineComponent({
         .select(el.value)
         .select('.stacked-column-chart__left-axis__canvas')
     })
+
     const paddedStyle = computed(() => {
       return {
         marginLeft: props.noDirectLabeling
@@ -267,9 +271,11 @@ export default defineComponent({
           : 0
       }
     })
+    
     const barTooltipDelay = computed(() => {
       return hasHighlights.value ? 0 : props.highlightDelay
     })
+
     const maxRowValue = computed(() => {
       return (
         props.maxValue ||
@@ -289,6 +295,7 @@ export default defineComponent({
           ? props.fixedHeight
           : width.value * baseHeightRatio.value
     }
+
     function groupName(key: string) {
       const index = discoveredKeys.value.indexOf(key)
       return props.groups[index] || key
@@ -353,12 +360,16 @@ export default defineComponent({
       return props.tooltipDisplay({ value, formattedValue, key, formattedKey })
     }
 
-    async function stackBarAndValue(i: string | number) {
+    function barUniqueId(i: string | number, key: string) {
+      // @ts-ignore 
+      const { uid } = getCurrentInstance()
+      return `bar-${uid}-${i}-${key}`
+    }
+
+    function stackBarAndValue(i: string | number) {
       if (!sortedData.value) {
         return []
       }
-      await nextTick()
-
       // Collect sizes first
       const stack = discoveredKeys.value.map((key: string) => {
         const { bar, row, value } = queryBarAndValue(i as number, key)
@@ -396,15 +407,14 @@ export default defineComponent({
     }
 
     function queryBarAndValue(i: number, key: string) {
-      if (!sortedData.value) {
+      if (!mounted.value) {
         return {}
       }
       const rowSelector = '.stacked-column-chart__groups__item'
-      const row = el.value?.querySelectorAll(rowSelector)[i] as HTMLElement
+      const row = 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'
+      const valueSelector = '.stacked-column-chart__groups__item__bars__item__value'
       const value = bar.querySelector(valueSelector) as HTMLElement
       return { bar, row, value }
     }
@@ -414,13 +424,21 @@ export default defineComponent({
     }
 
     function hasValueOverflow(i: string | number, key: string) {
-      const stack = stackBarAndValue(i)
-      return find(stack, { key })?.overflow
+      try {
+        const stack = stackBarAndValue(i)
+        return find(stack, { key })?.overflow
+      } catch {
+        return false
+      }
     }
 
     function hasValuePushed(i: string | number, key: string) {
-      const stack = stackBarAndValue(i)
-      return find(stack, { key })?.pushed
+      try {
+        const stack = stackBarAndValue(i)
+        return find(stack, { key })?.pushed
+      } catch {
+        return false
+      }
     }
 
     function hasValueHidden(i: string | number, key: string) {
@@ -446,16 +464,16 @@ export default defineComponent({
     watch(sortedData, async (newVal) => {
       await nextTick()
       // This must be set after the column have been rendered
-      const element = el.value?.querySelector(
-        '.stacked-column-chart__groups__item__bars'
-      )
-      leftAxisHeight.value = (element as HTMLElement).offsetHeight
-      //@ts-ignore
-      leftAxisCanvas.value.call(leftAxis.value)
+      const element = querySelector('.stacked-column-chart__groups__item__bars')
+      // Update the left axis only if the bars exists
+      if (element) {
+        leftAxisHeight.value = (element as HTMLElement).offsetHeight
+        //@ts-ignore
+        leftAxisCanvas.value.call(leftAxis.value)
+      }
     })
 
     return {
-      barTooltipDelay,
       colorScale,
       dataHasHighlights,
       discoveredKeys,
@@ -467,7 +485,9 @@ export default defineComponent({
       paddedStyle,
       sortedData,
       width,
+      barTooltipDelay,
       barTitle,
+      barUniqueId,
       barStyle,
       delayHighlight,
       formatXDatum,
@@ -540,28 +560,19 @@ export default defineComponent({
           >
             <div
               v-for="(key, j) in discoveredKeys"
-              :key="j"
-              v-b-tooltip.html="{
-                delay: barTooltipDelay,
-                disabled: noTooltips,
-                title: barTitle(i, key)
-              }"
-              :style="barStyle(i, key)"
               class="stacked-column-chart__groups__item__bars__item"
               :class="{
                 [`stacked-column-chart__groups__item__bars__item--${key}`]: true,
                 [`stacked-column-chart__groups__item__bars__item--${j}n`]: true,
-                'stacked-column-chart__groups__item__bars__item--hidden':
-                  isHidden(i, key),
-                'stacked-column-chart__groups__item__bars__item--highlighted':
-                  isHighlighted(key) || isColumnHighlighted(i),
-                'stacked-column-chart__groups__item__bars__item--value-overflow':
-                  hasValueOverflow(i, key),
-                'stacked-column-chart__groups__item__bars__item--value-pushed':
-                  hasValuePushed(i, key),
-                'stacked-column-chart__groups__item__bars__item--value-hidden':
-                  hasValueHidden(i, key)
+                'stacked-column-chart__groups__item__bars__item--hidden': isHidden(i, key),
+                'stacked-column-chart__groups__item__bars__item--highlighted': isHighlighted(key) || isColumnHighlighted(i),
+                'stacked-column-chart__groups__item__bars__item--value-overflow': hasValueOverflow(i, key),
+                'stacked-column-chart__groups__item__bars__item--value-pushed': hasValuePushed(i, key),
+                'stacked-column-chart__groups__item__bars__item--value-hidden': hasValueHidden(i, key)
               }"
+              :style="barStyle(i, key)"
+              :key="j"
+              :id="barUniqueId(i, key)"
               @mouseover="delayHighlight(key)"
               @mouseleave="restoreHighlights()"
             >
@@ -571,6 +582,11 @@ export default defineComponent({
               >
                 {{ formatYDatum(datum[key]) }}
               </div>
+              <teleport to="body">
+                <b-tooltip v-if="!noTooltips" :delay="barTooltipDelay" :target="barUniqueId(i, key)" placement="top">
+                  <span v-html="barTitle(i, key)"></span>
+                </b-tooltip>
+              </teleport>
             </div>
           </div>
           <div class="stacked-column-chart__groups__item__label small py-2">

package/lib/styles/variables.scss

@@ -91,10 +91,10 @@ $tooltip-opacity: 1 !default;
 
 $alert-border-width: 0;
 
-// Bootstrap variables and functions must be available everywhere
+/* Bootstrap variables and functions must be available everywhere */
 @import 'node_modules/bootstrap/scss/_functions.scss';
 @import 'node_modules/bootstrap/scss/_variables.scss';
 
-// Get theses variables to make them available in the doc
+/* Get theses variables to make them available in the doc */
 $theme-colors: none !default;
 $font-family-monospace: none !default;

package/package.json

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