@unovis/ts 1.0.0-alpha.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/topojson-map/types.ts"],"sourcesContent":["import { Feature, Geometry } from 'geojson'\nimport {\n  geoMercator,\n  geoEquirectangular,\n  geoAzimuthalEqualArea,\n  geoAzimuthalEquidistant,\n  geoGnomonic,\n  geoOrthographic,\n  geoStereographic,\n  geoEqualEarth,\n  geoAlbersUsa,\n  geoAlbers,\n  geoConicConformal,\n  geoConicEqualArea,\n  geoConicEquidistant,\n  geoTransverseMercator,\n  geoNaturalEarth1,\n} from 'd3-geo'\n\nexport type MapData<AreaDatum, PointDatum = unknown, LinkDatum = unknown> = {\n  areas?: AreaDatum[];\n  points?: PointDatum[];\n  links?: LinkDatum[] ;\n}\n\nexport enum MapPointLabelPosition {\n  Center = 'center',\n  Bottom = 'bottom',\n}\n\nexport type MapFeature<D> = Feature<Geometry> & { data: D }\n\nexport enum MapProjectionKind {\n  Mercator = 'Mercator',\n  Equirectangular = 'Equirectangular',\n  AzimuthalEqualArea = 'AzimuthalEqualArea',\n  AzimuthalEquidistant = 'AzimuthalEquidistant',\n  Gnomonic = 'Gnomonic',\n  Orthographic = 'Orthographic',\n  Stereographic = 'Stereographic',\n  EqualEarth = 'EqualEarth',\n  AlbersUsa = 'AlbersUsa',\n  Albers = 'Albers',\n  ConicConformal = 'ConicConformal',\n  ConicEqualArea = 'ConicEqualArea',\n  ConicEquidistant = 'ConicEquidistant',\n  TransverseMercator = 'TransverseMercator',\n  NaturalEarth1 = 'NaturalEarth1',\n}\n\nexport const MapProjection = {\n  [MapProjectionKind.Mercator]: geoMercator,\n  [MapProjectionKind.Equirectangular]: geoEquirectangular,\n  [MapProjectionKind.AzimuthalEqualArea]: geoAzimuthalEqualArea,\n  [MapProjectionKind.AzimuthalEquidistant]: geoAzimuthalEquidistant,\n  [MapProjectionKind.Gnomonic]: geoGnomonic,\n  [MapProjectionKind.Orthographic]: geoOrthographic,\n  [MapProjectionKind.Stereographic]: geoStereographic,\n  [MapProjectionKind.EqualEarth]: geoEqualEarth,\n  [MapProjectionKind.AlbersUsa]: geoAlbersUsa,\n  [MapProjectionKind.Albers]: geoAlbers,\n  [MapProjectionKind.ConicConformal]: geoConicConformal,\n  [MapProjectionKind.ConicEqualArea]: geoConicEqualArea,\n  [MapProjectionKind.ConicEquidistant]: geoConicEquidistant,\n  [MapProjectionKind.TransverseMercator]: geoTransverseMercator,\n  [MapProjectionKind.NaturalEarth1]: geoNaturalEarth1,\n}\n\n"],"names":[],"mappings":";;IAyBY,sBAGX;AAHD,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA,CAAA;IAIW,kBAgBX;AAhBD,CAAA,UAAY,iBAAiB,EAAA;AAC3B,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,iBAAA,CAAA,iBAAA,CAAA,GAAA,iBAAmC,CAAA;AACnC,IAAA,iBAAA,CAAA,oBAAA,CAAA,GAAA,oBAAyC,CAAA;AACzC,IAAA,iBAAA,CAAA,sBAAA,CAAA,GAAA,sBAA6C,CAAA;AAC7C,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,iBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B,CAAA;AAC7B,IAAA,iBAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AAC/B,IAAA,iBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AACzB,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB,CAAA;AACvB,IAAA,iBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,iBAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjC,IAAA,iBAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjC,IAAA,iBAAA,CAAA,kBAAA,CAAA,GAAA,kBAAqC,CAAA;AACrC,IAAA,iBAAA,CAAA,oBAAA,CAAA,GAAA,oBAAyC,CAAA;AACzC,IAAA,iBAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AACjC,CAAC,EAhBW,iBAAiB,KAAjB,iBAAiB,GAgB5B,EAAA,CAAA,CAAA,CAAA;AAEY,MAAA,aAAa,GAAG;AAC3B,IAAA,CAAC,iBAAiB,CAAC,QAAQ,GAAG,WAAW;AACzC,IAAA,CAAC,iBAAiB,CAAC,eAAe,GAAG,kBAAkB;AACvD,IAAA,CAAC,iBAAiB,CAAC,kBAAkB,GAAG,qBAAqB;AAC7D,IAAA,CAAC,iBAAiB,CAAC,oBAAoB,GAAG,uBAAuB;AACjE,IAAA,CAAC,iBAAiB,CAAC,QAAQ,GAAG,WAAW;AACzC,IAAA,CAAC,iBAAiB,CAAC,YAAY,GAAG,eAAe;AACjD,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG,gBAAgB;AACnD,IAAA,CAAC,iBAAiB,CAAC,UAAU,GAAG,aAAa;AAC7C,IAAA,CAAC,iBAAiB,CAAC,SAAS,GAAG,YAAY;AAC3C,IAAA,CAAC,iBAAiB,CAAC,MAAM,GAAG,SAAS;AACrC,IAAA,CAAC,iBAAiB,CAAC,cAAc,GAAG,iBAAiB;AACrD,IAAA,CAAC,iBAAiB,CAAC,cAAc,GAAG,iBAAiB;AACrD,IAAA,CAAC,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB;AACzD,IAAA,CAAC,iBAAiB,CAAC,kBAAkB,GAAG,qBAAqB;AAC7D,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG,gBAAgB;;;;;"}

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

@@ -0,0 +1,3 @@
+import { NumericAccessor } from "../../types/accessor";
+export declare function getLonLat<Datum>(d: Datum, pointLongitude: NumericAccessor<Datum>, pointLatitude: NumericAccessor<Datum>): [number, number];
+export declare function arc(source?: number[], target?: number[], curvature?: number): string;

