@icij/murmur-next 4.0.0 → 4.0.3

package/lib/composables/chart.ts

@@ -4,179 +4,196 @@ import isObject from 'lodash/isObject'
 import isString from 'lodash/isString'
 import max from 'lodash/max'
 import some from 'lodash/some'
-import {ComponentPublicInstance, computed, onMounted, ref, watch} from 'vue'
-import {isUrl} from '@/utils/strings'
-import { Ref, SetupContext} from "@vue/runtime-core";
-import useResizeObserver from "@/composables/resizeObserver";
+import { ComponentPublicInstance, computed, onMounted, ref, watch } from 'vue'
+import { isUrl } from '@/utils/strings'
+import { Ref, SetupContext } from '@vue/runtime-core'
+import useResizeObserver from '@/composables/resizeObserver'
 import { watchEffect } from 'vue'
 
-
-type ChartContext<T extends string[]> = SetupContext<[...T, ...string[]]>;
-type ChartEmit = Pick<ChartContext<["resized", "loaded"]>, 'emit'>
+type ChartContext<T extends string[]> = SetupContext<[...T, ...string[]]>
+type ChartEmit = Pick<ChartContext<['resized', 'loaded']>, 'emit'>
 type ChartProps = {
-    chartHeightRatio: { type: NumberConstructor },
-    data: {
-        default: () => any[] | string,
-        validator(value: string): boolean,
-        type: (ArrayConstructor | StringConstructor | ObjectConstructor)[]
-    },
-    dataUrlType: { default: string, validator(value: string): boolean, type: StringConstructor },
-    socialMode: { type: BooleanConstructor },
-    socialModeRatio:
-        { default: number, type: NumberConstructor }
-};
+  chartHeightRatio: { type: NumberConstructor }
+  data: {
+    default: () => any[] | string
+    validator(value: string): boolean
+    type: (ArrayConstructor | StringConstructor | ObjectConstructor)[]
+  }
+  dataUrlType: {
+    default: string
+    validator(value: string): boolean
+    type: StringConstructor
+  }
+  socialMode: { type: BooleanConstructor }
+  socialModeRatio: { default: number; type: NumberConstructor }
+}
 
 export function getChartProps(props: any): ChartProps {
-    return {
-        chartHeightRatio: props.chartHeightRatio,
-        data: props.data,
-        dataUrlType: props.dataUrlType,
-        socialMode: props.socialMode,
-        socialModeRatio: props.socialModeRatio,
-    }
+  return {
+    chartHeightRatio: props.chartHeightRatio,
+    data: props.data,
+    dataUrlType: props.dataUrlType,
+    socialMode: props.socialMode,
+    socialModeRatio: props.socialModeRatio
+  }
 }
 
 export const chartProps = (): ChartProps => ({
-    data: {
-        type: [Array, String, Object],
-        default: () => [],
-        validator(value: string) {
-            return isObject(value) || (isString(value) && isUrl(value))
-        }
-    },
-    /**
-     * Format of the data to load.
-     */
-    dataUrlType: {
-        type: String,
-        default: 'json',
-        validator(value: string) {
-            return ['json', 'csv', 'tsv'].indexOf(value) > -1
-        }
-    },
-    /**
-     * When applicable, default chart's height ratio
-     */
-    chartHeightRatio: {
-        type: Number
-    },
-    /**
-     * If true, the chart will be display on social mode
-     */
-    socialMode: {
-        type: Boolean
-    },
-    /**
-     * Ratio to use in social mode
-     */
-    socialModeRatio: {
-        type: Number,
-        default: 5 / 4
+  data: {
+    type: [Array, String, Object],
+    default: () => [],
+    validator(value: string) {
+      return isObject(value) || (isString(value) && isUrl(value))
+    }
+  },
+  /**
+   * Format of the data to load.
+   */
+  dataUrlType: {
+    type: String,
+    default: 'json',
+    validator(value: string) {
+      return ['json', 'csv', 'tsv'].indexOf(value) > -1
     }
+  },
+  /**
+   * When applicable, default chart's height ratio
+   */
+  chartHeightRatio: {
+    type: Number
+  },
+  /**
+   * If true, the chart will be display on social mode
+   */
+  socialMode: {
+    type: Boolean
+  },
+  /**
+   * Ratio to use in social mode
+   */
+  socialModeRatio: {
+    type: Number,
+    default: 5 / 4
+  }
 })
-export const chartEmits = ["resized", "loaded"]
-type Chart =  {
-    dataHasHighlights: any;
-    loadedData: any;
-    xAxisYearFormat: (year: (number | string)) => number | string;
-    elementsMaxBBox: ({selector, defaultWidth, defaultHeight}?: {
-        selector?: any;
-        defaultWidth?: any;
-        defaultHeight?: any
-    }) => ({ width: any; height: any });
-    d3Formatter: any;
-    baseHeightRatio: any
+export const chartEmits = ['resized', 'loaded']
+type Chart = {
+  dataHasHighlights: any
+  loadedData: any
+  xAxisYearFormat: (year: number | string) => number | string
+  elementsMaxBBox: ({
+    selector,
+    defaultWidth,
+    defaultHeight
+  }?: {
+    selector?: any
+    defaultWidth?: any
+    defaultHeight?: any
+  }) => { width: any; height: any }
+  d3Formatter: any
+  baseHeightRatio: any
 }
-export function useChart(resizableRef: Ref<ComponentPublicInstance<HTMLElement> | null>, props: ChartProps, {emit}: ChartEmit, isLoaded:Ref<boolean>, onResized?:Function, afterLoaded?:()=>Promise<any>): Chart {
-    const  { resizeRef , resizeState } = useResizeObserver(resizableRef)
-    const loadedData = ref([])
-
-    onMounted(async () => {
-        await document.fonts?.ready
-
-        watchEffect(async ()=>{
-            if(!isLoaded.value){
-
-                if (isString(props.data)) {
-                    // @ts-ignore
-                    loadedData.value = await d3[props.dataUrlType](props.data)
-                } else {
-                    loadedData.value = props.data as unknown as []
-                }
-
-                if(afterLoaded){
-                    await afterLoaded()
-                }
-                isLoaded.value = true
-                emit('loaded')
-            }
-
-             if(isLoaded.value && onResized){
-                onResized()
-                emit('resized')
-             }
-        })
-
-
-    })
-    function elementsMaxBBox({selector = 'text', defaultWidth = null, defaultHeight = null} = {}) {
-
-        const elements = isLoaded.value? resizeRef.value?.querySelectorAll(selector) : []
-        if (elements.length == 0) {
-            return {width: defaultWidth, height: defaultHeight}
+export function useChart(
+  resizableRef: Ref<ComponentPublicInstance<HTMLElement> | null>,
+  props: ChartProps,
+  { emit }: ChartEmit,
+  isLoaded: Ref<boolean>,
+  onResized?: Function,
+  afterLoaded?: () => Promise<any>
+): Chart {
+  const { resizeRef, resizeState } = useResizeObserver(resizableRef)
+  const loadedData = ref([])
+
+  onMounted(async () => {
+    await document.fonts?.ready
+
+    watchEffect(async () => {
+      if (!isLoaded.value) {
+        if (isString(props.data)) {
+          // @ts-ignore
+          loadedData.value = await d3[props.dataUrlType](props.data)
+        } else {
+          loadedData.value = props.data as unknown as []
         }
-        const width = max(
-            [...elements].map((l) => {
-                return l.getBBox ? l.getBBox().width : defaultWidth
-            })
-        )
-        const height = max(
-            [...elements].map((l) => {
-                return l.getBBox ? l.getBBox().height : defaultHeight
-            })
-        )
-        return {width, height}
-    }
 
-    function xAxisYearFormat(year: number | string) {
-        // previously using narrowWidth but it is automatically updated through resizeObserver state reactivity
-        return resizeState.narrowWidth ? '’' + String(year).slice(2, 4) : year
+        if (afterLoaded) {
+          await afterLoaded()
+        }
+        isLoaded.value = true
+        emit('loaded')
+      }
+
+      if (isLoaded.value && onResized) {
+        onResized()
+        emit('resized')
+      }
+    })
+  })
+  function elementsMaxBBox({
+    selector = 'text',
+    defaultWidth = null,
+    defaultHeight = null
+  } = {}) {
+    const elements = isLoaded.value
+      ? resizeRef.value?.querySelectorAll(selector)
+      : []
+    if (elements.length == 0) {
+      return { width: defaultWidth, height: defaultHeight }
     }
-    function highlighted(datum: { highlight: boolean }) {
-        return datum.highlight
+    const width = max(
+      [...elements].map((l) => {
+        return l.getBBox ? l.getBBox().width : defaultWidth
+      })
+    )
+    const height = max(
+      [...elements].map((l) => {
+        return l.getBBox ? l.getBBox().height : defaultHeight
+      })
+    )
+    return { width, height }
+  }
+
+  function xAxisYearFormat(year: number | string) {
+    // previously using narrowWidth but it is automatically updated through resizeObserver state reactivity
+    return resizeState.narrowWidth ? '’' + String(year).slice(2, 4) : year
+  }
+  function highlighted(datum: { highlight: boolean }) {
+    return datum.highlight
+  }
+  function d3Formatter(value: any, formatter: any) {
+    if (isFunction(formatter)) {
+      return formatter(value)
+    } else if (isString(formatter)) {
+      return d3.format(formatter)(value)
     }
-    function d3Formatter(value:any,formatter:any)  {
-        if (isFunction(formatter)) {
-            return formatter(value)
-        } else if (isString(formatter)) {
-            return d3.format(formatter)(value)
-        }
-        return value
+    return value
+  }
+  const baseHeightRatio = computed(() => {
+    return (
+      props.chartHeightRatio ||
+      (props.socialMode ? props.socialModeRatio : 9 / 16)
+    )
+  })
+  const dataHasHighlights = computed(() => {
+    if (Array.isArray(props.data)) {
+      return some(props.data, highlighted)
     }
-    const baseHeightRatio = computed(() => {
-        return props.chartHeightRatio || (props.socialMode ? props.socialModeRatio : 9 / 16)
-    })
-    const dataHasHighlights = computed(() => {
-        if (Array.isArray(props.data)) {
-            return some(props.data, highlighted)
-        }
-        return false
-    })
-
-    watch(resizeState.dimensions, () => {
-        if(isLoaded.value && onResized){
-            onResized()
-            emit('resized')
-        }
-    })
-
+    return false
+  })
 
-    return {
-        loadedData,
-        elementsMaxBBox,
-        xAxisYearFormat,
-        d3Formatter,
-        baseHeightRatio,
-        dataHasHighlights,
+  watch(resizeState.dimensions, () => {
+    if (isLoaded.value && onResized) {
+      onResized()
+      emit('resized')
     }
+  })
+
+  return {
+    loadedData,
+    elementsMaxBBox,
+    xAxisYearFormat,
+    d3Formatter,
+    baseHeightRatio,
+    dataHasHighlights
+  }
 }

package/lib/composables/resizeObserver.ts

@@ -1,37 +1,37 @@
-import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
-import { Ref,nextTick } from "vue";
+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
-    });
+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
-        });
-    });
+  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
+  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);
-    });
+    observer.observe(resizeRef.value)
+  })
 
