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

package/components/brush/index.js

@@ -0,0 +1,199 @@
+import { brushX } from 'd3-brush';
+import { XYComponentCore } from '../../core/xy-component/index.js';
+import { isNumber, clamp } from '../../utils/data.js';
+import { smartTransition } from '../../utils/d3.js';
+import { Arrangement } from '../../types/position.js';
+import { BrushConfig } from './config.js';
+import { BrushDirection } from './types.js';
+import * as style from './style.js';
+import { brush, unselected, handleLine } from './style.js';
+
+class Brush extends XYComponentCore {
+    constructor(config) {
+        super();
+        this.clippable = false; // Don't apply clipping path to this component. See XYContainer
+        this.config = new BrushConfig();
+        this.brushBehaviour = brushX();
+        this.events = {
+            [Brush.selectors.brush]: {},
+        };
+        this._selection = null;
+        this._firstRender = true;
+        if (config)
+            this.config.init(config);
+        this.brush = this.g
+            .append('g')
+            .attr('class', brush);
+        const directions = [{ type: BrushDirection.West }, { type: BrushDirection.East }];
+        this.unselectedRange = this.g
+            .selectAll(`.${unselected}`)
+            .data(directions)
+            .enter().append('rect')
+            .attr('class', unselected);
+        this.handleLines = this.g
+            .selectAll(`.${handleLine}`)
+            .data(directions)
+            .enter().append('line')
+            .attr('class', handleLine);
+    }
+    _render(customDuration) {
+        var _a, _b, _c, _d;
+        const { brushBehaviour, config } = this;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        const xScale = this.xScale;
+        brushBehaviour
+            .extent([[0, 0], [this._width, this._height]])
+            .on('start', this._onBrushStart.bind(this))
+            .on('brush', this._onBrushMove.bind(this))
+            .on('end', this._onBrushEnd.bind(this));
+        this.brush
+            .call(brushBehaviour)
+            .classed('non-draggable', !config.draggable);
+        const yRange = [this._height, 0];
+        const h = yRange[0] - yRange[1];
+        this.g.selectAll('.handle')
+            .attr('y', yRange[1])
+            .attr('height', h);
+        this.unselectedRange
+            .attr('y', yRange[1])
+            .attr('height', h);
+        this.handleLines
+            .attr('y1', yRange[1] + 10)
+            .attr('y2', yRange[1] + h - 10);
+        // We save the X scale range and set it to the available horizontal space to calculate the selection range in pixels correctly
+        const xRange = [0, this._width];
+        const xScaleRange = xScale.range();
+        xScale.range(xRange);
+        const selectionMin = clamp((_b = xScale((_a = (config.selection || this._selection)) === null || _a === void 0 ? void 0 : _a[0])) !== null && _b !== void 0 ? _b : 0, xRange[0], xRange[1]);
+        const selectionMax = clamp((_d = xScale((_c = (config.selection || this._selection)) === null || _c === void 0 ? void 0 : _c[1])) !== null && _d !== void 0 ? _d : 0, xRange[0], xRange[1]);
+        xScale.range(xScaleRange); // Restore the X scale range
+        const selectionLength = selectionMax - selectionMin;
+        const brushRange = (selectionLength ? [selectionMin, selectionMax] : xRange);
+        this._positionHandles(brushRange);
+        smartTransition(this.brush, duration)
+            .call(brushBehaviour.move, brushRange) // Sets up the brush and calls brush events
+            .on('end interrupt', () => { this._firstRender = false; });
+        // We track the first render to not trigger user events on component initialization
+        if (!duration)
+            this._firstRender = false;
+    }
+    _updateSelection(s) {
+        const xRange = [0, this._width];
+        this.unselectedRange
+            .attr('x', d => d.type === BrushDirection.West ? xRange[0] : s[1])
+            .attr('width', d => {
+            const length = d.type === BrushDirection.West ? s[0] - xRange[0] : xRange[1] - s[1];
+            const lengthClamped = clamp(length, 0, xRange[1] - xRange[0]);
+            return lengthClamped;
+        });
+        this._positionHandles(s);
+        // D3 sets brush handle height to be too long, so we need to update it
+        const yRange = [this._height, 0];
+        const h = yRange[0] - yRange[1];
+        this.g.selectAll('.handle')
+            .attr('y', yRange[1])
+            .attr('height', h);
+    }
+    _positionHandles(s) {
+        const { config } = this;
+        this.brush.selectAll('.handle')
+            .attr('width', config.handleWidth)
+            .attr('x', d => {
+            if (!s)
+                return 0;
+            const west = d.type === BrushDirection.West;
+            const inside = config.handlePosition === Arrangement.Inside;
+            if (west)
+                return s[0] + (inside ? 0 : -config.handleWidth);
+            else
+                return s[1] + (inside ? -config.handleWidth : 0);
+        });
+        this.handleLines
+            .attr('transform', d => {
+            if (!s)
+                return null;
+            const west = d.type === BrushDirection.West;
+            const inside = config.handlePosition === Arrangement.Inside;
+            return `translate(${west
+                ? s[0] - Math.pow((-1), Number(inside)) * config.handleWidth / 2
+                : s[1] + Math.pow((-1), Number(inside)) * config.handleWidth / 2},0)`;
+        });
+    }
+    _onBrush(event) {
+        var _a;
+        const { config } = this;
+        const xScale = this.xScale;
+        const xRange = [0, this._width];
+        const s = ((event === null || event === void 0 ? void 0 : event.selection) || xRange);
+        const userDriven = !!(event === null || event === void 0 ? void 0 : event.sourceEvent);
+        // Handle edge cases:
+        // (event?.selection === null) happens when user clicks to reset the selection
+        // (s?.[0] === s?.[1]) happens when user drags the selection out of range
+        if (userDriven && (((event === null || event === void 0 ? void 0 : event.selection) === null) || // happens when user clicks to reset the selection
+            ((s === null || s === void 0 ? void 0 : s[0]) === (s === null || s === void 0 ? void 0 : s[1])) || // happens when user drags the selection out of range
+            ((s === null || s === void 0 ? void 0 : s[0]) < xRange[0]) || //
+            ((s === null || s === void 0 ? void 0 : s[0]) > xRange[1]) || // happens when you drag the brush and the domain updates
+            ((s === null || s === void 0 ? void 0 : s[1]) < xRange[0]) || // to a smaller one and brush goes out of range
+            ((s === null || s === void 0 ? void 0 : s[1]) > xRange[1]) //
+        )) {
+            this.brush.call(this.brushBehaviour.move, xRange); // Will trigger the 'brush end' callback with `range`
+            return;
+        }
+        // When you reset selection by clicking on a non-selected brush area, D3 triggers the brush event twice.
+        // The first call will have equal selection coordinates (e.g. [441, 441]), the second call will have the full range (e.g. [0, 700]).
+        // To avoid unnecessary render from the first call we skip it
+        if (s[0] !== s[1] && isNumber(s[0]) && isNumber(s[1])) {
+            // We save the X scale range and set it to the available horizontal space to invert the selection correctly
+            const xScaleRange = xScale.range();
+            xScale.range(xRange);
+            const selectedDomain = s.map(n => +xScale.invert(n));
+            if (userDriven) {
+                // Constraint the selection if configured
+                const xDomain = xScale.domain();
+                const xDomainLength = Math.abs(xDomain[1] - xDomain[0]);
+                const selectionLength = Math.abs(selectedDomain[1] - selectedDomain[0]);
+                if (config.selectionMinLength >= xDomainLength) {
+                    console.warn('Unovis | Brush: Configured `selectionMinLength` is bigger than the brush domain');
+                }
+                if ((selectionLength < config.selectionMinLength) && (config.selectionMinLength < xDomainLength)) {
+                    const selection = (_a = config.selection) !== null && _a !== void 0 ? _a : this._selection;
+                    const range = [xScale(selection[0]), xScale(selection[1])];
+                    this.brush.call(this.brushBehaviour.move, range); // Will trigger the 'brush end' callback with `range`
+                    // Restore the X scale range
+                    xScale.range(xScaleRange);
+                    return;
+                }
+                else {
+                    this._selection = selectedDomain;
+                    // Restore the X scale range
+                    xScale.range(xScaleRange);
+                }
+            }
+            this._updateSelection(s);
+            if (!this._firstRender)
+                config.onBrush(selectedDomain, event, userDriven);
+        }
+    }
+    _onBrushStart(event) {
+        const { config } = this;
+        this._onBrush(event);
+        if (!this._firstRender)
+            config.onBrushStart(this._selection, event, !!(event === null || event === void 0 ? void 0 : event.sourceEvent));
+    }
+    _onBrushMove(event) {
+        const { config } = this;
+        this._onBrush(event);
+        if (!this._firstRender)
+            config.onBrushMove(this._selection, event, !!(event === null || event === void 0 ? void 0 : event.sourceEvent));
+    }
+    _onBrushEnd(event) {
+        const { config } = this;
+        this._onBrush(event);
+        if (!this._firstRender)
+            config.onBrushEnd(this._selection, event, !!(event === null || event === void 0 ? void 0 : event.sourceEvent));
+    }
+}
+Brush.selectors = style;
+
+export { Brush };
+//# sourceMappingURL=index.js.map

