zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-25 20:18:38 +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

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

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