8.1 KB265 lines
Blame
1import { imgSnapshotTest } from '../../helpers/util.ts';
2
3describe('Quadrant Chart', () => {
4 it('should render if only chart type is provided', () => {
5 imgSnapshotTest(
6 `
7 quadrantChart
8 `,
9 {}
10 );
11 });
12 it('should render a complete quadrant chart', () => {
13 imgSnapshotTest(
14 `
15 quadrantChart
16 title Reach and engagement of campaigns
17 x-axis Low Reach --> High Reach
18 y-axis Low Engagement --> High Engagement
19 quadrant-1 We should expand
20 quadrant-2 Need to promote
21 quadrant-3 Re-evaluate
22 quadrant-4 May be improved
23 Campaign A: [0.3, 0.6]
24 Campaign B: [0.45, 0.23]
25 Campaign C: [0.57, 0.69]
26 Campaign D: [0.78, 0.34]
27 Campaign E: [0.40, 0.34]
28 Campaign F: [0.35, 0.78]
29 `,
30 {}
31 );
32 });
33 it('should render without points', () => {
34 imgSnapshotTest(
35 `
36 quadrantChart
37 title Reach and engagement of campaigns
38 x-axis Low Reach --> High Reach
39 y-axis Low Engagement --> High Engagement
40 quadrant-1 We should expand
41 quadrant-2 Need to promote
42 quadrant-3 Re-evaluate
43 quadrant-4 May be improved
44 `,
45 {}
46 );
47 });
48 it('should able to render y-axis on right side', () => {
49 imgSnapshotTest(
50 `
51 %%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
52 quadrantChart
53 title Reach and engagement of campaigns
54 x-axis Low Reach --> High Reach
55 y-axis Low Engagement --> High Engagement
56 quadrant-1 We should expand
57 quadrant-2 Need to promote
58 quadrant-3 Re-evaluate
59 quadrant-4 May be improved
60 `,
61 {}
62 );
63 });
64 it('should able to render x-axis on bottom', () => {
65 imgSnapshotTest(
66 `
67 %%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
68 quadrantChart
69 title Reach and engagement of campaigns
70 x-axis Low Reach --> High Reach
71 y-axis Low Engagement --> High Engagement
72 quadrant-1 We should expand
73 quadrant-2 Need to promote
74 quadrant-3 Re-evaluate
75 quadrant-4 May be improved
76 `,
77 {}
78 );
79 });
80 it('should able to render x-axis on bottom and y-axis on right', () => {
81 imgSnapshotTest(
82 `
83 %%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%
84 quadrantChart
85 title Reach and engagement of campaigns
86 x-axis Low Reach --> High Reach
87 y-axis Low Engagement --> High Engagement
88 quadrant-1 We should expand
89 quadrant-2 Need to promote
90 quadrant-3 Re-evaluate
91 quadrant-4 May be improved
92 `,
93 {}
94 );
95 });
96 it('should render without title', () => {
97 imgSnapshotTest(
98 `
99 quadrantChart
100 x-axis Low Reach --> High Reach
101 y-axis Low Engagement --> High Engagement
102 quadrant-1 We should expand
103 quadrant-2 Need to promote
104 quadrant-3 Re-evaluate
105 quadrant-4 May be improved
106 `,
107 {}
108 );
109 });
110 it('should use all the config', () => {
111 imgSnapshotTest(
112 `
113 %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600, "titlePadding": 20, "titleFontSize": 10, "quadrantPadding": 20, "quadrantTextTopPadding": 40, "quadrantLabelFontSize": 20, "quadrantInternalBorderStrokeWidth": 3, "quadrantExternalBorderStrokeWidth": 5, "xAxisLabelPadding": 20, "xAxisLabelFontSize": 20, "yAxisLabelPadding": 20, "yAxisLabelFontSize": 20, "pointTextPadding": 20, "pointLabelFontSize": 20, "pointRadius": 10 }}}%%
114 quadrantChart
115 title Reach and engagement of campaigns
116 x-axis Low Reach --> High Reach
117 y-axis Low Engagement --> High Engagement
118 quadrant-1 We should expand
119 quadrant-2 Need to promote
120 quadrant-3 Re-evaluate
121 quadrant-4 May be improved
122 Campaign A: [0.3, 0.6]
123 Campaign B: [0.45, 0.23]
124 Campaign C: [0.57, 0.69]
125 Campaign D: [0.78, 0.34]
126 Campaign E: [0.40, 0.34]
127 Campaign F: [0.35, 0.78]
128 `,
129 {}
130 );
131 });
132 it('should use all the theme variable', () => {
133 imgSnapshotTest(
134 `
135 %%{init: {"themeVariables": {"quadrant1Fill": "#b4dcff","quadrant2Fill": "#fef0ff", "quadrant3Fill": "#fffaf0", "quadrant4Fill": "#f0fff2", "quadrant1TextFill": "#ff0000", "quadrant2TextFill": "#2d00df", "quadrant3TextFill": "#00ffda", "quadrant4TextFill": "#e68300", "quadrantPointFill": "#0149ff", "quadrantPointTextFill": "#dc00ff", "quadrantXAxisTextFill": "#ffb500", "quadrantYAxisTextFill": "#fae604", "quadrantInternalBorderStrokeFill": "#3636f2", "quadrantExternalBorderStrokeFill": "#ff1010", "quadrantTitleFill": "#00ea19"} }}%%
136 quadrantChart
137 title Reach and engagement of campaigns
138 x-axis Low Reach --> High Reach
139 y-axis Low Engagement --> High Engagement
140 quadrant-1 We should expand
141 quadrant-2 Need to promote
142 quadrant-3 Re-evaluate
143 quadrant-4 May be improved
144 Campaign A: [0.3, 0.6]
145 Campaign B: [0.45, 0.23]
146 Campaign C: [0.57, 0.69]
147 Campaign D: [0.78, 0.34]
148 Campaign E: [0.40, 0.34]
149 Campaign F: [0.35, 0.78]
150 `,
151 {}
152 );
153 });
154 it('should render x-axis labels in the center, if x-axis has two labels', () => {
155 imgSnapshotTest(
156 `
157 quadrantChart
158 title Reach and engagement of campaigns
159 x-axis Low Reach --> High Reach
160 y-axis Low Engagement
161 quadrant-1 We should expand
162 quadrant-2 Need to promote
163 quadrant-3 Re-evaluate
164 quadrant-4 May be improved
165 Campaign A: [0.3, 0.6]
166 Campaign B: [0.45, 0.23]
167 Campaign C: [0.57, 0.69]
168 Campaign D: [0.78, 0.34]
169 Campaign E: [0.40, 0.34]
170 Campaign F: [0.35, 0.78]
171 `,
172 {}
173 );
174 });
175 it('should render y-axis labels in the center, if y-axis has two labels', () => {
176 imgSnapshotTest(
177 `
178 quadrantChart
179 title Reach and engagement of campaigns
180 x-axis Low Reach
181 y-axis Low Engagement --> High Engagement
182 quadrant-1 We should expand
183 quadrant-2 Need to promote
184 quadrant-3 Re-evaluate
185 quadrant-4 May be improved
186 Campaign A: [0.3, 0.6]
187 Campaign B: [0.45, 0.23]
188 Campaign C: [0.57, 0.69]
189 Campaign D: [0.78, 0.34]
190 Campaign E: [0.40, 0.34]
191 Campaign F: [0.35, 0.78]
192 `,
193 {}
194 );
195 });
196 it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
197 imgSnapshotTest(
198 `
199 quadrantChart
200 title Reach and engagement of campaigns
201 x-axis Reach -->
202 y-axis Engagement -->
203 quadrant-1 We should expand
204 quadrant-2 Need to promote
205 quadrant-3 Re-evaluate
206 quadrant-4 May be improved
207 Campaign A: [0.3, 0.6]
208 Campaign B: [0.45, 0.23]
209 Campaign C: [0.57, 0.69]
210 Campaign D: [0.78, 0.34]
211 Campaign E: [0.40, 0.34]
212 Campaign F: [0.35, 0.78]
213 `,
214 {}
215 );
216 });
217
218 it('it should render data points with styles', () => {
219 imgSnapshotTest(
220 `
221 quadrantChart
222 title Reach and engagement of campaigns
223 x-axis Reach -->
224 y-axis Engagement -->
225 quadrant-1 We should expand
226 quadrant-2 Need to promote
227 quadrant-3 Re-evaluate
228 quadrant-4 May be improved
229 Campaign A: [0.3, 0.6] radius: 20
230 Campaign B: [0.45, 0.23] color: #ff0000
231 Campaign C: [0.57, 0.69] stroke-color: #ff00ff
232 Campaign D: [0.78, 0.34] stroke-width: 3px
233 Campaign E: [0.40, 0.34] radius: 20, color: #ff0000 , stroke-color : #ff00ff, stroke-width : 3px
234 Campaign F: [0.35, 0.78] stroke-width: 3px , color: #ff0000, radius: 20, stroke-color: #ff00ff
235 Campaign G: [0.22, 0.22] stroke-width: 3px , color: #309708 , radius : 20 , stroke-color: #5060ff
236 Campaign H: [0.22, 0.44]
237 `,
238 {}
239 );
240 });
241
242 it('it should render data points with styles + classes', () => {
243 imgSnapshotTest(
244 `
245 quadrantChart
246 title Reach and engagement of campaigns
247 x-axis Reach -->
248 y-axis Engagement -->
249 quadrant-1 We should expand
250 quadrant-2 Need to promote
251 quadrant-3 Re-evaluate
252 quadrant-4 May be improved
253 Campaign A:::class1: [0.3, 0.6] radius: 20
254 Campaign B: [0.45, 0.23] color: #ff0000
255 Campaign C: [0.57, 0.69] stroke-color: #ff00ff
256 Campaign D:::class2: [0.78, 0.34] stroke-width: 3px
257 Campaign E:::class2: [0.40, 0.34] radius: 20, color: #ff0000, stroke-color: #ff00ff, stroke-width: 3px
258 Campaign F:::class1: [0.35, 0.78]
259 classDef class1 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
260 classDef class2 color: #f00fff, radius : 10
261 `
262 );
263 });
264});
265