@mozaic-ds/chart 0.1.0-beta.0 → 0.1.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/mozaic-chart.js +2421 -2255
  2. package/dist/mozaic-chart.umd.cjs +11 -11
  3. package/dist/style.css +1 -1
  4. package/package.json +25 -23
  5. package/src/components/bar/BarChart.stories.ts +7 -0
  6. package/src/components/bar/BarChart.vue +60 -8
  7. package/src/components/bar/index.ts +8 -0
  8. package/src/components/doughnut/DoughnutChart.stories.ts +2 -0
  9. package/src/components/doughnut/DoughnutChart.vue +98 -51
  10. package/src/components/doughnut/index.ts +8 -0
  11. package/src/components/index.ts +4 -0
  12. package/src/components/line/LineChart.vue +46 -3
  13. package/src/components/line/index.ts +8 -0
  14. package/src/components/radar/RadarChart.vue +59 -15
  15. package/src/components/radar/index.ts +8 -0
  16. package/src/plugin.ts +18 -0
  17. package/src/services/BarChartFunctions.ts +16 -20
  18. package/src/services/ChartsCommonLegend.ts +20 -25
  19. package/src/services/ColorFunctions.ts +4 -0
  20. package/src/services/DoughnutChartFunctions.ts +24 -17
  21. package/src/services/GenericTooltipService.ts +39 -32
  22. package/src/services/patterns/ChartDesign.ts +15 -9
  23. package/src/services/patterns/patternCircles.ts +63 -50
  24. package/src/services/patterns/patternDashedDiagonals.ts +46 -32
  25. package/src/services/patterns/patternDiagonals.ts +85 -71
  26. package/src/services/patterns/patternSquares.ts +56 -44
  27. package/src/services/patterns/patternVerticalLines.ts +41 -28
  28. package/src/services/patterns/patternZigzag.ts +20 -7