package/components/brush/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/brush/index.ts"],"sourcesContent":["import { BrushBehavior, brushX, D3BrushEvent } from 'd3-brush'\nimport { Selection } from 'd3-selection'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, clamp } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\n\n// Types\nimport { Arrangement } from 'types/position'\n\n// Config\nimport { BrushConfig, BrushConfigInterface } from './config'\n\n// Local Types\nimport { BrushDirection, BrushHandleType } from './types'\n\n// Styles\nimport * as s from './style'\n\nexport class Brush<Datum> extends XYComponentCore<Datum, BrushConfig<Datum>, BrushConfigInterface<Datum>> {\n  static selectors = s\n  clippable = false // Don't apply clipping path to this component. See XYContainer\n  config: BrushConfig<Datum> = new BrushConfig()\n  brush: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  unselectedRange: Selection<SVGRectElement, BrushHandleType, SVGGElement, unknown>\n  handleLines: Selection<SVGLineElement, BrushHandleType, SVGGElement, unknown>\n  brushBehaviour: BrushBehavior<unknown> = brushX()\n  events = {\n    [Brush.selectors.brush]: {},\n  }\n\n  private _selection: [number, number] | null = null\n  private _firstRender = true\n\n  constructor (config?: BrushConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n\n    this.brush = this.g\n      .append('g')\n      .attr('class', s.brush)\n\n    const directions: BrushHandleType[] = [{ type: BrushDirection.West }, { type: BrushDirection.East }]\n    this.unselectedRange = this.g\n      .selectAll(`.${s.unselected}`)\n      .data(directions)\n      .enter().append('rect')\n      .attr('class', s.unselected)\n\n    this.handleLines = this.g\n      .selectAll(`.${s.handleLine}`)\n      .data(directions)\n      .enter().append('line')\n      .attr('class', s.handleLine)\n  }\n\n  _render (customDuration?: number): void {\n    const { brushBehaviour, config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n    const xScale = this.xScale\n\n    brushBehaviour\n      .extent([[0, 0], [this._width, this._height]])\n      .on('start', this._onBrushStart.bind(this))\n      .on('brush', this._onBrushMove.bind(this))\n      .on('end', this._onBrushEnd.bind(this))\n\n    this.brush\n      .call(brushBehaviour)\n      .classed('non-draggable', !config.draggable)\n\n    const yRange = [this._height, 0]\n    const h = yRange[0] - yRange[1]\n\n    this.g.selectAll('.handle')\n      .attr('y', yRange[1])\n      .attr('height', h)\n\n    this.unselectedRange\n      .attr('y', yRange[1])\n      .attr('height', h)\n\n    this.handleLines\n      .attr('y1', yRange[1] + 10)\n      .attr('y2', yRange[1] + h - 10)\n\n    // We save the X scale range and set it to the available horizontal space to calculate the selection range in pixels correctly\n    const xRange = [0, this._width]\n    const xScaleRange = xScale.range()\n    xScale.range(xRange)\n    const selectionMin = clamp(xScale((config.selection || this._selection)?.[0]) ?? 0, xRange[0], xRange[1])\n    const selectionMax = clamp(xScale((config.selection || this._selection)?.[1]) ?? 0, xRange[0], xRange[1])\n    xScale.range(xScaleRange) // Restore the X scale range\n\n    const selectionLength = selectionMax - selectionMin\n    const brushRange = (selectionLength ? [selectionMin, selectionMax] : xRange) as [number, number]\n    this._positionHandles(brushRange)\n\n    smartTransition(this.brush, duration)\n      .call(brushBehaviour.move, brushRange) // Sets up the brush and calls brush events\n      .on('end interrupt', () => { this._firstRender = false })\n      // We track the first render to not trigger user events on component initialization\n    if (!duration) this._firstRender = false\n  }\n\n  _updateSelection (s: [number, number]): void {\n    const xRange = [0, this._width]\n    this.unselectedRange\n      .attr('x', d => d.type === BrushDirection.West ? xRange[0] : s[1])\n      .attr('width', d => {\n        const length = d.type === BrushDirection.West ? s[0] - xRange[0] : xRange[1] - s[1]\n        const lengthClamped = clamp(length, 0, xRange[1] - xRange[0])\n        return lengthClamped\n      })\n\n    this._positionHandles(s)\n\n    // D3 sets brush handle height to be too long, so we need to update it\n    const yRange = [this._height, 0]\n    const h = yRange[0] - yRange[1]\n    this.g.selectAll('.handle')\n      .attr('y', yRange[1])\n      .attr('height', h)\n  }\n\n  private _positionHandles (s: [number, number]): void {\n    const { config } = this\n\n    this.brush.selectAll<SVGRectElement, BrushHandleType>('.handle')\n      .attr('width', config.handleWidth)\n      .attr('x', d => {\n        if (!s) return 0\n        const west = d.type === BrushDirection.West\n        const inside = config.handlePosition === Arrangement.Inside\n\n        if (west) return s[0] + (inside ? 0 : -config.handleWidth)\n        else return s[1] + (inside ? -config.handleWidth : 0)\n      })\n\n    this.handleLines\n      .attr('transform', d => {\n        if (!s) return null\n        const west = d.type === BrushDirection.West\n        const inside = config.handlePosition === Arrangement.Inside\n        return `translate(${west\n          ? s[0] - (-1) ** Number(inside) * config.handleWidth / 2\n          : s[1] + (-1) ** Number(inside) * config.handleWidth / 2},0)`\n      })\n  }\n\n  _onBrush (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n    const xScale = this.xScale\n    const xRange = [0, this._width]\n    const s = (event?.selection || xRange) as [number, number]\n    const userDriven = !!event?.sourceEvent\n    // Handle edge cases:\n    // (event?.selection === null) happens when user clicks to reset the selection\n    // (s?.[0] === s?.[1]) happens when user drags the selection out of range\n    if (userDriven && (\n      (event?.selection === null) || // happens when user clicks to reset the selection\n      (s?.[0] === s?.[1]) || // happens when user drags the selection out of range\n      (s?.[0] < xRange[0]) || //\n      (s?.[0] > xRange[1]) || // happens when you drag the brush and the domain updates\n      (s?.[1] < xRange[0]) || // to a smaller one and brush goes out of range\n      (s?.[1] > xRange[1]) //\n    )) {\n      this.brush.call(this.brushBehaviour.move, xRange) // Will trigger the 'brush end' callback with `range`\n      return\n    }\n\n    // When you reset selection by clicking on a non-selected brush area, D3 triggers the brush event twice.\n    // The first call will have equal selection coordinates (e.g. [441, 441]), the second call will have the full range (e.g. [0, 700]).\n    // To avoid unnecessary render from the first call we skip it\n    if (s[0] !== s[1] && isNumber(s[0]) && isNumber(s[1])) {\n      // We save the X scale range and set it to the available horizontal space to invert the selection correctly\n      const xScaleRange = xScale.range()\n      xScale.range(xRange)\n      const selectedDomain = s.map(n => +xScale.invert(n)) as [number, number]\n\n      if (userDriven) {\n        // Constraint the selection if configured\n        const xDomain = xScale.domain() as [number, number]\n        const xDomainLength = Math.abs(xDomain[1] - xDomain[0])\n        const selectionLength = Math.abs(selectedDomain[1] - selectedDomain[0])\n\n        if (config.selectionMinLength >= xDomainLength) {\n          console.warn('Unovis | Brush: Configured `selectionMinLength` is bigger than the brush domain')\n        }\n\n        if ((selectionLength < config.selectionMinLength) && (config.selectionMinLength < xDomainLength)) {\n          const selection = config.selection ?? this._selection\n          const range = [xScale(selection[0]), xScale(selection[1])] as [number, number]\n          this.brush.call(this.brushBehaviour.move, range) // Will trigger the 'brush end' callback with `range`\n          // Restore the X scale range\n          xScale.range(xScaleRange)\n          return\n        } else {\n          this._selection = selectedDomain\n          // Restore the X scale range\n          xScale.range(xScaleRange)\n        }\n      }\n\n      this._updateSelection(s)\n      if (!this._firstRender) config.onBrush(selectedDomain, event, userDriven)\n    }\n  }\n\n  _onBrushStart (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n\n    this._onBrush(event)\n    if (!this._firstRender) config.onBrushStart(this._selection, event, !!event?.sourceEvent)\n  }\n\n  _onBrushMove (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n\n    this._onBrush(event)\n    if (!this._firstRender) config.onBrushMove(this._selection, event, !!event?.sourceEvent)\n  }\n\n  _onBrushEnd (event: D3BrushEvent<Datum>): void {\n    const { config } = this\n\n    this._onBrush(event)\n    if (!this._firstRender) config.onBrushEnd(this._selection, event, !!event?.sourceEvent)\n  }\n}\n"],"names":["s.brush","s.unselected","s.handleLine","s"],"mappings":";;;;;;;;;;AAsBM,MAAO,KAAa,SAAQ,eAAuE,CAAA;AAevG,IAAA,WAAA,CAAa,MAAoC,EAAA;AAC/C,QAAA,KAAK,EAAE,CAAA;AAdT,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA;AACjB,QAAA,IAAA,CAAA,MAAM,GAAuB,IAAI,WAAW,EAAE,CAAA;QAI9C,IAAc,CAAA,cAAA,GAA2B,MAAM,EAAE,CAAA;AACjD,QAAA,IAAA,CAAA,MAAM,GAAG;AACP,YAAA,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE;SAC5B,CAAA;QAEO,IAAU,CAAA,UAAA,GAA4B,IAAI,CAAA;QAC1C,IAAY,CAAA,YAAA,GAAG,IAAI,CAAA;AAIzB,QAAA,IAAI,MAAM;AAAE,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;AAEpC,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;aAChB,MAAM,CAAC,GAAG,CAAC;AACX,aAAA,IAAI,CAAC,OAAO,EAAEA,KAAO,CAAC,CAAA;AAEzB,QAAA,MAAM,UAAU,GAAsB,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,CAAC,CAAA;AACpG,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;AAC1B,aAAA,SAAS,CAAC,CAAI,CAAA,EAAAC,UAAY,EAAE,CAAC;aAC7B,IAAI,CAAC,UAAU,CAAC;AAChB,aAAA,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACtB,aAAA,IAAI,CAAC,OAAO,EAAEA,UAAY,CAAC,CAAA;AAE9B,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AACtB,aAAA,SAAS,CAAC,CAAI,CAAA,EAAAC,UAAY,EAAE,CAAC;aAC7B,IAAI,CAAC,UAAU,CAAC;AAChB,aAAA,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACtB,aAAA,IAAI,CAAC,OAAO,EAAEA,UAAY,CAAC,CAAA;KAC/B;AAED,IAAA,OAAO,CAAE,cAAuB,EAAA;;AAC9B,QAAA,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;AACvC,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAA;AAC5E,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAE1B,cAAc;AACX,aAAA,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;aAC7C,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC1C,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACzC,aAAA,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AAEzC,QAAA,IAAI,CAAC,KAAK;aACP,IAAI,CAAC,cAAc,CAAC;aACpB,OAAO,CAAC,eAAe,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QAE9C,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;QAChC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;AAE/B,QAAA,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC;AACxB,aAAA,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AACpB,aAAA,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;AAEpB,QAAA,IAAI,CAAC,eAAe;AACjB,aAAA,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AACpB,aAAA,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;AAEpB,QAAA,IAAI,CAAC,WAAW;aACb,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;AAC1B,aAAA,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAA;;QAGjC,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;AAC/B,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,EAAE,CAAA;AAClC,QAAA,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AACpB,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAA,MAAM,CAAC,CAAA,EAAA,IAAC,MAAM,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AACzG,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAA,MAAM,CAAC,CAAA,EAAA,IAAC,MAAM,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AACzG,QAAA,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;AAEzB,QAAA,MAAM,eAAe,GAAG,YAAY,GAAG,YAAY,CAAA;AACnD,QAAA,MAAM,UAAU,IAAI,eAAe,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,MAAM,CAAqB,CAAA;AAChG,QAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;AAEjC,QAAA,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC;aAClC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC;AACrC,aAAA,EAAE,CAAC,eAAe,EAAE,MAAQ,EAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA,EAAE,CAAC,CAAA;;AAE3D,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;KACzC;AAED,IAAA,gBAAgB,CAAE,CAAmB,EAAA;QACnC,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;AAC/B,QAAA,IAAI,CAAC,eAAe;AACjB,aAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,cAAc,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACjE,aAAA,IAAI,CAAC,OAAO,EAAE,CAAC,IAAG;AACjB,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,KAAK,cAAc,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;AACnF,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AAC7D,YAAA,OAAO,aAAa,CAAA;AACtB,SAAC,CAAC,CAAA;AAEJ,QAAA,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;;QAGxB,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;QAChC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;AAC/B,QAAA,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC;AACxB,aAAA,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AACpB,aAAA,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;KACrB;AAEO,IAAA,gBAAgB,CAAE,CAAmB,EAAA;AAC3C,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;AAEvB,QAAA,IAAI,CAAC,KAAK,CAAC,SAAS,CAAkC,SAAS,CAAC;AAC7D,aAAA,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC;AACjC,aAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAG;AACb,YAAA,IAAI,CAAC,CAAC;AAAE,gBAAA,OAAO,CAAC,CAAA;YAChB,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,KAAK,cAAc,CAAC,IAAI,CAAA;YAC3C,MAAM,MAAM,GAAG,MAAM,CAAC,cAAc,KAAK,WAAW,CAAC,MAAM,CAAA;AAE3D,YAAA,IAAI,IAAI;AAAE,gBAAA,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,CAAA;;AACrD,gBAAA,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;AACvD,SAAC,CAAC,CAAA;AAEJ,QAAA,IAAI,CAAC,WAAW;AACb,aAAA,IAAI,CAAC,WAAW,EAAE,CAAC,IAAG;AACrB,YAAA,IAAI,CAAC,CAAC;AAAE,gBAAA,OAAO,IAAI,CAAA;YACnB,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,KAAK,cAAc,CAAC,IAAI,CAAA;YAC3C,MAAM,MAAM,GAAG,MAAM,CAAC,cAAc,KAAK,WAAW,CAAC,MAAM,CAAA;AAC3D,YAAA,OAAO,aAAa,IAAI;kBACpB,CAAC,CAAC,CAAC,CAAC,GAAG,IAAA,CAAA,GAAA,EAAC,CAAC,CAAC,GAAK,MAAM,CAAC,MAAM,CAAC,CAAA,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC;kBACtD,CAAC,CAAC,CAAC,CAAC,GAAG,IAAA,CAAA,GAAA,EAAC,CAAC,CAAC,GAAK,MAAM,CAAC,MAAM,CAAC,CAAA,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAA,GAAA,CAAK,CAAA;AACjE,SAAC,CAAC,CAAA;KACL;AAED,IAAA,QAAQ,CAAE,KAA0B,EAAA;;AAClC,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;AAC/B,QAAA,MAAM,CAAC,IAAI,CAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,SAAS,KAAI,MAAM,CAAqB,CAAA;AAC1D,QAAA,MAAM,UAAU,GAAG,CAAC,EAAC,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,WAAW,CAAA,CAAA;;;;AAIvC,QAAA,IAAI,UAAU,KACZ,CAAC,CAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,SAAS,MAAK,IAAI;aACzB,CAAA,CAAC,KAAD,IAAA,IAAA,CAAC,uBAAD,CAAC,CAAG,CAAC,CAAC,OAAK,CAAC,KAAD,IAAA,IAAA,CAAC,uBAAD,CAAC,CAAG,CAAC,CAAC,CAAA,CAAC;AACnB,aAAC,CAAA,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAG,CAAC,CAAC,IAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AACpB,aAAC,CAAA,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAG,CAAC,CAAC,IAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AACpB,aAAC,CAAA,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAG,CAAC,CAAC,IAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AACpB,aAAC,CAAA,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAG,CAAC,CAAC,IAAG,MAAM,CAAC,CAAC,CAAC,CAAC;SACrB,EAAE;AACD,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;YACjD,OAAM;AACP,SAAA;;;;QAKD,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;;AAErD,YAAA,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,EAAE,CAAA;AAClC,YAAA,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AACpB,YAAA,MAAM,cAAc,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAqB,CAAA;AAExE,YAAA,IAAI,UAAU,EAAE;;AAEd,gBAAA,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAsB,CAAA;AACnD,gBAAA,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;AACvD,gBAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAEvE,gBAAA,IAAI,MAAM,CAAC,kBAAkB,IAAI,aAAa,EAAE;AAC9C,oBAAA,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAA;AAChG,iBAAA;AAED,gBAAA,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,kBAAkB,MAAM,MAAM,CAAC,kBAAkB,GAAG,aAAa,CAAC,EAAE;oBAChG,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,IAAI,CAAC,UAAU,CAAA;AACrD,oBAAA,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAqB,CAAA;AAC9E,oBAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;;AAEhD,oBAAA,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;oBACzB,OAAM;AACP,iBAAA;AAAM,qBAAA;AACL,oBAAA,IAAI,CAAC,UAAU,GAAG,cAAc,CAAA;;AAEhC,oBAAA,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;AAC1B,iBAAA;AACF,aAAA;AAED,YAAA,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;YACxB,IAAI,CAAC,IAAI,CAAC,YAAY;gBAAE,MAAM,CAAC,OAAO,CAAC,cAAc,EAAE,KAAK,EAAE,UAAU,CAAC,CAAA;AAC1E,SAAA;KACF;AAED,IAAA,aAAa,CAAE,KAA0B,EAAA;AACvC,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;AAEvB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,EAAC,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,WAAW,CAAA,CAAC,CAAA;KAC1F;AAED,IAAA,YAAY,CAAE,KAA0B,EAAA;AACtC,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;AAEvB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,EAAC,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,WAAW,CAAA,CAAC,CAAA;KACzF;AAED,IAAA,WAAW,CAAE,KAA0B,EAAA;AACrC,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;AAEvB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,EAAC,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,WAAW,CAAA,CAAC,CAAA;KACxF;;AAhNM,KAAS,CAAA,SAAA,GAAGC,KAAC;;;;"}

