Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4383 from amsubhash/feature/4282_add_quadrant_chart
Added support for quadrant chart
- Loading branch information
Showing
24 changed files
with
2,341 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,163 @@ | ||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; | ||
|
||
describe('Quadrant Chart', () => { | ||
it('should render if only chart type is provided', () => { | ||
imgSnapshotTest( | ||
` | ||
quadrantChart | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
it('should render a complete quadrant chart', () => { | ||
imgSnapshotTest( | ||
` | ||
quadrantChart | ||
title Reach and engagement of campaigns | ||
x-axis Low Reach --> High Reach | ||
y-axis Low Engagement --> High Engagement | ||
quadrant-1 We should expand | ||
quadrant-2 Need to promote | ||
quadrant-3 Re-evaluate | ||
quadrant-4 May be improved | ||
Campaign A: [0.3, 0.6] | ||
Campaign B: [0.45, 0.23] | ||
Campaign C: [0.57, 0.69] | ||
Campaign D: [0.78, 0.34] | ||
Campaign E: [0.40, 0.34] | ||
Campaign F: [0.35, 0.78] | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
it('should render without points', () => { | ||
imgSnapshotTest( | ||
` | ||
quadrantChart | ||
title Reach and engagement of campaigns | ||
x-axis Low Reach --> High Reach | ||
y-axis Low Engagement --> High Engagement | ||
quadrant-1 We should expand | ||
quadrant-2 Need to promote | ||
quadrant-3 Re-evaluate | ||
quadrant-4 May be improved | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
it('should able to render y-axix on right side', () => { | ||
imgSnapshotTest( | ||
` | ||
%%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%% | ||
quadrantChart | ||
title Reach and engagement of campaigns | ||
x-axis Low Reach --> High Reach | ||
y-axis Low Engagement --> High Engagement | ||
quadrant-1 We should expand | ||
quadrant-2 Need to promote | ||
quadrant-3 Re-evaluate | ||
quadrant-4 May be improved | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
it('should able to render x-axix on bottom', () => { | ||
imgSnapshotTest( | ||
` | ||
%%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%% | ||
quadrantChart | ||
title Reach and engagement of campaigns | ||
x-axis Low Reach --> High Reach | ||
y-axis Low Engagement --> High Engagement | ||
quadrant-1 We should expand | ||
quadrant-2 Need to promote | ||
quadrant-3 Re-evaluate | ||
quadrant-4 May be improved | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
it('should able to render x-axix on bottom and y-axis on right', () => { | ||
imgSnapshotTest( | ||
` | ||
%%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%% | ||
quadrantChart | ||
title Reach and engagement of campaigns | ||
x-axis Low Reach --> High Reach | ||
y-axis Low Engagement --> High Engagement | ||
quadrant-1 We should expand | ||
quadrant-2 Need to promote | ||
quadrant-3 Re-evaluate | ||
quadrant-4 May be improved | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
it('should render without title', () => { | ||
imgSnapshotTest( | ||
` | ||
quadrantChart | ||
x-axis Low Reach --> High Reach | ||
y-axis Low Engagement --> High Engagement | ||
quadrant-1 We should expand | ||
quadrant-2 Need to promote | ||
quadrant-3 Re-evaluate | ||
quadrant-4 May be improved | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
it('should use all the config', () => { | ||
imgSnapshotTest( | ||
` | ||
%%{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 }}}%% | ||
quadrantChart | ||
title Reach and engagement of campaigns | ||
x-axis Low Reach --> High Reach | ||
y-axis Low Engagement --> High Engagement | ||
quadrant-1 We should expand | ||
quadrant-2 Need to promote | ||
quadrant-3 Re-evaluate | ||
quadrant-4 May be improved | ||
Campaign A: [0.3, 0.6] | ||
Campaign B: [0.45, 0.23] | ||
Campaign C: [0.57, 0.69] | ||
Campaign D: [0.78, 0.34] | ||
Campaign E: [0.40, 0.34] | ||
Campaign F: [0.35, 0.78] | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
it('should use all the theme variable', () => { | ||
imgSnapshotTest( | ||
` | ||
%%{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"} }}%% | ||
quadrantChart | ||
title Reach and engagement of campaigns | ||
x-axis Low Reach --> High Reach | ||
y-axis Low Engagement --> High Engagement | ||
quadrant-1 We should expand | ||
quadrant-2 Need to promote | ||
quadrant-3 Re-evaluate | ||
quadrant-4 May be improved | ||
Campaign A: [0.3, 0.6] | ||
Campaign B: [0.45, 0.23] | ||
Campaign C: [0.57, 0.69] | ||
Campaign D: [0.78, 0.34] | ||
Campaign E: [0.40, 0.34] | ||
Campaign F: [0.35, 0.78] | ||
`, | ||
{} | ||
); | ||
cy.get('svg'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
<title>Mermaid Quick Test Page</title> | ||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> | ||
<style> | ||
div.mermaid { | ||
/* font-family: 'trebuchet ms', verdana, arial; */ | ||
font-family: 'Courier New', Courier, monospace !important; | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<h1>Quadrant chart demos</h1> | ||
<pre class="mermaid"> | ||
%%{init: {"quadrantChart": {"quadrantPadding": 10}, "theme": "forest", "themeVariables": {"quadrant1TextFill": "blue"}} }%% | ||
quadrantChart | ||
x-axis Urgent --> Not Urgent | ||
y-axis Not Important --> important | ||
quadrant-1 Plan | ||
quadrant-2 Do | ||
quadrant-3 Deligate | ||
quadrant-4 Delete | ||
</pre> | ||
|
||
<pre class="mermaid"> | ||
%%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%% | ||
quadrantChart | ||
title Analytics and Business Intelligence Platforms | ||
x-axis "Completeness of Vision ❤" --> | ||
y-axis Ability to Execute | ||
quadrant-1 Leaders | ||
quadrant-2 Challengers | ||
quadrant-3 Niche | ||
quadrant-4 Visionaries | ||
Microsoft: [0.75, 0.75] | ||
Salesforce: [0.55, 0.60] | ||
IBM: [0.51, 0.40] | ||
Incorta: [0.20, 0.30] | ||
</pre> | ||
<hr /> | ||
|
||
<script type="module"> | ||
import mermaid from './mermaid.esm.mjs'; | ||
mermaid.initialize({ | ||
theme: 'default', | ||
logLevel: 3, | ||
securityLevel: 'loose', | ||
}); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.