Merge pull request #5173 from ilyes-ced/feature/add-point-styling-qua…

…drant-to-charts

feat: Add point styling for quadrant chart

cypress/integration/rendering/quadrantChart.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Quadrant Chart', () => {
  it('should render if only chart type is provided', () => {
@@ -226,4 +226,52 @@ describe('Quadrant Chart', () => {
  );
  cy.get('svg');
  });
+
+ it('it should render data points with styles', () => {
+ imgSnapshotTest(
+ `
+ quadrantChart
+ title Reach and engagement of campaigns
+ x-axis Reach -->
+ y-axis 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] radius: 20
+ Campaign B: [0.45, 0.23] color: #ff0000 
+ Campaign C: [0.57, 0.69] stroke-color: #ff00ff 
+ Campaign D: [0.78, 0.34] stroke-width: 3px 
+ Campaign E: [0.40, 0.34] radius: 20, color: #ff0000 , stroke-color : #ff00ff, stroke-width : 3px 
+ Campaign F: [0.35, 0.78] stroke-width: 3px , color: #ff0000, radius: 20, stroke-color: #ff00ff
+ Campaign G: [0.22, 0.22] stroke-width: 3px , color: #309708 , radius : 20 , stroke-color: #5060ff
+ Campaign H: [0.22, 0.44]
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('it should render data points with styles + classes', () => {
+ imgSnapshotTest(
+ `
+ quadrantChart
+ title Reach and engagement of campaigns
+ x-axis Reach -->
+ y-axis Engagement -->
+ quadrant-1 We should expand
+ quadrant-2 Need to promote
+ quadrant-3 Re-evaluate
+ quadrant-4 May be improved
+ Campaign A:::class1: [0.3, 0.6] radius: 20
+ Campaign B: [0.45, 0.23] color: #ff0000
+ Campaign C: [0.57, 0.69] stroke-color: #ff00ff
+ Campaign D:::class2: [0.78, 0.34] stroke-width: 3px
+ Campaign E:::class2: [0.40, 0.34] radius: 20, color: #ff0000, stroke-color: #ff00ff, stroke-width: 3px
+ Campaign F:::class1: [0.35, 0.78]
+ classDef class1 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
+ classDef class2 color: #f00fff, radius : 10
+ `
+ );
+ });
 });

docs/syntax/quadrantChart.md

@@ -168,3 +168,86 @@ quadrantChart
  quadrant-3 Delegate
  quadrant-4 Delete
 ```
+
+### Point styling
+
+Points can either be styled directly or with defined shared classes
+
+1. Direct styling
+
+```md
+Point A: [0.9, 0.0] radius: 12
+Point B: [0.8, 0.1] color: #ff3300, radius: 10
+Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0 
+Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
+```
+
+2. Classes styling
+
+```md
+Point A:::class1: [0.9, 0.0]
+Point B:::class2: [0.8, 0.1]
+Point C:::class3: [0.7, 0.2]
+Point D:::class3: [0.7, 0.2]
+classDef class1 color: #109060
+classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
+classDef class3 color: #f00fff, radius : 10
+```
+
+#### Available styles:
+
+| Parameter | Description |
+| ------------ | ---------------------------------------------------------------------- |
+| color | Fill color of the point |
+| radius | Radius of the point |
+| stroke-width | Border width of the point |
+| stroke-color | Border color of the point (useless when stroke-width is not specified) |
+
+> **Note**
+> Order of preference:
+>
+> 1. Direct styles
+> 2. Class styles
+> 3. Theme styles
+
+## Example on styling
+
+```mermaid-example
+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.9, 0.0] radius: 12
+ Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
+ Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
+ Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
+ Campaign E:::class2: [0.5, 0.4]
+ Campaign F:::class3: [0.4, 0.5] color: #0000ff
+ classDef class1 color: #109060
+ classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
+ classDef class3 color: #f00fff, radius : 10
+```
+
+```mermaid
+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.9, 0.0] radius: 12
+ Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
+ Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
+ Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
+ Campaign E:::class2: [0.5, 0.4]
+ Campaign F:::class3: [0.4, 0.5] color: #0000ff
+ classDef class1 color: #109060
+ classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
+ classDef class3 color: #f00fff, radius : 10
+```

packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison

@@ -11,6 +11,7 @@
 %x point_start
 %x point_x
 %x point_y
+%x class_name
 %%
 \%\%(?!\{)[^\n]* /* skip comments */
 [^\}]\%\%[^\n]* /* skip comments */
@@ -35,6 +36,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
 " "*"quadrant-2"" "* return 'QUADRANT_2';
 " "*"quadrant-3"" "* return 'QUADRANT_3';
 " "*"quadrant-4"" "* return 'QUADRANT_4';
+"classDef" return 'CLASSDEF';
 
 ["][`] { this.begin("md_string");}
 <md_string>[^`"]+ { return "MD_STR";}
@@ -43,6 +45,9 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
 <string>["] this.popState();
 <string>[^"]* return "STR";
 
+\:\:\: {this.begin('class_name')}
+<class_name>^\w+ {this.popState(); return 'class_name';}
+
 \s*\:\s*\[\s* {this.begin("point_start"); return 'point_start';}
 <point_start>(1)|(0(.\d+)?) {this.begin('point_x'); return 'point_x';}
 <point_start>\s*\]" "* {this.popState();}
@@ -75,6 +80,31 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
 
 %% /* language grammar */
 
+idStringToken : ALPHA | NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT | UNICODE_TEXT;
+styleComponent: ALPHA | NUM | NODE_STRING | COLON | UNIT | SPACE | BRKT | STYLE | PCT | MINUS ;
+
+idString
+ :idStringToken
+ {$$=$idStringToken}
+ | idString idStringToken
+ {$$=$idString+''+$idStringToken}
+ ;
+
+style: styleComponent
+ |style styleComponent
+ {$$ = $style + $styleComponent;}
+ ;
+
+stylesOpt: style
+ {$$ = [$style.trim()]}
+ | stylesOpt COMMA style
+ {$stylesOpt.push($style.trim());$$ = $stylesOpt;}
+ ;
+
+classDefStatement
+ : CLASSDEF SPACE idString SPACE stylesOpt {$$ = $CLASSDEF;yy.addClass($idString,$stylesOpt);}
+ ;
+
 start
  : eol start
  | SPACE start
@@ -92,6 +122,7 @@ line
 
 statement
  :
+ | classDefStatement {$$=[];}
  | SPACE statement
  | axisDetails
  | quadrantDetails
@@ -103,7 +134,10 @@ statement
  ;
 
 points
- : text point_start point_x point_y {yy.addPoint($1, $3, $4);}
+ : text point_start point_x point_y {yy.addPoint($1, "", $3, $4, []);}
+ | text class_name point_start point_x point_y {yy.addPoint($1, $2, $4, $5, []);}
+ | text point_start point_x point_y stylesOpt {yy.addPoint($1, "", $3, $4, $stylesOpt);}
+ | text class_name point_start point_x point_y stylesOpt {yy.addPoint($1, $2, $4, $5, $stylesOpt);}
  ;
 
 axisDetails