@icij/murmur-next 4.0.0 → 4.0.3

package/lib/maps/ChoroplethMapAnnotation.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import {values} from 'lodash'
-import {geoDistance, GeoProjection} from 'd3-geo'
-import {computed, defineComponent, inject, toRaw} from "vue";
-import {ParentKey} from "@/keys";
-import {ParentMap} from "@/types";
+import { values } from 'lodash'
+import { geoDistance, GeoProjection } from 'd3-geo'
+import { computed, defineComponent, inject, toRaw } from 'vue'
+import { ParentKey } from '@/keys'
+import { ParentMap } from '@/types'
 
 export const PLACEMENTS = {
   TOP: 'top',
@@ -87,21 +87,21 @@ export default defineComponent({
     placement: {
       type: String,
       default: null,
-      validator: (p: null | string) => p === null || values(PLACEMENTS).includes(p)
+      validator: (p: null | string) =>
+        p === null || values(PLACEMENTS).includes(p)
     }
   },
   setup(props) {
-
     const parent = inject<ParentMap>(ParentKey)
 
     if (!parent) {
-      throw new Error("parent is undefined")
+      throw new Error('parent is undefined')
     }
 
     const mapRect = parent.mapRect
     const mapTransform1 = parent.mapTransform
     const rotatingMapProjection = parent.rotatingMapProjection
-    const mapTransform= computed(()=>{
+    const mapTransform = computed(() => {
       return toRaw(parent.mapTransform)
     })
 
@@ -112,7 +112,7 @@ export default defineComponent({
       if (isBottom.value) {
         return 0
       }
-      return 0 - (props.height) / 2
+      return 0 - props.height / 2
     })
     const isTop = computed(() => {
       return [
@@ -143,7 +143,7 @@ export default defineComponent({
 
     const position = computed(() => {
       const [x, y] = projection.value(center.value)
-      return {x, y}
+      return { x, y }
     })
 
     const mapK = computed(() => {
@@ -157,7 +157,7 @@ export default defineComponent({
       if (isLeft.value) {
         return 0 - props.width
       }
-      return 0 - (props.width) / 2
+      return 0 - props.width / 2
     })
 
     const transform = computed(() => {
@@ -241,7 +241,10 @@ export default defineComponent({
         if (!projection.value?.invert) {
           return 0
         }
-        const mapCenter = projection.value.invert([mapRect.value.width / 2, mapRect.value.height / 2])
+        const mapCenter = projection.value.invert([
+          mapRect.value.width / 2,
+          mapRect.value.height / 2
+        ])
         return geoDistance(center.value, mapCenter)
       } catch (_) {
         return 0
@@ -251,7 +254,6 @@ export default defineComponent({
       return geoDistanceFromCenter.value <= props.geoDistanceThreshold
     })
 
-
     return {
       classList,
       x,
@@ -273,16 +275,25 @@ export default defineComponent({
       mapTransform
     }
   }
-
 })
 </script>
 
 <template>
   <g :class="classList" class="choropleth-map-annotation">
-    <foreignObject :height="height" :transform="transform" :width="width" :x="x" :y="y">
-      <div v-show="isVisible" :style="wrapperStyle" class="choropleth-map-annotation__wrapper">
+    <foreignObject
+      :height="height"
+      :transform="transform"
+      :width="width"
+      :x="x"
+      :y="y"
+    >
+      <div
+        v-show="isVisible"
+        :style="wrapperStyle"
+        class="choropleth-map-annotation__wrapper"
+      >
         <div class="choropleth-map-annotation__wrapper__content">
-          <slot/>
+          <slot />
         </div>
       </div>
     </foreignObject>

package/lib/maps/SymbolMap.vue

@@ -1,15 +1,39 @@
 <script lang="ts">
 import * as d3 from 'd3'
-import {GeoPermissibleObjects} from 'd3'
-import {geoRobinson} from 'd3-geo-projection'
-import {feature} from 'topojson'
-import {debounce, find, get, groupBy, isFunction, kebabCase, keys, pickBy, set, uniq, uniqueId} from 'lodash'
+import { GeoPermissibleObjects } from 'd3'
+import { geoRobinson } from 'd3-geo-projection'
+import { feature } from 'topojson'
+import {
+  debounce,
+  find,
+  get,
+  groupBy,
+  isFunction,
+  kebabCase,
+  keys,
+  pickBy,
+  set,
+  uniq,
+  uniqueId
+} from 'lodash'
 
 import config from '../config'
 import OrdinalLegend from '../components/OrdinalLegend.vue'
-import {chartEmits, chartProps, getChartProps, useChart} from "@/composables/chart.js";
-import {ComponentPublicInstance, computed, defineComponent, PropType, ref, watch} from "vue";
-import {GeometryCollection} from "topojson-specification"
+import {
+  chartEmits,
+  chartProps,
+  getChartProps,
+  useChart
+} from '@/composables/chart.js'
+import {
+  ComponentPublicInstance,
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  watch
+} from 'vue'
+import { GeometryCollection } from 'topojson-specification'
 
 export default defineComponent({
   components: {
@@ -55,7 +79,7 @@ export default defineComponent({
     markerPath: {
       type: [String, Function],
       default:
-          'M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z'
+        'M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z'
     },
     markerColor: {
       type: String,
@@ -109,8 +133,8 @@ export default defineComponent({
     },
     ...chartProps()
   },
-  emits: ["click", 'reset', 'zoomed', ...chartEmits],
-  setup(props, {emit}) {
+  emits: ['click', 'reset', 'zoomed', ...chartEmits],
+  setup(props, { emit }) {
     const el = ref<ComponentPublicInstance<HTMLElement> | null>(null)
     const topojson = ref<any>(null)
     const topojsonPromise = ref<Promise<void> | null>(null)
@@ -124,7 +148,14 @@ export default defineComponent({
       draw()
     }, 10)
 
-    const {loadedData} = useChart(el, getChartProps(props), {emit}, isLoaded, debouncedDraw, afterLoaded)
+    const { loadedData } = useChart(
+      el,
+      getChartProps(props),
+      { emit },
+      isLoaded,
+      debouncedDraw,
+      afterLoaded
+    )
 
     function afterLoaded() {
       return new Promise<void>(async (resolve) => {
@@ -151,7 +182,11 @@ export default defineComponent({
       return props.fitToMarkers ? markersGeojson.value : featuresGeojson.value
     })
     const featuresGeojson = computed(() => {
-      const object = get(topojson.value, ['objects', props.topojsonObjects], null)
+      const object = get(
+        topojson.value,
+        ['objects', props.topojsonObjects],
+        null
+      )
       return feature(topojson.value, object as GeometryCollection)
     })
     const markersGeojson = computed(() => {
@@ -164,7 +199,7 @@ export default defineComponent({
       }
     })
     const coordinates = computed(() => {
-      return (loadedData.value || []).map(({longitude, latitude}) => {
+      return (loadedData.value || []).map(({ longitude, latitude }) => {
         return [longitude, latitude]
       })
     })
@@ -180,25 +215,25 @@ export default defineComponent({
       }
     })
     const mapProjection = computed(() => {
-      const {height, width} = mapRect.value
+      const { height, width } = mapRect.value
       const padding = props.mapPadding
       return geoRobinson().fitExtent(
-          [
-            [padding, padding],
-            [width - padding, height - padding]
-          ],
-          geojson.value
+        [
+          [padding, padding],
+          [width - padding, height - padding]
+        ],
+        geojson.value
       )
     })
     const mapZoom = computed(() => {
       return d3
-          .zoom()
-          .scaleExtent([props.zoomMin, props.zoomMax])
-          .translateExtent([
-            [0, 0],
-            [mapWidth.value, mapHeight.value]
-          ])
-          .on('zoom', mapZoomed)
+        .zoom()
+        .scaleExtent([props.zoomMin, props.zoomMax])
+        .translateExtent([
+          [0, 0],
+          [mapWidth.value, mapHeight.value]
+        ])
+        .on('zoom', mapZoomed)
     })
     const mapHeight = computed(() => {
       return mapRect.value.height
@@ -207,9 +242,11 @@ export default defineComponent({
       return mapRect.value.width
     })
     const map = computed(() => {
-      const selection = d3.select(el.value).select<SVGElement>('.symbol-map__main');
+      const selection = d3
+        .select(el.value)
+        .select<SVGElement>('.symbol-map__main')
       if (!selection) {
-        throw new Error("Empty SVG selection")
+        throw new Error('Empty SVG selection')
       }
       return selection
     })
@@ -237,29 +274,26 @@ export default defineComponent({
         return get(d, props.categoryObjectsPath)
       })
       return Object.entries(categories).map((entry) => {
-        const [label, [{color: firstColor}]] = entry
+        const [label, [{ color: firstColor }]] = entry
         const color = firstColor || categoryColor(label)
-        return {label, color}
+        return { label, color }
       })
     })
     const hasTooltip = computed(() => {
       return !props.hideTooltip && loadedData.value && markerCursor.value
     })
     const tooltipTarget = computed(() => {
-          if (hasTooltip.value) {
-            return markerId(markerCursor.value)
-          }
-          return null
-        }
-    )
-
+      if (hasTooltip.value) {
+        return markerId(markerCursor.value)
+      }
+      return null
+    })
 
     //methods
 
-
     function prepare() {
       if (!map.value) {
-        throw new Error("Map is null")
+        throw new Error('Map is null')
       }
       // Set the map sizes
       mapRect.value = map.value.node()?.getBoundingClientRect() as DOMRect
@@ -287,24 +321,25 @@ export default defineComponent({
     function draw() {
       prepare()
       if (!map.value) {
-        throw new Error("map is not defined")
+        throw new Error('map is not defined')
       }
       update()
       // Bind a group for marker paths
-      map.value?.append('g')
-          .attr('class', 'symbol-map__main__markers')
-          .selectAll('.symbol-map__main__markers__item')
-          .data(loadedDataWithIds.value)
-          .enter()
-          .append('g')
-          .attr('id', markerId)
-          .attr('class', markerClass)
-          .attr('transform', markerTransform)
-          .append('path')
-          .on('mouseover', markerMouseOver)
-          .on('mouseleave', markerMouseLeave)
-          .attr('d', markerPathFunction)
-          .attr('fill', markerColorFunction)
+      map.value
+        ?.append('g')
+        .attr('class', 'symbol-map__main__markers')
+        .selectAll('.symbol-map__main__markers__item')
+        .data(loadedDataWithIds.value)
+        .enter()
+        .append('g')
+        .attr('id', markerId)
+        .attr('class', markerClass)
+        .attr('transform', markerTransform)
+        .append('path')
+        .on('mouseover', markerMouseOver)
+        .on('mouseleave', markerMouseLeave)
+        .attr('d', markerPathFunction)
+        .attr('fill', markerColorFunction)
       prepareZoom()
     }
 
@@ -325,7 +360,7 @@ export default defineComponent({
     async function loadTopojson() {
       if (!topojsonPromise.value) {
         if (!props.topojsonUrl?.length) {
-          throw new Error("Empty topojsonUrl")
+          throw new Error('Empty topojsonUrl')
         }
         topojsonPromise.value = d3.json(props.topojsonUrl)
         topojson.value = await topojsonPromise.value
@@ -333,11 +368,12 @@ export default defineComponent({
       return topojsonPromise.value
     }
 
-    function mapZoomed({transform}) {
+    function mapZoomed({ transform }) {
       markerCursor.value = null
-      map.value?.style('--map-scale', transform.k)
-          .selectAll('.symbol-map__main__features, .symbol-map__main__markers')
-          .attr('transform', transform)
+      map.value
+        ?.style('--map-scale', transform.k)
+        .selectAll('.symbol-map__main__features, .symbol-map__main__markers')
+        .attr('transform', transform)
     }
 
     function markerBoundingClientRect(d) {
@@ -380,15 +416,24 @@ export default defineComponent({
     }
 
     function markerPathFunction(d) {
-      return isFunction(props.markerPath) ? props.markerPath(d) : props.markerPath
+      return isFunction(props.markerPath)
+        ? props.markerPath(d)
+        : props.markerPath
     }
 
-    function markerColorFunction({color, ...d}) {
-      return color || (isFunction(props.markerColor) ? props.markerColor(d) : props.markerColor)
+    function markerColorFunction({ color, ...d }) {
+      return (
+        color ||
+        (isFunction(props.markerColor)
+          ? props.markerColor(d)
+          : props.markerColor)
+      )
     }
 
     function markerWidthFunction(d) {
-      return isFunction(props.markerWidth) ? props.markerWidth(d) : props.markerWidth
+      return isFunction(props.markerWidth)
+        ? props.markerWidth(d)
+        : props.markerWidth
     }
 
     function markerLabel(d) {
@@ -396,8 +441,8 @@ export default defineComponent({
     }
 
     function markerTransform(d) {
-      const {latitude, longitude} = d
-      const {height, width} = markerBoundingClientRect(d)
+      const { latitude, longitude } = d
+      const { height, width } = markerBoundingClientRect(d)
       const [x, y] = mapProjection.value([longitude, latitude])
       const scale = markerWidthFunction(d) / Math.max(1, width)
       const cx = x - (width / 2) * scale
@@ -405,7 +450,10 @@ export default defineComponent({
       return `translate(${cx}, ${cy}) scale(${scale})`
     }
 
-    async function featureClicked(event: MouseEvent, d: d3.GeoPermissibleObjects) {
+    async function featureClicked(
+      event: MouseEvent,
+      d: d3.GeoPermissibleObjects
+    ) {
       /**
        * A click on a feature
        * @event click
@@ -429,10 +477,11 @@ export default defineComponent({
     }
 
     function resetZoom(_event: MouseEvent, _d: number) {
-      map.value?.style('--map-scale', 1)
-          .transition()
-          .duration(props.transitionDuration)
-          .call(mapZoom.value.transform, d3.zoomIdentity)
+      map.value
+        ?.style('--map-scale', 1)
+        .transition()
+        .duration(props.transitionDuration)
+        .call(mapZoom.value.transform, d3.zoomIdentity)
       featureZoom.value = null
 
       /**
@@ -443,7 +492,9 @@ export default defineComponent({
     }
 
     function setMarkersClasses() {
-      map.value?.selectAll('.symbol-map__main__markers__item').attr('class', markerClass)
+      map.value
+        ?.selectAll('.symbol-map__main__markers__item')
+        .attr('class', markerClass)
     }
 
     function setFeatureZoom(d: GeoPermissibleObjects, pointer = [0, 0]) {
@@ -452,20 +503,24 @@ export default defineComponent({
       }
       featureZoom.value = get(d, props.topojsonObjectsPath)
 
-      const {height, width} = mapRect.value
+      const { height, width } = mapRect.value
       const [[x0, y0], [x1, y1]] = featurePath.value.bounds(d)
-      const scale = Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height))
+      const scale = Math.min(
+        8,
+        0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)
+      )
       const x = -(x0 + x1) / 2
       const y = -(y0 + y1) / 2
       const zoomIdentity = d3.zoomIdentity
-          .translate(width / 2, height / 2)
-          .scale(scale)
-          .translate(x, y)
-      return map.value?.style('--map-scale', scale)
-          .transition()
-          .duration(props.transitionDuration)
-          .call(mapZoom.value?.transform, zoomIdentity, pointer)
-          .end()
+        .translate(width / 2, height / 2)
+        .scale(scale)
+        .translate(x, y)
+      return map.value
+        ?.style('--map-scale', scale)
+        .transition()
+        .duration(props.transitionDuration)
+        .call(mapZoom.value?.transform, zoomIdentity, pointer)
+        .end()
     }
 
     function update() {
@@ -474,34 +529,47 @@ export default defineComponent({
         return
       }
       // Bind a group for geojson features to path
-      map.value?.append('g')
-          .attr('class', 'symbol-map__main__features')
-          .selectAll('.symbol-map__main__features__item')
-          .data(featuresGeojson.value.features)
-          // Add the path with the correct class
-          .enter()
-          .append('path')
-          .attr('class', featureClass)
-          .attr('d', featurePath.value)
-          .on('click', featureClicked)
-          .style('color', props.featureColor)
+      map.value
+        ?.append('g')
+        .attr('class', 'symbol-map__main__features')
+        .selectAll('.symbol-map__main__features__item')
+        .data(featuresGeojson.value.features)
+        // Add the path with the correct class
+        .enter()
+        .append('path')
+        .attr('class', featureClass)
+        .attr('d', featurePath.value)
+        .on('click', featureClicked)
+        .style('color', props.featureColor)
     }
 
     //watch
-    watch(() => props.data, () => {
-      //draw()
-      update()
-    })
-    watch(() => props.socialMode, () => {
-      draw()
-    })
-    watch(() => markerCursor.value, () => {
-      setMarkersClasses()
-    })
+    watch(
+      () => props.data,
+      () => {
+        //draw()
+        update()
+      }
+    )
+    watch(
+      () => props.socialMode,
+      () => {
+        draw()
+      }
+    )
+    watch(
+      () => markerCursor.value,
+      () => {
+        setMarkersClasses()
+      }
+    )
 
-    watch(() => categoryHighlight.value, () => {
-      setMarkersClasses()
-    })
+    watch(
+      () => categoryHighlight.value,
+      () => {
+        setMarkersClasses()
+      }
+    )
 
     return {
       el,
@@ -516,36 +584,35 @@ export default defineComponent({
     }
   }
 })
-
 </script>
 
 <template>
   <div ref="el" :class="mapClass" class="symbol-map">
     <slot name="legend" v-bind="{ legendData }">
       <ordinal-legend
-          v-if="!hideLegend && legendData"
-          v-model:highlight="categoryHighlight"
-          :data="legendData"
-          :horizontal="horizontalLegend"
-          :marker-path="markerPath"
-          category-objects-path="label"
+        v-if="!hideLegend && legendData"
+        v-model:highlight="categoryHighlight"
+        :data="legendData"
+        :horizontal="horizontalLegend"
+        :marker-path="markerPath"
+        category-objects-path="label"
       >
         <template #marker="d">
-          <slot name="legend-marker" v-bind="d"/>
+          <slot name="legend-marker" v-bind="d" />
         </template>
         <template #label="d">
-          <slot name="legend-label" v-bind="d"/>
+          <slot name="legend-label" v-bind="d" />
         </template>
       </ordinal-legend>
     </slot>
-    <svg class="symbol-map__main"/>
+    <svg class="symbol-map__main" />
     <b-tooltip
-        v-if="tooltipTarget"
-        ref="marker-tooltip"
-        :custom-class="tooltipCustomClass"
-        :fallback-placement="tooltipFallbackPlacement"
-        :placement="tooltipPlacement"
-        :target="tooltipTarget"
+      v-if="tooltipTarget"
+      ref="marker-tooltip"
+      :custom-class="tooltipCustomClass"
+      :fallback-placement="tooltipFallbackPlacement"
+      :placement="tooltipPlacement"
+      :target="tooltipTarget"
     >
       <slot name="tooltip" v-bind="{ markerCursor, ...markerCursorValue }">
         {{ markerLabel(markerCursorValue) }}
@@ -561,7 +628,9 @@ export default defineComponent({
 .symbol-map {
   $muted-item-opacity: 0.2;
   $muted-item-filter: grayscale(30%) brightness(10%);
-  $muted-item-transition: opacity 0.2s, filter 0.2s;
+  $muted-item-transition:
+    opacity 0.2s,
+    filter 0.2s;
 
   $colors: $primary, $info, $warning, $danger;
   $quantile: 2;
@@ -590,7 +659,9 @@ export default defineComponent({
       stroke: currentColor;
       stroke-width: calc(1px / var(--map-scale, 1));
       fill: currentColor;
-      transition: opacity 750ms, filter 750ms;
+      transition:
+        opacity 750ms,
+        filter 750ms;
     }
 
     &:deep(.symbol-map__main__markers) {

package/lib/shims-bootstrap-vue.d.ts

@@ -2,4 +2,4 @@ declare module 'bootstrap-vue/esm/components/dropdown/dropdown-item'
 declare module 'bootstrap-vue/esm/components/modal/modal'
 declare module 'bootstrap-vue/esm/components/nav/nav-item-dropdown'
 declare module 'bootstrap-vue/esm/components/popover/popover'
-declare module 'bootstrap-vue/esm/components/tooltip/tooltip'
+declare module 'bootstrap-vue/esm/components/tooltip/tooltip'

package/lib/shims-vue.d.ts

@@ -8,7 +8,7 @@ declare module 'vue' {
 }
 
 declare module '*.vue' {
-  import type {DefineComponent} from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }

package/lib/styles/functions.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 /*------------------------
 mixin that calculates if text needs to be light or dark
 depending on the background color passed.
@@ -8,13 +8,17 @@ Color brightness is determined by the following formula:
 ------------------------*/
 
 @function text-contrast($n) {
-  $color-brightness: round((red($n) * 299) + (green($n) * 587) + math.div(blue($n) * 114, 1000));
-  $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + math.div(blue(#ffffff) * 114, 1000));
+  $color-brightness: round(
+    (red($n) * 299) + (green($n) * 587) + math.div(blue($n) * 114, 1000)
+  );
+  $light-color: round(
+    (red(#ffffff) * 299) + (green(#ffffff) * 587) +
+      math.div(blue(#ffffff) * 114, 1000)
+  );
 
-  @if abs($color-brightness) < ($light-color * 0.5){
+  @if abs($color-brightness) < ($light-color * 0.5) {
     @return white;
-  }
-  @else {
+  } @else {
     @return black;
   }
 }