From f2d14ad715fb36bdbdab751099ca8359edf8a7e1 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 6 Feb 2025 10:08:04 -0700 Subject: [PATCH 01/10] Try adding patternomaly --- src/package-lock.json | 7 +++++++ src/package.json | 1 + 2 files changed, 8 insertions(+) diff --git a/src/package-lock.json b/src/package-lock.json index 5caff976c..324e5a955 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -18,6 +18,7 @@ "@babel/preset-env": "^7.26.0", "@uswds/compile": "1.2.1", "babel-loader": "^9.2.1", + "patternomaly": "^1.3.2", "sass-loader": "^12.6.0", "webpack": "^5.96.1", "webpack-stream": "^7.0.0" @@ -5362,6 +5363,12 @@ "node": ">=8" } }, + "node_modules/patternomaly": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/patternomaly/-/patternomaly-1.3.2.tgz", + "integrity": "sha512-70UhA5+ZrnNgdfDBKXIGbMHpP+naTzfx9vPT4KwIdhtWWs0x6FWZRJQMXXhV2jcK0mxl28FA/2LPAKArNG058Q==", + "dev": true + }, "node_modules/pend": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", diff --git a/src/package.json b/src/package.json index d915b2384..87602bde9 100644 --- a/src/package.json +++ b/src/package.json @@ -19,6 +19,7 @@ "@babel/preset-env": "^7.26.0", "@uswds/compile": "1.2.1", "babel-loader": "^9.2.1", + "patternomaly": "^1.3.2", "sass-loader": "^12.6.0", "webpack": "^5.96.1", "webpack-stream": "^7.0.0" From 039882b9187ce797ae817114d111a4f17c911f16 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 6 Feb 2025 11:02:21 -0700 Subject: [PATCH 02/10] add patternomaly --- src/registrar/assets/js/get-gov-reports.js | 7 +++++++ src/registrar/templates/admin/base_site.html | 1 + 2 files changed, 8 insertions(+) diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index 92bba4a1f..a77e1244b 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -1,3 +1,4 @@ + /** An IIFE for admin in DjangoAdmin to listen to clicks on the growth report export button, * attach the seleted start and end dates to a url that'll trigger the view, and finally * redirect to that url. @@ -78,6 +79,9 @@ borderColor: "rgba(255, 99, 132, 1)", borderWidth: 1, data: listOne, + backgroundColor: [ + pattern.draw('square', '#1f77b4'), + ] }, { label: labelTwo, @@ -85,6 +89,9 @@ borderColor: "rgba(75, 192, 192, 1)", borderWidth: 1, data: listTwo, + backgroundColor: [ + pattern.draw('square', '#1f77b4'), + ] }, ], }; diff --git a/src/registrar/templates/admin/base_site.html b/src/registrar/templates/admin/base_site.html index b80917bb2..d7c43647a 100644 --- a/src/registrar/templates/admin/base_site.html +++ b/src/registrar/templates/admin/base_site.html @@ -23,6 +23,7 @@ + {% endblock %} From 90784eb69eacfe71d0ae6069e95ef21526c57f76 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 6 Feb 2025 11:25:46 -0700 Subject: [PATCH 03/10] Change pattern --- src/registrar/assets/js/get-gov-reports.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index a77e1244b..8bfe32fdd 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -80,7 +80,7 @@ borderWidth: 1, data: listOne, backgroundColor: [ - pattern.draw('square', '#1f77b4'), + pattern.draw('zigzag-vertical', '#1f77b4'), ] }, { @@ -90,7 +90,7 @@ borderWidth: 1, data: listTwo, backgroundColor: [ - pattern.draw('square', '#1f77b4'), + pattern.draw('diagonal', '#1f77b4'), ] }, ], From 3322837f0d289f69edc18563e4a0515db30f6f73 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 6 Feb 2025 11:34:24 -0700 Subject: [PATCH 04/10] revert node changes --- src/package-lock.json | 7 ------- src/package.json | 1 - 2 files changed, 8 deletions(-) diff --git a/src/package-lock.json b/src/package-lock.json index 324e5a955..5caff976c 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -18,7 +18,6 @@ "@babel/preset-env": "^7.26.0", "@uswds/compile": "1.2.1", "babel-loader": "^9.2.1", - "patternomaly": "^1.3.2", "sass-loader": "^12.6.0", "webpack": "^5.96.1", "webpack-stream": "^7.0.0" @@ -5363,12 +5362,6 @@ "node": ">=8" } }, - "node_modules/patternomaly": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/patternomaly/-/patternomaly-1.3.2.tgz", - "integrity": "sha512-70UhA5+ZrnNgdfDBKXIGbMHpP+naTzfx9vPT4KwIdhtWWs0x6FWZRJQMXXhV2jcK0mxl28FA/2LPAKArNG058Q==", - "dev": true - }, "node_modules/pend": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", diff --git a/src/package.json b/src/package.json index 87602bde9..d915b2384 100644 --- a/src/package.json +++ b/src/package.json @@ -19,7 +19,6 @@ "@babel/preset-env": "^7.26.0", "@uswds/compile": "1.2.1", "babel-loader": "^9.2.1", - "patternomaly": "^1.3.2", "sass-loader": "^12.6.0", "webpack": "^5.96.1", "webpack-stream": "^7.0.0" From f60ed6c0eaae9e78888375f5736cc7baf55437a7 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 6 Feb 2025 11:40:55 -0700 Subject: [PATCH 05/10] Create patternomaly.js --- src/registrar/assets/js/patternomaly.js | 1110 +++++++++++++++++++++++ 1 file changed, 1110 insertions(+) create mode 100644 src/registrar/assets/js/patternomaly.js diff --git a/src/registrar/assets/js/patternomaly.js b/src/registrar/assets/js/patternomaly.js new file mode 100644 index 000000000..e349db0f0 --- /dev/null +++ b/src/registrar/assets/js/patternomaly.js @@ -0,0 +1,1110 @@ +// This file is copied from the patternomaly library for chart.js. +// This allows us to add patterns for better accessibility for color-blind users. +// Source: https://github.com/ashiguruma/patternomaly + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.pattern = factory()); +}(this, (function () { 'use strict'; + +var BACKGROUND_COLOR = 'rgba(100, 100, 100, 0.7)'; +var PATTERN_COLOR = 'rgba(255, 255, 255, 0.8)'; +var POINT_STYLE = 'round'; + +var asyncGenerator = function () { + function AwaitValue(value) { + this.value = value; + } + + function AsyncGenerator(gen) { + var front, back; + + function send(key, arg) { + return new Promise(function (resolve, reject) { + var request = { + key: key, + arg: arg, + resolve: resolve, + reject: reject, + next: null + }; + + if (back) { + back = back.next = request; + } else { + front = back = request; + resume(key, arg); + } + }); + } + + function resume(key, arg) { + try { + var result = gen[key](arg); + var value = result.value; + + if (value instanceof AwaitValue) { + Promise.resolve(value.value).then(function (arg) { + resume("next", arg); + }, function (arg) { + resume("throw", arg); + }); + } else { + settle(result.done ? "return" : "normal", result.value); + } + } catch (err) { + settle("throw", err); + } + } + + function settle(type, value) { + switch (type) { + case "return": + front.resolve({ + value: value, + done: true + }); + break; + + case "throw": + front.reject(value); + break; + + default: + front.resolve({ + value: value, + done: false + }); + break; + } + + front = front.next; + + if (front) { + resume(front.key, front.arg); + } else { + back = null; + } + } + + this._invoke = send; + + if (typeof gen.return !== "function") { + this.return = undefined; + } + } + + if (typeof Symbol === "function" && Symbol.asyncIterator) { + AsyncGenerator.prototype[Symbol.asyncIterator] = function () { + return this; + }; + } + + AsyncGenerator.prototype.next = function (arg) { + return this._invoke("next", arg); + }; + + AsyncGenerator.prototype.throw = function (arg) { + return this._invoke("throw", arg); + }; + + AsyncGenerator.prototype.return = function (arg) { + return this._invoke("return", arg); + }; + + return { + wrap: function (fn) { + return function () { + return new AsyncGenerator(fn.apply(this, arguments)); + }; + }, + await: function (value) { + return new AwaitValue(value); + } + }; +}(); + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); + +var _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; +}; + +var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +}; + +var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; +}; + +var Shape = function () { + function Shape() { + var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20; + var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BACKGROUND_COLOR; + var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : PATTERN_COLOR; + classCallCheck(this, Shape); + + this._canvas = document.createElement('canvas'); + this._context = this._canvas.getContext('2d'); + + this._canvas.width = size; + this._canvas.height = size; + + this._context.fillStyle = backgroundColor; + this._context.fillRect(0, 0, this._canvas.width, this._canvas.height); + + this._size = size; + this._patternColor = patternColor; + + return this; + } + + createClass(Shape, [{ + key: 'setStrokeProps', + value: function setStrokeProps() { + this._context.strokeStyle = this._patternColor; + this._context.lineWidth = this._size / 10; + this._context.lineJoin = POINT_STYLE; + this._context.lineCap = POINT_STYLE; + } + }, { + key: 'setFillProps', + value: function setFillProps() { + this._context.fillStyle = this._patternColor; + } + }]); + return Shape; +}(); + +var Plus = function (_Shape) { + inherits(Plus, _Shape); + + function Plus() { + classCallCheck(this, Plus); + return possibleConstructorReturn(this, (Plus.__proto__ || Object.getPrototypeOf(Plus)).apply(this, arguments)); + } + + createClass(Plus, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawPlus(); + this.drawPlus(halfSize, halfSize); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawPlus', + value: function drawPlus() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2; + var quarterSize = size / 4; + + this._context.moveTo(quarterSize + offsetX, 0 + offsetY); + this._context.lineTo(quarterSize + offsetX, halfSize + offsetY); + this._context.moveTo(0 + offsetX, quarterSize + offsetY); + this._context.lineTo(halfSize + offsetX, quarterSize + offsetY); + + this._context.closePath(); + } + }]); + return Plus; +}(Shape); + +var Cross = function (_Shape) { + inherits(Cross, _Shape); + + function Cross() { + classCallCheck(this, Cross); + return possibleConstructorReturn(this, (Cross.__proto__ || Object.getPrototypeOf(Cross)).apply(this, arguments)); + } + + createClass(Cross, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawCross(); + this.drawCross(halfSize, halfSize); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawCross', + value: function drawCross() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2; + var gap = 2; + + this._context.moveTo(offsetX + gap, offsetY + gap); + this._context.lineTo(halfSize - gap + offsetX, halfSize - gap + offsetY); + this._context.moveTo(offsetX + gap, halfSize - gap + offsetY); + this._context.lineTo(halfSize - gap + offsetX, offsetY + gap); + + this._context.closePath(); + } + }]); + return Cross; +}(Shape); + +var Dash = function (_Shape) { + inherits(Dash, _Shape); + + function Dash() { + classCallCheck(this, Dash); + return possibleConstructorReturn(this, (Dash.__proto__ || Object.getPrototypeOf(Dash)).apply(this, arguments)); + } + + createClass(Dash, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawDash(); + this.drawDash(halfSize, halfSize); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawDash', + value: function drawDash() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2; + var gap = 2; + + this._context.moveTo(offsetX + gap, offsetY + gap); + this._context.lineTo(halfSize - gap + offsetX, halfSize - gap + offsetY); + + this._context.closePath(); + } + }]); + return Dash; +}(Shape); + +var CrossDash = function (_Shape) { + inherits(CrossDash, _Shape); + + function CrossDash() { + classCallCheck(this, CrossDash); + return possibleConstructorReturn(this, (CrossDash.__proto__ || Object.getPrototypeOf(CrossDash)).apply(this, arguments)); + } + + createClass(CrossDash, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + this._context.beginPath(); + + this.setStrokeProps(); + + var cross = new Cross(); + cross.drawCross.call(this); + + var dash = new Dash(); + dash.drawDash.call(this, halfSize, halfSize); + + this._context.stroke(); + + return this._canvas; + } + }]); + return CrossDash; +}(Shape); + +var Dot = function (_Shape) { + inherits(Dot, _Shape); + + function Dot() { + classCallCheck(this, Dot); + return possibleConstructorReturn(this, (Dot.__proto__ || Object.getPrototypeOf(Dot)).apply(this, arguments)); + } + + createClass(Dot, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setFillProps(); + + this.drawDot(); + this.drawDot(halfSize, halfSize); + + this._context.fill(); + + return this._canvas; + } + }, { + key: 'drawDot', + value: function drawDot() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var diameter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this._size / 10; + + var size = this._size; + var quarterSize = size / 4; + var x = quarterSize + offsetX; + var y = quarterSize + offsetY; + + this._context.moveTo(x + quarterSize, y); + this._context.arc(x, y, diameter, 0, 2 * Math.PI); + + this._context.closePath(); + } + }]); + return Dot; +}(Shape); + +var DotDash = function (_Shape) { + inherits(DotDash, _Shape); + + function DotDash() { + classCallCheck(this, DotDash); + return possibleConstructorReturn(this, (DotDash.__proto__ || Object.getPrototypeOf(DotDash)).apply(this, arguments)); + } + + createClass(DotDash, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setStrokeProps(); + + var dash = new Dash(); + dash.drawDash.call(this, halfSize, halfSize); + + this._context.closePath(); + this._context.stroke(); + + this.setFillProps(); + + var dot = new Dot(); + dot.drawDot.call(this); + + this._context.fill(); + + return this._canvas; + } + }]); + return DotDash; +}(Shape); + +var Disc = function (_Dot) { + inherits(Disc, _Dot); + + function Disc() { + classCallCheck(this, Disc); + return possibleConstructorReturn(this, (Disc.__proto__ || Object.getPrototypeOf(Disc)).apply(this, arguments)); + } + + createClass(Disc, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + var diameter = this._size / 5; + + this._context.beginPath(); + + this.setFillProps(); + + this.drawDot(0, 0, diameter); + this.drawDot(halfSize, halfSize, diameter); + + this._context.fill(); + + return this._canvas; + } + }]); + return Disc; +}(Dot); + +var Ring = function (_Dot) { + inherits(Ring, _Dot); + + function Ring() { + classCallCheck(this, Ring); + return possibleConstructorReturn(this, (Ring.__proto__ || Object.getPrototypeOf(Ring)).apply(this, arguments)); + } + + createClass(Ring, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + var diameter = this._size / 5; + + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawDot(0, 0, diameter); + this.drawDot(halfSize, halfSize, diameter); + + this._context.stroke(); + + return this._canvas; + } + }]); + return Ring; +}(Dot); + +var Line = function (_Shape) { + inherits(Line, _Shape); + + function Line() { + classCallCheck(this, Line); + return possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).apply(this, arguments)); + } + + createClass(Line, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawLine(); + this.drawLine(halfSize, halfSize); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawLine', + value: function drawLine() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var quarterSize = size / 4; + + this._context.moveTo(0, quarterSize + offsetY); + this._context.lineTo(this._size, quarterSize + offsetY); + + this._context.closePath(); + } + }]); + return Line; +}(Shape); + +var VerticalLine = function (_Line) { + inherits(VerticalLine, _Line); + + function VerticalLine() { + classCallCheck(this, VerticalLine); + return possibleConstructorReturn(this, (VerticalLine.__proto__ || Object.getPrototypeOf(VerticalLine)).apply(this, arguments)); + } + + createClass(VerticalLine, [{ + key: 'drawTile', + value: function drawTile() { + this._context.translate(this._size, 0); + this._context.rotate(90 * Math.PI / 180); + + Line.prototype.drawTile.call(this); + + return this._canvas; + } + }]); + return VerticalLine; +}(Line); + +var Weave = function (_Shape) { + inherits(Weave, _Shape); + + function Weave() { + classCallCheck(this, Weave); + return possibleConstructorReturn(this, (Weave.__proto__ || Object.getPrototypeOf(Weave)).apply(this, arguments)); + } + + createClass(Weave, [{ + key: 'drawTile', + value: function drawTile() { + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawWeave(0, 0); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawWeave', + value: function drawWeave(offsetX, offsetY) { + var size = this._size; + var halfSize = size / 2; + + this._context.moveTo(offsetX + 1, offsetY + 1); + this._context.lineTo(halfSize - 1, halfSize - 1); + + this._context.moveTo(halfSize + 1, size - 1); + this._context.lineTo(size - 1, halfSize + 1); + + this._context.closePath(); + } + }]); + return Weave; +}(Shape); + +var Zigzag = function (_Shape) { + inherits(Zigzag, _Shape); + + function Zigzag() { + classCallCheck(this, Zigzag); + return possibleConstructorReturn(this, (Zigzag.__proto__ || Object.getPrototypeOf(Zigzag)).apply(this, arguments)); + } + + createClass(Zigzag, [{ + key: 'drawTile', + value: function drawTile() { + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawZigzag(); + this.drawZigzag(this._size / 2); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawZigzag', + value: function drawZigzag() { + var offsetY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + + var size = this._size; + var quarterSize = size / 4; + var halfSize = size / 2; + var tenthSize = size / 10; + + this._context.moveTo(0, tenthSize + offsetY); + this._context.lineTo(quarterSize, halfSize - tenthSize + offsetY); + this._context.lineTo(halfSize, tenthSize + offsetY); + this._context.lineTo(size - quarterSize, halfSize - tenthSize + offsetY); + this._context.lineTo(size, tenthSize + offsetY); + } + }]); + return Zigzag; +}(Shape); + +var ZigzagVertical = function (_Zigzag) { + inherits(ZigzagVertical, _Zigzag); + + function ZigzagVertical() { + classCallCheck(this, ZigzagVertical); + return possibleConstructorReturn(this, (ZigzagVertical.__proto__ || Object.getPrototypeOf(ZigzagVertical)).apply(this, arguments)); + } + + createClass(ZigzagVertical, [{ + key: 'drawTile', + value: function drawTile() { + this._context.translate(this._size, 0); + this._context.rotate(90 * Math.PI / 180); + + Zigzag.prototype.drawTile.call(this); + + return this._canvas; + } + }]); + return ZigzagVertical; +}(Zigzag); + +var Diagonal = function (_Shape) { + inherits(Diagonal, _Shape); + + function Diagonal() { + classCallCheck(this, Diagonal); + return possibleConstructorReturn(this, (Diagonal.__proto__ || Object.getPrototypeOf(Diagonal)).apply(this, arguments)); + } + + createClass(Diagonal, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawDiagonalLine(); + this.drawDiagonalLine(halfSize, halfSize); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawDiagonalLine', + value: function drawDiagonalLine() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2; + var gap = 1; + + this._context.moveTo(halfSize - gap - offsetX, gap * -1 + offsetY); + this._context.lineTo(size + 1 - offsetX, halfSize + 1 + offsetY); + + this._context.closePath(); + } + }]); + return Diagonal; +}(Shape); + +var DiagonalRightLeft = function (_Diagonal) { + inherits(DiagonalRightLeft, _Diagonal); + + function DiagonalRightLeft() { + classCallCheck(this, DiagonalRightLeft); + return possibleConstructorReturn(this, (DiagonalRightLeft.__proto__ || Object.getPrototypeOf(DiagonalRightLeft)).apply(this, arguments)); + } + + createClass(DiagonalRightLeft, [{ + key: 'drawTile', + value: function drawTile() { + this._context.translate(this._size, 0); + this._context.rotate(90 * Math.PI / 180); + + Diagonal.prototype.drawTile.call(this); + + return this._canvas; + } + }]); + return DiagonalRightLeft; +}(Diagonal); + +var Square = function (_Shape) { + inherits(Square, _Shape); + + function Square() { + classCallCheck(this, Square); + return possibleConstructorReturn(this, (Square.__proto__ || Object.getPrototypeOf(Square)).apply(this, arguments)); + } + + createClass(Square, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setFillProps(); + + this.drawSquare(); + this.drawSquare(halfSize, halfSize); + + this._context.fill(); + + return this._canvas; + } + }, { + key: 'drawSquare', + value: function drawSquare() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2; + var gap = size / 20; + + this._context.fillRect(offsetX + gap, offsetY + gap, halfSize - gap * 2, halfSize - gap * 2); + + this._context.closePath(); + } + }]); + return Square; +}(Shape); + +var Box = function (_Shape) { + inherits(Box, _Shape); + + function Box() { + classCallCheck(this, Box); + return possibleConstructorReturn(this, (Box.__proto__ || Object.getPrototypeOf(Box)).apply(this, arguments)); + } + + createClass(Box, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawBox(); + this.drawBox(halfSize, halfSize); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawBox', + value: function drawBox() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2; + var gap = size / 20; + + this._context.strokeRect(offsetX + gap, offsetY + gap, halfSize - gap * 4, halfSize - gap * 4); + + this._context.closePath(); + } + }]); + return Box; +}(Shape); + +var Triangle = function (_Shape) { + inherits(Triangle, _Shape); + + function Triangle() { + classCallCheck(this, Triangle); + return possibleConstructorReturn(this, (Triangle.__proto__ || Object.getPrototypeOf(Triangle)).apply(this, arguments)); + } + + createClass(Triangle, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setFillProps(); + + this.drawTriangle(); + this.drawTriangle(halfSize, halfSize); + + this._context.fill(); + + return this._canvas; + } + }, { + key: 'drawTriangle', + value: function drawTriangle() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2; + var quarterSize = size / 4; + + this._context.moveTo(quarterSize + offsetX, offsetY); + this._context.lineTo(halfSize + offsetX, halfSize + offsetY); + this._context.lineTo(offsetX, halfSize + offsetY); + + this._context.closePath(); + } + }]); + return Triangle; +}(Shape); + +var TriangleVertical = function (_Triangle) { + inherits(TriangleVertical, _Triangle); + + function TriangleVertical() { + classCallCheck(this, TriangleVertical); + return possibleConstructorReturn(this, (TriangleVertical.__proto__ || Object.getPrototypeOf(TriangleVertical)).apply(this, arguments)); + } + + createClass(TriangleVertical, [{ + key: 'drawTile', + value: function drawTile() { + var size = this._size; + + this._context.translate(size, size); + this._context.rotate(180 * Math.PI / 180); + + Triangle.prototype.drawTile.call(this); + + return this._canvas; + } + }]); + return TriangleVertical; +}(Triangle); + +var Diamond = function (_Shape) { + inherits(Diamond, _Shape); + + function Diamond() { + classCallCheck(this, Diamond); + return possibleConstructorReturn(this, (Diamond.__proto__ || Object.getPrototypeOf(Diamond)).apply(this, arguments)); + } + + createClass(Diamond, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setFillProps(); + + this.drawDiamond(); + this.drawDiamond(halfSize, halfSize); + + this._context.fill(); + + return this._canvas; + } + }, { + key: 'drawDiamond', + value: function drawDiamond() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2; + var quarterSize = size / 4; + + this._context.moveTo(quarterSize + offsetX, offsetY); + this._context.lineTo(halfSize + offsetX, quarterSize + offsetY); + this._context.lineTo(quarterSize + offsetX, halfSize + offsetY); + this._context.lineTo(offsetX, quarterSize + offsetY); + + this._context.closePath(); + } + }]); + return Diamond; +}(Shape); + +var DiamondBox = function (_Diamond) { + inherits(DiamondBox, _Diamond); + + function DiamondBox() { + classCallCheck(this, DiamondBox); + return possibleConstructorReturn(this, (DiamondBox.__proto__ || Object.getPrototypeOf(DiamondBox)).apply(this, arguments)); + } + + createClass(DiamondBox, [{ + key: 'drawTile', + value: function drawTile() { + var halfSize = this._size / 2; + + this._context.beginPath(); + + this.setStrokeProps(); + + this.drawDiamond(); + this.drawDiamond(halfSize, halfSize); + + this._context.stroke(); + + return this._canvas; + } + }, { + key: 'drawDiamond', + value: function drawDiamond() { + var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var size = this._size; + var halfSize = size / 2 - 1; + var quarterSize = size / 4; + + this._context.moveTo(quarterSize + offsetX, offsetY + 1); + this._context.lineTo(halfSize + offsetX, quarterSize + offsetY); + this._context.lineTo(quarterSize + offsetX, halfSize + offsetY); + this._context.lineTo(offsetX + 1, quarterSize + offsetY); + + this._context.closePath(); + } + }]); + return DiamondBox; +}(Diamond); + +var shapes = { + 'plus': Plus, + 'cross': Cross, + 'dash': Dash, + 'cross-dash': CrossDash, + 'dot': Dot, + 'dot-dash': DotDash, + 'disc': Disc, + 'ring': Ring, + 'line': Line, + 'line-vertical': VerticalLine, + 'weave': Weave, + 'zigzag': Zigzag, + 'zigzag-vertical': ZigzagVertical, + 'diagonal': Diagonal, + 'diagonal-right-left': DiagonalRightLeft, + 'square': Square, + 'box': Box, + 'triangle': Triangle, + 'triangle-inverted': TriangleVertical, + 'diamond': Diamond, + 'diamond-box': DiamondBox +}; + +var deprecatedShapes = { + 'circle': shapes['disc'], + 'triangle-vertical': shapes['triangle-inverted'], + 'line-horizontal': shapes['line'], + 'line-diagonal-lr': shapes['diagonal'], + 'line-diagonal-rl': shapes['diagonal-right-left'], + 'zigzag-horizontal': shapes['zigzag'], + 'diamond-outline': shapes['diamond-box'] +}; + +var completeShapesList = []; + +function getRandomShape() { + var excludedShapeTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; + + var shapesList = Object.keys(shapes); + + excludedShapeTypes.forEach(function (shapeType) { + shapesList.splice(shapesList.indexOf(shapeType), 1); + }); + + var randomIndex = Math.floor(Math.random() * shapesList.length); + + return shapesList[randomIndex]; +} + +_extends(completeShapesList, shapes, deprecatedShapes); + +function draw() { + var shapeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'square'; + var backgroundColor = arguments[1]; + var patternColor = arguments[2]; + var size = arguments[3]; + + var patternCanvas = document.createElement('canvas'); + var patternContext = patternCanvas.getContext('2d'); + var outerSize = size * 2; + + var Shape = completeShapesList[shapeType]; + var shape = new Shape(size, backgroundColor, patternColor); + + var pattern = patternContext.createPattern(shape.drawTile(), 'repeat'); + + patternCanvas.width = outerSize; + patternCanvas.height = outerSize; + + pattern.shapeType = shapeType; + + return pattern; +} + +function generate(colorList) { + var firstShapeType = void 0; + var previousShapeType = void 0; + + return colorList.map(function (color, index, list) { + var shapeType = void 0; + + if (index === 0) { + shapeType = getRandomShape(); + previousShapeType = shapeType; + firstShapeType = previousShapeType; + } else if (index === list.length - 1) { + shapeType = getRandomShape([previousShapeType, firstShapeType]); + } else { + shapeType = getRandomShape([previousShapeType]); + previousShapeType = shapeType; + } + + return draw(shapeType, color); + }); +} + +var pattern = { + draw: draw, + generate: generate +}; + +return pattern; + +}))); +//# sourceMappingURL=patternomaly.js.map From d9d751d6aede506125a2d61f539aa0831c660154 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Mon, 10 Feb 2025 13:34:26 -0700 Subject: [PATCH 06/10] fix color --- src/registrar/assets/js/get-gov-reports.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index 8bfe32fdd..403a9c41e 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -75,22 +75,22 @@ datasets: [ { label: labelOne, - backgroundColor: "rgba(255, 99, 132, 0.2)", + backgroundColor: "rgba(255, 99, 132, 0.3)", borderColor: "rgba(255, 99, 132, 1)", borderWidth: 1, data: listOne, backgroundColor: [ - pattern.draw('zigzag-vertical', '#1f77b4'), + pattern.draw('diagonal-right-left', 'rgba(255, 99, 132, 0.3)'), ] }, { label: labelTwo, - backgroundColor: "rgba(75, 192, 192, 0.2)", + backgroundColor: "rgba(75, 192, 192, 0.3)", borderColor: "rgba(75, 192, 192, 1)", borderWidth: 1, data: listTwo, backgroundColor: [ - pattern.draw('diagonal', '#1f77b4'), + pattern.draw('diagonal', 'rgba(75, 192, 192, 0.3)'), ] }, ], From ce53ceac02be36409fef4f840376970b541e9b0c Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Tue, 11 Feb 2025 08:56:28 -0700 Subject: [PATCH 07/10] Remove patternomaly --- src/registrar/assets/js/get-gov-reports.js | 82 +- src/registrar/assets/js/patternomaly.js | 1110 ------------------ src/registrar/templates/admin/base_site.html | 1 - 3 files changed, 76 insertions(+), 1117 deletions(-) delete mode 100644 src/registrar/assets/js/patternomaly.js diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index 403a9c41e..65608ede9 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -59,6 +59,80 @@ /** An IIFE to initialize the analytics page */ (function () { + + // This code is adapted from here: + // https://stackoverflow.com/questions/28569667/fill-chart-js-bar-chart-with-diagonal-stripes-or-other-patterns + 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") + } + + 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) { var canvas = document.getElementById(canvasId); if (!canvas) { @@ -79,9 +153,7 @@ borderColor: "rgba(255, 99, 132, 1)", borderWidth: 1, data: listOne, - backgroundColor: [ - pattern.draw('diagonal-right-left', 'rgba(255, 99, 132, 0.3)'), - ] + backgroundColor: createDiagonalRightLeftPattern('rgba(255, 99, 132, 0.3)') }, { label: labelTwo, @@ -89,9 +161,7 @@ borderColor: "rgba(75, 192, 192, 1)", borderWidth: 1, data: listTwo, - backgroundColor: [ - pattern.draw('diagonal', 'rgba(75, 192, 192, 0.3)'), - ] + backgroundColor: createDiagonalPattern('rgba(75, 192, 192, 0.3)') }, ], }; diff --git a/src/registrar/assets/js/patternomaly.js b/src/registrar/assets/js/patternomaly.js deleted file mode 100644 index e349db0f0..000000000 --- a/src/registrar/assets/js/patternomaly.js +++ /dev/null @@ -1,1110 +0,0 @@ -// This file is copied from the patternomaly library for chart.js. -// This allows us to add patterns for better accessibility for color-blind users. -// Source: https://github.com/ashiguruma/patternomaly - -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global.pattern = factory()); -}(this, (function () { 'use strict'; - -var BACKGROUND_COLOR = 'rgba(100, 100, 100, 0.7)'; -var PATTERN_COLOR = 'rgba(255, 255, 255, 0.8)'; -var POINT_STYLE = 'round'; - -var asyncGenerator = function () { - function AwaitValue(value) { - this.value = value; - } - - function AsyncGenerator(gen) { - var front, back; - - function send(key, arg) { - return new Promise(function (resolve, reject) { - var request = { - key: key, - arg: arg, - resolve: resolve, - reject: reject, - next: null - }; - - if (back) { - back = back.next = request; - } else { - front = back = request; - resume(key, arg); - } - }); - } - - function resume(key, arg) { - try { - var result = gen[key](arg); - var value = result.value; - - if (value instanceof AwaitValue) { - Promise.resolve(value.value).then(function (arg) { - resume("next", arg); - }, function (arg) { - resume("throw", arg); - }); - } else { - settle(result.done ? "return" : "normal", result.value); - } - } catch (err) { - settle("throw", err); - } - } - - function settle(type, value) { - switch (type) { - case "return": - front.resolve({ - value: value, - done: true - }); - break; - - case "throw": - front.reject(value); - break; - - default: - front.resolve({ - value: value, - done: false - }); - break; - } - - front = front.next; - - if (front) { - resume(front.key, front.arg); - } else { - back = null; - } - } - - this._invoke = send; - - if (typeof gen.return !== "function") { - this.return = undefined; - } - } - - if (typeof Symbol === "function" && Symbol.asyncIterator) { - AsyncGenerator.prototype[Symbol.asyncIterator] = function () { - return this; - }; - } - - AsyncGenerator.prototype.next = function (arg) { - return this._invoke("next", arg); - }; - - AsyncGenerator.prototype.throw = function (arg) { - return this._invoke("throw", arg); - }; - - AsyncGenerator.prototype.return = function (arg) { - return this._invoke("return", arg); - }; - - return { - wrap: function (fn) { - return function () { - return new AsyncGenerator(fn.apply(this, arguments)); - }; - }, - await: function (value) { - return new AwaitValue(value); - } - }; -}(); - -var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } -}; - -var createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; -}(); - -var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; -}; - -var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; -}; - -var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; -}; - -var Shape = function () { - function Shape() { - var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20; - var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BACKGROUND_COLOR; - var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : PATTERN_COLOR; - classCallCheck(this, Shape); - - this._canvas = document.createElement('canvas'); - this._context = this._canvas.getContext('2d'); - - this._canvas.width = size; - this._canvas.height = size; - - this._context.fillStyle = backgroundColor; - this._context.fillRect(0, 0, this._canvas.width, this._canvas.height); - - this._size = size; - this._patternColor = patternColor; - - return this; - } - - createClass(Shape, [{ - key: 'setStrokeProps', - value: function setStrokeProps() { - this._context.strokeStyle = this._patternColor; - this._context.lineWidth = this._size / 10; - this._context.lineJoin = POINT_STYLE; - this._context.lineCap = POINT_STYLE; - } - }, { - key: 'setFillProps', - value: function setFillProps() { - this._context.fillStyle = this._patternColor; - } - }]); - return Shape; -}(); - -var Plus = function (_Shape) { - inherits(Plus, _Shape); - - function Plus() { - classCallCheck(this, Plus); - return possibleConstructorReturn(this, (Plus.__proto__ || Object.getPrototypeOf(Plus)).apply(this, arguments)); - } - - createClass(Plus, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawPlus(); - this.drawPlus(halfSize, halfSize); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawPlus', - value: function drawPlus() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2; - var quarterSize = size / 4; - - this._context.moveTo(quarterSize + offsetX, 0 + offsetY); - this._context.lineTo(quarterSize + offsetX, halfSize + offsetY); - this._context.moveTo(0 + offsetX, quarterSize + offsetY); - this._context.lineTo(halfSize + offsetX, quarterSize + offsetY); - - this._context.closePath(); - } - }]); - return Plus; -}(Shape); - -var Cross = function (_Shape) { - inherits(Cross, _Shape); - - function Cross() { - classCallCheck(this, Cross); - return possibleConstructorReturn(this, (Cross.__proto__ || Object.getPrototypeOf(Cross)).apply(this, arguments)); - } - - createClass(Cross, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawCross(); - this.drawCross(halfSize, halfSize); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawCross', - value: function drawCross() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2; - var gap = 2; - - this._context.moveTo(offsetX + gap, offsetY + gap); - this._context.lineTo(halfSize - gap + offsetX, halfSize - gap + offsetY); - this._context.moveTo(offsetX + gap, halfSize - gap + offsetY); - this._context.lineTo(halfSize - gap + offsetX, offsetY + gap); - - this._context.closePath(); - } - }]); - return Cross; -}(Shape); - -var Dash = function (_Shape) { - inherits(Dash, _Shape); - - function Dash() { - classCallCheck(this, Dash); - return possibleConstructorReturn(this, (Dash.__proto__ || Object.getPrototypeOf(Dash)).apply(this, arguments)); - } - - createClass(Dash, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawDash(); - this.drawDash(halfSize, halfSize); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawDash', - value: function drawDash() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2; - var gap = 2; - - this._context.moveTo(offsetX + gap, offsetY + gap); - this._context.lineTo(halfSize - gap + offsetX, halfSize - gap + offsetY); - - this._context.closePath(); - } - }]); - return Dash; -}(Shape); - -var CrossDash = function (_Shape) { - inherits(CrossDash, _Shape); - - function CrossDash() { - classCallCheck(this, CrossDash); - return possibleConstructorReturn(this, (CrossDash.__proto__ || Object.getPrototypeOf(CrossDash)).apply(this, arguments)); - } - - createClass(CrossDash, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - this._context.beginPath(); - - this.setStrokeProps(); - - var cross = new Cross(); - cross.drawCross.call(this); - - var dash = new Dash(); - dash.drawDash.call(this, halfSize, halfSize); - - this._context.stroke(); - - return this._canvas; - } - }]); - return CrossDash; -}(Shape); - -var Dot = function (_Shape) { - inherits(Dot, _Shape); - - function Dot() { - classCallCheck(this, Dot); - return possibleConstructorReturn(this, (Dot.__proto__ || Object.getPrototypeOf(Dot)).apply(this, arguments)); - } - - createClass(Dot, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setFillProps(); - - this.drawDot(); - this.drawDot(halfSize, halfSize); - - this._context.fill(); - - return this._canvas; - } - }, { - key: 'drawDot', - value: function drawDot() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - var diameter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this._size / 10; - - var size = this._size; - var quarterSize = size / 4; - var x = quarterSize + offsetX; - var y = quarterSize + offsetY; - - this._context.moveTo(x + quarterSize, y); - this._context.arc(x, y, diameter, 0, 2 * Math.PI); - - this._context.closePath(); - } - }]); - return Dot; -}(Shape); - -var DotDash = function (_Shape) { - inherits(DotDash, _Shape); - - function DotDash() { - classCallCheck(this, DotDash); - return possibleConstructorReturn(this, (DotDash.__proto__ || Object.getPrototypeOf(DotDash)).apply(this, arguments)); - } - - createClass(DotDash, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setStrokeProps(); - - var dash = new Dash(); - dash.drawDash.call(this, halfSize, halfSize); - - this._context.closePath(); - this._context.stroke(); - - this.setFillProps(); - - var dot = new Dot(); - dot.drawDot.call(this); - - this._context.fill(); - - return this._canvas; - } - }]); - return DotDash; -}(Shape); - -var Disc = function (_Dot) { - inherits(Disc, _Dot); - - function Disc() { - classCallCheck(this, Disc); - return possibleConstructorReturn(this, (Disc.__proto__ || Object.getPrototypeOf(Disc)).apply(this, arguments)); - } - - createClass(Disc, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - var diameter = this._size / 5; - - this._context.beginPath(); - - this.setFillProps(); - - this.drawDot(0, 0, diameter); - this.drawDot(halfSize, halfSize, diameter); - - this._context.fill(); - - return this._canvas; - } - }]); - return Disc; -}(Dot); - -var Ring = function (_Dot) { - inherits(Ring, _Dot); - - function Ring() { - classCallCheck(this, Ring); - return possibleConstructorReturn(this, (Ring.__proto__ || Object.getPrototypeOf(Ring)).apply(this, arguments)); - } - - createClass(Ring, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - var diameter = this._size / 5; - - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawDot(0, 0, diameter); - this.drawDot(halfSize, halfSize, diameter); - - this._context.stroke(); - - return this._canvas; - } - }]); - return Ring; -}(Dot); - -var Line = function (_Shape) { - inherits(Line, _Shape); - - function Line() { - classCallCheck(this, Line); - return possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).apply(this, arguments)); - } - - createClass(Line, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawLine(); - this.drawLine(halfSize, halfSize); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawLine', - value: function drawLine() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var quarterSize = size / 4; - - this._context.moveTo(0, quarterSize + offsetY); - this._context.lineTo(this._size, quarterSize + offsetY); - - this._context.closePath(); - } - }]); - return Line; -}(Shape); - -var VerticalLine = function (_Line) { - inherits(VerticalLine, _Line); - - function VerticalLine() { - classCallCheck(this, VerticalLine); - return possibleConstructorReturn(this, (VerticalLine.__proto__ || Object.getPrototypeOf(VerticalLine)).apply(this, arguments)); - } - - createClass(VerticalLine, [{ - key: 'drawTile', - value: function drawTile() { - this._context.translate(this._size, 0); - this._context.rotate(90 * Math.PI / 180); - - Line.prototype.drawTile.call(this); - - return this._canvas; - } - }]); - return VerticalLine; -}(Line); - -var Weave = function (_Shape) { - inherits(Weave, _Shape); - - function Weave() { - classCallCheck(this, Weave); - return possibleConstructorReturn(this, (Weave.__proto__ || Object.getPrototypeOf(Weave)).apply(this, arguments)); - } - - createClass(Weave, [{ - key: 'drawTile', - value: function drawTile() { - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawWeave(0, 0); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawWeave', - value: function drawWeave(offsetX, offsetY) { - var size = this._size; - var halfSize = size / 2; - - this._context.moveTo(offsetX + 1, offsetY + 1); - this._context.lineTo(halfSize - 1, halfSize - 1); - - this._context.moveTo(halfSize + 1, size - 1); - this._context.lineTo(size - 1, halfSize + 1); - - this._context.closePath(); - } - }]); - return Weave; -}(Shape); - -var Zigzag = function (_Shape) { - inherits(Zigzag, _Shape); - - function Zigzag() { - classCallCheck(this, Zigzag); - return possibleConstructorReturn(this, (Zigzag.__proto__ || Object.getPrototypeOf(Zigzag)).apply(this, arguments)); - } - - createClass(Zigzag, [{ - key: 'drawTile', - value: function drawTile() { - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawZigzag(); - this.drawZigzag(this._size / 2); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawZigzag', - value: function drawZigzag() { - var offsetY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - - var size = this._size; - var quarterSize = size / 4; - var halfSize = size / 2; - var tenthSize = size / 10; - - this._context.moveTo(0, tenthSize + offsetY); - this._context.lineTo(quarterSize, halfSize - tenthSize + offsetY); - this._context.lineTo(halfSize, tenthSize + offsetY); - this._context.lineTo(size - quarterSize, halfSize - tenthSize + offsetY); - this._context.lineTo(size, tenthSize + offsetY); - } - }]); - return Zigzag; -}(Shape); - -var ZigzagVertical = function (_Zigzag) { - inherits(ZigzagVertical, _Zigzag); - - function ZigzagVertical() { - classCallCheck(this, ZigzagVertical); - return possibleConstructorReturn(this, (ZigzagVertical.__proto__ || Object.getPrototypeOf(ZigzagVertical)).apply(this, arguments)); - } - - createClass(ZigzagVertical, [{ - key: 'drawTile', - value: function drawTile() { - this._context.translate(this._size, 0); - this._context.rotate(90 * Math.PI / 180); - - Zigzag.prototype.drawTile.call(this); - - return this._canvas; - } - }]); - return ZigzagVertical; -}(Zigzag); - -var Diagonal = function (_Shape) { - inherits(Diagonal, _Shape); - - function Diagonal() { - classCallCheck(this, Diagonal); - return possibleConstructorReturn(this, (Diagonal.__proto__ || Object.getPrototypeOf(Diagonal)).apply(this, arguments)); - } - - createClass(Diagonal, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawDiagonalLine(); - this.drawDiagonalLine(halfSize, halfSize); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawDiagonalLine', - value: function drawDiagonalLine() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2; - var gap = 1; - - this._context.moveTo(halfSize - gap - offsetX, gap * -1 + offsetY); - this._context.lineTo(size + 1 - offsetX, halfSize + 1 + offsetY); - - this._context.closePath(); - } - }]); - return Diagonal; -}(Shape); - -var DiagonalRightLeft = function (_Diagonal) { - inherits(DiagonalRightLeft, _Diagonal); - - function DiagonalRightLeft() { - classCallCheck(this, DiagonalRightLeft); - return possibleConstructorReturn(this, (DiagonalRightLeft.__proto__ || Object.getPrototypeOf(DiagonalRightLeft)).apply(this, arguments)); - } - - createClass(DiagonalRightLeft, [{ - key: 'drawTile', - value: function drawTile() { - this._context.translate(this._size, 0); - this._context.rotate(90 * Math.PI / 180); - - Diagonal.prototype.drawTile.call(this); - - return this._canvas; - } - }]); - return DiagonalRightLeft; -}(Diagonal); - -var Square = function (_Shape) { - inherits(Square, _Shape); - - function Square() { - classCallCheck(this, Square); - return possibleConstructorReturn(this, (Square.__proto__ || Object.getPrototypeOf(Square)).apply(this, arguments)); - } - - createClass(Square, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setFillProps(); - - this.drawSquare(); - this.drawSquare(halfSize, halfSize); - - this._context.fill(); - - return this._canvas; - } - }, { - key: 'drawSquare', - value: function drawSquare() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2; - var gap = size / 20; - - this._context.fillRect(offsetX + gap, offsetY + gap, halfSize - gap * 2, halfSize - gap * 2); - - this._context.closePath(); - } - }]); - return Square; -}(Shape); - -var Box = function (_Shape) { - inherits(Box, _Shape); - - function Box() { - classCallCheck(this, Box); - return possibleConstructorReturn(this, (Box.__proto__ || Object.getPrototypeOf(Box)).apply(this, arguments)); - } - - createClass(Box, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawBox(); - this.drawBox(halfSize, halfSize); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawBox', - value: function drawBox() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2; - var gap = size / 20; - - this._context.strokeRect(offsetX + gap, offsetY + gap, halfSize - gap * 4, halfSize - gap * 4); - - this._context.closePath(); - } - }]); - return Box; -}(Shape); - -var Triangle = function (_Shape) { - inherits(Triangle, _Shape); - - function Triangle() { - classCallCheck(this, Triangle); - return possibleConstructorReturn(this, (Triangle.__proto__ || Object.getPrototypeOf(Triangle)).apply(this, arguments)); - } - - createClass(Triangle, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setFillProps(); - - this.drawTriangle(); - this.drawTriangle(halfSize, halfSize); - - this._context.fill(); - - return this._canvas; - } - }, { - key: 'drawTriangle', - value: function drawTriangle() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2; - var quarterSize = size / 4; - - this._context.moveTo(quarterSize + offsetX, offsetY); - this._context.lineTo(halfSize + offsetX, halfSize + offsetY); - this._context.lineTo(offsetX, halfSize + offsetY); - - this._context.closePath(); - } - }]); - return Triangle; -}(Shape); - -var TriangleVertical = function (_Triangle) { - inherits(TriangleVertical, _Triangle); - - function TriangleVertical() { - classCallCheck(this, TriangleVertical); - return possibleConstructorReturn(this, (TriangleVertical.__proto__ || Object.getPrototypeOf(TriangleVertical)).apply(this, arguments)); - } - - createClass(TriangleVertical, [{ - key: 'drawTile', - value: function drawTile() { - var size = this._size; - - this._context.translate(size, size); - this._context.rotate(180 * Math.PI / 180); - - Triangle.prototype.drawTile.call(this); - - return this._canvas; - } - }]); - return TriangleVertical; -}(Triangle); - -var Diamond = function (_Shape) { - inherits(Diamond, _Shape); - - function Diamond() { - classCallCheck(this, Diamond); - return possibleConstructorReturn(this, (Diamond.__proto__ || Object.getPrototypeOf(Diamond)).apply(this, arguments)); - } - - createClass(Diamond, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setFillProps(); - - this.drawDiamond(); - this.drawDiamond(halfSize, halfSize); - - this._context.fill(); - - return this._canvas; - } - }, { - key: 'drawDiamond', - value: function drawDiamond() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2; - var quarterSize = size / 4; - - this._context.moveTo(quarterSize + offsetX, offsetY); - this._context.lineTo(halfSize + offsetX, quarterSize + offsetY); - this._context.lineTo(quarterSize + offsetX, halfSize + offsetY); - this._context.lineTo(offsetX, quarterSize + offsetY); - - this._context.closePath(); - } - }]); - return Diamond; -}(Shape); - -var DiamondBox = function (_Diamond) { - inherits(DiamondBox, _Diamond); - - function DiamondBox() { - classCallCheck(this, DiamondBox); - return possibleConstructorReturn(this, (DiamondBox.__proto__ || Object.getPrototypeOf(DiamondBox)).apply(this, arguments)); - } - - createClass(DiamondBox, [{ - key: 'drawTile', - value: function drawTile() { - var halfSize = this._size / 2; - - this._context.beginPath(); - - this.setStrokeProps(); - - this.drawDiamond(); - this.drawDiamond(halfSize, halfSize); - - this._context.stroke(); - - return this._canvas; - } - }, { - key: 'drawDiamond', - value: function drawDiamond() { - var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; - var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - - var size = this._size; - var halfSize = size / 2 - 1; - var quarterSize = size / 4; - - this._context.moveTo(quarterSize + offsetX, offsetY + 1); - this._context.lineTo(halfSize + offsetX, quarterSize + offsetY); - this._context.lineTo(quarterSize + offsetX, halfSize + offsetY); - this._context.lineTo(offsetX + 1, quarterSize + offsetY); - - this._context.closePath(); - } - }]); - return DiamondBox; -}(Diamond); - -var shapes = { - 'plus': Plus, - 'cross': Cross, - 'dash': Dash, - 'cross-dash': CrossDash, - 'dot': Dot, - 'dot-dash': DotDash, - 'disc': Disc, - 'ring': Ring, - 'line': Line, - 'line-vertical': VerticalLine, - 'weave': Weave, - 'zigzag': Zigzag, - 'zigzag-vertical': ZigzagVertical, - 'diagonal': Diagonal, - 'diagonal-right-left': DiagonalRightLeft, - 'square': Square, - 'box': Box, - 'triangle': Triangle, - 'triangle-inverted': TriangleVertical, - 'diamond': Diamond, - 'diamond-box': DiamondBox -}; - -var deprecatedShapes = { - 'circle': shapes['disc'], - 'triangle-vertical': shapes['triangle-inverted'], - 'line-horizontal': shapes['line'], - 'line-diagonal-lr': shapes['diagonal'], - 'line-diagonal-rl': shapes['diagonal-right-left'], - 'zigzag-horizontal': shapes['zigzag'], - 'diamond-outline': shapes['diamond-box'] -}; - -var completeShapesList = []; - -function getRandomShape() { - var excludedShapeTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; - - var shapesList = Object.keys(shapes); - - excludedShapeTypes.forEach(function (shapeType) { - shapesList.splice(shapesList.indexOf(shapeType), 1); - }); - - var randomIndex = Math.floor(Math.random() * shapesList.length); - - return shapesList[randomIndex]; -} - -_extends(completeShapesList, shapes, deprecatedShapes); - -function draw() { - var shapeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'square'; - var backgroundColor = arguments[1]; - var patternColor = arguments[2]; - var size = arguments[3]; - - var patternCanvas = document.createElement('canvas'); - var patternContext = patternCanvas.getContext('2d'); - var outerSize = size * 2; - - var Shape = completeShapesList[shapeType]; - var shape = new Shape(size, backgroundColor, patternColor); - - var pattern = patternContext.createPattern(shape.drawTile(), 'repeat'); - - patternCanvas.width = outerSize; - patternCanvas.height = outerSize; - - pattern.shapeType = shapeType; - - return pattern; -} - -function generate(colorList) { - var firstShapeType = void 0; - var previousShapeType = void 0; - - return colorList.map(function (color, index, list) { - var shapeType = void 0; - - if (index === 0) { - shapeType = getRandomShape(); - previousShapeType = shapeType; - firstShapeType = previousShapeType; - } else if (index === list.length - 1) { - shapeType = getRandomShape([previousShapeType, firstShapeType]); - } else { - shapeType = getRandomShape([previousShapeType]); - previousShapeType = shapeType; - } - - return draw(shapeType, color); - }); -} - -var pattern = { - draw: draw, - generate: generate -}; - -return pattern; - -}))); -//# sourceMappingURL=patternomaly.js.map diff --git a/src/registrar/templates/admin/base_site.html b/src/registrar/templates/admin/base_site.html index d7c43647a..b80917bb2 100644 --- a/src/registrar/templates/admin/base_site.html +++ b/src/registrar/templates/admin/base_site.html @@ -23,7 +23,6 @@ - {% endblock %} From b873716f0cb73d8b2ab0e3ac6e1f21bf61224928 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Tue, 11 Feb 2025 09:07:38 -0700 Subject: [PATCH 08/10] Add proper credit --- src/registrar/assets/js/get-gov-reports.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index 65608ede9..c3c5b3c0b 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -60,8 +60,10 @@ */ (function () { - // This code is adapted from here: + // 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") From 07c7f58f205d0f87b35b1cb68ecba27bf33a5534 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Tue, 11 Feb 2025 11:17:26 -0700 Subject: [PATCH 09/10] Cleanup code --- src/registrar/assets/js/get-gov-reports.js | 112 ++++++++------------- 1 file changed, 41 insertions(+), 71 deletions(-) diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index c3c5b3c0b..382e91fc6 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -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') }, ], }; From 69596fe5bbd82fd3efbe8a82706033941cfbd82f Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Tue, 11 Feb 2025 11:19:12 -0700 Subject: [PATCH 10/10] Update src/registrar/assets/js/get-gov-reports.js --- src/registrar/assets/js/get-gov-reports.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index 382e91fc6..b82a5574f 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -64,8 +64,8 @@ * 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 {string} [lineColor="white"] - Color of the diagonal lines * @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