@unovis/ts 1.1.1-beta.6 → 1.1.1-beta.7

package/src/components/leaflet-map/modules/map.ts

@@ -0,0 +1,178 @@
+import type L from 'leaflet'
+import { select, Selection } from 'd3-selection'
+import { GeoJSONSource, Map } from 'maplibre-gl'
+import { feature } from 'topojson-client'
+
+// Types
+import { GenericDataRecord } from 'types/data'
+
+// Config
+import { LeafletMapConfig } from '../config'
+
+// Local Types
+
+// Utils
+import { constraintMapView, mapboxglWheelEventThrottled } from '../renderer/mapboxgl-utils'
+
+// Styles
+import * as s from '../style'
+import { LeafletMapRenderer } from '../types'
+
+export const initialMapCenter: L.LatLngExpression = [36, 14]
+export const initialMapZoom = 1.9
+
+export function updateTopoJson<T extends GenericDataRecord> (maplibreMap: Map, config: LeafletMapConfig<T>): void {
+  const { topoJSONLayer } = config
+
+  if (topoJSONLayer.sources) {
+    const featureObject = topoJSONLayer.sources?.objects?.[topoJSONLayer.featureName]
+    if (featureObject) {
+      const mapSource = maplibreMap.getSource(topoJSONLayer.featureName) as GeoJSONSource
+      const featureCollection = feature(topoJSONLayer.sources, featureObject)
+      if (mapSource) {
+        mapSource.setData(featureCollection)
+      } else {
+        maplibreMap.addSource(topoJSONLayer.featureName, { type: 'geojson', data: featureCollection })
+      }
+    }
+  }
+
+  const fillLayer = maplibreMap.getLayer(`${topoJSONLayer.featureName}-area`)
+  if (topoJSONLayer.fillProperty) {
+    if (!fillLayer) {
+      maplibreMap.addLayer({
+        id: `${topoJSONLayer.featureName}-area`,
+        type: 'fill',
+        source: topoJSONLayer.featureName,
+        paint: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          'fill-antialias': false,
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          'fill-opacity': topoJSONLayer.fillOpacity,
+        },
+      })
+    }
+    maplibreMap.setPaintProperty(`${topoJSONLayer.featureName}-area`, 'fill-color', [
+      'case',
+      ['!', ['has', topoJSONLayer.fillProperty]],
+      'rgba(255, 255, 255, 0)',
+      ['get', topoJSONLayer.fillProperty],
+    ])
+  } else if (fillLayer) maplibreMap.removeLayer(`${topoJSONLayer.featureName}-area`)
+
+  const strokeLayer = maplibreMap.getLayer(`${topoJSONLayer.featureName}-stroke`)
+  if (topoJSONLayer.strokeProperty) {
+    if (!strokeLayer) {
+      maplibreMap.addLayer({
+        id: `${topoJSONLayer.featureName}-stroke`,
+        type: 'line',
+        source: topoJSONLayer.featureName,
+        paint: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          'line-opacity': topoJSONLayer.strokeOpacity,
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          'line-width': topoJSONLayer.strokeWidth,
+        },
+      })
+    }
+    maplibreMap.setPaintProperty(`${topoJSONLayer.featureName}-stroke`, 'line-color', [
+      'case',
+      ['!', ['has', topoJSONLayer.strokeProperty]],
+      'rgba(255, 255, 255, 0)',
+      ['get', topoJSONLayer.strokeProperty],
+    ])
+  } else if (strokeLayer) { maplibreMap.removeLayer(`${topoJSONLayer.featureName}-stroke`) }
+}
+
+export async function setupMap<T extends GenericDataRecord> (mapContainer: HTMLElement, config: LeafletMapConfig<T>): Promise<{
+  leaflet: L.Map;
+  layer: L.Layer;
+  svgOverlay: Selection<SVGSVGElement, unknown, null, undefined>;
+  svgGroup: Selection<SVGGElement, unknown, SVGElement, undefined>;
+}> {
+  const { style, renderer, topoJSONLayer } = config
+  const leaflet = await import('leaflet')
+  const L = leaflet.default
+
+  if (!style) {
+    console.error('Unovis | Leaflet Map: Please provide style settings in the map configuration object')
+    return
+  }
+
+  const leafletMap = L.map(mapContainer, {
+    scrollWheelZoom: renderer === LeafletMapRenderer.Raster, // We define custom scroll event for MapboxGL to enabling smooth zooming
+    zoomControl: false,
+    zoomDelta: renderer === LeafletMapRenderer.Raster ? 1 : 0.5,
+    zoomSnap: renderer === LeafletMapRenderer.Raster ? 1 : 0,
+    attributionControl: true,
+    center: initialMapCenter,
+    zoom: initialMapZoom,
+    minZoom: Math.sqrt(mapContainer.offsetWidth) / 17,
+    maxZoom: 23,
+    maxBounds: L.latLngBounds(
+      [-75, -290],
+      [85, 290]
+    ),
+    maxBoundsViscosity: 1,
+  })
+
+  for (const attr of config.attribution) {
+    leafletMap.attributionControl.addAttribution(attr)
+  }
+
+  let layer: L.Layer
+  let maplibreMap = null
+
+  switch (renderer) {
+    case LeafletMapRenderer.MapLibre:
+      // eslint-disable-next-line no-case-declarations
+      const maplibre = await import('maplibre-gl')
+      // eslint-disable-next-line no-case-declarations
+      const { getMaplibreGLLayer } = await import('../renderer/mapboxgl-layer')
+      layer = getMaplibreGLLayer(config, L, maplibre.default)
+      maplibreMap = (layer as ReturnType<typeof getMaplibreGLLayer>).getMaplibreMap?.()
+      break
+    case LeafletMapRenderer.Raster:
+      layer = L.tileLayer(style)
+      break
+  }
+  layer.addTo(leafletMap)
+
+  // leaflet-mapbox-gl has a layer positioning issue on far zoom levels which leads to having wrong
+  //   map points projection. We constraint the view to prevent that.
+  constraintMapView(leafletMap)
+  select(mapContainer).on('wheel', (event: WheelEvent) => {
+    event.preventDefault()
+    mapboxglWheelEventThrottled(leafletMap, layer, event)
+  })
+
+  if (maplibreMap && topoJSONLayer?.sources) {
+    const canvas = maplibreMap.getCanvas()
+    const canvasSelection = select(canvas).classed(s.mapboxglCanvas, true)
+    const tilePaneSelection = select(leafletMap.getPanes().tilePane)
+
+    maplibreMap.on('mousemove', (event) => {
+      const layerName = `${topoJSONLayer.featureName}-area`
+      const layer = maplibreMap.getLayer(layerName)
+      if (!layer) return
+
+      const features = maplibreMap.queryRenderedFeatures(event.point, { layers: [layerName] })
+      tilePaneSelection.datum(features[0])
+      canvasSelection.classed(s.onFeatureHover, Boolean(features[0]))
+    })
+
+    maplibreMap.on('load', () => {
+      updateTopoJson(maplibreMap, config)
+    })
+  }
+
+  const svgOverlay = select(leafletMap.getPanes().overlayPane).append('svg')
+  const svgGroup = svgOverlay.append('g')
+
+  return {
+    leaflet: leafletMap,
+    layer,
+    svgOverlay,
+    svgGroup,
+  }
+}

