From cba803abaf8ad2e8b3b198c6c495cf8c0147faa3 Mon Sep 17 00:00:00 2001 From: ilyes-ced Date: Mon, 1 Jan 2024 23:26:14 +0000 Subject: [PATCH] add: point styling for quadrant chart (incomplete) --- .../quadrant-chart/parser/quadrant.jison | 19 ++++++++++++++++ .../quadrant-chart/quadrantBuilder.ts | 19 ++++++++++++++-- .../src/diagrams/quadrant-chart/quadrantDb.ts | 22 +++++++++++++++++-- .../quadrant-chart/quadrantRenderer.ts | 4 +++- 4 files changed, 59 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison index 255b30a03..a78aebf1e 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison +++ b/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");} \s*\]" "* {this.popState();} \s*\,\s* {this.popState(); this.begin('point_y');} (1)|(0(.\d+)?) {this.popState(); return 'point_y';} +\s*radius\:\s* {this.begin('point_radius');} +\d+ {this.popState(); return 'point_radius';} +\s*color\:\s* {this.begin('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');} +\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3}) {this.popState(); return 'stroke_color';} +\s*stroke_width\:\s* {this.begin('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 diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 380a79f19..e5ced4e82 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/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, - 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 +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; }); diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts index c3a79c911..dff877cfb 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts +++ b/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) { - quadrantBuilder.addPoints([{ x, y, text: textSanitizer(textObj.text) }]); +function addPoint( + 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) { diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts index d272dccd4..c2295da4d 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts +++ b/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')