GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-21 06:53:17 +08:00
Code Issues Projects Releases Wiki Activity

add: point styling for quadrant chart (incomplete)

Browse Source
This commit is contained in:
ilyes-ced 2024-01-01 23:26:14 +00:00
parent 60280361b0
commit cba803abaf
4 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison
View File

@ -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

19
packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
View File

@ -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;
});

22
packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts
View File

@ -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) {

4
packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts
View File

@ -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')