package/components/topojson-map/utils.js

@@ -0,0 +1,30 @@
+import { getNumber } from '../../utils/data.js';
+
+function getLonLat(d, pointLongitude, pointLatitude) {
+    const lat = getNumber(d, pointLatitude);
+    const lon = getNumber(d, pointLongitude);
+    return [lon, lat];
+}
+function arc(source, target, curvature) {
+    if (!target || !source)
+        return 'M0,0,l0,0z';
+    const d = 3;
+    const angleOffset = curvature || 0;
+    const s = { x: source[0], y: source[1] };
+    const t = { x: target[0], y: target[1] };
+    const ds = { x: (t.x - s.x) / d, y: (t.y - s.y) / d };
+    const dt = { x: (s.x - t.x) / d, y: (s.y - t.y) / d };
+    let angle = 0.16667 * Math.PI * (1 + angleOffset);
+    if (s.x < t.x)
+        angle = -angle;
+    const cs = Math.cos(angle);
+    const ss = Math.sin(angle);
+    const ct = Math.cos(-angle);
+    const st = Math.sin(-angle);
+    const dds = { x: (cs * ds.x) - (ss * ds.y), y: (ss * ds.x) + (cs * ds.y) };
+    const ddt = { x: (ct * dt.x) - (st * dt.y), y: (st * dt.x) + (ct * dt.y) };
+    return `M${s.x},${s.y} C${s.x + dds.x},${s.y + dds.y} ${t.x + ddt.x},${t.y + ddt.y} ${t.x},${t.y}`;
+}
+
+export { arc, getLonLat };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/topojson-map/utils.ts"],"sourcesContent":["import { getNumber } from 'utils/data'\n\n// Config\nimport { NumericAccessor } from 'types/accessor'\n\nexport function getLonLat<Datum> (d: Datum, pointLongitude: NumericAccessor<Datum>, pointLatitude: NumericAccessor<Datum>): [number, number] {\n  const lat = getNumber(d, pointLatitude)\n  const lon = getNumber(d, pointLongitude)\n  return [lon, lat]\n}\n\nexport function arc (source?: number[], target?: number[], curvature?: number): string {\n  if (!target || !source) return 'M0,0,l0,0z'\n  const d = 3\n  const angleOffset = curvature || 0\n  const s = { x: source[0], y: source[1] }\n  const t = { x: target[0], y: target[1] }\n  const ds = { x: (t.x - s.x) / d, y: (t.y - s.y) / d }\n  const dt = { x: (s.x - t.x) / d, y: (s.y - t.y) / d }\n  let angle = 0.16667 * Math.PI * (1 + angleOffset)\n  if (s.x < t.x) angle = -angle\n  const cs = Math.cos(angle)\n  const ss = Math.sin(angle)\n  const ct = Math.cos(-angle)\n  const st = Math.sin(-angle)\n  const dds = { x: (cs * ds.x) - (ss * ds.y), y: (ss * ds.x) + (cs * ds.y) }\n  const ddt = { x: (ct * dt.x) - (st * dt.y), y: (st * dt.x) + (ct * dt.y) }\n  return `M${s.x},${s.y} C${s.x + dds.x},${s.y + dds.y} ${t.x + ddt.x},${t.y + ddt.y} ${t.x},${t.y}`\n}\n"],"names":[],"mappings":"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"}

package/components/vis-controls/config.d.ts

@@ -0,0 +1,12 @@
+import { Config } from "../../core/config";
+import { VisControlItemInterface, VisControlsOrientation } from './types';
+export interface VisControlsConfigInterface {
+    /** Controls items array, VisControlItemInterface[]. Default: `[]` */
+    items?: VisControlItemInterface[];
+    /** Controls orientation. `VisControlsOrientation.Horizontal` or `VisControlsOrientation.Horizontal`. Default: `VisControlsOrientation.Horizontal` */
+    orientation?: VisControlsOrientation;
+}
+export declare class VisControlsConfig extends Config implements VisControlsConfigInterface {
+    items: any[];
+    orientation: VisControlsOrientation;
+}

package/components/vis-controls/config.js

@@ -0,0 +1,13 @@
+import { Config } from '../../core/config/index.js';
+import { VisControlsOrientation } from './types.js';
+
+class VisControlsConfig extends Config {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.orientation = VisControlsOrientation.Horizontal;
+    }
+}
+
+export { VisControlsConfig };
+//# sourceMappingURL=config.js.map

package/components/vis-controls/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/vis-controls/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\n// Local Types\nimport { VisControlItemInterface, VisControlsOrientation } from './types'\n\nexport interface VisControlsConfigInterface {\n  /** Controls items array, VisControlItemInterface[]. Default: `[]` */\n  items?: VisControlItemInterface[];\n  /** Controls orientation. `VisControlsOrientation.Horizontal` or `VisControlsOrientation.Horizontal`. Default: `VisControlsOrientation.Horizontal` */\n  orientation?: VisControlsOrientation;\n}\n\nexport class VisControlsConfig extends Config implements VisControlsConfigInterface {\n  items = []\n  orientation = VisControlsOrientation.Horizontal\n}\n"],"names":[],"mappings":";;;AAYM,MAAO,iBAAkB,SAAQ,MAAM,CAAA;AAA7C,IAAA,WAAA,GAAA;;QACE,IAAK,CAAA,KAAA,GAAG,EAAE,CAAA;AACV,QAAA,IAAA,CAAA,WAAW,GAAG,sBAAsB,CAAC,UAAU,CAAA;KAChD;AAAA;;;;"}

package/components/vis-controls/index.d.ts

@@ -0,0 +1,14 @@
+import { Selection } from 'd3-selection';
+import { VisControlItemInterface } from './types';
+import { VisControlsConfig, VisControlsConfigInterface } from './config';
+export declare class VisControls {
+    div: Selection<HTMLElement, any, HTMLElement, any>;
+    element: HTMLElement;
+    config: VisControlsConfig;
+    protected _container: HTMLElement;
+    protected _items: Selection<HTMLElement, any, HTMLElement, any>;
+    constructor(element: HTMLElement, config?: VisControlsConfigInterface);
+    update(config: VisControlsConfigInterface): void;
+    render(): void;
+    _onItemClick(event: MouseEvent, item: VisControlItemInterface): void;
+}