package/src/components/leaflet-map/modules/node.ts

@@ -0,0 +1,208 @@
+import { select, Selection } from 'd3-selection'
+import { color } from 'd3-color'
+import type L from 'leaflet'
+
+// Types
+import { Rect } from 'types/misc'
+import { GenericDataRecord } from 'types/data'
+
+// Utils
+import { smartTransition } from 'utils/d3'
+import { estimateTextSize, trimStringMiddle } from 'utils/text'
+import { clamp, getString } from 'utils/data'
+import { getCSSVariableValueInPixels, rectIntersect } from 'utils/misc'
+import { hexToBrightness } from 'utils/color'
+import { cssvar } from 'utils/style'
+import { getPointPos } from './utils'
+
+
+// Local Types
+import { LeafletMapPointDatum, LeafletMapClusterDatum, LeafletMapPoint, LeafletMapPointShape } from '../types'
+
+// Modules
+import { updateDonut } from './donut'
+
+// Config
+import { LeafletMapConfigInterface } from '../config'
+
+import * as s from '../style'
+
+const BOTTOM_LABEL_TOP_MARGIN = 10
+
+export function createNodes<D extends GenericDataRecord> (
+  selection: Selection<SVGGElement, LeafletMapPoint<D>, SVGGElement, unknown>
+): void {
+  selection.append('path')
+    .attr('class', s.pointPath)
+    .attr('id', d => `point-${d.id}`)
+    .style('opacity', 0)
+
+  selection.append('g')
+    .attr('class', s.donutCluster)
+
+  selection.append('text')
+    .attr('class', s.innerLabel)
+    .classed(s.innerLabelCluster, d => (d.properties as LeafletMapClusterDatum<D>).cluster)
+    .attr('id', d => `label-${d.id}`)
+    .attr('dy', '0.32em')
+
+  selection.append('text')
+    .attr('class', s.bottomLabel)
+    .attr('dy', '0.32em')
+    .attr('opacity', 1)
+}
+
+export function updateNodes<D extends GenericDataRecord> (
+  selection: Selection<SVGGElement, LeafletMapPoint<D>, SVGGElement, unknown>,
+  config: LeafletMapConfigInterface<D>,
+  leafletMap: L.Map,
+  mapMoveZoomUpdateOnly: boolean
+): void {
+  selection.each((d, i, elements) => {
+    const group = select(elements[i])
+    const node: Selection<SVGPathElement, any, SVGGElement, any> = group.select(`.${s.pointPath}`)
+    const innerLabel: Selection<SVGTextElement, any, SVGElement, any> = group.select(`.${s.innerLabel}`)
+    const bottomLabel: Selection<SVGTextElement, any, SVGElement, any> = group.select(`.${s.bottomLabel}`)
+
+    const { x, y } = getPointPos(d, leafletMap)
+    const donutData = d.donutData
+    const isCluster = (d.properties as LeafletMapClusterDatum<D>).cluster
+    const fromExpandedCluster = !!(d.properties as LeafletMapPointDatum<D>).expandedClusterPoint
+
+    const innerLabelText = (isCluster
+      ? getString(d.properties as LeafletMapClusterDatum<D>, config.clusterLabel)
+      : getString(d.properties as LeafletMapPointDatum<D>, config.pointLabel)
+    ) ?? ''
+    const innerLabelColor = (isCluster
+      ? getString(d.properties as LeafletMapClusterDatum<D>, config.clusterLabelColor)
+      : getString(d.properties as LeafletMapPointDatum<D>, config.pointLabelColor)
+    ) ?? null
+    const bottomLabelText = (isCluster
+      ? getString(d.properties as LeafletMapClusterDatum<D>, config.clusterBottomLabel)
+      : getString(d.properties as LeafletMapPointDatum<D>, config.pointBottomLabel)
+    ) ?? ''
+    const pointCursor = getString(d.properties as LeafletMapPointDatum<D>, config.pointCursor)
+    const pointShape = getString(d.properties as LeafletMapPointDatum<D>, config.pointShape)
+    const isRing = pointShape === LeafletMapPointShape.Ring
+    const isCircular = (pointShape === LeafletMapPointShape.Circle) || isRing || isCluster || !pointShape
+
+    // To get updated on every render call
+    const ringWidth = (isCluster && config.clusterRingWidth) || (isRing && config.pointRingWidth) || 0
+    group.attr('transform', `translate(${x},${y})`)
+    group.select<SVGGElement>(`.${s.donutCluster}`)
+      .call(updateDonut, donutData, isCircular ? d.radius : 0, ringWidth)
+
+    node.attr('d', d.path)
+    node.style('cursor', isCluster ? 'pointer' : pointCursor)
+    bottomLabel.attr('transform', `translate(0,${d.radius + BOTTOM_LABEL_TOP_MARGIN})`)
+    innerLabel.attr('font-size', () => {
+      const fontSize = d.radius / Math.pow(innerLabelText.length, 0.4)
+      return clamp(fontSize, fontSize, 16)
+    })
+
+    if (mapMoveZoomUpdateOnly) return
+
+    // Updates required only when data changes
+    node
+      .classed(s.pointPathCluster, isCluster)
+      .classed(s.pointPathRing, isRing)
+      .style('fill', d.color)
+      .style('stroke', d.color) // being used for hover
+      .style('stroke-width', ringWidth)
+      .style('opacity', 1)
+
+    innerLabel
+      .text(innerLabelText || null)
+      .attr('visibility', innerLabelText ? null : 'hidden')
+      .style('fill', () => {
+        if (innerLabelColor) return innerLabelColor
+
+        // Determine the label color based on the point brightness
+        const c = getComputedStyle(node.node()).fill
+        const hex = color(c)?.hex()
+        if (!hex) return null
+
+        const brightness = hexToBrightness(hex)
+        return brightness > 0.5
+          ? (isCluster ? cssvar(s.variables.mapClusterInnerLabelTextColorDark) : cssvar(s.variables.mapPointInnerLabelTextColorDark))
+          : (isCluster ? cssvar(s.variables.mapClusterInnerLabelTextColorLight) : cssvar(s.variables.mapPointInnerLabelTextColorLight))
+      })
+
+    const bottomLabelTextTrimmed = trimStringMiddle(bottomLabelText, 15)
+    bottomLabel
+      .text(bottomLabelTextTrimmed)
+      .attr('font-size', getCSSVariableValueInPixels(cssvar(s.variables.mapPointBottomLabelFontSize), selection.node()))
+      .attr('visibility', fromExpandedCluster ? 'hidden' : null)
+  })
+}
+
+export function collideLabels<D extends GenericDataRecord> (
+  selection: Selection<SVGGElement, LeafletMapPoint<D>, SVGGElement, unknown>,
+  leafletMap: L.Map
+): void {
+  selection.each((datum1: LeafletMapPoint<D>, i, elements) => {
+    const group1HTMLNode = elements[i]
+    const group1 = select(group1HTMLNode)
+    const label1: Selection<SVGTextElement, any, SVGElement, any> = group1.select(`.${s.bottomLabel}`)
+    // eslint-disable-next-line dot-notation
+    group1HTMLNode['labelVisible'] = true
+
+    // Calculate bounding rect of point's bottom label
+    const bottomLabelFontSizePx = getCSSVariableValueInPixels(cssvar(s.variables.mapPointBottomLabelFontSize), selection.node())
+    const p1Pos = getPointPos(datum1, leafletMap)
+    const label1Size = estimateTextSize(label1, bottomLabelFontSizePx, 0.32, true, 0.6)
+    const label1BoundingRect: Rect = {
+      x: p1Pos.x - label1Size.width / 2,
+      y: p1Pos.y - label1Size.height / 2 + datum1.radius + BOTTOM_LABEL_TOP_MARGIN,
+      width: label1Size.width,
+      height: label1Size.height,
+    }
+
+    for (let j = 0; j < elements.length; j += 1) {
+      if (i === j) continue
+      const group2HTMLNode = elements[j]
+      const group2 = select(group2HTMLNode)
+      const label2: Selection<SVGTextElement, any, SVGElement, any> = group2.select(`.${s.bottomLabel}`)
+      const datum2 = group2.datum() as LeafletMapPoint<D>
+
+      // Calculate bounding rect of the second point's circle
+      const p2Pos = getPointPos(datum2, leafletMap)
+      const point2BoundingRect = {
+        x: p2Pos.x - datum2.radius,
+        y: p2Pos.y - datum2.radius,
+        width: 2 * datum2.radius,
+        height: 2 * datum2.radius,
+      }
+
+      let intersect = rectIntersect(label1BoundingRect, point2BoundingRect)
+
+      // If there's not intersection, check a collision with the second point's label
+      // eslint-disable-next-line dot-notation
+      const label2Visible = group2HTMLNode['labelVisible']
+      if (!intersect && label2Visible) {
+        const label2Size = estimateTextSize(label2, bottomLabelFontSizePx, 0.32, true, 0.6)
+        intersect = rectIntersect(label1BoundingRect, {
+          x: p2Pos.x - label2Size.width / 2,
+          y: p2Pos.y + datum2.radius + BOTTOM_LABEL_TOP_MARGIN - label2Size.height / 2,
+          width: label2Size.width,
+          height: label2Size.height,
+        })
+      }
+
+      if (intersect) {
+        // eslint-disable-next-line dot-notation
+        group1HTMLNode['labelVisible'] = false
+        break
+      }
+    }
+
+    // eslint-disable-next-line dot-notation
+    smartTransition(label1, 0).attr('opacity', group1HTMLNode['labelVisible'] ? 1 : 0)
+  })
+}
+
+export function removeNodes<D extends GenericDataRecord> (
+  selection: Selection<SVGGElement, LeafletMapPoint<D>, SVGGElement, unknown>
+): void {
+  selection.remove()
+}

