@ohos-ports/jsvectormap 1.7.0-beta.0

package/src/js/dataVisualization.js

@@ -0,0 +1,87 @@
+class DataVisualization {
+  constructor({ scale, values }, map) {
+    this._scale = scale
+    this._values = values
+    this._fromColor = this.hexToRgb(scale[0])
+    this._toColor = this.hexToRgb(scale[1])
+    this._map = map
+
+    this.setMinMaxValues(values)
+    this.visualize()
+  }
+
+  setMinMaxValues(values) {
+    this.min = Number.MAX_VALUE
+    this.max = 0
+
+    for (let value in values) {
+      value = parseFloat(values[value])
+
+      if (value > this.max) {
+        this.max = value
+      }
+
+      if (value < this.min) {
+        this.min = value
+      }
+    }
+  }
+
+  visualize() {
+    let attrs = {}, value
+
+    for (let regionCode in this._values) {
+      value = parseFloat(this._values[regionCode])
+
+      if (!isNaN(value)) {
+        attrs[regionCode] = this.getValue(value)
+      }
+    }
+
+    this.setAttributes(attrs)
+  }
+
+  setAttributes(attrs) {
+    for (let code in attrs) {
+      if (this._map.regions[code]) {
+        this._map.regions[code].element.setStyle('fill', attrs[code])
+      }
+    }
+  }
+
+  getValue(value) {
+    if (this.min === this.max) {
+      return `#${this._toColor.join('')}`
+    }
+
+    let hex, color = '#'
+  
+    for (var i = 0; i < 3; i++) {
+      hex = Math.round(
+        this._fromColor[i] + (this._toColor[i] - this._fromColor[i]) * ((value - this.min) / (this.max - this.min))
+      ).toString(16)
+
+      color += (hex.length === 1 ? '0' : '') + hex
+    }
+
+    return color
+  }
+
+  hexToRgb(h) {
+    let r = 0, g = 0, b = 0
+  
+    if (h.length == 4) {
+      r = '0x' + h[1] + h[1]
+      g = '0x' + h[2] + h[2]
+      b = '0x' + h[3] + h[3]
+    } else if (h.length == 7) {
+      r = '0x' + h[1] + h[2]
+      g = '0x' + h[3] + h[4]
+      b = '0x' + h[5] + h[6]
+    }
+
+    return [parseInt(r), parseInt(g), parseInt(b)]
+  }
+}
+
+export default DataVisualization

package/src/js/defaults/events.js

@@ -0,0 +1,11 @@
+export default {
+  onLoaded: 'map:loaded',
+  onViewportChange: 'viewport:changed',
+  onRegionClick: 'region:clicked',
+  onMarkerClick: 'marker:clicked',
+  onRegionSelected: 'region:selected',
+  onMarkerSelected: 'marker:selected',
+  onRegionTooltipShow: 'region.tooltip:show',
+  onMarkerTooltipShow: 'marker.tooltip:show',
+  onDestroyed: 'map:destroyed'
+}

package/src/js/defaults/options.js

