From a83fab28e16cb2e681dc183b10a577dede92ecb5 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Wed, 20 Sep 2023 22:56:45 +0200 Subject: [PATCH 1/7] center labels: removed condition --- .../diagrams/quadrant-chart/quadrantBuilder.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 5b740b0e0e..f3ca3c3a66 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -283,14 +283,14 @@ export class QuadrantBuilder { quadrantTop, quadrantWidth, } = quadrantSpace; - const drawAxisLabelInMiddle = this.data.points.length === 0; + const axisLabels: QuadrantTextType[] = []; if (this.data.xAxisLeftText && showXAxis) { axisLabels.push({ text: this.data.xAxisLeftText, fill: this.themeConfig.quadrantXAxisTextFill, - x: quadrantLeft + (drawAxisLabelInMiddle ? quadrantHalfWidth / 2 : 0), + x: quadrantLeft + quadrantHalfWidth / 2, y: xAxisPosition === 'top' ? this.config.xAxisLabelPadding + titleSpace.top @@ -299,7 +299,7 @@ export class QuadrantBuilder { quadrantHeight + this.config.quadrantPadding, fontSize: this.config.xAxisLabelFontSize, - verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', + verticalPos: 'center', horizontalPos: 'top', rotation: 0, }); @@ -308,7 +308,7 @@ export class QuadrantBuilder { axisLabels.push({ text: this.data.xAxisRightText, fill: this.themeConfig.quadrantXAxisTextFill, - x: quadrantLeft + quadrantHalfWidth + (drawAxisLabelInMiddle ? quadrantHalfWidth / 2 : 0), + x: quadrantLeft + quadrantHalfWidth + quadrantHalfWidth / 2, y: xAxisPosition === 'top' ? this.config.xAxisLabelPadding + titleSpace.top @@ -317,7 +317,7 @@ export class QuadrantBuilder { quadrantHeight + this.config.quadrantPadding, fontSize: this.config.xAxisLabelFontSize, - verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', + verticalPos: 'center', horizontalPos: 'top', rotation: 0, }); @@ -334,9 +334,9 @@ export class QuadrantBuilder { quadrantLeft + quadrantWidth + this.config.quadrantPadding, - y: quadrantTop + quadrantHeight - (drawAxisLabelInMiddle ? quadrantHalfHeight / 2 : 0), + y: quadrantTop + quadrantHeight - quadrantHalfHeight / 2, fontSize: this.config.yAxisLabelFontSize, - verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', + verticalPos: 'center', horizontalPos: 'top', rotation: -90, }); @@ -352,9 +352,9 @@ export class QuadrantBuilder { quadrantLeft + quadrantWidth + this.config.quadrantPadding, - y: quadrantTop + quadrantHalfHeight - (drawAxisLabelInMiddle ? quadrantHalfHeight / 2 : 0), + y: quadrantTop + quadrantHalfHeight - quadrantHalfHeight / 2, fontSize: this.config.yAxisLabelFontSize, - verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', + verticalPos: 'center', horizontalPos: 'top', rotation: -90, }); From 5c39e99e32dc87d20a515b0d3b3187bc25bc0548 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Thu, 21 Sep 2023 10:35:18 +0200 Subject: [PATCH 2/7] Revert "center labels: removed condition" This reverts commit a83fab28e16cb2e681dc183b10a577dede92ecb5. --- .../diagrams/quadrant-chart/quadrantBuilder.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index f3ca3c3a66..5b740b0e0e 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -283,14 +283,14 @@ export class QuadrantBuilder { quadrantTop, quadrantWidth, } = quadrantSpace; - + const drawAxisLabelInMiddle = this.data.points.length === 0; const axisLabels: QuadrantTextType[] = []; if (this.data.xAxisLeftText && showXAxis) { axisLabels.push({ text: this.data.xAxisLeftText, fill: this.themeConfig.quadrantXAxisTextFill, - x: quadrantLeft + quadrantHalfWidth / 2, + x: quadrantLeft + (drawAxisLabelInMiddle ? quadrantHalfWidth / 2 : 0), y: xAxisPosition === 'top' ? this.config.xAxisLabelPadding + titleSpace.top @@ -299,7 +299,7 @@ export class QuadrantBuilder { quadrantHeight + this.config.quadrantPadding, fontSize: this.config.xAxisLabelFontSize, - verticalPos: 'center', + verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', horizontalPos: 'top', rotation: 0, }); @@ -308,7 +308,7 @@ export class QuadrantBuilder { axisLabels.push({ text: this.data.xAxisRightText, fill: this.themeConfig.quadrantXAxisTextFill, - x: quadrantLeft + quadrantHalfWidth + quadrantHalfWidth / 2, + x: quadrantLeft + quadrantHalfWidth + (drawAxisLabelInMiddle ? quadrantHalfWidth / 2 : 0), y: xAxisPosition === 'top' ? this.config.xAxisLabelPadding + titleSpace.top @@ -317,7 +317,7 @@ export class QuadrantBuilder { quadrantHeight + this.config.quadrantPadding, fontSize: this.config.xAxisLabelFontSize, - verticalPos: 'center', + verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', horizontalPos: 'top', rotation: 0, }); @@ -334,9 +334,9 @@ export class QuadrantBuilder { quadrantLeft + quadrantWidth + this.config.quadrantPadding, - y: quadrantTop + quadrantHeight - quadrantHalfHeight / 2, + y: quadrantTop + quadrantHeight - (drawAxisLabelInMiddle ? quadrantHalfHeight / 2 : 0), fontSize: this.config.yAxisLabelFontSize, - verticalPos: 'center', + verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', horizontalPos: 'top', rotation: -90, }); @@ -352,9 +352,9 @@ export class QuadrantBuilder { quadrantLeft + quadrantWidth + this.config.quadrantPadding, - y: quadrantTop + quadrantHalfHeight - quadrantHalfHeight / 2, + y: quadrantTop + quadrantHalfHeight - (drawAxisLabelInMiddle ? quadrantHalfHeight / 2 : 0), fontSize: this.config.yAxisLabelFontSize, - verticalPos: 'center', + verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', horizontalPos: 'top', rotation: -90, }); From d7591fbeda338961c1a8432c44fa77334104cd8d Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Thu, 21 Sep 2023 10:55:09 +0200 Subject: [PATCH 3/7] changed condition on which axis labels are centered --- .../quadrant-chart/quadrantBuilder.ts | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 5b740b0e0e..3acb46288a 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -283,14 +283,17 @@ export class QuadrantBuilder { quadrantTop, quadrantWidth, } = quadrantSpace; - const drawAxisLabelInMiddle = this.data.points.length === 0; + + const drawXAxisLabelsInMiddle = this.data.xAxisRightText ? true : false; + const drawYAxisLabelsInMiddle = this.data.yAxisTopText ? true : false; + const axisLabels: QuadrantTextType[] = []; if (this.data.xAxisLeftText && showXAxis) { axisLabels.push({ text: this.data.xAxisLeftText, fill: this.themeConfig.quadrantXAxisTextFill, - x: quadrantLeft + (drawAxisLabelInMiddle ? quadrantHalfWidth / 2 : 0), + x: quadrantLeft + (drawXAxisLabelsInMiddle ? quadrantHalfWidth / 2 : 0), y: xAxisPosition === 'top' ? this.config.xAxisLabelPadding + titleSpace.top @@ -299,7 +302,7 @@ export class QuadrantBuilder { quadrantHeight + this.config.quadrantPadding, fontSize: this.config.xAxisLabelFontSize, - verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', + verticalPos: drawXAxisLabelsInMiddle ? 'center' : 'left', horizontalPos: 'top', rotation: 0, }); @@ -308,7 +311,7 @@ export class QuadrantBuilder { axisLabels.push({ text: this.data.xAxisRightText, fill: this.themeConfig.quadrantXAxisTextFill, - x: quadrantLeft + quadrantHalfWidth + (drawAxisLabelInMiddle ? quadrantHalfWidth / 2 : 0), + x: quadrantLeft + quadrantHalfWidth + (drawXAxisLabelsInMiddle ? quadrantHalfWidth / 2 : 0), y: xAxisPosition === 'top' ? this.config.xAxisLabelPadding + titleSpace.top @@ -317,7 +320,7 @@ export class QuadrantBuilder { quadrantHeight + this.config.quadrantPadding, fontSize: this.config.xAxisLabelFontSize, - verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', + verticalPos: drawXAxisLabelsInMiddle ? 'center' : 'left', horizontalPos: 'top', rotation: 0, }); @@ -334,9 +337,9 @@ export class QuadrantBuilder { quadrantLeft + quadrantWidth + this.config.quadrantPadding, - y: quadrantTop + quadrantHeight - (drawAxisLabelInMiddle ? quadrantHalfHeight / 2 : 0), + y: quadrantTop + quadrantHeight - (drawYAxisLabelsInMiddle ? quadrantHalfHeight / 2 : 0), fontSize: this.config.yAxisLabelFontSize, - verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', + verticalPos: drawYAxisLabelsInMiddle ? 'center' : 'left', horizontalPos: 'top', rotation: -90, }); @@ -352,9 +355,10 @@ export class QuadrantBuilder { quadrantLeft + quadrantWidth + this.config.quadrantPadding, - y: quadrantTop + quadrantHalfHeight - (drawAxisLabelInMiddle ? quadrantHalfHeight / 2 : 0), + y: + quadrantTop + quadrantHalfHeight - (drawYAxisLabelsInMiddle ? quadrantHalfHeight / 2 : 0), fontSize: this.config.yAxisLabelFontSize, - verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', + verticalPos: drawYAxisLabelsInMiddle ? 'center' : 'left', horizontalPos: 'top', rotation: -90, }); From 2d0b22892dc2d7ec33bdf34deafc7836b934fc7a Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Thu, 21 Sep 2023 12:24:24 +0200 Subject: [PATCH 4/7] added requested changes --- .../mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 3acb46288a..75d6705381 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -284,8 +284,8 @@ export class QuadrantBuilder { quadrantWidth, } = quadrantSpace; - const drawXAxisLabelsInMiddle = this.data.xAxisRightText ? true : false; - const drawYAxisLabelsInMiddle = this.data.yAxisTopText ? true : false; + const drawXAxisLabelsInMiddle = Boolean(this.data.xAxisRightText); + const drawYAxisLabelsInMiddle = Boolean(this.data.yAxisTopText); const axisLabels: QuadrantTextType[] = []; From 05e94b430aaaec27111dbff19a6f6161f7cadd46 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Thu, 21 Sep 2023 15:25:51 +0200 Subject: [PATCH 5/7] add image snapshot test for quadrantchart --- .../rendering/quadrantChart.spec.js | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 50520eb1a5..33830d3b7f 100644 --- a/cypress/integration/rendering/quadrantChart.spec.js +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -160,4 +160,70 @@ describe('Quadrant Chart', () => { ); cy.get('svg'); }); + it('should render x-axis labels in the center, if x-axis has two labels', () => { + imgSnapshotTest( + ` + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low 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] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] + `, + {} + ); + cy.get('svg'); + }); + it('should render y-axis labels in the center, if y-axis has two labels', () => { + imgSnapshotTest( + ` + quadrantChart + title Reach and engagement of campaigns + x-axis Low 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.3, 0.6] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] + `, + {} + ); + cy.get('svg'); + }); + it('should render both axes labels on the left/bottom, if both axes have only one label', () => { + imgSnapshotTest( + ` + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach + y-axis Low 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] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] + `, + {} + ); + cy.get('svg'); + }); }); From de770e4c3c7507e7899ddeb884c855b8c10db7ce Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Thu, 21 Sep 2023 15:42:36 +0200 Subject: [PATCH 6/7] changed name of test --- cypress/integration/rendering/quadrantChart.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 33830d3b7f..643356e399 100644 --- a/cypress/integration/rendering/quadrantChart.spec.js +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -204,7 +204,7 @@ describe('Quadrant Chart', () => { ); cy.get('svg'); }); - it('should render both axes labels on the left/bottom, if both axes have only one label', () => { + it('should render both axes labels on the left and bottom, if both axes have only one label', () => { imgSnapshotTest( ` quadrantChart From 2f6c1972e114a04d6d3fdfcf6e936b24cfda500b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 22 Sep 2023 05:37:49 +0000 Subject: [PATCH 7/7] Update cypress/integration/rendering/quadrantChart.spec.js --- cypress/integration/rendering/quadrantChart.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 643356e399..1be1f7deff 100644 --- a/cypress/integration/rendering/quadrantChart.spec.js +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -209,8 +209,8 @@ describe('Quadrant Chart', () => { ` quadrantChart title Reach and engagement of campaigns - x-axis Low Reach - y-axis Low Engagement + x-axis Reach --> + y-axis Engagement --> quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate