(enhancement) Badges for release versions, DB versions, code coverage etc?

[lyricnz]

eg from emhass project

[LukePrior]

Good idea.

[LukePrior]

Can find most of them here: https://shields.io/badges

[lyricnz]

• total number of suburbs, properties in DB?
• number/% of FTTP, vs upgrade-available, vs no-upgrade, vs other tech (maybe a graph one day?)
• unit test count, results, coverage

[LukePrior]

I like the idea of generating graphs, but I'm not sure if any service exists where a link to a JSON file can be provided in the URL and a graph is dynamically generated and returned as an image for embedding in a markdown file.

Maybe https://quickchart.io/documentation/

[LukePrior]

I tried making a graph.

Had to import data into google sheets for use with quickchart.

https://quickchart.io/chart/render/sf-fce67a4f-2c64-41d8-aa96-9f584e67a4ef

Online editor

Config

{
  "type": "line",
  "data": {
    "datasets": [
      {
        "fill": true,
        "borderWidth": 2,
        "type": "line",
        "label": "FTTN",
        "borderColor": "#37a3eb",
        "backgroundColor": "#9bd0f4"
      },
      {
        "fill": true,
        "borderWidth": 2,
        "type": "line",
        "label": "HFC",
        "borderColor": "#ff6384",
        "backgroundColor": "#ffb1c1"
      },
      {
        "fill": true,
        "borderWidth": 2,
        "type": "line",
        "label": "FTTP",
        "borderColor": "#fe9f41",
        "backgroundColor": "#fecf9e"
      },
      {
        "fill": true,
        "borderWidth": 2,
        "type": "line",
        "label": "FTTC",
        "borderColor": "#fecc56",
        "backgroundColor": "#ffe6aa"
      },
      {
        "fill": true,
        "borderWidth": 2,
        "type": "line",
        "label": "WIRELESS",
        "borderColor": "#4bc0c0",
        "backgroundColor": "#a4dedf"
      },
      {
        "fill": true,
        "borderWidth": 2,
        "type": "line",
        "label": "SATELLITE",
        "borderColor": "#9966ff",
        "backgroundColor": "#ccb2ff"
      },
      {
        "fill": true,
        "borderWidth": 2,
        "type": "line",
        "label": "FTTB",
        "borderColor": "#c9cace",
        "backgroundColor": "#e5e5e6"
      },
    ],
    "labels": []
  },
  "options": {
    "layout": {
      "padding": {
        "right": 100,
        "top": 50,
        "bottom": 50,
        "left": 100
      }
    },
    "scales": {
      "y": 
        {
          "display": false,
          "stacked": true,
          "beginAtZero": true,
        }
    },
    "plugins": {
      "datalabels": {
        "display": function(context) {
          const chartWidth = context.chart.width - 200;
          const labels = context.chart.data.labels.length;
          
          // You can adjust this threshold based on your specific needs
          const minWidthToShowLabels = 300;

          // Calculate the width of each label
          const labelWidth = chartWidth / labels;

          // Calculate the width required to display one label comfortably
          const minLabelWidth = 150; // Adjust this value based on the minimum width you want for a label

          // Calculate the maximum number of labels that can fit in the chart
          const maxLabelsToFit = Math.floor(chartWidth / minLabelWidth);

          // Calculate the number of labels to display evenly across the chart
          const visibleLabels = Math.min(labels, maxLabelsToFit);

          // Calculate the step size to evenly distribute the labels
          const stepSize = Math.floor(labels / visibleLabels);

          // Determine if the current label should be displayed based on the step size
          const displayLabel = (index) => ((labels - 1 - index) % stepSize === 0);

          // Hide labels that shouldn't be displayed based on the step size
          return chartWidth > minWidthToShowLabels && displayLabel(context.dataIndex);
        },
        "align": "center",
        "anchor": "center",
        "backgroundColor": "#eee",
        "borderColor": "#ddd",
        "borderRadius": 6,
        "borderWidth": 1,
        "padding": 4,
        "color": "#666666",
        "font": {
          "family": "sans-serif",
          "size": 10,
          "style": "normal"
        },
        "formatter": function(value, context) {
          const current = parseInt(value);
          const total = context.chart.data.datasets.reduce((acc, data) => acc + parseInt(data.data[context.dataIndex]), 0);
          const percent = ((current / total) * 100).toFixed(2);
          return current.toLocaleString() + ' (' + percent + '%)';
        },
      },
      "title": {
        "display": true,
        "text": "NBN Technology Type History",
        "font": {
          "size": 48,
        }
      },
      "datalabelsZAxis": {
        "enabled": false
      },
      "googleSheets": {
        "sheetUrl": "https://docs.google.com/spreadsheets/d/17j8Xzpiq9-iIDu7cvH05PKmvqx1J6hkLOtouw3ZElYc/edit#gid=0",
        "labelColumn": "dates",
        "dataColumns": [
          "FTTN",
          "HFC",
          "FTTP",
          "FTTC",
          "WIRELESS",
          "SATELLITE",
          "FTTB"
        ]
      },
      "airtable": {},
      "tickFormat": ""
    }
  }
}