package/components/vis-controls/index.js

@@ -0,0 +1,52 @@
+import { select } from 'd3-selection';
+import { VisControlsOrientation } from './types.js';
+import { VisControlsConfig } from './config.js';
+import { root, items, horizontalItems, item, itemButton, borderLeft, borderTop, borderRight, borderBottom, disabled } from './style.js';
+
+class VisControls {
+    constructor(element, config) {
+        this._container = element;
+        this.div = select(this._container)
+            .append('div')
+            .attr('class', root);
+        this.element = this.div.node();
+        this._items = this.div.append('div')
+            .attr('class', items);
+        if (config)
+            this.update(config);
+    }
+    update(config) {
+        this.config = new VisControlsConfig().init(config);
+        this.render();
+    }
+    render() {
+        const { config: { items, orientation } } = this;
+        this._items
+            .classed(horizontalItems, orientation === VisControlsOrientation.Horizontal);
+        const controlItems = this._items.selectAll(`.${item}`)
+            .data(items);
+        const controlItemsEnter = controlItems.enter()
+            .append('div')
+            .attr('class', item)
+            .on('click', this._onItemClick.bind(this));
+        controlItemsEnter.append('button')
+            .attr('class', itemButton);
+        const controlItemsMerged = controlItemsEnter.merge(controlItems);
+        controlItemsMerged
+            .classed(borderLeft, d => d.borderLeft)
+            .classed(borderTop, d => d.borderTop)
+            .classed(borderRight, d => d.borderRight)
+            .classed(borderBottom, d => d.borderBottom)
+            .classed(disabled, d => d.disabled);
+        controlItemsMerged.select(`.${itemButton}`)
+            .html(item => item.icon);
+        controlItems.exit().remove();
+    }
+    _onItemClick(event, item) {
+        var _a;
+        (_a = item.callback) === null || _a === void 0 ? void 0 : _a.call(item, event);
+    }
+}
+
+export { VisControls };
+//# sourceMappingURL=index.js.map

package/components/vis-controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/vis-controls/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\n\n// Local Types\nimport { VisControlItemInterface, VisControlsOrientation } from './types'\n\n// Config\nimport { VisControlsConfig, VisControlsConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class VisControls {\n  div: Selection<HTMLElement, any, HTMLElement, any>\n  element: HTMLElement\n  config: VisControlsConfig\n  protected _container: HTMLElement\n  protected _items: Selection<HTMLElement, any, HTMLElement, any>\n\n  constructor (element: HTMLElement, config?: VisControlsConfigInterface) {\n    this._container = element\n\n    this.div = select(this._container)\n      .append('div')\n      .attr('class', s.root)\n    this.element = this.div.node()\n    this._items = this.div.append('div')\n      .attr('class', s.items)\n\n    if (config) this.update(config)\n  }\n\n  update (config: VisControlsConfigInterface): void {\n    this.config = new VisControlsConfig().init(config)\n    this.render()\n  }\n\n  render (): void {\n    const { config: { items, orientation } } = this\n    this._items\n      .classed(s.horizontalItems, orientation === VisControlsOrientation.Horizontal)\n    const controlItems = this._items.selectAll(`.${s.item}`)\n      .data(items) as Selection<HTMLDivElement, any, HTMLDivElement, any>\n\n    const controlItemsEnter = controlItems.enter()\n      .append('div')\n      .attr('class', s.item)\n      .on('click', this._onItemClick.bind(this))\n\n    controlItemsEnter.append('button')\n      .attr('class', s.itemButton)\n\n    const controlItemsMerged = controlItemsEnter.merge(controlItems)\n    controlItemsMerged\n      .classed(s.borderLeft, d => d.borderLeft)\n      .classed(s.borderTop, d => d.borderTop)\n      .classed(s.borderRight, d => d.borderRight)\n      .classed(s.borderBottom, d => d.borderBottom)\n      .classed(s.disabled, d => d.disabled)\n    controlItemsMerged.select(`.${s.itemButton}`)\n      .html(item => item.icon)\n\n    controlItems.exit().remove()\n  }\n\n  _onItemClick (event: MouseEvent, item: VisControlItemInterface): void {\n    item.callback?.(event)\n  }\n}\n"],"names":["s.root","s.items","s.horizontalItems","s.item","s.itemButton","s.borderLeft","s.borderTop","s.borderRight","s.borderBottom","s.disabled"],"mappings":";;;;;MAWa,WAAW,CAAA;IAOtB,WAAa,CAAA,OAAoB,EAAE,MAAmC,EAAA;AACpE,QAAA,IAAI,CAAC,UAAU,GAAG,OAAO,CAAA;QAEzB,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;aAC/B,MAAM,CAAC,KAAK,CAAC;AACb,aAAA,IAAI,CAAC,OAAO,EAAEA,IAAM,CAAC,CAAA;QACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAA;QAC9B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;AACjC,aAAA,IAAI,CAAC,OAAO,EAAEC,KAAO,CAAC,CAAA;AAEzB,QAAA,IAAI,MAAM;AAAE,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;KAChC;AAED,IAAA,MAAM,CAAE,MAAkC,EAAA;QACxC,IAAI,CAAC,MAAM,GAAG,IAAI,iBAAiB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAClD,IAAI,CAAC,MAAM,EAAE,CAAA;KACd;IAED,MAAM,GAAA;QACJ,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,GAAG,IAAI,CAAA;AAC/C,QAAA,IAAI,CAAC,MAAM;aACR,OAAO,CAACC,eAAiB,EAAE,WAAW,KAAK,sBAAsB,CAAC,UAAU,CAAC,CAAA;AAChF,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAI,CAAA,EAAAC,IAAM,EAAE,CAAC;aACrD,IAAI,CAAC,KAAK,CAAwD,CAAA;AAErE,QAAA,MAAM,iBAAiB,GAAG,YAAY,CAAC,KAAK,EAAE;aAC3C,MAAM,CAAC,KAAK,CAAC;AACb,aAAA,IAAI,CAAC,OAAO,EAAEA,IAAM,CAAC;AACrB,aAAA,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AAE5C,QAAA,iBAAiB,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC/B,aAAA,IAAI,CAAC,OAAO,EAAEC,UAAY,CAAC,CAAA;QAE9B,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;QAChE,kBAAkB;AACf,aAAA,OAAO,CAACC,UAAY,EAAE,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC;AACxC,aAAA,OAAO,CAACC,SAAW,EAAE,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;AACtC,aAAA,OAAO,CAACC,WAAa,EAAE,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;AAC1C,aAAA,OAAO,CAACC,YAAc,EAAE,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC;AAC5C,aAAA,OAAO,CAACC,QAAU,EAAE,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvC,kBAAkB,CAAC,MAAM,CAAC,CAAA,CAAA,EAAIL,UAAY,EAAE,CAAC;aAC1C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAA;AAE1B,QAAA,YAAY,CAAC,IAAI,EAAE,CAAC,MAAM,EAAE,CAAA;KAC7B;IAED,YAAY,CAAE,KAAiB,EAAE,IAA6B,EAAA;;QAC5D,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAb,IAAI,EAAY,KAAK,CAAC,CAAA;KACvB;AACF;;;;"}