package/components/brush/style.d.ts

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const variables: void;
+export declare const brush: string;
+export declare const unselected: string;
+export declare const handleLine: string;

package/{src/components/brush/style.ts → components/brush/style.js}

@@ -1,10 +1,9 @@
-import { css, injectGlobal } from '@emotion/css'
+import { css, injectGlobal } from '@emotion/css';
 
-export const root = css`
+const root = css `
   label: brush-component;
-`
-
-export const variables = injectGlobal`
+`;
+const variables = injectGlobal `
   :root {
     --vis-brush-selection-fill-color: #0b1640;
     --vis-brush-selection-stroke-color: #acb2b9;
@@ -23,9 +22,8 @@ export const variables = injectGlobal`
     --vis-brush-handle-fill-color: var(--vis-dark-brush-handle-fill-color);
     --vis-brush-handle-stroke-color: var(--vis-dark-brush-handle-stroke-color);
   }
-`
-
-export const brush = css`
+`;
+const brush = css `
   label: brush;
   fill: none;
   stroke: none;
@@ -46,19 +44,20 @@ export const brush = css`
       pointer-events: none;
     }
   }
-`
-
-export const unselected = css`
+`;
+const unselected = css `
   label: unselected;
   fill: var(--vis-brush-selection-fill-color);
   opacity: 0.4;
   pointer-events: none;
