@mozaic-ds/chart 0.1.0-beta.29 → 0.1.0-beta.30

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 (56) hide show
  1. package/README.md +1 -1
  2. package/dist/mozaic-chart.js +2303 -2109
  3. package/dist/mozaic-chart.umd.cjs +9 -9
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/src/assets/base.css +1 -1
  7. package/src/components/bar/BarChart.stories.ts +99 -99
  8. package/src/components/bar/BarChart.vue +70 -53
  9. package/src/components/bar/index.ts +3 -3
  10. package/src/components/bubble/BubbleChart.stories.ts +12 -12
  11. package/src/components/bubble/BubbleChart.vue +118 -91
  12. package/src/components/bubble/index.ts +3 -3
  13. package/src/components/doughnut/DoughnutChart.stories.ts +38 -37
  14. package/src/components/doughnut/DoughnutChart.vue +89 -71
  15. package/src/components/doughnut/index.ts +3 -3
  16. package/src/components/index.ts +4 -4
  17. package/src/components/line/LineChart.stories.ts +38 -38
  18. package/src/components/line/LineChart.vue +54 -51
  19. package/src/components/line/index.ts +3 -3
  20. package/src/components/mixed/MixedBarLineChart.stories.ts +15 -15
  21. package/src/components/mixed/MixedBarLineChart.vue +44 -44
  22. package/src/components/mixed/index.ts +1 -1
  23. package/src/components/radar/RadarChart.stories.ts +100 -100
  24. package/src/components/radar/RadarChart.vue +41 -34
  25. package/src/components/radar/index.ts +3 -3
  26. package/src/main.ts +14 -7
  27. package/src/plugin.ts +9 -9
  28. package/src/services/BarChartFunctions.ts +133 -35
  29. package/src/services/BubbleTooltipService.ts +58 -56
  30. package/src/services/ChartsCommonLegend.ts +271 -127
  31. package/src/services/ColorFunctions.ts +1 -1
  32. package/src/services/DoughnutChartFunctions.ts +42 -13
  33. package/src/services/FormatUtilities.ts +28 -14
  34. package/src/services/GenericTooltipService.ts +125 -65
  35. package/src/services/MixedBarLineFunctions.ts +46 -44
  36. package/src/services/PatternFunctions.ts +25 -18
  37. package/src/services/RadarChartFunctions.ts +5 -5
  38. package/src/services/patterns/ChartDesign.ts +35 -24
  39. package/src/services/patterns/patternCircles.ts +63 -36
  40. package/src/services/patterns/patternDashedDiagonals.ts +64 -57
  41. package/src/services/patterns/patternDiagonals.ts +138 -106
  42. package/src/services/patterns/patternSquares.ts +86 -80
  43. package/src/services/patterns/patternVerticalLines.ts +76 -69
  44. package/src/services/patterns/patternZigzag.ts +92 -85
  45. package/src/stories/Changelog.mdx +2 -2
  46. package/src/stories/Contributing.mdx +2 -2
  47. package/src/stories/GettingStarted.mdx +5 -5
  48. package/src/stories/SupportAndOnboarding.mdx +6 -6
  49. package/src/types/AxisDefinition.ts +0 -2
  50. package/src/types/Chart.ts +9 -7
  51. package/src/types/DoughnutData.ts +8 -0
  52. package/src/types/GenericData.ts +10 -10
  53. package/src/types/LineChart.ts +4 -4
  54. package/src/types/RadarData.ts +33 -29
  55. package/src/types/TooltipChartType.ts +7 -7
  56. package/src/vite-env.d.ts +3 -3
