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

package/{src/components/donut/style.ts → components/donut/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: donut-component;
-`
-
-export const variables = injectGlobal`
+`;
+const variables = injectGlobal `
   :root {
     --vis-donut-central-label-font-size: 16px;
     --vis-donut-central-label-text-color: #5b5f6d;
@@ -34,23 +33,20 @@ export const variables = injectGlobal`
     --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);
     --vis-donut-background-color: var(--vis-dark-donut-background-color);
   }
-`
-export const background = css`
+`;
+const background = css `
   label: background;
   fill: var(--vis-donut-background-color);
-`
-
-export const segment = css`
+`;
+const segment = css `
   label: segment;
   stroke-width: var(--vis-donut-segment-stroke-width);
   stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));
-`
-
-export const segmentExit = css`
+`;
+const segmentExit = css `
   label: segment-exit;
-`
-
-export const centralLabel = css`
+`;
+const centralLabel = css `
   label: central-label;
   text-anchor: middle;
   dominant-baseline: middle;
@@ -58,9 +54,8 @@ export const centralLabel = css`
   font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));
   font-weight: var(--vis-donut-central-label-font-weight);
   fill: var(--vis-donut-central-label-text-color);
-`
-
-export const centralSubLabel = css`
+`;
+const centralSubLabel = css `
   label: central-label;
   text-anchor: middle;
   dominant-baseline: middle;
