Merge pull request #4860 from dreathed/bug/4849_center_axis_labels

bug/4849_center_axis_labels
mermaid-js · Sep 22, 2023 · 0534d75 · 0534d75
2 parents b0da3fb + 2f6c197
commit 0534d75
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 9 deletions.
diff --git 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
@@ -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,
       });