@cosmograph/ui - npm Package Compare versions

Comparing version 0.0.3-beta.6 to 0.0.3-beta.7

modules/histogram/config.d.ts

@@ -9,4 +9,4 @@ import { Config } from '../../utils';
     minBarHeight: number;
-    brushRadius: number;
-    brushPadding: number;
+    selectionBrushRadius: number;
+    selectionBrushPadding: number;
     barCount: number;
@@ -18,3 +18,3 @@ dataStep: undefined;
     formatFunction: undefined;
-    enableBrush: boolean;
+    allowSelection: boolean;
     stickyBrush: boolean;
@@ -28,6 +28,6 @@ events: HistogramEvents;
     minBarHeight?: number;
-    /** `brushPadding`: Padding for the data selection brush. Set in pixels. Default: `8` */
-    brushPadding?: number;
-    /** `brushRadius`: Radius of the data selection brush. Default: `3` */
-    brushRadius?: number;
+    /** `selectionBrushPadding`: Padding for the data selection brush. Set in pixels. Default: `8` */
+    selectionBrushPadding?: number;
+    /** `selectionBrushRadius`: Radius of the data selection brush. Default: `3` */
+    selectionBrushRadius?: number;
     /** `barPadding`: Padding between each bar. Set in percent of bar width from 0 (as 0% of the bar width) to 1 (as 100% of the bar width). Default: `0.1`. */
@@ -43,5 +43,5 @@ barPadding?: number;
     dataStep?: number;
-    /** `enableBrush`: Determines whether or not the `Histogram` allows users to select bars using a brush control. Default: `true` */
-    enableBrush?: boolean;
-    /** `stickyBrush`: Stick brush selection coodrinates to the bar edges. Default: `true` */
+    /** `allowSelection`: Determines whether or not the `Histogram` allows users to select bars using a selection brush control. Default: `true` */
+    allowSelection?: boolean;
+    /** `stickyBrush`: Stick selection brush coodrinates to the bar edges. Default: `true` */
     stickyBrush?: boolean;
@@ -48,0 +48,0 @@ /** `labelSideMargin`: Adjust the margin between the axis tick edge labels and the horizontal edges of the `Histogram` component bounding box. Default: `3` */

modules/histogram/config.js

@@ -1,2 +0,2 @@
-import{Config as t}from"../../utils.js";const i={top:5,left:5,bottom:1,right:5};class s extends t{constructor(){super(...arguments),this.padding=i,this.barsCount=50,this.barPadding=.1,this.minBarHeight=2,this.brushRadius=3,this.brushPadding=8,this.barCount=30,this.dataStep=void 0,this.barRadius=1,this.barTopMargin=7,this.labelSideMargin=3,this.formatFunction=void 0,this.enableBrush=!0,this.stickyBrush=!0,this.events={onBrush:void 0,onBarHover:void 0}}}export{i as DEFAULT_PADDING,s as HistogramConfig};
+import{Config as t}from"../../utils.js";const i={top:5,left:5,bottom:1,right:5};class s extends t{constructor(){super(...arguments),this.padding=i,this.barsCount=50,this.barPadding=.1,this.minBarHeight=2,this.selectionBrushRadius=3,this.selectionBrushPadding=8,this.barCount=30,this.dataStep=void 0,this.barRadius=1,this.barTopMargin=7,this.labelSideMargin=3,this.formatFunction=void 0,this.allowSelection=!0,this.stickyBrush=!0,this.events={onBrush:void 0,onBarHover:void 0}}}export{i as DEFAULT_PADDING,s as HistogramConfig};
 //# sourceMappingURL=config.js.map

modules/histogram/index.d.ts

@@ -43,4 +43,4 @@ import { HistogramConfig, type HistogramConfigInterface, type HistogramEvents } from './config';
     setHistogramData(data: number[] | undefined, customExtent?: [number, number]): void;
-    /**  `setBrush`: Set the selected range on a `Histogram`. Takes a numeric selection range in the X axis u nits as a parameter. */
-    setBrush(selection?: [number, number]): void;
+    /**  `setSelection`: Set the selected range on a `Histogram`. Takes a numeric selection range in the X axis u nits as a parameter. */
+    setSelection(selection?: [number, number]): void;
     /**  `resize`: Resizes `Histogram` according to the parent node attributes. */
@@ -47,0 +47,0 @@ resize(): void;

modules/histogram/index.js

