add: point styling for quadrant chart (incomplete)

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

@@ -11,6 +11,10 @@
 %x point_start
 %x point_x
 %x point_y
+%x point_radius
+%x point_color
+%x stroke_color
+%x stroke_width
 %%
 \%\%(?!\{)[^\n]*                         /* skip comments */
 [^\}]\%\%[^\n]*                          /* skip comments */
@@ -48,6 +52,14 @@ accDescr\s*"{"\s*                        { this.begin("acc_descr_multiline");}
 <point_start>\s*\]" "*                       {this.popState();}
 <point_x>\s*\,\s*                        {this.popState(); this.begin('point_y');}
 <point_y>(1)|(0(.\d+)?)                  {this.popState(); return 'point_y';}
+\s*radius\:\s*                           {this.begin('point_radius');}
+<point_radius>\d+                        {this.popState(); return 'point_radius';}
+\s*color\:\s*                            {this.begin('point_color');}
+<point_color>\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})                        {this.popState(); return 'point_color';}
+\s*stroke_color\:\s*                     {this.begin('stroke_color');}
+<stroke_color>\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})                       {this.popState(); return 'stroke_color';}
+\s*stroke_width\:\s*                     {this.begin('stroke_width');}
+<stroke_width>\d+px                      {this.popState(); return 'stroke_width';}
 
 " "*"quadrantChart"" "*		                   return 'QUADRANT';
 
@@ -104,6 +116,13 @@ statement
 
 points
   : text point_start point_x point_y {yy.addPoint($1, $3, $4);}
+  | text point_start point_x point_y point_radius {yy.addPoint($1, $3, $4, $5);}
+  | text point_start point_x point_y point_color  {yy.addPoint($1, $3, $4, "", $5);}
+  | text point_start point_x point_y stroke_color {yy.addPoint($1, $3, $4, "", "", $5);}
+  | text point_start point_x point_y stroke_width {yy.addPoint($1, $3, $4, "", "", "", $5);}
+  | text point_start point_x point_y point_radius point_color {yy.addPoint($1, $3, $4, $5, $6);}
+  | text point_start point_x point_y point_radius point_color stroke_color {yy.addPoint($1, $3, $4, $5, $6, $7);}
+  | text point_start point_x point_y point_radius point_color stroke_color stroke_width {yy.addPoint($1, $3, $4, $5, $6, $7, $8);}
   ;
 
 axisDetails

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

@@ -12,6 +12,10 @@ export type TextHorizontalPos = 'top' | 'middle' | 'bottom';
 
 export interface QuadrantPointInputType extends Point {
   text: string;
+  radius: number;
+  color: string;
+  strokeColor: string;
+  strokeWidth: string;
 }
 
 export interface QuadrantTextType extends Point {
@@ -27,6 +31,8 @@ export interface QuadrantPointType extends Point {
   fill: string;
   radius: number;
   text: QuadrantTextType;
+  strokeColor: string;
+  strokeWidth: string;
 }
 
 export interface QuadrantQuadrantsType extends Point {
@@ -473,8 +479,11 @@ export class QuadrantBuilder {
       const props: QuadrantPointType = {
         x: xAxis(point.x),
         y: yAxis(point.y),
-        fill: this.themeConfig.quadrantPointFill,
+        fill:
-        radius: this.config.pointRadius,
+          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 +494,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;
     });

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

@@ -53,8 +53,26 @@ function setYAxisBottomText(textObj: LexTextObj) {
   quadrantBuilder.setData({ yAxisBottomText: textSanitizer(textObj.text) });
 }
 
-function addPoint(textObj: LexTextObj, x: number, y: number) {
+function addPoint(
-  quadrantBuilder.addPoints([{ x, y, text: textSanitizer(textObj.text) }]);
+  textObj: LexTextObj,
+  x: number,
+  y: number,
+  radius: number,
+  color: string,
+  stroke_color: string,
+  stroke_width: string
+) {
+  quadrantBuilder.addPoints([
+    {
+      x,
+      y,
+      text: textSanitizer(textObj.text),
+      radius,
+      color,
+      strokeColor: stroke_color,
+      strokeWidth: stroke_width,
+    },
+  ]);
 }
 
 function setWidth(width: number) {

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

@@ -152,7 +152,9 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
     .attr('cx', (data: QuadrantPointType) => data.x)
     .attr('cy', (data: QuadrantPointType) => data.y)
     .attr('r', (data: QuadrantPointType) => data.radius)
-    .attr('fill', (data: QuadrantPointType) => data.fill);
+    .attr('fill', (data: QuadrantPointType) => data.fill)
+    .attr('stroke', (data: QuadrantPointType) => data.strokeColor)
+    .attr('stroke-width', (data: QuadrantPointType) => data.strokeWidth);
 
   dataPoints
     .append('text')