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

package/components/tooltip/index.js

@@ -0,0 +1,184 @@
+import { select, pointer } from 'd3-selection';
+import { Position } from '../../types/position.js';
+import { throttle } from '../../utils/data.js';
+import { TooltipConfig } from './config.js';
+import * as style from './style.js';
+import { tooltip, show, positionFixed } from './style.js';
+
+class Tooltip {
+    constructor(config = {}) {
+        this._setUpEventsThrottled = throttle(this._setUpEvents, 500);
+        this._setContainerPositionThrottled = throttle(this._setContainerPosition, 500);
+        this._isShown = false;
+        this.element = document.createElement('div');
+        this.div = select(this.element)
+            .attr('class', tooltip);
+        this.setConfig(config);
+        this.components = this.config.components;
+    }
+    setConfig(config) {
+        var _a;
+        this.prevConfig = this.config;
+        this.config = new TooltipConfig().init(config);
+        if (this.config.container && (this.config.container !== ((_a = this.prevConfig) === null || _a === void 0 ? void 0 : _a.container))) {
+            this.setContainer(this.config.container);
+        }
+        this._setUpAttributes();
+    }
+    setContainer(container) {
+        var _a;
+        (_a = this.element.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
+        this._container = container;
+        this._container.appendChild(this.element);
+        this._setContainerPositionThrottled();
+    }
+    getContainer() {
+        return this._container;
+    }
+    hasContainer() {
+        return !!this._container && this._container.isConnected;
+    }
+    setComponents(components) {
+        this.components = components;
+    }
+    update() {
+        if (!this._container)
+            return;
+        this._setUpEventsThrottled();
+    }
+    show(html, pos) {
+        if (html instanceof HTMLElement) {
+            const node = this.div.select(':first-child').node();
+            if (node !== html)
+                this.div.html('').append(() => html);
+        }
+        else {
+            this.div.html(html);
+        }
+        this.div.classed(show, true);
+        this._isShown = true;
+        this.place(pos);
+    }
+    hide() {
+        this.div.classed(show, false);
+        this._isShown = false;
+    }
+    place(pos) {
+        if (!this.hasContainer()) {
+            console.warn('Unovis | Tooltip: Container was not set or is not initialized yet');
+            return;
+        }
+        const { config } = this;
+        const isContainerBody = this.isContainerBody();
+        const width = this.element.offsetWidth;
+        const height = this.element.offsetHeight;
+        const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight;
+        const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth;
+        const horizontalPlacement = config.horizontalPlacement === Position.Auto
+            ? (pos.x > containerWidth / 2 ? Position.Left : Position.Right)
+            : config.horizontalPlacement;
+        const verticalPlacement = config.verticalPlacement === Position.Auto
+            ? (pos.y > containerHeight / 2 ? Position.Top : Position.Bottom)
+            : config.verticalPlacement;
+        // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)
+        const margin = 5;
+        const dx = horizontalPlacement === Position.Left ? -width - margin - config.horizontalShift
+            : horizontalPlacement === Position.Center ? -width / 2
+                : margin + config.horizontalShift;
+        const dy = verticalPlacement === Position.Bottom ? height + margin + config.verticalShift
+            : verticalPlacement === Position.Center ? height / 2
+                : -margin - config.verticalShift;
+        // Constraint to container
+        const paddingX = 10;
+        const hitRight = pos.x > (containerWidth - width - dx - paddingX);
+        const hitLeft = pos.x < -dx + paddingX;
+        const constraintX = hitRight ? (containerWidth - width - dx) - pos.x - paddingX
+            : hitLeft ? -dx - pos.x + paddingX : 0;
+        const paddingY = 10;
+        const hitBottom = pos.y > (containerHeight - dy - paddingY);
+        const hitTop = pos.y < (height - dy + paddingY);
+        const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY
+            : hitTop ? height - dy - pos.y + paddingY : 0;
+        // Placing
+        // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left
+        const x = containerWidth < width ? 0 : pos.x + constraintX + dx;
+        const y = containerHeight < height ? height : pos.y + constraintY + dy;
+        this.div
+            .classed(positionFixed, isContainerBody)
+            .style('top', isContainerBody ? `${y - height}px` : 'unset')
+            .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')
+            .style('left', `${x}px`);
+    }
+    isContainerBody() {
+        return this._container === document.body;
+    }
+    _setContainerPosition() {
+        var _a;
+        // Tooltip position calculation relies on the parent position
+        // If it's not set (static), we set it to `relative` (not a good practice)
+        if (((_a = getComputedStyle(this._container)) === null || _a === void 0 ? void 0 : _a.position) === 'static') {
+            this._container.style.position = 'relative';
+        }
+    }
+    _setUpEvents() {
+        const { config: { triggers } } = this;
+        const isContainerBody = this.isContainerBody();
+        // We use the Event Delegation pattern to set up Tooltip events
+        // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check
+        // the `path` of the event and trigger corresponding callbacks
+        this.components.forEach(component => {
+            const selection = select(component.element);
+            selection
+                .on('mousemove.tooltip', (e) => {
+                const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container);
+                const path = (e.composedPath && e.composedPath()) || e.path || [e.target];
+                // Go through all of the configured triggers
+                for (const className of Object.keys(triggers)) {
+                    const template = triggers[className];
+                    const els = selection.selectAll(`.${className}`).nodes();
+                    // Go through all of the elements in the event path (from the deepest element upwards)
+                    for (const el of path) {
+                        if (el === selection.node())
+                            break; // Break on the component's level (usually the `<g>` element)
+                        if (el.classList.contains(className)) { // If there's a match, show the tooltip
+                            const i = els.indexOf(el);
+                            const d = select(el).datum();
+                            const content = template(d, i, els);
+                            if (content)
+                                this.show(content, { x, y });
+                            else
+                                this.hide();
+                            e.stopPropagation(); // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair
+                            return; // Stop looking for other matches
+                        }
+                    }
+                }
+                // Hide the tooltip if the event didn't pass through any of the configured triggers.
+                // We use the `this._isShown` condition as a little performance optimization tweak
+                // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).
+                if (this._isShown)
+                    this.hide();
+            })
+                .on('mouseleave.tooltip', (e) => {
+                e.stopPropagation(); // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair
+                this.hide();
+            });
+        });
+    }
+    _setUpAttributes() {
+        const attributesMap = this.config.attributes;
+        if (!attributesMap)
+            return;
+        Object.keys(attributesMap).forEach(attr => {
+            this.div.attr(attr, attributesMap[attr]);
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this.div) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+}
+Tooltip.selectors = style;
+
+export { Tooltip };
+//# sourceMappingURL=index.js.map

package/components/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import { select, Selection, pointer } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\n// Utils\nimport { throttle } from 'utils/data'\n\n// Config\nimport { TooltipConfig, TooltipConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class Tooltip {\n  element: HTMLElement\n  div: Selection<HTMLElement, unknown, null, undefined>\n  config: TooltipConfig\n  prevConfig: TooltipConfig\n  components: ComponentCore<unknown>[]\n  static selectors = s\n  private _setUpEventsThrottled = throttle(this._setUpEvents, 500)\n  private _setContainerPositionThrottled = throttle(this._setContainerPosition, 500)\n  private _isShown = false\n  private _container: HTMLElement\n\n  constructor (config: TooltipConfigInterface = {}) {\n    this.element = document.createElement('div')\n    this.div = select(this.element)\n      .attr('class', s.tooltip)\n\n    this.setConfig(config)\n    this.components = this.config.components\n  }\n\n  public setConfig (config: TooltipConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = new TooltipConfig().init(config)\n\n    if (this.config.container && (this.config.container !== this.prevConfig?.container)) {\n      this.setContainer(this.config.container)\n    }\n\n    this._setUpAttributes()\n  }\n\n  public setContainer (container: HTMLElement): void {\n    this.element.parentNode?.removeChild(this.element)\n\n    this._container = container\n    this._container.appendChild(this.element)\n\n    this._setContainerPositionThrottled()\n  }\n\n  public getContainer (): HTMLElement {\n    return this._container\n  }\n\n  public hasContainer (): boolean {\n    return !!this._container && this._container.isConnected\n  }\n\n  public setComponents (components: ComponentCore<unknown>[]): void {\n    this.components = components\n  }\n\n  public update (): void {\n    if (!this._container) return\n\n    this._setUpEventsThrottled()\n  }\n\n  public show (html: string | HTMLElement, pos: { x: number; y: number }): void {\n    if (html instanceof HTMLElement) {\n      const node = this.div.select(':first-child').node()\n      if (node !== html) this.div.html('').append(() => html)\n    } else {\n      this.div.html(html)\n    }\n\n    this.div.classed(s.show, true)\n    this._isShown = true\n    this.place(pos)\n  }\n\n  public hide (): void {\n    this.div.classed(s.show, false)\n    this._isShown = false\n  }\n\n  public place (pos: { x: number; y: number }): void {\n    if (!this.hasContainer()) {\n      console.warn('Unovis | Tooltip: Container was not set or is not initialized yet')\n      return\n    }\n    const { config } = this\n    const isContainerBody = this.isContainerBody()\n    const width = this.element.offsetWidth\n    const height = this.element.offsetHeight\n    const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight\n    const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth\n\n    const horizontalPlacement = config.horizontalPlacement === Position.Auto\n      ? (pos.x > containerWidth / 2 ? Position.Left : Position.Right)\n      : config.horizontalPlacement\n\n    const verticalPlacement = config.verticalPlacement === Position.Auto\n      ? (pos.y > containerHeight / 2 ? Position.Top : Position.Bottom)\n      : config.verticalPlacement\n\n    // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)\n    const margin = 5\n    const dx = horizontalPlacement === Position.Left ? -width - margin - config.horizontalShift\n      : horizontalPlacement === Position.Center ? -width / 2\n        : margin + config.horizontalShift\n    const dy = verticalPlacement === Position.Bottom ? height + margin + config.verticalShift\n      : verticalPlacement === Position.Center ? height / 2\n        : -margin - config.verticalShift\n\n    // Constraint to container\n    const paddingX = 10\n    const hitRight = pos.x > (containerWidth - width - dx - paddingX)\n    const hitLeft = pos.x < -dx + paddingX\n    const constraintX = hitRight ? (containerWidth - width - dx) - pos.x - paddingX\n      : hitLeft ? -dx - pos.x + paddingX : 0\n\n    const paddingY = 10\n    const hitBottom = pos.y > (containerHeight - dy - paddingY)\n    const hitTop = pos.y < (height - dy + paddingY)\n    const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY\n      : hitTop ? height - dy - pos.y + paddingY : 0\n\n    // Placing\n    // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left\n    const x = containerWidth < width ? 0 : pos.x + constraintX + dx\n    const y = containerHeight < height ? height : pos.y + constraintY + dy\n\n    this.div\n      .classed(s.positionFixed, isContainerBody)\n      .style('top', isContainerBody ? `${y - height}px` : 'unset')\n      .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')\n      .style('left', `${x}px`)\n  }\n\n  public isContainerBody (): boolean {\n    return this._container === document.body\n  }\n\n  private _setContainerPosition (): void {\n    // Tooltip position calculation relies on the parent position\n    // If it's not set (static), we set it to `relative` (not a good practice)\n    if (getComputedStyle(this._container)?.position === 'static') {\n      this._container.style.position = 'relative'\n    }\n  }\n\n  private _setUpEvents (): void {\n    const { config: { triggers } } = this\n    const isContainerBody = this.isContainerBody()\n\n    // We use the Event Delegation pattern to set up Tooltip events\n    // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check\n    // the `path` of the event and trigger corresponding callbacks\n    this.components.forEach(component => {\n      const selection = select(component.element)\n      selection\n        .on('mousemove.tooltip', (e: MouseEvent) => {\n          const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container)\n          const path: (HTMLElement | SVGGElement)[] = (e.composedPath && e.composedPath()) || (e as any).path || [e.target]\n\n          // Go through all of the configured triggers\n          for (const className of Object.keys(triggers)) {\n            const template = triggers[className]\n            const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()\n\n            // Go through all of the elements in the event path (from the deepest element upwards)\n            for (const el of path) {\n              if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)\n              if (el.classList.contains(className)) { // If there's a match, show the tooltip\n                const i = els.indexOf(el)\n                const d = select(el).datum()\n                const content = template(d, i, els)\n                if (content) this.show(content, { x, y })\n                else this.hide()\n\n                e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n                return // Stop looking for other matches\n              }\n            }\n          }\n\n          // Hide the tooltip if the event didn't pass through any of the configured triggers.\n          // We use the `this._isShown` condition as a little performance optimization tweak\n          // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).\n          if (this._isShown) this.hide()\n        })\n        .on('mouseleave.tooltip', (e: MouseEvent) => {\n          e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n          this.hide()\n        })\n    })\n  }\n\n  private _setUpAttributes (): void {\n    const attributesMap = this.config.attributes\n    if (!attributesMap) return\n\n    Object.keys(attributesMap).forEach(attr => {\n      this.div.attr(attr, attributesMap[attr])\n    })\n  }\n\n  public destroy (): void {\n    this.div?.remove()\n  }\n}\n"],"names":["s.tooltip","s.show","s.positionFixed","s"],"mappings":"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"}

package/{src/components → components}/tooltip/style.js

@@ -1,10 +1,10 @@
-import { css, injectGlobal } from '@emotion/css'
+import { css, injectGlobal } from '@emotion/css';
 
-export const root = css`
+const root = css`
   label: tooltip;
-`
+`;
 
-export const variables = injectGlobal`
+const variables = injectGlobal`
   :root {
     --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);
     --vis-tooltip-border-color: #e5e9f7;
@@ -32,9 +32,9 @@ export const variables = injectGlobal`
     --vis-tooltip-border-color: var(--vis-color-grey);
     --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);
   }
-`
+`;
 
-export const tooltip = css`
+const tooltip = css`
   label: tooltip;
   display: inline-block;
   left: 0;
@@ -57,13 +57,16 @@ export const tooltip = css`
   border: solid 1px var(--vis-tooltip-border-color);
   background-color: var(--vis-tooltip-background-color);
   backdrop-filter: var(--vis-tooltip-backdrop-filter);
-`
+`;
 
-export const positionFixed = css`
+const positionFixed = css`
   bottom: unset;
   position: fixed;
-`
+`;
 
-export const show = css`
+const show = css`
   opacity: 1;
-`
+`;
+
+export { positionFixed, root, show, tooltip, variables };
+//# sourceMappingURL=style.js.map

package/components/tooltip/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/tooltip/style.js"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: tooltip;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);\n    --vis-tooltip-border-color: #e5e9f7;\n    --vis-tooltip-text-color: #000;\n    --vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);\n    --vis-tooltip-backdrop-filter: none;\n    --vis-tooltip-padding: 10px 15px;\n\n    --vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);\n    --vis-dark-tooltip-text-color: #e5e9f7;\n    --vis-dark-tooltip-border-color: var(--vis-color-grey);\n    --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);\n    --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);\n    --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);\n    --vis-tooltip-shadow-color: var(--vis-dark-tooltip-shadow-color);\n  }\n\n  body.theme-dark {\n    --vis-tooltip-background-color: rgba(30,30,30, 0.95);\n    --vis-tooltip-text-color: #e5e9f7;\n    --vis-tooltip-border-color: var(--vis-color-grey);\n    --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);\n  }\n`\n\nexport const tooltip = css`\n  label: tooltip;\n  display: inline-block;\n  left: 0;\n  bottom: 0;\n  min-width: max-content;\n  position: absolute;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity;\n  transition-duration: 300ms;\n  user-select: none;\n  z-index: 999999;\n  padding: var(--vis-tooltip-padding);\n  transform: translate(0, -5px);\n  color: var(--vis-tooltip-text-color);\n\n  /* object-fit: contain; */\n  border-radius: 5px;\n  box-shadow: 0 13px 25px 0 var(--vis-tooltip-box-shadow);\n  border: solid 1px var(--vis-tooltip-border-color);\n  background-color: var(--vis-tooltip-background-color);\n  backdrop-filter: var(--vis-tooltip-backdrop-filter);\n`\n\nexport const positionFixed = css`\n  bottom: unset;\n  position: fixed;\n`\n\nexport const show = css`\n  opacity: 1;\n`\n"],"names":[],"mappings":";;AAEY,MAAC,IAAI,GAAG,GAAG,CAAC;AACxB;AACA,EAAC;AACD;AACY,MAAC,SAAS,GAAG,YAAY,CAAC;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AACD;AACY,MAAC,OAAO,GAAG,GAAG,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AACD;AACY,MAAC,aAAa,GAAG,GAAG,CAAC;AACjC;AACA;AACA,EAAC;AACD;AACY,MAAC,IAAI,GAAG,GAAG,CAAC;AACxB;AACA;;;;"}

