@icij/murmur-next 4.0.1 → 4.0.3

package/lib/datavisualisations/StackedColumnChart.vue

@@ -1,5 +1,3 @@
-
-
 <script lang="ts">
 // import { VBTooltip } from 'bootstrap-vue/esm/directives/tooltip/tooltip'
 import * as d3 from 'd3'
@@ -9,8 +7,15 @@ import get from 'lodash/get'
 import identity from 'lodash/identity'
 import sortBy from 'lodash/sortBy'
 import without from 'lodash/without'
-import {ComponentPublicInstance, computed, defineComponent, ref, nextTick, watch} from 'vue'
-import {chartProps, getChartProps, useChart} from "@/composables/chart.js";
+import {
+  ComponentPublicInstance,
+  computed,
+  defineComponent,
+  ref,
+  nextTick,
+  watch
+} from 'vue'
+import { chartProps, getChartProps, useChart } from '@/composables/chart.js'
 
 export default defineComponent({
   name: 'StackedColumnChart',
@@ -71,7 +76,7 @@ export default defineComponent({
      */
     xAxisTickFormat: {
       type: [Function, String],
-      default: ()=>identity
+      default: () => identity
     },
     /**
      * Function to apply to format y axis ticks (bars value). It can be a
@@ -79,7 +84,7 @@ export default defineComponent({
      */
     yAxisTickFormat: {
       type: [Function, String],
-      default: ()=>identity
+      default: () => identity
     },
     /**
      * Padding on y axis ticks
@@ -151,11 +156,17 @@ export default defineComponent({
       default: null
     },
     /**
-      * Function to define tooltip content.
+     * Function to define tooltip content.
      */
     tooltipDisplay: {
       type: Function,
-      default:  ({ formattedKey, formattedValue }:{formattedKey:string, formattedValue:string}):string => {
+      default: ({
+        formattedKey,
+        formattedValue
+      }: {
+        formattedKey: string
+        formattedValue: string
+      }): string => {
         return `<h6 class="mb-0">${formattedKey}</h6><div>${formattedValue}</div>`
       }
     },
@@ -167,7 +178,7 @@ export default defineComponent({
     },
     ...chartProps()
   },
-  setup(props,{emit}){
+  setup(props, { emit }) {
     const width = ref(0)
     const height = ref(0)
     const leftAxisHeight = ref(0)
@@ -182,12 +193,14 @@ export default defineComponent({
       loadedData,
       d3Formatter,
       dataHasHighlights
-    } = useChart(el, getChartProps(props), {emit}, isLoaded, setSizes)
+    } = useChart(el, getChartProps(props), { emit }, isLoaded, setSizes)
     const sortedData = computed(() => {
       if (!isLoaded.value) {
         return []
       }
-      return !props.sortBy ? loadedData.value : sortBy(loadedData.value, props.sortBy)
+      return !props.sortBy
+        ? loadedData.value
+        : sortBy(loadedData.value, props.sortBy)
     })
 
     const discoveredKeys = computed((): any[] => {
@@ -200,41 +213,58 @@ export default defineComponent({
       return without(keys(loadedData.value[0]), props.labelField)
     })
     const colorScale = computed(() => {
-      return d3.scaleOrdinal().domain(discoveredKeys.value).range(props.barColors)
+      return d3
+        .scaleOrdinal()
+        .domain(discoveredKeys.value)
+        .range(props.barColors)
     })
 
     const hasHighlights = computed(() => {
       return !!highlightedKeys.value.length
     })
 
-// different
+    // different
 
-    const hasColumnHighlights= computed(() => {
+    const hasColumnHighlights = computed(() => {
       return !!props.columnHighlights.length
     })
-    const leftScale= computed(() =>{
-      return d3.scaleLinear().domain([0, maxRowValue.value]).range([leftAxisHeight.value, 0])
+    const leftScale = computed(() => {
+      return d3
+        .scaleLinear()
+        .domain([0, maxRowValue.value])
+        .range([leftAxisHeight.value, 0])
     })
 
-    const leftAxis= computed(() =>{
+    const leftAxis = computed(
+      () => {
         return d3
-            .axisLeft(leftScale.value)
-            .tickFormat((d) => d3Formatter(d, props.yAxisTickFormat))
-            .tickSize(width.value - leftAxisLabelsWidth.value)
-            .tickPadding(props.yAxisTickPadding)
-    }/*, {cache: false}*/)
-    const leftAxisLabelsWidth= computed(() => {
+          .axisLeft(leftScale.value)
+          .tickFormat((d) => d3Formatter(d, props.yAxisTickFormat))
+          .tickSize(width.value - leftAxisLabelsWidth.value)
+          .tickPadding(props.yAxisTickPadding)
+      } /*, {cache: false}*/
+    )
+    const leftAxisLabelsWidth = computed(
+      () => {
         const selector = '.stacked-column-chart__left-axis__canvas .tick text'
         const defaultWidth = 0
-        return elementsMaxBBox({ selector, defaultWidth }).width + props.yAxisTickPadding
-    }/*, {cache: false}*/)
-
-    const leftAxisCanvas= computed(() => {
-      return d3.select(el.value).select('.stacked-column-chart__left-axis__canvas')
+        return (
+          elementsMaxBBox({ selector, defaultWidth }).width +
+          props.yAxisTickPadding
+        )
+      } /*, {cache: false}*/
+    )
+
+    const leftAxisCanvas = computed(() => {
+      return d3
+        .select(el.value)
+        .select('.stacked-column-chart__left-axis__canvas')
     })
-    const paddedStyle= computed(() => {
+    const paddedStyle = computed(() => {
       return {
-        marginLeft: props.noDirectLabeling ? `${leftAxisLabelsWidth.value + props.yAxisTickPadding}px` : 0
+        marginLeft: props.noDirectLabeling
+          ? `${leftAxisLabelsWidth.value + props.yAxisTickPadding}px`
+          : 0
       }
     })
     const barTooltipDelay = computed(() => {
@@ -242,26 +272,29 @@ export default defineComponent({
     })
     const maxRowValue = computed(() => {
       return (
-          props.maxValue ||
-          d3.max(loadedData.value || [], (datum, i) => {
-            return totalRowValue(i)
-          }) as number
+        props.maxValue ||
+        (d3.max(loadedData.value || [], (datum, i) => {
+          return totalRowValue(i)
+        }) as number)
       )
     })
 
-    function  setSizes() {
-      if(!el.value ){
+    function setSizes() {
+      if (!el.value) {
         return
       }
       width.value = el.value.offsetWidth
-      height.value = props.fixedHeight !== null ? props.fixedHeight : width.value * baseHeightRatio.value
+      height.value =
+        props.fixedHeight !== null
+          ? props.fixedHeight
+          : width.value * baseHeightRatio.value
     }
-    function groupName(key:string) {
+    function groupName(key: string) {
       const index = discoveredKeys.value.indexOf(key)
       return props.groups[index] || key
     }
 
-    function highlight(key:string) {
+    function highlight(key: string) {
       highlightedKeys.value = [key]
     }
 
@@ -269,10 +302,13 @@ export default defineComponent({
       clearTimeout(highlightTimeout.value)
       const delay = props.restoreHighlightDelay
       // Delay the restoration so it can be cancelled by a new highlight
-      highlightTimeout.value = setTimeout(() => (highlightedKeys.value = props.highlights), delay)
+      highlightTimeout.value = setTimeout(
+        () => (highlightedKeys.value = props.highlights),
+        delay
+      )
     }
 
-    function delayHighlight(key:string) {
+    function delayHighlight(key: string) {
       clearTimeout(highlightTimeout.value)
       // Reduce the delay to zero if there is already an highlighted key
       const isDelayed = !hasHighlights.value
@@ -280,27 +316,29 @@ export default defineComponent({
       highlightTimeout.value = setTimeout(() => highlight(key), delay)
     }
 
-    function isHighlighted(key:string) {
+    function isHighlighted(key: string) {
       return highlightedKeys.value.indexOf(key) > -1
     }
 
-    function isColumnHighlighted(i:string|number) {
+    function isColumnHighlighted(i: string | number) {
       const column = get(sortedData.value, [i, props.labelField], null)
-      return props.columnHighlights.includes(column) && !highlightedKeys.value.length
+      return (
+        props.columnHighlights.includes(column) && !highlightedKeys.value.length
+      )
     }
 
-    function totalRowValue(i:string|number) {
-      return d3.sum(discoveredKeys.value, (key:string) => {
+    function totalRowValue(i: string | number) {
+      return d3.sum(discoveredKeys.value, (key: string) => {
         return sortedData.value[i][key]
       })
     }
 
-    function barStyle(i:string|number, key:string) {
+    function barStyle(i: string | number, key: string) {
       const value = sortedData.value[i][key]
       let totalWidth = props.relative ? totalRowValue(i) : maxRowValue.value
-      if(!totalWidth){
-          console.error("totalWidth as divider cannot be "+totalWidth)
-          totalWidth = 100
+      if (!totalWidth) {
+        console.error('totalWidth as divider cannot be ' + totalWidth)
+        totalWidth = 100
       }
       const height = `${100 * (value / totalWidth)}%`
       const backgroundColor = colorScale.value(key)
@@ -308,30 +346,38 @@ export default defineComponent({
       return { maxWidth, height, backgroundColor }
     }
 
-    function barTitle(i:string|number, key:string) {
+    function barTitle(i: string | number, key: string) {
       const value = sortedData.value[i][key]
       const formattedValue = d3Formatter(value, props.yAxisTickFormat)
       const formattedKey = groupName(key)
       return props.tooltipDisplay({ value, formattedValue, key, formattedKey })
     }
 
-    async function stackBarAndValue(i:string|number) {
+    async function stackBarAndValue(i: string | number) {
       if (!sortedData.value) {
         return []
       }
       await nextTick()
 
       // Collect sizes first
-      const stack = discoveredKeys.value.map((key:string) => {
+      const stack = discoveredKeys.value.map((key: string) => {
         const { bar, row, value } = queryBarAndValue(i as number, key)
-        if(!bar || !row || !value){
-          throw new Error("Empty values for bar, row or value")
+        if (!bar || !row || !value) {
+          throw new Error('Empty values for bar, row or value')
         }
         const barEdge = bar.getBoundingClientRect().top + bar.offsetHeight
         const barHeight = bar.offsetHeight
         const rowEdge = row.getBoundingClientRect().top + row.offsetHeight
         const valueHeight = value.offsetHeight
-        return { key, barEdge, barHeight, rowEdge, valueHeight, overflow:false, pushed:false }
+        return {
+          key,
+          barEdge,
+          barHeight,
+          rowEdge,
+          valueHeight,
+          overflow: false,
+          pushed: false
+        }
       })
       // Infer value's display
       return stack.map((desc, index) => {
@@ -339,41 +385,45 @@ export default defineComponent({
         if (index > 0) {
           const prevDesc = stack[index - 1]
           const bothValuesHeight = desc.valueHeight + prevDesc.valueHeight
-          desc.overflow = desc.overflow || (prevDesc.overflow && desc.barHeight < bothValuesHeight)
+          desc.overflow =
+            desc.overflow ||
+            (prevDesc.overflow && desc.barHeight < bothValuesHeight)
         }
-        desc.pushed = desc.barEdge + desc.valueHeight > desc.rowEdge && desc.overflow
+        desc.pushed =
+          desc.barEdge + desc.valueHeight > desc.rowEdge && desc.overflow
         return desc
       })
     }
 
-    function queryBarAndValue(i:number, key:string) {
+    function queryBarAndValue(i: number, key: string) {
       if (!sortedData.value) {
         return {}
       }
       const rowSelector = '.stacked-column-chart__groups__item'
-      const row = el.value?.querySelectorAll(rowSelector)[i]  as HTMLElement
+      const row = el.value?.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 value = bar.querySelector(valueSelector)  as HTMLElement
+      const valueSelector =
+        '.stacked-column-chart__groups__item__bars__item__value'
+      const value = bar.querySelector(valueSelector) as HTMLElement
       return { bar, row, value }
     }
 
-    function isHidden(i:string|number, key:string) {
+    function isHidden(i: string | number, key: string) {
       return props.hideEmptyValues && !sortedData.value[i][key]
     }
 
-    function hasValueOverflow(i:string|number, key:string) {
+    function hasValueOverflow(i: string | number, key: string) {
       const stack = stackBarAndValue(i)
       return find(stack, { key })?.overflow
     }
 
-    function hasValuePushed(i:string|number, key:string) {
+    function hasValuePushed(i: string | number, key: string) {
       const stack = stackBarAndValue(i)
       return find(stack, { key })?.pushed
     }
 
-    function hasValueHidden(i:string|number, key:string) {
+    function hasValueHidden(i: string | number, key: string) {
       const keyIndex = discoveredKeys.value.indexOf(key)
       const nextKey = discoveredKeys.value[keyIndex + 1]
       if (!nextKey) {
@@ -387,16 +437,21 @@ export default defineComponent({
     function formatYDatum(d: string) {
       return d3Formatter(d, props.yAxisTickFormat)
     }
-    watch(() => props.highlights, (newHighlights) => {
-      highlightedKeys.value = newHighlights
-    })
-    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)
+    watch(
+      () => props.highlights,
+      (newHighlights) => {
+        highlightedKeys.value = newHighlights
+      }
+    )
+    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)
     })
 
     return {
@@ -427,73 +482,93 @@ export default defineComponent({
       restoreHighlights
     }
   }
-
 })
 </script>
 <template>
   <div
-      ref="el"
-      :style="{ height: `${height}px` }"
-      class="stacked-column-chart d-flex flex-column"
-      :class="{
+    ref="el"
+    :style="{ height: `${height}px` }"
+    class="stacked-column-chart d-flex flex-column"
+    :class="{
       'stacked-column-chart--social-mode': socialMode,
-      'stacked-column-chart--has-highlights': hasHighlights || hasColumnHighlights,
+      'stacked-column-chart--has-highlights':
+        hasHighlights || hasColumnHighlights,
       'stacked-column-chart--no-direct-labeling': noDirectLabeling
     }"
   >
     <ul v-if="!hideLegend" class="stacked-column-chart__legend list-inline">
       <li
-          v-for="key in discoveredKeys"
-          :key="key"
-          class="stacked-column-chart__legend__item list-inline-item d-inline-flex"
-          :class="{
+        v-for="key in discoveredKeys"
+        :key="key"
+        class="stacked-column-chart__legend__item list-inline-item d-inline-flex"
+        :class="{
           'stacked-column-chart__legend__item--highlighted': isHighlighted(key)
         }"
-          @mouseover="delayHighlight(key)"
-          @mouseleave="restoreHighlights()"
+        @mouseover="delayHighlight(key)"
+        @mouseleave="restoreHighlights()"
       >
-        <span class="stacked-column-chart__legend__item__box" :style="{ 'background-color': colorScale(key) }" />
+        <span
+          class="stacked-column-chart__legend__item__box"
+          :style="{ 'background-color': colorScale(key) }"
+        />
         {{ groupName(key) }}
       </li>
     </ul>
     <div class="d-flex flex-grow-1 position-relative overflow-hidden">
       <svg
-          v-show="noDirectLabeling"
-          :width="width + 'px'"
-          :height="height + 'px'"
-          class="stacked-column-chart__left-axis"
+        v-show="noDirectLabeling"
+        :width="width + 'px'"
+        :height="height + 'px'"
+        class="stacked-column-chart__left-axis"
       >
-        <g class="stacked-column-chart__left-axis__canvas" :transform="`translate(${width}, 0)`" />
+        <g
+          class="stacked-column-chart__left-axis__canvas"
+          :transform="`translate(${width}, 0)`"
+        />
       </svg>
-      <div class="stacked-column-chart__groups d-flex flex-grow-1" :style="paddedStyle">
+      <div
+        class="stacked-column-chart__groups d-flex flex-grow-1"
+        :style="paddedStyle"
+      >
         <div
-            v-for="(datum, i) in sortedData"
-            :key="i"
-            class="stacked-column-chart__groups__item flex-grow-1 d-flex flex-column text-center"
+          v-for="(datum, i) in sortedData"
+          :key="i"
+          class="stacked-column-chart__groups__item flex-grow-1 d-flex flex-column text-center"
         >
           <div
-              class="stacked-column-chart__groups__item__bars flex-grow-1 d-flex flex-column-reverse px-1 justify-content-start align-items-center"
+            class="stacked-column-chart__groups__item__bars flex-grow-1 d-flex flex-column-reverse px-1 justify-content-start align-items-center"
           >
             <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="{
+              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--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--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)
               }"
-                @mouseover="delayHighlight(key)"
-                @mouseleave="restoreHighlights()"
+              @mouseover="delayHighlight(key)"
+              @mouseleave="restoreHighlights()"
             >
-              <div v-show="!noDirectLabeling" class="stacked-column-chart__groups__item__bars__item__value">
+              <div
+                v-show="!noDirectLabeling"
+                class="stacked-column-chart__groups__item__bars__item__value"
+              >
                 {{ formatYDatum(datum[key]) }}
               </div>
             </div>
@@ -513,7 +588,9 @@ export default defineComponent({
 .stacked-column-chart {
   $muted-group-opacity: 0.2;
   $muted-group-filter: grayscale(30%) brightness(10%);
-  $muted-group-transition: opacity 0.3s, filter 0.3s;
+  $muted-group-transition:
+    opacity 0.3s,
+    filter 0.3s;
   $colors: $primary, $info, $warning;
   $quantile: 3;
 
@@ -610,8 +687,12 @@ export default defineComponent({
             visibility: hidden;
           }
 
-          .stacked-column-chart:not(.stacked-column-chart--has-highlights) &--value-hidden &__value,
-          .stacked-column-chart:not(.stacked-column-chart--has-highlights) &--value-pushed &__value {
+          .stacked-column-chart:not(.stacked-column-chart--has-highlights)
+            &--value-hidden
+            &__value,
+          .stacked-column-chart:not(.stacked-column-chart--has-highlights)
+            &--value-pushed
+            &__value {
             visibility: hidden;
           }
 

package/lib/enums.ts

@@ -1,25 +1,35 @@
 export enum BrandMode {
-    Short = 'short', Medium = 'medium', Long = 'long'
+  Short = 'short',
+  Medium = 'medium',
+  Long = 'long'
 }
 
 export enum TooltipPlacement {
-    Top = 'top', Topleft = 'topleft', Topright = 'topright',
-    Right = 'right', Righttop = 'righttop', Rightbottom = 'rightbottom',
-    Bottom = 'bottom', Bottomleft = 'bottomleft', Bottomright = 'bottomright',
-    Left = 'left', Lefttop = 'lefttop', Leftbottom = 'leftbottom'
+  Top = 'top',
+  Topleft = 'topleft',
+  Topright = 'topright',
+  Right = 'right',
+  Righttop = 'righttop',
+  Rightbottom = 'rightbottom',
+  Bottom = 'bottom',
+  Bottomleft = 'bottomleft',
+  Bottomright = 'bottomright',
+  Left = 'left',
+  Lefttop = 'lefttop',
+  Leftbottom = 'leftbottom'
 }
 
 export enum DeckTexture {
-    Silk = 'silk',
-    Brick = 'brick',
-    Rock = 'rock',
-    Sand = 'sand',
-    Crack = 'crack',
-    Carbon = 'carbon'
+  Silk = 'silk',
+  Brick = 'brick',
+  Rock = 'rock',
+  Sand = 'sand',
+  Crack = 'crack',
+  Carbon = 'carbon'
 }
 
 export enum Size {
-    sm = 'sm',
-    md = 'md',
-    lg = 'lg',
-}
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg'
+}

package/lib/i18n.ts

@@ -1,4 +1,4 @@
-import {createI18n,I18n} from 'vue-i18n'
+import { createI18n, I18n } from 'vue-i18n'
 
 import fr from '@/locales/fr.json'
 import en from '@/locales/en.json'
@@ -7,9 +7,9 @@ export const locale: string = 'en'
 export const fallbackLocale: string = 'en'
 // https://vue-i18n.intlify.dev/guide/advanced/composition.html#implicit-with-injected-properties-and-functions
 export const i18n: I18n = createI18n({
-  warnHtmlMessage:false,
+  warnHtmlMessage: false,
   globalInjection: true,
-  legacy:false,
+  legacy: false,
   locale,
   fallbackLocale,
   messages: { fr, en }

package/lib/keys.ts

@@ -1,2 +1,2 @@
-export const AccordionKey = Symbol('Accordion');
-export const ParentKey = Symbol('Parent');
+export const AccordionKey = Symbol('Accordion')
+export const ParentKey = Symbol('Parent')