@@ -0,0 +1,90 @@
+export default {
+  map: 'world',
+  backgroundColor: 'transparent',
+  draggable: true,
+  zoomButtons: true,
+  zoomOnScroll: true,
+  zoomOnScrollSpeed: 3,
+  zoomMax: 12,
+  zoomMin: 1,
+  zoomAnimate: true,
+  showTooltip: true,
+  zoomStep: 1.5,
+  bindTouchEvents: true,
+
+  // Line options
+  lineStyle: {
+    curvature: 0,
+    stroke: '#808080',
+    strokeWidth: 1,
+    strokeLinecap: 'round',
+  },
+
+  // Marker options
+  markersSelectable: false,
+  markersSelectableOne: false,
+  markerStyle: {
+    initial: {
+      r: 7,
+      fill: '#374151',
+      fillOpacity: 1,
+      stroke: '#FFF',
+      strokeWidth: 5,
+      strokeOpacity: .5,
+    },
+    hover: {
+      fill: '#3cc0ff',
+      cursor: 'pointer',
+    },
+    selected: {
+      fill: 'blue'
+    },
+    selectedHover: {}
+  },
+  markerLabelStyle: {
+    initial: {
+      fontFamily: 'Verdana',
+      fontSize: 12,
+      fontWeight: 500,
+      cursor: 'default',
+      fill: '#374151'
+    },
+    hover: {
+      cursor: 'pointer'
+    },
+    selected: {},
+    selectedHover: {}
+  },
+
+  // Region options
+  regionsSelectable: false,
+  regionsSelectableOne: false,
+  regionStyle: {
+    initial: {
+      fill: '#dee2e8',
+      fillOpacity: 1,
+      stroke: 'none',
+      strokeWidth: 0,
+    },
+    hover: {
+      fillOpacity: .7,
+      cursor: 'pointer'
+    },
+    selected: {
+      fill: '#9ca3af'
+    },
+    selectedHover: {}
+  },
+  regionLabelStyle: {
+    initial: {
+      fontFamily: 'Verdana',
+      fontSize: '12',
+      fontWeight: 'bold',
+      cursor: 'default',
+      fill: '#35373e'
+    },
+    hover: {
+      cursor: 'pointer'
+    }
+  },
+}

package/src/js/eventHandler.js

@@ -0,0 +1,47 @@
+let eventRegistry = {}
+let eventUid = 1
+
+const EventHandler = {
+  on(element, event, handler, options = {}) {
+    const uid = `jvm:${event}::${eventUid++}`
+
+    eventRegistry[uid] = {
+      selector: element,
+      handler,
+    }
+
+    handler._uid = uid
+
+    element.addEventListener(event, handler, options)
+  },
+  delegate(element, event, selector, handler) {
+    event = event.split(' ')
+
+    event.forEach(eventName => {
+      EventHandler.on(element, eventName, (e) => {
+        const target = e.target
+
+        if (target.matches(selector)) {
+          handler.call(target, e)
+        }
+      })
+    })
+  },
+  off(element, event, handler) {
+    const eventType = event.split(':')[1]
+
+    element.removeEventListener(eventType, handler)
+
+    delete eventRegistry[handler._uid]
+  },
+  flush() {
+    Object.keys(eventRegistry).forEach(event => {
+      EventHandler.off(eventRegistry[event].selector, event, eventRegistry[event].handler)
+    })
+  },
+  getEventRegistry() {
+    return eventRegistry
+  },
+}
+
+export default EventHandler

package/src/js/index.js

@@ -0,0 +1,25 @@
+/**
+ * jsVectorMap
+ * Copyrights (c) Mustafa Omar https://github.com/themustafaomar
+ * Released under the MIT License.
+ */
+import Map from './map'
+
+import '../scss/jsvectormap.scss'
+
+class jsVectorMap {
+  constructor(options = {}) {
+    if (!options.selector) {
+      throw new Error('Selector is not given.')
+    }
+
+    return new Map(options)
+  }
+
+  // Public
+  static addMap(name, map) {
+    Map.maps[name] = map
+  }
+}
+
+export default window.jsVectorMap = jsVectorMap

package/src/js/legend.js

