darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-18 13:39:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Deleting chart.js

Browse Source 
Updates to the dashboard html
Test updates
This commit is contained in:
Jonathan Bobel
2024-07-10 10:13:24 -04:00
parent e8f274baa2
commit 7f288598ba
10 changed files with 164 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
app/assets/javascripts/chartDashboard.js
View File

@@ -1,122 +1,119 @@
(function (window) {
var chartContainer = document.getElementById('chartContainer');
var chartTitle = document.getElementById('chartTitle').textContent;
var sms_sent = 100;
var sms_remaining_messages = 249900;
var totalMessages = sms_sent + sms_remaining_messages;
if (chartContainer) {
var chartTitle = document.getElementById('chartTitle').textContent;
// Update the message below the chart
document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
console.log('Message element textContent set to:', document.getElementById('message').innerText);
// Access data attributes from the HTML
var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent'));
var sms_remaining_messages = parseInt(chartContainer.getAttribute('data-sms-allowance-remaining'));
var totalMessages = sms_sent + sms_remaining_messages;
// Set a minimum value for "Messages Sent" based on a percentage of the remaining messages
var minSentPercentage = 0.01; // Minimum width as a percentage of total messages (1% in this case)
var minSentValue = totalMessages * minSentPercentage;
var displaySent = Math.max(sms_sent, minSentValue);
var displayRemaining = totalMessages - displaySent;
// Update the message below the chart
document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
var svg = d3.select("#totalMessageChart");
var width = chartContainer.clientWidth;
var height = 64;
svg.attr("width", width).attr("height", height);
// Calculate minimum width for "Messages Sent" as 1% of the total chart width
var minSentPercentage = 0.01; // Minimum width as a percentage of total messages (1% in this case)
var minSentValue = totalMessages * minSentPercentage;
var displaySent = Math.max(sms_sent, minSentValue);
var displayRemaining = totalMessages - displaySent;
var x = d3.scaleLinear()
.domain([0, totalMessages])
.range([0, width]);
var svg = d3.select("#totalMessageChart");
var width = chartContainer.clientWidth;
var height = 64;
svg.attr("width", width).attr("height", height);
var tooltip = d3.select(".tooltip");
var x = d3.scaleLinear()
.domain([0, totalMessages])
.range([0, width]);
var data = [
{ label: 'Messages Sent', value: displaySent, actualValue: sms_sent, color: '#0076d6' },
{ label: 'Remaining', value: displayRemaining, actualValue: sms_remaining_messages, color: '#fa9441' }
];
// Create tooltip dynamically
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("background", "#fff")
.style("border", "1px solid #ccc")
.style("padding", "5px")
.style("box-shadow", "0px 0px 10px rgba(0, 0, 0, 0.1)")
.style("pointer-events", "none")
.style("display", "none");
var totalAnimationDuration = 1000; // Total animation duration in milliseconds
var sentPercentage = displaySent / totalMessages;
var remainingPercentage = displayRemaining / totalMessages;
// Create the initial bars
var sentBar = svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", height)
.attr("fill", '#0076d6')
.attr("width", 0); // Start with width 0 for animation
var sentDuration = totalAnimationDuration * sentPercentage;
var remainingDuration = totalAnimationDuration * remainingPercentage;
var remainingBar = svg.append("rect")
.attr("x", 0) // Initially set to 0, will be updated during animation
.attr("y", 0)
.attr("height", height)
.attr("fill", '#fa9441')
.attr("width", 0); // Start with width 0 for animation
var bars = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i === 0 ? 0 : x(data[0].value))
.attr("y", 0)
.attr("width", 0) // Start with width 0 for animation
.attr("height", height)
.attr("fill", d => d.color)
.on("mousemove", function (event, d) {
tooltip.classed("hidden", false)
.style("left", event.pageX + "px")
.style("top", event.pageY - 28 + "px")
.html(d.label + ": " + d.actualValue.toLocaleString());
})
.on("mouseout", function () {
tooltip.classed("hidden", true);
// Animate the bars together as a single cohesive line
svg.transition()
.duration(1000) // Total animation duration
.attr("width", width)
.tween("resize", function() {
var interpolator = d3.interpolate(0, width);
return function(t) {
var newWidth = interpolator(t);
var sentWidth = x(displaySent) / width * newWidth;
var remainingWidth = x(displayRemaining) / width * newWidth;
sentBar.attr("width", sentWidth);
remainingBar.attr("x", sentWidth).attr("width", remainingWidth);
};
});
// Create and populate the accessible table
var tableContainer = document.getElementById('totalMessageTable');
var table = document.createElement('table');
table.className = 'usa-sr-only usa-table';
var caption = document.createElement('caption');
caption.textContent = chartTitle;
table.appendChild(caption);
var thead = document.createElement('thead');
var theadRow = document.createElement('tr');
var thLabel = document.createElement('th');
thLabel.textContent = 'Label';
var thValue = document.createElement('th');
thValue.textContent = 'Value';
theadRow.appendChild(thLabel);
theadRow.appendChild(thValue);
table.appendChild(theadRow);
table.appendChild(thead);
var tbody = document.createElement('tbody');
var tableData = [
{ label: 'Messages Sent', value: sms_sent.toLocaleString() },
{ label: 'Remaining', value: sms_remaining_messages.toLocaleString() }
];
tableData.forEach(function (rowData) {
var row = document.createElement('tr');
var cellLabel = document.createElement('td');
var cellValue = document.createElement('td');
cellLabel.textContent = rowData.label;
cellValue.textContent = rowData.value;
row.appendChild(cellLabel);
row.appendChild(cellValue);
tbody.appendChild(row);
});
// Animate "Messages Sent" first
bars.filter((d, i) => i === 0)
.transition()
.duration(sentDuration) // Animation duration for "Messages Sent"
.attr("width", d => x(d.value))
.on("end", function() {
// Animate "Remaining" immediately after "Messages Sent"
bars.filter((d, i) => i === 1)
.transition()
.duration(remainingDuration) // Animation duration for "Remaining"
.attr("width", d => x(d.value));
table.appendChild(tbody);
tableContainer.appendChild(table);
// Ensure the chart resizes correctly on window resize
window.addEventListener('resize', function () {
width = chartContainer.clientWidth;
x.range([0, width]);
svg.attr("width", width);
sentBar.attr("width", x(displaySent));
remainingBar.attr("x", x(displaySent)).attr("width", x(displayRemaining));
});
// Create and populate the accessible table
var tableContainer = document.getElementById('totalMessageTable');
var table = document.createElement('table');
table.className = 'usa-sr-only usa-table';
var caption = document.createElement('caption');
caption.textContent = chartTitle;
table.appendChild(caption);
var thead = document.createElement('thead');
var theadRow = document.createElement('tr');
var thLabel = document.createElement('th');
thLabel.textContent = 'Label';
var thValue = document.createElement('th');
thValue.textContent = 'Value';
theadRow.appendChild(thLabel);
theadRow.appendChild(thValue);
thead.appendChild(theadRow);
table.appendChild(thead);
var tbody = document.createElement('tbody');
var tableData = [
{ label: 'Messages Sent', value: sms_sent.toLocaleString() },
{ label: 'Remaining', value: sms_remaining_messages.toLocaleString() }
];
tableData.forEach(function (rowData) {
var row = document.createElement('tr');
var cellLabel = document.createElement('td');
var cellValue = document.createElement('td');
cellLabel.textContent = rowData.label;
cellValue.textContent = rowData.value;
row.appendChild(cellLabel);
row.appendChild(cellValue);
tbody.appendChild(row);
});
table.appendChild(tbody);
tableContainer.appendChild(table);
// Ensure the chart resizes correctly on window resize
window.addEventListener('resize', function () {
width = chartContainer.clientWidth;
x.range([0, width]);
svg.attr("width", width);
svg.selectAll("rect")
.attr("width", d => x(d.value))
.attr("x", (d, i) => i === 0 ? 0 : x(data[0].value));
});
}
})(window);