@@ -1,2 +0,2 @@
-import{axisBottom as t}from"d3-axis";import{ResizeObserver as i}from"@juggle/resize-observer";import{brushX as s}from"d3-brush";import{scaleSymlog as e,scaleLinear as a}from"d3-scale";import{select as r}from"d3-selection";import{extent as n,rollup as h,pairs as o}from"d3-array";import{HistogramConfig as _}from"./config.js";export{HistogramConfig}from"./config.js";import{getCountsInRange as c}from"../../utils.js";import l from"./style.module.css.js";class d{constructor(s,n){var h;this._config=new _,this._firstRender=!0,this._barWidth=0,this._maxCount=0,this._barsData=[],this._histogramData=void 0,this._bandIntervals=[],this._yScale=e(),this._xScale=a(),this._axis=t(this._xScale),this._getClosestRange=(t,i)=>{var s;return null===(s=this._barsData)||void 0===s?void 0:s.reduce(((s,e)=>Math.abs(e[i?"rangeEnd":"rangeStart"]-t)<Math.abs(s[i?"rangeEnd":"rangeStart"]-t)?e:s))};const{offsetWidth:o,offsetHeight:c}=s;n&&this._config.init(n),this._containerNode=s,this._containerNode.classList.add(l.histogram),this._width=o,this._height=c,this._formatter=null!==(h=null==n?void 0:n.formatFunction)&&void 0!==h?h:void 0,this._histogramWidth=this._width-this._config.padding.left-this._config.padding.right,this._histogramHeight=this._height-this._config.padding.top-this._config.padding.bottom,this._svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._svg.classList.add(l.histogramSvg),this._containerNode.appendChild(this._svg),this._noDataDiv=document.createElement("div"),r(this._noDataDiv).style("display","none").attr("class",l.noData).append("div").text("No histogram data"),this._containerNode.appendChild(this._noDataDiv),this._axisGroup=r(this._svg).append("g").attr("class",l.axis),this._barsGroup=r(this._svg).append("g").attr("class",l.bars),this._brushGroup=r(this._svg).append("g").attr("class",l.brush),this._axis.tickFormat((t=>this._formatter?this._formatter(t):t.toFixed(0))),this._resizeObserver=new i((()=>{this.resize()})),this._resizeObserver.observe(this._containerNode)}get _barPadding(){return this._barWidth*this._config.barPadding}get getCurrentSelection(){return this._currentSelection}get getCurrentSelectionInPixels(){var t;return null!==(t=this._currentSelectionInPixels)&&void 0!==t?t:[]}getBarWidth(){return this._barWidth-this._barPadding}getConfig(){return this._config}setConfig(t){var i,s,e,a;const r=JSON.parse(JSON.stringify(this._config));t?this._config.init(t):this._config=new _,this._config.enableBrush||this._disableBrush(),(null===(i=this._config)||void 0===i?void 0:i.dataStep)===(null===(s=r.config)||void 0===s?void 0:s.dataStep)&&(null===(e=this._config)||void 0===e?void 0:e.barCount)===(null===(a=r.config)||void 0===a?void 0:a.barCount)||this._updateHistogramData(),this.resize()}setHistogramData(t,i){var s,e,a;i&&i[1]<=i[0]||(this._histogramData=null==t?void 0:t.filter((t=>!isNaN(t)&&void 0!==t)),this._currentSelection=void 0,this._brushCurrentSelection(),null===(e=(s=this._config.events).onBrush)||void 0===e||e.call(s,this._currentSelection),r(this._noDataDiv).style("display","none"),(null===(a=this._histogramData)||void 0===a?void 0:a.length)?(this._extent=i||n(this._histogramData),this._firstRender=!0,this._updateHistogramData(),this._updateScales(),this.render()):r(this._noDataDiv).style("display","block"))}setBrush(t){if(t&&this._extent&&t[0]>this._extent[0]&&t[1]<this._extent[1]&&t[0]<t[1]){const i=t.map(this._xScale);this._mapSelection(i)}else this._currentSelection=void 0;this._brushCurrentSelection()}resize(){const{offsetWidth:t,offsetHeight:i}=this._containerNode;this._width=t,this._height=i,this._histogramWidth=this._width-this._config.padding.left-this._config.padding.right,this._histogramHeight=this._height-this._config.padding.top-this._config.padding.bottom,this._histogramHeight>this._config.padding.top+this._config.padding.bottom&&(this._updateScales(),this._currentSelection&&this.setBrush(this._currentSelection),this._firstRender||this.render())}render(){this._updateBrush(),this._updateBars(),this._updateAxis(),this._firstRender&&(this._firstRender=!1)}destroy(){this._containerNode.innerHTML=""}_updateAxis(){this._histogramData&&(this._axisGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top-this._config.brushPadding/2+1}px)`).call(this._axis).call((t=>t.select(".domain").remove())),this._axisGroup.selectAll(".tick").select("text").attr("class",l.axisTick).attr("y",0).attr("dy",0).attr("dx",this._config.labelSideMargin),this._axisGroup.selectAll(".tick:last-of-type text").attr("dx",-this._config.labelSideMargin).style("text-anchor","end"),this._axisGroup.selectAll("line").attr("y2",this._histogramHeight).attr("y1",0).attr("opacity",.1))}_updateBrush(){this._config.enableBrush&&(this._brushGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top}px)`),this._brushInstance=s().extent([[0,0],[this._histogramWidth,this._histogramHeight]]),this._brushInstance.on("end",(({selection:t,sourceEvent:i})=>{var s,e,a,r;i&&(t?(this._mapSelection(t),null===(e=(s=this._config.events).onBrush)||void 0===e||e.call(s,this._currentSelection)):(this._currentSelection=void 0,null===(r=(a=this._config.events).onBrush)||void 0===r||r.call(a,void 0)),this._brushCurrentSelection())})),this._brushGroup.call(this._brushInstance),this._brushGroup.select("rect.selection").classed(l.selection,!0).attr("rx",this._config.brushRadius).attr("ry",this._config.brushRadius))}_updateBars(){this._barsGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top-this._config.brushPadding/2}px)`);const t=this._barsGroup.selectAll(`.${l.bar}`).data(this._barsData).join("rect").attr("class",l.bar).attr("x",(t=>this._xScale(t.rangeStart)+this._barPadding/2)).attr("width",this.getBarWidth()).attr("rx",this._config.barRadius).attr("ry",this._config.barRadius).attr("y",-this._histogramHeight);this._config.events.onBarHover&&t.on("mouseover",this._config.events.onBarHover),t.transition().duration(300).attr("height",(t=>this._yScale(t.count))).style("opacity",(t=>this._yScale(t.count)===this._config.minBarHeight?.4:1))}_updateScales(){if(!this._extent||!this._barsData.length)return;const t=this._barsData[this._barsData.length-1],i=this._config.dataStep?[this._extent[0],t.rangeEnd]:this._extent;this._xScale.domain(i).range([0,this._histogramWidth]).clamp(!0),this._yScale.range([this._config.minBarHeight,this._histogramHeight-this._config.barTopMargin-this._config.brushPadding]).domain([0,this._maxCount]).clamp(!0),this._axis.tickValues(i),this._barWidth=this._xScale(t.rangeEnd)-this._xScale(t.rangeStart)}_disableBrush(){this._currentSelection=void 0,this._brushCurrentSelection(),this._brushGroup.selectAll("*").remove()}_updateHistogramData(){var t,i;if((null===(t=this._histogramData)||void 0===t?void 0:t.length)&&this._extent){const t=h(this._histogramData,(t=>t.length),(t=>t)),s=null!==(i=this._config.dataStep)&&void 0!==i?i:Math.abs(this._extent[1]-this._extent[0])/(this._config.barCount-1);if(0===s)return;if(this._bandIntervals=this._generateSequence(this._extent[0],this._extent[1],s),this._config.dataStep){const t=this._bandIntervals[this._bandIntervals.length-1];t<this._extent[1]&&this._bandIntervals.push(+t+s)}const e=o(this._bandIntervals);this._barsData=e.map((i=>({rangeStart:i[0],rangeEnd:i[1],count:c(t,i)}))),this._maxCount=Math.max(...this._barsData.map((t=>t.count)))}}_mapSelection(t){this._barsData.length&&(this._config.stickyBrush?(this._currentSelection=[this._getClosestRange(this._xScale.invert(t[0])).rangeStart,this._getClosestRange(this._xScale.invert(t[1]),!0).rangeEnd],this._currentSelection[0]===this._currentSelection[1]&&(this._currentSelection=void 0)):this._currentSelection=t.map(this._xScale.invert))}_brushCurrentSelection(){var t;this._currentSelection?(this._currentSelectionInPixels=this._currentSelection.map(this._xScale),this._brushInstance&&!this._firstRender&&this._brushGroup.call(this._brushInstance.move,this._currentSelectionInPixels)):(this._currentSelectionInPixels=void 0,null===(t=this._brushInstance)||void 0===t||t.clear(this._brushGroup))}_generateSequence(t,i,s){const e=Math.round((i-t)/s)+1,a=new Array(e);for(let i=0;i<e;i++)a[i]=t+i*s;return a}}export{d as Histogram};
+import{axisBottom as t}from"d3-axis";import{ResizeObserver as i}from"@juggle/resize-observer";import{brushX as s}from"d3-brush";import{scaleSymlog as e,scaleLinear as a}from"d3-scale";import{select as n}from"d3-selection";import{extent as r,rollup as h,pairs as o}from"d3-array";import{HistogramConfig as _}from"./config.js";export{HistogramConfig}from"./config.js";import{getCountsInRange as c}from"../../utils.js";import l from"./style.module.css.js";class d{constructor(s,r){var h;this._config=new _,this._firstRender=!0,this._barWidth=0,this._maxCount=0,this._barsData=[],this._histogramData=void 0,this._bandIntervals=[],this._yScale=e(),this._xScale=a(),this._axis=t(this._xScale),this._getClosestRange=(t,i)=>{var s;return null===(s=this._barsData)||void 0===s?void 0:s.reduce(((s,e)=>Math.abs(e[i?"rangeEnd":"rangeStart"]-t)<Math.abs(s[i?"rangeEnd":"rangeStart"]-t)?e:s))};const{offsetWidth:o,offsetHeight:c}=s;r&&this._config.init(r),this._containerNode=s,this._containerNode.classList.add(l.histogram),this._width=o,this._height=c,this._formatter=null!==(h=null==r?void 0:r.formatFunction)&&void 0!==h?h:void 0,this._histogramWidth=this._width-this._config.padding.left-this._config.padding.right,this._histogramHeight=this._height-this._config.padding.top-this._config.padding.bottom,this._svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._svg.classList.add(l.histogramSvg),this._containerNode.appendChild(this._svg),this._noDataDiv=document.createElement("div"),n(this._noDataDiv).style("display","none").attr("class",l.noData).append("div").text("No histogram data"),this._containerNode.appendChild(this._noDataDiv),this._axisGroup=n(this._svg).append("g").attr("class",l.axis),this._barsGroup=n(this._svg).append("g").attr("class",l.bars),this._brushGroup=n(this._svg).append("g").attr("class",l.brush),this._axis.tickFormat((t=>this._formatter?this._formatter(t):t.toFixed(0))),this._resizeObserver=new i((()=>{this.resize()})),this._resizeObserver.observe(this._containerNode)}get _barPadding(){return this._barWidth*this._config.barPadding}get getCurrentSelection(){return this._currentSelection}get getCurrentSelectionInPixels(){var t;return null!==(t=this._currentSelectionInPixels)&&void 0!==t?t:[]}getBarWidth(){return this._barWidth-this._barPadding}getConfig(){return this._config}setConfig(t){var i,s,e,a;const n=JSON.parse(JSON.stringify(this._config));t?this._config.init(t):this._config=new _,this._config.allowSelection||this._disableBrush(),(null===(i=this._config)||void 0===i?void 0:i.dataStep)===(null===(s=n.config)||void 0===s?void 0:s.dataStep)&&(null===(e=this._config)||void 0===e?void 0:e.barCount)===(null===(a=n.config)||void 0===a?void 0:a.barCount)||this._updateHistogramData(),this.resize()}setHistogramData(t,i){var s,e,a;i&&i[1]<=i[0]||(this._histogramData=null==t?void 0:t.filter((t=>!isNaN(t)&&void 0!==t)),this._currentSelection=void 0,this._brushCurrentSelection(),null===(e=(s=this._config.events).onBrush)||void 0===e||e.call(s,this._currentSelection),n(this._noDataDiv).style("display","none"),(null===(a=this._histogramData)||void 0===a?void 0:a.length)?(this._extent=i||r(this._histogramData),this._firstRender=!0,this._updateHistogramData(),this._updateScales(),this.render()):n(this._noDataDiv).style("display","block"))}setSelection(t){if(t&&this._extent&&t[0]>this._extent[0]&&t[1]<this._extent[1]&&t[0]<t[1]){const i=t.map(this._xScale);this._mapSelection(i)}else this._currentSelection=void 0;this._brushCurrentSelection()}resize(){const{offsetWidth:t,offsetHeight:i}=this._containerNode;this._width=t,this._height=i,this._histogramWidth=this._width-this._config.padding.left-this._config.padding.right,this._histogramHeight=this._height-this._config.padding.top-this._config.padding.bottom,this._histogramHeight>this._config.padding.top+this._config.padding.bottom&&(this._updateScales(),this._currentSelection&&this.setSelection(this._currentSelection),this._firstRender||this.render())}render(){this._updateBrush(),this._updateBars(),this._updateAxis(),this._firstRender&&(this._firstRender=!1)}destroy(){this._containerNode.innerHTML=""}_updateAxis(){this._histogramData&&(this._axisGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top-this._config.selectionBrushPadding/2+1}px)`).call(this._axis).call((t=>t.select(".domain").remove())),this._axisGroup.selectAll(".tick").select("text").attr("class",l.axisTick).attr("y",0).attr("dy",0).attr("dx",this._config.labelSideMargin),this._axisGroup.selectAll(".tick:last-of-type text").attr("dx",-this._config.labelSideMargin).style("text-anchor","end"),this._axisGroup.selectAll("line").attr("y2",this._histogramHeight).attr("y1",0).attr("opacity",.1))}_updateBrush(){this._config.allowSelection&&(this._brushGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top}px)`),this._brushInstance=s().extent([[0,0],[this._histogramWidth,this._histogramHeight]]),this._brushInstance.on("end",(({selection:t,sourceEvent:i})=>{var s,e,a,n;i&&(t?(this._mapSelection(t),null===(e=(s=this._config.events).onBrush)||void 0===e||e.call(s,this._currentSelection)):(this._currentSelection=void 0,null===(n=(a=this._config.events).onBrush)||void 0===n||n.call(a,void 0)),this._brushCurrentSelection())})),this._brushGroup.call(this._brushInstance),this._brushGroup.select("rect.selection").classed(l.selection,!0).attr("rx",this._config.selectionBrushRadius).attr("ry",this._config.selectionBrushRadius))}_updateBars(){this._barsGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top-this._config.selectionBrushPadding/2}px)`);const t=this._barsGroup.selectAll(`.${l.bar}`).data(this._barsData).join("rect").attr("class",l.bar).attr("x",(t=>this._xScale(t.rangeStart)+this._barPadding/2)).attr("width",this.getBarWidth()).attr("rx",this._config.barRadius).attr("ry",this._config.barRadius).attr("y",-this._histogramHeight);this._config.events.onBarHover&&t.on("mouseover",this._config.events.onBarHover),t.transition().duration(300).attr("height",(t=>this._yScale(t.count))).style("opacity",(t=>this._yScale(t.count)===this._config.minBarHeight?.4:1))}_updateScales(){if(!this._extent||!this._barsData.length)return;const t=this._barsData[this._barsData.length-1],i=this._config.dataStep?[this._extent[0],t.rangeEnd]:this._extent;this._xScale.domain(i).range([0,this._histogramWidth]).clamp(!0),this._yScale.range([this._config.minBarHeight,this._histogramHeight-this._config.barTopMargin-this._config.selectionBrushPadding]).domain([0,this._maxCount]).clamp(!0),this._axis.tickValues(i),this._barWidth=this._xScale(t.rangeEnd)-this._xScale(t.rangeStart)}_disableBrush(){this._currentSelection=void 0,this._brushCurrentSelection(),this._brushGroup.selectAll("*").remove()}_updateHistogramData(){var t,i;if((null===(t=this._histogramData)||void 0===t?void 0:t.length)&&this._extent){const t=h(this._histogramData,(t=>t.length),(t=>t)),s=null!==(i=this._config.dataStep)&&void 0!==i?i:Math.abs(this._extent[1]-this._extent[0])/(this._config.barCount-1);if(0===s)return;if(this._bandIntervals=this._generateSequence(this._extent[0],this._extent[1],s),this._config.dataStep){const t=this._bandIntervals[this._bandIntervals.length-1];t<this._extent[1]&&this._bandIntervals.push(+t+s)}const e=o(this._bandIntervals);this._barsData=e.map((i=>({rangeStart:i[0],rangeEnd:i[1],count:c(t,i)}))),this._maxCount=Math.max(...this._barsData.map((t=>t.count)))}}_mapSelection(t){this._barsData.length&&(this._config.stickyBrush?(this._currentSelection=[this._getClosestRange(this._xScale.invert(t[0])).rangeStart,this._getClosestRange(this._xScale.invert(t[1]),!0).rangeEnd],this._currentSelection[0]===this._currentSelection[1]&&(this._currentSelection=void 0)):this._currentSelection=t.map(this._xScale.invert))}_brushCurrentSelection(){var t;this._currentSelection?(this._currentSelectionInPixels=this._currentSelection.map(this._xScale),this._brushInstance&&!this._firstRender&&this._brushGroup.call(this._brushInstance.move,this._currentSelectionInPixels)):(this._currentSelectionInPixels=void 0,null===(t=this._brushInstance)||void 0===t||t.clear(this._brushGroup))}_generateSequence(t,i,s){const e=Math.round((i-t)/s)+1,a=new Array(e);for(let i=0;i<e;i++)a[i]=t+i*s;return a}}export{d as Histogram};
 //# sourceMappingURL=index.js.map

