Dashboard modifications

Author: ahinvinith

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.8
+version: 1.1.9
 
 # 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-azure-dashboard.yaml

@@ -26,7 +26,7 @@ data:
       "editable": true,
       "fiscalYearStartMonth": 0,
       "graphTooltip": 0,
-      "id": 13,
+      "id": 34,
       "links": [],
       "liveNow": false,
       "panels": [
@@ -55,7 +55,7 @@ data:
               "key": "",
               "plugin": "AMap.Scale,AMap.ToolBar"
             },
-            "getOption": "// Check if data.series exists\nif (data.series && data.series.length > 0) {\n  const eventTypes = data.series[0].fields[0].values;\n  const authors = data.series[0].fields[1].values;\n  const repoNames = data.series[0].fields[2].values;\n  const total = data.series[0].fields[3].values; // Assuming you have a field named \"Total\"\n\n  // Create nodes and links\n  const nodes = [];\n  const links = [];\n\n  authors.forEach((author, index) => {\n    const sourceNode = {\n      name: author,\n      category: 0, // Category for source nodes\n      symbolSize: 60, // Size for source nodes\n    };\n\n    const eventTypeNode = {\n      name: eventTypes[index],\n      category: 1, // Category for eventType nodes\n      symbolSize: 40, // Size for eventType nodes\n    };\n\n    const repoNode = {\n      name: repoNames[index],\n      category: 2, // Category for repo nodes\n      symbolSize: 30, // Size for repo nodes\n    };\n\n    const totalNode = {\n      name: `Total: ${total[index]}`, // Assuming you have an array \"total\"\n      category: 3, // Category for total nodes\n      symbolSize: 20, // Size for total nodes\n    };\n\n    // Ensure source, eventType, repo, and total nodes are unique before adding them\n    if (!nodes.some((node) => node.name === sourceNode.name)) {\n      nodes.push(sourceNode);\n    }\n\n    if (!nodes.some((node) => node.name === eventTypeNode.name)) {\n      nodes.push(eventTypeNode);\n    }\n\n    if (!nodes.some((node) => node.name === repoNode.name)) {\n      nodes.push(repoNode);\n    }\n\n    if (!nodes.some((node) => node.name === totalNode.name)) {\n      nodes.push(totalNode);\n    }\n\n    // Create links between author, eventType, repo, and total nodes\n    links.push({\n      source: author,\n      target: eventTypes[index],\n    });\n\n    links.push({\n      source: eventTypes[index],\n      target: repoNames[index],\n    });\n\n    links.push({\n      source: eventTypes[index],\n      target: totalNode.name,\n    });\n  });\n\n  // Create categories for nodes\n  const categories = [\n    {\n      name: 'Authors',\n    },\n    {\n      name: 'Event Type',\n    },\n    {\n      name: 'Repo Names',\n    },\n    {\n      name: 'Total', // Add a category for \"Total\" nodes\n    },\n  ];\n\n  // Create ECharts option\n  const option = {\n    tooltip: {\n      trigger: 'item',\n      formatter: '{b}',\n    },\n    legend: {\n      x: 'left',\n      data: ['Authors', 'Event Types', 'Repo Names', 'Total'], // Add \"Total\" to legend data\n    },\n    series: [\n      {\n        type: 'graph',\n        layout: 'force',\n        roam: true,\n        label: {\n          show: true,\n          textStyle: {  // Add textStyle property to configure text style\n            color: '#000', // Set the text color to a brighter color, such as white (#FFF)\n          },\n        },\n        force: {\n          repulsion: 100,\n          gravity: 0.1,\n          edgeLength: 150,\n        },\n        data: nodes,\n        links: links,\n        draggable: true,\n        categories: categories,\n        edgeSymbol: [\"none\", \"arrow\"],\n\n        // Increase the size of arrow marks\n        edgeSymbolSize: [10, 10], // Set the arrow size here\n        lineStyle: {\n          color: \"#000000\",\n          curveness: 0,\n          opacity: 0.3,\n        },\n      },\n    ],\n  };\n\n  // Return the ECharts option\n  return option;\n} else {\n  // Handle the case when data.series does not exist\n  return {};\n}\n",
+            "getOption": "// Check if data.series exists\nif (data.series && data.series.length > 0) {\n  const eventTypes = data.series[0].fields[0].values;\n  const authors = data.series[0].fields[1].values;\n  const repoNames = data.series[0].fields[2].values;\n  const total = data.series[0].fields[3].values; // Assuming you have a field named \"Total\"\n\n  // Create nodes and links\n  const nodes = [];\n  const links = [];\n\n  authors.forEach((author, index) => {\n    const sourceNode = {\n      name: author,\n      category: 0, // Category for source nodes\n      symbolSize: 60, // Size for source nodes\n    };\n\n    const eventTypeNode = {\n      name: eventTypes[index],\n      category: 1, // Category for eventType nodes\n      symbolSize: 40, // Size for eventType nodes\n    };\n\n    const repoNode = {\n      name: repoNames[index],\n      category: 2, // Category for repo nodes\n      symbolSize: 30, // Size for repo nodes\n    };\n\n    const totalNode = {\n      name: `Total: ${total[index]}`, // Assuming you have an array \"total\"\n      category: 3, // Category for total nodes\n      symbolSize: 20, // Size for total nodes\n    };\n\n    // Ensure source, eventType, repo, and total nodes are unique before adding them\n    if (!nodes.some((node) => node.name === sourceNode.name)) {\n      nodes.push(sourceNode);\n    }\n\n    if (!nodes.some((node) => node.name === eventTypeNode.name)) {\n      nodes.push(eventTypeNode);\n    }\n\n    if (!nodes.some((node) => node.name === repoNode.name)) {\n      nodes.push(repoNode);\n    }\n\n    if (!nodes.some((node) => node.name === totalNode.name)) {\n      nodes.push(totalNode);\n    }\n\n    // Create links between author, eventType, repo, and total nodes\n    links.push({\n      source: author,\n      target: eventTypes[index],\n    });\n\n    links.push({\n      source: eventTypes[index],\n      target: repoNames[index],\n    });\n\n    links.push({\n      source: eventTypes[index],\n      target: totalNode.name,\n    });\n  });\n\n  // Create categories for nodes\n  const categories = [\n    {\n      name: 'Authors',\n    },\n    {\n      name: 'Event Type',\n    },\n    {\n      name: 'Repo Names',\n    },\n    {\n      name: 'Total', // Add a category for \"Total\" nodes\n    },\n  ];\n\n  // Create ECharts option\n  const option = {\n    tooltip: {\n      trigger: 'item',\n      formatter: '{b}',\n    },\n    legend: {\n      x: 'left',\n      data: ['Authors', 'Event Types', 'Repo Names', 'Total'], // Add \"Total\" to legend data\n    },\n    series: [\n      {\n        type: 'graph',\n        layout: 'circular',\n        roam: true,\n        label: {\n          show: true,\n          textStyle: {  // Add textStyle property to configure text style\n            color: '#000', // Set the text color to a brighter color, such as white (#FFF)\n          },\n        },\n        force: {\n          repulsion: 100,\n          gravity: 0.1,\n          edgeLength: 150,\n        },\n        data: nodes,\n        links: links,\n        draggable: true,\n        categories: categories,\n        edgeSymbol: [\"none\", \"arrow\"],\n\n        // Increase the size of arrow marks\n        edgeSymbolSize: [12, 12], // Set the arrow size here\n        lineStyle: {\n          color: \"#000000\",\n          curveness: 0,\n          opacity: 0.3,\n        },\n      },\n    ],\n  };\n\n  // Return the ECharts option\n  return option;\n} else {\n  // Display a custom message when data is not available\n  const 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\n  return option;\n}",
             "google": {
               "callback": "gmapReady",
               "key": ""
@@ -114,7 +114,7 @@ data:
               "key": "",
               "plugin": "AMap.Scale,AMap.ToolBar"
             },
