Fix/issue 1320 update text search (#1321)

* fix #1320 use value instead of v-model to detect changes to be applied * correct mousemove funciotn of timeline chart when nothing is there
impresso · Oct 7, 2024 · 069d2ec · 069d2ec
1 parent 50ef1f2
commit 069d2ec
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 66 deletions.
diff --git a/src/components/modules/FilterMonitor.vue b/src/components/modules/FilterMonitor.vue
@@ -85,7 +85,7 @@
             size="sm"
             placeholder=""
             class="accepted"
-            v-model="item.uid"
+            :value="item.uid"
             @click.prevent.stop
             @update:modelValue="changeStringFilterItemAtIndex($event, idx)"
           >

diff --git a/src/d3-modules/Line.js b/src/d3-modules/Line.js
@@ -1,6 +1,6 @@
-import * as d3 from 'd3';
-import Basic from './Basic';
-import Dimension from './Dimension';
+import * as d3 from 'd3'
+import Basic from './Basic'
+import Dimension from './Dimension'
 
 export default class Line extends Basic {
   constructor({
@@ -10,12 +10,12 @@ export default class Line extends Basic {
       top: 10,
       bottom: 10,
       left: 10,
-      right: 10,
+      right: 10
     },
     ticks = {
-      offset: 9,
+      offset: 9
     },
-    dimensions = {},
+    dimensions = {}
   } = {}) {
     super({
       element,
@@ -26,103 +26,102 @@ export default class Line extends Basic {
           name: 'x',
           property: 'x',
           type: Dimension.TYPE_CONTINUOUS,
-          scaleFn: d3.scaleLinear,
+          scaleFn: d3.scaleLinear
         }),
         y: new Dimension({
           name: 'y',
           property: 'y',
           type: Dimension.TYPE_CONTINUOUS,
-          scaleFn: d3.scaleLinear,
+          scaleFn: d3.scaleLinear
         }),
-        ...dimensions,
-      },
-    });
-    this.ticks = ticks;
+        ...dimensions
+      }
+    })
+    this.ticks = ticks
     // setup main context
-    this.context = this.g.append('g')
+    this.context = this.g
+      .append('g')
       .classed('context', true)
-      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
+      .attr('transform', `translate(${this.margin.left},${this.margin.top})`)
 
-    this.contextBackground = this.context.append('rect');
+    this.contextBackground = this.context.append('rect')
 
-    this.contextArea = this.context.append('path')
-      .attr('class', 'area');
-    this.contextCurve = this.context.append('path')
-      .attr('class', 'curve');
+    this.contextArea = this.context.append('path').attr('class', 'area')
+    this.contextCurve = this.context.append('path').attr('class', 'curve')
 
-    this.contextPointer = this.context.append('circle')
-      .attr('r', 3)
-      .attr('class', 'pointer');
+    this.contextPointer = this.context.append('circle').attr('r', 3).attr('class', 'pointer')
 
