feat: Add point styling for quadrant chart

cypress/integration/rendering/quadrantChart.spec.js

@@ -226,4 +226,54 @@ 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
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
 });

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

@@ -11,6 +11,9 @@
 %x point_start
 %x point_x
 %x point_y
+%x styles_string
+%x class_styles
+%x class_name
 %%
 \%\%(?!\{)[^\n]*                         /* skip comments */
 [^\}]\%\%[^\n]*                          /* skip comments */
@@ -43,11 +46,17 @@ 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();}
+<point_start>\s*\]" "*                       {this.popState(); this.begin('styles_string')}
+<styles_string>.*                        {this.popState(); return 'styles_string';}
 <point_x>\s*\,\s*                        {this.popState(); this.begin('point_y');}
 <point_y>(1)|(0(.\d+)?)                  {this.popState(); return 'point_y';}
+\s*classDef\s*                           {this.begin('class_styles')}
+<class_styles>.*                         {this.popState(); yy.addClass(this.match);}
 
 " "*"quadrantChart"" "*		                   return 'QUADRANT';
 
@@ -103,7 +112,8 @@ statement
 	;
 
 points
-  : text point_start point_x point_y {yy.addPoint($1, $3, $4);}
+  : text point_start point_x point_y styles_string {yy.addPoint($1, "", $3, $4, $5);}
+  | text class_name point_start point_x point_y styles_string {yy.addPoint($1, $2, $4, $5, $6);}
   ;
 
 axisDetails

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

@@ -266,4 +266,180 @@ describe('Testing quadrantChart jison file', () => {
     expect(mockDB.addPoint).toHaveBeenCalledWith({ text: 'IBM', type: 'text' }, '0.51', '0.40');
     expect(mockDB.addPoint).toHaveBeenCalledWith({ text: 'Incorta', type: 'text' }, '0.20', '0.30');
   });
