misp-galaxy/tools/mkdocs/site/docs/01_attachements/javascripts/statistics.js

146 lines
4.7 KiB
JavaScript
Raw Normal View History

document$.subscribe(function () {
function parseTable(table) {
var data = [];
table.querySelectorAll("tr").forEach((row, i) => {
if (i > 0) {
var cells = row.querySelectorAll("td");
data.push({ name: cells[1].textContent, value: Number(cells[2].textContent) });
}
});
return data;
}
function createPieChart(data, elementId) {
// Set up the dimensions of the graph
var width = 500, height = 500;
// Append SVG for the graph
var svg = d3.select(elementId).append("svg")
.attr("width", width)
.attr("height", height);
// Set up the dimensions of the graph
var radius = Math.min(width, height) / 2 - 20;
// Append a group to the SVG
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// Set up the color scale
var color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());
// Compute the position of each group on the pie
var pie = d3.pie()
.value(d => d.value);
var data_ready = pie(data);
// Build the pie chart
g.selectAll('whatever')
.data(data_ready)
.enter()
.append('path')
.attr('d', d3.arc()
.innerRadius(0)
.outerRadius(radius)
)
.attr('fill', d => color(d.data.name))
.attr("stroke", "black")
.style("stroke-width", "2px")
.style("opacity", 0.7);
// Add labels
g.selectAll('whatever')
.data(data_ready)
.enter()
.append('text')
.text(d => d.data.name)
.attr("transform", d => "translate(" + d3.arc().innerRadius(0).outerRadius(radius).centroid(d) + ")")
.style("text-anchor", "middle")
.style("font-size", 17);
}
function createBarChart(data, elementId) {
// Set up the dimensions of the graph
var svgWidth = 1000, svgHeight = 1500;
2024-02-05 15:06:35 +00:00
var margin = { top: 20, right: 200, bottom: 450, left: 60 }, // Increase bottom margin for x-axis labels
width = svgWidth - margin.left - margin.right,
height = svgHeight - margin.top - margin.bottom;
// Append SVG for the graph
var svg = d3.select(elementId).append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Set up the scales
var x = d3.scaleBand()
.range([0, width])
.padding(0.1)
.domain(data.map(d => d.name));
var maxYValue = d3.max(data, d => d.value);
var y = d3.scaleLinear()
.range([height, 0])
.domain([0, maxYValue + maxYValue * 0.1]); // Add padding to the max value
// Set up the color scale
var color = d3.scaleOrdinal()
.range(d3.schemeCategory10);
// Set up the axes
var xAxis = d3.axisBottom(x)
.tickSize(0)
.tickPadding(6);
var yAxis = d3.axisLeft(y);
// Add the bars
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.value))
.attr("fill", d => color(d.name));
// Add and rotate x-axis labels
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)"); // Rotate the labels
// Add the y-axis
svg.append("g")
.call(yAxis);
}
document.querySelectorAll("table").forEach((table, index) => {
var pieChart = table.querySelector("th.pie-chart");
var barChart = table.querySelector("th.bar-chart");
graphId = "graph" + index;
var div = document.createElement("div");
div.id = graphId;
table.parentNode.insertBefore(div, table);
if (pieChart) {
var data = parseTable(table);
createPieChart(data, "#" + graphId);
}
if (barChart) {
var data = parseTable(table);
createBarChart(data, "#" + graphId);
}
})
});