@net7/components 3.0.2-rc.2 → 3.1.0

package/fesm2020/net7-components.mjs

@@ -844,6 +844,7 @@ class HistogramRangeComponent {
             const svg = d3
                 .select(`#${containerId}`)
                 .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`);
+            this.svg = svg;
             const scaleHeight = d3
                 .scaleSymlog() // most similar scale to the original
                 .domain([0, d3.max(items, (d) => d.value)])
@@ -892,7 +893,7 @@ class HistogramRangeComponent {
                 .attr('fill', 'url(#gradient)');
             barsLayer // catch bar events
                 .on('mousemove', (event) => {
-                const year = XtoLABEL(event.offsetX - margin.left);
+                const year = XtoLABEL(this.getEventCoords(event).x);
                 d3.selectAll('rect.bars').attr('fill', (d) => {
                     if (year === d.label)
                         return '#B0CCF8';
@@ -903,7 +904,7 @@ class HistogramRangeComponent {
                 d3.selectAll('rect.bars').attr('fill', (d) => colourBars(d));
             })
                 .on('click', (event) => {
-                const label = XtoLABEL(event.offsetX - margin.left);
+                const label = XtoLABEL(this.getEventCoords(event).x);
                 const xAxisValue = LABELtoX(label) + LABELtoX.bandwidth() / 2;
                 const newValue = {
                     x: xAxisValue,
@@ -969,8 +970,8 @@ class HistogramRangeComponent {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const self = this; // FIXME: Allow use of class "this" inside dragging update;
             /**
-             * Animate the elements while the user is dragging one of the range selectors
-             */
+           * Animate the elements while the user is dragging one of the range selectors
+           */
             function draggingUpdate(event, data) {
                 const label = XtoLABEL(event.x);
                 const xAxisValue = LABELtoX(label) + LABELtoX.bandwidth() / 2;
@@ -1082,20 +1083,22 @@ class HistogramRangeComponent {
             this.d3.selectAll('rect.bars').attr('fill', (d) => this.colourBars(d));
         };
         /** Public api that allows to dinamically change the slider position */
-        this.setSliders = ([startLabel, endLabel]) => {
+        this.setSliders = ([startLabel, endLabel], emit = true) => {
+            // setSliders([1450, 1575])
             this.data.setSliders = [`${startLabel}`, `${endLabel}`];
             this.draw();
             this.d3.selectAll('rect.bars').attr('fill', (d) => this.colourBars(d));
             const range = this.getSelectedRange();
-            this.emit('rangeselected', range);
+            if (emit)
+                this.emit('rangeselected', range);
             this.textCollision(this.sliders);
             return range;
         };
     }
     ngAfterContentChecked() {
         /*
-         Waits for the dom to be loaded, then fires the draw function
-         that renders the chart.
+             Waits for the dom to be loaded, then fires the draw function
+             that renders the chart.
         */
         if (this.data) {
             if (this._loaded)
@@ -1116,7 +1119,7 @@ class HistogramRangeComponent {
                         });
                     }
                     // eslint-disable-next-line dot-notation
-                    window['setSliders'] = this.setSliders;
+                    // window['setSliders'] = this.setSliders;
                 });
             });
         }
@@ -1130,6 +1133,17 @@ class HistogramRangeComponent {
             .paddingInner(0.17)
             .paddingOuter(1);
     }
+    /**
+     * Get an event with viewBox coordinates and
+     * parse them in absolute coordinates
+     */
+    getEventCoords(event) {
+        const m = event.target.getScreenCTM();
+        const point = this.svg.node().createSVGPoint();
+        point.x = event.clientX;
+        point.y = event.clientY;
+        return point.matrixTransform(m.inverse());
+    }
     /** Emits an event when the component has loaded */
     emitLoaded(payload) {
         if (!this.emit)
@@ -6666,8 +6680,8 @@ const HISTOGRAM_RANGE_MOCK = {
         accent: '#2F528B',
     },
     margin: {
-        left: 30,
-        right: 0,
+        left: 25,
+        right: 5,
         top: 10,
         bottom: 45
     },