-`
-
-export const handleLine = css`
+`;
+const handleLine = css `
   label: handle-line;
   stroke: var(--vis-brush-handle-stroke-color);
   stroke-width: 1;
   fill: none;
   pointer-events: none;
-`
+`;
+
+export { brush, handleLine, root, unselected, variables };
+//# sourceMappingURL=style.js.map

package/components/brush/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: brush-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-brush-selection-fill-color: #0b1640;\n    --vis-brush-selection-stroke-color: #acb2b9;\n    --vis-brush-handle-fill-color: #6d778c;\n    --vis-brush-handle-stroke-color: #eee;\n\n    --vis-dark-brush-selection-fill-color:#acb2b9;\n    --vis-dark-brush-selection-stroke-color: #0b1640;\n    --vis-dark-brush-handle-fill-color: #acb2b9;\n    --vis-dark-brush-handle-stroke-color: var(--vis-color-grey);\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-brush-selection-fill-color: var(--vis-dark-brush-selection-fill-color);\n    --vis-brush-selection-stroke-color: var(--vis-dark-brush-selection-stroke-color);\n    --vis-brush-handle-fill-color: var(--vis-dark-brush-handle-fill-color);\n    --vis-brush-handle-stroke-color: var(--vis-dark-brush-handle-stroke-color);\n  }\n`\n\nexport const brush = css`\n  label: brush;\n  fill: none;\n  stroke: none;\n\n  .selection {\n    fill: none;\n    stroke: var(--vis-brush-selection-stroke-color);\n    stroke-width: 0;\n    stroke-opacity: 0;\n  }\n\n  .handle {\n    fill: var(--vis-brush-handle-fill-color);\n  }\n\n  &.non-draggable {\n    .selection, .overlay {\n      pointer-events: none;\n    }\n  }\n`\n\nexport const unselected = css`\n  label: unselected;\n  fill: var(--vis-brush-selection-fill-color);\n  opacity: 0.4;\n  pointer-events: none;\n`\n\nexport const handleLine = css`\n  label: handle-line;\n  stroke: var(--vis-brush-handle-stroke-color);\n  stroke-width: 1;\n  fill: none;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;AAajB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;EAqBvB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;"}

