fix x-axis

JesperLekland · Feb 18, 2018 · ab64b2c · ab64b2c
1 parent a63ed4b
commit ab64b2c
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 11 deletions.
diff --git a/src/x-axis.js b/src/x-axis.js
@@ -102,30 +102,28 @@ class XAxis extends PureComponent {
                             // causes rendering issues
                             width > 0 &&
                             ticks.map((value, index) => {
+                                console.log('x', x(value))
                                 return (
                                     <SVGText
                                       textAnchor={'middle'}
                                       originX={x(value)}
+                                      alignmentBaseline={'hanging'}
                                       {...svg}
                                       key={index}
                                       x={x(value)}
                                     >
                                         {formatLabel(value, index)}
                                     </SVGText>
                                 )
-                            })}
+                            })
+                        }
                     </Svg>
                 </View>
             </View>
         )
     }
 }
 
-XAxis.Type = {
-    LINE: 'line',
-    BAR: 'bar',
-}
-
 XAxis.propTypes = {
     data: PropTypes.array.isRequired,
     labelStyle: PropTypes.any,
@@ -142,9 +140,7 @@ XAxis.propTypes = {
 }
 
 XAxis.defaultProps = {
-    type: 'line',
     spacing: 0.05,
-    chartType: XAxis.Type.LINE,
     contentInset: {},
     svg: {},
     xAccessor: ({ index }) => index,

diff --git a/storybook/stories/x-axis/scale-band.js b/storybook/stories/x-axis/scale-band.js
@@ -32,7 +32,6 @@ class XAxisExample extends React.PureComponent {
                     data={ data }
                     scale={scale.scaleBand}
                     formatLabel={ (value, index) => index }
-                    chartType={ XAxis.Type.BAR }
                     labelStyle={ { color: 'black' } }
                 />
             </View>

diff --git a/storybook/stories/x-axis/scale-linear.js b/storybook/stories/x-axis/scale-linear.js
@@ -22,7 +22,7 @@ class XAxisExample extends React.PureComponent {
                     data={ data }
                     formatLabel={ (value, index) => index }
                     contentInset={{ left: 10, right: 10 }}
-                    svg={{ fontSize: 10 }}
+                    svg={{ fontSize: 10, fill: 'black' }}
                 />
             </View>
         )

diff --git a/storybook/stories/x-axis/scale-time.js b/storybook/stories/x-axis/scale-time.js
@@ -51,12 +51,12 @@ class XAxisScaleTimeExample extends React.PureComponent {
                 <XAxis
                   data={data}
                   svg={{
-                      translate: '30',
                       fill: 'black',
                       fontSize: 8,
                       fontWeight: 'bold',
                       rotation: 20,
                       originY: 30,
+                      y: 5,
                   }}
                   xAccessor={({ item }) => item.date}
                   scale={scale.scaleTime}