Fix: Apache ECharts Panel Issues in Grafana Dashboard

charts/client/Chart.yaml

@@ -15,7 +15,7 @@ type: application
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
-version: 1.1.23
+version: 1.1.24
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to

charts/client/templates/configmap-kuberhealthy-dashboard.yaml

@@ -56,7 +56,7 @@ data:
               "key": "",
               "plugin": "AMap.Scale,AMap.ToolBar"
             },
-            "getOption": "let option; // Initialize the option variable\n\nif (typeof data === 'undefined' || !data.series || !data.series[0] || !data.series[0].fields) {\n  // Data is not available or doesn't have the expected structure\n  option = {\n    title: {\n      text: 'Data not available',\n      textStyle: {\n        fontSize: 24,\n        fontWeight: 'bold',\n      },\n      left: 'center',\n      top: 'middle',\n    },\n  };\n} else {\n  // Extract data from your JSON as before\n  const namespaces = data.series[0].fields[0].values;\n  const counts = data.series[0].fields[1].values;\n\n  // Create a hierarchical structure from the data with a default cluster node\n  const hierarchy = {\n    name: 'CheckName', // Default cluster node\n    children: [],\n  };\n\n  // Create an object to store namespaces and their counts\n  const namespaceCounts = {};\n\n  // Populate the namespaceCounts object with namespaces and counts\n  for (let i = 0; i < namespaces.length; i++) {\n    const namespace = namespaces[i];\n    const count = counts[i];\n\n    if (!namespaceCounts[namespace]) {\n      namespaceCounts[namespace] = count;\n    } else {\n      namespaceCounts[namespace] += count;\n    }\n  }\n\n  // Create nodes for each namespace and add them as children of the default cluster node\n  for (const namespace in namespaceCounts) {\n    hierarchy.children.push({\n      name: namespace,\n      children: [{ name: `${namespaceCounts[namespace]}` }],\n    });\n  }\n\n  // Create the tree chart using ECharts\n  option = {\n    tooltip: {\n      trigger: 'item',\n      triggerOn: 'mousemove',\n      formatter: function (params) {\n        const node = params.data;\n        let tooltip = '';\n        if (node.column) {\n          tooltip += `${node.column}: ${node.name}`;\n        } else {\n          tooltip += node.name;\n        }\n        return tooltip;\n      },\n    },\n    series: [\n      {\n        type: 'tree',\n        data: [hierarchy], // Use the hierarchy object as the data\n        top: '1%',\n        left: '7%',\n        bottom: '1%',\n        right: '20%',\n        symbolSize: 7,\n        label: {\n          position: 'left',\n          verticalAlign: 'middle',\n          align: 'centre',\n          fontSize: 15, // Increase the text size for regular nodes\n          fontWeight: 'bold', // Set the font weight to bold\n        },\n        leaves: {\n          label: {\n            position: 'right',\n            verticalAlign: 'middle',\n            align: 'left',\n            fontSize: 15, // Increase the text size for leaves\n            fontWeight: 'bold', // Set the font weight to bold\n          },\n        },\n        emphasis: {\n          focus: 'descendant',\n        },\n        expandAndCollapse: true,\n        animationDuration: 550,\n        animationDurationUpdate: 750,\n      },\n    ],\n  };\n}\n\nreturn option;\n",
+            "getOption": "let option; // Initialize the option variable\n\nif (typeof context.panel.data === 'undefined' || !context.panel.data.series || !context.panel.data.series[0] || !context.panel.data.series[0].fields) {\n  // Data is not available or doesn't have the expected structure\n  option = {\n    title: {\n      text: 'Data not available',\n      textStyle: {\n        fontSize: 24,\n        fontWeight: 'bold',\n      },\n      left: 'center',\n      top: 'middle',\n    },\n  };\n} else {\n  // Extract data from your JSON as before\n  const namespaces = context.panel.data.series[0].fields[0].values;\n  const counts = context.panel.data.series[0].fields[1].values;\n\n  // Create a hierarchical structure from the data with a default cluster node\n  const hierarchy = {\n    name: 'CheckName', // Default cluster node\n    children: [],\n  };\n\n  // Create an object to store namespaces and their counts\n  const namespaceCounts = {};\n\n  // Populate the namespaceCounts object with namespaces and counts\n  for (let i = 0; i < namespaces.length; i++) {\n    const namespace = namespaces[i];\n    const count = counts[i];\n\n    if (!namespaceCounts[namespace]) {\n      namespaceCounts[namespace] = count;\n    } else {\n      namespaceCounts[namespace] += count;\n    }\n  }\n\n  // Create nodes for each namespace and add them as children of the default cluster node\n  for (const namespace in namespaceCounts) {\n    hierarchy.children.push({\n      name: namespace,\n      children: [{ name: `${namespaceCounts[namespace]}` }],\n    });\n  }\n\n  // Create the tree chart using ECharts\n  option = {\n    tooltip: {\n      trigger: 'item',\n      triggerOn: 'mousemove',\n      formatter: function (params) {\n        const node = params.data;\n        let tooltip = '';\n        if (node.column) {\n          tooltip += `${node.column}: ${node.name}`;\n        } else {\n          tooltip += node.name;\n        }\n        return tooltip;\n      },\n    },\n    series: [\n      {\n        type: 'tree',\n        data: [hierarchy], // Use the hierarchy object as the data\n        top: '1%',\n        left: '7%',\n        bottom: '1%',\n        right: '20%',\n        symbolSize: 7,\n        label: {\n          position: 'left',\n          verticalAlign: 'middle',\n          align: 'centre',\n          fontSize: 15, // Increase the text size for regular nodes\n          fontWeight: 'bold', // Set the font weight to bold\n        },\n        leaves: {\n          label: {\n            position: 'right',\n            verticalAlign: 'middle',\n            align: 'left',\n            fontSize: 15, // Increase the text size for leaves\n            fontWeight: 'bold', // Set the font weight to bold\n          },\n        },\n        emphasis: {\n          focus: 'descendant',\n        },\n        expandAndCollapse: true,\n        animationDuration: 550,\n        animationDurationUpdate: 750,\n      },\n    ],\n  };\n}\n\nreturn option;\n",
             "google": {
               "callback": "gmapReady",
               "key": ""
@@ -124,7 +124,7 @@ data:
               "key": "",
               "plugin": "AMap.Scale,AMap.ToolBar"
             },