package/components/vis-controls/style.d.ts

@@ -0,0 +1,11 @@
+export declare const root: string;
+export declare const variables: void;
+export declare const items: string;
+export declare const horizontalItems: string;
+export declare const item: string;
+export declare const itemButton: string;
+export declare const borderLeft: string;
+export declare const borderTop: string;
+export declare const borderRight: string;
+export declare const borderBottom: string;
+export declare const disabled: string;

package/components/vis-controls/style.js

@@ -0,0 +1,75 @@
+import { css, injectGlobal } from '@emotion/css';
+import { DEFAULT_ICON_FONT_FAMILY } from '../../styles/css-variables.js';
+
+const root = css `
+  label: vis-controls-component;
+`;
+injectGlobal `
+  :root {
+    --vis-controls-buttons-border-color: rgba(108, 119, 140, 0.15);
+    --vis-controls-buttons-background-color: rgba(255, 255, 255, 1);
+    --vis-controls-button-color: #6c778c;
+    --vis-controls-button-icon-font: ${DEFAULT_ICON_FONT_FAMILY};
+
+    --vis-dark-controls-buttons-border-color:  #6c778c;
+    --vis-dark-controls-buttons-background-color: var(--vis-color-gray);
+    --vis-dark-controls-button-color: #fff;
+  }
+
+  body.theme-dark ${`.${root}`} {
+    --vis-controls-buttons-border-color: var(--vis-dark-controls.buttons-border-color);
+    --vis-controls-buttons-background-color: var(--vis-dark-controls-buttons-background-color);
+    --vis-controls-button-color: var(--vis-dark-controls-button-color);
+  }
+`;
+const items = css `
+  label: items;
+  background-color: var(--vis-controls-buttons-background-color);
+  border: 1px solid var(--vis-controls-buttons-border-color);
+  border-radius: 4px;
+  opacity: 1;
+  transition: all 300ms;
+`;
+const horizontalItems = css `
+  label: horizontal;
+  display: inline-flex;
+`;
+const item = css `
+  label: item;
+`;
+const itemButton = css `
+  label: item-button;
+  font-family: var(--vis-controls-button-icon-font);
+  display: block;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  width: 30px;
+  height: 30px;
+  line-height: 28px;
+  border: none;
+  border-radius: inherit;
+  box-sizing: border-box;
+  color: var(--vis-controls-button-color);
+  background-color: inherit;
+`;
+const borderLeft = css `
+  border-left: 1px solid var(--vis-controls-buttons-border-color);
+`;
+const borderTop = css `
+  border-top: 1px solid var(--vis-controls-buttons-border-color);
+`;
+const borderRight = css `
+  border-right: 1px solid var(--vis-controls-buttons-border-color);
+`;
+const borderBottom = css `
+  border-bottom: 1px solid var(--vis-controls-buttons-border-color);
+`;
+const disabled = css `
+  label: disabled;
+  opacity: 0.4;
+  pointer-events: none;
+`;
+
+export { borderBottom, borderLeft, borderRight, borderTop, disabled, horizontalItems, item, itemButton, items, root };
+//# sourceMappingURL=style.js.map

package/components/vis-controls/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/vis-controls/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { DEFAULT_ICON_FONT_FAMILY } from 'styles/css-variables'\n\nexport const root = css`\n  label: vis-controls-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-controls-buttons-border-color: rgba(108, 119, 140, 0.15);\n    --vis-controls-buttons-background-color: rgba(255, 255, 255, 1);\n    --vis-controls-button-color: #6c778c;\n    --vis-controls-button-icon-font: ${DEFAULT_ICON_FONT_FAMILY};\n\n    --vis-dark-controls-buttons-border-color:  #6c778c;\n    --vis-dark-controls-buttons-background-color: var(--vis-color-gray);\n    --vis-dark-controls-button-color: #fff;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-controls-buttons-border-color: var(--vis-dark-controls.buttons-border-color);\n    --vis-controls-buttons-background-color: var(--vis-dark-controls-buttons-background-color);\n    --vis-controls-button-color: var(--vis-dark-controls-button-color);\n  }\n`\n\nexport const items = css`\n  label: items;\n  background-color: var(--vis-controls-buttons-background-color);\n  border: 1px solid var(--vis-controls-buttons-border-color);\n  border-radius: 4px;\n  opacity: 1;\n  transition: all 300ms;\n`\n\nexport const horizontalItems = css`\n  label: horizontal;\n  display: inline-flex;\n`\n\nexport const item = css`\n  label: item;\n`\n\nexport const itemButton = css`\n  label: item-button;\n  font-family: var(--vis-controls-button-icon-font);\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  width: 30px;\n  height: 30px;\n  line-height: 28px;\n  border: none;\n  border-radius: inherit;\n  box-sizing: border-box;\n  color: var(--vis-controls-button-color);\n  background-color: inherit;\n`\n\nexport const borderLeft = css`\n  border-left: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderTop = css`\n  border-top: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderRight = css`\n  border-right: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const borderBottom = css`\n  border-bottom: 1px solid var(--vis-controls-buttons-border-color);\n`\n\nexport const disabled = css`\n  label: disabled;\n  opacity: 0.4;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEwB,YAAY,CAAA,CAAA;;;;;uCAKE,wBAAwB,CAAA;;;;;;;AAO3C,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;EAe5B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}

