fix(svg): fix text vertical alignment

plouc · May 3, 2019 · d59fb72 · d59fb72
1 parent d56881b
commit d59fb72
Show file tree

Hide file tree

Showing 38 changed files with 122 additions and 222 deletions.
diff --git a/packages/axes/src/components/Axis.js b/packages/axes/src/components/Axis.js
@@ -101,7 +101,7 @@ const Axis = memo(
                     transform={`translate(${legendX}, ${legendY}) rotate(${legendRotation})`}
                     textAnchor={textAnchor}
                     style={{
-                        alignmentBaseline: 'middle',
+                        dominantBaseline: 'central',
                         ...theme.axis.legend.text,
                     }}
                 >
@@ -200,11 +200,12 @@ Axis.propTypes = {
     tickSize: PropTypes.number.isRequired,
     tickPadding: PropTypes.number.isRequired,
     tickRotation: PropTypes.number.isRequired,
-    tickFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     renderTick: PropTypes.func.isRequired,
     legend: PropTypes.node,
     legendPosition: PropTypes.oneOf(['start', 'middle', 'end']).isRequired,
     legendOffset: PropTypes.number.isRequired,
+    onClick: PropTypes.func,
 }
 Axis.defaultProps = {
     x: 0,

diff --git a/packages/axes/src/components/AxisTick.js b/packages/axes/src/components/AxisTick.js
@@ -46,7 +46,7 @@ const AxisTick = memo(
             >
                 <line x1={0} x2={lineX} y1={0} y2={lineY} style={theme.axis.ticks.line} />
                 <text
-                    alignmentBaseline={textBaseline}
+                    dominantBaseline={textBaseline}
                     textAnchor={textAnchor}
                     transform={`translate(${textX},${textY}) rotate(${rotate})`}
                     style={theme.axis.ticks.text}

diff --git a/packages/axes/src/components/GridLines.js b/packages/axes/src/components/GridLines.js
@@ -78,6 +78,7 @@ const GridLines = memo(({ type, lines }) => {
     )
 })
 
+GridLines.displayName = 'GridLines'
 GridLines.propTypes = {
     type: PropTypes.oneOf(['x', 'y']).isRequired,
     lines: PropTypes.arrayOf(

diff --git a/packages/bar/src/BarItem.js b/packages/bar/src/BarItem.js
@@ -68,7 +68,7 @@ const BarItem = ({
                     x={width / 2}
                     y={height / 2}
                     textAnchor="middle"
-                    alignmentBaseline="central"
+                    dominantBaseline="central"
                     style={{
                         ...theme.labels.text,
                         pointerEvents: 'none',

diff --git a/packages/bar/stories/bar.stories.js b/packages/bar/stories/bar.stories.js
@@ -231,7 +231,7 @@ stories.add(
                         <line stroke="rgb(232, 193, 160)" strokeWidth={1.5} y1={-22} y2={-12} />
                         <text
                             textAnchor="middle"
-                            alignmentBaseline="middle"
+                            dominantBaseline="middle"
                             style={{
                                 ...tick.theme.axis.ticks.text,
                                 fill: '#333',

diff --git a/packages/bar/stories/raceChart.stories.js b/packages/bar/stories/raceChart.stories.js
@@ -56,7 +56,7 @@ const BarComponent = props => {
                 x={props.width - 16}
                 y={props.height / 2 - 8}
                 textAnchor="end"
-                alignmentBaseline="middle"
+                dominantBaseline="central"
                 fill="black"
                 style={{
                     fontWeight: 900,
@@ -69,7 +69,7 @@ const BarComponent = props => {
                 x={props.width - 16}
                 y={props.height / 2 + 10}
                 textAnchor="end"
-                alignmentBaseline="middle"
+                dominantBaseline="central"
                 fill={props.borderColor}
                 style={{
                     fontWeight: 400,

diff --git a/packages/bullet/src/BulletItem.js b/packages/bullet/src/BulletItem.js
@@ -272,7 +272,7 @@ class BulletItem extends Component {
                     <text
                         style={{
                             ...theme.labels.text,
-                            alignmentBaseline: 'central',
+                            dominantBaseline: 'central',
                             textAnchor: titleAlign,
                         }}
                     >

diff --git a/packages/chord/src/ChordLabels.js b/packages/chord/src/ChordLabels.js
@@ -36,7 +36,7 @@ const ChordLabels = ({ arcs, radius, rotation, getColor }) => {
                                 fill: color,
                             }}
                             textAnchor={textProps.align}
-                            alignmentBaseline={textProps.baseline}
+                            dominantBaseline={textProps.baseline}
                         >
                             {arc.label}
                         </text>
@@ -78,7 +78,7 @@ const ChordLabels = ({ arcs, radius, rotation, getColor }) => {
                                     fill: color,
                                 }}
                                 textAnchor={textProps.align}
-                                alignmentBaseline={textProps.baseline}
+                                dominantBaseline={textProps.baseline}
                             >
                                 {arc.label}
                             </text>

diff --git a/packages/circle-packing/src/BubbleNode.js b/packages/circle-packing/src/BubbleNode.js
@@ -25,7 +25,7 @@ const BubbleNode = ({ node, style, handlers, theme }) => {
             {node.label !== false && (
                 <text
                     textAnchor="middle"
-                    alignmentBaseline="central"
+                    dominantBaseline="central"
                     style={{
                         ...theme.labels.text,
                         fill: style.labelTextColor,

diff --git a/packages/core/src/components/SmartMotion.js b/packages/core/src/components/SmartMotion.js
diff --git a/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js b/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
@@ -207,7 +207,7 @@ const CartesianMarkersItem = memo(
                         legendProps.rotation
                     })`}
                     textAnchor={legendProps.textAnchor}
-                    alignmentBaseline="central"
+                    dominantBaseline="central"
                     style={textStyle}
                 >
                     {legend}

diff --git a/packages/core/src/hocs/withContainer.js b/packages/core/src/hocs/withContainer.js
@@ -66,6 +66,10 @@ const Container = ({
 Container.propTypes = {
     children: PropTypes.node.isRequired,
     theme: PropTypes.object,
+    animate: PropTypes.bool,
+    motionStiffness: PropTypes.number,
+    motionDamping: PropTypes.number,
+    renderWrapper: PropTypes.bool,
 }
 
 export const withContainer = WrappedComponent => {

diff --git a/packages/core/src/lib/bridge.js b/packages/core/src/lib/bridge.js
@@ -15,9 +15,9 @@ export const textPropsByEngine = {
             right: 'end',
         },
         baseline: {
-            top: 'before-edge',
+            top: 'text-before-edge',
             center: 'central',
-            bottom: 'after-edge',
+            bottom: 'alphabetic',
         },
     },
     canvas: {

diff --git a/packages/core/src/motion/context.js b/packages/core/src/motion/context.js
@@ -24,6 +24,7 @@ export const MotionConfigProvider = ({ children, animate, stiffness, damping })
 }
 
 MotionConfigProvider.propTypes = {
+    children: PropTypes.node.isRequired,
     animate: PropTypes.bool.isRequired,
     stiffness: PropTypes.number.isRequired,
     damping: PropTypes.number.isRequired,

diff --git a/packages/core/src/theming/context.js b/packages/core/src/theming/context.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 import React, { createContext, useContext } from 'react'
+import PropTypes from 'prop-types'
 import { usePartialTheme } from '../hooks'
 
 export const themeContext = createContext()
@@ -20,4 +21,9 @@ export const ThemeProvider = ({ theme: partialTheme = defaultPartialTheme, child
     return <themeContext.Provider value={theme}>{children}</themeContext.Provider>
 }
 
+ThemeProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    theme: PropTypes.object,
+}
+
 export const useTheme = () => useContext(themeContext)
diff --git a/packages/heatmap/src/HeatMapCellCircle.js b/packages/heatmap/src/HeatMapCellCircle.js
@@ -51,7 +51,7 @@ const HeatMapCellCircle = ({
         />
         {enableLabel && (
             <text
-                alignmentBaseline="central"
+                dominantBaseline="central"
                 textAnchor="middle"
                 style={{
                     ...theme.labels,

diff --git a/packages/heatmap/src/HeatMapCellRect.js b/packages/heatmap/src/HeatMapCellRect.js
@@ -54,7 +54,7 @@ const HeatMapCellRect = ({
         />
         {enableLabel && (
             <text
-                alignmentBaseline="central"
+                dominantBaseline="central"
                 textAnchor="middle"
                 style={{
                     ...theme.labels.text,

diff --git a/packages/heatmap/stories/heatmap.stories.js b/packages/heatmap/stories/heatmap.stories.js
@@ -30,7 +30,7 @@ const CustomCell = ({
             `}
         />
         <text
-            alignmentBaseline="central"
+            dominantBaseline="central"
             textAnchor="middle"
             style={{ fill: textColor }}
             dy={value < 50 ? -6 : 6}

diff --git a/packages/legends/src/compute.js b/packages/legends/src/compute.js
@@ -146,7 +146,7 @@ export const computeItemLayout = ({
             symbolY = (height - symbolSize) / 2
 
             labelY = height / 2
-            labelAlignment = 'middle'
+            labelAlignment = 'central'
             if (justify === true) {
                 labelX = width
                 labelAnchor = 'end'
@@ -161,7 +161,7 @@ export const computeItemLayout = ({
             symbolY = (height - symbolSize) / 2
 
             labelY = height / 2
-            labelAlignment = 'middle'
+            labelAlignment = 'central'
             if (justify === true) {
                 labelX = 0
                 labelAnchor = 'start'
@@ -180,10 +180,10 @@ export const computeItemLayout = ({
             labelAnchor = 'middle'
             if (justify === true) {
                 labelY = height
-                labelAlignment = 'baseline'
+                labelAlignment = 'alphabetic'
             } else {
                 labelY = symbolSize + symbolSpacing
-                labelAlignment = 'hanging'
+                labelAlignment = 'text-before-edge'
             }
             break
 
@@ -195,10 +195,10 @@ export const computeItemLayout = ({
             labelAnchor = 'middle'
             if (justify === true) {
                 labelY = 0
-                labelAlignment = 'hanging'
+                labelAlignment = 'text-before-edge'
             } else {
                 labelY = height - symbolSize - symbolSpacing
-                labelAlignment = 'baseline'
+                labelAlignment = 'alphabetic'
             }
             break
     }

diff --git a/packages/legends/src/svg/LegendSvgItem.js b/packages/legends/src/svg/LegendSvgItem.js
@@ -139,7 +139,7 @@ const LegendSvgItem = ({
                 style={{
                     ...theme.legends.text,
                     fill: style.itemTextColor || textColor,
-                    alignmentBaseline: labelAlignment,
+                    dominantBaseline: labelAlignment,
                     pointerEvents: 'none',
                     userSelect: 'none',
                 }}

diff --git a/packages/line/src/Areas.js b/packages/line/src/Areas.js
@@ -66,8 +66,10 @@ const Areas = memo(({ areaGenerator, areaOpacity, areaBlendMode, lines }) => {
 
 Areas.displayName = 'Areas'
 Areas.propTypes = {
+    areaGenerator: PropTypes.func.isRequired,
     areaOpacity: PropTypes.number.isRequired,
     areaBlendMode: blendModePropType.isRequired,
+    lines: PropTypes.arrayOf(PropTypes.object).isRequired,
 }
 
 export default Areas
diff --git a/packages/line/src/Points.js b/packages/line/src/Points.js
@@ -91,11 +91,7 @@ const Points = memo(({ points, symbol, size, borderWidth, enableLabel, label, la
 
 Points.displayName = 'Points'
 Points.propTypes = {
-    lines: PropTypes.arrayOf(
-        PropTypes.shape({
-            id: PropTypes.string.isRequired,
-        })
-    ),
+    points: PropTypes.arrayOf(PropTypes.object),
 
     symbol: PropTypes.func,
     size: PropTypes.number.isRequired,

diff --git a/packages/line/src/SlicesItem.js b/packages/line/src/SlicesItem.js
@@ -59,6 +59,7 @@ SlicesItem.propTypes = {
     height: PropTypes.number.isRequired,
     tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     isCurrent: PropTypes.bool.isRequired,
+    setCurrent: PropTypes.func.isRequired,
 }
 
 export default SlicesItem
diff --git a/packages/line/src/hooks.js b/packages/line/src/hooks.js
@@ -10,7 +10,7 @@ import { useMemo } from 'react'
 import { area, line } from 'd3-shape'
 import { curveFromProp, useTheme, useValueFormatter } from '@nivo/core'
 import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'
-import { computeXYScalesForSeries, computeYSlices } from '@nivo/scales'
+import { computeXYScalesForSeries } from '@nivo/scales'
 import { LineDefaultProps } from './props'
 
 export const useLineGenerator = ({ curve }) => {