fix(react-chart): fix spacing on axis labels in Edge (#2006)

BREAKING CHANGE: We have replaced the `dominantBaseline` option with the `dy` option for axis labels because Edge does not support the former. The `dy` option does not change the baseline position and simply shifts text up or down.
DevExpress · May 6, 2019 · 568ba8a · 568ba8a
1 parent ef75b9c
commit 568ba8a
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 32 deletions.
diff --git a/packages/dx-chart-core/src/plugins/axis/computeds.test.ts b/packages/dx-chart-core/src/plugins/axis/computeds.test.ts
@@ -31,7 +31,7 @@ describe('axisCoordinates', () => {
           xText: 25,
           yText: -10,
           text: 1,
-          dominantBaseline: 'baseline',
+          dy: '0em',
           textAnchor: 'middle',
           y1: 0, y2: -5, x1: 25, x2: 25,
         }],
@@ -53,7 +53,7 @@ describe('axisCoordinates', () => {
           xText: 25,
           yText: 10,
           text: 1,
-          dominantBaseline: 'hanging',
+          dy: '1em',
           textAnchor: 'middle',
           y1: 0, y2: 5, x1: 25, x2: 25,
         }],
@@ -88,7 +88,7 @@ describe('axisCoordinates', () => {
           xText: -10,
           yText: 25,
           x1: 0, x2: -5, y1: 25, y2: 25,
-          dominantBaseline: 'middle',
+          dy: '0.3em',
           textAnchor: 'end',
         }],
       });
@@ -110,7 +110,7 @@ describe('axisCoordinates', () => {
           xText: 10,
           yText: 25,
           x1: 0, x2: 5, y1: 25, y2: 25,
-          dominantBaseline: 'middle',
+          dy: '0.3em',
           textAnchor: 'start',
         }],
       });
@@ -143,7 +143,7 @@ describe('axisCoordinates', () => {
           xText: 25,
           yText: -10,
           text: 'format 1',
-          dominantBaseline: 'baseline',
+          dy: '0em',
           textAnchor: 'middle',
           y1: 0, y2: -5, x1: 25, x2: 25,
         }]);
@@ -172,7 +172,7 @@ describe('axisCoordinates', () => {
           xText: 25,
           yText: -10,
           text: 'user format 1',
-          dominantBaseline: 'baseline',
+          dy: '0em',
           textAnchor: 'middle',
           y1: 0, y2: -5, x1: 25, x2: 25,
         }]);
@@ -212,7 +212,7 @@ describe('axisCoordinates', () => {
           xText: 25,
           yText: 10,
           text: 'a',
-          dominantBaseline: 'hanging',
+          dy: '1em',
           textAnchor: 'middle',
           y1: 0, y2: 5, x1: 25, x2: 25,
         }],
@@ -232,7 +232,7 @@ describe('axisCoordinates', () => {
           xText: 25,
           yText: -10,
           text: 'a',
-          dominantBaseline: 'baseline',
+          dy: '0em',
           textAnchor: 'middle',
           y1: 0, y2: -5, x1: 25, x2: 25,
         }],
@@ -253,7 +253,7 @@ describe('axisCoordinates', () => {
           xText: -10,
           yText: 25,
           x1: 0, x2: -5, y1: 25, y2: 25,
-          dominantBaseline: 'middle',
+          dy: '0.3em',
           textAnchor: 'end',
         }],
       });
@@ -273,7 +273,7 @@ describe('axisCoordinates', () => {
           xText: 10,
           yText: 25,
           x1: 0, x2: 5, y1: 25, y2: 25,
-          dominantBaseline: 'middle',
+          dy: '0.3em',
           textAnchor: 'start',
         }],
       });

diff --git a/packages/dx-chart-core/src/plugins/axis/computeds.ts b/packages/dx-chart-core/src/plugins/axis/computeds.ts
@@ -33,7 +33,7 @@ const createHorizontalOptions = (position: string, tickSize: number, indentFromA
     y1: 0,
     y2: isStart ? +tickSize : -tickSize,
     yText: isStart ? +indentFromAxis : -indentFromAxis,
-    dominantBaseline: isStart ? 'hanging' : 'baseline',
+    dy: isStart ? '1em' : '0em',
     textAnchor: MIDDLE,
   };
 };
@@ -45,7 +45,7 @@ const createVerticalOptions = (position: string, tickSize: number, indentFromAxi
     x1: 0,
     x2: isStart ? -tickSize : +tickSize,
     xText: isStart ? -indentFromAxis : +indentFromAxis,
-    dominantBaseline: MIDDLE,
+    dy: '0.3em',
     textAnchor: isStart ? END : START,
   };
 };

diff --git a/packages/dx-chart-core/src/types/plugins.axis.types.ts b/packages/dx-chart-core/src/types/plugins.axis.types.ts
@@ -24,7 +24,7 @@ export type Tick = {
   readonly y2: number;
   readonly xText: number;
   readonly yText: number;
-  readonly dominantBaseline: string;
+  readonly dy: string;
   readonly textAnchor: string;
   readonly text: string;
 };