package/components/vis-controls/types.d.ts

@@ -0,0 +1,13 @@
+export interface VisControlItemInterface {
+    icon: string;
+    callback?: (event: MouseEvent) => any;
+    disabled?: boolean;
+    borderLeft?: boolean;
+    borderTop?: boolean;
+    borderRight?: boolean;
+    borderBottom?: boolean;
+}
+export declare enum VisControlsOrientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}

package/components/vis-controls/types.js

@@ -0,0 +1,8 @@
+var VisControlsOrientation;
+(function (VisControlsOrientation) {
+    VisControlsOrientation["Horizontal"] = "horizontal";
+    VisControlsOrientation["Vertical"] = "vertical";
+})(VisControlsOrientation || (VisControlsOrientation = {}));
+
+export { VisControlsOrientation };
+//# sourceMappingURL=types.js.map

package/components/vis-controls/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/vis-controls/types.ts"],"sourcesContent":["export interface VisControlItemInterface {\n  icon: string;\n  callback?: (event: MouseEvent) => any;\n  disabled?: boolean;\n  borderLeft?: boolean;\n  borderTop?: boolean;\n  borderRight?: boolean;\n  borderBottom?: boolean;\n}\n\nexport enum VisControlsOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n"],"names":[],"mappings":"IAUY,uBAGX;AAHD,CAAA,UAAY,sBAAsB,EAAA;AAChC,IAAA,sBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AACzB,IAAA,sBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAHW,sBAAsB,KAAtB,sBAAsB,GAGjC,EAAA,CAAA,CAAA;;;;"}

package/components/xy-labels/config.d.ts

@@ -0,0 +1,48 @@
+import { XYComponentConfigInterface, XYComponentConfig } from "../../core/xy-component/config";
+import { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
+import { XYLabel, XYLabelPositioning } from './types';
+export interface XYLabelsConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
+    /** Single Y accessor function. Default: `undefined` */
+    y: NumericAccessor<Datum>;
+    /** Defines how to position the label horizontally: in data space or in screen space. Default: `LabelPositioning.DataSpace` */
+    xPositioning?: GenericAccessor<XYLabelPositioning, Datum>;
+    /** Defines how to position the label vertically: in data space or in screen space. Default: `LabelPositioning.DataSpace` */
+    yPositioning?: GenericAccessor<XYLabelPositioning, Datum>;
+    /** Font size accessor function or constant value in pixels. Default: `12` */
+    labelFontSize?: NumericAccessor<Datum>;
+    /** Label accessor function or string. Default: `undefined` */
+    label?: StringAccessor<Datum>;
+    /** Label color. Default: `undefined` */
+    backgroundColor?: ColorAccessor<Datum>;
+    /** Optional label cursor. Default: `null` */
+    cursor?: StringAccessor<Datum>;
+    /** Label color brightness ratio for switching between dark and light text label color. Default: `0.65` */
+    labelTextBrightnessRatio?: number;
+    /** Enable label clustering. Default: `true` */
+    clustering?: boolean;
+    /** Label accessor for clusters. Default: `undefined` */
+    clusterLabel?: StringAccessor<XYLabel<Datum>[]>;
+    /** Font size accessor for clusters, the value is in pixels. Default: `14` */
+    clusterFontSize?: NumericAccessor<XYLabel<Datum>[]>;
+    /** Background color accessor for clusters. Default: `undefined` */
+    clusterBackgroundColor?: ColorAccessor<XYLabel<Datum>[]>;
+    /** Optional cluster cursor. Default: `null` */
+    clusterCursor?: StringAccessor<XYLabel<Datum>[]>;
+    /** Cluster label color accessor function. Default: `null` */
+    clusterLabelColor?: ColorAccessor<XYLabel<Datum>[]>;
+}
+export declare class XYLabelsConfig<Datum> extends XYComponentConfig<Datum> implements XYLabelsConfigInterface<Datum> {
+    xPositioning: XYLabelPositioning;
+    yPositioning: XYLabelPositioning;
+    labelFontSize: number;
+    label: any;
+    backgroundColor: any;
+    cursor: any;
+    labelTextBrightnessRatio: number;
+    clustering: boolean;
+    clusterLabel: (records: XYLabel<Datum>[]) => string;
+    clusterFontSize: number;
+    clusterBackgroundColor: any;
+    clusterCursor: any;
+    clusterLabelColor: any;
+}

package/components/xy-labels/config.js

@@ -0,0 +1,25 @@
+import { XYComponentConfig } from '../../core/xy-component/config.js';
+import { XYLabelPositioning } from './types.js';
+
+// Core
+class XYLabelsConfig extends XYComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.xPositioning = XYLabelPositioning.DataSpace;
+        this.yPositioning = XYLabelPositioning.DataSpace;
+        this.labelFontSize = 12;
+        this.label = undefined;
+        this.backgroundColor = undefined;
+        this.cursor = null;
+        this.labelTextBrightnessRatio = 0.65;
+        this.clustering = true;
+        this.clusterLabel = (records) => records.length.toString();
+        this.clusterFontSize = 14;
+        this.clusterBackgroundColor = undefined;
+        this.clusterCursor = undefined;
+        this.clusterLabelColor = null;
+    }
+}
+
+export { XYLabelsConfig };
+//# sourceMappingURL=config.js.map