package/components/brush/types.d.ts

@@ -0,0 +1,7 @@
+export declare type BrushHandleType = {
+    type: BrushDirection;
+};
+export declare enum BrushDirection {
+    West = "w",
+    East = "e"
+}

package/components/brush/types.js

@@ -0,0 +1,8 @@
+var BrushDirection;
+(function (BrushDirection) {
+    BrushDirection["West"] = "w";
+    BrushDirection["East"] = "e";
+})(BrushDirection || (BrushDirection = {}));
+
+export { BrushDirection };
+//# sourceMappingURL=types.js.map

package/components/brush/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/brush/types.ts"],"sourcesContent":["export type BrushHandleType = {\n  type: BrushDirection;\n}\n\nexport enum BrushDirection {\n  West = 'w', // D3 defines brush directions as 'w', 'e', ...\n  East = 'e',\n}\n"],"names":[],"mappings":"IAIY,eAGX;AAHD,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,MAAA,CAAA,GAAA,GAAU,CAAA;AACV,IAAA,cAAA,CAAA,MAAA,CAAA,GAAA,GAAU,CAAA;AACZ,CAAC,EAHW,cAAc,KAAd,cAAc,GAGzB,EAAA,CAAA,CAAA;;;;"}

package/components/bullet-legend/config.d.ts

@@ -0,0 +1,34 @@
+import { Config } from "../../core/config";
+import { BulletLegendItemInterface } from './types';
+export interface BulletLegendConfigInterface {
+    /** Legend items. Array of `BulletLegendItemInterface`:
+     * ```
+     * {
+     *   name: string | number;
+     *   color?: string;
+     *   inactive?: boolean;
+     *   hidden?: boolean;
+     *   pointer?: boolean;
+     * }
+     * ```
+    * Default: `[]` */
+    items: BulletLegendItemInterface[];
+    /** Apply a specific class to the labels. Default: `''` */
+    labelClassName?: string;
+    /** Callback function for the legend item click. Default: `undefined` */
+    onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);
+    /** Label text (<span> element) font-size CSS. Default: `null` */
+    labelFontSize?: string | null;
+    /** Label text (<span> element) max-width CSS property. Default: `null` */
+    labelMaxWidth?: string | null;
+    /** Bullet circle size, mapped to the width and height CSS properties. Default: `null` */
+    bulletSize?: string | null;
+}
+export declare class BulletLegendConfig extends Config implements BulletLegendConfigInterface {
+    items: BulletLegendItemInterface[];
+    labelClassName: string;
+    onLegendItemClick: any;
+    labelFontSize: any;
+    labelMaxWidth: any;
+    bulletSize: any;
+}

