@icij/murmur-next 4.0.1 → 4.0.4

package/lib/maps/ChoroplethMap.vue

@@ -1,12 +1,22 @@
 <script lang="ts">
-import {clamp, debounce, get, kebabCase, keys, max, min, pickBy, values} from 'lodash'
+import {
+  clamp,
+  debounce,
+  get,
+  kebabCase,
+  keys,
+  max,
+  min,
+  pickBy,
+  values
+} from 'lodash'
 
 import * as d3 from 'd3'
-import {geoRobinson} from 'd3-geo-projection'
-import type {GeoProjection} from 'd3-geo'
-import {geoGraticule} from 'd3-geo'
-import {feature} from 'topojson'
-import {GeometryCollection} from "topojson-specification";
+import { geoRobinson } from 'd3-geo-projection'
+import type { GeoProjection } from 'd3-geo'
+import { geoGraticule } from 'd3-geo'
+import { feature } from 'topojson'
+import { GeometryCollection } from 'topojson-specification'
 
 import {
   ComponentPublicInstance,
@@ -18,10 +28,15 @@ import {
   watch
 } from 'vue'
 
-import {ParentKey} from "@/keys";
-import {MapTransform, ParentMap} from "@/types";
+import { ParentKey } from '@/keys'
+import { MapTransform, ParentMap } from '@/types'
 import config from '../config'
-import {chartEmits, chartProps, getChartProps, useChart} from '@/composables/chart'
+import {
+  chartEmits,
+  chartProps,
+  getChartProps,
+  useChart
+} from '@/composables/chart'
 import ScaleLegend from '@/components/ScaleLegend.vue'
 
 export default defineComponent({
@@ -196,9 +211,8 @@ export default defineComponent({
     },
     ...chartProps()
   },
-  emits: ["click", 'reset', 'zoomed', ...chartEmits],
-  setup(props, {emit}) {
-
+  emits: ['click', 'reset', 'zoomed', ...chartEmits],
+  setup(props, { emit }) {
     const resizable = ref<ComponentPublicInstance<HTMLElement> | null>(null)
     const topojson = ref<any>(null)
     const topojsonPromise = ref<any | null>(null)
@@ -206,12 +220,25 @@ export default defineComponent({
     const featureCursor = ref<{ [cursor: string]: string } | null>(null)
     const featureZoom = ref<string | null>(null)
     const isLoaded = ref<boolean>(false)
-    const mapTransform = ref<MapTransform>({k: 1, x: 0, y: 0, rotateX: 0, rotateY: 0})
+    const mapTransform = ref<MapTransform>({
+      k: 1,
+      x: 0,
+      y: 0,
+      rotateX: 0,
+      rotateY: 0
+    })
     const debouncedDraw = debounce(function () {
       draw()
     }, 10)
 
-    const {loadedData} = useChart(resizable, getChartProps(props), {emit}, isLoaded, debouncedDraw, afterLoaded)
+    const { loadedData } = useChart(
+      resizable,
+      getChartProps(props),
+      { emit },
+      isLoaded,
+      debouncedDraw,
+      afterLoaded
+    )
 
     async function afterLoaded() {
       return new Promise<void>(async (resolve) => {
@@ -231,8 +258,8 @@ export default defineComponent({
       return [lng, lat]
     })
     const featureColorScaleEnd = computed(() => {
-      const defaultColor = '#852308';
-      const node = map.value?.node();
+      const defaultColor = '#852308'
+      const node = map.value?.node()
       if (isLoaded.value && node) {
         const computedStyle = window.getComputedStyle(node)
         return computedStyle.getPropertyValue('--primary') || defaultColor
@@ -242,8 +269,8 @@ export default defineComponent({
     const featureColorScaleStart = computed(() => {
       // `socialMode` is always different from null but accessing it will make
       // this computed property reactive.
-      const defaultColor = '#fff';
-      const node = map.value?.node();
+      const defaultColor = '#fff'
+      const node = map.value?.node()
       if (isLoaded.value && props.socialMode !== null && node) {
         const computedStyle = window.getComputedStyle(node)
         return computedStyle.getPropertyValue('color') || defaultColor
@@ -253,8 +280,10 @@ export default defineComponent({
     const featureColor = computed(() => {
       return (d: number) => {
         const id = get(d, props.topojsonObjectsPath)
-        const hasIdProp = loadedData.value && id in loadedData.value;
-        return hasIdProp ? featureColorScaleFunction.value(loadedData.value[id]) : undefined
+        const hasIdProp = loadedData.value && id in loadedData.value
+        return hasIdProp
+          ? featureColorScaleFunction.value(loadedData.value[id])
+          : undefined
       }
     })
     const featureColorScaleFunction = computed(() => {
@@ -270,9 +299,9 @@ export default defineComponent({
 
     const defaultFeatureColorScale = computed(() => {
       return d3
-          .scaleSequential()
-          .domain([Math.max(1, minValue.value), maxValue.value])
-          .range([featureColorScaleStart.value, featureColorScaleEnd.value])
+        .scaleSequential()
+        .domain([Math.max(1, minValue.value), maxValue.value])
+        .range([featureColorScaleStart.value, featureColorScaleEnd.value])
     })
     const initialFeaturePath = computed(() => {
       return featurePath.value.projection(initialMapProjection.value)
@@ -283,9 +312,10 @@ export default defineComponent({
 
     const initialMapProjection = computed(() => {
       if (props.spherical) {
-        return mapProjection.value.rotate(sphericalCenter.value)
-            .fitHeight(mapHeight.value, geojson.value)
-            .translate([mapWidth.value / 2, mapHeight.value / 2])
+        return mapProjection.value
+          .rotate(sphericalCenter.value)
+          .fitHeight(mapHeight.value, geojson.value)
+          .translate([mapWidth.value / 2, mapHeight.value / 2])
       }
       return mapProjection.value.center(planarCenter.value)
     })
@@ -299,9 +329,12 @@ export default defineComponent({
       return !!featureZoom.value
     })
 
-
     const geojson = 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)
     })
 
@@ -314,24 +347,27 @@ export default defineComponent({
     })
     const mapProjection = computed(() => {
       if (!props.projection) {
-        throw new Error("props.projection is " + props.projection)
+        throw new Error('props.projection is ' + props.projection)
       }
-      return props.projection().fitSize([mapWidth.value, mapHeight.value], geojson.value) as GeoProjection
+      return props
+        .projection()
+        .fitSize(
+          [mapWidth.value, mapHeight.value],
+          geojson.value
+        ) as GeoProjection
     })
     const rotatingMapProjection = computed(() => {
-      const {rotateX = null, rotateY = null} = mapTransform.value
+      const { rotateX = null, rotateY = null } = mapTransform.value
       let proj
       let text
       if (rotateX !== null && rotateY !== null) {
-        text="rotate"
-        proj= mapProjection.value.rotate([rotateX, rotateY]) ?? null
-      }else {
-        text="normal"
-        proj= mapProjection.value
-
+        text = 'rotate'
+        proj = mapProjection.value.rotate([rotateX, rotateY]) ?? null
+      } else {
+        text = 'normal'
+        proj = mapProjection.value
       }
       return proj
-
     })
 
     const mapCenter = computed(() => {
@@ -339,17 +375,20 @@ export default defineComponent({
     })
     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 mapSphericalZoom = computed(() => {
-      return d3.zoom(map.value).scaleExtent([props.zoomMin, props.zoomMax]).on('zoom', mapSphericalZoomed)
+      return d3
+        .zoom(map.value)
+        .scaleExtent([props.zoomMin, props.zoomMax])
+        .on('zoom', mapSphericalZoomed)
     })
     const mapRotate = computed(() => {
       return d3.drag(map.value).on('drag', mapRotated)
@@ -363,7 +402,13 @@ export default defineComponent({
     })
 
     const mapStyle = computed(() => {
-      const {k = 0, x = 0, y = 0, rotateX = 0, rotateY = 0} = mapTransform.value
+      const {
+        k = 0,
+        x = 0,
+        y = 0,
+        rotateX = 0,
+        rotateY = 0
+      } = mapTransform.value
       return {
         '--map-height': props.height,
         '--map-color': props.color,
@@ -376,13 +421,15 @@ export default defineComponent({
       }
     })
 
-    const map = computed((): d3.Selection<SVGElement, unknown, null, undefined> | null => {
-      const selection = d3.select(resizable.value).select<SVGElement>('svg')
-      if (!selection) {
-        throw new Error("Empty SVG selection")
+    const map = computed(
+      (): d3.Selection<SVGElement, unknown, null, undefined> | null => {
+        const selection = d3.select(resizable.value).select<SVGElement>('svg')
+        if (!selection) {
+          throw new Error('Empty SVG selection')
+        }
+        return selection
       }
-      return selection
-    })
+    )
     const maxValue = computed(() => {
       if (props.max !== null) {
         return props.max
@@ -399,11 +446,11 @@ export default defineComponent({
       return props.spherical ? '50% 50%' : '0 0'
     })
 
-    function setMapNodeSize({width, height}) {
-      const node = map.value?.node();
+    function setMapNodeSize({ width, height }) {
+      const node = map.value?.node()
       if (node) {
-        node["width"] = width
-        node["height"] = height
+        node['width'] = width
+        node['height'] = height
       }
     }
 
@@ -416,7 +463,7 @@ export default defineComponent({
 
     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
@@ -454,35 +501,38 @@ export default defineComponent({
     }
 
     function drawOutline() {
-      map.value?.select('.choropleth-map__main__outline')
-          .append('path')
-          .attr('d', initialFeaturePath.value({type: 'Sphere'}))
-          .attr('stroke', props.outlineColor)
+      map.value
+        ?.select('.choropleth-map__main__outline')
+        .append('path')
+        .attr('d', initialFeaturePath.value({ type: 'Sphere' }))
+        .attr('stroke', props.outlineColor)
     }
 
     function drawGraticule() {
-      map.value?.select('.choropleth-map__main__graticule')
-          .append('path')
-          .attr('d', initialGraticulePath.value)
-          .attr('stroke', props.graticuleColor)
+      map.value
+        ?.select('.choropleth-map__main__graticule')
+        .append('path')
+        .attr('d', initialGraticulePath.value)
+        .attr('stroke', props.graticuleColor)
     }
 
     function drawFeatures() {
-      const features = map.value?.select('.choropleth-map__main__features')
-          .selectAll('.choropleth-map__main__features__item')
-          .data(geojson.value.features)
-          .enter()
-          .append('path')
+      const features = map.value
+        ?.select('.choropleth-map__main__features')
+        .selectAll('.choropleth-map__main__features__item')
+        .data(geojson.value.features)
+        .enter()
+        .append('path')
       if (!features) {
-        throw new Error("features is undefined")
+        throw new Error('features is undefined')
       }
       features
-          .attr('class', featureClass)
-          .attr('d', initialFeaturePath.value)
-          .on('mouseover', featureMouseOver)
-          .on('mouseleave', featureMouseLeave)
-          .on('click', mapClicked)
-          .style('color', featureColor.value)
+        .attr('class', featureClass)
+        .attr('d', initialFeaturePath.value)
+        .on('mouseover', featureMouseOver)
+        .on('mouseleave', featureMouseLeave)
+        .on('click', mapClicked)
+        .style('color', featureColor.value)
     }
 
     function update() {
@@ -490,10 +540,11 @@ export default defineComponent({
       if (!map.value) {
         return
       }
-      map.value.selectAll('.choropleth-map__main__features__item')
-          .data(geojson.value.features)
-          .attr('class', featureClass)
-          .style('color', featureColor.value)
+      map.value
+        .selectAll('.choropleth-map__main__features__item')
+        .data(geojson.value.features)
+        .attr('class', featureClass)
+        .style('color', featureColor.value)
     }
 
     function featureClass(d: string) {
@@ -529,7 +580,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
@@ -537,7 +588,6 @@ export default defineComponent({
       return topojsonPromise.value
     }
 
-
     async function mapClicked(event: MouseEvent, d: number) {
       /**
        * A click on a feature
@@ -562,19 +612,23 @@ export default defineComponent({
       emit('zoomed', d)
     }
 
-    function mapSphericalZoomed({transform: {k}}: { transform: MapTransform }) {
+    function mapSphericalZoomed({
+      transform: { k }
+    }: {
+      transform: MapTransform
+    }) {
       const transform = `scale(${k})`
-      mapTransform.value = {...mapTransform.value, k}
+      mapTransform.value = { ...mapTransform.value, k }
       applyTransformToTrackedElements(transform)
     }
 
-    function mapZoomed({transform}: { transform: MapTransform }) {
+    function mapZoomed({ transform }: { transform: MapTransform }) {
       mapTransform.value = transform
       applyTransformToTrackedElements(transform)
     }
 
     function mapRotated(event: Event) {
-      const {yaw, pitch} = calculateRotation(event)
+      const { yaw, pitch } = calculateRotation(event)
       applyRotation(yaw, pitch)
     }
 
@@ -584,40 +638,54 @@ export default defineComponent({
       const [rotateX, rotateY] = mapProjection.value.rotate()
       const yaw = rotateX + event.dx * k
       const pitch = rotateY - event.dy * k
-      return {yaw, pitch}
+      return { yaw, pitch }
     }
 
     function applyTransformToTrackedElements(transform) {
-      map.value?.selectAll('.choropleth-map__main__tracked').attr('transform', transform)
+      map.value
+        ?.selectAll('.choropleth-map__main__tracked')
+        .attr('transform', transform)
     }
 
     function applyRotation(rotateX: number, rotateY: number) {
-      mapTransform.value = {...mapTransform.value, rotateX, rotateY}
-      const featuresPaths = initialFeaturePath.value.projection(rotatingMapProjection.value)
+      mapTransform.value = { ...mapTransform.value, rotateX, rotateY }
+      const featuresPaths = initialFeaturePath.value.projection(
+        rotatingMapProjection.value
+      )
       const graticulePaths = featuresPaths(graticuleLines.value)
-      map.value?.selectAll('g.choropleth-map__main__features path').attr('d', featuresPaths)
-      map.value?.selectAll('g.choropleth-map__main__graticule path').attr('d', graticulePaths)
-    }
-
-    function applyZoomIdentity(zoomIdentity, pointer: number[] | null = null, transitionDuration = props.transitionDuration) {
-      return map.value?.transition()
-          .duration(transitionDuration)
-          .call(mapZoom.value.transform, zoomIdentity, pointer)
-          .end()
+      map.value
+        ?.selectAll('g.choropleth-map__main__features path')
+        .attr('d', featuresPaths)
+      map.value
+        ?.selectAll('g.choropleth-map__main__graticule path')
+        .attr('d', graticulePaths)
+    }
+
+    function applyZoomIdentity(
+      zoomIdentity,
+      pointer: number[] | null = null,
+      transitionDuration = props.transitionDuration
+    ) {
+      return map.value
+        ?.transition()
+        .duration(transitionDuration)
+        .call(mapZoom.value.transform, zoomIdentity, pointer)
+        .end()
     }
 
     function reapplyZoom() {
-      mapTransform.value = {k: 1, x: 0, y: 0, rotateX: 0, rotateY: 0}
+      mapTransform.value = { k: 1, x: 0, y: 0, rotateX: 0, rotateY: 0 }
       applyZoomIdentity(d3.zoomIdentity)
       featureZoom.value = null
       emitResetEvent()
     }
 
     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
       emitResetEvent()
     }
@@ -628,48 +696,64 @@ export default defineComponent({
        * @event reset
        */
       emit('reset')
-
     }
 
     function setFeaturesClasses() {
-      map.value?.selectAll('.choropleth-map__main__features__item').attr('class', featureClass)
+      map.value
+        ?.selectAll('.choropleth-map__main__features__item')
+        .attr('class', featureClass)
     }
 
     function setFeatureZoom(d: any, pointer = [0, 0]) {
-
       featureZoom.value = get(d, props.topojsonObjectsPath)
       const [[x0, y0], [x1, y1]] = featurePath.value.bounds(d)
-      const scale = Math.min(8, 0.9 / Math.max((x1 - x0) / mapWidth.value, (y1 - y0) / mapHeight.value))
+      const scale = Math.min(
+        8,
+        0.9 / Math.max((x1 - x0) / mapWidth.value, (y1 - y0) / mapHeight.value)
+      )
       const zoomIdentity = d3.zoomIdentity
-          .translate(mapWidth.value / 2, mapHeight.value / 2)
-          .scale(scale)
-          .translate(-(x0 + x1) / 2, -(y0 + y1) / 2)
-      return map.value?.style('--map-scale', scale)
-          .transition()
-          .duration(props.transitionDuration)
-          .call(mapZoom.value?.transform, zoomIdentity, pointer)
-          .end()
+        .translate(mapWidth.value / 2, mapHeight.value / 2)
+        .scale(scale)
+        .translate(-(x0 + x1) / 2, -(y0 + y1) / 2)
+      return map.value
+        ?.style('--map-scale', scale)
+        .transition()
+        .duration(props.transitionDuration)
+        .call(mapZoom.value?.transform, zoomIdentity, pointer)
+        .end()
     }
 
     function calculateFeatureZoomIdentity(d: any) {
       const [[x0, y0], [x1, y1]] = featurePath.value.bounds(d)
-      const scale = Math.min(8, 0.9 / Math.max((x1 - x0) / mapWidth.value, (y1 - y0) / mapHeight.value))
+      const scale = Math.min(
+        8,
+        0.9 / Math.max((x1 - x0) / mapWidth.value, (y1 - y0) / mapHeight.value)
+      )
       const translateX = -(x0 + x1) / 2
       const translateY = -(y0 + y1) / 2
       return d3.zoomIdentity
-          .translate(mapWidth.value / 2, mapHeight.value / 2)
-          .scale(scale)
-          .translate(translateX, translateY)
+        .translate(mapWidth.value / 2, mapHeight.value / 2)
+        .scale(scale)
+        .translate(translateX, translateY)
     }
 
     function applyFeatureZoom(d: any, pointer = [0, 0]) {
       const zoomIdentity = calculateFeatureZoomIdentity(d)
       featureZoom.value = get(d, props.topojsonObjectsPath)
-      mapTransform.value = {k: zoomIdentity.k, x: zoomIdentity.x, y: zoomIdentity.y, rotateX: 0, rotateY: 0}
+      mapTransform.value = {
+        k: zoomIdentity.k,
+        x: zoomIdentity.x,
+        y: zoomIdentity.y,
+        rotateX: 0,
+        rotateY: 0
+      }
       return applyZoomIdentity(zoomIdentity, pointer)
     }
 
-    function applyZoom(zoom: number, transitionDuration = props.transitionDuration) {
+    function applyZoom(
+      zoom: number,
+      transitionDuration = props.transitionDuration
+    ) {
       const zoomScale = clamp(zoom, props.zoomMin, props.zoomMax)
       if (props.spherical) {
         return setSphericalZoom(zoomScale, transitionDuration)
@@ -680,34 +764,58 @@ export default defineComponent({
 
     function setSphericalZoom(zoomScale: number, transitionDuration: number) {
       const zoomIdentity = d3.zoomIdentity.scale(zoomScale)
-      mapTransform.value = {...mapTransform.value, k: zoomScale}
+      mapTransform.value = { ...mapTransform.value, k: zoomScale }
       return applyZoomIdentity(zoomIdentity, null, transitionDuration)
     }
 
     function setPlanarZoom(zoomScale: number, transitionDuration: number) {
-
       const [x, y] = mapProjection.value(mapCenter.value)
-      const [translateX, translateY] = [mapWidth.value / 2 - zoomScale * x, mapHeight.value / 2 - zoomScale * y]
-      const zoomIdentity = d3.zoomIdentity.translate(translateX, translateY).scale(zoomScale)
-      mapTransform.value = {k: zoomScale, x: translateX, y: translateY, rotateX: 0, rotateY: 0}
+      const [translateX, translateY] = [
+        mapWidth.value / 2 - zoomScale * x,
+        mapHeight.value / 2 - zoomScale * y
+      ]
+      const zoomIdentity = d3.zoomIdentity
+        .translate(translateX, translateY)
+        .scale(zoomScale)
+      mapTransform.value = {
+        k: zoomScale,
+        x: translateX,
+        y: translateY,
+        rotateX: 0,
+        rotateY: 0
+      }
       return applyZoomIdentity(zoomIdentity, null, transitionDuration)
     }
 
-    watch(() => props.socialMode, () => {
-      draw()
-    })
-    watch(() => props.data, () => {
-      update()
-    })
-    watch(() => featureZoom.value, () => {
-      setFeaturesClasses()
-    })
-    watch(() => featureCursor.value, () => {
-      setFeaturesClasses()
-    })
+    watch(
+      () => props.socialMode,
+      () => {
+        draw()
+      }
+    )
+    watch(
+      () => props.data,
+      () => {
+        update()
+      }
+    )
+    watch(
+      () => featureZoom.value,
+      () => {
+        setFeaturesClasses()
+      }
+    )
+    watch(
+      () => featureCursor.value,
+      () => {
+        setFeaturesClasses()
+      }
+    )
 
     provide<ParentMap>(ParentKey, {
-      mapRect, mapTransform, rotatingMapProjection
+      mapRect,
+      mapTransform,
+      rotatingMapProjection
     })
 
     return {
@@ -738,31 +846,58 @@ export default defineComponent({
 })
 </script>
 <template>
-  <div ref="resizable" :class="mapClass" :style="mapStyle" class="choropleth-map" @click="draw">
-    <svg :viewbox="`0 0 ${mapRect.width} ${mapRect.height}`" class="choropleth-map__main">
-      <pattern id="diagonalHatch" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse" width="1">
-        <rect :fill="featureColorScaleEnd" height="1" width="1"/>
-        <line :style="{ stroke: featureColorScaleStart, strokeWidth: 1 }" x1="0" x2="0" y1="0" y2="1"/>
+  <div
+    ref="resizable"
+    :class="mapClass"
+    :style="mapStyle"
+    class="choropleth-map"
+    @click="draw"
+  >
+    <svg
+      :viewbox="`0 0 ${mapRect.width} ${mapRect.height}`"
+      class="choropleth-map__main"
+    >
+      <pattern
+        id="diagonalHatch"
+        height="1"
+        patternTransform="rotate(45 0 0)"
+        patternUnits="userSpaceOnUse"
+        width="1"
+      >
+        <rect :fill="featureColorScaleEnd" height="1" width="1" />
+        <line
+          :style="{ stroke: featureColorScaleStart, strokeWidth: 1 }"
+          x1="0"
+          x2="0"
+          y1="0"
+          y2="1"
+        />
       </pattern>
-      <g :transform-origin="transformOrigin" class="choropleth-map__main__tracked">
+      <g
+        :transform-origin="transformOrigin"
+        class="choropleth-map__main__tracked"
+      >
         <g v-if="graticule" class="choropleth-map__main__graticule"></g>
         <g class="choropleth-map__main__features"></g>
         <g v-if="outline" class="choropleth-map__main__outline"></g>
-        <slot v-if="isReady"/>
+        <slot v-if="isReady" />
       </g>
     </svg>
     <scale-legend
-        v-if="!hideLegend && isReady"
-        :color-scale="featureColorScaleFunction"
-        :color-scale-end="featureColorScaleEnd"
-        :color-scale-start="featureColorScaleStart"
-        :cursor-value="cursorValue"
-        :max="maxValue"
-        :min="minValue"
-        class="choropleth-map__legend"
+      v-if="!hideLegend && isReady"
+      :color-scale="featureColorScaleFunction"
+      :color-scale-end="featureColorScaleEnd"
+      :color-scale-start="featureColorScaleStart"
+      :cursor-value="cursorValue"
+      :max="maxValue"
+      :min="minValue"
+      class="choropleth-map__legend"
     >
       <template #cursor="{ value }">
-        <slot name="legend-cursor" v-bind="{ value, identifier: featureCursor }"/>
+        <slot
+          name="legend-cursor"
+          v-bind="{ value, identifier: featureCursor }"
+        />
       </template>
     </scale-legend>
   </div>
@@ -799,7 +934,10 @@ export default defineComponent({
       stroke: currentColor;
       stroke-width: calc(1px / var(--map-scale, 1));
       fill: currentColor;
-      transition: opacity 750ms, filter 750ms, fill 750ms;
+      transition:
+        opacity 750ms,
+        filter 750ms,
+        fill 750ms;
 
       .choropleth-map__main__features__item--empty {
         opacity: 0.8;
@@ -810,7 +948,8 @@ export default defineComponent({
         }
       }
 
-      .choropleth-map--has-zoom &:not(.choropleth-map__main__features__item--zoomed) {
+      .choropleth-map--has-zoom
+        &:not(.choropleth-map__main__features__item--zoomed) {
         filter: grayscale(90%);
       }
     }