diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 50520eb1a5..1be1f7deff 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 and bottom, if both axes have only one label', () => { + 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] + 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'); + }); }); diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 5b740b0e0e..75d6705381 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 = Boolean(this.data.xAxisRightText); + const drawYAxisLabelsInMiddle = Boolean(this.data.yAxisTopText); + 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, });