diff --git a/packages/dx-react-chart/api/dx-react-chart.api.ts b/packages/dx-react-chart/api/dx-react-chart.api.ts
@@ -53,7 +53,7 @@ interface ArgumentScaleProps extends ScaleProps {
 namespace Axis {
   // (undocumented)
   interface LabelProps {
-    dominantBaseline: string;
+    dy: string;
     text: string | number;
     textAnchor: string;
     x: number;
@@ -635,3 +635,4 @@ interface ZoomAndPanProps {
 
 
 // (No @packageDocumentation comment for this package)
+
diff --git a/packages/dx-react-chart/docs/reference/argument-axis.md b/packages/dx-react-chart/docs/reference/argument-axis.md
@@ -69,7 +69,7 @@ Field | Type | Description
 text | string &#124; number | The label text.
 x | number | The x coordinate of the label's top left corner.
 y | number | The y coordinate of the label's top left corner.
-dominantBaseline | 'hanging' &#124; 'middle' &#124; 'baseline' | The label's baseline.
+dy | string | The label's offset from the baseline in CSS units.
 textAnchor | 'start' &#124; 'middle' &#124; 'end' | The label's text alignment.
 
 ## Plugin Components

diff --git a/packages/dx-react-chart/docs/reference/value-axis.md b/packages/dx-react-chart/docs/reference/value-axis.md
@@ -70,7 +70,7 @@ Field | Type | Description
 text | string &#124; number | The label text.
 x | number | The x coordinate of the label's top left corner.
 y | number | The y coordinate of the label's top left corner.
-dominantBaseline | 'hanging' &#124; 'middle' &#124; 'baseline' | The label's baseline.
+dy | string | The label's offset from the baseline in CSS units.
 textAnchor | 'start' &#124; 'middle' &#124; 'end' | The label's text alignment.
 
 ## Plugin Components

diff --git a/packages/dx-react-chart/src/plugins/axis.test.tsx b/packages/dx-react-chart/src/plugins/axis.test.tsx
@@ -78,7 +78,7 @@ describe('Axis', () => {
       y2: 4,
       xText: 'xText1',
       yText: 'yText1',
-      dominantBaseline: 'dominantBaseline1',
+      dy: 'dy1',
       textAnchor: 'textAnchor1',
       key: '1',
     },
@@ -90,7 +90,7 @@ describe('Axis', () => {
       y2: 44,
       xText: 'xText2',
       yText: 'yText2',
-      dominantBaseline: 'dominantBaseline2',
+      dy: 'dy2',
       textAnchor: 'textAnchor2',
       key: '2',
     },
@@ -332,15 +332,15 @@ describe('Axis', () => {
     expect(tree.find(LabelComponent).get(0).props).toEqual({
       x: 'xText1',
       y: 'yText1',
-      dominantBaseline: 'dominantBaseline1',
+      dy: 'dy1',
       textAnchor: 'textAnchor1',
       text: 'text1',
     });
 
     expect(tree.find(LabelComponent).get(1).props).toEqual({
       x: 'xText2',
       y: 'yText2',
-      dominantBaseline: 'dominantBaseline2',
+      dy: 'dy2',
       textAnchor: 'textAnchor2',
       text: 'text2',
     });

diff --git a/packages/dx-react-chart/src/plugins/axis.tsx b/packages/dx-react-chart/src/plugins/axis.tsx
@@ -147,7 +147,7 @@ class RawAxis extends React.PureComponent<RawAxisProps> {
                         text,
                         xText,
                         yText,
-                        dominantBaseline,
+                        dy: delta,
                         textAnchor,
                         key,
                       }) => (
@@ -156,7 +156,7 @@ class RawAxis extends React.PureComponent<RawAxisProps> {
                           text={text}
                           x={xText}
                           y={yText}
-                          dominantBaseline={dominantBaseline}
+                          dy={delta}
                           textAnchor={textAnchor}
                         />
                       ))}

diff --git a/packages/dx-react-chart/src/templates/axis/label.test.tsx b/packages/dx-react-chart/src/templates/axis/label.test.tsx
@@ -6,7 +6,7 @@ const defaultProps = {
   x: 1,
   y: 2,
   text: 'a',
-  dominantBaseline: 'middle',
+  dy: '1em',
   textAnchor: 'end',
 };
 
@@ -15,11 +15,11 @@ describe('Label', () => {
     const tree = shallow(<Label {...defaultProps} />);
 
     const {
-      x, y, dominantBaseline, textAnchor,
+      x, y, dy, textAnchor,
     } = tree.find('text').props();
     expect(x).toBe(1);
     expect(y).toBe(2);
-    expect(dominantBaseline).toBe('middle');
+    expect(dy).toBe('1em');
     expect(textAnchor).toBe('end');
     expect(tree.text()).toBe('a');
   });

diff --git a/packages/dx-react-chart/src/templates/axis/label.tsx b/packages/dx-react-chart/src/templates/axis/label.tsx
@@ -4,15 +4,11 @@ import { Axis } from '../../types';
 export class Label extends React.PureComponent<Axis.LabelProps> {
   render() {
     const {
-      text, x, y, dominantBaseline, textAnchor, ...restProps
+      text, ...restProps
     } = this.props;
 
     return (
       <text
-        dominantBaseline={dominantBaseline}
-        textAnchor={textAnchor}
-        x={x}
-        y={y}
         {...restProps}
       >
         {text}

diff --git a/packages/dx-react-chart/src/types/templates.axis.types.ts b/packages/dx-react-chart/src/types/templates.axis.types.ts
@@ -9,8 +9,8 @@ export namespace Axis {
     x: number;
     /** The y coordinate of the label’s top left corner */
     y: number;
-    /** The label’s baseline */
-    dominantBaseline: string;
+    /** The label's offset from the baseline in CSS units */
+    dy: string;
     /** The label’s text alignment */
     textAnchor: string;
   }