zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-27 04:58:42 +02:00
Code Issues Projects Releases Packages Wiki Activity

Cleanup code

Browse source
This commit is contained in:
zandercymatics 2025-02-11 11:17:26 -07:00
parent e5cdf43514
commit 07c7f58f20
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
1 changed files with 41 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/registrar/assets/js/get-gov-reports.js
View file

@ -60,79 +60,48 @@
*/ */
(function () { (function () {
// These functions are adapted from here: /**
// https://stackoverflow.com/questions/28569667/fill-chart-js-bar-chart-with-diagonal-stripes-or-other-patterns * Creates a diagonal stripe pattern for chart.js
// Additionally, code is also adapted from the patternomaly library: * Inspired by https://stackoverflow.com/questions/28569667/fill-chart-js-bar-chart-with-diagonal-stripes-or-other-patterns
// https://github.com/ashiguruma/patternomaly * and https://github.com/ashiguruma/patternomaly
function createDiagonalPattern(backgroundColor, lineColor="white") { * @param {string} [lineColor="white"] - Color of the diagonal lines
// create a 10x10 px canvas for the pattern's base shape * @param {string} backgroundColor - Background color of the pattern
let shape = document.createElement("canvas") * @param {boolean} [rightToLeft=false] - Direction of the diagonal lines
shape.width = 20 * @param {number} [lineGap=1] - Gap between lines
shape.height = 20 * @returns {CanvasPattern} A canvas pattern object for use with backgroundColor
// get the context for drawing */
let c = shape.getContext("2d") function createDiagonalPattern(backgroundColor, lineColor, rightToLeft=false, lineGap=1) {
// Define the canvas and the 2d context so we can draw on it
let shape = document.createElement("canvas");
shape.width = 20;
shape.height = 20;
let context = shape.getContext("2d");
// Fill with specified background color // Fill with specified background color
c.fillStyle = backgroundColor context.fillStyle = backgroundColor;
c.fillRect(0, 0, shape.width, shape.height) context.fillRect(0, 0, shape.width, shape.height);
// Set stroke properties // Set stroke properties
c.strokeStyle = lineColor context.strokeStyle = lineColor;
c.lineWidth = 2 context.lineWidth = 2;
// Draw diagonal lines similarly to the patternomaly library // Rotate canvas for a right-to-left pattern
c.beginPath() if (rightToLeft) {
context.translate(shape.width, 0);
context.rotate(90 * Math.PI / 180);
};
// First diagonal line // First diagonal line
let halfSize = shape.width / 2 let halfSize = shape.width / 2;
let gap = 1 context.moveTo(halfSize - lineGap, -lineGap);
context.lineTo(shape.width + lineGap, halfSize + lineGap);
c.moveTo(halfSize - gap, -gap) // Second diagonal line (x,y are swapped)
c.lineTo(shape.width + 1, halfSize + 1) context.moveTo(-lineGap, halfSize - lineGap);
context.lineTo(halfSize + lineGap, shape.width + lineGap);
// Second diagonal line (offset) context.stroke();
c.moveTo(halfSize - gap - halfSize, halfSize - gap) return context.createPattern(shape, "repeat");
c.lineTo(shape.width + 1 - halfSize, halfSize + 1 + halfSize)
c.stroke()
return c.createPattern(shape, "repeat")
}
function createDiagonalRightLeftPattern(backgroundColor, lineColor="white") {
// create a 20x20 px canvas for larger pattern repeat
let shape = document.createElement("canvas")
shape.width = 20
shape.height = 20
// get the context for drawing
let c = shape.getContext("2d")
// Fill with specified background color
c.fillStyle = backgroundColor
c.fillRect(0, 0, shape.width, shape.height)
// Translate and rotate context
c.translate(shape.width, 0)
c.rotate(90 * Math.PI / 180)
// Set stroke properties
c.strokeStyle = lineColor
c.lineWidth = 2
// First diagonal line
let halfSize = shape.width / 2
let gap = 1
c.moveTo(halfSize - gap, -gap)
c.lineTo(shape.width + 1, halfSize + 1)
// Second diagonal line (offset)
c.moveTo(halfSize - gap - halfSize, halfSize - gap)
c.lineTo(shape.width + 1 - halfSize, halfSize + 1 + halfSize)
c.stroke()
return c.createPattern(shape, "repeat")
} }
function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) { function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) {
@ -155,7 +124,8 @@
borderColor: "rgba(255, 99, 132, 1)", borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1, borderWidth: 1,
data: listOne, data: listOne,
backgroundColor: createDiagonalRightLeftPattern('rgba(255, 99, 132, 0.3)') // Set this line style to be rightToLeft for visual distinction
backgroundColor: createDiagonalPattern('rgba(255, 99, 132, 0.3)', 'white', true)
}, },
{ {
label: labelTwo, label: labelTwo,
@ -163,7 +133,7 @@
borderColor: "rgba(75, 192, 192, 1)", borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1, borderWidth: 1,
data: listTwo, data: listTwo,
backgroundColor: createDiagonalPattern('rgba(75, 192, 192, 0.3)') backgroundColor: createDiagonalPattern('rgba(75, 192, 192, 0.3)', 'white')
}, },
], ],
}; };