@urvish-procare/react-native-charts-wrapper 0.6.0

package/lib/ChartDataSetConfig.js

@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import {
+  requireNativeComponent,
+  View
+} from 'react-native';
+
+
+const chartDataSetConfig = {
+  common: {
+    color: PropTypes.number,
+    colors: PropTypes.arrayOf(PropTypes.number),
+    highlightEnabled:PropTypes.bool,
+    drawValues: PropTypes.bool,
+    valueTextSize:PropTypes.number,
+    valueTextColor:PropTypes.number,
+    visible:PropTypes.bool,
+    valueFormatter: PropTypes.oneOfType([
+      PropTypes.oneOf(['largeValue', 'percent', 'date', 'labelByXValue']),
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string)
+    ]),
+    valueFormatterPattern: PropTypes.string,
+    valueFormatterLabels: PropTypes.arrayOf(PropTypes.shape({
+      x: PropTypes.number.isRequired,
+      label: PropTypes.string.isRequired,
+    })),
+    axisDependency:PropTypes.oneOf(['LEFT', 'RIGHT'])
+  },
+
+  barLineScatterCandleBubble: {
+    highlightColor: PropTypes.number
+  },
+
+  lineScatterCandleRadar: {
+    drawVerticalHighlightIndicator: PropTypes.bool,
+    drawHorizontalHighlightIndicator: PropTypes.bool,
+    highlightLineWidth: PropTypes.number
+  },
+
+  lineRadar: {
+    fillGradient: PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.number),
+      // iOS
+      positions: PropTypes.arrayOf(PropTypes.number),
+      angle: PropTypes.number,
+      // Android
+      orientation: PropTypes.oneOf([
+        // draw the gradient from the top to the bottom
+        'TOP_BOTTOM',
+        // draw the gradient from the top-right to the bottom-left
+        'TR_BL',
+        // draw the gradient from the right to the left
+        'RIGHT_LEFT',
+        // draw the gradient from the bottom-right to the top-left
+        'BR_TL',
+        // draw the gradient from the bottom to the top
+        'BOTTOM_TOP',
+        // draw the gradient from the bottom-left to the top-right
+        'BL_TR',
+        // draw the gradient from the left to the right
+        'LEFT_RIGHT',
+        // draw the gradient from the top-left to the bottom-right
+        'TL_BR',
+      ]),
+    }),
+    fillColor: PropTypes.number,
+    fillAlpha: PropTypes.number,
+    drawFilled: PropTypes.bool,
+    lineWidth: (props, propName, componentName) => {
+      let lineWidth = props[propName];
+      if (lineWidth && (typeof lineWidth !== 'number' || lineWidth < 0.2 || lineWidth > 10)) {
+        return new Error(
+          `Invalid prop ${propName} supplied to '${componentName}'. Value must be number and between 0.2f and 10f`
+        );
+      }
+    }
+  }
+};
+
+export default chartDataSetConfig;

package/lib/CombinedChart.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {
+  requireNativeComponent,
+  View
+} from 'react-native';
+
+import BarLineChartBase from './BarLineChartBase';
+import {combinedData} from './ChartDataConfig';
+import MoveEnhancer from './MoveEnhancer'
+import ScaleEnhancer from "./ScaleEnhancer";
+import HighlightEnhancer from "./HighlightEnhancer";
+import ScrollEnhancer from "./ScrollEnhancer";
+
+class CombinedChart extends React.Component {
+  getNativeComponentName() {
+    return 'RNCombinedChart'
+  }
+
+  getNativeComponentRef() {
+    return this.nativeComponentRef
+  }
+
+  render() {
+    return <RNCombinedChart {...this.props} ref={ref => this.nativeComponentRef = ref} />;
+  }
+
+}
+
+CombinedChart.propTypes = {
+  ...BarLineChartBase.propTypes,
+  drawOrder: PropTypes.arrayOf(PropTypes.oneOf(['BAR', 'BUBBLE', 'LINE', 'CANDLE', 'SCATTER'])),
+  drawValueAboveBar: PropTypes.bool,
+  highlightFullBarEnabled: PropTypes.bool,
+  drawBarShadow: PropTypes.bool,
+  data: combinedData
+};
+
+var RNCombinedChart = requireNativeComponent('RNCombinedChart', CombinedChart, {
+  nativeOnly: {onSelect: true, onChange: true}
+});
+
+export default ScrollEnhancer(HighlightEnhancer(ScaleEnhancer(MoveEnhancer(CombinedChart))))