package/components/topojson-map/config.d.ts

@@ -0,0 +1,99 @@
+import { GeoProjection } from 'd3-geo';
+import { ComponentConfigInterface, ComponentConfig } from "../../core/component/config";
+import { ColorAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
+import { MapPointLabelPosition } from './types';
+export interface TopoJSONMapConfigInterface<AreaDatum, PointDatum = unknown, LinkDatum = unknown> extends ComponentConfigInterface {
+    /** MapProjection (aka D3's GeoProjection) instance. Default: `MapProjection.Kavrayskiy7()` */
+    projection?: GeoProjection;
+    /** Map data in the TopoJSON topology format. Default: `undefined` */
+    topojson?: TopoJSON.Topology;
+    /** Name of the map features to be displayed, e.g. 'countries' or 'counties'. Default: `countries` */
+    mapFeatureName?: string;
+    /** Set initial map fit to points instead of topojson features. Default: `false` */
+    mapFitToPoints?: boolean;
+    /** Initial zoom level. Default: `undefined` */
+    zoomFactor?: number;
+    /** Disable pan / zoom interactions. Default: `false` */
+    disableZoom?: boolean;
+    /** Zoom extent. Default: `[0.5, 6]` */
+    zoomExtent?: number[];
+    /** Zoom animation duration. Default: `400` */
+    zoomDuration?: number;
+    /** Link width value or accessor function. Default: `d => d.width ?? 1` */
+    linkWidth?: NumericAccessor<LinkDatum>;
+    /** Link color value or accessor function. Default: `d => d.color ?? null` */
+    linkColor?: ColorAccessor<LinkDatum>;
+    /** Link cursor value or accessor function. Default: `null` */
+    linkCursor?: StringAccessor<AreaDatum>;
+    /** Link id accessor function. Default: `d => d.id` */
+    linkId?: StringAccessor<LinkDatum>;
+    /** Link source accessor function. Default: `d => d.source` */
+    linkSource?: ((l: LinkDatum) => number | string | PointDatum);
+    /** Link target accessor function. Default: `d => d.target` */
+    linkTarget?: ((l: LinkDatum) => number | string | PointDatum);
+    /** Area id accessor function corresponding to the feature id from TopoJSON. Default: `d => d.id ?? ''` */
+    areaId?: StringAccessor<AreaDatum>;
+    /** Area color value or accessor function. Default: `d => d.color ?? null` */
+    areaColor?: ColorAccessor<AreaDatum>;
+    /** Area cursor value or accessor function. Default: `null` */
+    areaCursor?: StringAccessor<AreaDatum>;
+    /** Point color accessor. Default: `d => d.color ?? null` */
+    pointColor?: ColorAccessor<PointDatum>;
+    /** Point radius accessor. Default: `d => d.radius ?? 8` */
+    pointRadius?: NumericAccessor<PointDatum>;
+    /** Point stroke width accessor. Default: `d => d.strokeWidth ?? null` */
+    pointStrokeWidth?: NumericAccessor<PointDatum>;
+    /** Point cursor constant value or accessor function. Default: `null` */
+    pointCursor?: StringAccessor<AreaDatum>;
+    /** Point longitude accessor function. Default: `d => d.longitude ?? null` */
+    longitude?: NumericAccessor<PointDatum>;
+    /** Point latitude accessor function. Default: `d => d.latitude ?? null` */
+    latitude?: NumericAccessor<PointDatum>;
+    /** Point label accessor function. Default: `undefined` */
+    pointLabel?: StringAccessor<PointDatum>;
+    /** Point label position. Default: `Position.Bottom` */
+    pointLabelPosition?: MapPointLabelPosition;
+    /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */
+    pointLabelTextBrightnessRatio?: number;
+    /** Point id accessor function. Default: `d => d.id` */
+    pointId?: ((d: PointDatum, i: number) => string);
+    /** Enables blur and blending between neighbouring points. Default: `false` */
+    heatmapMode?: boolean;
+    /** Heatmap blur filter stdDeviation value. Default: `10` */
+    heatmapModeBlurStdDeviation?: number;
+    /** Zoom level at which the heatmap mode will be disabled. Default: `2.5` */
+    heatmapModeZoomLevelThreshold?: number;
+}
+export declare class TopoJSONMapConfig<AreaDatum, PointDatum = unknown, LinkDatum = unknown> extends ComponentConfig implements TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> {
+    projection: GeoProjection;
+    duration: number;
+    topojson: any;
+    mapFeatureName: string;
+    mapFitToPoints: boolean;
+    zoomExtent: number[];
+    zoomDuration: number;
+    disableZoom: boolean;
+    zoomFactor: any;
+    linkWidth: (d: LinkDatum) => number;
+    linkColor: (d: LinkDatum) => string;
+    linkCursor: any;
+    linkId: (d: LinkDatum, i: number | undefined) => string;
+    linkSource: (d: LinkDatum) => (number | string | PointDatum);
+    linkTarget: (d: LinkDatum) => (number | string | PointDatum);
+    areaId: (d: AreaDatum) => string;
+    areaColor: (d: AreaDatum) => string;
+    areaCursor: any;
+    longitude: (d: PointDatum) => number;
+    latitude: (d: PointDatum) => number;
+    pointColor: (d: PointDatum) => string;
+    pointRadius: (d: PointDatum) => number;
+    pointStrokeWidth: (d: PointDatum) => number;
+    pointCursor: any;
+    pointLabel: any;
+    pointLabelPosition: MapPointLabelPosition;
+    pointLabelTextBrightnessRatio: number;
+    pointId: (d: PointDatum) => string;
+    heatmapMode: boolean;
+    heatmapModeBlurStdDeviation: number;
+    heatmapModeZoomLevelThreshold: number;
+}

package/components/topojson-map/config.js

@@ -0,0 +1,42 @@
+import { ComponentConfig } from '../../core/component/config.js';
+import { MapProjection, MapPointLabelPosition } from './types.js';
+
+class TopoJSONMapConfig extends ComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.projection = MapProjection.Kavrayskiy7();
+        this.duration = 1500;
+        this.topojson = undefined;
+        this.mapFeatureName = 'countries';
+        this.mapFitToPoints = false;
+        this.zoomExtent = [0.5, 6];
+        this.zoomDuration = 400;
+        this.disableZoom = false;
+        this.zoomFactor = undefined;
+        this.linkWidth = (d) => { var _a; return (_a = d['width']) !== null && _a !== void 0 ? _a : 1; };
+        this.linkColor = (d) => { var _a; return (_a = d['color']) !== null && _a !== void 0 ? _a : null; };
+        this.linkCursor = null;
+        this.linkId = (d, i) => { var _a; return `${(_a = d['id']) !== null && _a !== void 0 ? _a : i}`; };
+        this.linkSource = (d) => d['source'];
+        this.linkTarget = (d) => d['target'];
+        this.areaId = (d) => { var _a; return (_a = d['id']) !== null && _a !== void 0 ? _a : ''; };
+        this.areaColor = (d) => { var _a; return (_a = d['color']) !== null && _a !== void 0 ? _a : null; };
+        this.areaCursor = null;
+        this.longitude = (d) => d['longitude'];
+        this.latitude = (d) => d['latitude'];
+        this.pointColor = (d) => { var _a; return (_a = d['color']) !== null && _a !== void 0 ? _a : null; };
+        this.pointRadius = (d) => { var _a; return (_a = d['radius']) !== null && _a !== void 0 ? _a : 8; };
+        this.pointStrokeWidth = (d) => { var _a; return (_a = d['strokeWidth']) !== null && _a !== void 0 ? _a : 0; };
+        this.pointCursor = null;
+        this.pointLabel = undefined;
+        this.pointLabelPosition = MapPointLabelPosition.Bottom;
+        this.pointLabelTextBrightnessRatio = 0.65;
+        this.pointId = (d) => d['id'];
+        this.heatmapMode = false;
+        this.heatmapModeBlurStdDeviation = 8;
+        this.heatmapModeZoomLevelThreshold = 2.5;
+    }
+}
+
+export { TopoJSONMapConfig };
+//# sourceMappingURL=config.js.map