package/components/bullet-legend/config.js

@@ -0,0 +1,16 @@
+import { Config } from '../../core/config/index.js';
+
+class BulletLegendConfig extends Config {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.labelClassName = '';
+        this.onLegendItemClick = undefined;
+        this.labelFontSize = null;
+        this.labelMaxWidth = null;
+        this.bulletSize = null;
+    }
+}
+
+export { BulletLegendConfig };
+//# sourceMappingURL=config.js.map

package/components/bullet-legend/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\nexport interface BulletLegendConfigInterface {\n  /** Legend items. Array of `BulletLegendItemInterface`:\n   * ```\n   * {\n   *   name: string | number;\n   *   color?: string;\n   *   inactive?: boolean;\n   *   hidden?: boolean;\n   *   pointer?: boolean;\n   * }\n   * ```\n  * Default: `[]` */\n  items: BulletLegendItemInterface[];\n  /** Apply a specific class to the labels. Default: `''` */\n  labelClassName?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n  /** Label text (<span> element) font-size CSS. Default: `null` */\n  labelFontSize?: string | null;\n  /** Label text (<span> element) max-width CSS property. Default: `null` */\n  labelMaxWidth?: string | null;\n  /** Bullet circle size, mapped to the width and height CSS properties. Default: `null` */\n  bulletSize?: string | null;\n}\n\nexport class BulletLegendConfig extends Config implements BulletLegendConfigInterface {\n  items: BulletLegendItemInterface[] = []\n  labelClassName = ''\n  onLegendItemClick = undefined\n  labelFontSize = null\n  labelMaxWidth = null\n  bulletSize = null\n}\n"],"names":[],"mappings":";;AA8BM,MAAO,kBAAmB,SAAQ,MAAM,CAAA;AAA9C,IAAA,WAAA,GAAA;;QACE,IAAK,CAAA,KAAA,GAAgC,EAAE,CAAA;QACvC,IAAc,CAAA,cAAA,GAAG,EAAE,CAAA;QACnB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;QAC7B,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;KAClB;AAAA;;;;"}