-    onBeforeUnmount(() => {
-        observer.unobserve(resizeRef.value);
-    });
+  onBeforeUnmount(() => {
+    observer.unobserve(resizeRef.value)
+  })
 
-    return { resizeState, resizeRef };
-};
+  return { resizeState, resizeRef }
+}
 
-export default useResizeObserver;
+export default useResizeObserver

package/lib/composables/sendEmail.ts

@@ -1,50 +1,61 @@
-import jsonp from "jsonp";
-import {computed, MaybeRefOrGetter, toValue} from "vue";
-import flatten from "lodash/flatten";
-import castArray from "lodash/castArray";
-import {Ref} from "react";
+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
-    })
+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 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)
         }
-
-        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}
+  return { send }
 }
-

package/lib/config.default.ts

@@ -1,20 +1,24 @@
 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 }
+    { 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',
+  'contact-email': 'contact@icij.org',
   'content-placeholder.rows': [
     {
       height: '1em',
-      boxes: [[0, '50%'], ['5%', '30%'],  ['5%', '10%']]
+      boxes: [
+        [0, '50%'],
+        ['5%', '30%'],
+        ['5%', '10%']
+      ]
     }
   ],
   'donate-form.tracker': null,
@@ -24,10 +28,13 @@ export default {
   '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.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'
+  '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'
 }