Fullscreen pause rest

package.json

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

src/components/helpers/shortener.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react"
 import { mergeRefs } from "@netdata/netdata-ui"
 import { shortenToWidth } from "@/helpers/shorten"
+import makeResizeObserver from "@/helpers/makeResizeObserver"
 import Tooltip from "@/components/tooltip"
 
 const Shortener = ({ text, Component = "div", noTooltip, ref: forwardedRef, ...rest }) => {
@@ -11,15 +12,18 @@ const Shortener = ({ text, Component = "div", noTooltip, ref: forwardedRef, ...r
   useEffect(() => {
     if (!ref) return
 
-    const containerWidth = ref.offsetWidth
-    const contentWidth = ref.scrollWidth
+    const shorten = () => {
+      ref.textContent = text
 
-    const next = shortenToWidth(text, contentWidth, containerWidth)
+      const next = shortenToWidth(text, ref.scrollWidth, ref.offsetWidth)
 
-    if (next !== text) {
       ref.textContent = next
-      setShortenText(text)
+      setShortenText(next === text ? "" : text)
     }
+
+    shorten()
+
+    return makeResizeObserver(ref, shorten)
   }, [text, ref])
 
   return (

src/makeDefaultSDK.js

@@ -15,6 +15,7 @@ import select from "./sdk/plugins/select"
 import selectVertical from "./sdk/plugins/selectVertical"
 import play from "./sdk/plugins/play"
 import annotationSync from "./sdk/plugins/annotationSync"
+import fullscreen from "./sdk/plugins/fullscreen"
 
 const minutes15 = 15 * 60
 
@@ -31,6 +32,7 @@ export default ({ attributes, ...options } = {}) =>
       selectVertical,
       play,
       annotationSync,
+      fullscreen,
     },
     attributes: {
       _v: "v3",

src/sdk/makeChart/index.js

@@ -277,6 +277,12 @@ export default ({
     node.invalidateClosestRowCache()
   })
 
+  node.onAttributeChange("fullscreen", fullscreen => {
+    if (!node) return
+
+    sdk.trigger("fullscreen", node, fullscreen)
+  })
+
   node.makeChartUI = (uiName, chartLibrary = node.getAttribute("chartLibrary"), force = false) => {
     if (!(chartLibrary in sdk.ui))
       console.error(

src/sdk/plugins/fullscreen.js

@@ -0,0 +1,17 @@
+export default sdk => {
+  let deactivated = []
+
+  return sdk.on("fullscreen", (chart, isFullscreen) => {
+    if (isFullscreen) {
+      deactivated = sdk.getNodes(
+        (node, { active }) =>
+          node.type === "chart" && active && node.getId() !== chart.getId()
+      )
+      deactivated.forEach(node => node.deactivate())
+      return
+    }
+
+    deactivated.forEach(node => node.activate())
+    deactivated = []
+  })
+}