package/components/topojson-map/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/topojson-map/config.ts"],"sourcesContent":["/* eslint-disable dot-notation */\nimport { GeoProjection } from 'd3-geo'\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\n// Local Types\nimport { MapProjection, MapPointLabelPosition } from './types'\n\nexport interface TopoJSONMapConfigInterface<\n  AreaDatum,\n  PointDatum = unknown,\n  LinkDatum = unknown,\n> extends ComponentConfigInterface {\n  // General\n  /** MapProjection (aka D3's GeoProjection) instance. Default: `MapProjection.Kavrayskiy7()` */\n  projection?: GeoProjection;\n  /** Map data in the TopoJSON topology format. Default: `undefined` */\n  topojson?: TopoJSON.Topology;\n  /** Name of the map features to be displayed, e.g. 'countries' or 'counties'. Default: `countries` */\n  mapFeatureName?: string;\n  /** Set initial map fit to points instead of topojson features. Default: `false` */\n  mapFitToPoints?: boolean;\n  /** Initial zoom level. Default: `undefined` */\n  zoomFactor?: number;\n  /** Disable pan / zoom interactions. Default: `false` */\n  disableZoom?: boolean;\n  /** Zoom extent. Default: `[0.5, 6]` */\n  zoomExtent?: number[];\n  /** Zoom animation duration. Default: `400` */\n  zoomDuration?: number;\n\n  /** Link width value or accessor function. Default: `d => d.width ?? 1` */\n  linkWidth?: NumericAccessor<LinkDatum>;\n  /** Link color value or accessor function. Default: `d => d.color ?? null` */\n  linkColor?: ColorAccessor<LinkDatum>;\n  /** Link cursor value or accessor function. Default: `null` */\n  linkCursor?: StringAccessor<AreaDatum>;\n  /** Link id accessor function. Default: `d => d.id` */\n  linkId?: StringAccessor<LinkDatum>;\n  /** Link source accessor function. Default: `d => d.source` */\n  linkSource?: ((l: LinkDatum) => number | string | PointDatum);\n  /** Link target accessor function. Default: `d => d.target` */\n  linkTarget?: ((l: LinkDatum) => number | string | PointDatum);\n\n  /** Area id accessor function corresponding to the feature id from TopoJSON. Default: `d => d.id ?? ''` */\n  areaId?: StringAccessor<AreaDatum>;\n  /** Area color value or accessor function. Default: `d => d.color ?? null` */\n  areaColor?: ColorAccessor<AreaDatum>;\n  /** Area cursor value or accessor function. Default: `null` */\n  areaCursor?: StringAccessor<AreaDatum>;\n\n  /** Point color accessor. Default: `d => d.color ?? null` */\n  pointColor?: ColorAccessor<PointDatum>;\n  /** Point radius accessor. Default: `d => d.radius ?? 8` */\n  pointRadius?: NumericAccessor<PointDatum>;\n  /** Point stroke width accessor. Default: `d => d.strokeWidth ?? null` */\n  pointStrokeWidth?: NumericAccessor<PointDatum>;\n  /** Point cursor constant value or accessor function. Default: `null` */\n  pointCursor?: StringAccessor<AreaDatum>;\n  /** Point longitude accessor function. Default: `d => d.longitude ?? null` */\n  longitude?: NumericAccessor<PointDatum>;\n  /** Point latitude accessor function. Default: `d => d.latitude ?? null` */\n  latitude?: NumericAccessor<PointDatum>;\n  /** Point label accessor function. Default: `undefined` */\n  pointLabel?: StringAccessor<PointDatum>;\n  /** Point label position. Default: `Position.Bottom` */\n  pointLabelPosition?: MapPointLabelPosition;\n  /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */\n  pointLabelTextBrightnessRatio?: number;\n  /** Point id accessor function. Default: `d => d.id` */\n  pointId?: ((d: PointDatum, i: number) => string);\n\n  /** Enables blur and blending between neighbouring points. Default: `false` */\n  heatmapMode?: boolean;\n  /** Heatmap blur filter stdDeviation value. Default: `10` */\n  heatmapModeBlurStdDeviation?: number;\n  /** Zoom level at which the heatmap mode will be disabled. Default: `2.5` */\n  heatmapModeZoomLevelThreshold?: number;\n}\n\nexport class TopoJSONMapConfig<\n  AreaDatum,\n  PointDatum = unknown,\n  LinkDatum = unknown,\n> extends ComponentConfig implements TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> {\n  projection = MapProjection.Kavrayskiy7()\n  duration = 1500\n  topojson = undefined\n  mapFeatureName = 'countries'\n  mapFitToPoints = false\n\n  zoomExtent = [0.5, 6]\n  zoomDuration = 400\n  disableZoom = false\n  zoomFactor = undefined\n\n  linkWidth = (d: LinkDatum): number => d['width'] ?? 1\n  linkColor = (d: LinkDatum): string => d['color'] ?? null\n  linkCursor = null\n  linkId = (d: LinkDatum, i: number | undefined): string => `${d['id'] ?? i}`\n  linkSource = (d: LinkDatum): (number | string | PointDatum) => d['source']\n  linkTarget = (d: LinkDatum): (number | string | PointDatum) => d['target']\n\n  areaId = (d: AreaDatum): string => d['id'] ?? ''\n  areaColor = (d: AreaDatum): string => d['color'] ?? null\n  areaCursor = null\n\n  longitude = (d: PointDatum): number => d['longitude']\n  latitude = (d: PointDatum): number => d['latitude']\n  pointColor = (d: PointDatum): string => d['color'] ?? null\n  pointRadius = (d: PointDatum): number => d['radius'] ?? 8\n  pointStrokeWidth = (d: PointDatum): number => d['strokeWidth'] ?? 0\n  pointCursor = null\n  pointLabel = undefined\n  pointLabelPosition = MapPointLabelPosition.Bottom\n  pointLabelTextBrightnessRatio = 0.65\n  pointId = (d: PointDatum): string => d['id']\n\n  heatmapMode = false\n  heatmapModeBlurStdDeviation = 8\n  heatmapModeZoomLevelThreshold = 2.5\n}\n"],"names":[],"mappings":"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"}