package/lib/HighlightEnhancer.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import { UIManager, findNodeHandle} from 'react-native';
+
+
+export default function HighlightEnhancer(Chart) {
+  return class HighlightExtended extends Chart {
+    highlights(config) {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(this.getNativeComponentRef()),
+        UIManager.getViewManagerConfig(this.getNativeComponentName()).Commands.highlights,
+        [config]
+      );
+    }
+  }
+}

package/lib/HorizontalBarChart.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {
+  requireNativeComponent,
+  View
+} from 'react-native';
+
+import BarLineChartBase from './BarLineChartBase';
+import {barData} from './ChartDataConfig';
+import MoveEnhancer from './MoveEnhancer'
+import ScaleEnhancer from "./ScaleEnhancer";
+import HighlightEnhancer from "./HighlightEnhancer";
+
+class HorizontalBarChart extends React.Component {
+  getNativeComponentName() {
+    return 'RNHorizontalBarChart'
+  }
+
+  getNativeComponentRef() {
+    return this.nativeComponentRef
+  }
+
+  render() {
+    return <RNHorizontalBarChart {...this.props} ref={ref => this.nativeComponentRef = ref} />;
+  }
+
+}
+
+HorizontalBarChart.propTypes = {
+  ...BarLineChartBase.propTypes,
+
+  drawValueAboveBar: PropTypes.bool,
+  drawBarShadow: PropTypes.bool,
+  highlightFullBarEnabled: PropTypes.bool,
+
+  data: barData
+};
+
+var RNHorizontalBarChart = requireNativeComponent('RNHorizontalBarChart', HorizontalBarChart, {
+  nativeOnly: {onSelect: true, onChange: true}
+});
+
+export default HighlightEnhancer(ScaleEnhancer(MoveEnhancer(HorizontalBarChart)))

package/lib/LineChart.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {
+  requireNativeComponent,
+  View
+} from 'react-native';
+
+import BarLineChartBase from './BarLineChartBase';
+import {lineData} from './ChartDataConfig';
+import MoveEnhancer from './MoveEnhancer'
+import ScaleEnhancer from "./ScaleEnhancer";
+import HighlightEnhancer from "./HighlightEnhancer";
+import ScrollEnhancer from "./ScrollEnhancer";
+
+class LineChart extends React.Component {
+  getNativeComponentName() {
+    return 'RNLineChart'
+  }
+
+  getNativeComponentRef() {
+    return this.nativeComponentRef
+  }
+
+  render() {
+    return <RNLineChart {...this.props} ref={ref => this.nativeComponentRef = ref} />;
+  }
+}
+
+LineChart.propTypes = {
+  ...BarLineChartBase.propTypes,
+
+  data: lineData,
+};
+
+var RNLineChart = requireNativeComponent('RNLineChart', LineChart, {
+  nativeOnly: {onSelect: true, onChange: true}
+});
+
+export default ScrollEnhancer(HighlightEnhancer(ScaleEnhancer(MoveEnhancer(LineChart))))

package/lib/MoveEnhancer.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import { UIManager, findNodeHandle} from 'react-native';
+
+
+export default function MoveEnhancer(Chart) {
+  return class MoveExtended extends Chart {
+    // x, y, left/right
+    moveViewTo(x, y, axisDependency) {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(this.getNativeComponentRef()),
+        UIManager.getViewManagerConfig(this.getNativeComponentName()).Commands.moveViewTo,
+        [x, y, axisDependency]
+      );
+    }
+
+
+    moveViewToX(x) {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(this.getNativeComponentRef()),
+        UIManager.getViewManagerConfig(this.getNativeComponentName()).Commands.moveViewToX,
+        [x]
+      );
+    }
+
+    moveViewToAnimated(x, y, axisDependency, duration) {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(this.getNativeComponentRef()),
+        UIManager.getViewManagerConfig(this.getNativeComponentName()).Commands.moveViewToAnimated,
+        [x, y, axisDependency, duration]
+      );
+    }
+
+    centerViewTo(x, y, axisDependency) {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(this.getNativeComponentRef()),
+        UIManager.getViewManagerConfig(this.getNativeComponentName()).Commands.centerViewTo,
+        [x, y, axisDependency]
+      );
+    }
+
+    centerViewToAnimated(x, y, axisDependency, duration) {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(this.getNativeComponentRef()),
+        UIManager.getViewManagerConfig(this.getNativeComponentName()).Commands.centerViewToAnimated,
+        [x, y, axisDependency, duration]
+      );
+    }
+  }
+}