-            "getOption": "// Extract Author and Push_Events data from the series\nconst categories = data.series[0].fields.find((f) => f.name === 'Author').values;\nconst pushEvents = data.series[0].fields.find((f) => f.name === 'Push_Events').values;\n\n// Create the ECharts options\nconst options = {\n  grid: {\n    bottom: '3%',\n    containLabel: true,\n    left: '3%',\n    right: '4%',\n    top: '4%',\n  },\n  toolbox: {\n    right: '5%', // Adjust the right margin to position it on the top right\n    top: '0%', // Adjust the top margin to position it on the top right\n    feature: {\n      dataZoom: {\n        yAxisIndex: 'none',\n      },\n      restore: {},\n    },\n  },\n  tooltip: {\n    trigger: 'axis',\n    axisPointer: {\n      type: 'shadow',\n    },\n  },\n  xAxis: {\n    type: 'category',\n    data: categories,\n  },\n  yAxis: {\n    type: 'value',\n  },\n  legend: {\n    data: ['Push_Events'],\n    orient: 'vertical', // Change the orientation to vertical\n    left: '5%', // Adjust the left margin to position it on the top left\n    top: '5%', // Adjust the top margin to position it on the top left\n  },\n  series: [\n    {\n      data: pushEvents,\n      type: 'line',\n      areaStyle: {\n        color: 'rgba(0, 128, 255, 0.3)', // Set the area (shadow) color\n      },\n      name: 'Push_Events',\n    },\n  ],\n};\n\nreturn options;",
+            "getOption": "let options; // Initialize the options variable\n\nif (!data || !data.series || data.series.length === 0 || !data.series[0].fields) {\n  // Data is not available or doesn't have the expected structure\n  options = {\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 Author and Push_Events data from the series\n  const categories = data.series[0].fields.find((f) => f.name === 'Author').values;\n  const pushEvents = data.series[0].fields.find((f) => f.name === 'Push_Events').values;\n\n  // Create the ECharts options\n  options = {\n    grid: {\n      bottom: '3%',\n      containLabel: true,\n      left: '3%',\n      right: '4%',\n      top: '4%',\n    },\n    toolbox: {\n      right: '5%', // Adjust the right margin to position it on the top right\n      top: '0%', // Adjust the top margin to position it on the top right\n      feature: {\n        dataZoom: {\n          yAxisIndex: 'none',\n        },\n        restore: {},\n      },\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        type: 'shadow',\n      },\n    },\n    xAxis: {\n      type: 'category',\n      data: categories,\n    },\n    yAxis: {\n      type: 'value',\n    },\n    legend: {\n      data: ['Push_Events'],\n      orient: 'vertical', // Change the orientation to vertical\n      left: '5%',\n      top: '5%',\n    },\n    series: [\n      {\n        data: pushEvents,\n        type: 'line',\n        areaStyle: {\n          color: 'rgba(0, 128, 255, 0.3)', // Set the area (shadow) color\n        },\n        lineStyle: {\n          color: 'blue', // Set the line color\n        },\n        name: 'Push_Events',\n      },\n    ],\n  };\n}\n\nreturn options;\n",
             "google": {
               "callback": "gmapReady",
               "key": ""
@@ -173,7 +173,7 @@ data:
               "key": "",
               "plugin": "AMap.Scale,AMap.ToolBar"
             },