-            "getOption": "let option; // Initialize the option variable\n\nif (typeof data === 'undefined' || !data.series || !data.series[0] || !data.series[0].fields) {\n  // Data is not available or doesn't have the expected structure\n  option = {\n    title: {\n      text: 'Data not available',\n      textStyle: {\n        fontSize: 24,\n        fontWeight: 'bold',\n      },\n      left: 'center',\n      top: 'middle',\n    },\n  };\n} else {\n  // Extract data from your JSON as before\n  const namespaces = data.series[0].fields[0].values;\n  const counts = data.series[0].fields[1].values;\n\n  // Create a hierarchical structure from the data with a default cluster node\n  const hierarchy = {\n    name: 'CheckName', // Default cluster node\n    children: [],\n  };\n\n  // Create an object to store namespaces and their counts\n  const namespaceCounts = {};\n\n  // Populate the namespaceCounts object with namespaces and counts\n  for (let i = 0; i < namespaces.length; i++) {\n    const namespace = namespaces[i];\n    const count = counts[i];\n\n    if (!namespaceCounts[namespace]) {\n      namespaceCounts[namespace] = count;\n    } else {\n      namespaceCounts[namespace] += count;\n    }\n  }\n\n  // Create nodes for each namespace and add them as children of the default cluster node\n  for (const namespace in namespaceCounts) {\n    hierarchy.children.push({\n      name: namespace,\n      children: [{ name: `${namespaceCounts[namespace]}` }],\n    });\n  }\n\n  // Create the tree chart using ECharts\n  option = {\n    tooltip: {\n      trigger: 'item',\n      triggerOn: 'mousemove',\n      formatter: function (params) {\n        const node = params.data;\n        let tooltip = '';\n        if (node.column) {\n          tooltip += `${node.column}: ${node.name}`;\n        } else {\n          tooltip += node.name;\n        }\n        return tooltip;\n      },\n    },\n    series: [\n      {\n        type: 'tree',\n        data: [hierarchy], // Use the hierarchy object as the data\n        top: '1%',\n        left: '7%',\n        bottom: '1%',\n        right: '20%',\n        symbolSize: 7,\n        label: {\n          position: 'left',\n          verticalAlign: 'middle',\n          align: 'centre',\n          fontSize: 15, // Increase the text size for regular nodes\n          fontWeight: 'bold', // Set the font weight to bold\n        },\n        leaves: {\n          label: {\n            position: 'right',\n            verticalAlign: 'middle',\n            align: 'left',\n            fontSize: 15, // Increase the text size for leaves\n            fontWeight: 'bold', // Set the font weight to bold\n          },\n        },\n        emphasis: {\n          focus: 'descendant',\n        },\n        expandAndCollapse: true,\n        animationDuration: 550,\n        animationDurationUpdate: 750,\n      },\n    ],\n  };\n}\n\nreturn option;\n",
+            "getOption": "let option; // Initialize the option variable\n\nif (typeof context.panel.data === 'undefined' || !context.panel.data.series || !context.panel.data.series[0] || !context.panel.data.series[0].fields) {\n  // Data is not available or doesn't have the expected structure\n  option = {\n    title: {\n      text: 'Data not available',\n      textStyle: {\n        fontSize: 24,\n        fontWeight: 'bold',\n      },\n      left: 'center',\n      top: 'middle',\n    },\n  };\n} else {\n  // Extract data from your JSON as before\n  const namespaces = context.panel.data.series[0].fields[0].values;\n  const counts = context.panel.data.series[0].fields[1].values;\n\n  // Create a hierarchical structure from the data with a default cluster node\n  const hierarchy = {\n    name: 'CheckName', // Default cluster node\n    children: [],\n  };\n\n  // Create an object to store namespaces and their counts\n  const namespaceCounts = {};\n\n  // Populate the namespaceCounts object with namespaces and counts\n  for (let i = 0; i < namespaces.length; i++) {\n    const namespace = namespaces[i];\n    const count = counts[i];\n\n    if (!namespaceCounts[namespace]) {\n      namespaceCounts[namespace] = count;\n    } else {\n      namespaceCounts[namespace] += count;\n    }\n  }\n\n  // Create nodes for each namespace and add them as children of the default cluster node\n  for (const namespace in namespaceCounts) {\n    hierarchy.children.push({\n      name: namespace,\n      children: [{ name: `${namespaceCounts[namespace]}` }],\n    });\n  }\n\n  // Create the tree chart using ECharts\n  option = {\n    tooltip: {\n      trigger: 'item',\n      triggerOn: 'mousemove',\n      formatter: function (params) {\n        const node = params.data;\n        let tooltip = '';\n        if (node.column) {\n          tooltip += `${node.column}: ${node.name}`;\n        } else {\n          tooltip += node.name;\n        }\n        return tooltip;\n      },\n    },\n    series: [\n      {\n        type: 'tree',\n        data: [hierarchy], // Use the hierarchy object as the data\n        top: '1%',\n        left: '7%',\n        bottom: '1%',\n        right: '20%',\n        symbolSize: 7,\n        label: {\n          position: 'left',\n          verticalAlign: 'middle',\n          align: 'centre',\n          fontSize: 15, // Increase the text size for regular nodes\n          fontWeight: 'bold', // Set the font weight to bold\n        },\n        leaves: {\n          label: {\n            position: 'right',\n            verticalAlign: 'middle',\n            align: 'left',\n            fontSize: 15, // Increase the text size for leaves\n            fontWeight: 'bold', // Set the font weight to bold\n          },\n        },\n        emphasis: {\n          focus: 'descendant',\n        },\n        expandAndCollapse: true,\n        animationDuration: 550,\n        animationDurationUpdate: 750,\n      },\n    ],\n  };\n}\n\nreturn option;\n",
             "google": {
               "callback": "gmapReady",
               "key": ""
@@ -1210,7 +1210,8 @@ data:
       "timezone": "",
       "title": "KuberHealth",
       "uid": "d946c53c-8b1d-4e3c-9154-4219165342",
-      "version": 2,
+      "version": 3,
       "weekStart": ""
     }
+
 {{- end }}