package/components/topojson-map/index.d.ts

@@ -0,0 +1,52 @@
+import { Selection } from 'd3-selection';
+import { D3ZoomEvent, ZoomTransform } from 'd3-zoom';
+import { ComponentCore } from "../../core/component";
+import { MapGraphDataModel } from "../../data-models/map-graph";
+import { MapData } from './types';
+import { TopoJSONMapConfig, TopoJSONMapConfigInterface } from './config';
+import * as s from './style';
+export declare class TopoJSONMap<AreaDatum, PointDatum = unknown, LinkDatum = unknown> extends ComponentCore<MapData<AreaDatum, PointDatum, LinkDatum>, TopoJSONMapConfig<AreaDatum, PointDatum, LinkDatum>, TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>> {
+    static selectors: typeof s;
+    config: TopoJSONMapConfig<AreaDatum, PointDatum, LinkDatum>;
+    datamodel: MapGraphDataModel<AreaDatum, PointDatum, LinkDatum>;
+    g: Selection<SVGGElement, unknown, null, undefined>;
+    private _firstRender;
+    private _isResizing;
+    private _initialScale;
+    private _center;
+    private _currentZoomLevel;
+    private _transform;
+    private _path;
+    private _projection;
+    private _prevWidth;
+    private _prevHeight;
+    private _animFrameId;
+    private _featureCollection;
+    private _zoomBehavior;
+    private _backgroundRect;
+    private _featuresGroup;
+    private _linksGroup;
+    private _pointsGroup;
+    events: {
+        [x: string]: {};
+    };
+    constructor(config?: TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>, data?: MapData<AreaDatum, PointDatum, LinkDatum>);
+    setData(data: MapData<AreaDatum, PointDatum, LinkDatum>): void;
+    setConfig(config?: TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>): void;
+    _render(customDuration?: number): void;
+    _renderBackground(): void;
+    _renderGroups(duration: number): void;
+    _renderMap(duration: number): void;
+    _renderLinks(duration: number): void;
+    _renderPoints(duration: number): void;
+    _fitToPoints(points?: PointDatum[], pad?: number): void;
+    _applyZoom(): void;
+    _onResize(): void;
+    _onZoom(event: D3ZoomEvent<any, any>): void;
+    _onZoomHandler(transform: ZoomTransform, isMouseEvent: boolean, isExternalEvent: boolean): void;
+    zoomIn(increment?: number): void;
+    zoomOut(increment?: number): void;
+    setZoom(zoomLevel: number): void;
+    fitView(): void;
+    destroy(): void;
+}