@@ -68,4 +63,7 @@ export const centralSubLabel = css`
   font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));
   font-weight: var(--vis-donut-central-sub-label-font-weight);
   fill: var(--vis-donut-central-sub-label-text-color);
-`
+`;
+
+export { background, centralLabel, centralSubLabel, root, segment, segmentExit, variables };
+//# sourceMappingURL=style.js.map

package/components/donut/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: donut-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-donut-central-label-font-size: 16px;\n    --vis-donut-central-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-label-font-family: */\n    --vis-donut-central-label-font-weight: 600;\n\n    --vis-donut-central-sub-label-font-size: 12px;\n    --vis-donut-central-sub-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-sub-label-font-family: */\n    --vis-donut-central-sub-label-font-weight: 500;\n\n    --vis-donut-background-color: #E7E9F3;\n    --vis-donut-segment-stroke-width: 0;\n    // The line segment color variable is not defined by default\n    // to allow it to fallback to the donut background color\n    /* --vis-donut-segment-stroke-color: none; */\n\n    --vis-dark-donut-central-label-text-color: #C2BECE;\n    --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n    --vis-dark-donut-background-color: #18160C;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n    --vis-donut-background-color: var(--vis-dark-donut-background-color);\n  }\n`\nexport const background = css`\n  label: background;\n  fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n  label: segment;\n  stroke-width: var(--vis-donut-segment-stroke-width);\n  stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-label-font-size);\n  font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-label-font-weight);\n  fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-sub-label-font-size);\n  font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-sub-label-font-weight);\n  fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AACM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;EAIzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}

package/components/donut/types.d.ts

@@ -0,0 +1,20 @@
+import { PieArcDatum } from 'd3-shape';
+export declare type DonutDatum<Datum> = {
+    datum: Datum;
+    /** Original datum index as in unfiltered data */
+    index: number;
+};
+/** Data type for Donut Arc Generator */
+export interface DonutArcDatum<Datum> extends PieArcDatum<Datum> {
+    /** Original datum index as in unfiltered data */
+    index: number;
+    innerRadius: number;
+    outerRadius: number;
+}
+export declare type DonutArcAnimState = {
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number;
+    outerRadius: number;
+    padAngle?: number;
+};

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

@@ -0,0 +1,29 @@
+import { Config } from "../../core/config";
+export interface FlowLegendConfigInterface {
+    /** Custom width of the component.  Default: `undefined` */
+    customWidth?: number;
+    /** Legend items array as string[]. Default: `[]` */
+    items?: string[];
+    /** Color of the flow line. Default: `undefined` */
+    lineColor?: string;
+    /** Color of the flow label. Default: `undefined` */
+    labelColor?: string;
+    /** Font size of flow labels in pixels. Default: `12` */
+    labelFontSize?: number;
+    /** Arrow symbol. Default: `'▶'` */
+    arrowSymbol?: string;
+    /** Color of the arrow. Default: `undefined` */
+    arrowColor?: string;
+    /** Callback function for the legend item click. Default: `undefined` */
+    onLegendItemClick?: ((label?: string, i?: number) => void);
+}
+export declare class FlowLegendConfig extends Config implements FlowLegendConfigInterface {
+    customWidth: any;
+    items: any[];
+    labelFontSize: number;
+    lineColor: any;
+    labelColor: any;
+    arrowSymbol: string;
+    arrowColor: any;
+    onLegendItemClick: any;
+}

package/components/flow-legend/config.js

@@ -0,0 +1,18 @@
+import { Config } from '../../core/config/index.js';
+
+class FlowLegendConfig extends Config {
+    constructor() {
+        super(...arguments);
+        this.customWidth = undefined;
+        this.items = [];
+        this.labelFontSize = 12;
+        this.lineColor = undefined;
+        this.labelColor = undefined;
+        this.arrowSymbol = '▶';
+        this.arrowColor = undefined;
+        this.onLegendItemClick = undefined;
+    }
+}
+
+export { FlowLegendConfig };
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/flow-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\nexport interface FlowLegendConfigInterface {\n  /** Custom width of the component.  Default: `undefined` */\n  customWidth?: number;\n  /** Legend items array as string[]. Default: `[]` */\n  items?: string[];\n  /** Color of the flow line. Default: `undefined` */\n  lineColor?: string;\n  /** Color of the flow label. Default: `undefined` */\n  labelColor?: string;\n  /** Font size of flow labels in pixels. Default: `12` */\n  labelFontSize?: number;\n  /** Arrow symbol. Default: `'▶'` */\n  arrowSymbol?: string;\n  /** Color of the arrow. Default: `undefined` */\n  arrowColor?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((label?: string, i?: number) => void);\n}\n\nexport class FlowLegendConfig extends Config implements FlowLegendConfigInterface {\n  customWidth = undefined\n  items = []\n  labelFontSize = 12\n  lineColor = undefined\n  labelColor = undefined\n  arrowSymbol = '▶'\n  arrowColor = undefined\n  onLegendItemClick = undefined\n}\n"],"names":[],"mappings":";;AAqBM,MAAO,gBAAiB,SAAQ,MAAM,CAAA;AAA5C,IAAA,WAAA,GAAA;;QACE,IAAW,CAAA,WAAA,GAAG,SAAS,CAAA;QACvB,IAAK,CAAA,KAAA,GAAG,EAAE,CAAA;QACV,IAAa,CAAA,aAAA,GAAG,EAAE,CAAA;QAClB,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;QACrB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAW,CAAA,WAAA,GAAG,GAAG,CAAA;QACjB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;KAC9B;AAAA;;;;"}

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

@@ -0,0 +1,16 @@
+import { Selection } from 'd3-selection';
+import { FlowLegendConfig, FlowLegendConfigInterface } from './config';
+import { FlowLegendItem } from './types';
+export declare class FlowLegend {
+    div: Selection<HTMLDivElement, unknown, null, undefined>;
+    element: HTMLElement;
+    line: Selection<HTMLDivElement, unknown, null, undefined>;
+    labels: Selection<HTMLDivElement, unknown, null, undefined>;
+    prevConfig: FlowLegendConfig;
+    config: FlowLegendConfig;
+    protected _container: HTMLElement;
+    constructor(element: HTMLElement, config?: FlowLegendConfigInterface);
+    update(config: FlowLegendConfigInterface): void;
+    render(): void;
+    _onItemClick(event: MouseEvent, d: FlowLegendItem): void;
+}

package/components/flow-legend/index.js

@@ -0,0 +1,75 @@
+import { select } from 'd3-selection';
+import { smartTransition } from '../../utils/d3.js';
+import { FlowLegendConfig } from './config.js';
+import { FlowLegendItemType } from './types.js';
+import { root, labels, item, arrow, label, clickable, line } from './style.js';
+
+class FlowLegend {
+    constructor(element, config) {
+        this._container = element;
+        this.div = select(this._container).append('div').attr('class', root);
+        this.element = this.div.node();
+        this.line = this.div.append('div');
+        this.labels = this.div.append('div').attr('class', labels);
+        if (config)
+            this.update(config);
+    }
+    update(config) {
+        this.prevConfig = this.config;
+        this.config = new FlowLegendConfig().init(config);
+        this.render();
+    }
+    render() {
+        const { config } = this;
+        if (!config.items.length)
+            return;
+        if (config.customWidth)
+            this.div.style('width', `${config.customWidth}px`);
+        // Prepare Data
+        const legendData = config.items.reduce((acc, label, i) => {
+            acc.push({
+                text: label,
+                index: i,
+                type: FlowLegendItemType.Label,
+            });
+            if (config.arrowSymbol && (acc.length !== config.items.length * 2 - 1)) {
+                acc.push({
+                    text: config.arrowSymbol,
+                    index: i,
+                    type: FlowLegendItemType.Symbol,
+                });
+            }
+            return acc;
+        }, []);
+        // Draw
+        const legendItems = this.labels.selectAll(`.${item}`)
+            .data(legendData);
+        const legendItemsEnter = legendItems.enter()
+            .append('div')
+            .attr('class', item)
+            .attr('opacity', 0);
+        legendItemsEnter.filter(d => d.type === FlowLegendItemType.Label)
+            .on('click', this._onItemClick.bind(this));
+        legendItemsEnter.append('span')
+            .attr('class', d => d.type === FlowLegendItemType.Symbol
+            ? arrow(config.arrowColor)
+            : label(config.labelFontSize, config.labelColor))
+            .classed(clickable, d => d.type === FlowLegendItemType.Label && !!config.onLegendItemClick);
+        const legendItemsMerged = legendItemsEnter.merge(legendItems);
+        smartTransition(legendItemsMerged, 500)
+            .attr('opacity', 1);
+        legendItemsMerged.select('span').html(d => d.text);
+        legendItems.exit().remove();
+        this.line
+            .attr('class', line(config.lineColor))
+            .style('opacity', config.items.length > 1 ? 1 : 0);
+    }
+    _onItemClick(event, d) {
+        const { config } = this;
+        if (config.onLegendItemClick)
+            config.onLegendItemClick(d.text, d.index);
+    }
+}
+
+export { FlowLegend };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/flow-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\n\n// Config\nimport { FlowLegendConfig, FlowLegendConfigInterface } from './config'\n\n// Local Types\nimport { FlowLegendItem, FlowLegendItemType } from './types'\n\n// Styles\nimport * as s from './style'\n\nexport class FlowLegend {\n  div: Selection<HTMLDivElement, unknown, null, undefined>\n  element: HTMLElement\n  line: Selection<HTMLDivElement, unknown, null, undefined>\n  labels: Selection<HTMLDivElement, unknown, null, undefined>\n  prevConfig: FlowLegendConfig\n  config: FlowLegendConfig\n  protected _container: HTMLElement\n\n  constructor (element: HTMLElement, config?: FlowLegendConfigInterface) {\n    this._container = element\n\n    this.div = select(this._container).append('div').attr('class', s.root)\n    this.element = this.div.node()\n\n    this.line = this.div.append('div')\n    this.labels = this.div.append('div').attr('class', s.labels)\n\n    if (config) this.update(config)\n  }\n\n  update (config: FlowLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = new FlowLegendConfig().init(config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n    if (!config.items.length) return\n\n    if (config.customWidth) this.div.style('width', `${config.customWidth}px`)\n\n    // Prepare Data\n    const legendData: FlowLegendItem[] = config.items.reduce((acc, label, i) => {\n      acc.push({\n        text: label,\n        index: i,\n        type: FlowLegendItemType.Label,\n      })\n\n      if (config.arrowSymbol && (acc.length !== config.items.length * 2 - 1)) {\n        acc.push({\n          text: config.arrowSymbol,\n          index: i,\n          type: FlowLegendItemType.Symbol,\n        })\n      }\n      return acc\n    }, [])\n\n    // Draw\n    const legendItems = this.labels.selectAll<HTMLDivElement, FlowLegendItem>(`.${s.item}`)\n      .data(legendData)\n\n    const legendItemsEnter = legendItems.enter()\n      .append('div')\n      .attr('class', s.item)\n      .attr('opacity', 0)\n\n    legendItemsEnter.filter(d => d.type === FlowLegendItemType.Label)\n      .on('click', this._onItemClick.bind(this))\n\n    legendItemsEnter.append('span')\n      .attr('class',\n        d => d.type === FlowLegendItemType.Symbol\n          ? s.arrow(config.arrowColor)\n          : s.label(config.labelFontSize, config.labelColor)\n      )\n      .classed(s.clickable, d => d.type === FlowLegendItemType.Label && !!config.onLegendItemClick)\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    smartTransition(legendItemsMerged, 500)\n      .attr('opacity', 1)\n    legendItemsMerged.select('span').html(d => d.text)\n\n    legendItems.exit().remove()\n\n    this.line\n      .attr('class', s.line(config.lineColor))\n      .style('opacity', config.items.length > 1 ? 1 : 0)\n  }\n\n  _onItemClick (event: MouseEvent, d: FlowLegendItem): void {\n    const { config } = this\n\n    if (config.onLegendItemClick) config.onLegendItemClick(d.text, d.index)\n  }\n}\n"],"names":["s.root","s.labels","s.item","s.arrow","s.label","s.clickable","s.line"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+export declare const root: string;
+export declare const globalStyles: void;
+export declare const line: (lineColor: string) => string;
+export declare const labels: string;
+export declare const item: string;
+export declare const clickable: string;
+export declare const label: (labelFontSize: number, labelColor: string) => string;
+export declare const arrow: (arrowColor: string) => string;

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

@@ -1,14 +1,13 @@
-import { css, injectGlobal } from '@emotion/css'
-import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'
+import { css, injectGlobal } from '@emotion/css';
+import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
 
-export const root = css`
+const root = css `
   label: flow-legend-component;
 
   position: relative;
   user-select: none;
-`
-
-export const globalStyles = injectGlobal`
+`;
+const globalStyles = injectGlobal `
   :root {
     --vis-flow-legend-label-background: #ffffff;
     --vis-flow-legend-label-color: #71788a;
@@ -30,9 +29,8 @@ export const globalStyles = injectGlobal`
     --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);
     --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);
   }