@@ -0,0 +1,69 @@
+import { createElement, isImageUrl } from './util'
+
+class Legend {
+  constructor(options = {}) {
+    this._options = options
+    this._map = this._options.map
+    this._series = this._options.series
+    this._body = createElement('div', 'jvm-legend')
+
+    if (this._options.cssClass) {
+      this._body.setAttribute('class', this._options.cssClass)
+    }
+
+    if (options.vertical) {
+      this._map.legendVertical.appendChild(this._body)
+    } else {
+      this._map.legendHorizontal.appendChild(this._body)
+    }
+
+    this.render()
+  }
+
+  render() {
+    let ticks = this._series.scale.getTicks()
+
+    this._body.innderHTML = ''
+
+    if (this._options.title) {
+      let legendTitle = createElement('div', 'jvm-legend-title', this._options.title)
+      this._body.appendChild(legendTitle)
+    }
+
+    for (let i = 0; i < ticks.length; i++) {
+      let tick = createElement('div', 'jvm-legend-tick',)
+      let sample = createElement('div', 'jvm-legend-tick-sample')
+
+      switch (this._series.config.attribute) {
+        case 'fill':
+          if (isImageUrl(ticks[i].value)) {
+            sample.style.background = `url(${ticks[i].value})`
+          } else {
+            sample.style.background = ticks[i].value
+          }
+          break
+        case 'stroke':
+          sample.style.background = ticks[i].value
+          break
+        case 'image':
+          sample.style.background = `url(${typeof ticks[i].value === 'object' ? ticks[i].value.url : ticks[i].value}) no-repeat center center`
+          sample.style.backgroundSize = 'cover'
+          break
+      }
+
+      tick.appendChild(sample)
+      let label = ticks[i].label
+
+      if (this._options.labelRender) {
+        label = this._options.labelRender(label)
+      }
+
+      const tickText = createElement('div', 'jvm-legend-tick-text', label)
+
+      tick.appendChild(tickText)
+      this._body.appendChild(tick)
+    }
+  }
+}
+
+export default Legend

package/src/js/map.js