package/src/services/patterns/patternDiagonals.ts CHANGED
@@ -1,115 +1,147 @@
1
- export default function PatternDiagonals(hover: boolean, color: string = '#143666', disableAccessibility: boolean = false): CanvasPattern {
2
- const patternCanvas: HTMLCanvasElement = document.createElement('canvas');
3
- const ctx: CanvasRenderingContext2D | null = patternCanvas.getContext('2d');
4
- if (!ctx) {
5
- return new CanvasPattern;
6
- }
1
+ export default function PatternDiagonals(
2
+ hover: boolean,
3
+ color: string = '#143666',
4
+ disableAccessibility: boolean = false
5
+ ): CanvasPattern {
6
+ const patternCanvas: HTMLCanvasElement = document.createElement('canvas');
7
+ const ctx: CanvasRenderingContext2D | null = patternCanvas.getContext('2d');
8
+ if (!ctx) {
9
+ return new CanvasPattern();
10
+ }
7
11
 
8
- const patternSize = 50;
12
+ const patternSize = 50;
9
13
 
10
- patternCanvas.width = patternSize;
11
- patternCanvas.height = patternSize;
14
+ patternCanvas.width = patternSize;
15
+ patternCanvas.height = patternSize;
16
+
17
+ if (disableAccessibility === true) {
18
+ ctx.beginPath();
19
+ ctx.fillStyle = color;
20
+ ctx.rect(0.0, 0.0, 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.0, 0.0, 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.0, 0.0, patternSize, patternSize);
34
+ ctx.fill();
12
35
 
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
20
- ctx.beginPath();
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;
28
- ctx.lineWidth = 0.005 * patternSize;
29
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
30
- ctx.fill();
31
-
32
36
  // #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
-
37
+ ctx.save();
38
+ ctx.beginPath();
39
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.0, 0.0);
40
+ ctx.globalAlpha = 0.7;
41
+ ctx.fillStyle = color;
42
+ ctx.lineWidth = 0.075 * patternSize;
43
+ ctx.miterLimit = 4;
44
+ ctx.rect(
45
+ -patternSize * 0.03,
46
+ -0.01 * patternSize,
47
+ patternSize + patternSize / 2,
48
+ 0.04 * patternSize
49
+ );
50
+ ctx.fill();
51
+ ctx.restore();
52
+
44
53
  // #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
-
54
+ ctx.save();
55
+ ctx.beginPath();
56
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.0, 0.0);
57
+ ctx.globalAlpha = 0.3;
58
+ ctx.fillStyle = color;
59
+ ctx.lineWidth = 0.075 * patternSize;
60
+ ctx.miterLimit = 4;
61
+ ctx.rect(
62
+ 0.29 * patternSize,
63
+ 0.33 * patternSize,
64
+ patternSize + patternSize / 2,
65
+ 0.04 * patternSize
66
+ );
67
+ ctx.fill();
68
+ ctx.restore();
69
+
56
70
  // #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
-
71
+ ctx.save();
72
+ ctx.beginPath();
73
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.0, 0.0);
74
+ ctx.globalAlpha = 0.7;
75
+ ctx.fillStyle = color;
76
+ ctx.lineWidth = 0.075 * patternSize;
77
+ ctx.miterLimit = 4;
78
+ ctx.rect(
79
+ 0.63 * patternSize,
80
+ 0.69 * patternSize,
81
+ patternSize + patternSize / 2,
82
+ 0.04 * patternSize
83
+ );
84
+ ctx.fill();
85
+ ctx.restore();
86
+
68
87
  // #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
-
88
+ ctx.save();
89
+ ctx.beginPath();
90
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.0, 0.0);
91
+ ctx.globalAlpha = 0.3;
92
+ ctx.fillStyle = color;
93
+ ctx.lineWidth = 0.075 * patternSize;
94
+ ctx.miterLimit = 4;
95
+ ctx.rect(
96
+ 0.33 * patternSize,
97
+ -0.37 * patternSize,
98
+ patternSize + patternSize / 2,
99
+ 0.04 * patternSize
100
+ );
101
+ ctx.fill();
102
+ ctx.restore();
103
+
80
104
  // #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();
