Fixed #26 - axes now respect offsets properly and cleanup of other offset

example/package.json

@@ -6,7 +6,7 @@
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
-    "react": "^15.3.0",
+    "react": "~15.3.0",
     "react-native": "^0.35.0",
     "react-native-pathjs-charts": "file:../"
   }

package.json

@@ -41,7 +41,7 @@
     "react-native-svg": "^4.3.0"
   },
   "devDependencies": {
-    "react": "^15.3.0",
+    "react": "~15.3.0",
     "react-native": "^0.35.0"
   }
 }

src/Axis.js

@@ -62,16 +62,21 @@ class AxisStruct {
     const fixed = this.options.zeroAxis?this.scale(0):horizontal?yAxis.min:xAxis.min
     const start = {x: horizontal?xAxis.min:fixed, y: horizontal?fixed:yAxis.min}
     const end = {x:horizontal?xAxis.max:fixed,y: horizontal?fixed:yAxis.max}
+    const tailLength = this.options.tailLength || 10
 
     const margin = this.margin
     if (margin !== undefined){
       if (horizontal){
-        start.x -= margin.left || 0
-        end.x += margin.right || 0
+        start.x += (margin.left - tailLength) || 0
+        start.y += margin.top || 0
+        end.x += (margin.left) || 0
+        end.y += margin.top || 0
       }
       else {
-        start.y += margin.bottom || 0
-        end.y -= margin.top || 0
+        start.x += margin.left || 0
+        start.y += (margin.top + tailLength) || 0
+        end.x += margin.left || 0
+        end.y += (margin.top - tailLength)  || 0
       }
     }
 
@@ -80,8 +85,8 @@ class AxisStruct {
       path: Pathjs().moveto(start).lineto(end).closepath(),
       ticks: ticks,
       lines: ticks.map(c => {
-        const lineStart = {x: horizontal ? this.scale(c) : xAxis.min, y: horizontal ? yAxis.min : this.scale(c)}
-        return Pathjs().moveto(lineStart).lineto(horizontal ? lineStart.x : xAxis.max, horizontal ? yAxis.max : lineStart.y)
+        const lineStart = {x: horizontal ? this.scale(c) + margin.left : xAxis.min + margin.left, y: horizontal ? yAxis.min + margin.top : this.scale(c) + margin.top}
+        return Pathjs().moveto(lineStart).lineto(horizontal ? lineStart.x : xAxis.max + margin.left, horizontal ? yAxis.max + (margin.top - tailLength) : lineStart.y)
       },this)
     }
   }
@@ -143,6 +148,8 @@ export default class Axis extends Component {
     let offset = {
       x: chartArea.margin.left * -1,
       y: chartArea.margin.top * -1
+      // x: 0,
+      // y: 0
     }
 
     let returnV = <G>

src/Bar.js

@@ -123,7 +123,7 @@ export default class BarChart extends Component {
                         <G x={options.margin.left} y={options.margin.top}>
                         <Text fontFamily={textStyle.fontFamily}
                         fontSize={textStyle.fontSize} fontWeight={textStyle.fontWeight} fontStyle={textStyle.fontStyle}
-                        fill={textStyle.fill} x={c.line.centroid[0]} y={chartArea.y.min + 25} rotate={45} textAnchor="middle">{c.item.name}</Text></G>
+                        fill={textStyle.fill} x={c.line.centroid[0]} y={chartArea.y.min} rotate={45} textAnchor="middle">{c.item.name}</Text></G>
                         :null}
                 </G>
             )
@@ -132,9 +132,7 @@ export default class BarChart extends Component {
     return (<Svg width={options.width} height={options.height}>
               <G x={options.margin.left} y={options.margin.top}>
                 <Axis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
-                <G x={options.margin.left * -1 } y={options.margin.top * -1}>
                 {lines}
-                </G>
               </G>
             </Svg>)
   }

src/Line.js

@@ -92,20 +92,13 @@ export default class LineChart extends Component {
     if(showAreas){
       areas = _.map(chart.curves, function (c, i) {
         return <Path key={'areas' + i} d={ c.area.path.print() } fillOpacity={0.5} stroke="none" fill={ this.color(i) }/>
-      }.bind(this)) 
-    }
-
-    let offset = {
-      x: chartArea.margin.left * -1,
-      y: chartArea.margin.top * -1
+      }.bind(this))
     }
 
     let returnValue = <Svg width={options.width} height={options.height}>
                   <G x={options.margin.left} y={options.margin.top}>
-                      <G x={offset.x} y={offset.y}>
                         { areas }
                         { lines }
-                      </G>
                       <Axis key="x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
                       <Axis key="y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
                   </G>

src/Tree.js

@@ -97,9 +97,7 @@ export default class TreeChart extends Component {
     return (
             <Svg width={options.width} height={options.height}>
                 <G x={options.margin.left} y={options.margin.top}>
-                    <G x={options.margin.left * -1} y={options.margin.top * -1}>
-                      { curves }
-                    </G>
+                    { curves }
                     { nodes }
                 </G>
             </Svg>