@@ -0,0 +1,367 @@
+import {
+  merge,
+  getLineUid,
+  getElement,
+  createElement,
+  removeElement,
+} from './util'
+import core from './core'
+import Defaults from './defaults/options'
+import SVGCanvasElement from './svg/canvasElement'
+import Events from './defaults/events'
+import EventHandler from './eventHandler'
+import Tooltip from './components/tooltip'
+import DataVisualization from './dataVisualization'
+
+const JVM_PREFIX = 'jvm-'
+const CONTAINER_CLASS = `${JVM_PREFIX}container`
+const MARKERS_GROUP_ID = `${JVM_PREFIX}markers-group`
+const MARKERS_LABELS_GROUP_ID = `${JVM_PREFIX}markers-labels-group`
+const LINES_GROUP_ID = `${JVM_PREFIX}lines-group`
+const SERIES_CONTAINER_CLASS = `${JVM_PREFIX}series-container`
+const SERIES_CONTAINER_H_CLASS = `${SERIES_CONTAINER_CLASS} ${JVM_PREFIX}series-h`
+const SERIES_CONTAINER_V_CLASS = `${SERIES_CONTAINER_CLASS} ${JVM_PREFIX}series-v`
+
+class Map {
+  static maps = {}
+  static defaults = Defaults
+
+  constructor(options = {}) {
+    // Merge the given options with the default options
+    this.params = merge(Map.defaults, options, true)
+
+    // Throw an error if the given map name doesn't match
+    // the map that was set in map file
+    if (!Map.maps[this.params.map]) {
+      throw new Error(`Attempt to use map which was not loaded: ${options.map}`)
+    }
+
+    this.regions = {}
+    this.scale = 1
+    this.transX = 0
+    this.transY = 0
+
+    this._mapData = Map.maps[this.params.map]
+    this._markers = {}
+    this._lines = {}
+    this._defaultWidth = this._mapData.width
+    this._defaultHeight = this._mapData.height
+    this._height = 0
+    this._width = 0
+    this._baseScale = 1
+    this._baseTransX = 0
+    this._baseTransY = 0
+
+    // `document` is already ready, just initialise now
+    if (document.readyState !== 'loading') {
+      this._init()
+    } else {
+      // Wait until `document` is ready
+      window.addEventListener('DOMContentLoaded', () => this._init())
+    }
+  }
+
+  _init() {
+    const options = this.params
+
+    this.container = getElement(options.selector)
+    this.container.classList.add(CONTAINER_CLASS)
+
+    // The map canvas element
+    this.canvas = new SVGCanvasElement(this.container)
+
+    // Set the map's background color
+    this.setBackgroundColor(options.backgroundColor)
+
+    // Create regions
+    this._createRegions()
+
+    // Update size
+    this.updateSize()
+
+    // Lines group must be created before markers
+    // Otherwise the lines will be drawn on top of the markers.
+    if (options.lines) {
+      this._linesGroup = this.canvas.createGroup(LINES_GROUP_ID)
+    }
+
+    if (options.markers) {
+      this._markersGroup = this.canvas.createGroup(MARKERS_GROUP_ID)
+      this._markerLabelsGroup = this.canvas.createGroup(MARKERS_LABELS_GROUP_ID)
+    }
+
+    // Create markers
+    this._createMarkers(options.markers)
+
+    // Create lines
+    this._createLines(options.lines || {})
+
+    // Position labels
+    this._repositionLabels()
+
+    // Setup the container events
+    this._setupContainerEvents()
+
+    // Setup regions/markers events
+    this._setupElementEvents()
+
+    // Create zoom buttons if `zoomButtons` is presented
+    if (options.zoomButtons) {
+      this._setupZoomButtons()
+    }
+
+    // Create toolip
+    if (options.showTooltip) {
+      this._tooltip = new Tooltip(this)
+    }
+
+    // Set selected regions if any
+    if (options.selectedRegions) {
+      this._setSelected('regions', options.selectedRegions)
+    }
+
+    // Set selected regions if any
+    if (options.selectedMarkers) {
+      this._setSelected('_markers', options.selectedMarkers)
+    }
+
+    // Set focus on a spcific region
+    if (options.focusOn) {
+      this.setFocus(options.focusOn)
+    }
+
+    // Data visualization
+    if (options.visualizeData) {
+      this.dataVisualization = new DataVisualization(options.visualizeData, this)
+    }
+
+    // Bind touch events if true
+    if (options.bindTouchEvents) {
+      if (
+        ('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)
+      ) {
+        this._setupContainerTouchEvents()
+      }
+    }
+
+    // Create series if any
+    if (options.series) {
+      this.container.appendChild(this.legendHorizontal = createElement(
+        'div', SERIES_CONTAINER_H_CLASS
+      ))
+
+      this.container.appendChild(this.legendVertical = createElement(
+        'div', SERIES_CONTAINER_V_CLASS
+      ))
+
+      this._createSeries()
+    }
+
+    // Fire loaded event
+    this._emit(Events.onLoaded, [this])
+  }
+
+  // Public
+
+  setBackgroundColor(color) {
+    this.container.style.backgroundColor = color
+  }
+
+  // Regions
+
+  getSelectedRegions() {
+    return this._getSelected('regions')
+  }
+
+  clearSelectedRegions(regions = undefined) {
+    regions = this._normalizeRegions(regions) || this._getSelected('regions')
+    regions.forEach((key) => {
+      this.regions[key].element.select(false)
+    })
+  }
+
+  setSelectedRegions(regions) {
+    this.clearSelectedRegions()
+    this._setSelected('regions', this._normalizeRegions(regions))
+  }
+
+  // Markers
+
+  getSelectedMarkers() {
+    return this._getSelected('_markers')
+  }
+
+  clearSelectedMarkers() {
+    this._clearSelected('_markers')
+  }
+
+  setSelectedMarkers(markers) {
+    this._setSelected('_markers', markers)
+  }
+
+  addMarkers(config) {
+    config = Array.isArray(config) ? config : [config]
+    this._createMarkers(config, true)
+  }
+
+  removeMarkers(markers) {
+    if (!markers) {
+      markers = Object.keys(this._markers)
+    }
+
+    markers.forEach(index => {
+      // Remove the element from the DOM
+      this._markers[index].element.remove()
+      // Remove the element from markers object
+      delete this._markers[index]
+    })
+  }
+
+  // Lines
+
+  addLine(from, to, style = {}) {
+    console.warn('`addLine` method is deprecated, please use `addLines` instead.')
+    this._createLines([{ from, to, style }], this._markers, true)
+  }
+
+  addLines(config) {
+    const uids = this._getLinesAsUids()
+
+    if (!Array.isArray(config)) {
+      config = [config]
+    }
+
+    this._createLines(config.filter(line => {
+      return !(uids.indexOf(getLineUid(line.from, line.to)) > -1)
+    }), true)
+  }
+
+  removeLines(lines) {
+    if (Array.isArray(lines)) {
+      lines = lines.map(line => getLineUid(line.from, line.to))
+    } else {
+      lines = this._getLinesAsUids()
+    }
+
+    lines.forEach(uid => {
+      this._lines[uid].dispose()
+      delete this._lines[uid]
+    })
+  }
+
+  removeLine(from, to) {
+    console.warn('`removeLine` method is deprecated, please use `removeLines` instead.')
+    const uid = getLineUid(from, to)
+
+    if (this._lines.hasOwnProperty(uid)) {
+      this._lines[uid].element.remove()
+      delete this._lines[uid]
+    }
+  }
+
+  // Reset map
+  reset() {
+    for (let key in this.series) {
+      for (let i = 0; i < this.series[key].length; i++) {
+        this.series[key][i].clear()
+      }
+    }
+
+    if (this.legendHorizontal) {
+      removeElement(this.legendHorizontal)
+      this.legendHorizontal = null
+    }
+
+    if (this.legendVertical) {
+      removeElement(this.legendVertical)
+      this.legendVertical = null
+    }
+
+    this.scale = this._baseScale
+    this.transX = this._baseTransX
+    this.transY = this._baseTransY
+
+    this._applyTransform()
+    this.clearSelectedMarkers()
+    this.clearSelectedRegions()
+    this.removeMarkers()
+  }
+
+  // Destroy the map
+  destroy(destroyInstance = true) {
+    // Remove event registry
+    EventHandler.flush()
+
+    // Remove tooltip from DOM and memory
+    this._tooltip.dispose()
+
+    // Fire destroyed event
+    this._emit(Events.onDestroyed)
+
+    // Remove references
+    if (destroyInstance) {
+      Object.keys(this).forEach(key => {
+        try {
+          delete this[key]
+        } catch (e) {}
+      })
+    }
+  }
+
+  extend(name, callback) {
+    if (typeof this[name] === 'function') {
+      throw new Error(`The method [${name}] does already exist, please use another name.`)
+    }
+
+    Map.prototype[name] = callback
+  }
+
+  // Private
+
+  _emit(eventName, args) {
+    for (const event in Events) {
+      if (Events[event] === eventName && typeof this.params[event] === 'function') {
+        this.params[event].apply(this, args)
+      }
+    }
+  }
+
+  // Get selected markers/regions
+  _getSelected(type) {
+    const selected = []
+
+    for (const key in this[type]) {
+      if (this[type][key].element.isSelected) {
+        selected.push(key)
+      }
+    }
+
+    return selected
+  }
+
+  _setSelected(type, keys) {
+    keys.forEach(key => {
+      if (this[type][key]) {
+        this[type][key].element.select(true)
+      }
+    })
+  }
+
+  _clearSelected(type) {
+    this._getSelected(type).forEach(key => {
+      this[type][key].element.select(false)
+    })
+  }
+
+  _getLinesAsUids() {
+    return Object.keys(this._lines)
+  }
+
+  _normalizeRegions(regions) {
+    return typeof regions === 'string' ? [regions] : regions
+  }
+}
+
+Object.assign(Map.prototype, core)
+
+export default Map