-    this.context.on('mousemove', this.mousemove.bind(this));
-    this.context.on('mouseenter', this.mouseenter.bind(this));
-    this.context.on('mouseleave', this.mouseleave.bind(this));
-    this.resize();
+    this.context.on('mousemove', this.mousemove.bind(this))
+    this.context.on('mouseenter', this.mouseenter.bind(this))
+    this.context.on('mouseleave', this.mouseleave.bind(this))
+    this.resize()
   }
 
   mouseenter() {
-    this.contextPointer.classed('active', true);
-    this.emit('mouseenter');
+    this.contextPointer.classed('active', true)
+    this.emit('mouseenter')
   }
 
   mouseleave() {
-    this.contextPointer.classed('active', false);
-    this.emit('mouseleave');
+    this.contextPointer.classed('active', false)
+    this.emit('mouseleave')
   }
 
   highlight(datum) {
     if (datum) {
-      const { index, nearest } = this.dimensions.x
-        .getNearestValue(datum[this.dimensions.x.property]);
+      const { index, nearest } = this.dimensions.x.getNearestValue(
+        datum[this.dimensions.x.property]
+      )
       if (nearest) {
-        const pointerX = this.dimensions.x.scale(nearest);
-        const pointerY = this.dimensions.y.scale(this.data[index][this.dimensions.y.property]);
+        const pointerX = this.dimensions.x.scale(nearest)
+        const pointerY = this.dimensions.y.scale(this.data[index][this.dimensions.y.property])
 
         this.contextPointer
           .classed('active', true)
-          .attr('transform', `translate(${pointerX},${pointerY})`);
+          .attr('transform', `translate(${pointerX},${pointerY})`)
 
         this.emit('highlighted', {
           pointer: {
             x: pointerX,
-            y: pointerY,
+            y: pointerY
           },
-          datum: this.data[index],
-        });
+          datum: this.data[index]
+        })
       }
     }
   }
 
   mousemove(a, b, el) {
-    const [mouseX, mouseY] = d3.mouse(el[0]);
-    const scaledX = this.dimensions.x.scale.invert(mouseX);
-    const { index, nearest } = this.dimensions.x.getNearestValue(scaledX);
+    const [mouseX, mouseY] = d3.mouse(el[0])
+    const scaledX = this.dimensions.x.scale.invert(mouseX)
+    const { index, nearest } = this.dimensions.x.getNearestValue(scaledX)
 
     if (index === -1) return
+    if (index < 0 || index >= this.data.length) return
 
-    const pointerX = this.dimensions.x.scale(nearest);
-    const pointerY = this.dimensions.y.scale(this.data[index][this.dimensions.y.property]);
+    const pointerX = this.dimensions.x.scale(nearest)
+    const pointerY = this.dimensions.y.scale(this.data[index][this.dimensions.y.property])
 
-    this.contextPointer.attr('transform', `translate(${pointerX},${pointerY})`);
+    this.contextPointer.attr('transform', `translate(${pointerX},${pointerY})`)
 
     this.emit('mousemove', {
       mouse: {
         x: mouseX,
-        y: mouseY,
+        y: mouseY
       },
       pointer: {
         x: pointerX,
-        y: pointerY,
+        y: pointerY
       },
-      datum: this.data[index],
-    });
+      datum: this.data[index]
+    })
   }
 
   resize() {
-    super.resize();
+    super.resize()
     // update dimension range
     if (this.data) {
-      this.draw();
+      this.draw()
     }
   }
   /**
@@ -131,39 +130,39 @@ export default class Line extends Basic {
    * @param  {Array}  [data=[]] For this, required at least
    * @return {[type]}           [description]
    */
-  update({
-    data = [],
-  } = {}) {
-    this.data = data;
+  update({ data = [] } = {}) {
+    this.data = data
     // console.info('update line', data);
     this.dimensions.x.update({
       values: data,
-      range: [0, this.width - this.margin.left - this.margin.right],
-    });
+      range: [0, this.width - this.margin.left - this.margin.right]
+    })
     this.dimensions.y.update({
       values: data,
-      range: [this.height - this.margin.top - this.margin.bottom, 0],
-    });
+      range: [this.height - this.margin.top - this.margin.bottom, 0]
+    })
   }
 
   draw() {
     this.contextBackground
       .attr('width', this.width - this.margin.right - this.margin.left)
-      .attr('height', this.height - this.margin.bottom - this.margin.top);
+      .attr('height', this.height - this.margin.bottom - this.margin.top)
 
     // setup curve
-    this.curve = d3.line()
+    this.curve = d3
+      .line()
       .curve(d3.curveLinear)
       .x(this.dimensions.x.accessor())
-      .y(this.dimensions.y.accessor());
+      .y(this.dimensions.y.accessor())
 
     // setup area
-    this.area = d3.area()
+    this.area = d3
+      .area()
       .x(this.dimensions.x.accessor())
       .y0(this.height - this.margin.bottom - this.ticks.offset)
-      .y1(this.dimensions.y.accessor());
+      .y1(this.dimensions.y.accessor())
 
-    this.contextCurve.datum(this.data).attr('d', this.curve);
-    this.contextArea.datum(this.data).attr('d', this.area);
+    this.contextCurve.datum(this.data).attr('d', this.curve)
+    this.contextArea.datum(this.data).attr('d', this.area)
   }
 }