modules/timeline/config.d.ts

@@ -5,9 +5,9 @@ import { Config } from '../../utils';
 export declare class TimelineConfig extends Config implements TimelineConfigInterface {
-    enableBrush: boolean;
-    showAnimationControl: boolean;
+    allowSelection: boolean;
+    showAnimationControls: boolean;
     animationSpeed: number;
     padding: Padding;
     axisTickHeight: number;
-    brushRadius: number;
-    brushPadding: number;
+    selectionBrushRadius: number;
+    selectionBrushPadding: number;
     barCount: number;
@@ -20,4 +20,3 @@ barRadius: number;
     tickStep: undefined;
-    dateFormat: (date: Date) => string;
-    numFormat: (num: number) => string;
+    formatter: (date: number | Date) => string;
     events: TimelineEvents;
@@ -30,6 +29,6 @@ }
     axisTickHeight?: number;
-    /** `brushRadius`: Corners roundness of the data selection brush. Set in pixels. Default: `3` */
-    brushRadius?: number;
-    /** `brushPadding`: Padding of the data selection brush. Set in pixels. Default: `8` */
-    brushPadding?: number;
+    /** `selectionBrushRadius`: Corners roundness of the data selection brush. Set in pixels. Default: `3` */
+    selectionBrushRadius?: number;
+    /** `selectionBrushPadding`: Padding of the data selection brush. Set in pixels. Default: `8` */
+    selectionBrushPadding?: number;
     /** `barCount`: Number of bars to be displayed in the timeline. Ignored if `dataStep` is set. Default: `100` */
