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