@icij/murmur-next 4.0.0

package/lib/composables/resizeObserver.ts

@@ -0,0 +1,37 @@
+import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
+import { Ref,nextTick } from "vue";
+import ResizeObserver from 'resize-observer-polyfill'
+
+export const useResizeObserver = (resizableRef?:Ref) => {
+    const resizeRef:Ref<HTMLElement> = resizableRef ?? ref();
+    const resizeState = reactive({
+        dimensions: {} as DOMRect,
+        offsetWidth: 540,
+        narrowWidth: false
+    });
+
+    const observer = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+            resizeState.dimensions = entry.contentRect
+            resizeState.offsetWidth = (entry.target as HTMLElement).offsetWidth
+            resizeState.narrowWidth = (resizeState.offsetWidth ?? 540) < 540
+        });
+    });
+
+    onMounted(async () => {
+        // set initial dimensions right before observing: Element.getBoundingClientRect()
+        resizeState.dimensions = resizeRef.value.getBoundingClientRect();
+        resizeState.offsetWidth = resizeRef.value.offsetWidth
+        resizeState.narrowWidth = false // TODO CD: old default is false but maybe this would work (resizeState.offsetWidth ?? 540) < 540 but would be often true
+
+        observer.observe(resizeRef.value);
+    });
+
+    onBeforeUnmount(() => {
+        observer.unobserve(resizeRef.value);
+    });
+
+    return { resizeState, resizeRef };
+};
+
+export default useResizeObserver;

package/lib/composables/sendEmail.ts

@@ -0,0 +1,50 @@
+import jsonp from "jsonp";
+import {computed, MaybeRefOrGetter, toValue} from "vue";
+import flatten from "lodash/flatten";
+import castArray from "lodash/castArray";
+import {Ref} from "react";
+
+type FormDataResult = { result: string; msg: string }
+// by convention, composable function names start with "use"
+export function useSendEmail(email:MaybeRefOrGetter<string>,action?:string,emailField?:string, tracker?:string, referrer?:string|null,defaultGroups?:string[]|string,) {
+    const emailValue = toValue(email)
+
+    const groups = computed(()=> {
+        return flatten(castArray(defaultGroups).map((g) => g.split(',')))
+    })
+
+    const urlFromAction = computed(()=> {
+        return action?.replace('/post?', '/post-json?').concat('&c=?')
+    })
+    const parentReferrer = computed(()=> {
+        if (referrer) {
+            return referrer
+        }
+        return window.location !== window.parent.location ? document.referrer : document.location.href
+    })
+
+    const submitUrl = computed(()=> {
+        if(typeof urlFromAction.value == 'undefined' || !tracker || !emailField){
+            throw new Error("Missing url Info")
+        }
+
+        const url = new URL(urlFromAction.value)
+        url.searchParams.set('SIGNUP', tracker)
+        url.searchParams.set('MMERGE24', parentReferrer.value)
+        url.searchParams.set(emailField, emailValue)
+        groups.value.map((group) => url.searchParams.set(group, '1'))
+
+        return url.href
+    })
+    function send() {
+        return new Promise((resolve, reject) => {
+            jsonp(submitUrl.value, { param: 'c' }, (err: any, data: FormDataResult) => {
+                return err ? reject(err) : resolve(data)
+            })
+        })
+    }
+
+
+    return {send}
+}
+

package/lib/config.default.ts