@@ -45,6 +44,6 @@ barCount?: number;
     minBarHeight?: number;
-    /** `enableBrush`: Determines whether or not the timeline allows users to select a range of dates using a brush control. Default: `true` */
-    enableBrush?: boolean;
-    /** `showAnimationControl`: If set to true, shows an animation control button that allows to play or pause animation of selected range of dates. Default: `false` */
-    showAnimationControl?: boolean;
+    /** `allowSelection`: Determines whether or not the timeline allows users to select a range of dates using a selection brush control. Default: `true` */
+    allowSelection?: boolean;
+    /** `showAnimationControls`: If set to true, shows an animation control button that allows to play or pause animation of selected range of dates. Default: `false` */
+    showAnimationControls?: boolean;
     /** `animationSpeed`: Rate of refresh for each selection brush movement. Set in ms. Default: `50` */
@@ -56,6 +55,4 @@ animationSpeed?: number;
     tickStep?: number;
-    /** `dateFormat`: Formatter function for the date ticks displayed on the timeline axis. */
-    dateFormat?: (date: Date) => string;
-    /** `numFormat`: Formatter function for the numeric ticks displayed on the axis for numeric timeline. */
-    numFormat?: (num: number) => string;
+    /** `formatter`: Formatter function for ticks displayed on the timeline axis. */
+    formatter?: (date: Date | number) => string;
     events?: TimelineEvents;
@@ -62,0 +59,0 @@ }

modules/timeline/config.js

@@ -1,2 +0,2 @@
-import{defaultDateFormat as i,defaultNumFormat as t}from"./format.js";import{Config as s}from"../../utils.js";const o={top:1,left:0,bottom:1,right:0};class a extends s{constructor(){super(...arguments),this.enableBrush=!0,this.showAnimationControl=!1,this.animationSpeed=50,this.padding=o,this.axisTickHeight=25,this.brushRadius=3,this.brushPadding=8,this.barCount=100,this.barRadius=1,this.barPadding=.1,this.barTopMargin=3,this.minBarHeight=1,this.dataStep=void 0,this.tickStep=void 0,this.dateFormat=i,this.numFormat=t,this.events={onBrush:void 0,onBarHover:void 0,onAnimationPlay:void 0,onAnimationPause:void 0}}}export{o as DEFAULT_PADDING,a as TimelineConfig};
+import{defaultDateFormat as i}from"./format.js";import{Config as t}from"../../utils.js";const o={top:1,left:0,bottom:1,right:0};class s extends t{constructor(){super(...arguments),this.allowSelection=!0,this.showAnimationControls=!1,this.animationSpeed=50,this.padding=o,this.axisTickHeight=25,this.selectionBrushRadius=3,this.selectionBrushPadding=8,this.barCount=100,this.barRadius=1,this.barPadding=.1,this.barTopMargin=3,this.minBarHeight=1,this.dataStep=void 0,this.tickStep=void 0,this.formatter=i,this.events={onBrush:void 0,onBarHover:void 0,onAnimationPlay:void 0,onAnimationPause:void 0}}}export{o as DEFAULT_PADDING,s as TimelineConfig};
 //# sourceMappingURL=config.js.map

modules/timeline/format.d.ts

@@ -1,2 +0,2 @@
-export declare const defaultDateFormat: (date: Date) => string;
+export declare const defaultDateFormat: (date: Date | number) => string;
 export declare const defaultNumFormat: (num: number) => string;

modules/timeline/format.js

@@ -1,2 +0,2 @@
-import{timeFormat as m}from"d3-time-format";import{format as o}from"d3-format";import{timeSecond as r,timeMinute as t,timeHour as d,timeDay as f,timeMonth as i,timeWeek as p,timeYear as a}from"d3-time";const e=m(".%L"),b=m(":%S"),I=m("%I:%M"),c=m("%I %p"),g=m("%a %d"),n=m("%b %d"),s=m("%b"),x=m("%Y"),L=m=>(r(m)<m?e:t(m)<m?b:d(m)<m?I:f(m)<m?c:i(m)<m?p(m)<m?g:n:a(m)<m?s:x)(m),M=m=>o(".5~g")(m);export{L as defaultDateFormat,M as defaultNumFormat};
+import{timeFormat as t}from"d3-time-format";import"d3-format";import{timeSecond as o,timeMinute as r,timeHour as m,timeDay as e,timeMonth as d,timeWeek as i,timeYear as p}from"d3-time";const a=t(".%L"),f=t(":%S"),n=t("%I:%M"),b=t("%I %p"),c=t("%a %d"),s=t("%b %d"),I=t("%b"),u=t("%Y"),w=t=>{const w=new Date(t);return(o(w)<w?a:r(w)<w?f:m(w)<w?n:e(w)<w?b:d(w)<w?i(w)<w?c:s:p(w)<w?I:u)(w)};export{w as defaultDateFormat};
 //# sourceMappingURL=format.js.map

modules/timeline/index.d.ts

@@ -58,6 +58,6 @@ import 'd3-transition';
     private _updateTimelineData;
-    /**  `setBrush`: Set the selected range on a `Timeline`. Takes a selection range as a parameter, which can be a range of dates or a range of numbers if `TimelineData` is numeric. */
-    setBrush(selectionRange?: [Date, Date] | [number, number]): void;
-    /**  `setBrushInPixels`: Set the selected range on a `Timeline` in pixels. Takes an array containing two numeric values representing selection range in pixels. */
-    setBrushInPixels(coordinates?: [number, number]): void;
+    /**  `setSelection`: Set the selected range on a `Timeline`. Takes a selection range as a parameter, which can be a range of dates or a range of numbers if `TimelineData` is numeric. */
+    setSelection(selectionRange?: [Date, Date] | [number, number]): void;
+    /**  `setSelectionInPixels`: Set the selected range on a `Timeline` in pixels. Takes an array containing two numeric values representing selection range in pixels. */
+    setSelectionInPixels(coordinates?: [number, number]): void;
     /**  `resize`: Resizes `Timeline` according to the parent node attributes. */
@@ -64,0 +64,0 @@ resize(): void;

modules/timeline/index.js

