v4.5.0

package.json

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

src/agentv2.stories.js

@@ -7,6 +7,7 @@ import NumberComponent from "@/components/number"
 import D3pieComponent from "@/components/d3pie"
 import BarsComponent from "@/components/bars"
 import GroupBoxes from "@/components/groupBoxes"
+import Table from "@/components/table"
 import makeDefaultSDK from "./makeDefaultSDK"
 
 export const Chart = ({ nodesScope, contextScope, contexts, host, theme, singleDimension }) => {
@@ -27,6 +28,25 @@ export const Chart = ({ nodesScope, contextScope, contexts, host, theme, singleD
 
   sdk.appendChild(chart)
 
+  const chart7 = sdk.makeChart({
+    attributes: {
+      id: "control",
+      selectedContexts: [contexts],
+      nodesScope: [nodesScope],
+      contextScope: ["disk.io", "disk.ops", "disk.await", "disk.util"],
+      host: host,
+      aggregationMethod: "avg",
+      agent: true,
+      syncHover: true,
+      groupingMethod: "average",
+      chartLibrary: "table",
+      groupBy: ["label", "dimension", "context", "node"],
+      groupByLabel: ["device"],
+    },
+  })
+
+  sdk.appendChild(chart7)
+
   const chart2 = sdk.makeChart({
     attributes: {
       selectedContexts: [contexts],
@@ -171,6 +191,7 @@ export const Chart = ({ nodesScope, contextScope, contexts, host, theme, singleD
         <BarsComponent chart={chart10} height="100px" width="100px" />
       </Flex>
       <Line chart={chart} height="315px" width="100%" />
+      <Table chart={chart7} height="315px" width="100%" />
       <GroupBoxes chart={chart4} />
     </Flex>
   )
@@ -186,7 +207,7 @@ export default {
     contexts: "*",
     singleDimension: "*",
     theme: "default",
-    host: "http://10.10.10.20:19999/api/v2",
+    host: "http://10.20.4.200:19999/api/v2",
   },
   argTypes: {
     host: {

src/chartLibraries/table/index.js

@@ -0,0 +1,77 @@
+import makeChartUI from "@/sdk/makeChartUI"
+import { unregister } from "@/helpers/makeListeners"
+import makeResizeObserver from "@/helpers/makeResizeObserver"
+
+export default (sdk, chart) => {
+  const chartUI = makeChartUI(sdk, chart)
+  let listeners
+  let resizeObserver
+  let prevMin
+  let prevMax
+
+  const mount = element => {
+    chartUI.mount(element)
+
+    resizeObserver = makeResizeObserver(
+      element,
+      () => chartUI.trigger("resize"),
+      () => chartUI.trigger("resize")
+    )
+
+    const { loaded } = chart.getAttributes()
+
+    listeners = unregister(
+      chart.onAttributeChange("hoverX", render),
+      !loaded && chart.onceAttributeChange("loaded", render)
+    )
+
+    render()
+  }
+
+  const render = () => {
+    chartUI.render()
+
+    const { hoverX, loaded } = chart.getAttributes()
+
+    if (!loaded) return
+
+    const { data } = chart.getPayload()
+
+    const row = hoverX ? chart.getClosestRow(hoverX[0]) : data.length - 1
+
+    const rowData = data[row]
+    if (!Array.isArray(rowData)) return
+
+    chartUI.render()
+    const min = chart.getAttribute("min")
+    const max = chart.getAttribute("max")
+
+    if (min !== prevMin || max !== prevMax) {
+      chartUI.sdk.trigger("yAxisChange", chart, min, max)
+    }
+
+    prevMin = min
+    prevMax = max
+
+    chartUI.trigger("rendered")
+  }
+
+  const unmount = () => {
+    if (listeners) listeners()
+
+    if (resizeObserver) resizeObserver()
+
+    chartUI.unmount()
+    prevMin = null
+    prevMax = null
+  }
+
+  const instance = {
+    ...chartUI,
+    mount,
+    unmount,
+    render,
+  }
+
+  return instance
+}

src/components/line/dimensions/color.js

@@ -54,9 +54,9 @@ export const BaseColorBar = ({
   )
 }
 
-export const ColorBar = ({ id, valueKey, ...rest }) => {
+export const ColorBar = ({ id, partIndex, valueKey, ...rest }) => {
   const chart = useChart()
-  const bg = valueKey === "arp" ? "anomalyTextLite" : chart.selectDimensionColor(id)
+  const bg = valueKey === "arp" ? "anomalyTextLite" : chart.selectDimensionColor(id, partIndex)
 
   const min = valueKey === "arp" ? 0 : chart.getAttribute("min")
   const max = valueKey === "arp" ? 100 : chart.getAttribute("max")
@@ -80,9 +80,9 @@ export const ColorBar = ({ id, valueKey, ...rest }) => {
   )
 }
 
-const ColorValue = ({ id, ...rest }) => {
+const ColorValue = ({ id, partIndex, ...rest }) => {
   const chart = useChart()
-  const bg = chart.selectDimensionColor(id)
+  const bg = chart.selectDimensionColor(id, partIndex)
 
   if (!bg) return null
 

src/components/line/dimensions/name.js

@@ -17,9 +17,9 @@ export const Name = memo(
   ))
 )
 
-const Container = ({ id, ...rest }) => {
+const Container = ({ id, partIndex, ...rest }) => {
   const chart = useChart()
-  const name = chart.getDimensionName(id)
+  const name = chart.getDimensionName(id, partIndex)
 
   return <Name {...rest}>{name}</Name>
 }