@@ -0,0 +1,33 @@
+export default {
+  'imddb-header.dropdown.items': [
+    { label: 'Graphics', href: "#/" },
+    { label: 'Overview', href: "#/" },
+    { label: 'Visual overview', href: "#/" },
+    { label: 'Backgrounder', href: "#/" },
+    { label: 'About this project', href: "#/", active: true }
+  ],
+  'project.name': 'Secret Papers',
+  'app.name': 'Awesome App',
+  'app.home': './',
+  'app.donate-url': 'https://www.icij.org/donate/',
+  'contact-email':'contact@icij.org',
+  'content-placeholder.rows': [
+    {
+      height: '1em',
+      boxes: [[0, '50%'], ['5%', '30%'],  ['5%', '10%']]
+    }
+  ],
+  'donate-form.tracker': null,
+  'sharing-options.url': null,
+  'sharing-options.title': 'Awesome App by ICIJ',
+  'sharing-options.description': 'null',
+  'sharing-options.media': null,
+  'sharing-options.twitter-user': 'ICIJorg',
+  'signup-form.tracker': 'EXTERNAL',
+  'signup-form.action': 'https://icij.us15.list-manage.com/subscribe/post?u=0d48a33b1c24d257734cc2a79&id=992ecfdbb2',
+  'signup-form.email-field': 'EMAIL',
+  'signup-form.default-groups': ['group[9][1]'],
+  'textured-deck.background-base-url': 'https://icij.github.io/murmur',
+  'map.topojson.world-countries-sans-antarctica': 'https://icij.github.io/murmur/assets/topojson/world-countries-sans-antarctica.json',
+  'map.topojson.france-departements': 'https://icij.github.io/murmur/assets/topojson/france-departements.json'
+}

package/lib/config.ts

@@ -0,0 +1,70 @@
+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";
+
+
+type ConfigMap = { [key: string]: any };
+
+export class Config {
+  _VALUES : Ref<ConfigMap>;
+  _SCOPES : Ref<ConfigMap>;
+  constructor (values = {}) {
+    this._VALUES = ref({})
+    this._SCOPES = ref({})
+    this.merge(values)
+    return this;
+  }
+  merge (values = {}) {
+    return each(values, (value, key) => {
+      this.set(key, value)
+    })
+  }
+  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);
+      this._VALUES.value[key] = scope.set(levels.join('.'), value)
+    } else {
+      this._VALUES.value[key] = value
+    }
+    return value
+  }
+  get (key:string, defaultValue?: Object | null) {
+    return get(this._VALUES.value, key, defaultValue)
+  }
+  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
+    }
+  }
+  isnt (key:string) {
+    return !this.is(key)
+  }
+  scope (name:string) {
+    this.scopes[name] = this.scopes[name] ?? new Config()
+    return this.scopes[name]
+  }
+  get values () {
+    return this._VALUES.value
+  }
+  get scopes () {
+    this._SCOPES.value = this._SCOPES.value ?? ref({})
+    return this._SCOPES.value
+  }
+}
+
+export default new Config(defaultValues)

package/lib/d3-geo-projection.d.ts

@@ -0,0 +1 @@
+declare module 'd3-geo-projection'

package/lib/datavisualisations/BarChart.vue

