diff --git a/CombinedChart.js b/CombinedChart.js index f08031b..e0a0133 100644 --- a/CombinedChart.js +++ b/CombinedChart.js @@ -1,96 +1,106 @@ -import React, {Component, PropTypes} from 'react'; -import {requireNativeComponent, View} from 'react-native'; +import React, { Component, PropTypes } from 'react'; +import { requireNativeComponent, View } from 'react-native'; class CombinedChart extends Component { - constructor(props) { - super(props); + constructor(props) { + super(props); + } + + render() { + let chartData = {}; + let children = this.props.children; + let { style, animateY, animateX, animateXY, ...other } = this.props; + + if (children.length) { + for (var i = 0; i < children.length; i++) { + var child = children[i] + chartData[child.props.chartType] = child.props.data; + } + } else { + chartData[children.props.chartType] = children.props.data; } - render() { - let chartData={}; - let children=this.props.children; - if(children.length){ - for (var i = 0; i < children.length; i++) { - var child=children[i] - chartData[child.props.chartType]=child.props.data; - } - }else{ - chartData[children.props.chartType]=children.props.data; - } - let { - style, - data, - ...other - }=this.props; - return ( - - ); + if (animateY) { + chartData.animateY = animateY + } else if (animateX) { + chartData.animateX = animateX + } else if (animateXY) { + chartData.animateXY = animateXY } + + return ( + + ); + } } CombinedChart.propTypes = { - ...View.propTypes, - data:PropTypes.object, - touchEnabled:PropTypes.bool, - dragEnabled:PropTypes.bool, - scaleEnabled:PropTypes.bool, - scaleXEnabled:PropTypes.bool, - scaleYEnabled:PropTypes.bool, - pinchZoom:PropTypes.bool, - doubleTapToZoomEnabled:PropTypes.bool, - highlightPerDragEnabled:PropTypes.bool, - highlightPerTapEnabled:PropTypes.bool, - dragDecelerationEnabled:PropTypes.bool, - dragDecelerationFrictionCoef:PropTypes.number, - maxVisibleValueCount:PropTypes.number, - limitLine:PropTypes.object, - description:PropTypes.string, - backgroundColor:PropTypes.string, - drawGridBackground:PropTypes.bool, - gridBackgroundColor:PropTypes.string, - visibleXRange:PropTypes.array, - borderColor:PropTypes.string, - borderWidth:PropTypes.number, - xAxis:PropTypes.object, - yAxisLeft:PropTypes.object, - yAxisRight:PropTypes.object, - yAxis:PropTypes.object, - fitScreen:PropTypes.bool, - chartPadding:PropTypes.string, - legend:PropTypes.object, - scaleX: PropTypes.number, - scaleY: PropTypes.number, - translateX: PropTypes.number, - translateY: PropTypes.number, - rotation: PropTypes.number, - renderToHardwareTextureAndroid: React.PropTypes.bool, - onLayout: React.PropTypes.bool, - accessibilityLiveRegion: React.PropTypes.string, - accessibilityComponentType: React.PropTypes.string, - importantForAccessibility: React.PropTypes.string, - accessibilityLabel: React.PropTypes.string, - testID: React.PropTypes.string, - viewCenter: React.PropTypes.array, - zoomTo: PropTypes.object, - extraOffsets: PropTypes.string + ...View.propTypes, + data: PropTypes.object, + touchEnabled: PropTypes.bool, + dragEnabled: PropTypes.bool, + scaleEnabled: PropTypes.bool, + scaleXEnabled: PropTypes.bool, + scaleYEnabled: PropTypes.bool, + pinchZoom: PropTypes.bool, + doubleTapToZoomEnabled: PropTypes.bool, + highlightPerDragEnabled: PropTypes.bool, + highlightPerTapEnabled: PropTypes.bool, + dragDecelerationEnabled: PropTypes.bool, + dragDecelerationFrictionCoef: PropTypes.number, + maxVisibleValueCount: PropTypes.number, + limitLine: PropTypes.object, + description: PropTypes.string, + backgroundColor: PropTypes.string, + drawGridBackground: PropTypes.bool, + gridBackgroundColor: PropTypes.string, + visibleXRange: PropTypes.array, + borderColor: PropTypes.string, + borderWidth: PropTypes.number, + xAxis: PropTypes.object, + yAxisLeft: PropTypes.object, + yAxisRight: PropTypes.object, + yAxis: PropTypes.object, + fitScreen: PropTypes.bool, + chartPadding: PropTypes.string, + legend: PropTypes.object, + scaleX: PropTypes.number, + scaleY: PropTypes.number, + translateX: PropTypes.number, + translateY: PropTypes.number, + rotation: PropTypes.number, + renderToHardwareTextureAndroid: React.PropTypes.bool, + onLayout: React.PropTypes.bool, + accessibilityLiveRegion: React.PropTypes.string, + accessibilityComponentType: React.PropTypes.string, + importantForAccessibility: React.PropTypes.string, + accessibilityLabel: React.PropTypes.string, + testID: React.PropTypes.string, + viewCenter: React.PropTypes.array, + zoomTo: PropTypes.object, + extraOffsets: PropTypes.string, + animateY: PropTypes.object, + animateX: PropTypes.object, + animateXY: PropTypes.object, }; class chart extends Component { - constructor(props) { - super(props); - } - render(){ - return null; - } + constructor(props) { + super(props); + } + render() { + return null; + } } chart.propTypes = { - chartType:PropTypes.string, - data:PropTypes.object + chartType: PropTypes.string, + data: PropTypes.object, }; -CombinedChart.Chart=chart; +CombinedChart.Chart = chart; // RIGHT_OF_CHART, // RIGHT_OF_CHART_CENTER, diff --git a/android/src/main/java/cn/mandata/react_native_mpchart/MPBarLineChartManager.java b/android/src/main/java/cn/mandata/react_native_mpchart/MPBarLineChartManager.java index 769c73e..3c89ec1 100644 --- a/android/src/main/java/cn/mandata/react_native_mpchart/MPBarLineChartManager.java +++ b/android/src/main/java/cn/mandata/react_native_mpchart/MPBarLineChartManager.java @@ -241,7 +241,13 @@ private void setYAxisInfo(YAxis axis,ReadableMap v){ if(v.hasKey("spaceBottom")) axis.setSpaceBottom((float) (v.getDouble("spaceBottom"))); if(v.hasKey("showOnlyMinMax")) axis.setShowOnlyMinMax(v.getBoolean("showOnlyMinMax")); - if(v.hasKey("labelCount")) axis.setLabelCount(v.getInt("labelCount"), true); + if(v.hasKey("labelCount")) { + boolean labelCountForce = false; + if (v.hasKey("labelCountForce")) { + labelCountForce = v.getBoolean("labelCountForce"); + } + axis.setLabelCount(v.getInt("labelCount"), labelCountForce); + } if(v.hasKey("position")) { String name=v.getString("position"); diff --git a/android/src/main/java/cn/mandata/react_native_mpchart/MPCombinedChartManager.java b/android/src/main/java/cn/mandata/react_native_mpchart/MPCombinedChartManager.java index e359007..cfc5f86 100644 --- a/android/src/main/java/cn/mandata/react_native_mpchart/MPCombinedChartManager.java +++ b/android/src/main/java/cn/mandata/react_native_mpchart/MPCombinedChartManager.java @@ -35,6 +35,7 @@ import com.github.mikephil.charting.data.LineData; import com.github.mikephil.charting.data.LineDataSet; import com.github.mikephil.charting.utils.ColorTemplate; +import com.github.mikephil.charting.components.YAxis.AxisDependency; import java.util.List; import java.util.ArrayList; @@ -55,38 +56,6 @@ public String getName() { @Override protected CombinedChart createViewInstance(ThemedReactContext reactContext) { CombinedChart mChart=new CombinedChart(reactContext); - // return chart; - - /* mChart.setDescription(""); - mChart.setBackgroundColor(Color.WHITE); - mChart.setDrawGridBackground(false); - mChart.setDrawBarShadow(false); - - // draw bars behind lines - mChart.setDrawOrder(new CombinedChart.DrawOrder[] { - CombinedChart.DrawOrder.BAR, CombinedChart.DrawOrder.BUBBLE, CombinedChart.DrawOrder.CANDLE, CombinedChart.DrawOrder.LINE, CombinedChart.DrawOrder.SCATTER - }); - - YAxis rightAxis = mChart.getAxisRight(); - rightAxis.setDrawGridLines(false); - - YAxis leftAxis = mChart.getAxisLeft(); - leftAxis.setDrawGridLines(false); - - XAxis xAxis = mChart.getXAxis(); - xAxis.setPosition(XAxis.XAxisPosition.BOTH_SIDED); - - CombinedData data = new CombinedData(mMonths); - - data.setData(generateLineData()); - data.setData(generateBarData()); -// data.setData(generateBubbleData()); -// data.setData(generateScatterData()); -// data.setData(generateCandleData()); - - mChart.setData(data); - mChart.invalidate();*/ - return mChart; } //{xValues:[],yValues:[{data:[],label:"",config:{}},{...}]} @@ -116,6 +85,12 @@ public LineData getLineData(ReadableMap rm){ LineDataSet dataSet=new LineDataSet(entries,label); if(config.hasKey("drawCircles")) dataSet.setDrawCircles(config.getBoolean("drawCircles")); if(config.hasKey("circleSize")) dataSet.setCircleSize((float) config.getDouble("circleSize")); + if(config.hasKey("lineWidth")) dataSet.setLineWidth((float) config.getDouble("lineWidth")); + if(config.hasKey("drawValues")) dataSet.setDrawValues(config.getBoolean("drawValues")); + if(config.hasKey("valueTextColor")) dataSet.setValueTextColor(Color.parseColor(config.getString("valueTextColor"))); + if(config.hasKey("valueTextSize")) dataSet.setValueTextSize((float)config.getDouble("valueTextSize")); + + if(config.hasKey("drawFill")) dataSet.setDrawFilled(config.getBoolean("drawFill")); if(config.hasKey("colors")){ ReadableArray colorsArray = config.getArray("colors"); ArrayList colors = new ArrayList<>(); @@ -123,11 +98,19 @@ public LineData getLineData(ReadableMap rm){ colors.add(Color.parseColor(colorsArray.getString(c))); } dataSet.setColors(colors); - }else - if(config.hasKey("color")) { + } else if(config.hasKey("color")) { int[] colors=new int[]{Color.parseColor(config.getString("color"))}; dataSet.setColors(colors); } + + if (config.hasKey("axisDependency")) { + AxisDependency axisDependency = AxisDependency.LEFT; + if (config.getString("axisDependency").equalsIgnoreCase("RIGHT")) { + axisDependency = AxisDependency.RIGHT; + } + dataSet.setAxisDependency(axisDependency); + } + chartData.addDataSet(dataSet); } return chartData; @@ -155,6 +138,7 @@ public BarData getBarData(ReadableMap rm){ } BarDataSet dataSet=new BarDataSet(entries,label); ReadableMap config= map.getMap("config"); + if(config.hasKey("drawValues")) dataSet.setDrawValues(config.getBoolean("drawValues")); if(config.hasKey("colors")){ ReadableArray colorsArray = config.getArray("colors"); ArrayList colors = new ArrayList<>(); @@ -162,64 +146,23 @@ public BarData getBarData(ReadableMap rm){ colors.add(Color.parseColor(colorsArray.getString(c))); } dataSet.setColors(colors); - }else - if(config.hasKey("color")) { + }else if(config.hasKey("color")) { int[] colors=new int[]{Color.parseColor(config.getString("color"))}; dataSet.setColors(colors); } + + if (config.hasKey("axisDependency")) { + AxisDependency axisDependency = AxisDependency.RIGHT; + if (config.getString("axisDependency").equalsIgnoreCase("LEFT")) { + axisDependency = AxisDependency.LEFT; + } + dataSet.setAxisDependency(axisDependency); + } + dataSetList.add(dataSet); } BarData barData=new BarData(xVals,dataSetList); return barData; - - /* int n=5; - ArrayList xVals = new ArrayList(); - for (int i = 0; i < n; i++) { - xVals.add((i+1990) + ""); - } - - ArrayList yVals1 = new ArrayList(); - ArrayList yVals2 = new ArrayList(); - ArrayList yVals3 = new ArrayList(); - - float mult = 1000f; - - for (int i = 0; i < n; i++) { - float val = (float) (Math.random() * mult) + 3; - yVals1.add(new BarEntry(val, i)); - } - - for (int i = 0; i < n; i++) { - float val = (float) (Math.random() * mult) + 3; - yVals2.add(new BarEntry(val, i)); - } - - for (int i = 0; i < n; i++) { - float val = (float) (Math.random() * mult) + 3; - yVals3.add(new BarEntry(val, i)); - } - - // create 3 datasets with different types - BarDataSet set1 = new BarDataSet(yVals1, "Company A"); - // set1.setColors(ColorTemplate.createColors(getApplicationContext(), - // ColorTemplate.FRESH_COLORS)); - set1.setColor(Color.rgb(104, 241, 175)); - BarDataSet set2 = new BarDataSet(yVals2, "Company B"); - set2.setColor(Color.rgb(164, 228, 251)); - BarDataSet set3 = new BarDataSet(yVals3, "Company C"); - set3.setColor(Color.rgb(242, 247, 158)); - - ArrayList dataSets = new ArrayList(); - dataSets.add(set1); - dataSets.add(set2); - dataSets.add(set3); - - BarData data = new BarData(xVals, dataSets); -// data.setValueFormatter(new LargeValueFormatter()); - - // add space between the dataset groups in percent of bar-width - data.setGroupSpace(80f); - return data;*/ } public CandleData getCandleData(ReadableMap rm){ @@ -297,58 +240,33 @@ public void setData(CombinedChart chart,ReadableMap rm){ } chart.clear(); chart.setData(chartData); - chart.invalidate(); + + /** + * Graph animation configurations + * If no animation config provided, call chart.invalidate() + * animation configs are maps with the following keys + * - duration or durationX/durationY in case of animateXY + * - support for easeFunction yet to be given + */ + if (rm.hasKey("animateX")) { + chart.animateX(rm.getMap("animateX").getInt("duration")); + } else if (rm.hasKey("animateY")) { + chart.animateY(rm.getMap("animateY").getInt("duration")); + } else if (rm.hasKey("animateXY")) { + ReadableMap animationConfig = rm.getMap("animateXY"); + chart.animateXY( + animationConfig.getInt("durationX"), + animationConfig.getInt("durationY") + ); + } else { + chart.invalidate(); + } + + // chart.invalidate(); } private final int itemcount = 12; private float getRandom(float range, float startsfrom) { return (float) (Math.random() * range) + startsfrom; } - private LineData generateLineData() { - - LineData d = new LineData(); - - ArrayList entries = new ArrayList(); - - for (int index = 0; index < itemcount; index++) - entries.add(new Entry(getRandom(15, 10), index)); - - LineDataSet set = new LineDataSet(entries, "Line DataSet"); - set.setColor(Color.rgb(240, 238, 70)); - set.setLineWidth(2.5f); - set.setCircleColor(Color.rgb(240, 238, 70)); - set.setCircleSize(5f); - set.setFillColor(Color.rgb(240, 238, 70)); - set.setDrawCubic(true); - set.setDrawValues(true); - set.setValueTextSize(10f); - set.setValueTextColor(Color.rgb(240, 238, 70)); - - set.setAxisDependency(YAxis.AxisDependency.LEFT); - - d.addDataSet(set); - - return d; - } - - private BarData generateBarData() { - - BarData d = new BarData(); - - ArrayList entries = new ArrayList(); - - for (int index = 0; index < itemcount; index++) - entries.add(new BarEntry(getRandom(15, 30), index)); - - BarDataSet set = new BarDataSet(entries, "Bar DataSet"); - set.setColor(Color.rgb(60, 220, 78)); - set.setValueTextColor(Color.rgb(60, 220, 78)); - set.setValueTextSize(10f); - d.addDataSet(set); - - set.setAxisDependency(YAxis.AxisDependency.LEFT); - - return d; - } - } diff --git a/android/src/main/java/cn/mandata/react_native_mpchart/MPLineChartManager.java b/android/src/main/java/cn/mandata/react_native_mpchart/MPLineChartManager.java index c1bb3d8..37d1bdb 100644 --- a/android/src/main/java/cn/mandata/react_native_mpchart/MPLineChartManager.java +++ b/android/src/main/java/cn/mandata/react_native_mpchart/MPLineChartManager.java @@ -90,7 +90,6 @@ public void setData(LineChart chart,ReadableMap rm){ if(config.hasKey("valueTextSize")) dataSet.setValueTextSize((float)config.getDouble("valueTextSize")); if (config.hasKey("drawCircleHole")) dataSet.setDrawCircleHole(config.getBoolean("drawCircleHole")); - if(config.hasKey("drawValues")) dataSet.setDrawValues(config.getBoolean("drawValues")); if(config.hasKey("drawStepped")) dataSet.setDrawStepped(config.getBoolean("drawStepped")); if(config.hasKey("colors")){ ReadableArray colorsArray = config.getArray("colors");