package/components/xy-labels/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/xy-labels/config.ts"],"sourcesContent":["// Core\nimport { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\n// Local Types\nimport { XYLabel, XYLabelPositioning } from './types'\n\nexport interface XYLabelsConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n  /** Single Y accessor function. Default: `undefined` */\n  y: NumericAccessor<Datum>;\n  /** Defines how to position the label horizontally: in data space or in screen space. Default: `LabelPositioning.DataSpace` */\n  xPositioning?: GenericAccessor<XYLabelPositioning, Datum>;\n  /** Defines how to position the label vertically: in data space or in screen space. Default: `LabelPositioning.DataSpace` */\n  yPositioning?: GenericAccessor<XYLabelPositioning, Datum>;\n  /** Font size accessor function or constant value in pixels. Default: `12` */\n  labelFontSize?: NumericAccessor<Datum>;\n  /** Label accessor function or string. Default: `undefined` */\n  label?: StringAccessor<Datum>;\n  /** Label color. Default: `undefined` */\n  backgroundColor?: ColorAccessor<Datum>;\n  /** Optional label cursor. Default: `null` */\n  cursor?: StringAccessor<Datum>;\n  /** Label color brightness ratio for switching between dark and light text label color. Default: `0.65` */\n  labelTextBrightnessRatio?: number;\n  /** Enable label clustering. Default: `true` */\n  clustering?: boolean;\n  /** Label accessor for clusters. Default: `undefined` */\n  clusterLabel?: StringAccessor<XYLabel<Datum>[]>;\n  /** Font size accessor for clusters, the value is in pixels. Default: `14` */\n  clusterFontSize?: NumericAccessor<XYLabel<Datum>[]>;\n  /** Background color accessor for clusters. Default: `undefined` */\n  clusterBackgroundColor?: ColorAccessor<XYLabel<Datum>[]>;\n  /** Optional cluster cursor. Default: `null` */\n  clusterCursor?: StringAccessor<XYLabel<Datum>[]>;\n  /** Cluster label color accessor function. Default: `null` */\n  clusterLabelColor?: ColorAccessor<XYLabel<Datum>[]>;\n}\n\nexport class XYLabelsConfig<Datum> extends XYComponentConfig<Datum> implements XYLabelsConfigInterface<Datum> {\n  xPositioning = XYLabelPositioning.DataSpace\n  yPositioning = XYLabelPositioning.DataSpace\n  labelFontSize = 12\n  label = undefined\n  backgroundColor = undefined\n  cursor = null\n  labelTextBrightnessRatio = 0.65\n\n  clustering = true\n  clusterLabel = (records: XYLabel<Datum>[]): string => records.length.toString()\n  clusterFontSize = 14\n  clusterBackgroundColor = undefined\n  clusterCursor = undefined\n  clusterLabelColor = null\n}\n"],"names":[],"mappings":";;;AAAA;AAwCM,MAAO,cAAsB,SAAQ,iBAAwB,CAAA;AAAnE,IAAA,WAAA,GAAA;;AACE,QAAA,IAAA,CAAA,YAAY,GAAG,kBAAkB,CAAC,SAAS,CAAA;AAC3C,QAAA,IAAA,CAAA,YAAY,GAAG,kBAAkB,CAAC,SAAS,CAAA;QAC3C,IAAa,CAAA,aAAA,GAAG,EAAE,CAAA;QAClB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAe,CAAA,eAAA,GAAG,SAAS,CAAA;QAC3B,IAAM,CAAA,MAAA,GAAG,IAAI,CAAA;QACb,IAAwB,CAAA,wBAAA,GAAG,IAAI,CAAA;QAE/B,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;AACjB,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,OAAyB,KAAa,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAA;QAC/E,IAAe,CAAA,eAAA,GAAG,EAAE,CAAA;QACpB,IAAsB,CAAA,sBAAA,GAAG,SAAS,CAAA;QAClC,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAiB,CAAA,iBAAA,GAAG,IAAI,CAAA;KACzB;AAAA;;;;"}

package/components/xy-labels/index.d.ts

@@ -0,0 +1,15 @@
+import { XYComponentCore } from "../../core/xy-component";
+import { XYLabelsConfig, XYLabelsConfigInterface } from './config';
+import * as s from './style';
+export declare class XYLabels<Datum> extends XYComponentCore<Datum> {
+    static selectors: typeof s;
+    clippable: boolean;
+    config: XYLabelsConfig<Datum>;
+    events: {
+        [x: string]: {};
+    };
+    constructor(config?: XYLabelsConfigInterface<Datum>);
+    _render(customDuration?: number): void;
+    private _getDataToRender;
+    private _getClusteredLabels;
+}

package/components/xy-labels/index.js