package/lib/PieChart.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {
+  requireNativeComponent,
+  View
+} from 'react-native';
+
+import PieRadarChartBase from './PieRadarChartBase';
+import {pieData} from './ChartDataConfig';
+
+class PieChart extends React.Component {
+  getNativeComponentName() {
+    return 'RNPieChart'
+  }
+
+  getNativeComponentRef() {
+    return this.nativeComponentRef
+  }
+
+  render() {
+    return <RNPieChart {...this.props} ref={ref => this.nativeComponentRef = ref} />;
+  }
+}
+
+PieChart.propTypes = {
+  ...PieRadarChartBase.propTypes,
+
+  extraOffsets: PropTypes.shape({
+    left: PropTypes.number,
+    top: PropTypes.number,
+    right: PropTypes.number,
+    bottom: PropTypes.number
+  }),
+
+  drawEntryLabels: PropTypes.bool,
+  usePercentValues: PropTypes.bool,
+
+  centerText: PropTypes.string,
+  styledCenterText: PropTypes.shape({
+    text: PropTypes.string,
+    color: PropTypes.number,
+    fontFamily: PropTypes.string,
+    size: PropTypes.number
+  }),
+  centerTextRadiusPercent: PropTypes.number,
+  holeRadius: PropTypes.number,
+  holeColor: PropTypes.number,
+  transparentCircleRadius: PropTypes.number,
+  transparentCircleColor: PropTypes.number,
+
+  entryLabelColor: PropTypes.number,
+  entryLabelTextSize: PropTypes.number,
+  entryLabelFontFamily: PropTypes.string,
+  maxAngle: PropTypes.number,
+
+  // TODO PieChart should have only one dataset
+  data: pieData
+};
+
+var RNPieChart = requireNativeComponent('RNPieChart', PieChart, {
+  nativeOnly: {onSelect: true, onChange: true}
+});
+
+export default PieChart

package/lib/PieRadarChartBase.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import {
+  View
+} from 'react-native';
+
+import ChartBase from './ChartBase';
+
+const iface = {
+  propTypes: {
+    ...ChartBase.propTypes,
+
+    minOffset: PropTypes.number,
+    rotationEnabled: PropTypes.bool,
+    rotationAngle: PropTypes.number
+  }
+};
+
+export default iface;

package/lib/RadarChart.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {
+  requireNativeComponent,
+  View
+} from 'react-native';
+
+import PieRadarChartBase from './PieRadarChartBase';
+import {yAxisIface} from './AxisIface';
+import {radarData} from './ChartDataConfig';
+
+class RadarChart extends React.Component {
+  getNativeComponentName() {
+    return 'RNRadarChart'
+  }
+
+  getNativeComponentRef() {
+    return this.nativeComponentRef
+  }
+
+  render() {
+    return <RNRadarChart {...this.props} ref={ref => this.nativeComponentRef = ref} />;
+  }
+}
+
+RadarChart.propTypes = {
+  ...PieRadarChartBase.propTypes,
+
+  yAxis: PropTypes.shape(yAxisIface),
+
+  drawWeb: PropTypes.bool,
+  skipWebLineCount: PropTypes.number,
+
+  webLineWidth: PropTypes.number,
+  webLineWidthInner: PropTypes.number,
+  webAlpha: PropTypes.number,
+  webColor: PropTypes.number,
+  webColorInner: PropTypes.number,
+  extraOffsets: PropTypes.shape({
+    left: PropTypes.number,
+    top: PropTypes.number, 
+    right: PropTypes.number,
+    bottom: PropTypes.number
+  }),
+  data: radarData
+};
+
+var RNRadarChart = requireNativeComponent('RNRadarChart', RadarChart, {
+  nativeOnly: {onSelect: true, onChange: true}
+});
+
+export default RadarChart