-            "getOption": "// Extract Author and Merge_Events data from the series\nconst categories = data.series[0].fields.find((f) => f.name === 'Author').values;\nconst mergeEvents = data.series[0].fields.find((f) => f.name === 'Merge_Events').values;\n\n// Create the ECharts options\nconst options = {\n  grid: {\n    bottom: '3%',\n    containLabel: true,\n    left: '3%',\n    right: '4%',\n    top: '4%',\n  },\n  toolbox: {\n    right: '5%', // Adjust the right margin to position it on the top right\n    top: '0%', // Adjust the top margin to position it on the top right\n    feature: {\n      dataZoom: {\n        yAxisIndex: 'none',\n      },\n      restore: {},\n    },\n  },\n  tooltip: {\n    trigger: 'axis',\n    axisPointer: {\n      type: 'shadow',\n    },\n  },\n  xAxis: {\n    type: 'category',\n    data: categories,\n  },\n  yAxis: {\n    type: 'value',\n  },\n  legend: {\n    data: ['Merge_Events'],\n    orient: 'vertical',\n    left: '5%',\n    top: '5%',\n  },\n  series: [\n    {\n      data: mergeEvents,\n      type: 'line',\n      name: 'Merge_Events',\n      areaStyle: {\n        color: 'rgba(255, 0, 0, 0.3)', // Set the area (shadow) color\n      },\n      lineStyle: {\n        color: 'red', // Set the line color\n      },\n    },\n  ],\n};\n\nreturn options;",
+            "getOption": "let option; // Initialize the option variable\n\n// Define a default options object\nconst defaultOptions = {\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\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 = defaultOptions;\n} else {\n  // Extract Author and Merge_Events data from the series\n  const categories = data.series[0].fields.find((f) => f.name === 'Author').values;\n  const mergeEvents = data.series[0].fields.find((f) => f.name === 'Merge_Events').values;\n\n  // Create the ECharts options\n  const options = {\n    grid: {\n      bottom: '3%',\n      containLabel: true,\n      left: '3%',\n      right: '4%',\n      top: '4%',\n    },\n    toolbox: {\n      right: '5%', // Adjust the right margin to position it on the top right\n      top: '0%', // Adjust the top margin to position it on the top right\n      feature: {\n        dataZoom: {\n          yAxisIndex: 'none',\n        },\n        restore: {},\n      },\n    },\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        type: 'shadow',\n      },\n    },\n    xAxis: {\n      type: 'category',\n      data: categories,\n    },\n    yAxis: {\n      type: 'value',\n    },\n    legend: {\n      data: ['Merge_Events'],\n      orient: 'vertical',\n      left: '5%',\n      top: '5%',\n    },\n    series: [\n      {\n        data: mergeEvents,\n        type: 'line',\n        name: 'Merge_Events',\n        areaStyle: {\n          color: 'rgba(255, 0, 0, 0.3)', // Set the area (shadow) color\n        },\n        lineStyle: {\n          color: 'red', // Set the line color\n        },\n      },\n    ],\n  };\n\n  option = options; // Assign the options to the outer variable\n}\n\nreturn option;\n",
             "google": {
               "callback": "gmapReady",
               "key": ""
@@ -223,8 +223,7 @@ data:
                 "mode": "absolute",
                 "steps": [
                   {
-                    "color": "green",
-                    "value": null
+                    "color": "green"
                   },
                   {
                     "color": "red",
@@ -294,8 +293,7 @@ data:
                 "mode": "absolute",
                 "steps": [
                   {
-                    "color": "green",
-                    "value": null
+                    "color": "green"
                   },
                   {
                     "color": "red",
@@ -483,7 +481,7 @@ data:
       "timezone": "",
       "title": "BitBucket",
       "uid": "a7772dd5-76c7-48f3-8462-b39fbc20941c",
-      "version": 2,
+      "version": 1,
       "weekStart": ""
     }
 {{- end }}