Comments (5)
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.
from git-scm.com.
hey @jhcarl0814 , which images? the page is displaying fine for me
from git-scm.com.
@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:
from git-scm.com.
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
from git-scm.com.
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.
from git-scm.com.
Related Issues (20)
- Windows Downloads on https://git-scm.com not working HOT 1
- > As reported on #1390 , book images get broken from time to time.
- Version 2.42.1 announced for Windows on https://git-scm.com/ but is not available HOT 1
- GIT Windows 64-bit installer download link is broken HOT 13
- Leonelhdz99
- The git automatically fills in deleted information. HOT 1
- Ligatures in monospace fonts hurt legibility of config keys HOT 1
- The git-users (e)mailing list seems spam-drowned: can’t access HOT 3
- Error 500 when visiting the greek git book HOT 6
- Resetting the install of git HOT 2
- user account closed down lock
- mark Aurees as depricated / development ceased HOT 4
- problem HOT 1
- Compiled installer releases versus WinGet releases HOT 3
- Broken packtpub external links HOT 4
- Search is broken: always comes up empty HOT 3
- Broken "init benchmark" images on small and fast page HOT 3
- 1
- The filter url in the GUI Clients section does not exist HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from git-scm.com.