@@ -1,2 +0,2 @@
-import"d3-transition";import{ResizeObserver as i}from"@juggle/resize-observer";import{axisBottom as t}from"d3-axis";import{brushX as s}from"d3-brush";import{scaleSymlog as n,scaleTime as e,scaleLinear as a}from"d3-scale";import{select as o}from"d3-selection";import{extent as h,rollup as r,range as l,pairs as _}from"d3-array";import{play as c,pause as d}from"./assets.js";import{TimelineConfig as u}from"./config.js";export{TimelineConfig}from"./config.js";import v from"./style.module.css.js";import{getCountsInRange as m,getInnerDimensions as g}from"../../utils.js";class p{constructor(s,h){var r;if(this._isAnimationRunning=!1,this._svgParser=new DOMParser,this._height=0,this._width=0,this._timelineWidth=0,this._timelineHeight=0,this._config=new u,this._barWidth=0,this._maxCount=0,this._barsData=[],this._timeData=void 0,this._bandIntervals=[],this._isNumericTimeline=!1,this._firstRender=!0,this._yScale=n(),this._timeScale=e(),this._numScale=a(),this._activeAxisScale=this._timeScale,this._timeAxis=t(this._timeScale),this._numAxis=t(this._numScale),this._toggleAnimation=i=>{i.preventDefault(),this._isAnimationRunning?this.pauseAnimation():this.playAnimation()},this._disableAnimation=()=>{var i,t;this.pauseAnimation(),null===(i=this._animationControlDiv)||void 0===i||i.removeEventListener("click",this._toggleAnimation),null===(t=this._animationControlDiv)||void 0===t||t.remove()},this.playAnimation=()=>{var i,t,s,n;clearInterval(this._animationInterval),this._currentSelectionInPixels&&(this._animationInterval=setInterval(this._animateSelection,this._config.animationSpeed),this._isAnimationRunning=!0,null===(t=(i=this._config.events).onAnimationPlay)||void 0===t||t.call(i,this._isAnimationRunning,this._currentSelection)),null===(s=this._pauseButtonSvg)||void 0===s||s.classList.remove(v.hidden),null===(n=this._playButtonSvg)||void 0===n||n.classList.add(v.hidden)},this.pauseAnimation=()=>{var i,t,s,n;clearInterval(this._animationInterval),this._isAnimationRunning=!1,null===(t=(i=this._config.events).onAnimationPause)||void 0===t||t.call(i,this._isAnimationRunning,this._currentSelection),null===(s=this._pauseButtonSvg)||void 0===s||s.classList.add(v.hidden),null===(n=this._playButtonSvg)||void 0===n||n.classList.remove(v.hidden)},this.stopAnimation=()=>{var i,t;this.pauseAnimation(),this.setBrush(void 0),null===(t=(i=this._config.events).onBrush)||void 0===t||t.call(i,void 0)},this._animateSelection=()=>{var i,t;const s=this._currentSelectionInPixels;s&&void 0!==s[0]&&void 0!==s[1]&&(this.setBrushInPixels([s[0]+this._barWidth,s[1]+this._barWidth]),s[1]!==(null===(i=this._currentSelectionInPixels)||void 0===i?void 0:i[1])&&void 0!==(null===(t=this._currentSelectionInPixels)||void 0===t?void 0:t[1])||this.stopAnimation())},this._checkLastTickPosition=()=>{var i;const t=this._axisGroup.selectAll(".tick:last-of-type").nodes();if(null==t?void 0:t.length){const s=t[0],n=null==s?void 0:s.getBoundingClientRect().right,e=null===(i=this._svg)||void 0===i?void 0:i.getBoundingClientRect().right;s.style.display=n>=e?"none":"inherit"}},this.destroy=()=>{this._containerNode.innerHTML="",clearInterval(this._animationInterval)},h&&this._config.init(h),this._containerNode=s,this._svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._svg.classList.add(v.timelineSvg),this._animationControlDiv=document.createElement("div"),this._animationControlDiv.classList.add(v.animationControl),this._containerNode.classList.add(v.timeline),this._containerNode.appendChild(this._svg),this._noDataDiv=document.createElement("div"),o(this._noDataDiv).style("display","none").attr("class",v.noData).append("div").text("No timeline data"),this._containerNode.appendChild(this._noDataDiv),null===(r=this._config)||void 0===r?void 0:r.showAnimationControl){const i=setInterval((()=>{null!==this._containerNode&&(this._initAnimationControls(),clearInterval(i))}),100)}this._barsGroup=o(this._svg).append("g").attr("class",v.bars),this._axisGroup=o(this._svg).append("g").attr("class",v.axis),this._brushGroup=o(this._svg).append("g").attr("class",v.brush),this._timeAxis.tickFormat(this._config.dateFormat),this._numAxis.tickFormat(this._config.numFormat),this._resizeObserver=new i((i=>{window.requestAnimationFrame((()=>{Array.isArray(i)&&i.length&&this.resize()}))})),this._resizeObserver=new i((()=>{this.resize()})),this._resizeObserver.observe(this._containerNode)}get _barPadding(){return this._barWidth*this._config.barPadding}getCurrentSelection(){return this._currentSelection}getCurrentSelectionInPixels(){return this._currentSelectionInPixels}getBarWidth(){return this._barWidth-this._barPadding}getConfig(){return this._config}getIsAnimationRunning(){return this._isAnimationRunning}setConfig(i){var t,s,n,e,a,o;const h=JSON.parse(JSON.stringify(this._config));i?this._config.init(i):this._config=new u,(null===(t=this._config)||void 0===t?void 0:t.showAnimationControl)?(null===(s=this._animationControlDiv)||void 0===s?void 0:s.isConnected)||this._initAnimationControls():this._animationControlDiv&&this._disableAnimation(),this._config.enableBrush||this._disableBrush(),(null===(n=this._config)||void 0===n?void 0:n.dataStep)===(null===(e=h.config)||void 0===e?void 0:e.dataStep)&&(null===(a=this._config)||void 0===a?void 0:a.barCount)===(null===(o=h.config)||void 0===o?void 0:o.barCount)||this._updateTimelineData(),this.resize()}setTimeData(i){var t,s,n;this._timeData=null==i?void 0:i.filter((i=>!isNaN(+i)&&void 0!==i)),this._currentSelection=void 0,null===(s=(t=this._config.events).onBrush)||void 0===s||s.call(t,this._currentSelection),this._updateScales(),o(this._noDataDiv).style("display","none"),(null===(n=this._timeData)||void 0===n?void 0:n.length)?(this._dateExtent=h(this._timeData),this._updateTimelineData()):(this._barsData=[],this._axisGroup.selectAll("*").remove(),this._barsGroup.selectAll("*").remove(),this._brushGroup.selectAll("*").remove(),o(this._noDataDiv).style("display","block"),this._firstRender=!0)}_getBarsData(i,t){var s,n;if(!(i[1]<=i[0])&&(null===(s=this._timeData)||void 0===s?void 0:s.length)&&this._dateExtent){const s=r(this._timeData,(i=>i.length),(i=>i)),e=null!==(n=this._config.dataStep)&&void 0!==n?n:(i[1]-i[0])/(this._config.barCount-1);if(0===e)return;this._bandIntervals=l(+i[0],+i[1],e);const a=this._bandIntervals[this._bandIntervals.length-1];let o=this._config.dataStep?+a+e:i[1];t&&(this._bandIntervals=this._bandIntervals.map((i=>new Date(i))),o=new Date(o)),a<i[1]&&this._bandIntervals.push(o);const h=_(this._bandIntervals);this._barsData=h.map((i=>({rangeStart:i[0],rangeEnd:i[1],count:m(s,i)})))}}_updateTimelineData(){var i;if((null===(i=this._timeData)||void 0===i?void 0:i.length)&&this._dateExtent){if(this._isNumericTimeline=!(this._timeData[0]instanceof Date),this._isNumericTimeline)this._getBarsData(this._dateExtent);else{this._timeData=this._timeData.map((i=>new Date(i)));const i=this._dateExtent.map((i=>{var t;return null!==(t=i.getTime())&&void 0!==t?t:0}));this._getBarsData(i)}this._maxCount=Math.max(...this._barsData.map((i=>i.count)))}}setBrush(i){var t,s;i&&this._dateExtent&&i[0]>this._dateExtent[0]&&i[1]<this._dateExtent[1]&&i[0]<i[1]?(this._currentSelection=i,this._currentSelectionInPixels=this._currentSelection.map(this._activeAxisScale),null===(t=this._animationControlDiv)||void 0===t||t.classList.remove(v.disabled)):(this._currentSelection=void 0,this._currentSelectionInPixels=void 0,null===(s=this._animationControlDiv)||void 0===s||s.classList.add(v.disabled)),this._brushInstance&&!this._firstRender&&this._brushGroup.call(this._brushInstance.move,this._currentSelectionInPixels)}setBrushInPixels(i){var t,s,n,e,a;i&&i[0]>0&&i[1]<this._timelineWidth&&i[0]<i[1]?(this._currentSelection=i.map((i=>this._activeAxisScale.invert(i))),this._currentSelectionInPixels=null===(t=this._currentSelection)||void 0===t?void 0:t.map(this._activeAxisScale),null===(s=this._animationControlDiv)||void 0===s||s.classList.remove(v.disabled)):(this._currentSelection=void 0,this._currentSelectionInPixels=void 0,null===(n=this._animationControlDiv)||void 0===n||n.classList.add(v.disabled)),this._brushInstance&&!this._firstRender&&this._brushGroup.call(this._brushInstance.move,this._currentSelectionInPixels),null===(a=(e=this._config.events).onBrush)||void 0===a||a.call(e,this._currentSelection)}resize(){const{height:i,width:t}=g(this._containerNode),{offsetWidth:s}=this._animationControlDiv;this._width=t,this._height=i,this._timelineWidth=this._width-this._config.padding.left-this._config.padding.right-s,this._timelineHeight=this._height-this._config.padding.top-this._config.padding.bottom,this._timelineHeight>this._config.padding.top+this._config.padding.bottom&&(this._updateScales(),this._checkLastTickPosition(),this._currentSelection&&this.setBrush(this._currentSelection),this.render())}render(){this._updateBrush(),this._updateBars(),this._updateAxis(),this._firstRender&&(this._firstRender=!1)}_updateAxis(){this._timeData&&(this._axisGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top+this._config.axisTickHeight+1+this._config.brushPadding/2}px)`).call(this._isNumericTimeline?this._numAxis:this._timeAxis).call((i=>i.select(".domain").remove())),this._axisGroup.selectAll(".tick").select("text").attr("class",v.axisTick).attr("y",0).attr("dy",-this._config.axisTickHeight).attr("dx","5px"),this._axisGroup.selectAll("line").attr("class",v.axisLine).attr("y2",-this._config.axisTickHeight))}_updateBrush(){var i;this._config.enableBrush&&(this._brushGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top}px)`),this._brushInstance=s().extent([[0,0],[this._timelineWidth,this._timelineHeight]]),this._brushInstance.on("end",(({selection:i,sourceEvent:t})=>{var s,n,e,a,o,h,r;t&&(i?(this._currentSelection=i.map((i=>this._activeAxisScale.invert(i))),this._currentSelectionInPixels=null===(s=this._currentSelection)||void 0===s?void 0:s.map(this._activeAxisScale),null===(n=this._animationControlDiv)||void 0===n||n.classList.remove(v.disabled),null===(a=(e=this._config.events).onBrush)||void 0===a||a.call(e,this._currentSelection)):(this._currentSelection=void 0,this._currentSelectionInPixels=void 0,null===(h=(o=this._config.events).onBrush)||void 0===h||h.call(o,void 0),null===(r=this._animationControlDiv)||void 0===r||r.classList.add(v.disabled)))})),this._brushGroup.call(this._brushInstance),this._currentSelection?(this._currentSelectionInPixels=this._currentSelection.map(this._activeAxisScale),this._brushGroup.call(this._brushInstance.move,this._currentSelectionInPixels)):null===(i=this._brushInstance)||void 0===i||i.clear(this._brushGroup),this._brushGroup.select("rect.selection").classed(v.selection,!0).attr("rx",this._config.brushRadius).attr("ry",this._config.brushRadius))}_updateBars(){this._barsGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top-this._config.brushPadding/2}px)`);const i=this._barsGroup.selectAll(`.${v.bar}`).data(this._barsData).join("rect").attr("class",v.bar).attr("x",(i=>this._activeAxisScale(+i.rangeStart)+this._barPadding/2)).attr("width",this.getBarWidth()).attr("rx",this._config.barRadius).attr("ry",this._config.barRadius).attr("y",-this._timelineHeight);this._config.events.onBarHover&&i.on("mouseover",this._config.events.onBarHover),i.transition().duration(300).attr("height",(i=>this._yScale(i.count))).style("opacity",(i=>this._yScale(i.count)===this._config.minBarHeight?.25:1))}_updateScales(){if(!this._dateExtent||!this._barsData.length)return;const i=this._barsData[this._barsData.length-1];if(this._config.tickStep){const i=l(+this._dateExtent[0],+this._dateExtent[1],this._config.tickStep);this._isNumericTimeline?this._numAxis.tickValues(i):this._timeAxis.tickValues(i.map((i=>new Date(i))))}this._yScale.range([this._config.minBarHeight,this._timelineHeight-this._config.barTopMargin-this._config.brushPadding]).domain([0,this._maxCount]).clamp(!0),this._isNumericTimeline?(this._numScale.domain([this._dateExtent[0],i.rangeEnd]).range([0,this._timelineWidth]).clamp(!0),this._activeAxisScale=this._numScale):(this._timeScale.domain([this._dateExtent[0],i.rangeEnd]).range([0,this._timelineWidth]).clamp(!0),this._activeAxisScale=this._timeScale);const t=this._barsData[0],s=this._activeAxisScale(t.rangeEnd)-this._activeAxisScale(t.rangeStart);this._barWidth=s}_disableBrush(){var i,t;null===(i=this._brushInstance)||void 0===i||i.clear(this._brushGroup),this._currentSelectionInPixels=void 0,this._currentSelection=void 0,this.pauseAnimation(),this._brushGroup.selectAll("*").remove(),this._config.showAnimationControl&&(null===(t=this._animationControlDiv)||void 0===t||t.classList.add(v.disabled))}async _initAnimationControls(){this._containerNode.insertBefore(this._animationControlDiv,this._svg);await(async()=>{var i,t;if(!this._animationControlDiv.firstChild){const s=this._svgParser.parseFromString(c,"image/svg+xml").firstChild,n=this._svgParser.parseFromString(d,"image/svg+xml").firstChild;this._pauseButtonSvg=null===(i=this._animationControlDiv)||void 0===i?void 0:i.appendChild(n),this._playButtonSvg=null===(t=this._animationControlDiv)||void 0===t?void 0:t.appendChild(s)}})().then((()=>{var i,t,s,n,e;this._isAnimationRunning?(null===(s=this._playButtonSvg)||void 0===s||s.classList.add(v.playAnimation,v.hidden),null===(n=this._pauseButtonSvg)||void 0===n||n.classList.add(v.pauseAnimation)):(null===(i=this._playButtonSvg)||void 0===i||i.classList.add(v.playAnimation),null===(t=this._pauseButtonSvg)||void 0===t||t.classList.add(v.pauseAnimation,v.hidden)),this._currentSelection||null===(e=this._animationControlDiv)||void 0===e||e.classList.add(v.disabled),this._animationControlDiv.addEventListener("click",this._toggleAnimation)}))}}export{p as Timeline};
+import"d3-transition";import{ResizeObserver as i}from"@juggle/resize-observer";import{axisBottom as t}from"d3-axis";import{brushX as s}from"d3-brush";import{scaleSymlog as n,scaleTime as e,scaleLinear as a}from"d3-scale";import{select as o}from"d3-selection";import{extent as r,rollup as h,range as l,pairs as c}from"d3-array";import{play as _,pause as d}from"./assets.js";import{TimelineConfig as u}from"./config.js";export{TimelineConfig}from"./config.js";import v from"./style.module.css.js";import{getCountsInRange as m,getInnerDimensions as g}from"../../utils.js";class p{constructor(s,r){var h;if(this._isAnimationRunning=!1,this._svgParser=new DOMParser,this._height=0,this._width=0,this._timelineWidth=0,this._timelineHeight=0,this._config=new u,this._barWidth=0,this._maxCount=0,this._barsData=[],this._timeData=void 0,this._bandIntervals=[],this._isNumericTimeline=!1,this._firstRender=!0,this._yScale=n(),this._timeScale=e(),this._numScale=a(),this._activeAxisScale=this._timeScale,this._timeAxis=t(this._timeScale),this._numAxis=t(this._numScale),this._toggleAnimation=i=>{i.preventDefault(),this._isAnimationRunning?this.pauseAnimation():this.playAnimation()},this._disableAnimation=()=>{var i,t;this.pauseAnimation(),null===(i=this._animationControlDiv)||void 0===i||i.removeEventListener("click",this._toggleAnimation),null===(t=this._animationControlDiv)||void 0===t||t.remove()},this.playAnimation=()=>{var i,t,s,n;clearInterval(this._animationInterval),this._currentSelectionInPixels&&(this._animationInterval=setInterval(this._animateSelection,this._config.animationSpeed),this._isAnimationRunning=!0,null===(t=(i=this._config.events).onAnimationPlay)||void 0===t||t.call(i,this._isAnimationRunning,this._currentSelection)),null===(s=this._pauseButtonSvg)||void 0===s||s.classList.remove(v.hidden),null===(n=this._playButtonSvg)||void 0===n||n.classList.add(v.hidden)},this.pauseAnimation=()=>{var i,t,s,n;clearInterval(this._animationInterval),this._isAnimationRunning=!1,null===(t=(i=this._config.events).onAnimationPause)||void 0===t||t.call(i,this._isAnimationRunning,this._currentSelection),null===(s=this._pauseButtonSvg)||void 0===s||s.classList.add(v.hidden),null===(n=this._playButtonSvg)||void 0===n||n.classList.remove(v.hidden)},this.stopAnimation=()=>{var i,t;this.pauseAnimation(),this.setSelection(void 0),null===(t=(i=this._config.events).onBrush)||void 0===t||t.call(i,void 0)},this._animateSelection=()=>{var i,t;const s=this._currentSelectionInPixels;s&&void 0!==s[0]&&void 0!==s[1]&&(this.setSelectionInPixels([s[0]+this._barWidth,s[1]+this._barWidth]),s[1]!==(null===(i=this._currentSelectionInPixels)||void 0===i?void 0:i[1])&&void 0!==(null===(t=this._currentSelectionInPixels)||void 0===t?void 0:t[1])||this.stopAnimation())},this._checkLastTickPosition=()=>{var i;const t=this._axisGroup.selectAll(".tick:last-of-type").nodes();if(null==t?void 0:t.length){const s=t[0],n=null==s?void 0:s.getBoundingClientRect().right,e=null===(i=this._svg)||void 0===i?void 0:i.getBoundingClientRect().right;s.style.display=n>=e?"none":"inherit"}},this.destroy=()=>{this._containerNode.innerHTML="",clearInterval(this._animationInterval)},r&&this._config.init(r),this._containerNode=s,this._svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._svg.classList.add(v.timelineSvg),this._animationControlDiv=document.createElement("div"),this._animationControlDiv.classList.add(v.animationControl),this._containerNode.classList.add(v.timeline),this._containerNode.appendChild(this._svg),this._noDataDiv=document.createElement("div"),o(this._noDataDiv).style("display","none").attr("class",v.noData).append("div").text("No timeline data"),this._containerNode.appendChild(this._noDataDiv),null===(h=this._config)||void 0===h?void 0:h.showAnimationControls){const i=setInterval((()=>{null!==this._containerNode&&(this._initAnimationControls(),clearInterval(i))}),100)}this._barsGroup=o(this._svg).append("g").attr("class",v.bars),this._axisGroup=o(this._svg).append("g").attr("class",v.axis),this._brushGroup=o(this._svg).append("g").attr("class",v.brush),this._timeAxis.tickFormat(this._config.formatter),this._numAxis.tickFormat(this._config.formatter),this._resizeObserver=new i((i=>{window.requestAnimationFrame((()=>{Array.isArray(i)&&i.length&&this.resize()}))})),this._resizeObserver=new i((()=>{this.resize()})),this._resizeObserver.observe(this._containerNode)}get _barPadding(){return this._barWidth*this._config.barPadding}getCurrentSelection(){return this._currentSelection}getCurrentSelectionInPixels(){return this._currentSelectionInPixels}getBarWidth(){return this._barWidth-this._barPadding}getConfig(){return this._config}getIsAnimationRunning(){return this._isAnimationRunning}setConfig(i){var t,s,n,e,a,o;const r=JSON.parse(JSON.stringify(this._config));i?this._config.init(i):this._config=new u,(null===(t=this._config)||void 0===t?void 0:t.showAnimationControls)?(null===(s=this._animationControlDiv)||void 0===s?void 0:s.isConnected)||this._initAnimationControls():this._animationControlDiv&&this._disableAnimation(),this._config.allowSelection||this._disableBrush(),this._config.formatter&&(this._timeAxis.tickFormat(this._config.formatter),this._numAxis.tickFormat(this._config.formatter)),(null===(n=this._config)||void 0===n?void 0:n.dataStep)===(null===(e=r.config)||void 0===e?void 0:e.dataStep)&&(null===(a=this._config)||void 0===a?void 0:a.barCount)===(null===(o=r.config)||void 0===o?void 0:o.barCount)||this._updateTimelineData(),this.resize()}setTimeData(i){var t,s,n;this._timeData=null==i?void 0:i.filter((i=>!isNaN(+i)&&void 0!==i)),this._currentSelection=void 0,null===(s=(t=this._config.events).onBrush)||void 0===s||s.call(t,this._currentSelection),this._updateScales(),o(this._noDataDiv).style("display","none"),(null===(n=this._timeData)||void 0===n?void 0:n.length)?(this._dateExtent=r(this._timeData),this._updateTimelineData()):(this._barsData=[],this._axisGroup.selectAll("*").remove(),this._barsGroup.selectAll("*").remove(),this._brushGroup.selectAll("*").remove(),o(this._noDataDiv).style("display","block"),this._firstRender=!0)}_getBarsData(i,t){var s,n;if(!(i[1]<=i[0])&&(null===(s=this._timeData)||void 0===s?void 0:s.length)&&this._dateExtent){const s=h(this._timeData,(i=>i.length),(i=>i)),e=null!==(n=this._config.dataStep)&&void 0!==n?n:(i[1]-i[0])/(this._config.barCount-1);if(0===e)return;this._bandIntervals=l(+i[0],+i[1],e);const a=this._bandIntervals[this._bandIntervals.length-1];let o=this._config.dataStep?+a+e:i[1];t&&(this._bandIntervals=this._bandIntervals.map((i=>new Date(i))),o=new Date(o)),a<i[1]&&this._bandIntervals.push(o);const r=c(this._bandIntervals);this._barsData=r.map((i=>({rangeStart:i[0],rangeEnd:i[1],count:m(s,i)})))}}_updateTimelineData(){var i;if((null===(i=this._timeData)||void 0===i?void 0:i.length)&&this._dateExtent){if(this._isNumericTimeline=!(this._timeData[0]instanceof Date),this._isNumericTimeline)this._getBarsData(this._dateExtent);else{this._timeData=this._timeData.map((i=>new Date(i)));const i=this._dateExtent.map((i=>{var t;return null!==(t=i.getTime())&&void 0!==t?t:0}));this._getBarsData(i)}this._maxCount=Math.max(...this._barsData.map((i=>i.count)))}}setSelection(i){var t,s;i&&this._dateExtent&&i[0]>this._dateExtent[0]&&i[1]<this._dateExtent[1]&&i[0]<i[1]?(this._currentSelection=i,this._currentSelectionInPixels=this._currentSelection.map(this._activeAxisScale),null===(t=this._animationControlDiv)||void 0===t||t.classList.remove(v.disabled)):(this._currentSelection=void 0,this._currentSelectionInPixels=void 0,null===(s=this._animationControlDiv)||void 0===s||s.classList.add(v.disabled)),this._brushInstance&&!this._firstRender&&this._brushGroup.call(this._brushInstance.move,this._currentSelectionInPixels)}setSelectionInPixels(i){var t,s,n,e,a;i&&i[0]>0&&i[1]<this._timelineWidth&&i[0]<i[1]?(this._currentSelection=i.map((i=>this._activeAxisScale.invert(i))),this._currentSelectionInPixels=null===(t=this._currentSelection)||void 0===t?void 0:t.map(this._activeAxisScale),null===(s=this._animationControlDiv)||void 0===s||s.classList.remove(v.disabled)):(this._currentSelection=void 0,this._currentSelectionInPixels=void 0,null===(n=this._animationControlDiv)||void 0===n||n.classList.add(v.disabled)),this._brushInstance&&!this._firstRender&&this._brushGroup.call(this._brushInstance.move,this._currentSelectionInPixels),null===(a=(e=this._config.events).onBrush)||void 0===a||a.call(e,this._currentSelection)}resize(){const{height:i,width:t}=g(this._containerNode),{offsetWidth:s}=this._animationControlDiv;this._width=t,this._height=i,this._timelineWidth=this._width-this._config.padding.left-this._config.padding.right-s,this._timelineHeight=this._height-this._config.padding.top-this._config.padding.bottom,this._timelineHeight>this._config.padding.top+this._config.padding.bottom&&(this._updateScales(),this._checkLastTickPosition(),this._currentSelection&&this.setSelection(this._currentSelection),this.render())}render(){this._updateBrush(),this._updateBars(),this._updateAxis(),this._firstRender&&(this._firstRender=!1)}_updateAxis(){this._timeData&&(this._axisGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top+this._config.axisTickHeight+1+this._config.selectionBrushPadding/2}px)`).call(this._isNumericTimeline?this._numAxis:this._timeAxis).call((i=>i.select(".domain").remove())),this._axisGroup.selectAll(".tick").select("text").attr("class",v.axisTick).attr("y",0).attr("dy",-this._config.axisTickHeight).attr("dx","5px"),this._axisGroup.selectAll("line").attr("class",v.axisLine).attr("y2",-this._config.axisTickHeight))}_updateBrush(){var i;this._config.allowSelection&&(this._brushGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top}px)`),this._brushInstance=s().extent([[0,0],[this._timelineWidth,this._timelineHeight]]),this._brushInstance.on("end",(({selection:i,sourceEvent:t})=>{var s,n,e,a,o,r,h;t&&(i?(this._currentSelection=i.map((i=>this._activeAxisScale.invert(i))),this._currentSelectionInPixels=null===(s=this._currentSelection)||void 0===s?void 0:s.map(this._activeAxisScale),null===(n=this._animationControlDiv)||void 0===n||n.classList.remove(v.disabled),null===(a=(e=this._config.events).onBrush)||void 0===a||a.call(e,this._currentSelection)):(this._currentSelection=void 0,this._currentSelectionInPixels=void 0,null===(r=(o=this._config.events).onBrush)||void 0===r||r.call(o,void 0),null===(h=this._animationControlDiv)||void 0===h||h.classList.add(v.disabled)))})),this._brushGroup.call(this._brushInstance),this._currentSelection?(this._currentSelectionInPixels=this._currentSelection.map(this._activeAxisScale),this._brushGroup.call(this._brushInstance.move,this._currentSelectionInPixels)):null===(i=this._brushInstance)||void 0===i||i.clear(this._brushGroup),this._brushGroup.select("rect.selection").classed(v.selection,!0).attr("rx",this._config.selectionBrushRadius).attr("ry",this._config.selectionBrushRadius))}_updateBars(){this._barsGroup.style("transform",`translate(${this._config.padding.left}px, ${this._config.padding.top-this._config.selectionBrushPadding/2}px)`);const i=this._barsGroup.selectAll(`.${v.bar}`).data(this._barsData).join("rect").attr("class",v.bar).attr("x",(i=>this._activeAxisScale(+i.rangeStart)+this._barPadding/2)).attr("width",this.getBarWidth()).attr("rx",this._config.barRadius).attr("ry",this._config.barRadius).attr("y",-this._timelineHeight);this._config.events.onBarHover&&i.on("mouseover",this._config.events.onBarHover),i.transition().duration(300).attr("height",(i=>this._yScale(i.count))).style("opacity",(i=>this._yScale(i.count)===this._config.minBarHeight?.25:1))}_updateScales(){if(!this._dateExtent||!this._barsData.length)return;const i=this._barsData[this._barsData.length-1];if(this._config.tickStep){const i=l(+this._dateExtent[0],+this._dateExtent[1],this._config.tickStep);this._isNumericTimeline?this._numAxis.tickValues(i):this._timeAxis.tickValues(i.map((i=>new Date(i))))}this._yScale.range([this._config.minBarHeight,this._timelineHeight-this._config.barTopMargin-this._config.selectionBrushPadding]).domain([0,this._maxCount]).clamp(!0),this._isNumericTimeline?(this._numScale.domain([this._dateExtent[0],i.rangeEnd]).range([0,this._timelineWidth]).clamp(!0),this._activeAxisScale=this._numScale):(this._timeScale.domain([this._dateExtent[0],i.rangeEnd]).range([0,this._timelineWidth]).clamp(!0),this._activeAxisScale=this._timeScale);const t=this._barsData[0],s=this._activeAxisScale(t.rangeEnd)-this._activeAxisScale(t.rangeStart);this._barWidth=s}_disableBrush(){var i,t;null===(i=this._brushInstance)||void 0===i||i.clear(this._brushGroup),this._currentSelectionInPixels=void 0,this._currentSelection=void 0,this.pauseAnimation(),this._brushGroup.selectAll("*").remove(),this._config.showAnimationControls&&(null===(t=this._animationControlDiv)||void 0===t||t.classList.add(v.disabled))}async _initAnimationControls(){this._containerNode.insertBefore(this._animationControlDiv,this._svg);await(async()=>{var i,t;if(!this._animationControlDiv.firstChild){const s=this._svgParser.parseFromString(_,"image/svg+xml").firstChild,n=this._svgParser.parseFromString(d,"image/svg+xml").firstChild;this._pauseButtonSvg=null===(i=this._animationControlDiv)||void 0===i?void 0:i.appendChild(n),this._playButtonSvg=null===(t=this._animationControlDiv)||void 0===t?void 0:t.appendChild(s)}})().then((()=>{var i,t,s,n,e;this._isAnimationRunning?(null===(s=this._playButtonSvg)||void 0===s||s.classList.add(v.playAnimation,v.hidden),null===(n=this._pauseButtonSvg)||void 0===n||n.classList.add(v.pauseAnimation)):(null===(i=this._playButtonSvg)||void 0===i||i.classList.add(v.playAnimation),null===(t=this._pauseButtonSvg)||void 0===t||t.classList.add(v.pauseAnimation,v.hidden)),this._currentSelection||null===(e=this._animationControlDiv)||void 0===e||e.classList.add(v.disabled),this._animationControlDiv.addEventListener("click",this._toggleAnimation)}))}}export{p as Timeline};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@cosmograph/ui",
-  "version": "0.0.3-beta.6",
+  "version": "0.0.3-beta.7",
   "description": "Cosmograph UI Components",
@@ -5,0 +5,0 @@ "author": "cosmograph-org",

No alert changes

Improved metrics

Total package byte prevSize

684483

increased by0.1%

No dependency changes