@@ -0,0 +1,275 @@
+<script lang="ts">
+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"
+
+
+export default defineComponent({
+  name: 'BarChart',
+  props: {
+    /**
+     * Height of each bar
+     */
+    barHeight: {
+      type: Number,
+      default: 30
+    },
+    /**
+     * Distance between each bar
+     */
+    barGap: {
+      type: Number,
+      default: 15
+    },
+    /**
+     * Color of each bar (uses the CSS variable --bar-color by default)
+     */
+    barColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Color of each highlighted bar (uses the CSS variable --bar-highlight-color by default)
+     */
+    barHighlightColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Enforce a width for each bar's label
+     */
+    fixedLabelWidth: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Enforce a width for each bar's value
+     */
+    fixedValueWidth: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Distance between a bar and its label
+     */
+    labelGap: {
+      type: Number,
+      default: 10
+    },
+    /**
+     * Distande between a bar and its value
+     */
+    valueGap: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * Sort bars by one or several keys.
+     */
+    sortBy: {
+      type: [Array, String],
+      default: null
+    },
+    /**
+     * Function to apply to format x axis ticks (bar value). It can be a
+     * function returning the formatted value or a d3's formatter string.
+     */
+    xAxisTickFormat: {
+      type: [Function, String],
+      default: ()=>identity
+    },
+    ...chartProps()
+  },
+  emits:["loaded","resized"],
+  setup(props,{emit}){
+    const el = ref(null)
+    const width=ref(0)
+    const isLoaded = ref(false)
+    const {loadedData, elementsMaxBBox,dataHasHighlights,d3Formatter}=useChart(el,getChartProps(props),{emit},isLoaded,onResize,null)
+    // onMounted(() => {
+    //   window.addEventListener('resize', onResize)
+    //   onResize()
+    // })
+    // beforeUnmount(()=> {
+    //   window.removeEventListener('resize', onResize)
+    // })
+
+    const sortedData = computed(() => {
+      if (!loadedData.value) {
+        return []
+      }
+      return !props.sortBy ? loadedData.value : sortBy(sortedData.value, props.sortBy)
+    })
+    const labelWidth = computed(() => {
+      if (props.fixedLabelWidth) {
+        return props.fixedLabelWidth
+      }
+      const selector = '.bar-chart__labels__item'
+      const defaultWidth = 100
+      return elementsMaxBBox({ selector, defaultWidth }).width
+    })
+    const valueWidth = computed(() => {
+      if (props.fixedValueWidth) {
+        return props.fixedValueWidth
+      }
+      const selector = '.bar-chart__bars__item__value'
+      const defaultWidth = 0
+      return elementsMaxBBox({ selector, defaultWidth }).width + props.valueGap
+    })
+
+    const margin = computed(() => {
+      const left = labelWidth.value + props.labelGap
+      const right = 0
+      const top = 0
+      const bottom = 0
+      return { left, right, top, bottom }
+    })
+
+    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 }
+    })
+    const scale = computed(() => {
+      const x = d3
+          .scaleLinear()
+          .domain([0, d3.max(sortedData.value, (d) => d.value)])
+          .range([0, padded.value.width - valueWidth.value])
+      return { x }
+    })
+    const bars = computed(() => {
+      return sortedData.value.map((d, i) => {
+        return {
+          width: Math.abs(scale.value.x(d.value)),
+          height: Math.abs(props.barHeight),
+          value: d.value,
+          highlight: d.highlight,
+          x: 0,
+          y: (props.barHeight + props.barGap) * i
+        }
+      })
+    })
+    const labels = computed(() => {
+      return sortedData.value.map((d, i) => {
+        return {
+          label: d.label,
+          x: labelWidth.value,
+          y: 4 + props.barHeight / 2 + (props.barHeight + props.barGap) * i
+        }
+      })
+    })
+    const height = computed(() => {
+          return (props.barHeight + props.barGap) * sortedData.value.length
+        }
+    )
+
+    function formatXDatum(d){
+      return d3Formatter(d,props.xAxisTickFormat)
+    }
+    function onResize() {
+      if(el.value){
+        width.value = el.value.offsetWidth
+      }
+    }
+    function initialize() {
+      d3.axisBottom().scale(scale.value.x)
+    }
+
+    watch(width,()=> {
+      initialize()
+    })
+
+    return {
+      el,
+      dataHasHighlights,
+      width,
+      height,
+      margin,
+      labels,
+      bars,
+      formatXDatum
+    }
+  }
+})
+</script>
+
+
+<template>
+  <div
+      ref="el"
+      class="bar-chart"
+      :style="{
+      '--bar-color': barColor,
+      '--bar-highlight-color': barHighlightColor
+    }"
+      :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">
+        <text
+            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
+            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"
+          >
+            {{ formatXDatum(bar.value) }}
+          </text>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style lang="scss">
+@import '../styles/lib';
+
+.bar-chart {
+  text {
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    fill: currentColor;
+  }
+
+  &--has-highlights &__bars__item:not(&__bars__item--highlight):not(:hover) {
+    opacity: 0.7;
+    filter: grayscale(30%);
+  }
+
+  &__bars {
+    &__item {
+      rect {
+        fill: var(--bar-color, var(--dark, $dark));
+      }
+
+      &--highlight rect {
+        fill: var(--bar-highlight-color, var(--primary, $primary));
+      }
+    }
+  }
+}
+</style>