91
- }
105
+ ctx.save();
106
+ ctx.beginPath();
107
+ ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.0, 0.0);
108
+ ctx.globalAlpha = 0.7;
109
+ ctx.fillStyle = color;
110
+ ctx.lineWidth = 0.075 * patternSize;
111
+ ctx.miterLimit = 4;
112
+ ctx.rect(
113
+ 0.71 * patternSize,
114
+ -0.72 * patternSize,
115
+ patternSize + patternSize / 2,
116
+ 0.04 * patternSize
117
+ );
118
+ ctx.fill();
119
+ ctx.restore();
120
+ }
121
+
122
+ // Hover Style
123
+ if (hover) {
124
+ ctx.beginPath();
125
+ ctx.globalAlpha = 0.5;
126
+ ctx.fillStyle = '#FFFFFF';
127
+ ctx.lineWidth = 0.006 * patternSize;
128
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
129
+ ctx.fill();
130
+ }
131
+
132
+ // Create our primary canvas and fill it with the pattern
133
+ const canvas: HTMLCanvasElement = document.createElement('canvas');
134
+ const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
135
+ if (!context) {
136
+ return new CanvasPattern();
137
+ }
138
+ const pattern: CanvasPattern | null = context.createPattern(
139
+ patternCanvas,
140
+ 'repeat'
141
+ );
142
+ if (!pattern) {
143
+ return new CanvasPattern();
144
+ }
92
145
 
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
-
103
- // Create our primary canvas and fill it with the pattern
104
- const canvas: HTMLCanvasElement = document.createElement('canvas');
105
- const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
106
- if (!context) {
107
- return new CanvasPattern;
108
- }
109
- const pattern: CanvasPattern | null = context.createPattern(patternCanvas, 'repeat');
110
- if (!pattern) {
111
- return new CanvasPattern;
112
- }
113
-
114
- return pattern;
115
- }
146
+ return pattern;
147
+ }
package/src/services/patterns/patternSquares.ts CHANGED
@@ -1,88 +1,94 @@
1
- export default function PatternSquares(hover: boolean, color: string = '#A274FF', disableAccessibility: boolean = false): CanvasPattern {
1
+ export default function PatternSquares(
2
+ hover: boolean,
3
+ color: string = '#A274FF',
4
+ disableAccessibility: boolean = false
5
+ ): CanvasPattern {
6
+ const patternCanvas: HTMLCanvasElement = document.createElement('canvas');
7
+ const ctx: CanvasRenderingContext2D | null = patternCanvas.getContext('2d');
8
+ if (!ctx) {
9
+ return new CanvasPattern();
10
+ }
2
11
 
3
- const patternCanvas: HTMLCanvasElement = document.createElement('canvas');
4
- const ctx: CanvasRenderingContext2D | null = patternCanvas.getContext('2d');
5
- if (!ctx) {
6
- return new CanvasPattern;
7
- }
12
+ const patternSize = 50;
13
+ const squareSize = patternSize * 0.15;
8
14
 
9
- const patternSize = 50;
10
- const squareSize = patternSize * 0.15;
15
+ patternCanvas.width = patternSize;
16
+ patternCanvas.height = patternSize;
17
+
18
+ if (disableAccessibility === true) {
19
+ ctx.beginPath();
20
+ ctx.fillStyle = color;
21
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
22
+ ctx.fill();
23
+ } else {
24
+ // background
25
+ ctx.beginPath();
26
+ ctx.fillStyle = '#FFFFFF';
27
+ ctx.lineWidth = 0.005 * patternSize;
28
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
29
+ ctx.fill();
30
+ ctx.beginPath();
31
+ ctx.globalAlpha = 0.1;
32
+ ctx.fillStyle = color;
33
+ ctx.lineWidth = 0.005 * patternSize;
34
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
35
+ ctx.fill();
11
36
 
12
- patternCanvas.width = patternSize;
13
- patternCanvas.height = patternSize;
14
-
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
22
- ctx.beginPath();
23
- ctx.fillStyle = '#FFFFFF';
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;
31
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
32
- ctx.fill();
33
-
34
37
  // #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
-
38
+ ctx.beginPath();
39
+ ctx.globalAlpha = 0.7;
40
+ ctx.fillStyle = color;
41
+ ctx.lineWidth = 0.006 * patternSize;
42
+ ctx.rect(0.5 * patternSize, 0.0, squareSize, squareSize);
43
+ ctx.fill();
44
+
42
45
  // #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
-
46
+ ctx.beginPath();
47
+ ctx.globalAlpha = 0.7;
48
+ ctx.fillStyle = color;
49
+ ctx.lineWidth = 0.006 * patternSize;
50
+ ctx.rect(0.75 * patternSize, patternSize / 2, squareSize, squareSize);
51
+ ctx.fill();
52
+
50
53
  // #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
-
54
+ ctx.beginPath();
55
+ ctx.globalAlpha = 0.3;
56
+ ctx.fillStyle = color;
57
+ ctx.lineWidth = 0.006 * patternSize;
58
+ ctx.rect(0.0, 0.0, squareSize, squareSize);
59
+ ctx.fill();
60
+
58
61
  // #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();
65
- }
62
+ ctx.beginPath();
63
+ ctx.globalAlpha = 0.3;
64
+ ctx.fillStyle = color;
65
+ ctx.lineWidth = 0.006 * patternSize;
66
+ ctx.rect(0.25 * patternSize, patternSize / 2, squareSize, squareSize);
67
+ ctx.fill();
68
+ }
69
+
70
+ // Hover Style
71
+ if (hover) {
72
+ ctx.beginPath();
73
+ ctx.globalAlpha = 0.5;
74
+ ctx.fillStyle = '#FFFFFF';
75
+ ctx.lineWidth = 0.006 * patternSize;
76
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
77
+ ctx.fill();
78
+ }
79
+ // Create our primary canvas and fill it with the pattern
80
+ const canvas: HTMLCanvasElement = document.createElement('canvas');
81
+ const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
82
+ if (!context) {
83
+ return new CanvasPattern();
84
+ }
85
+ const pattern: CanvasPattern | null = context.createPattern(
86
+ patternCanvas,
87
+ 'repeat'
88
+ );
89
+ if (!pattern) {
90
+ return new CanvasPattern();
91
+ }
66
92
 
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
- }
76
- // Create our primary canvas and fill it with the pattern
77
- const canvas: HTMLCanvasElement = document.createElement('canvas');
78
- const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
79
- if (!context) {
80
- return new CanvasPattern;
81
- }
82
- const pattern: CanvasPattern | null = context.createPattern(patternCanvas, 'repeat');
83
- if (!pattern) {
84
- return new CanvasPattern;
85
- }
86
-
87
- return pattern;
88
- }
93
+ return pattern;
94
+ }
package/src/services/patterns/patternVerticalLines.ts CHANGED
@@ -1,74 +1,81 @@
1
- export default function PatternVerticalLines(hover: boolean, color: string = '#8C1551', disableAccessibility: boolean = false): CanvasPattern {
2
- const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
3
- const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
4
- if (!ctx) {
5
- return new CanvasPattern;
6
- }
1
+ export default function PatternVerticalLines(
2
+ hover: boolean,
3
+ color: string = '#8C1551',
4
+ disableAccessibility: boolean = false
5
+ ): CanvasPattern {
6
+ const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
7
+ const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
8
+ if (!ctx) {
9
+ return new CanvasPattern();
10
+ }
7
11
 
8
- const patternSize = 50;
9
- const lineSize = patternSize * 0.15;
12
+ const patternSize = 50;
13
+ const lineSize = patternSize * 0.15;
14
+
15
+ canvasPattern.width = patternSize;
16
+ canvasPattern.height = patternSize;
17
+
18
+ if (disableAccessibility === true) {
19
+ ctx.beginPath();
20
+ ctx.fillStyle = color;
21
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
22
+ ctx.fill();
23
+ } else {
24
+ // background
25
+ ctx.beginPath();
26
+ ctx.fillStyle = '#FFFFFF';
27
+ ctx.lineWidth = 0.005 * patternSize;
28
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
29
+ ctx.fill();
30
+ ctx.beginPath();
31
+ ctx.globalAlpha = 0.1;
32
+ ctx.fillStyle = color;
33
+ ctx.lineWidth = 0.005 * patternSize;
34
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
35
+ ctx.fill();
10
36
 
11
- canvasPattern.width = patternSize;
12
- canvasPattern.height = patternSize;
13
-
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
21
- ctx.beginPath();
22
- ctx.fillStyle = '#FFFFFF';
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;
30
- ctx.rect(0.000000, 0.000000, patternSize, patternSize);
31
- ctx.fill();
32
-
33
37
  // #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
-
38
+ ctx.beginPath();
39
+ ctx.globalAlpha = 0.3;
40
+ ctx.fillStyle = color;
41
+ ctx.lineWidth = 0.005 * patternSize;
42
+ ctx.rect(0.0, 0.0, lineSize, patternSize);
43
+ ctx.fill();
44
+
41
45
  // #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();
48
- }
46
+ ctx.beginPath();
47
+ ctx.globalAlpha = 0.7;
48
+ ctx.fillStyle = color;
49
+ ctx.lineWidth = 0.005 * patternSize;
50
+ ctx.rect(patternSize / 2, 0.0, lineSize, patternSize);
51
+ ctx.fill();
52
+ }
53
+
54
+ // Hover Style
55
+ if (hover) {
56
+ ctx.beginPath();
57
+ ctx.globalAlpha = 0.5;
58
+ ctx.fillStyle = '#FFFFFF';
59
+ ctx.lineWidth = 0.006 * patternSize;
60
+ ctx.rect(0.0, 0.0, patternSize, patternSize);
61
+ ctx.fill();
62
+ }
63
+
64
+ const canvas: HTMLCanvasElement = document.createElement('canvas');
65
+ const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
66
+ if (!context) {
67
+ return new CanvasPattern();
68
+ }
69
+ const pattern: CanvasPattern | null = context.createPattern(
70
+ canvasPattern,
71
+ 'repeat'
72
+ );
73
+ if (!pattern) {
74
+ return new CanvasPattern();
75
+ }
76
+
77
+ context.fillStyle = pattern;
78
+ context.fillRect(0, 0, patternSize, patternSize);
49
79
 
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
- }
59
-
60
- const canvas: HTMLCanvasElement = document.createElement('canvas');
61
- const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
62
- if (!context) {
63
- return new CanvasPattern;
64
- }
65
- const pattern: CanvasPattern | null = context.createPattern(canvasPattern, 'repeat');
66
- if (!pattern) {
67
- return new CanvasPattern;
68
- }
69
-
70
- context.fillStyle = pattern;
71
- context.fillRect(0, 0, patternSize, patternSize);
72
-
73
- return pattern;
74
- }
80
+ return pattern;
81
+ }