-`
-
-export const line = (lineColor: string): string => css`
+`;
+const line = (lineColor) => css `
   label: line;
 
   height: 2px;
@@ -40,9 +38,8 @@ export const line = (lineColor: string): string => css`
   background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};
   position: absolute;
   top: 50%;
-`
-
-export const labels = css`
+`;
+const labels = css `
   label: labels;
 
   position: relative;
@@ -50,26 +47,23 @@ export const labels = css`
   display: flex;
   align-items: center;
   justify-content: space-between;
-`
-
-export const item = css`
+`;
+const item = css `
   label: item;
 
   position: relative;
   max-width: 50px;
 
   padding: 10px;
-`
-
-export const clickable = css`
+`;
+const clickable = css `
   cursor: pointer;
 
   &:hover {
     text-decoration: underline;
   }
-`
-
-export const label = (labelFontSize: number, labelColor: string): string => css`
+`;
+const label = (labelFontSize, labelColor) => css `
   label: label;
 
   transform: translate(-50%, 0%);
@@ -80,9 +74,8 @@ export const label = (labelFontSize: number, labelColor: string): string => css`
   color: ${labelColor || 'var(--vis-flow-legend-label-color)'};
   display: inline-table;
   text-align: center;
-`
-
-export const arrow = (arrowColor: string): string => css`
+`;
+const arrow = (arrowColor) => css `
   label: arrow;
 
   font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});
@@ -94,4 +87,7 @@ export const arrow = (arrowColor: string): string => css`
   transform: translate(-25%, 0%);
   display: inline-table;
   text-align: center;
