@icij/murmur-next 4.0.0

package/lib/components/RangePicker.vue

@@ -0,0 +1,430 @@
+<script lang="ts">
+import {defineComponent, VNode, DirectiveBinding, PropType, ref, watch, computed, onBeforeMount, toRef} from 'vue'
+import { faGripLinesVertical } from '@fortawesome/free-solid-svg-icons/faGripLinesVertical'
+import { clamp, get, has, invoke, round } from 'lodash'
+
+import Fa, { library } from './Fa'
+
+import type { Variant } from '@/types'
+
+/**
+ * A component to wrap an HTML element with a range picker overlay.
+ */
+export default defineComponent({
+  name: 'RangePicker',
+  components: {
+    Fa
+  },
+  directives: {
+    draggable: {
+
+      mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void {
+        let startX: number, initialClientX: number
+        const relative = binding.modifiers?.relative ?? false
+
+        // Emit an event to the parent component
+        function emitEvent({ name, data = null }: { name: string; data?: any }) {
+          vnode.el.dispatchEvent(new CustomEvent(name,{detail: data}))
+          //const handlers = get(vnode, 'data.on') ?? get(vnode, 'componentOptions.listeners')
+          /*if (has(handlers, name)) {
+            invoke(handlers, `${name}.fns`, data)
+          }*/
+        }
+
+        // Handle the dragging of the element
+        function move(event: MouseEvent | TouchEvent) {
+          const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX
+          const offset = relative ? el.offsetWidth : 0
+          const maxX = binding.instance?.rangeWidth() - offset
+          const data = clamp(startX + clientX - initialClientX, 0, maxX)
+          emitEvent({ name: 'dragged', data })
+          return false
+        }
+
+        // Clean up listeners once the dragging ends
+        function end(event: MouseEvent | TouchEvent) {
+          emitEvent({ name: 'ended' })
+          if (event instanceof MouseEvent) {
+            document.removeEventListener('mousemove', move)
+            document.removeEventListener('mouseup', end)
+          } else {
+            document.removeEventListener('touchmove', move)
+            document.removeEventListener('touchend', end)
+          }
+        }
+
+        // Register listeners when dragging start
+        function start(event: MouseEvent | TouchEvent) {
+          emitEvent({ name: 'started' })
+          startX = el.offsetLeft
+          if (event instanceof MouseEvent) {
+            initialClientX = event.clientX
+            document.addEventListener('mousemove', move)
+            document.addEventListener('mouseup', end)
+          } else {
+            initialClientX = event.touches[0].clientX
+            document.addEventListener('touchmove', move)
+            document.addEventListener('touchend', end)
+          }
+          return false
+        }
+
+        // Register the drag and touch event handlers
+        el.addEventListener('mousedown', start)
+        el.addEventListener('touchstart', start)
+      }
+    }
+  },
+  props: {
+    /**
+     * Initial values of the range bounds. Should contain two numbers.
+     * indicating the start and end of the range.
+     */
+    range: {
+      type: Array as unknown as PropType<[number,number]>,
+      required: true
+    },
+    /**
+     * Enables hover styling on rows.
+     */
+    hover: {
+      type: Boolean as PropType<boolean>,
+      default:false
+    },
+    /**
+     * Offset from the left side of the component
+     * where the dragging for the start value begins.
+     */
+    startOffset: {
+      type: [Number,String] as PropType<number|string>,
+      default: 0
+    },
+    /**
+     * Offset from the right side of the component where
+     * the dragging for the end value ends.
+     */
+    endOffset: {
+      type: [Number,String] as PropType<number|string>,
+      default: 0
+    },
+    /**
+     * Number of decimal places to which values should be rounded.
+     */
+    precision: {
+      type: Number as PropType<number>,
+      default: 4
+    },
+    /**
+     * Snap increment value. For instance,
+     * if snap is 0.1, values will snap to 0, 0.1, 0.2, and so on.
+     */
+    snap: {
+      type: Number as PropType<number>,
+      default: 0.0001
+    },
+    /**
+     * Minimum distance between the two range bounds to ensure they
+     * don't get too close to each other.
+     */
+    minDistance: {
+      type: Number as PropType<number>,
+      default: 0.01
+    },
+    /**
+     * Variant style of the component. Expected to be one
+     * of the predefined Bootstrap theme (e.g., 'primary', 'secondary', etc).
+     */
+    variant: {
+      type: String as PropType<Variant>,
+      default: 'primary'
+    },
+    /**
+     * Rounds corner edges of the range boundaries. If
+     * true, the component will have rounded corners.
+     */
+    rounded: {
+      type: Boolean as PropType<boolean>,
+      default: false
+    }
+  },
+  emits:['update:range'],
+  setup(props, {emit}){
+    onBeforeMount(()=>{
+      library.add(faGripLinesVertical)
+    })
+    const rangePickerBounds = ref<HTMLElement|null>(null)
+    const start = toRef(props.range[0] ?? 0)
+    const end =  toRef(props.range[1] ?? 0)
+    const moving =  ref( false)
+    const resizing =  ref( false)
+    const disabled = computed(() => {
+          return props.range.length < 2
+        })
+    const overlayStyle = computed((): { left: string; right: string } => {
+      return {
+        left: `${start.value * 100}%`,
+        right: `${(1 - end.value) * 100}%`
+      }
+    })
+    const boundsStyle = computed((): { left: string; right: string } => {
+          return {
+            left: startOffsetWithUnit.value,
+            right: endOffsetWithUnit.value
+          }
+        })
+
+    const startOffsetWithUnit = computed((): string => {
+      return valueWithUnit(props.startOffset)
+    })
+    const endOffsetWithUnit = computed((): string => {
+          return valueWithUnit(props.endOffset)
+    })
+
+    const startBoundStyle = computed((): { left: string } => {
+      return { left: `${start.value * 100}% ` }
+    })
+
+    const endBoundStyle = computed((): { left: string } => {
+          return { left: `${end.value * 100}%` }
+    })
+    const classList = computed((): { [key: string]: boolean } => {
+          return {
+            [`range-picker--${props.variant}`]: !!props.variant,
+            'range-picker--hover': props.hover,
+            'range-picker--disabled': disabled.value,
+            'range-picker--rounded': props.rounded,
+            'range-picker--resizing': resizing.value,
+            'range-picker--moving': moving.value
+          }
+        }
+    )
+
+    function toggleMoving(value){
+      moving.value = value ?? !moving.value
+    }
+    function toggleResizing(value) {
+      resizing.value = value ?? !resizing.value
+    }
+    function snapValue(value): number {
+      return round(value / props.snap) * props.snap
+    }
+    function rangeWidth(): number {
+      return rangePickerBounds.value?.getBoundingClientRect().width ?? 0
+    }
+    function dragStartBound({detail: dx}) {
+
+      const newValue = snapValue(dx / rangeWidth())
+      // Ensure start value doesn't get too close to end value
+      if (newValue < end.value - props.minDistance) {
+        start.value = round(newValue, props.precision)
+        /**
+         * Update the values of the range (both start and end)
+         * @event update
+         * @param Number[] New value of the range
+         */
+        emit('update:range', [start.value, end.value])
+      }
+    }
+    function dragEndBound({detail: dx}) {
+      const newValue = snapValue(dx / rangeWidth())
+      // Ensure end value doesn't get too close to start value
+      if (newValue > start.value + props.minDistance) {
+        end.value = round(newValue, props.precision)
+        /**
+         * Update the values of the range (both start and end)
+         * @event update
+         * @param Number[] New value of the range
+         */
+        emit('update:range', [start.value, end.value])
+      }
+    }
+    function dragBounds({detail:dx}) {
+      const diff = snapValue(end.value - start.value)
+      const newValue = snapValue(dx / rangeWidth())
+      start.value = round(newValue, props.precision)
+      end.value = round(newValue + diff, props.precision)
+      /**
+       * Update the values of the range (both start and end)
+       * @event update
+       * @param Number[] New value of the range
+       */
+      emit('update:range', [start.value, end.value])
+    }
+    function valueWithUnit(value: number | string): string {
+      return typeof value === 'number' ? `${value}px` : `${value}`
+    }
+    return {
+      rangePickerBounds,
+      start,
+      end,
+      classList,
+      disabled,
+      overlayStyle,
+      boundsStyle,
+      rangeWidth,
+      startBoundStyle,
+      endBoundStyle,
+      dragStartBound,
+      dragEndBound,
+      dragBounds,
+      toggleMoving,
+      toggleResizing
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="range-picker" :class="classList">
+    <div class="range-picker__wrapper">
+      <slot />
+    </div>
+    <div v-show="!disabled" ref="rangePickerBounds" class="range-picker__bounds" :style="boundsStyle">
+      <div
+        v-draggable.relative
+        class="range-picker__bounds__overlay"
+        :style="overlayStyle"
+        @dragged="dragBounds"
+        @started="toggleMoving(true)"
+        @ended="toggleMoving(false)"
+      ></div>
+      <button
+        v-draggable
+        :style="startBoundStyle"
+        class="range-picker__bounds__start btn"
+        @dragged="dragStartBound"
+        @started="toggleResizing(true)"
+        @ended="toggleResizing(false)"
+      >
+        <fa icon="fa-grip-lines-vertical" fixed-width />
+      </button>
+      <button
+        v-draggable
+        class="range-picker__bounds__end btn"
+        :style="endBoundStyle"
+        @dragged="dragEndBound"
+        @started="toggleResizing(true)"
+        @ended="toggleResizing(false)"
+      >
+        <fa icon="fa-grip-lines-vertical" fixed-width />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '../styles/lib';
+
+.range-picker {
+  min-height: 1rem;
+  position: relative;
+
+  --bg: #{$component-active-bg};
+  --fg: #{$component-active-color};
+
+  @each $color, $value in $theme-colors {
+    &--#{$color} {
+      --bg: var(--#{$color}, #{$value});
+      --fg: #{color-yiq($value)};
+    }
+  }
+
+  &--rounded {
+    border-radius: $border-radius;
+  }
+
+  &--hover:hover &__bounds:after {
+    pointer-events: none;
+    content: '';
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    display: block;
+    background: var(--bg);
+    opacity: 0.1;
+    border-radius: inherit;
+  }
+
+  &--moving &__wrapper,
+  &--resizing &__wrapper{
+    &,
+    * {
+      pointer-events: none;
+    }
+  }
+
+  &--moving,
+  &__bounds__overlay,
+  &--moving &__bounds__start.btn:not(:disabled):not(.disabled),
+  &--moving &__bounds__end.btn:not(:disabled):not(.disabled) {
+    cursor: move;
+  }
+
+  &--resizing,
+  &--resizing &__bounds__overlay,
+  &__bounds__start.btn:not(:disabled):not(.disabled),
+  &__bounds__end.btn:not(:disabled):not(.disabled) {
+    cursor: col-resize;
+  }
+
+  &__bounds {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    border-radius: inherit;
+
+    &__overlay {
+      pointer-events: all;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      border-radius: inherit;
+      border: 1px solid var(--bg);
+      overflow: hidden;
+
+      &:after {
+        content: '';
+        width: 100%;
+        height: 100%;
+        display: block;
+        background: var(--bg);
+        opacity: 0.3;
+      }
+    }
+
+    &__start,
+    &__end {
+      pointer-events: all;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      font-size: 0.6rem;
+      width: 1.2rem;
+      height: 1.2rem;
+      line-height: 1.2rem;
+      padding: 0;
+      background: var(--bg);
+      color: var(--fg);
+      transform: translate(-50%, -50%);
+
+      &:hover,
+      &:active {
+        color: var(--fg);
+      }
+    }
+
+    &__start {
+      left: 0;
+    }
+
+    &__end {
+      left: 100%;
+    }
+  }
+}
+</style>

package/lib/components/ResponsiveIframe.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :id="iframeId" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { Parent } from 'pym.js'
+
+import { injectAssets } from '@/utils/assets'
+
+let iframeUniqueIdCounter = 0
+type StartsWithIcijIframe = `icij-iframe-${string}`
+type ResponsiveIframeData = { iframeId: StartsWithIcijIframe; pymParent: null | Parent }
+
+/**
+ * ResponsiveIframe
+ */
+export default defineComponent({
+  name: 'ResponsiveIframe',
+  props: {
+    /**
+     * URL of the generated iframe code.
+     */
+    url: {
+      type: String,
+      required: true
+    },
+    /**
+     * Option to pass to the constructor of the pymParent instance
+     */
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data(): ResponsiveIframeData {
+    return {
+      iframeId: `icij-iframe-${++iframeUniqueIdCounter}`,
+      pymParent: null
+    }
+  },
+  async mounted(): Promise<void> {
+    await injectAssets('https://pym.nprapps.org/pym.v1.min.js')
+    //@ts-ignore
+    this.pymParent = new window.pym.Parent(this.iframeId, this.url, this.options)
+  }
+})
+</script>

package/lib/components/ScaleLegend.vue

@@ -0,0 +1,230 @@
+<script lang="ts">
+import {isFunction, isString} from 'lodash'
+import * as d3 from 'd3'
+import * as scaleFunctions from 'd3-scale'
+import {defineComponent, PropType, ref, computed, onMounted, watch, nextTick, toRef} from 'vue'
+
+type ClassListLegend = { 'scale-legend--has-cursor': boolean }
+// eslint-disable-next-line no-unused-vars
+type ColorScaleFn = (v?: number) => string
+
+type ColorScale = ColorScaleFn | string
+// eslint-disable-next-line no-unused-vars
+type WidthScaleFn = (x: number) => string
+
+export default defineComponent({
+  name: 'ScaleLegend',
+  props: {
+    width: {
+      type: Number,
+      default: 150
+    },
+    height: {
+      type: Number,
+      default: 16
+    },
+    cursorValue: {
+      type: Number,
+      default: null
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    colorScale: {
+      type: [Function, String] as PropType<ColorScaleFn | string>,
+      default: 'scaleLinear',
+      validator(colorScale: ColorScale) {
+        return isFunction(colorScale) || (colorScale as string) in scaleFunctions
+      }
+    },
+    colorScaleEnd: {
+      type: String,
+      default() {
+        const computedStyle = window.getComputedStyle(document.body)
+        return computedStyle.getPropertyValue('--primary') || '#000'
+      }
+    },
+    colorScaleStart: {
+      type: String,
+      default: '#fff'
+    }
+  },
+  setup(props) {
+    const cursorWrapperOffset = ref(0)
+    const mounted = ref(false)
+    const el = ref<Element | null>(null)
+    const classList = computed((): ClassListLegend => {
+      return {
+        'scale-legend--has-cursor': hasCursor.value
+      }
+    })
+    const cursorValue = toRef(props.cursorValue)
+    onMounted(async () => {
+      await nextTick()
+      setCursorWrapperOffset()
+      setColorScaleCanvas()
+      mounted.value = true
+    })
+
+    const cursorLeft = computed((): string => {
+      const left = cursorLeftScale.value(props.cursorValue)
+      return isNaN(left) ? '0%' : `${left}%`
+    })
+    const colorScaleBaseCanvas = computed((): HTMLCanvasElement | null => {
+      return d3.create('canvas').attr('width', props.width).attr('height', props.height).node()
+    })
+    const colorScaleContext = computed((): CanvasRenderingContext2D | null => {
+      return colorScaleBaseCanvas.value?.getContext('2d') ?? null
+    })
+    const colorScaleBase64 = computed((): string | undefined => {
+      if (mounted.value) {
+        return colorScaleBaseCanvas.value?.toDataURL() ?? undefined
+      }
+      return undefined
+    })
+    const colorScaleWidthRange = computed((): number[] => {
+      return d3.range(1, props.width + 1)
+    })
+    const hasCursor = computed((): boolean => {
+      return props.cursorValue != null // double equal also tests undefined
+    })
+    const colorScaleFunction = computed((): ColorScaleFn => {
+      if (isString(props.colorScale)) {
+        // @ts-ignore
+        const fn: () => any = scaleFunctions[props.colorScale]
+        return fn().domain([props.min, props.max]).range([props.colorScaleStart, props.colorScaleEnd])
+      }
+      return props.colorScale
+    })
+    const cursorLeftScale = computed((): d3.ScaleLinear<number, number> => {
+      return d3.scaleLinear().domain([props.min, props.max]).range([0, 100]).interpolate(d3.interpolateRound)
+    })
+    const widthScaleColor = computed((): WidthScaleFn => {
+      return (x: number) => {
+        const value = widthScale.value(x)
+        return colorScaleFunction.value(value)
+      }
+    })
+    const widthScale = computed((): d3.ScaleLinear<number, number> => {
+      return d3.scaleLinear().domain([0, props.width]).range([props.min, props.max])
+    })
+
+    const formatNumber = d3.format(',')
+
+    function setCursorWrapperOffset(): void {
+      const cursor = el.value?.querySelector('.scale-legend__cursor')
+      if (cursor && el.value) {
+        const {x: cursorX, width: cursorWidth} = cursor.getBoundingClientRect()
+        const {x: legendX, width: legendWidth} = el.value.getBoundingClientRect()
+        const left = legendX - cursorX - 6
+        const right = legendX + legendWidth - (cursorX + cursorWidth) + 6
+        cursorWrapperOffset.value = Math.max(0, left) || Math.min(0, right)
+      } else {
+        cursorWrapperOffset.value = 0
+      }
+    }
+
+    function setColorScaleCanvas(): void {
+      if (!colorScaleContext.value) {
+        return
+      }
+      for (const x of colorScaleWidthRange.value) {
+        colorScaleContext.value.fillStyle = widthScaleColor.value(x)
+        colorScaleContext.value.fillRect(x, 0, 1, props.height)
+      }
+    }
+
+    watch(cursorValue,
+        async () => {
+          await nextTick()
+          setCursorWrapperOffset()
+        })
+
+    return {
+      classList,
+      colorScaleBase64,
+      cursorLeft,
+      cursorWrapperOffset,
+      formatNumber,
+      hasCursor,
+      //CD: function below are only uses in unit tests. use callable?
+      widthScale,
+      colorScaleFunction,
+      widthScaleColor,
+    }
+  }
+})
+</script>
+
+<template>
+  <div ref="el" :class="classList" class="scale-legend">
+    <div class="scale-legend__bound scale-legend__bound--min">
+      <slot name="legend-cursor-min" v-bind="{ min }">
+        {{ formatNumber(min) }}
+      </slot>
+    </div>
+    <img :height="height" :src="colorScaleBase64" :width="width" class="scale-legend__scale" alt="legend scale"/>
+    <div class="scale-legend__bound scale-legend__bound--max">
+      <slot name="legend-cursor-max" v-bind="{ max }">
+        {{ formatNumber(max) }}
+      </slot>
+    </div>
+    <div v-if="hasCursor" :style="{ left: cursorLeft }" class="scale-legend__cursor">
+      <div :style="{ transform: `translateX(${cursorWrapperOffset}px)` }" class="scale-legend__cursor__wrapper">
+        <slot name="cursor" v-bind="{ value: cursorValue }">
+          {{ formatNumber(cursorValue) }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+
+.scale-legend {
+  position: relative;
+  display: inline-block;
+
+  &__bound,
+  &__cursor {
+    position: absolute;
+    bottom: 100%;
+    font-size: 0.8rem;
+
+    &--min {
+      left: 0;
+    }
+
+    &--max {
+      right: 0;
+    }
+  }
+
+  .choropleth-map--has-cursor &__bound {
+    color: $text-muted;
+    opacity: 0.6;
+  }
+
+  &__cursor {
+    font-weight: bold;
+    transform: translateX(-50%);
+    left: 50%;
+
+    &:after {
+      content: '';
+      border: 5px solid transparent;
+      border-top-color: var(--dark, currentColor);
+      position: absolute;
+      left: 50%;
+      top: 100%;
+      transform: translateX(-50%);
+    }
+  }
+}
+</style>