package/components/bullet-legend/index.d.ts

@@ -0,0 +1,19 @@
+import { Selection } from 'd3-selection';
+import { BulletLegendConfig, BulletLegendConfigInterface } from './config';
+import { BulletLegendItemInterface } from './types';
+import * as s from './style';
+export declare class BulletLegend {
+    static selectors: typeof s;
+    div: Selection<HTMLDivElement, unknown, null, undefined>;
+    element: HTMLElement;
+    prevConfig: BulletLegendConfig;
+    config: BulletLegendConfig;
+    protected _container: HTMLElement;
+    private _colorAccessor;
+    constructor(element: HTMLElement, config?: BulletLegendConfigInterface);
+    update(config: BulletLegendConfigInterface): void;
+    render(): void;
+    _isItemClickable(item: BulletLegendItemInterface): boolean;
+    _onItemClick(event: MouseEvent, d: BulletLegendItemInterface): void;
+    destroy(): void;
+}

package/components/bullet-legend/index.js

@@ -0,0 +1,79 @@
+import { select } from 'd3-selection';
+import { color } from 'd3-color';
+import { getColor } from '../../utils/color.js';
+import { BulletLegendConfig } from './config.js';
+import * as style from './style.js';
+import { root, item, bullet, label, clickable } from './style.js';
+
+class BulletLegend {
+    constructor(element, config) {
+        this._colorAccessor = (d) => d.color;
+        this._container = element;
+        // Create SVG element for visualizations
+        this.div = select(this._container)
+            .append('div')
+            .attr('class', root);
+        this.element = this.div.node();
+        if (config)
+            this.update(config);
+    }
+    update(config) {
+        this.prevConfig = this.config;
+        this.config = new BulletLegendConfig().init(config);
+        this.render();
+    }
+    render() {
+        const { config } = this;
+        const legendItems = this.div.selectAll(`.${item}`)
+            .data(config.items);
+        const legendItemsEnter = legendItems.enter()
+            .append('div')
+            .attr('class', item)
+            .on('click', this._onItemClick.bind(this));
+        legendItemsEnter.append('span')
+            .attr('class', bullet)
+            .style('width', config.bulletSize)
+            .style('height', config.bulletSize);
+        legendItemsEnter.append('span')
+            .attr('class', label)
+            .classed(config.labelClassName, true)
+            .style('max-width', config.labelMaxWidth)
+            .style('font-size', config.labelFontSize);
+        const legendItemsMerged = legendItemsEnter.merge(legendItems);
+        legendItemsMerged
+            .classed(clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))
+            .style('display', (d) => d.hidden ? 'none' : null);
+        const legendBulletsToUpdate = legendItemsMerged.select(`.${bullet}`);
+        legendBulletsToUpdate.style('background-color', (d, i) => getColor(d, this._colorAccessor, i))
+            .style('border-color', (d, i) => getColor(d, this._colorAccessor, i));
+        legendBulletsToUpdate.each((d, i, elements) => {
+            if (d.inactive) {
+                const bulletColor = window.getComputedStyle(elements[i]).getPropertyValue('background-color');
+                const transparentColor = color(bulletColor);
+                transparentColor.opacity = 0.4;
+                select(elements[i])
+                    .style('background-color', transparentColor.toString());
+            }
+        });
+        legendItemsMerged.select(`.${label}`)
+            .text((d) => d.name);
+        legendItems.exit().remove();
+    }
+    _isItemClickable(item) {
+        return item.pointer === undefined ? true : item.pointer;
+    }
+    _onItemClick(event, d) {
+        const { config: { onLegendItemClick } } = this;
+        const legendItems = this.div.selectAll(`.${item}`).nodes();
+        const index = legendItems.indexOf(event.currentTarget);
+        if (onLegendItemClick)
+            onLegendItemClick(d, index);
+    }
+    destroy() {
+        this.div.remove();
+    }
+}
+BulletLegend.selectors = style;
+
+export { BulletLegend };
+//# sourceMappingURL=index.js.map