-`
+`;
+
+export { arrow, clickable, globalStyles, item, label, labels, line, root };
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const root = css`\n  label: flow-legend-component;\n\n  position: relative;\n  user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-flow-legend-label-background: #ffffff;\n    --vis-flow-legend-label-color: #71788a;\n    --vis-flow-legend-link-color: #E5E9F7;\n    --vis-flow-legend-arrow-color: #E5E9F7;\n    --vis-flow-legend-label-padding: 5px 15px;\n    --vis-flow-legend-arrow-padding: 0 10px;\n    /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n    --vis-dark-flow-legend-label-background: #292b34;\n    --vis-dark-flow-legend-label-color: #E5E9F7;\n    --vis-dark-flow-legend-link-color: #71788a;\n    --vis-dark-flow-legend-arrow-color: #71788a;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n    --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n    --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n    --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n  }\n`\n\nexport const line = (lineColor: string): string => css`\n  label: line;\n\n  height: 2px;\n  width: 100%;\n  background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n  position: absolute;\n  top: 50%;\n`\n\nexport const labels = css`\n  label: labels;\n\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`\n\nexport const item = css`\n  label: item;\n\n  position: relative;\n  max-width: 50px;\n\n  padding: 10px;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n  label: label;\n\n  transform: translate(-50%, 0%);\n  margin-left: 7px;\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-label-padding);\n  font-size: ${labelFontSize}px;\n  color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n  display: inline-table;\n  text-align: center;\n`\n\nexport const arrow = (arrowColor: string): string => css`\n  label: arrow;\n\n  font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n  font-size: 9px;\n  vertical-align: middle;\n  color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-arrow-padding);\n  transform: translate(-25%, 0%);\n  display: inline-table;\n  text-align: center;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;EAKtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;AAgBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEY,MAAA,IAAI,GAAG,CAAC,SAAiB,KAAa,GAAG,CAAA,CAAA;;;;;AAKhC,oBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;;;EAGrE;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA,CAAA;;;;;;;eAOhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEY,MAAA,KAAK,GAAG,CAAC,UAAkB,KAAa,GAAG,CAAA,CAAA;;;0DAGE,+BAA+B,CAAA;;;AAG9E,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;;;;;;"}

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

@@ -0,0 +1,9 @@
+export declare enum FlowLegendItemType {
+    Label = "label",
+    Symbol = "symbol"
+}
+export interface FlowLegendItem {
+    text: string;
+    type: FlowLegendItemType;
+    index: number;
+}

package/components/flow-legend/types.js

@@ -0,0 +1,8 @@
+var FlowLegendItemType;
+(function (FlowLegendItemType) {
+    FlowLegendItemType["Label"] = "label";
+    FlowLegendItemType["Symbol"] = "symbol";
+})(FlowLegendItemType || (FlowLegendItemType = {}));
+
+export { FlowLegendItemType };
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/flow-legend/types.ts"],"sourcesContent":["export enum FlowLegendItemType {\n  Label = 'label',\n  Symbol = 'symbol',\n}\n\nexport interface FlowLegendItem {\n  text: string;\n  type: FlowLegendItemType;\n  index: number;\n}\n"],"names":[],"mappings":"IAAY,mBAGX;AAHD,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,GAG7B,EAAA,CAAA,CAAA;;;;"}

package/components/free-brush/config.d.ts

@@ -0,0 +1,45 @@
+import { D3BrushEvent } from 'd3-brush';
+import { XYComponentConfigInterface, XYComponentConfig } from "../../core/xy-component/config";
+import { FreeBrushMode, FreeBrushSelection } from './types';
+export interface FreeBrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
+    /** Brush selection mode. X - horizontal, Y - vertical, XY - both. Default: `FreeBrushMode.X` */
+    mode?: FreeBrushMode;
+    /** Callback function to be called on any Brush event.
+     * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`
+    */
+    onBrush?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);
+    /** Callback function to be called on the Brush start event.
+     * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`
+    */
+    onBrushStart?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);
+    /** Callback function to be called on the Brush move event.
+     * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`
+    */
+    onBrushMove?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);
+    /** Callback function to be called on the Brush end event.
+     * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean)L void => {}`
+    */
+    onBrushEnd?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);
+    /** Width of the Brush handle. Default: `1` */
+    handleWidth?: number;
+    /** Brush selection in data space, can be used to force set the selection from outside.
+     * In case of two dimensional mode, the selection has the following format: `[[xMin, xMax], [yMin, yMax]]`.
+     * This config property gets updated on internal brush events. Default: `undefined`
+    */
+    selection?: FreeBrushSelection | null | undefined;
+    /** Constraint Brush selection to a minimal length in data units. Default: `undefined` */
+    selectionMinLength?: number | [number, number];
+    /** Automatically hide the brush after selection. Default: `true` */
+    autoHide?: boolean;
+}
+export declare class FreeBrushConfig<Datum> extends XYComponentConfig<Datum> implements FreeBrushConfigInterface<Datum> {
+    onBrush: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean) => void;
+    onBrushStart: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean) => void;
+    onBrushMove: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean) => void;
+    onBrushEnd: (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean) => void;
+    handleWidth: number;
+    selection: FreeBrushSelection | null | undefined;
+    selectionMinLength: any;
+    mode: FreeBrushMode;
+    autoHide: boolean;
+}

