v5.5.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/chartLibraries/dygraph/index.js

@@ -17,6 +17,8 @@ import makeHoverX from "./hoverX"
 import makeOverlays from "./overlays"
 import crosshair from "./crosshair"
 
+const touchEvents = ["touchstart", "touchmove", "touchend"]
+
 export default (sdk, chart) => {
   const chartUI = makeChartUI(sdk, chart)
   let dygraph = null
@@ -120,6 +122,16 @@ export default (sdk, chart) => {
       () => chartUI.trigger("resize")
     )
 
+    touchEvents.forEach(eventType => {
+      element.addEventListener(
+        eventType,
+        event => {
+          event.preventDefault()
+        },
+        { passive: false }
+      )
+    })
+
     hoverX.toggle(attributes.enabledHover)
     navigation.toggle(attributes.enabledNavigation, attributes.navigation)
 

src/chartLibraries/dygraph/navigation/generic.js

@@ -1,7 +1,14 @@
+import Dygraph from "dygraphs"
+import DygraphInteraction from "dygraphs/src/dygraph-interaction-model"
 import { debounce } from "throttle-debounce"
 import limitRange from "@/helpers/limitRange"
+import makeHoverX from "../hoverX"
+
+const doubleTapDelay = 300
 
 export default chartUI => {
+  const { highlight, destroy } = makeHoverX(chartUI)
+
   const updateNavigation = (
     navigation,
     prevNavigation = chartUI.chart.getAttribute("navigation")
@@ -91,11 +98,60 @@ export default chartUI => {
     zoom(dygraph, percentage, xPct)
   }
 
+  let lastTouchEndTime = 0
+  let dygraphLastTouchMove = 0
+  let dygraphLastTouchPageX = 0
+
+  const touchStart = (event, dygraph, context) => {
+    Dygraph.defaultInteractionModel.touchstart(event, dygraph, context)
+
+    context.touchDirections = { x: true, y: false }
+
+    dygraphLastTouchMove = 0
+    dygraphLastTouchPageX = event.touches[0].pageX || 0
+  }
+
+  const touchMove = (event, dygraph, context) => {
+    Dygraph.defaultInteractionModel.touchmove(event, dygraph, context)
+
+    if (!dygraphLastTouchMove) chartUI.sdk.trigger("panStart", chartUI.chart)
+
+    dygraphLastTouchMove = Date.now()
+  }
+
+  const touchEnd = (event, dygraph, context) => {
+    const now = Date.now()
+
+    if (now - lastTouchEndTime < doubleTapDelay) {
+      chartUI.trigger("dblclick", event, dygraph, context)
+      lastTouchEndTime = now
+      return
+    }
+
+    lastTouchEndTime = now
+
+    Dygraph.defaultInteractionModel.touchend(event, dygraph, context)
+
+    if (dygraphLastTouchMove === 0 && dygraphLastTouchPageX !== 0) {
+      chartUI.chart.updateAttribute("clickX", [context.initialTouches?.[0]?.dataX, null])
+      return
+    }
+
+    if (chartUI.chart.getAttribute("panning"))
+      chartUI.sdk.trigger("panEnd", chartUI.chart, dygraph.dateWindow_)
+  }
+
   const unregister = chartUI
     .on("mousedown", mousedown)
     .on("mouseup", mouseup)
     .on("wheel", onZoom)
     .on("dblclick", chartUI.chart.resetNavigation)
+    .on("touchstart", touchStart)
+    .on("touchmove", touchMove)
+    .on("touchend", touchEnd)
 
-  return () => unregister()
+  return () => {
+    unregister()
+    destroy()
+  }
 }

src/chartLibraries/dygraph/navigation/pan.js

@@ -7,12 +7,7 @@ export default chartUI => {
     Dygraph.startPan(event, g, context)
     context.is2DPan = false
 
-    chartUI
-      .on("mousemove", mousemove)
-      .on("mouseout", mouseup)
-      .on("mouseup", mouseup)
-      .on("touchmove", mousemove)
-      .on("touchend", mouseup)
+    chartUI.on("mousemove", mousemove).on("mouseout", mouseup).on("mouseup", mouseup)
   }
 
   const mousemove = (event, g, context) => {
@@ -30,9 +25,7 @@ export default chartUI => {
     chartUI.off("mousemove", mousemove)
     chartUI.off("mouseup", mouseup)
     chartUI.off("mouseout", mouseup)
-    chartUI.off("touchmove", mousemove)
-    chartUI.off("touchend", mouseup)
   }
 
-  return chartUI.on("mousedown", mousedown).on("touchstart", mousedown)
+  return chartUI.on("mousedown", mousedown)
 }

src/helpers/eventOffset.js

@@ -1,5 +1,8 @@
-export default e => {
+export default (e, ctx = {}) => {
   const target = e.target || e.srcElement
   const rect = target.getBoundingClientRect()
-  return { offsetX: e.clientX - rect.left, offsetY: e.clientY - rect.top }
+  const [x, y] = /touch/.test(e.type)
+    ? [ctx.initialTouches?.[0]?.pageX, ctx.initialTouches?.[0]?.pageY]
+    : [e.clientX, e.clientY]
+  return { offsetX: x - rect.left, offsetY: y - rect.top }
 }

src/sdk/plugins/play.js

@@ -37,7 +37,7 @@ export default sdk => {
 
     if (
       active &&
-      !autofetch &&
+      (!autofetch || lastAfter - lastBefore !== fetchAfter - fetchBefore) &&
       (force || (loaded && (lastAfter !== fetchAfter || lastBefore !== fetchBefore)))
     ) {
       if (fetchStartedAt && now - chart.getUpdateEvery() <= fetchStartedAt) return