@@ -0,0 +1,86 @@
+import { XYComponentCore } from '../../core/xy-component/index.js';
+import { isNumber, getValue, isNumberWithinRange } from '../../utils/data.js';
+import { rectIntersect } from '../../utils/misc.js';
+import { XYLabelPositioning } from './types.js';
+import { XYLabelsConfig } from './config.js';
+import { removeLabels, createLabels, updateLabels, getLabelRenderProps } from './modules/label.js';
+import * as style from './style.js';
+import { labelGroup, cluster, label } from './style.js';
+
+// Core
+class XYLabels extends XYComponentCore {
+    constructor(config) {
+        super();
+        this.clippable = false;
+        this.config = new XYLabelsConfig();
+        this.events = {
+            [XYLabels.selectors.label]: {},
+        };
+        if (config)
+            this.setConfig(config);
+    }
+    _render(customDuration) {
+        const { config } = this;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        const labelGroups = this.g
+            .selectAll(`.${labelGroup}`)
+            .data(this._getDataToRender());
+        labelGroups.exit().call(removeLabels, duration);
+        const labelGroupsEnter = labelGroups.enter().append('g')
+            .attr('class', labelGroup)
+            .call(createLabels);
+        const labelGroupsMerged = labelGroupsEnter
+            .merge(labelGroups)
+            .classed(cluster, d => !!d.records)
+            .classed(label, d => !d.records);
+        labelGroupsMerged.call(updateLabels, config, duration);
+    }
+    _getDataToRender() {
+        var _a, _b;
+        const { config, datamodel } = this;
+        const xRange = this.xScale.range();
+        const yRange = this.xScale.range();
+        const labels = (_b = (_a = datamodel.data) === null || _a === void 0 ? void 0 : _a.reduce((acc, d) => {
+            const xPositioning = getValue(d, config.xPositioning);
+            const yPositioning = getValue(d, config.yPositioning);
+            const props = getLabelRenderProps(d, config, this.xScale, this.yScale);
+            if (((xPositioning !== XYLabelPositioning.DataSpace) || isNumberWithinRange(props.x, xRange)) &&
+                ((yPositioning !== XYLabelPositioning.DataSpace) || isNumberWithinRange(props.y, yRange))) {
+                acc.push(Object.assign(Object.assign({}, d), { _screen: props }));
+            }
+            return acc;
+        }, [])) !== null && _b !== void 0 ? _b : [];
+        return this._getClusteredLabels(labels);
+    }
+    _getClusteredLabels(labels) {
+        const labelsNonOverlapping = [...labels];
+        const clusterMap = new Map();
+        for (let i = 0; i < labelsNonOverlapping.length; i += 1) {
+            const label1 = labelsNonOverlapping[i];
+            for (let j = i + 1; j < labelsNonOverlapping.length; j += 1) {
+                const label2 = labelsNonOverlapping[j];
+                const isIntersecting = rectIntersect(label1._screen, label2._screen);
+                if (isIntersecting) {
+                    if (!clusterMap.has(label1))
+                        clusterMap.set(label1, [label1]);
+                    clusterMap.get(label1).push(label2);
+                    labelsNonOverlapping.splice(j, 1);
+                    j -= 1;
+                }
+            }
+            if (clusterMap.has(label1)) {
+                labelsNonOverlapping.splice(i, 1);
+                i -= 1;
+            }
+        }
+        const clusters = Array.from(clusterMap.values()).map(records => ({
+            _screen: getLabelRenderProps(records, this.config, this.xScale, this.yScale),
+            records,
+        }));
+        return [...labelsNonOverlapping, ...clusters];
+    }
+}
+XYLabels.selectors = style;
+
+export { XYLabels };
+//# sourceMappingURL=index.js.map

package/components/xy-labels/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/xy-labels/index.ts"],"sourcesContent":["// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getValue, isNumber, isNumberWithinRange } from 'utils/data'\nimport { rectIntersect } from 'utils/misc'\n\n// Local Types\nimport { XYLabelCluster, XYLabel, XYLabelPositioning } from './types'\n\n// Config\nimport { XYLabelsConfig, XYLabelsConfigInterface } from './config'\n\n// Modules\nimport { createLabels, updateLabels, removeLabels, getLabelRenderProps } from './modules/label'\n\n// Styles\nimport * as s from './style'\n\nexport class XYLabels<Datum> extends XYComponentCore<Datum> {\n  static selectors = s\n  clippable = false\n  config: XYLabelsConfig<Datum> = new XYLabelsConfig()\n  events = {\n    [XYLabels.selectors.label]: {},\n  }\n\n  constructor (config?: XYLabelsConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const labelGroups = this.g\n      .selectAll<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>>(`.${s.labelGroup}`)\n      .data(this._getDataToRender())\n\n    labelGroups.exit().call(removeLabels, duration)\n\n    const labelGroupsEnter = labelGroups.enter().append('g')\n      .attr('class', s.labelGroup)\n      .call(createLabels)\n\n    const labelGroupsMerged = labelGroupsEnter\n      .merge(labelGroups)\n      .classed(s.cluster, d => !!(d as XYLabelCluster<Datum>).records)\n      .classed(s.label, d => !(d as XYLabelCluster<Datum>).records)\n\n    labelGroupsMerged.call(updateLabels, config, duration)\n  }\n\n  private _getDataToRender (): (XYLabel<Datum> | XYLabelCluster<Datum>)[] {\n    const { config, datamodel } = this\n\n    const xRange = this.xScale.range() as [number, number]\n    const yRange = this.xScale.range() as [number, number]\n\n    const labels = datamodel.data?.reduce<XYLabel<Datum>[]>((acc, d) => {\n      const xPositioning = getValue<Datum, XYLabelPositioning>(d, config.xPositioning)\n      const yPositioning = getValue<Datum, XYLabelPositioning>(d, config.yPositioning)\n      const props = getLabelRenderProps(d, config, this.xScale, this.yScale)\n\n      if (\n        ((xPositioning !== XYLabelPositioning.DataSpace) || isNumberWithinRange(props.x, xRange)) &&\n        ((yPositioning !== XYLabelPositioning.DataSpace) || isNumberWithinRange(props.y, yRange))\n      ) {\n        acc.push({ ...d, _screen: props })\n      }\n\n      return acc\n    }, []) ?? []\n\n    return this._getClusteredLabels(labels)\n  }\n\n  private _getClusteredLabels (labels: XYLabel<Datum>[]): (XYLabel<Datum> | XYLabelCluster<Datum>)[] {\n    const labelsNonOverlapping = [...labels]\n    const clusterMap = new Map<XYLabel<Datum>, XYLabel<Datum>[]>()\n    for (let i = 0; i < labelsNonOverlapping.length; i += 1) {\n      const label1 = labelsNonOverlapping[i]\n      for (let j = i + 1; j < labelsNonOverlapping.length; j += 1) {\n        const label2 = labelsNonOverlapping[j]\n        const isIntersecting = rectIntersect(label1._screen, label2._screen)\n        if (isIntersecting) {\n          if (!clusterMap.has(label1)) clusterMap.set(label1, [label1])\n          clusterMap.get(label1).push(label2)\n          labelsNonOverlapping.splice(j, 1)\n          j -= 1\n        }\n      }\n\n      if (clusterMap.has(label1)) {\n        labelsNonOverlapping.splice(i, 1)\n        i -= 1\n      }\n    }\n\n    const clusters = Array.from(clusterMap.values()).map(records => ({\n      _screen: getLabelRenderProps(records, this.config, this.xScale, this.yScale),\n      records,\n    }))\n\n    return [...labelsNonOverlapping, ...clusters]\n  }\n}\n"],"names":["s.labelGroup","s.cluster","s.label","s"],"mappings":"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"}