package/components/free-brush/config.js

@@ -0,0 +1,24 @@
+import { XYComponentConfig } from '../../core/xy-component/config.js';
+import { FreeBrushMode } from './types.js';
+
+class FreeBrushConfig extends XYComponentConfig {
+    constructor() {
+        super(...arguments);
+        /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
+        this.onBrush = (s, e, userDriven) => { };
+        /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
+        this.onBrushStart = (s, e, userDriven) => { };
+        /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
+        this.onBrushMove = (s, e, userDriven) => { };
+        /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
+        this.onBrushEnd = (s, e, userDriven) => { };
+        this.handleWidth = 1;
+        this.selection = undefined;
+        this.selectionMinLength = undefined;
+        this.mode = FreeBrushMode.X;
+        this.autoHide = true;
+    }
+}
+
+export { FreeBrushConfig };
+//# sourceMappingURL=config.js.map

package/components/free-brush/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/free-brush/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { FreeBrushMode, FreeBrushSelection } from './types'\n\n// We extend partial XY config interface because x and y properties are optional for FreeBrush\nexport interface FreeBrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Brush selection mode. X - horizontal, Y - vertical, XY - both. Default: `FreeBrushMode.X` */\n  mode?: FreeBrushMode;\n  /** Callback function to be called on any Brush event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrush?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush start event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`\n  */\n  onBrushStart?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush move event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`\n  */\n  onBrushMove?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush end event.\n   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean)L void => {}`\n  */\n  onBrushEnd?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);\n  /** Width of the Brush handle. Default: `1` */\n  handleWidth?: number;\n  /** Brush selection in data space, can be used to force set the selection from outside.\n   * In case of two dimensional mode, the selection has the following format: `[[xMin, xMax], [yMin, yMax]]`.\n   * This config property gets updated on internal brush events. Default: `undefined`\n  */\n  selection?: FreeBrushSelection | null | undefined;\n  /** Constraint Brush selection to a minimal length in data units. Default: `undefined` */\n  selectionMinLength?: number | [number, number];\n  /** Automatically hide the brush after selection. Default: `true` */\n  autoHide?: boolean;\n}\n\nexport class FreeBrushConfig<Datum> extends XYComponentConfig<Datum> implements FreeBrushConfigInterface<Datum> {\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrush = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushStart = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushMove = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushEnd = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}\n  handleWidth = 1\n  selection: FreeBrushSelection | null | undefined = undefined\n  selectionMinLength = undefined\n  mode: FreeBrushMode = FreeBrushMode.X\n  autoHide = true\n}\n"],"names":[],"mappings":";;;AAuCM,MAAO,eAAuB,SAAQ,iBAAwB,CAAA;AAApE,IAAA,WAAA,GAAA;;;QAEE,IAAO,CAAA,OAAA,GAAG,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAY,GAAC,CAAA;;QAExG,IAAY,CAAA,YAAA,GAAG,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAY,GAAC,CAAA;;QAE7G,IAAW,CAAA,WAAA,GAAG,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAY,GAAC,CAAA;;QAE5G,IAAU,CAAA,UAAA,GAAG,CAAC,CAAiC,EAAE,CAAwB,EAAE,UAAmB,KAAY,GAAC,CAAA;QAC3G,IAAW,CAAA,WAAA,GAAG,CAAC,CAAA;QACf,IAAS,CAAA,SAAA,GAA0C,SAAS,CAAA;QAC5D,IAAkB,CAAA,kBAAA,GAAG,SAAS,CAAA;AAC9B,QAAA,IAAA,CAAA,IAAI,GAAkB,aAAa,CAAC,CAAC,CAAA;QACrC,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;KAChB;AAAA;;;;"}

package/components/free-brush/index.d.ts

@@ -0,0 +1,20 @@
+import { XYComponentCore } from "../../core/xy-component";
+import { FreeBrushConfig, FreeBrushConfigInterface } from './config';
+import * as s from './style';
+export declare class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfig<Datum>, FreeBrushConfigInterface<Datum>> {
+    static selectors: typeof s;
+    config: FreeBrushConfig<Datum>;
+    private brush;
+    private brushBehaviour;
+    private _firstRender;
+    constructor(config: FreeBrushConfigInterface<Datum>);
+    _render(customDuration?: number): void;
+    private _onBrush;
+    private _pixelRangeToDataRange;
+    private _dataRangeToPixelRange;
+    private _isSelectionValid;
+    private _getBrushBehaviour;
+    private _onBrushStart;
+    private _onBrushMove;
+    private _onBrushEnd;
+}