search

LukePrior / nbn-upgrade-map

Interactive map showing premises eligible for the NBN FTTP upgrade program.
https://lukeprior.github.io/nbn-upgrade-map/
MIT License
101 stars 11 forks source link

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

Open lyricnz opened 9 months ago

lyricnz commented 9 months ago

eg from emhass project image

LukePrior commented 9 months ago

Good idea.

LukePrior commented 9 months ago

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

lyricnz commented 9 months ago
LukePrior commented 9 months ago

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 commented 9 months ago

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%3B%5Cn%5Cn%20%20%20%20%20%20%20%20%20%20%2F%2F%20Hide%20labels%20that%20shouldn't%20be%20displayed%20based%20on%20the%20step%20size%5Cn%20%20%20%20%20%20%20%20%20%20return%20chartWidth%20%3E%20minWidthToShowLabels%20%26%26%20displayLabel(context.dataIndex)%3B%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5C%22align%5C%22%3A%20%5C%22center%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%22anchor%5C%22%3A%20%5C%22center%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%22backgroundColor%5C%22%3A%20%5C%22%23eee%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%22borderColor%5C%22%3A%20%5C%22%23ddd%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%22borderRadius%5C%22%3A%206%2C%5Cn%20%20%20%20%20%20%20%20%5C%22borderWidth%5C%22%3A%201%2C%5Cn%20%20%20%20%20%20%20%20%5C%22padding%5C%22%3A%204%2C%5Cn%20%20%20%20%20%20%20%20%5C%22color%5C%22%3A%20%5C%22%23666666%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%22font%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22family%5C%22%3A%20%5C%22sans-serif%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22size%5C%22%3A%2010%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22style%5C%22%3A%20%5C%22normal%5C%22%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5C%22formatter%5C%22%3A%20function(value%2C%20context)%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20const%20current%20%3D%20parseInt(value)%3B%5Cn%20%20%20%20%20%20%20%20%20%20const%20total%20%3D%20context.chart.data.datasets.reduce((acc%2C%20data)%20%3D%3E%20acc%20%2B%20parseInt(data.data%5Bcontext.dataIndex%5D)%2C%200)%3B%5Cn%20%20%20%20%20%20%20%20%20%20const%20percent%20%3D%20((current%20%2F%20total)%20*%20100).toFixed(2)%3B%5Cn%20%20%20%20%20%20%20%20%20%20return%20current.toLocaleString()%20%2B%20'%20('%20%2B%20percent%20%2B%20'%25)'%3B%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%5C%22title%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%5C%22display%5C%22%3A%20true%2C%5Cn%20%20%20%20%20%20%20%20%5C%22text%5C%22%3A%20%5C%22NBN%20Technology%20Type%20History%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%22font%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22size%5C%22%3A%2048%2C%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%5C%22datalabelsZAxis%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%5C%22enabled%5C%22%3A%20false%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%5C%22googleSheets%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%5C%22sheetUrl%5C%22%3A%20%5C%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F17j8Xzpiq9-iIDu7cvH05PKmvqx1J6hkLOtouw3ZElYc%2Fedit%23gid%3D0%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%22labelColumn%5C%22%3A%20%5C%22dates%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%22dataColumns%5C%22%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22FTTN%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22HFC%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22FTTP%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22FTTC%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22WIRELESS%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22SATELLITE%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22FTTB%5C%22%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%5C%22airtable%5C%22%3A%20%7B%7D%2C%5Cn%20%20%20%20%20%20%5C%22tickFormat%5C%22%3A%20%5C%22%5C%22%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22width%22%3A2000%2C%22height%22%3A1000%2C%22version%22%3A%224%22%2C%22backgroundColor%22%3A%22%23fff%22%7D)

Config ```json { "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": "" } } } ```