package/components/bullet-legend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { color } from 'd3-color'\n\n// Utils\nimport { getColor } from 'utils/color'\n\n// Config\nimport { BulletLegendConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n  static selectors = s\n  div: Selection<HTMLDivElement, unknown, null, undefined>\n  element: HTMLElement\n  prevConfig: BulletLegendConfig\n  config: BulletLegendConfig\n  protected _container: HTMLElement\n\n  private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n  constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n    this._container = element\n\n    // Create SVG element for visualizations\n    this.div = select(this._container)\n      .append('div')\n      .attr('class', s.root)\n\n    this.element = this.div.node()\n\n    if (config) this.update(config)\n  }\n\n  update (config: BulletLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = new BulletLegendConfig().init(config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n    const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`)\n      .data(config.items)\n\n    const legendItemsEnter = legendItems.enter()\n      .append('div')\n      .attr('class', s.item)\n      .on('click', this._onItemClick.bind(this))\n\n    legendItemsEnter.append('span')\n      .attr('class', s.bullet)\n      .style('width', config.bulletSize)\n      .style('height', config.bulletSize)\n\n    legendItemsEnter.append('span')\n      .attr('class', s.label)\n      .classed(config.labelClassName, true)\n      .style('max-width', config.labelMaxWidth)\n      .style('font-size', config.labelFontSize)\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    legendItemsMerged\n      .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n      .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n    const legendBulletsToUpdate = legendItemsMerged.select(`.${s.bullet}`)\n    legendBulletsToUpdate.style('background-color', (d: BulletLegendItemInterface, i) => getColor(d, this._colorAccessor, i))\n      .style('border-color', (d: BulletLegendItemInterface, i) => getColor(d, this._colorAccessor, i))\n    legendBulletsToUpdate.each((d, i, elements) => {\n      if (d.inactive) {\n        const bulletColor = window.getComputedStyle(elements[i] as Element).getPropertyValue('background-color')\n        const transparentColor = color(bulletColor)\n        transparentColor.opacity = 0.4\n        select(elements[i])\n          .style('background-color', transparentColor.toString())\n      }\n    })\n\n    legendItemsMerged.select(`.${s.label}`)\n      .text((d: BulletLegendItemInterface) => d.name)\n\n    legendItems.exit().remove()\n  }\n\n  _isItemClickable (item: BulletLegendItemInterface): boolean {\n    return item.pointer === undefined ? true : item.pointer\n  }\n\n  _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n    const { config: { onLegendItemClick } } = this\n\n    const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n    const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n    if (onLegendItemClick) onLegendItemClick(d, index)\n  }\n\n  public destroy (): void {\n    this.div.remove()\n  }\n}\n"],"names":["s.root","s.item","s.bullet","s.label","s.clickable","s"],"mappings":"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"}

package/components/bullet-legend/style.d.ts

@@ -0,0 +1,6 @@
+export declare const root: string;
+export declare const variables: void;
+export declare const item: string;
+export declare const clickable: string;
+export declare const label: string;
+export declare const bullet: string;

package/{src/components/bullet-legend/style.ts → components/bullet-legend/style.js}

@@ -1,10 +1,9 @@
-import { css, injectGlobal } from '@emotion/css'
+import { css, injectGlobal } from '@emotion/css';
 
-export const root = css`
+const root = css `
   label: bullet-legend-component;
-`
-
-export const variables = injectGlobal`
+`;
+const variables = injectGlobal `
   :root {
     // Undefined by default to allow proper fallback to var(--vis-font-family)
     /* --vis-legend-font-family: */
@@ -25,9 +24,8 @@ export const variables = injectGlobal`
     --vis-legend-label-color: var(--vis-dark-legend-label-color);
     --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-color);
   }
-`
-
-export const item = css`
+`;
+const item = css `
   label: legendItem;
   display: inline;
   font-family: var(--vis-legend-font-family, var(--vis-font-family));
@@ -35,13 +33,11 @@ export const item = css`
   white-space: nowrap;
   cursor: default;
   user-select: none;
-`
-
-export const clickable = css`
+`;
+const clickable = css `
   cursor: pointer;
-`
-
-export const label = css`
+`;
+const label = css `
   label: legendItemLabel;
   font-size: var(--vis-legend-label-font-size);
   display: inline-block;
@@ -51,9 +47,8 @@ export const label = css`
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-`
-
-export const bullet = css`
+`;
+const bullet = css `
   label: legendItemBullet;
   border-radius: 100%;
   background-color: var(--vis-legend-bullet-inactive-color);
@@ -67,4 +62,7 @@ export const bullet = css`
   .inactive {
 
   }
-`
+`;
+
+export { bullet, clickable, item, label, root, variables };
+//# sourceMappingURL=style.js.map

package/components/bullet-legend/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-legend-font-family: */\n\n    --vis-legend-label-color: #6c778c;\n    --vis-legend-label-max-width: 300px;\n    --vis-legend-label-font-size: 12px;\n    --vis-legend-bullet-size: 9px;\n    --vis-legend-bullet-inactive-color: #eee;\n    --vis-legend-item-spacing: 20px;\n    --vis-legend-bullet-label-spacing: 8px;\n\n    --vis-dark-legend-label-color: #eee;\n    --vis-dark-legend-bullet-inactive-color: #6c778c;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-legend-label-color: var(--vis-dark-legend-label-color);\n    --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-color);\n  }\n`\n\nexport const item = css`\n  label: legendItem;\n  display: inline;\n  font-family: var(--vis-legend-font-family, var(--vis-font-family));\n  margin-right: var(--vis-legend-item-spacing);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n`\n\nexport const label = css`\n  label: legendItemLabel;\n  font-size: var(--vis-legend-label-font-size);\n  display: inline-block;\n  vertical-align: middle;\n  color: var(--vis-legend-label-color);\n  max-width: var(--vis-legend-label-max-width);\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`\n\nexport const bullet = css`\n  label: legendItemBullet;\n  border-radius: 100%;\n  background-color: var(--vis-legend-bullet-inactive-color);\n  border: 1px solid;\n  display: inline-block;\n  margin-right: var(--vis-legend-bullet-label-spacing);\n  width: var(--vis-legend-bullet-size);\n  height: var(--vis-legend-bullet-size);\n  vertical-align: middle;\n\n  .inactive {\n\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;AAiBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;"}

package/components/bullet-legend/types.d.ts

@@ -0,0 +1,7 @@
+export interface BulletLegendItemInterface {
+    name: string | number;
+    color?: string;
+    inactive?: boolean;
+    hidden?: boolean;
+    pointer?: boolean;
+}

package/components/bullet-legend/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/components/bullet-legend/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}