package/src/components/leaflet-map/modules/selectionRing.ts

@@ -0,0 +1,63 @@
+import type L from 'leaflet'
+import { Selection } from 'd3-selection'
+
+// Types
+import { GenericDataRecord } from 'types/data'
+
+// Utils
+import { getString } from 'utils/data'
+import { getPointPos } from './utils'
+
+// Local Types
+import { LeafletMapPoint, LeafletMapPointDatum } from '../types'
+
+// Config
+import { LeafletMapConfigInterface } from '../config'
+
+import * as s from '../style'
+
+
+export function createNodeSelectionRing (
+  selection: Selection<SVGGElement, unknown, SVGElement, undefined>
+): void {
+  selection.datum({ _zIndex: 3 })
+  selection.append('path').attr('class', s.pointSelection)
+}
+
+export function updateNodeSelectionRing<D extends GenericDataRecord> (
+  selection: Selection<SVGGElement, unknown, SVGElement, undefined>,
+  selectedPoint: LeafletMapPoint<D>,
+  pointData: LeafletMapPoint<D>[],
+  config: LeafletMapConfigInterface<D>,
+  leafletMap: L.Map
+): void {
+  selection.attr('class', s.pointSelectionRing)
+  const pointSelection = selection.select(`.${s.pointSelection}`)
+  if (selectedPoint) {
+    const isCluster = selectedPoint.isCluster
+    const selectedPointId: string | undefined = getString(selectedPoint.properties as LeafletMapPointDatum<D>, config.pointId)
+    const foundPoint = pointData.find(d =>
+      isCluster
+        ? (d.id === selectedPoint.id)
+        : (selectedPointId && (getString(d.properties as LeafletMapPointDatum<D>, config.pointId) === selectedPointId))
+    )
+    selection
+      .attr('transform', d => {
+        const { x, y } = getPointPos<D>(foundPoint ?? selectedPoint, leafletMap)
+        return `translate(${x},${y})`
+      })
+      .classed(`${(selectedPoint.properties as LeafletMapPointDatum<D>).shape}`, true)
+
+    pointSelection
+      .classed('active', Boolean(foundPoint))
+      .attr('d', foundPoint ? foundPoint.path : null)
+      .style('fill', 'transparent')
+      .style('stroke-width', 1)
+      .style('stroke', d => {
+        const node = foundPoint || selectedPoint
+        return node?.color
+      })
+  } else {
+    pointSelection.classed('active', false)
+  }
+}