@icij/murmur-next 4.0.1 → 4.0.3

package/lib/config.ts

@@ -2,66 +2,73 @@ import get from 'lodash/get'
 import each from 'lodash/each'
 import { reactive, ref } from 'vue'
 import defaultValues from './config.default'
-import {Ref} from "@vue/runtime-core";
+import { Ref } from '@vue/runtime-core'
 
-
-type ConfigMap = { [key: string]: any };
+type ConfigMap = { [key: string]: any }
 
 export class Config {
-  _VALUES : Ref<ConfigMap>;
-  _SCOPES : Ref<ConfigMap>;
-  constructor (values = {}) {
+  _VALUES: Ref<ConfigMap>
+  _SCOPES: Ref<ConfigMap>
+  constructor(values = {}) {
     this._VALUES = ref({})
     this._SCOPES = ref({})
     this.merge(values)
-    return this;
+    return this
   }
-  merge (values = {}) {
+  merge(values = {}) {
     return each(values, (value, key) => {
       this.set(key, value)
     })
   }
-  set (key:string, value: any) {
+  set(key: string, value: any) {
     const levels = key.split('.')
     this._VALUES.value = this._VALUES.value ?? {}
 
     if (levels.length > 1) {
-
-      const scope = this.scope(levels.shift() as string);
+      const scope = this.scope(levels.shift() as string)
       this._VALUES.value[key] = scope.set(levels.join('.'), value)
     } else {
       this._VALUES.value[key] = value
     }
     return value
   }
-  get (key:string, defaultValue?: Object | null) {
+  get(key: string, defaultValue?: Object | null) {
     return get(this._VALUES.value, key, defaultValue)
   }
-  is (key:string) {
+  is(key: string) {
     const value = this.get(key, null)
-    switch(value) {
-      case 1: return true
-      case true: return true
-      case '1': return true
-      case 'true': return true
-      case 0: return false
-      case false: return false
-      case '0': return false
-      case 'false': return false
-      default: return !!value
+    switch (value) {
+      case 1:
+        return true
+      case true:
+        return true
+      case '1':
+        return true
+      case 'true':
+        return true
+      case 0:
+        return false
+      case false:
+        return false
+      case '0':
+        return false
+      case 'false':
+        return false
+      default:
+        return !!value
     }
   }
-  isnt (key:string) {
+  isnt(key: string) {
     return !this.is(key)
   }
-  scope (name:string) {
+  scope(name: string) {
     this.scopes[name] = this.scopes[name] ?? new Config()
     return this.scopes[name]
   }
-  get values () {
+  get values() {
     return this._VALUES.value
   }
-  get scopes () {
+  get scopes() {
     this._SCOPES.value = this._SCOPES.value ?? ref({})
     return this._SCOPES.value
   }

package/lib/datavisualisations/BarChart.vue

@@ -2,9 +2,8 @@
 import * as d3 from 'd3'
 import identity from 'lodash/identity'
 import sortBy from 'lodash/sortBy'
-import {defineComponent, computed, ref, watch} from "vue"
-import {chartProps, getChartProps, useChart} from "@/composables/chart"
-
+import { defineComponent, computed, ref, watch } from 'vue'
+import { chartProps, getChartProps, useChart } from '@/composables/chart'
 
 export default defineComponent({
   name: 'BarChart',
@@ -78,16 +77,17 @@ export default defineComponent({
      */
     xAxisTickFormat: {
       type: [Function, String],
-      default: ()=>identity
+      default: () => identity
     },
     ...chartProps()
   },
-  emits:["loaded","resized"],
-  setup(props,{emit}){
+  emits: ['loaded', 'resized'],
+  setup(props, { emit }) {
     const el = ref(null)
-    const width=ref(0)
+    const width = ref(0)
     const isLoaded = ref(false)
-    const {loadedData, elementsMaxBBox,dataHasHighlights,d3Formatter}=useChart(el,getChartProps(props),{emit},isLoaded,onResize,null)
+    const { loadedData, elementsMaxBBox, dataHasHighlights, d3Formatter } =
+      useChart(el, getChartProps(props), { emit }, isLoaded, onResize, null)
     // onMounted(() => {
     //   window.addEventListener('resize', onResize)
     //   onResize()
@@ -100,7 +100,9 @@ export default defineComponent({
       if (!loadedData.value) {
         return []
       }
-      return !props.sortBy ? loadedData.value : sortBy(sortedData.value, props.sortBy)
+      return !props.sortBy
+        ? loadedData.value
+        : sortBy(sortedData.value, props.sortBy)
     })
     const labelWidth = computed(() => {
       if (props.fixedLabelWidth) {
@@ -130,13 +132,13 @@ export default defineComponent({
     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 scale = computed(() => {
       const x = d3
-          .scaleLinear()
-          .domain([0, d3.max(sortedData.value, (d) => d.value)])
-          .range([0, padded.value.width - valueWidth.value])
+        .scaleLinear()
+        .domain([0, d3.max(sortedData.value, (d) => d.value)])
+        .range([0, padded.value.width - valueWidth.value])
       return { x }
     })
     const bars = computed(() => {
@@ -161,15 +163,14 @@ export default defineComponent({
       })
     })
     const height = computed(() => {
-          return (props.barHeight + props.barGap) * sortedData.value.length
-        }
-    )
+      return (props.barHeight + props.barGap) * sortedData.value.length
+    })
 
-    function formatXDatum(d){
-      return d3Formatter(d,props.xAxisTickFormat)
+    function formatXDatum(d) {
+      return d3Formatter(d, props.xAxisTickFormat)
     }
     function onResize() {
-      if(el.value){
+      if (el.value) {
         width.value = el.value.offsetWidth
       }
     }
@@ -177,7 +178,7 @@ export default defineComponent({
       d3.axisBottom().scale(scale.value.x)
     }
 
-    watch(width,()=> {
+    watch(width, () => {
       initialize()
     })
 
@@ -195,47 +196,52 @@ export default defineComponent({
 })
 </script>
 
-
 <template>
   <div
-      ref="el"
-      class="bar-chart"
-      :style="{
+    ref="el"
+    class="bar-chart"
+    :style="{
       '--bar-color': barColor,
       '--bar-highlight-color': barHighlightColor
     }"
-      :class="{
+    :class="{
       'bar-chart--has-highlights': dataHasHighlights,
       'bar-chart--social-mode': socialMode
     }"
   >
     <svg :width="width" :height="height">
-      <g :style="{ transform: `translate(0, ${margin.top}px)` }" class="bar-chart__labels">
+      <g
+        :style="{ transform: `translate(0, ${margin.top}px)` }"
+        class="bar-chart__labels"
+      >
         <text
-            v-for="(label, i) in labels"
-            :key="i"
-            :x="label.x"
-            :y="label.y"
-            text-anchor="end"
-            class="bar-chart__labels__item"
+          v-for="(label, i) in labels"
+          :key="i"
+          :x="label.x"
+          :y="label.y"
+          text-anchor="end"
+          class="bar-chart__labels__item"
         >
           {{ label.label }}
         </text>
       </g>
-      <g :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }" class="bar-chart__bars">
+      <g
+        :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }"
+        class="bar-chart__bars"
+      >
         <g
-            v-for="(bar, i) in bars"
-            :key="i"
-            class="bar-chart__bars__item"
-            :class="{ 'bar-chart__bars__item--highlight': bar.highlight }"
+          v-for="(bar, i) in bars"
+          :key="i"
+          class="bar-chart__bars__item"
+          :class="{ 'bar-chart__bars__item--highlight': bar.highlight }"
         >
           <rect :width="bar.width" :height="bar.height" :x="bar.x" :y="bar.y" />
           <text
-              class="bar-chart__bars__item__value"
-              :x="bar.width + valueGap"
-              :y="bar.y + bar.height / 2"
-              text-anchor="start"
-              dominant-baseline="middle"
+            class="bar-chart__bars__item__value"
+            :x="bar.width + valueGap"
+            :y="bar.y + bar.height / 2"
+            text-anchor="start"
+            dominant-baseline="middle"
           >
             {{ formatXDatum(bar.value) }}
           </text>

package/lib/datavisualisations/ColumnChart.vue

@@ -1,15 +1,23 @@
 <script lang="ts">
-import {ComponentPublicInstance, computed, defineComponent, PropType, ref, watchEffect,onMounted} from 'vue'
-import {identity, iteratee, sortBy} from 'lodash'
+import {
+  ComponentPublicInstance,
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  watchEffect,
+  onMounted
+} from 'vue'
+import { identity, iteratee, sortBy } from 'lodash'
 import * as d3 from 'd3'
-import {chartProps, getChartProps, useChart} from "@/composables/chart";
+import { chartProps, getChartProps, useChart } from '@/composables/chart'
 
 type ColumnBar = {
-  datum: { [timeSerie: string]: any },
-  width: number,
-  height: number,
-  x: number,
-  y: number,
+  datum: { [timeSerie: string]: any }
+  width: number
+  height: number
+  x: number
+  y: number
 }
 //import chart from '../mixins/chart'
 
@@ -63,8 +71,8 @@ export default defineComponent({
      * Function to apply to format x axis ticks
      */
     xAxisTickFormat: {
-      type: [Function, String] as PropType<Function | string >,
-      default: ()=>identity
+      type: [Function, String] as PropType<Function | string>,
+      default: () => identity
     },
     /**
      * Definition of x axis ticks
@@ -77,8 +85,8 @@ export default defineComponent({
      * Function to apply to format y axis ticks
      */
     yAxisTickFormat: {
-      type: [Function, String] as PropType<Function | string >,
-      default: ()=>identity
+      type: [Function, String] as PropType<Function | string>,
+      default: () => identity
     },
     /**
      * Definition of y axis ticks
@@ -161,7 +169,7 @@ export default defineComponent({
     },
     ...chartProps()
   },
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     const width = ref(0)
     const height = ref(0)
     const shownTooltip = ref(-1)
@@ -173,13 +181,15 @@ export default defineComponent({
       d3Formatter,
       baseHeightRatio,
       dataHasHighlights
-    } = useChart(el, getChartProps(props), {emit}, isLoaded, setSizes)
+    } = useChart(el, getChartProps(props), { emit }, isLoaded, setSizes)
 
     const sortedData = computed((): any[] => {
       if (!loadedData.value) {
         return []
       }
-      return !props.sortBy ? loadedData.value : sortBy(sortedData.value, props.sortBy)
+      return !props.sortBy
+        ? loadedData.value
+        : sortBy(sortedData.value, props.sortBy)
     })
 
     const labelWidth = computed((): number => {
@@ -188,7 +198,7 @@ export default defineComponent({
       }
       const selector = '.column-chart__axis--y .tick text'
       const defaultWidth = 100
-      return elementsMaxBBox({selector, defaultWidth}).width
+      return elementsMaxBBox({ selector, defaultWidth }).width
     })
 
     const labelHeight = computed((): number => {
@@ -197,60 +207,72 @@ export default defineComponent({
       }
       const selector = '.column-chart__axis--y .tick text'
       const defaultHeight = 10
-      return elementsMaxBBox({selector, defaultHeight}).height
+      return elementsMaxBBox({ selector, defaultHeight }).height
     })
 
     const bucketHeight = computed((): number => {
-
       if (props.noXAxis) {
         return 0
       }
       const selector = '.column-chart__axis--x .tick text'
       const defaultHeight = 10
-      return elementsMaxBBox({selector, defaultHeight}).height
+      return elementsMaxBBox({ selector, defaultHeight }).height
     })
 
     const bucketWidth = computed((): number => {
       const selector = '.column-chart__axis--x .tick text'
       const defaultWidth = 100
-      return elementsMaxBBox({selector, defaultWidth}).width
+      return elementsMaxBBox({ selector, defaultWidth }).width
     })
 
-    const margin = computed((): { left: number; right: number; top: number; bottom: number } => {
-      return {
-        left: props.noYAxis ? 0 : labelWidth.value + 10,
-        right: 0,
-        top: labelHeight.value / 2,
-        bottom: props.noXAxis ? 0 : bucketHeight.value + 10
+    const margin = computed(
+      (): { left: number; right: number; top: number; bottom: number } => {
+        return {
+          left: props.noYAxis ? 0 : labelWidth.value + 10,
+          right: 0,
+          top: labelHeight.value / 2,
+          bottom: props.noXAxis ? 0 : bucketHeight.value + 10
+        }
       }
-    })
+    )
 
     const padded = computed((): { width: number; height: number } => {
       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 scaleX = computed((): d3.ScaleBand<string> => {
       return d3
-          .scaleBand()
-          .domain(sortedData.value.map(iteratee(props.timeseriesKey)))
-          .range([0, padded.value.width])
-          .padding(props.barPadding)
+        .scaleBand()
+        .domain(sortedData.value.map(iteratee(props.timeseriesKey)))
+        .range([0, padded.value.width])
+        .padding(props.barPadding)
     })
 
     const scaleY = computed((): d3.ScaleLinear<number, number> => {
-      const maxValue = props.maxValue ?? d3.max(sortedData.value, iteratee(props.seriesName))
-      return d3.scaleLinear().domain([0, maxValue]).range([padded.value.height, 0])
+      const maxValue =
+        props.maxValue ?? d3.max(sortedData.value, iteratee(props.seriesName))
+      return d3
+        .scaleLinear()
+        .domain([0, maxValue])
+        .range([padded.value.height, 0])
     })
 
     const bars = computed((): ColumnBar[] => {
       return sortedData.value.map((datum: any) => {
         return {
           datum,
-          width: Math.max(1, Math.abs(scaleX.value.bandwidth()) - props.barMargin),
-          height: Math.abs(padded.value.height - scaleY.value(datum[props.seriesName])),
-          x: (scaleX.value(datum[props.timeseriesKey]) ?? 0) + props.barMargin / 2,
+          width: Math.max(
+            1,
+            Math.abs(scaleX.value.bandwidth()) - props.barMargin
+          ),
+          height: Math.abs(
+            padded.value.height - scaleY.value(datum[props.seriesName])
+          ),
+          x:
+            (scaleX.value(datum[props.timeseriesKey]) ?? 0) +
+            props.barMargin / 2,
           y: scaleY.value(datum[props.seriesName]) ?? 0
         }
       })
@@ -271,7 +293,8 @@ export default defineComponent({
 
     const xAxisTickValues = computed((): string[] => {
       // Either use the explicit `xAxisTicks` prop or use the data
-      const ticks = props.xAxisTicks ?? sortedData.value.map(iteratee(props.timeseriesKey))
+      const ticks =
+        props.xAxisTicks ?? sortedData.value.map(iteratee(props.timeseriesKey))
       // Then filter out ticks according to `this.xAxisHiddenTicks`
       return ticks.map((tick, i) => {
         return (i + 1) % xAxisHiddenTicks.value ? null : tick
@@ -280,39 +303,41 @@ export default defineComponent({
 
     const xAxis = computed((): d3.Axis<string> => {
       return d3
-          .axisBottom(scaleX.value)
-          .tickFormat((d) => d3Formatter(d, props.xAxisTickFormat))
-          .tickValues(xAxisTickValues.value)
+        .axisBottom(scaleX.value)
+        .tickFormat((d) => d3Formatter(d, props.xAxisTickFormat))
+        .tickValues(xAxisTickValues.value)
     })
 
     const yAxis = computed((): d3.Axis<d3.NumberValue> => {
-          return d3
-              .axisLeft(scaleY.value)
-              .tickFormat((d) =>d3Formatter(d, props.yAxisTickFormat))
-              .ticks(props.yAxisTicks)
-        }
-    )
+      return d3
+        .axisLeft(scaleY.value)
+        .tickFormat((d) => d3Formatter(d, props.yAxisTickFormat))
+        .ticks(props.yAxisTicks)
+    })
 
     function formatXDatum(d: any) {
-      return d3Formatter(d,props.xAxisTickFormat)
+      return d3Formatter(d, props.xAxisTickFormat)
     }
 
     function formatYDatum(d: any) {
-      return d3Formatter(d,props.yAxisTickFormat)
+      return d3Formatter(d, props.yAxisTickFormat)
     }
 
     function setSizes() {
       width.value = (el.value as HTMLElement)?.offsetWidth ?? 0
-      height.value = props.fixedHeight !== null ? props.fixedHeight : width.value * baseHeightRatio.value
+      height.value =
+        props.fixedHeight !== null
+          ? props.fixedHeight
+          : width.value * baseHeightRatio.value
     }
 
-    function select({datum}: { datum: any }) {
+    function select({ datum }: { datum: any }) {
       /**
        * Fired when a column is selected
        * @event click
        * @param Mixed New step value.
        */
-      emit("select", datum)
+      emit('select', datum)
     }
 
     function update() {
@@ -320,32 +345,32 @@ export default defineComponent({
         return
       }
       d3.select(el.value)
-          .select('.column-chart__axis--x')
-          .call(xAxis.value as any)
-          .select('.domain')
-          .remove()
+        .select('.column-chart__axis--x')
+        .call(xAxis.value as any)
+        .select('.domain')
+        .remove()
 
       d3.select(el.value)
-          .select('.column-chart__axis--y')
-          .call(yAxis.value as any)
-          .selectAll('.tick line')
-          .attr('x2', padded.value.width)
+        .select('.column-chart__axis--y')
+        .call(yAxis.value as any)
+        .selectAll('.tick line')
+        .attr('x2', padded.value.width)
     }
 
-    function barTooltipStyle(bar: { x: number, y: number, width: number }) {
+    function barTooltipStyle(bar: { x: number; y: number; width: number }) {
       const top = `${bar.y + margin.value.top}px`
       const left = `${bar.x + bar.width / 2 + margin.value.left}px`
-      return {top, left}
+      return { top, left }
     }
 
     function highlighted(datum: any): boolean {
-      return datum.highlight || props.highlights.includes(datum[props.timeseriesKey])
+      return (
+        datum.highlight || props.highlights.includes(datum[props.timeseriesKey])
+      )
     }
 
-
     watchEffect(async () => {
       update()
-
     })
 
     return {
@@ -369,39 +394,55 @@ export default defineComponent({
 
 <template>
   <div
-      ref="el"
-      :class="{
+    ref="el"
+    :class="{
       'column-chart--has-highlights': dataHasHighlights,
       'column-chart--hover': hover,
       'column-chart--stripped': stripped,
       'column-chart--social-mode': socialMode
     }"
-      :style="{ '--column-color': columnColor, '--column-highlight-color': columnHighlightColor }"
-      class="column-chart"
+    :style="{
+      '--column-color': columnColor,
+      '--column-highlight-color': columnHighlightColor
+    }"
+    class="column-chart"
   >
-    <svg
-        :height="height" :width="width">
+    <svg :height="height" :width="width">
       <g :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }">
         <g
-            v-if="!noXAxis"
-            :style="{ transform: `translate(0, ${padded.height}px)` }"
-            class="column-chart__axis column-chart__axis--x"
+          v-if="!noXAxis"
+          :style="{ transform: `translate(0, ${padded.height}px)` }"
+          class="column-chart__axis column-chart__axis--x"
         />
-        <g v-if="!noYAxis" class="column-chart__axis column-chart__axis--y"/>
+        <g v-if="!noYAxis" class="column-chart__axis column-chart__axis--y" />
       </g>
-      <g :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }" class="column-chart__columns">
+      <g
+        :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }"
+        class="column-chart__columns"
+      >
         <g
-            v-for="(bar, index) in bars"
-            :key="index"
-            :class="{ 'column-chart__columns__item--highlight': highlighted(bar.datum) }"
-            :style="{ transform: `translate(${bar.x}px, 0px)` }"
-            class="column-chart__columns__item"
-            @click="select(bar)"
-            @mouseleave="shownTooltip = -1"
-            @mouseover="shownTooltip = index"
+          v-for="(bar, index) in bars"
+          :key="index"
+          :class="{
+            'column-chart__columns__item--highlight': highlighted(bar.datum)
+          }"
+          :style="{ transform: `translate(${bar.x}px, 0px)` }"
+          class="column-chart__columns__item"
+          @click="select(bar)"
+          @mouseleave="shownTooltip = -1"
+          @mouseover="shownTooltip = index"
         >
-          <rect :height="padded.height" :width="bar.width" class="column-chart__columns__item__placeholder"/>
-          <rect :height="bar.height" :width="bar.width" :y="bar.y" class="column-chart__columns__item__bar"/>
+          <rect
+            :height="padded.height"
+            :width="bar.width"
+            class="column-chart__columns__item__placeholder"
+          />
+          <rect
+            :height="bar.height"
+            :width="bar.width"
+            :y="bar.y"
+            class="column-chart__columns__item__bar"
+          />
         </g>
       </g>
     </svg>
@@ -409,7 +450,10 @@ export default defineComponent({
       <div v-for="(bar, index) in bars" :key="index">
         <div :style="barTooltipStyle(bar)" class="column-chart__tooltips__item">
           <transition name="fade">
-            <div v-if="shownTooltip === index" class="column-chart__tooltips__item__wrapper">
+            <div
+              v-if="shownTooltip === index"
+              class="column-chart__tooltips__item__wrapper"
+            >
               <slot name="tooltip" v-bind="bar">
                 <h6 class="column-chart__tooltips__item__wrapper__heading mb-0">
                   {{ formatXDatum(bar.datum[timeseriesKey]) }}
@@ -426,7 +470,6 @@ export default defineComponent({
   </div>
 </template>
 
-
 <style lang="scss">
 @import '../styles/lib';
 
@@ -436,7 +479,8 @@ export default defineComponent({
 
   position: relative;
 
-  &--has-highlights &__columns__item:not(&__columns__item--highlight):not(:hover) {
+  &--has-highlights
+    &__columns__item:not(&__columns__item--highlight):not(:hover) {
     opacity: var(--highlight-opacity);
     filter: grayscale(30%);
   }