package/src/services/patterns/patternCircles.ts CHANGED
@@ -1,4 +1,4 @@
1
- export default function PatternCircles(hover: boolean): CanvasPattern {
1
+ export default function PatternCircles(hover: boolean, color: string = '#095359', disableAccessibility: boolean = false): CanvasPattern {
2
2
  const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
3
3
  const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
4
4
 
@@ -8,64 +8,77 @@ export default function PatternCircles(hover: boolean): CanvasPattern {
8
8
 
9
9
  const patternSize = 50;
10
10
  const lineWidthPattern = 0.04 * patternSize;
11
-
11
+
12
12
  canvasPattern.width = patternSize;
13
13
  canvasPattern.height = patternSize;
14
-
15
- // #rect1258
16
- ctx.beginPath();
17
- ctx.fillStyle = 'rgb(253, 234, 234)';
18
- ctx.lineWidth = 0.1005 * patternSize;
19
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
20
- ctx.fill();
21
-
22
- // #circle4
23
- ctx.beginPath();
24
- ctx.globalAlpha = 0.3;
25
- ctx.strokeStyle = 'rgb(140, 0, 3)';
26
- ctx.lineWidth = lineWidthPattern;
27
- ctx.arc(lineWidthPattern + 0.06 * patternSize,
28
- lineWidthPattern + 0.06 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
29
- ctx.stroke();
30
-
31
- // #circle6
32
- ctx.beginPath();
33
- ctx.globalAlpha = 0.7;
34
- ctx.strokeStyle = 'rgb(140, 0, 3)';
35
- ctx.lineWidth = lineWidthPattern;
36
- ctx.arc(lineWidthPattern + 0.56 * patternSize,
37
- lineWidthPattern + 0.06 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
38
- ctx.stroke();
39
-
40
- // #circle104
41
- ctx.beginPath();
42
- ctx.globalAlpha = 0.3;
43
- ctx.strokeStyle = 'rgb(140, 0, 3)';
44
- ctx.lineWidth = 0.04 * patternSize;
45
- ctx.arc(-lineWidthPattern + 0.44 * patternSize,
46
- lineWidthPattern + 0.56 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
47
- ctx.stroke();
48
14
 
49
- // #circle106
50
- ctx.beginPath();
51
- ctx.globalAlpha = 0.7;
52
- ctx.strokeStyle = 'rgb(140, 0, 3)';
53
- ctx.lineWidth = 0.04 * patternSize;
54
- ctx.arc(-lineWidthPattern + 0.94 * patternSize,
55
- lineWidthPattern + 0.56 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
56
- ctx.stroke();
57
-
58
- // Hover Style
59
- if (hover) {
15
+ if (disableAccessibility === true) {
16
+ ctx.beginPath();
17
+ ctx.fillStyle = color;
18
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
19
+ ctx.fill();
20
+ } else {
21
+ // Background
60
22
  ctx.beginPath();
61
- 0.5;
62
23
  ctx.fillStyle = '#FFFFFF';
63
- ctx.lineWidth = 0.006 * patternSize;
24
+ ctx.lineWidth = 0.1005 * patternSize;
25
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
26
+ ctx.fill();
27
+ ctx.beginPath();
28
+ ctx.globalAlpha = 0.1;
29
+ ctx.fillStyle = color;
30
+ ctx.lineWidth = 0.1005 * patternSize;
64
31
  ctx.rect(0.000000, 0.000000, patternSize, patternSize);
65
32
  ctx.fill();
33
+
34
+ // #circle4
35
+ ctx.beginPath();
36
+ ctx.globalAlpha = 0.3;
37
+ ctx.strokeStyle = color;
38
+ ctx.lineWidth = lineWidthPattern;
39
+ ctx.arc(lineWidthPattern + 0.06 * patternSize,
40
+ lineWidthPattern + 0.06 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
41
+ ctx.stroke();
42
+
43
+ // #circle6
44
+ ctx.beginPath();
45
+ ctx.globalAlpha = 0.7;
46
+ ctx.strokeStyle = color;
47
+ ctx.lineWidth = lineWidthPattern;
48
+ ctx.arc(lineWidthPattern + 0.56 * patternSize,
49
+ lineWidthPattern + 0.06 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
50
+ ctx.stroke();
51
+
52
+ // #circle104
53
+ ctx.beginPath();
54
+ ctx.globalAlpha = 0.3;
55
+ ctx.strokeStyle = color;
56
+ ctx.lineWidth = 0.04 * patternSize;
57
+ ctx.arc(-lineWidthPattern + 0.44 * patternSize,
58
+ lineWidthPattern + 0.56 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
59
+ ctx.stroke();
60
+
61
+ // #circle106
62
+ ctx.beginPath();
63
+ ctx.globalAlpha = 0.7;
64
+ ctx.strokeStyle = color;
65
+ ctx.lineWidth = 0.04 * patternSize;
66
+ ctx.arc(-lineWidthPattern + 0.94 * patternSize,
67
+ lineWidthPattern + 0.56 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
68
+ ctx.stroke();
66
69
  }
67
70
 
68
- const canvas: HTMLCanvasElement = document.createElement('canvas');
71
+ // Hover Style
72
+ if (hover) {
73
+ ctx.beginPath();
74
+ ctx.globalAlpha = 0.5;
75
+ ctx.fillStyle = '#FFFFFF';
76
+ ctx.lineWidth = 0.006 * patternSize;
77
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
78
+ ctx.fill();
79
+ }
80
+
81
+ const canvas: HTMLCanvasElement = document.createElement('canvas');
69
82
  const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
70
83
  if (!context) {
71
84
  return new CanvasPattern;
package/src/services/patterns/patternDashedDiagonals.ts CHANGED
@@ -1,4 +1,4 @@
1
- export default function PatternDashedDiagonals(hover: boolean): CanvasPattern {
1
+ export default function PatternDashedDiagonals(hover: boolean, color: string = '#F255A3', disableAccessibility: boolean = false): CanvasPattern {
2
2
  const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
3
3
  const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
4
4
 
@@ -14,40 +14,54 @@ export default function PatternDashedDiagonals(hover: boolean): CanvasPattern {
14
14
  canvasPattern.width = patternSize;
15
15
  canvasPattern.height = patternSize;
16
16
 
17
- // #rect1258
18
- ctx.beginPath();
19
- ctx.fillStyle = 'rgb(253, 241, 232)';
20
- ctx.lineWidth = 0.005 * patternSize;
21
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
22
- ctx.fill();
23
-
24
- // #path991
25
- ctx.beginPath();
26
- ctx.globalAlpha = 0.3;
27
- ctx.strokeStyle = 'rgb(140, 53, 0)';
28
- ctx.lineWidth = lineWidth;
29
- ctx.moveTo(lineWidth, 0);
30
- ctx.lineTo(lineWidth, 0.5 * patternSize);
31
- ctx.stroke();
17
+ if (disableAccessibility === true) {
18
+ ctx.beginPath();
19
+ ctx.fillStyle = color;
20
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
21
+ ctx.fill();
22
+ } else {
23
+ // Background
24
+ ctx.beginPath();
25
+ ctx.fillStyle = '#FFFFFF';
26
+ ctx.lineWidth = 0.005 * patternSize;
27
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
28
+ ctx.fill();
29
+ ctx.beginPath();
30
+ ctx.globalAlpha = 0.1;
31
+ ctx.fillStyle = color;
32
+ ctx.lineWidth = 0.005 * patternSize;
33
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
34
+ ctx.fill();
32
35
 
33
- // #path991
34
- ctx.beginPath();
35
- ctx.globalAlpha = 0.7;
36
- ctx.strokeStyle = 'rgb(140, 53, 0)';
37
- ctx.lineWidth = lineWidth;
38
- ctx.moveTo(patternSize / 2 + lineWidth, 0);
39
- ctx.lineTo(patternSize / 2 + lineWidth, 0.5 * patternSize);
40
- ctx.stroke();
36
+ // #path991
37
+ ctx.beginPath();
38
+ ctx.globalAlpha = 0.3;
39
+ ctx.strokeStyle = color;
40
+ ctx.lineWidth = lineWidth;
41
+ ctx.moveTo(lineWidth, 0);
42
+ ctx.lineTo(lineWidth, 0.5 * patternSize);
43
+ ctx.stroke();
41
44
 
42
- // Hover Style
43
- if (hover) {
44
- ctx.beginPath();
45
- ctx.fillStyle = '#FFFFFF';
46
- ctx.lineWidth = 0.006 * patternSize;
47
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
48
- ctx.fill();
49
- }
45
+ // #path991
46
+ ctx.beginPath();
47
+ ctx.globalAlpha = 0.7;
48
+ ctx.strokeStyle = color;
49
+ ctx.lineWidth = lineWidth;
50
+ ctx.moveTo(patternSize / 2 + lineWidth, 0);
51
+ ctx.lineTo(patternSize / 2 + lineWidth, 0.5 * patternSize);
52
+ ctx.stroke();
53
+ }
50
54
 
55
+ // Hover Style
56
+ if (hover) {
57
+ ctx.beginPath();
58
+ ctx.fillStyle = '#FFFFFF';
59
+ ctx.globalAlpha = 0.5;
60
+ ctx.lineWidth = 0.006 * patternSize;
61
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
62
+ ctx.fill();
63
+ }
64
+
51
65
  const canvas: HTMLCanvasElement = document.createElement('canvas');
52
66
  const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
53
67
  if (!context) {
package/src/services/patterns/patternDiagonals.ts CHANGED
@@ -1,4 +1,4 @@
1
- export default function PatternDiagonals(hover: boolean): CanvasPattern {
1
+ export default function PatternDiagonals(hover: boolean, color: string = '#143666', disableAccessibility: boolean = false): CanvasPattern {
2
2
  const patternCanvas: HTMLCanvasElement = document.createElement('canvas');
3
3
  const ctx: CanvasRenderingContext2D | null = patternCanvas.getContext('2d');
4
4
  if (!ctx) {
@@ -10,82 +10,96 @@ export default function PatternDiagonals(hover: boolean): CanvasPattern {
10
10
  patternCanvas.width = patternSize;
11
11
  patternCanvas.height = patternSize;
12
12
 
13
- ctx.beginPath();
14
- ctx.fillStyle = 'rgb(217, 240, 243)';
15
- ctx.lineWidth = 0.005 * patternSize;
16
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
17
- ctx.fill();
18
-
19
- // #rect2744
20
- ctx.save();
21
- ctx.beginPath();
22
- ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
23
- ctx.globalAlpha = 0.7;
24
- ctx.fillStyle = 'rgb(0, 105, 116)';
25
- ctx.lineWidth = 0.075 * patternSize;
26
- ctx.miterLimit = 4;
27
- ctx.rect(- patternSize * 0.03, - 0.01 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
28
- ctx.fill();
29
- ctx.restore();
30
-
31
- // #rect2744-5
32
- ctx.save();
33
- ctx.beginPath();
34
- ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
35
- ctx.globalAlpha = 0.3;
36
- ctx.fillStyle = 'rgb(0, 105, 116)';
37
- ctx.lineWidth = 0.075 * patternSize;
38
- ctx.miterLimit = 4;
39
- ctx.rect(0.29 * patternSize, 0.33 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
40
- ctx.fill();
41
- ctx.restore();
42
-
43
- // #rect2744-5-3
44
- ctx.save();
45
- ctx.beginPath();
46
- ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
47
- ctx.globalAlpha = 0.7;
48
- ctx.fillStyle = 'rgb(0, 105, 116)';
49
- ctx.lineWidth = 0.075 * patternSize;
50
- ctx.miterLimit = 4;
51
- ctx.rect(0.63 * patternSize, 0.69 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
52
- ctx.fill();
53
- ctx.restore();
54
-
55
- // #rect2744-6
56
- ctx.save();
57
- ctx.beginPath();
58
- ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
59
- ctx.globalAlpha = 0.3;
60
- ctx.fillStyle = 'rgb(0, 105, 116)';
61
- ctx.lineWidth = 0.075 * patternSize;
62
- ctx.miterLimit = 4;
63
- ctx.rect(0.33 * patternSize, -0.37 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
64
- ctx.fill();
65
- ctx.restore();
66
-
67
- // #rect2744-6-7
68
- ctx.save();
69
- ctx.beginPath();
70
- ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
71
- ctx.globalAlpha = 0.7;
72
- ctx.fillStyle = 'rgb(0, 105, 116)';
73
- ctx.lineWidth = 0.075 * patternSize;
74
- ctx.miterLimit = 4;
75
- ctx.rect(0.71 * patternSize, - 0.72 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
76
- ctx.fill();
77
- ctx.restore();
78
-
79
- // Hover Style
80
- if (hover) {
13
+ if (disableAccessibility === true) {
14
+ ctx.beginPath();
15
+ ctx.fillStyle = color;
16
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
17
+ ctx.fill();
18
+ } else {
19
+ // Background
81
20
  ctx.beginPath();
82
- ctx.globalAlpha = 0.5;
83
21
  ctx.fillStyle = '#FFFFFF';
84
- ctx.lineWidth = 0.006 * patternSize;
22
+ ctx.lineWidth = 0.005 * patternSize;
23
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
24
+ ctx.fill();
25
+ ctx.beginPath();
26
+ ctx.globalAlpha = 0.1;
27
+ ctx.fillStyle = color;
28
+ ctx.lineWidth = 0.005 * patternSize;
85
29
  ctx.rect(0.000000, 0.000000, patternSize, patternSize);
86
30
  ctx.fill();
31
+
32
+ // #rect2744
33
+ ctx.save();
34
+ ctx.beginPath();
35
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
36
+ ctx.globalAlpha = 0.7;
37
+ ctx.fillStyle = color;
38
+ ctx.lineWidth = 0.075 * patternSize;
39
+ ctx.miterLimit = 4;
40
+ ctx.rect(- patternSize * 0.03, - 0.01 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
41
+ ctx.fill();
42
+ ctx.restore();
43
+
44
+ // #rect2744-5
45
+ ctx.save();
46
+ ctx.beginPath();
47
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
48
+ ctx.globalAlpha = 0.3;
49
+ ctx.fillStyle = color;
50
+ ctx.lineWidth = 0.075 * patternSize;
51
+ ctx.miterLimit = 4;
52
+ ctx.rect(0.29 * patternSize, 0.33 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
53
+ ctx.fill();
54
+ ctx.restore();
55
+
56
+ // #rect2744-5-3
57
+ ctx.save();
58
+ ctx.beginPath();
59
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
60
+ ctx.globalAlpha = 0.7;
61
+ ctx.fillStyle = color;
62
+ ctx.lineWidth = 0.075 * patternSize;
63
+ ctx.miterLimit = 4;
64
+ ctx.rect(0.63 * patternSize, 0.69 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
65
+ ctx.fill();
66
+ ctx.restore();
67
+
68
+ // #rect2744-6
69
+ ctx.save();
70
+ ctx.beginPath();
71
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
72
+ ctx.globalAlpha = 0.3;
73
+ ctx.fillStyle = color;
74
+ ctx.lineWidth = 0.075 * patternSize;
75
+ ctx.miterLimit = 4;
76
+ ctx.rect(0.33 * patternSize, -0.37 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
77
+ ctx.fill();
78
+ ctx.restore();
79
+
80
+ // #rect2744-6-7
81
+ ctx.save();
82
+ ctx.beginPath();
83
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
84
+ ctx.globalAlpha = 0.7;
85
+ ctx.fillStyle = color;
86
+ ctx.lineWidth = 0.075 * patternSize;
87
+ ctx.miterLimit = 4;
88
+ ctx.rect(0.71 * patternSize, - 0.72 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
89
+ ctx.fill();
90
+ ctx.restore();
87
91
  }
88
92
 
93
+ // Hover Style
94
+ if (hover) {
95
+ ctx.beginPath();
96
+ ctx.globalAlpha = 0.5;
97
+ ctx.fillStyle = '#FFFFFF';
98
+ ctx.lineWidth = 0.006 * patternSize;
99
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
100
+ ctx.fill();
101
+ }
102
+
89
103
  // Create our primary canvas and fill it with the pattern
90
104
  const canvas: HTMLCanvasElement = document.createElement('canvas');
91
105
  const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
package/src/services/patterns/patternSquares.ts CHANGED
@@ -1,4 +1,4 @@
1
- export default function PatternSquares(hover: boolean): CanvasPattern {
1
+ export default function PatternSquares(hover: boolean, color: string = '#A274FF', disableAccessibility: boolean = false): CanvasPattern {
2
2
 
3
3
  const patternCanvas: HTMLCanvasElement = document.createElement('canvas');
4
4
  const ctx: CanvasRenderingContext2D | null = patternCanvas.getContext('2d');
@@ -12,55 +12,67 @@ export default function PatternSquares(hover: boolean): CanvasPattern {
12
12
  patternCanvas.width = patternSize;
13
13
  patternCanvas.height = patternSize;
14
14
 
15
- // #rect1258
16
- ctx.beginPath();
17
- ctx.fillStyle = 'rgb(231, 231, 240)';
18
- ctx.lineWidth = 0.005 * patternSize;
19
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
20
- ctx.fill();
21
-
22
- // #rect4
23
- ctx.beginPath();
24
- ctx.globalAlpha = 0.7;
25
- ctx.fillStyle = 'rgb(57, 56, 121)';
26
- ctx.lineWidth = 0.006 * patternSize;
27
- ctx.rect(0.5 * patternSize, 0.000000, squareSize, squareSize);
28
- ctx.fill();
29
-
30
- // #rect54
31
- ctx.beginPath();
32
- ctx.globalAlpha = 0.7;
33
- ctx.fillStyle = 'rgb(57, 56, 121)';
34
- ctx.lineWidth = 0.006 * patternSize;
35
- ctx.rect(0.75 * patternSize, patternSize / 2, squareSize, squareSize);
36
- ctx.fill();
37
-
38
- // #rect104
39
- ctx.beginPath();
40
- ctx.globalAlpha = 0.3;
41
- ctx.fillStyle = 'rgb(57, 56, 121)';
42
- ctx.lineWidth = 0.006 * patternSize;
43
- ctx.rect(0.000000, 0.000000, squareSize, squareSize);
44
- ctx.fill();
45
-
46
- // #rect154
47
- ctx.beginPath();
48
- ctx.globalAlpha = 0.3;
49
- ctx.fillStyle = 'rgb(57, 56, 121)';
50
- ctx.lineWidth = 0.006 * patternSize;
51
- ctx.rect(0.25 * patternSize, patternSize / 2, squareSize, squareSize);
52
- ctx.fill();
53
-
54
- // Hover Style
55
- if (hover) {
15
+ if (disableAccessibility === true) {
16
+ ctx.beginPath();
17
+ ctx.fillStyle = color;
18
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
19
+ ctx.fill();
20
+ } else {
21
+ // background
56
22
  ctx.beginPath();
57
- ctx.globalAlpha = 0.5;
58
23
  ctx.fillStyle = '#FFFFFF';
59
- ctx.lineWidth = 0.006 * patternSize;
24
+ ctx.lineWidth = 0.005 * patternSize;
25
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
26
+ ctx.fill();
27
+ ctx.beginPath();
28
+ ctx.globalAlpha = 0.1;
29
+ ctx.fillStyle = color;
30
+ ctx.lineWidth = 0.005 * patternSize;
60
31
  ctx.rect(0.000000, 0.000000, patternSize, patternSize);
61
32
  ctx.fill();
33
+
34
+ // #rect4
35
+ ctx.beginPath();
36
+ ctx.globalAlpha = 0.7;
37
+ ctx.fillStyle = color;
38
+ ctx.lineWidth = 0.006 * patternSize;
39
+ ctx.rect(0.5 * patternSize, 0.000000, squareSize, squareSize);
40
+ ctx.fill();
41
+
42
+ // #rect54
43
+ ctx.beginPath();
44
+ ctx.globalAlpha = 0.7;
45
+ ctx.fillStyle = color;
46
+ ctx.lineWidth = 0.006 * patternSize;
47
+ ctx.rect(0.75 * patternSize, patternSize / 2, squareSize, squareSize);
48
+ ctx.fill();
49
+
50
+ // #rect104
51
+ ctx.beginPath();
52
+ ctx.globalAlpha = 0.3;
53
+ ctx.fillStyle = color;
54
+ ctx.lineWidth = 0.006 * patternSize;
55
+ ctx.rect(0.000000, 0.000000, squareSize, squareSize);
56
+ ctx.fill();
57
+
58
+ // #rect154
59
+ ctx.beginPath();
60
+ ctx.globalAlpha = 0.3;
61
+ ctx.fillStyle = color;
62
+ ctx.lineWidth = 0.006 * patternSize;
63
+ ctx.rect(0.25 * patternSize, patternSize / 2, squareSize, squareSize);
64
+ ctx.fill();
62
65
  }
63
66
 
67
+ // Hover Style
68
+ if (hover) {
69
+ ctx.beginPath();
70
+ ctx.globalAlpha = 0.5;
71
+ ctx.fillStyle = '#FFFFFF';
72
+ ctx.lineWidth = 0.006 * patternSize;
73
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
74
+ ctx.fill();
75
+ }
64
76
  // Create our primary canvas and fill it with the pattern
65
77
  const canvas: HTMLCanvasElement = document.createElement('canvas');
66
78
  const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
package/src/services/patterns/patternVerticalLines.ts CHANGED
@@ -1,4 +1,4 @@
1
- export default function PatternVerticalLines(hover: boolean): CanvasPattern {
1
+ export default function PatternVerticalLines(hover: boolean, color: string = '#8C1551', disableAccessibility: boolean = false): CanvasPattern {
2
2
  const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
3
3
  const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
4
4
  if (!ctx) {
@@ -10,39 +10,52 @@ export default function PatternVerticalLines(hover: boolean): CanvasPattern {
10
10
 
11
11
  canvasPattern.width = patternSize;
12
12
  canvasPattern.height = patternSize;
13
-
14
- // #rect1258
15
- ctx.beginPath();
16
- ctx.fillStyle = 'rgb(218, 239, 247)';
17
- ctx.lineWidth = 0.005 * patternSize;
18
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
19
- ctx.fill();
20
-
21
- // #rect4
22
- ctx.beginPath();
23
- ctx.globalAlpha = 0.3;
24
- ctx.fillStyle = 'rgb(0, 92, 145)';
25
- ctx.lineWidth = 0.005 * patternSize;
26
- ctx.rect(0.000000, 0.000000, lineSize, patternSize);
27
- ctx.fill();
28
13
 
29
- // #rect6
30
- ctx.beginPath();
31
- ctx.globalAlpha = 0.7;
32
- ctx.fillStyle = 'rgb(0, 92, 145)';
33
- ctx.lineWidth = 0.005 * patternSize;
34
- ctx.rect(patternSize / 2, 0.000000, lineSize, patternSize);
35
- ctx.fill();
36
-
37
- // Hover Style
38
- if (hover) {
14
+ if (disableAccessibility === true) {
15
+ ctx.beginPath();
16
+ ctx.fillStyle = color;
17
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
18
+ ctx.fill();
19
+ } else {
20
+ // background
39
21
  ctx.beginPath();
40
- ctx.globalAlpha = 0.5;
41
22
  ctx.fillStyle = '#FFFFFF';
42
- ctx.lineWidth = 0.006 * patternSize;
23
+ ctx.lineWidth = 0.005 * patternSize;
24
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
25
+ ctx.fill();
26
+ ctx.beginPath();
27
+ ctx.globalAlpha = 0.1;
28
+ ctx.fillStyle = color;
29
+ ctx.lineWidth = 0.005 * patternSize;
43
30
  ctx.rect(0.000000, 0.000000, patternSize, patternSize);
44
31
  ctx.fill();
32
+
33
+ // #rect4
34
+ ctx.beginPath();
35
+ ctx.globalAlpha = 0.3;
36
+ ctx.fillStyle = color;
37
+ ctx.lineWidth = 0.005 * patternSize;
38
+ ctx.rect(0.000000, 0.000000, lineSize, patternSize);
39
+ ctx.fill();
40
+
41
+ // #rect6
42
+ ctx.beginPath();
43
+ ctx.globalAlpha = 0.7;
44
+ ctx.fillStyle = color;
45
+ ctx.lineWidth = 0.005 * patternSize;
46
+ ctx.rect(patternSize / 2, 0.000000, lineSize, patternSize);
47
+ ctx.fill();
45
48
  }
49
+
50
+ // Hover Style
51
+ if (hover) {
52
+ ctx.beginPath();
53
+ ctx.globalAlpha = 0.5;
54
+ ctx.fillStyle = '#FFFFFF';
55
+ ctx.lineWidth = 0.006 * patternSize;
56
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
57
+ ctx.fill();
58
+ }
46
59
 
47
60
  const canvas: HTMLCanvasElement = document.createElement('canvas');
48
61
  const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
package/src/services/patterns/patternZigzag.ts CHANGED
@@ -1,4 +1,4 @@
1
- export default function PatternZigzag(hover: boolean): CanvasPattern {
1
+ export default function PatternZigzag(hover: boolean, color: string = '#00A3B2', disableAccessibility: boolean = false): CanvasPattern {
2
2
  const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
3
3
  const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
4
4
  if (!ctx) {
@@ -10,9 +10,21 @@ export default function PatternZigzag(hover: boolean): CanvasPattern {
10
10
  canvasPattern.width = patternSize;
11
11
  canvasPattern.height = patternSize;
12
12
 
13
- // #rect1258
13
+ if (disableAccessibility === true) {
14
+ ctx.beginPath();
15
+ ctx.fillStyle = color;
16
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
17
+ ctx.fill();
18
+ } else {
19
+ // background
14
20
  ctx.beginPath();
15
- ctx.fillStyle = 'rgb(234, 237, 239)';
21
+ ctx.fillStyle = '#FFFFFF';
22
+ ctx.lineWidth = 0.005 * patternSize;
23
+ ctx.rect(0.000000, 0.000000, patternSize, patternSize);
24
+ ctx.fill();
25
+ ctx.beginPath();
26
+ ctx.globalAlpha = 0.1;
27
+ ctx.fillStyle = color;
16
28
  ctx.lineWidth = 0.005 * patternSize;
17
29
  ctx.rect(0.000000, 0.000000, patternSize, patternSize);
18
30
  ctx.fill();
@@ -20,7 +32,7 @@ export default function PatternZigzag(hover: boolean): CanvasPattern {
20
32
  // #path4
21
33
  ctx.beginPath();
22
34
  ctx.globalAlpha = 0.7;
23
- ctx.strokeStyle = 'rgb(64, 93, 104)';
35
+ ctx.strokeStyle = color;
24
36
  ctx.lineWidth = 0.08 * patternSize;
25
37
  ctx.moveTo(- patternSize / 2, patternSize / 2);
26
38
  ctx.lineTo(0.000000, 0.000000);
@@ -31,7 +43,7 @@ export default function PatternZigzag(hover: boolean): CanvasPattern {
31
43
  // #path6
32
44
  ctx.beginPath();
33
45
  ctx.globalAlpha = 0.3;
34
- ctx.strokeStyle = 'rgb(64, 93, 104)';
46
+ ctx.strokeStyle = color;
35
47
  ctx.lineWidth = 0.08 * patternSize;
36
48
  ctx.moveTo(- patternSize / 2, patternSize);
37
49
  ctx.lineTo(0.000000, patternSize / 2);
@@ -43,7 +55,7 @@ export default function PatternZigzag(hover: boolean): CanvasPattern {
43
55
  // #path6-6
44
56
  ctx.beginPath();
45
57
  ctx.globalAlpha = 0.3;
46
- ctx.strokeStyle = 'rgb(64, 93, 104)';
58
+ ctx.strokeStyle = color;
47
59
  ctx.lineWidth = 0.08 * patternSize;
48
60
  ctx.moveTo(- patternSize / 2, 0.000111);
49
61
  ctx.lineTo(0.000004 * patternSize, - patternSize / 2);
@@ -55,7 +67,7 @@ export default function PatternZigzag(hover: boolean): CanvasPattern {
55
67
  // #path6-5
56
68
  ctx.beginPath();
57
69
  ctx.globalAlpha = 0.7;
58
- ctx.strokeStyle = 'rgb(64, 93, 104)';
70
+ ctx.strokeStyle = color;
59
71
  ctx.lineWidth = 0.08 * patternSize;
60
72
  ctx.moveTo(- patternSize / 2, patternSize + (patternSize / 2));
61
73
  ctx.lineTo(0.000000, patternSize);
@@ -63,6 +75,7 @@ export default function PatternZigzag(hover: boolean): CanvasPattern {
63
75
  ctx.lineTo(patternSize, patternSize);
64
76
  ctx.lineTo(patternSize + (patternSize / 2), patternSize + (patternSize / 2));
65
77
  ctx.stroke();
78
+ }
66
79
 
67
80
  // Hover Style
68
81
  if (hover) {