@icij/murmur-next 4.0.0 → 4.0.3

package/lib/datavisualisations/LineChart.vue

@@ -1,13 +1,20 @@
-
 <script lang="ts">
 import * as d3 from 'd3'
 import isFunction from 'lodash/isFunction'
 import identity from 'lodash/identity'
-import {chartProps, getChartProps, useChart} from "@/composables/chart.js"
-import {computed, ref, defineComponent, watchEffect, ComponentPublicInstance, toRaw} from 'vue'
+import { chartProps, getChartProps, useChart } from '@/composables/chart.js'
+import {
+  computed,
+  ref,
+  defineComponent,
+  watchEffect,
+  ComponentPublicInstance,
+  toRaw
+} from 'vue'
 
 // Call the first argument if it's a function, or return it
-const castCall = (fnOrValue = identity, ...rest) => (isFunction(fnOrValue) ? fnOrValue(...rest) : fnOrValue)
+const castCall = (fnOrValue = identity, ...rest) =>
+  isFunction(fnOrValue) ? fnOrValue(...rest) : fnOrValue
 
 export default defineComponent({
   name: 'LineChart',
@@ -55,7 +62,7 @@ export default defineComponent({
      */
     yAxisTickFormat: {
       type: [Function, String],
-      default: ()=>identity
+      default: () => identity
     },
     /**
      * Argument for y-axis ticks
@@ -74,22 +81,22 @@ export default defineComponent({
     },
     ...chartProps()
   },
-  setup(props,{emit}){
-    const width =ref(0)
-    const height= ref(0)
-    const el= ref<ComponentPublicInstance<HTMLElement> | null>(null)
-    const line= ref<d3.Line<[number,number]>|null>(null)
+  setup(props, { emit }) {
+    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 isLoaded = ref(false)
 
-    const {loadedData,
+    const {
+      loadedData,
       elementsMaxBBox,
       d3Formatter,
       xAxisYearFormat,
       baseHeightRatio
-    } = useChart(el,getChartProps(props),{emit},isLoaded,setSizes)
-
+    } = useChart(el, getChartProps(props), { emit }, isLoaded, setSizes)
 
-    const labelWidth = computed(()=> {
+    const labelWidth = computed(() => {
       if (props.fixedLabelWidth) {
         return props.fixedLabelWidth
       }
@@ -97,63 +104,74 @@ export default defineComponent({
       const defaultWidth = 100
       return elementsMaxBBox({ selector, defaultWidth }).width
     })
-    const labelHeight = computed(()=> {
+    const labelHeight = computed(() => {
       const selector = '.line-chart__axis--y .tick'
       const defaultHeight = 10
       return elementsMaxBBox({ selector, defaultHeight }).height
     })
-    const bucketHeight = computed(()=> {
+    const bucketHeight = computed(() => {
       const selector = '.line-chart__axis--x .tick'
       const defaultHeight = 10
       return elementsMaxBBox({ selector, defaultHeight }).height
     })
-    const bucketWidth = computed(()=> {
+    const bucketWidth = computed(() => {
       const selector = '.line-chart__axis--x .tick text'
       const defaultWidth = 0
       return elementsMaxBBox({ selector, defaultWidth }).width
     })
-    const scale = computed(()=> {
+    const scale = computed(() => {
       return {
         x: d3.scaleTime().range([0, padded.value.width]),
         y: d3.scaleLinear().range([padded.value.height, 0])
       }
     })
-    const margin = computed(()=> {
+    const margin = computed(() => {
       const left = labelWidth.value + 10
       const right = bucketWidth.value / 2
       const top = labelHeight.value
       const bottom = bucketHeight.value + 10
       return { left, right, top, bottom }
     })
-    const padded = computed(()=> {
+    const padded = computed(() => {
       const widthP = width.value - margin.value.left - margin.value.right
       const heightP = height.value - margin.value.top - margin.value.bottom
-      return { width:widthP, height:heightP }
+      return { width: widthP, height: heightP }
     })
-    const formattedData = computed(()=> {
-          if (!loadedData.value) {
-            return []
-          }
-      return loadedData.value.map(d => {
+    const formattedData = computed(() => {
+      if (!loadedData.value) {
+        return []
+      }
+      return loadedData.value.map((d) => {
         // toRaw prevent modifying the Proxy object created with the props.data
         let rawD = toRaw(d)
         rawD[props.timeseriesKey] = parseTime(d[props.timeseriesKey])
-        rawD[props.seriesName]= +d[props.seriesName]
+        rawD[props.seriesName] = +d[props.seriesName]
         return rawD
-      });
+      })
     })
-    const createLine = d3.line().x((d) => d.x).y((d) => d.y)
+    const createLine = d3
+      .line()
+      .x((d) => d.x)
+      .y((d) => d.y)
 
     const parseTime = d3.timeParse('%Y')
     function setSizes() {
-      if(el.value){
+      if (el.value) {
         width.value = el.value.offsetWidth
-        height.value = props.fixedHeight !== null ? props.fixedHeight : el.value.offsetWidth * baseHeightRatio.value
+        height.value =
+          props.fixedHeight !== null
+            ? props.fixedHeight
+            : el.value.offsetWidth * baseHeightRatio.value
       }
     }
     function update() {
-      scale.value.x.domain(d3.extent(formattedData.value, d => d[props.timeseriesKey]))
-      scale.value.y.domain([0, d3.max(formattedData.value, (d) => d[props.seriesName])])
+      scale.value.x.domain(
+        d3.extent(formattedData.value, (d) => d[props.timeseriesKey])
+      )
+      scale.value.y.domain([
+        0,
+        d3.max(formattedData.value, (d) => d[props.seriesName])
+      ])
 
       const points = formattedData.value.map((d) => {
         return {
@@ -164,24 +182,23 @@ export default defineComponent({
 
       line.value = createLine(points)
       d3.select(el.value)
-          .select('.line-chart__axis--x')
-          .call(
-              d3.axisBottom(scale.value.x)
-                  .ticks(props.xAxisTicks)
-                  .tickFormat((d) => castCall(xAxisYearFormat, d.getFullYear()))
-          )
+        .select('.line-chart__axis--x')
+        .call(
+          d3
+            .axisBottom(scale.value.x)
+            .ticks(props.xAxisTicks)
+            .tickFormat((d) => castCall(xAxisYearFormat, d.getFullYear()))
+        )
       d3.select(el.value)
-          .select('.line-chart__axis--y')
-          .call(
-              d3.axisLeft(scale.value.y)
-                  .tickFormat((d) => d3Formatter(d, props.yAxisTickFormat))
-                  .ticks(props.yAxisTicks)
-          )
-          .selectAll('.tick line')
-          .attr('x2', padded.value.width)
-
-
-
+        .select('.line-chart__axis--y')
+        .call(
+          d3
+            .axisLeft(scale.value.y)
+            .tickFormat((d) => d3Formatter(d, props.yAxisTickFormat))
+            .ticks(props.yAxisTicks)
+        )
+        .selectAll('.tick line')
+        .attr('x2', padded.value.width)
     }
     // function initialize() {
     //   d3.axisBottom().scale(scale.value.x)
@@ -203,8 +220,8 @@ export default defineComponent({
     // watch(labelHeight,()=> {
     //   update()
     // })
-    watchEffect(()=> {
-        update()
+    watchEffect(() => {
+      update()
     })
     return {
       el,
@@ -218,19 +235,24 @@ export default defineComponent({
 })
 </script>
 <template>
-  <div ref="el" class="line-chart" :style="{ '--line-color': lineColor }" :class="{ 'line-chart--social-mode': socialMode }">
+  <div
+    ref="el"
+    class="line-chart"
+    :style="{ '--line-color': lineColor }"
+    :class="{ 'line-chart--social-mode': socialMode }"
+  >
     <svg :width="width" :height="height">
       <g
-          class="line-chart__axis line-chart__axis--x"
-          :style="{
+        class="line-chart__axis line-chart__axis--x"
+        :style="{
           transform: `translate(${margin.left}px, ${margin.top + padded.height}px)`
         }"
       >
         >
       </g>
       <g
-          class="line-chart__axis line-chart__axis--y"
-          :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }"
+        class="line-chart__axis line-chart__axis--y"
+        :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }"
       >
         >
       </g>

package/lib/datavisualisations/StackedBarChart.vue

@@ -7,9 +7,17 @@ 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 {chartProps, getChartProps, useChart} from "@/composables/chart.js";
-import {isArray} from "lodash";
+import {
+  ComponentPublicInstance,
+  computed,
+  defineComponent,
+  nextTick,
+  PropType,
+  ref,
+  watch
+} from 'vue'
+import { chartProps, getChartProps, useChart } from '@/composables/chart.js'
+import { isArray } from 'lodash'
 
 export default defineComponent({
   name: 'StackedBarChart',
@@ -134,17 +142,13 @@ export default defineComponent({
     },
     ...chartProps()
   },
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     const highlightedKeys = ref(props.highlights)
     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, baseHeightRatio, d3Formatter, dataHasHighlights } =
+      useChart(el, getChartProps(props), { emit }, isLoaded)
 
     const hasConstraintHeight = computed(() => {
       return props.fixedHeight !== null || props.socialMode
@@ -154,7 +158,9 @@ export default defineComponent({
       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[] => {
       if (props.keys.length) {
@@ -166,7 +172,10 @@ 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 maxValue = computed(() => {
       return d3.max(loadedData.value || [], (datum, i) => {
@@ -183,7 +192,9 @@ export default defineComponent({
       if (props.fixedHeight !== null) {
         return `${props.fixedHeight}px`
       }
-      return props.socialMode && el.value ? `${el.value.offsetWidth * baseHeightRatio.value}px` : 'auto'
+      return props.socialMode && el.value
+        ? `${el.value.offsetWidth * baseHeightRatio.value}px`
+        : 'auto'
     })
 
     function normalizeKey(key: string) {
@@ -209,7 +220,10 @@ 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) {
@@ -226,18 +240,22 @@ export default defineComponent({
 
     function isRowHighlighted(i: number | string) {
       const row = get(sortedData.value, [i, props.labelField], null)
-      return (isArray(props.rowHighlights) && props.rowHighlights?.includes(row)) && !highlightedKeys.value.length
+      return (
+        isArray(props.rowHighlights) &&
+        props.rowHighlights?.includes(row) &&
+        !highlightedKeys.value.length
+      )
     }
 
     function barStyle(i: number | string, key: string) {
       const value = sortedData.value[i][key]
       const totalWidth = props.relative ? totalRowValue(i) : maxValue.value
       if (!totalWidth) {
-        throw new Error("Total width is not correct" + totalWidth)
+        throw new Error('Total width is not correct' + totalWidth)
       }
       const width = `${100 * (value / totalWidth)}%`
       const backgroundColor = colorScale.value(key)
-      return {width, backgroundColor}
+      return { width, backgroundColor }
     }
 
     // function barHeightBounds(height:number) {
@@ -250,15 +268,15 @@ export default defineComponent({
       await nextTick()
       // Collect sizes first
       const stack = discoveredKeys.value.map((key: string) => {
-        const {bar, row, value} = queryBarAndValue(i as number, key)
+        const { bar, row, value } = queryBarAndValue(i as number, key)
         if (!bar || !row || !value) {
-          throw new Error("Values not retrieved")
+          throw new Error('Values not retrieved')
         }
         const barEdge = bar.getBoundingClientRect().left + bar.offsetWidth
         const barWidth = bar.offsetWidth
         const rowEdge = row.getBoundingClientRect().left + row.offsetWidth
         const valueWidth = value.offsetWidth
-        return  {key, barEdge, barWidth, rowEdge, valueWidth}
+        return { key, barEdge, barWidth, rowEdge, valueWidth }
       })
       // Infer value's display
       return stack.map((desc, index) => {
@@ -266,9 +284,12 @@ export default defineComponent({
         if (index > 0) {
           const prevDesc = stack[index - 1]
           const bothValuesWidth = desc.valueWidth + prevDesc.valueWidth
-          desc.overflow = desc.overflow || (prevDesc.overflow && desc.barWidth < bothValuesWidth)
+          desc.overflow =
+            desc.overflow ||
+            (prevDesc.overflow && desc.barWidth < bothValuesWidth)
         }
-        desc.pushed = desc.barEdge + desc.valueWidth > desc.rowEdge && desc.overflow
+        desc.pushed =
+          desc.barEdge + desc.valueWidth > desc.rowEdge && desc.overflow
         return desc
       })
     }
@@ -285,17 +306,17 @@ export default defineComponent({
       const bar = row?.querySelector(barSelector) as HTMLElement
       const valueSelector = `.${barClass}__value`
       const value = bar?.querySelector(valueSelector) as HTMLElement
-      return {bar, row, value}
+      return { bar, row, value }
     }
 
-     async function hasValueOverflow(i: number | string, key: string) {
-      const stack =  await stackBarAndValue(i)
-      return get(find(stack, {key}), 'overflow')
+    async function hasValueOverflow(i: number | string, key: string) {
+      const stack = await stackBarAndValue(i)
+      return get(find(stack, { key }), 'overflow')
     }
 
     async function hasValuePushed(i: number | string, key: string) {
       const stack = await stackBarAndValue(i)
-      return get(find(stack, {key}), 'pushed')
+      return get(find(stack, { key }), 'pushed')
     }
 
     async function hasValueHidden(i: number | string, key: string) {
@@ -339,9 +360,12 @@ export default defineComponent({
       return d3Formatter(d, props.xAxisTickFormat)
     }
 
-    watch(() => props.highlights, (newHighlights) => {
-      highlightedKeys.value = newHighlights
-    })
+    watch(
+      () => props.highlights,
+      (newHighlights) => {
+        highlightedKeys.value = newHighlights
+      }
+    )
 
     return {
       colorScale,
@@ -367,7 +391,6 @@ export default defineComponent({
       normalizeKey,
       restoreHighlights
     }
-
   }
 
   // watch: {
@@ -387,69 +410,87 @@ export default defineComponent({
   //     }
   //   }
   // },
-
 })
 </script>
 <template>
   <div
-      ref="el"
-      :class="{
+    ref="el"
+    :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':
+        hasHighlights || hasRowHighlights || dataHasHighlights,
       'stacked-bar-chart--has-constraint-height': hasConstraintHeight,
       'stacked-bar-chart--has-label-above': labelAbove
     }"
-      :style="{ height }"
-      class="stacked-bar-chart d-flex flex-column"
+    :style="{ height }"
+    class="stacked-bar-chart d-flex flex-column"
   >
     <div class="d-flex align-items-center">
       <slot name="header-left">
-        <ul v-if="!hideLegend" class="stacked-bar-chart__legend list-inline mx-0 mt-0 mb-2">
+        <ul
+          v-if="!hideLegend"
+          class="stacked-bar-chart__legend list-inline mx-0 mt-0 mb-2"
+        >
           <li
-              v-for="key in discoveredKeys"
-              :key="key"
-              :class="{
+            v-for="key in discoveredKeys"
+            :key="key"
+            :class="{
               'stacked-bar-chart__legend__item--highlighted': isHighlighted(key)
             }"
-              class="stacked-bar-chart__legend__item list-inline-item d-inline-flex"
-              @mouseleave="restoreHighlights()"
-              @mouseover="delayHighlight(key)"
+            class="stacked-bar-chart__legend__item list-inline-item d-inline-flex"
+            @mouseleave="restoreHighlights()"
+            @mouseover="delayHighlight(key)"
           >
-            <span :style="{ 'background-color': colorScale(key) }" class="stacked-bar-chart__legend__item__box"/>
+            <span
+              :style="{ 'background-color': colorScale(key) }"
+              class="stacked-bar-chart__legend__item__box"
+            />
             {{ groupName(key) }}
           </li>
         </ul>
       </slot>
-      <slot name="header-right"/>
+      <slot name="header-right" />
     </div>
     <div class="stacked-bar-chart__groups">
       <div
-          v-for="(datum, i) in sortedData"
-          :key="i"
-          :class="{ 'flex-column': labelAbove }"
-          class="stacked-bar-chart__groups__item border-bottom flex-fill d-flex align-items-center"
+        v-for="(datum, i) in sortedData"
+        :key="i"
+        :class="{ 'flex-column': labelAbove }"
+        class="stacked-bar-chart__groups__item border-bottom flex-fill d-flex align-items-center"
       >
-        <div :class="{ 'w-100': labelAbove }" class="stacked-bar-chart__groups__item__label me-1 small">
+        <div
+          :class="{ 'w-100': labelAbove }"
+          class="stacked-bar-chart__groups__item__label me-1 small"
+        >
           {{ datum[labelField] }}
         </div>
-        <div class="stacked-bar-chart__groups__item__bars my-1 d-flex flex-grow-1 align-items-center">
+        <div
+          class="stacked-bar-chart__groups__item__bars my-1 d-flex flex-grow-1 align-items-center"
+        >
           <div
-              v-for="(key, j) in discoveredKeys"
-              :key="j"
-              :class="{
+            v-for="(key, j) in discoveredKeys"
+            :key="j"
+            :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"
-              @mouseleave="restoreHighlights()"
-              @mouseover="delayHighlight(key)"
+            :style="barStyle(i, key)"
+            class="stacked-bar-chart__groups__item__bars__item"
+            @mouseleave="restoreHighlights()"
+            @mouseover="delayHighlight(key)"
           >
             <div class="stacked-bar-chart__groups__item__bars__item__value p-1">
               {{ formatXDatum(datum[key]) }}
@@ -467,7 +508,9 @@ export default defineComponent({
 .stacked-bar-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;
 
@@ -541,7 +584,8 @@ export default defineComponent({
           min-height: calc(100% - 1.5rem);
         }
 
-        .stacked-bar-chart--has-constraint-height.stacked-bar-chart--label-above & {
+        .stacked-bar-chart--has-constraint-height.stacked-bar-chart--label-above
+          & {
           height: auto;
           min-height: auto;
         }
@@ -581,8 +625,12 @@ export default defineComponent({
             visibility: hidden;
           }
 
-          .stacked-bar-chart:not(.stacked-bar-chart--has-highlights) &--value-hidden &__value,
-          .stacked-bar-chart:not(.stacked-bar-chart--has-highlights) &--value-pushed &__value {
+          .stacked-bar-chart:not(.stacked-bar-chart--has-highlights)
+            &--value-hidden
+            &__value,
+          .stacked-bar-chart:not(.stacked-bar-chart--has-highlights)
+            &--value-pushed
+            &__value {
             visibility: hidden;
           }