Images on "About - Git"/"Small and Fast" are "404 Not Found"

[jhcarl0814]

URL for broken page

Small and Fast

Problem

Images are "404 Not Found".

Operating system and browser

Windows 11 23H2 22631.3880 x64 Google Chrome 127.0.6533.100 (Official Build) (64-bit)

Steps to reproduce

Other details

[pedrorijo91]

hey @jhcarl0814 , which images? the page is displaying fine for me

[jhcarl0814]

@pedrorijo91 Each init benchmarks is actually alt text for an <img>:

The page currently looks like this:

According to wayback machine e.g. 2024-01-01 the page should look like this:

[pedrorijo91]

oh, seems to be using some google service, which ofc has been killed in the meanwhile according with https://stackoverflow.com/questions/77757225/alternative-for-charts-googleapis-com-for-generating-qr-code-in-google-sheets

not sure the best solution here

[jhcarl0814]

Here is an example using Visualization: Column Chart  |  Charts  |  Google for Developers: https://jsfiddle.net/msofL6bd/

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="display: inline-block;"></div>
<script>
google.load('visualization', '1', {packages:['corechart'], callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn({type: 'string', role: 'style', });
    data.addRows([
        ['git', 0.649, 'color: #E09FA0', ],
        ['svn', 2.6, 'color: #E05F49', ],
    ]);

    (new google.visualization.ColumnChart(document.querySelector('#chart_div1'))).draw(data, {
        backgroundColor: "transparent",
        height: 125,
        width: 100,
        chartArea:  { top: 0, right: 0, bottom: 20, left: 0, },
        enableInteractivity: false,
        legend: { position: 'none', },
        vAxis: {
            textPosition: 'none',
            gridlines: { color: 'transparent', },
            viewWindowMode: 'explicit',
            viewWindow: {
                min: 0,
                max: 3,
            },
        },
    });
}, });
</script>
<div id="chart_div2" style="display: inline-block;"></div>
<script>
google.load('visualization', '1', {packages:['corechart'], callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn({type: 'string', role: 'style', });
    data.addRows([
        ['git', 1.53, 'color: #E09FA0', ],
        ['svn', 24.7, 'color: #E05F49', ],
    ]);
    (new google.visualization.ColumnChart(document.querySelector('#chart_div2'))).draw(data, {
        backgroundColor: "transparent",
        height: 125,
        width: 100,
        chartArea:  { top: 0, right: 0, bottom: 20, left: 0, },
        enableInteractivity: false,
        legend: { position: 'none', },
        vAxis: {
            textPosition: 'none',
            gridlines: { color: 'transparent', },
            viewWindowMode: 'explicit',
            viewWindow: {
                min: 0,
                max: 25,
            },
        },
    });
}, });
</script>

It can't center the title, so you have to add the CSS-centered title outside the chart yourself. It can't show x axis of bar chart or y axis of column chart.

[dscho]

Another alternative would be to use Mermaid diagrams.

Or using d3.js, which would allow us to pre-render the diagrams server-side (which would also work well once we switch to Hugo). Something like this should work:

const d3 = require('d3');
const { createCanvas } = require('canvas');
const { saveSvgAsPng } = require('save-svg-as-png');

const width = 100;
const height = 125;
const canvas = createCanvas(width, height);
const svg = d3.select(canvas).append('svg')
  .attr('width', width)
  .attr('height', height);

// Data for the bar chart
const data = [
    { label: "git", value: 0.649, color: "#E09FA0" },
    { label: "svn", value: 2.6, color: "#E05F49" }
];

// Set up the scales
const x = d3.scaleBand()
    .domain(data.map(d => d.label))
    .range([0, width - margin.left - margin.right])
    .padding(0.1);

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height - margin.top - margin.bottom, 0]);

// Add the x-axis
svg.append("g")
    .attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
    .call(d3.axisBottom(x));

// Add the bars
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("x", d => x(d.label))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => height - margin.top - margin.bottom - y(d.value))
    .attr("fill", d => d.color);

// Add the title
svg.append("text")
    .attr("x", (width - margin.left - margin.right) / 2)
    .attr("y", -margin.top / 2)
    .attr("text-anchor", "middle")
    .style("font-size", "12px")
    .text("Commit A");

saveSvgAsPng(svg.node(), 'output.png');

Obviously this can be parameterized to avoid repetitive code.