package/components/xy-labels/modules/label.d.ts

@@ -0,0 +1,9 @@
+import { Selection } from 'd3-selection';
+import { ContinuousScale } from "../../../types/scale";
+import { XYLabelsConfig } from '../config';
+import { XYLabel, XYLabelCluster, XYLabelPositioning, XYLabelRenderProps } from '../types';
+export declare function createLabels<Datum>(selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>): void;
+export declare function updateLabels<Datum>(selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>, config: XYLabelsConfig<Datum>, duration: number): void;
+export declare function removeLabels<Datum>(selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>, duration: number): void;
+export declare function getLabelPosition(value: number, positioning: XYLabelPositioning, scale: ContinuousScale): number;
+export declare function getLabelRenderProps<Datum>(data: Datum | XYLabel<Datum>[], config: XYLabelsConfig<Datum>, xScale: ContinuousScale, yScale: ContinuousScale): XYLabelRenderProps;

package/components/xy-labels/modules/label.js

@@ -0,0 +1,105 @@
+import { select } from 'd3-selection';
+import { mean } from 'd3-array';
+import { color } from 'd3-color';
+import { smartTransition } from '../../../utils/d3.js';
+import { isStringCSSVariable, getCSSVariableValue } from '../../../utils/misc.js';
+import { getColor, hexToBrightness } from '../../../utils/color.js';
+import { getString, getNumber, getValue } from '../../../utils/data.js';
+import { XYLabelPositioning } from '../types.js';
+
+function createLabels(selection) {
+    selection.attr('transform', d => `translate(${d._screen.x},${d._screen.y})`);
+    selection.append('rect').style('fill', d => d._screen.backgroundColor);
+    selection.append('text')
+        .style('text-anchor', 'middle')
+        .style('dominant-baseline', 'central')
+        .style('fill', d => d._screen.backgroundColor)
+        .style('pointer-events', 'none');
+    selection.attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(0)`);
+}
+function updateLabels(selection, config, duration) {
+    selection.each((d, i, elements) => {
+        var _a, _b;
+        const group = select(elements[i]);
+        const text = group.select('text');
+        const rect = group.select('rect');
+        const backgroundColor = d._screen.backgroundColor;
+        const labelText = (_a = d._screen.labelText) !== null && _a !== void 0 ? _a : '';
+        const labelFontSize = d._screen.fontSize;
+        let labelColor = d._screen.labelColor;
+        // Label background
+        const backgroundHeight = labelFontSize * 1.7;
+        let backgroundWidth = labelFontSize * labelText.length * 0.7;
+        if (backgroundWidth < backgroundHeight)
+            backgroundWidth = backgroundHeight;
+        smartTransition(rect, duration)
+            .attr('width', backgroundWidth)
+            .attr('height', backgroundHeight)
+            .attr('x', -backgroundWidth / 2)
+            .attr('y', -backgroundHeight / 2)
+            .attr('rx', labelFontSize)
+            .attr('ry', labelFontSize)
+            .style('fill', backgroundColor)
+            .style('stroke', backgroundColor);
+        // Label
+        if (!labelColor) {
+            const hex = (_b = color(isStringCSSVariable(backgroundColor) ? getCSSVariableValue(backgroundColor, group.node()) : backgroundColor)) === null || _b === void 0 ? void 0 : _b.hex();
+            const brightness = hexToBrightness(hex);
+            labelColor = brightness > config.labelTextBrightnessRatio
+                ? 'var(--vis-xy-label-text-color-dark)'
+                : 'var(--vis-xy-label-text-color-light)';
+        }
+        text.html(labelText)
+            .attr('font-size', labelFontSize);
+        smartTransition(text, duration)
+            .style('fill', labelColor);
+        rect.style('cursor', d._screen.cursor);
+    });
+    smartTransition(selection, duration)
+        .attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(1)`);
+}
+function removeLabels(selection, duration) {
+    smartTransition(selection, duration)
+        .attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(0)`)
+        .remove();
+}
+function getLabelPosition(value, positioning, scale) {
+    var _a;
+    switch (positioning) {
+        case XYLabelPositioning.DataSpace: return (_a = scale(value)) !== null && _a !== void 0 ? _a : 0;
+        case XYLabelPositioning.AbsolutePx: return value;
+        case XYLabelPositioning.AbsolutePercentage: {
+            const scaleRange = scale.range();
+            return scaleRange[0] + (scaleRange[1] - scaleRange[0]) * value / 100;
+        }
+    }
+}
+function getLabelRenderProps(data, config, xScale, yScale) {
+    const isCluster = Array.isArray(data);
+    const fontSize = isCluster ? getNumber(data, config.clusterFontSize) : getNumber(data, config.labelFontSize);
+    const labelText = (isCluster ? config.clusterLabel(data) : getString(data, config.label)) || '';
+    const backgroundHeight = fontSize * 1.7;
+    let backgroundWidth = fontSize * labelText.length * 0.7;
+    if (backgroundWidth < backgroundHeight)
+        backgroundWidth = backgroundHeight;
+    const x = isCluster
+        ? mean(data, d => d._screen.x)
+        : getLabelPosition(getNumber(data, config.x), getValue(data, config.xPositioning), xScale);
+    const y = isCluster
+        ? mean(data, d => d._screen.y)
+        : getLabelPosition(getNumber(data, config.y), getValue(data, config.yPositioning), yScale);
+    return {
+        x,
+        y,
+        fontSize,
+        labelText,
+        labelColor: isCluster ? getColor(data, config.clusterLabelColor) : getColor(data, config.color),
+        backgroundColor: isCluster ? getColor(data, config.clusterBackgroundColor) : getColor(data, config.backgroundColor),
+        cursor: isCluster ? getString(data, config.clusterCursor) : getString(data, config.cursor),
+        width: backgroundWidth,
+        height: backgroundHeight,
+    };
+}
+
+export { createLabels, getLabelPosition, getLabelRenderProps, removeLabels, updateLabels };
+//# sourceMappingURL=label.js.map