+
+  it('should be able to parse the whole chart with point styling with all params or some params', () => {
+    const str = `quadrantChart
+      title Analytics and Business Intelligence Platforms
+      x-axis "Completeness of Vision ❤" --> "x-axis-2"
+      y-axis Ability to Execute --> "y-axis-2"
+      quadrant-1 Leaders
+      quadrant-2 Challengers
+      quadrant-3 Niche
+      quadrant-4 Visionaries
+      Microsoft: [0.75, 0.75] radius: 10
+      Salesforce: [0.55, 0.60] radius: 10, color: #ff0000
+      IBM: [0.51, 0.40] radius: 10, color: #ff0000, stroke_color: #ff00ff
+      Incorta: [0.20, 0.30] radius: 10 ,color: #ff0000 ,stroke_color: #ff00ff ,stroke_width: 10px`;
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(mockDB.setXAxisLeftText).toHaveBeenCalledWith({
+      text: 'Completeness of Vision ❤',
+      type: 'text',
+    });
+    expect(mockDB.setXAxisRightText).toHaveBeenCalledWith({ text: 'x-axis-2', type: 'text' });
+    expect(mockDB.setYAxisTopText).toHaveBeenCalledWith({ text: 'y-axis-2', type: 'text' });
+    expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({
+      text: 'Ability to Execute',
+      type: 'text',
+    });
+    expect(mockDB.setQuadrant1Text).toHaveBeenCalledWith({ text: 'Leaders', type: 'text' });
+    expect(mockDB.setQuadrant2Text).toHaveBeenCalledWith({ text: 'Challengers', type: 'text' });
+    expect(mockDB.setQuadrant3Text).toHaveBeenCalledWith({ text: 'Niche', type: 'text' });
+    expect(mockDB.setQuadrant4Text).toHaveBeenCalledWith({ text: 'Visionaries', type: 'text' });
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Microsoft', type: 'text' },
+      '',
+      '0.75',
+      '0.75',
+      'radius: 10'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Salesforce', type: 'text' },
+      '',
+      '0.55',
+      '0.60',
+      'radius: 10, color: #ff0000'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'IBM', type: 'text' },
+      '',
+      '0.51',
+      '0.40',
+      'radius: 10, color: #ff0000, stroke_color: #ff00ff'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Incorta', type: 'text' },
+      '',
+      '0.20',
+      '0.30',
+      'radius: 10 ,color: #ff0000 ,stroke_color: #ff00ff ,stroke_width: 10px'
+    );
+  });
+  it('should be able to parse the whole chart with point styling with 1 param', () => {
+    const str = `quadrantChart
+      title Analytics and Business Intelligence Platforms
+      x-axis "Completeness of Vision ❤" --> "x-axis-2"
+      y-axis Ability to Execute --> "y-axis-2"
+      quadrant-1 Leaders
+      quadrant-2 Challengers
+      quadrant-3 Niche
+      quadrant-4 Visionaries
+      Microsoft: [0.75, 0.75] radius: 10
+      Salesforce: [0.55, 0.60] color: #ff0000
+      IBM: [0.51, 0.40] stroke_color: #ff00ff
+      Incorta: [0.20, 0.30] stroke_width: 10px`;
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(mockDB.setXAxisLeftText).toHaveBeenCalledWith({
+      text: 'Completeness of Vision ❤',
+      type: 'text',
+    });
+    expect(mockDB.setXAxisRightText).toHaveBeenCalledWith({ text: 'x-axis-2', type: 'text' });
+    expect(mockDB.setYAxisTopText).toHaveBeenCalledWith({ text: 'y-axis-2', type: 'text' });
+    expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({
+      text: 'Ability to Execute',
+      type: 'text',
+    });
+    expect(mockDB.setQuadrant1Text).toHaveBeenCalledWith({ text: 'Leaders', type: 'text' });
+    expect(mockDB.setQuadrant2Text).toHaveBeenCalledWith({ text: 'Challengers', type: 'text' });
+    expect(mockDB.setQuadrant3Text).toHaveBeenCalledWith({ text: 'Niche', type: 'text' });
+    expect(mockDB.setQuadrant4Text).toHaveBeenCalledWith({ text: 'Visionaries', type: 'text' });
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Microsoft', type: 'text' },
+      '',
+      '0.75',
+      '0.75',
+      'radius: 10'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Salesforce', type: 'text' },
+      '',
+      '0.55',
+      '0.60',
+      'color: #ff0000'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'IBM', type: 'text' },
+      '',
+      '0.51',
+      '0.40',
+      'stroke_color: #ff00ff'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Incorta', type: 'text' },
+      '',
+      '0.20',
+      '0.30',
+      'stroke_width: 10px'
+    );
+  });
+
+  it('should be able to parse the whole chart with point styling with params in a random order + class names', () => {
+    const str = `quadrantChart
+      title Analytics and Business Intelligence Platforms
+      x-axis "Completeness of Vision ❤" --> "x-axis-2"
+      y-axis Ability to Execute --> "y-axis-2"
+      quadrant-1 Leaders
+      quadrant-2 Challengers
+      quadrant-3 Niche
+      quadrant-4 Visionaries
+      Microsoft: [0.75, 0.75] stroke_color: #ff00ff ,stroke_width: 10px, color: #ff0000, radius: 10
+      Salesforce:::class1: [0.55, 0.60] radius: 10, color: #ff0000
+      IBM: [0.51, 0.40] stroke_color: #ff00ff ,stroke_width: 10px
+      Incorta: [0.20, 0.30] stroke_width: 10px`;
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(mockDB.setXAxisLeftText).toHaveBeenCalledWith({
+      text: 'Completeness of Vision ❤',
+      type: 'text',
+    });
+    expect(mockDB.setXAxisRightText).toHaveBeenCalledWith({ text: 'x-axis-2', type: 'text' });
+    expect(mockDB.setYAxisTopText).toHaveBeenCalledWith({ text: 'y-axis-2', type: 'text' });
+    expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({
+      text: 'Ability to Execute',
+      type: 'text',
+    });
+    expect(mockDB.setQuadrant1Text).toHaveBeenCalledWith({ text: 'Leaders', type: 'text' });
+    expect(mockDB.setQuadrant2Text).toHaveBeenCalledWith({ text: 'Challengers', type: 'text' });
+    expect(mockDB.setQuadrant3Text).toHaveBeenCalledWith({ text: 'Niche', type: 'text' });
+    expect(mockDB.setQuadrant4Text).toHaveBeenCalledWith({ text: 'Visionaries', type: 'text' });
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Microsoft', type: 'text' },
+      '',
+      '0.75',
+      '0.75',
+      'stroke_color: #ff00ff ,stroke_width: 10px, color: #ff0000, radius: 10'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Salesforce', type: 'text' },
+      'class1',
+      '0.55',
+      '0.60',
+      'radius: 10, color: #ff0000'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'IBM', type: 'text' },
+      '',
+      '0.51',
+      '0.40',
+      'stroke_color: #ff00ff ,stroke_width: 10px'
+    );
+    expect(mockDB.addPoint).toHaveBeenCalledWith(
+      { text: 'Incorta', type: 'text' },
+      '',
+      '0.20',
+      '0.30',
+      'stroke_width: 10px'
+    );
+  });
 });

packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts

@@ -10,8 +10,21 @@ const defaultThemeVariables = getThemeVariables();
 export type TextVerticalPos = 'left' | 'center' | 'right';
 export type TextHorizontalPos = 'top' | 'middle' | 'bottom';
 
+export interface stylesObject {
+  className?: string;
+  radius?: number;
+  color?: string;
+  strokeColor?: string;
+  strokeWidth?: string;
+}
+
 export interface QuadrantPointInputType extends Point {
   text: string;
+  className?: string;
+  radius?: number;
+  color?: string;
+  strokeColor?: string;
+  strokeWidth?: string;
 }
 
 export interface QuadrantTextType extends Point {
@@ -27,6 +40,8 @@ export interface QuadrantPointType extends Point {
   fill: string;
   radius: number;
   text: QuadrantTextType;
+  strokeColor: string;
+  strokeWidth: string;
 }
 
 export interface QuadrantQuadrantsType extends Point {
@@ -117,6 +132,7 @@ export class QuadrantBuilder {
   private config: QuadrantBuilderConfig;
   private themeConfig: QuadrantBuilderThemeConfig;
   private data: quadrantBuilderData;
+  private classes: stylesObject[] = [];
 
   constructor() {
     this.config = this.getDefaultConfig();
@@ -202,6 +218,13 @@ export class QuadrantBuilder {
     this.data.points = [...points, ...this.data.points];
   }
 
+  addClass(className: string, styles: stylesObject) {
+    this.classes.push({
+      className,
+      ...styles,
+    });
+  }
+
   setConfig(config: Partial<QuadrantBuilderConfig>) {
     log.trace('setConfig called with: ', config);
     this.config = { ...this.config, ...config };
@@ -470,11 +493,29 @@ export class QuadrantBuilder {
       .range([quadrantHeight + quadrantTop, quadrantTop]);
 
     const points: QuadrantPointType[] = this.data.points.map((point) => {
+      const classStyles = this.classes.find((obj) => obj.className === point.className);
+      if (classStyles !== undefined) {
+        if (classStyles.color !== undefined) {
+          point.color = classStyles.color;
+        }
+        if (classStyles.radius !== undefined) {
+          point.radius = classStyles.radius;
+        }
+        if (classStyles.strokeColor !== undefined) {
+          point.strokeColor = classStyles.strokeColor;
+        }
+        if (classStyles.strokeWidth !== undefined) {
+          point.strokeWidth = classStyles.strokeWidth;
+        }
+      }
       const props: QuadrantPointType = {
         x: xAxis(point.x),
         y: yAxis(point.y),
-        fill: this.themeConfig.quadrantPointFill,
-        radius: this.config.pointRadius,
+        fill:
+          point.color !== undefined && point.color !== ''
+            ? point.color
+            : this.themeConfig.quadrantPointFill,
+        radius: point.radius !== undefined && point.radius ? point.radius : this.config.pointRadius,
         text: {
           text: point.text,
           fill: this.themeConfig.quadrantPointTextFill,
@@ -485,6 +526,12 @@ export class QuadrantBuilder {
           fontSize: this.config.pointLabelFontSize,
           rotation: 0,
         },
+        strokeColor:
+          point.strokeColor !== undefined && point.strokeColor !== ''
+            ? point.strokeColor
+            : this.themeConfig.quadrantPointFill,
+        strokeWidth:
+          point.strokeWidth !== undefined && point.strokeWidth !== '' ? point.strokeWidth : '0px',
       };
       return props;
     });