package/lib/ScaleEnhancer.js

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import { UIManager, findNodeHandle} from 'react-native';
+
+
+export default function ScaleEnhancer(Chart) {
+  return class ScaleExtended extends Chart {
+    fitScreen() {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(this.getNativeComponentRef()),
+        UIManager.getViewManagerConfig(this.getNativeComponentName()).Commands.fitScreen,
+        []
+      );
+    }
+
+  }
+}

package/lib/ScatterChart.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react';
+import {
+  requireNativeComponent,
+  View
+} from 'react-native';
+
+import BarLineChartBase from './BarLineChartBase';
+import {scatterData} from './ChartDataConfig';
+import MoveEnhancer from './MoveEnhancer'
+import ScaleEnhancer from "./ScaleEnhancer";
+import HighlightEnhancer from "./HighlightEnhancer";
+import ScrollEnhancer from "./ScrollEnhancer";
+
+class ScatterChart extends React.Component {
+  getNativeComponentName() {
+    return 'RNScatterChart'
+  }
+
+  getNativeComponentRef() {
+    return this.nativeComponentRef
+  }
+
+  render() {
+    return <RNScatterChart {...this.props} ref={ref => this.nativeComponentRef = ref} />;
+  }
+}
+
+ScatterChart.propTypes = {
+  ...BarLineChartBase.propTypes,
+
+  data: scatterData
+};
+
+var RNScatterChart = requireNativeComponent('RNScatterChart', ScatterChart, {
+  nativeOnly: {onSelect: true, onChange: true}
+});
+
+export default ScrollEnhancer(HighlightEnhancer(ScaleEnhancer(MoveEnhancer(ScatterChart))))

package/lib/ScrollEnhancer.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import { UIManager, findNodeHandle} from 'react-native';
+
+
+export default function ScrollEnhancer(Chart) {
+  return class ScrollExtended extends Chart {
+    setDataAndLockIndex(data) {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(this.getNativeComponentRef()),
+        UIManager.getViewManagerConfig(this.getNativeComponentName()).Commands.setDataAndLockIndex,
+        [data]
+      );
+    }
+  }
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@urvish-procare/react-native-charts-wrapper",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wuxudong/react-native-charts-wrapper.git"
+  },
+  "version": "0.6.0",
+  "description": "A react-native charts support both android and iOS.",
+  "author": "wuxudong",
+  "license": "MIT",
+  "nativePackage": true,
+  "homepage": "https://github.com/wuxudong/react-native-charts-wrapper",
+  "keywords": [
+    "react native",
+    "chart",
+    "android",
+    "MPAndroidChart",
+    "ios",
+    "Charts"
+  ],
+  "files": [
+    "android/src",
+    "android/build.gradle",
+    "android/gradle.properties",
+    "ios/**/*.h",
+    "ios/**/*.m",
+    "ios/**/*.swift",
+    "lib",
+    "index.js",
+    "react-native-charts-wrapper.podspec",
+    "ios/ReactNativeCharts/ReactNativeCharts.xcodeproj/project.pbxproj"
+  ],
+  "dependencies": {
+    "deprecated-react-native-prop-types": "^2.3.0",
+    "prop-types": "^15.8.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0"
+  }
+}

package/react-native-charts-wrapper.podspec

@@ -0,0 +1,26 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = 'react-native-charts-wrapper'
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.author       = package["author"]
+
+  s.homepage     = package["homepage"]
+
+  s.license      = package["license"]
+  s.platform     = :ios, "12.0"
+
+  s.source       = { :git => "https://github.com/wuxudong/react-native-charts-wrapper.git", :tag => "#{s.version}" }
+  s.source_files = "ios/ReactNativeCharts/**/*.{h,m,swift}"
+  s.static_framework = true
+
+  s.swift_version = '5.0'
+  s.dependency 'React'
+  s.dependency 'SwiftyJSON', '5.0'
+  s.dependency 'DGCharts', '5.0.0'
+
+
+end