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

package/lib/AxisIface.js

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+
+export const axisIface = {
+  // what is drawn
+  enabled: PropTypes.bool,
+  drawLabels: PropTypes.bool,
+  drawAxisLine: PropTypes.bool,
+  drawGridLines: PropTypes.bool,
+
+  // style
+  textColor: PropTypes.number,
+  textSize: PropTypes.number,
+  fontFamily: PropTypes.string,
+  fontStyle: PropTypes.string,
+  fontWeight: PropTypes.string,
+  gridColor: PropTypes.number,
+  gridLineWidth: PropTypes.number,
+  axisLineColor: PropTypes.number,
+  axisLineWidth: PropTypes.number,
+  gridDashedLine: PropTypes.shape({
+    lineLength: PropTypes.number,
+    spaceLength: PropTypes.number,
+    phase: PropTypes.number
+  }),
+
+  // limit lines
+  limitLines: PropTypes.arrayOf(
+    PropTypes.shape({
+      limit: PropTypes.number.isRequired,
+      label: PropTypes.string,
+      lineColor: PropTypes.number,
+      lineWidth: PropTypes.number,
+      valueTextColor: PropTypes.number,
+      valueFont: PropTypes.number,
+      fontFamily: PropTypes.string,
+      fontStyle: PropTypes.string,
+      fontWeight: PropTypes.string,
+      labelPosition: PropTypes.oneOf(['LEFT_TOP', 'LEFT_BOTTOM', 'RIGHT_TOP', 'RIGHT_BOTTOM']),
+      lineDashPhase: PropTypes.number,
+      lineDashLengths: PropTypes.arrayOf(PropTypes.number)
+    })
+  ),
+  drawLimitLinesBehindData: PropTypes.bool,
+
+  axisMaximum: PropTypes.number,
+  axisMinimum: PropTypes.number,
+  granularity: PropTypes.number,
+  granularityEnabled: PropTypes.bool,
+
+  labelCount: PropTypes.number,
+  labelCountForce: PropTypes.bool,
+
+  centerAxisLabels: PropTypes.bool, // Centers the axis labels instead of drawing them at their original position. This is useful especially for grouped BarChart.
+
+  // formatting
+  valueFormatter: PropTypes.oneOfType([
+    PropTypes.oneOf(['largeValue', 'percent', 'date']),
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+
+  // valueFormatterPattern, since, timeUnit are used when valueFormatter is 'date'
+  // since: milliseconds of 2018-6-1, timeUnit: DAYS, x:9, valueFormatterPattern: YYYY-MM-dd
+  // will display 2018-6-10
+
+  // Note: for iOS/Charts, double is used for x, but in MpAndroidChart, float is used for x.
+  // so in android, there will be precision loss when you use MILLISECONDS/SECOND/MINUTES as x value.   
+  // you can use a different since like seconds of 2019 or use timeUnit DAYS, then x value will be within a valid range.
+
+  valueFormatterPattern: PropTypes.string,
+  since: PropTypes.number, // milliseconds from 1970-1-1 when x=0
+  timeUnit: PropTypes.oneOf(['MILLISECONDS', 'SECONDS', 'MINUTES', 'HOURS', 'DAYS']), // timeUnit of x,
+};
+
+export const xAxisIface = {
+  ...axisIface,
+
+  labelRotationAngle: PropTypes.number,
+  avoidFirstLastClipping: PropTypes.bool,
+  position: PropTypes.oneOf(['TOP', 'BOTTOM', 'BOTH_SIDED', 'TOP_INSIDE', 'BOTTOM_INSIDE']),
+  yOffset: PropTypes.number
+};
+
+export const yAxisIface = {
+  ...axisIface,
+
+  inverted: PropTypes.bool,
+  spaceTop: PropTypes.number,
+  spaceBottom: PropTypes.number,
+
+  position: PropTypes.oneOf(['OUTSIDE_CHART', 'INSIDE_CHART']),
+
+  maxWidth: PropTypes.number,
+  minWidth: PropTypes.number,
+
+  // zero line
+  zeroLine: PropTypes.shape({
+    enabled: PropTypes.bool,
+    lineWidth: PropTypes.number,
+    lineColor: PropTypes.number
+  })
+};

package/lib/BarChart.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";
+import ScrollEnhancer from "./ScrollEnhancer";
+
+class BarChart extends React.Component {
+  getNativeComponentName() {
+    return 'RNBarChart'
+  }
+
+  getNativeComponentRef() {
+    return this.nativeComponentRef
+  }
+
+  render() {
+    return <RNBarChart {...this.props} ref={ref => this.nativeComponentRef = ref} />;
+  }
+}
+
+BarChart.propTypes = {
+  ...BarLineChartBase.propTypes,
+
+  drawValueAboveBar: PropTypes.bool,
+  drawBarShadow: PropTypes.bool,
+  highlightFullBarEnabled: PropTypes.bool,
+
+  data: barData
+}
+
+var RNBarChart = requireNativeComponent('RNBarChart', BarChart, {
+  nativeOnly: {onSelect: true, onChange: true}
+})
+
+export default ScrollEnhancer(HighlightEnhancer(ScaleEnhancer(MoveEnhancer(BarChart))))

package/lib/BarLineChartBase.js

@@ -0,0 +1,86 @@
+import PropTypes from 'prop-types';
+import {
+  View
+} from 'react-native';
+
+import ChartBase from './ChartBase';
+import {yAxisIface} from './AxisIface';
+
+const iface = {
+  propTypes: {
+    ...ChartBase.propTypes,
+    maxHighlightDistance: PropTypes.number,
+    drawGridBackground: PropTypes.bool,
+    gridBackgroundColor: PropTypes.number,
+
+    drawBorders: PropTypes.bool,
+    borderColor: PropTypes.number,
+    borderWidth: PropTypes.number,
+
+    minOffset: PropTypes.number,
+    maxVisibleValueCount: PropTypes.number,
+    visibleRange: PropTypes.shape({
+      x: PropTypes.shape({
+        min: PropTypes.number,
+        max: PropTypes.number
+      }),
+      y: PropTypes.shape({
+        left: PropTypes.shape({
+          min: PropTypes.number,
+          max: PropTypes.number
+        }),
+        right: PropTypes.shape({
+          min: PropTypes.number,
+          max: PropTypes.number
+        })
+      })
+    }),
+    maxScale: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number
+    }),
+    autoScaleMinMaxEnabled: PropTypes.bool,
+    keepPositionOnRotation: PropTypes.bool,
+
+    highlightPerDragEnabled: PropTypes.bool,
+
+    scaleEnabled: PropTypes.bool,
+    scaleXEnabled: PropTypes.bool,
+    scaleYEnabled: PropTypes.bool,
+    dragEnabled: PropTypes.bool,
+    pinchZoom: PropTypes.bool,
+    doubleTapToZoomEnabled: PropTypes.bool,
+
+    yAxis: PropTypes.shape({
+      left: PropTypes.shape(yAxisIface),
+      right: PropTypes.shape(yAxisIface)
+    }),
+    zoom: PropTypes.shape({
+      scaleX: PropTypes.number.isRequired,
+      scaleY: PropTypes.number.isRequired,
+      xValue: PropTypes.number.isRequired,
+      yValue: PropTypes.number.isRequired,
+      axisDependency: PropTypes.oneOf(['LEFT', 'RIGHT'])
+    }),
+    viewPortOffsets: PropTypes.shape({
+      left: PropTypes.number,
+      top: PropTypes.number,
+      right: PropTypes.number,
+      bottom: PropTypes.number
+    }),
+    extraOffsets: PropTypes.shape({
+      left: PropTypes.number,
+      top: PropTypes.number,
+      right: PropTypes.number,
+      bottom: PropTypes.number
+    }),
+
+    group: PropTypes.string,
+    identifier: PropTypes.string,
+    syncX: PropTypes.bool,
+    syncY: PropTypes.bool,
+
+  }
+};
+
+export default iface;

package/lib/BubbleChart.js

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

package/lib/CandleStickChart.js

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

package/lib/ChartBase.js

@@ -0,0 +1,131 @@
+import PropTypes from 'prop-types';
+
+import {xAxisIface} from './AxisIface'
+import {ViewPropTypes} from "deprecated-react-native-prop-types";
+
+const descriptionIface = {
+  text: PropTypes.string,
+  textColor: PropTypes.number,
+  textSize: PropTypes.number,
+
+  positionX: PropTypes.number,
+  positionY: PropTypes.number,
+};
+
+const legendIface = {
+  enabled: PropTypes.bool,
+
+  textColor: PropTypes.number,
+  textSize: PropTypes.number,
+  fontFamily: PropTypes.string,
+  fontStyle: PropTypes.number,
+  fontWeight: PropTypes.number,
+
+  wordWrapEnabled: PropTypes.bool,
+  maxSizePercent: PropTypes.number,
+
+  horizontalAlignment: PropTypes.oneOf(['LEFT', 'CENTER', 'RIGHT']),
+  verticalAlignment: PropTypes.oneOf(['TOP', 'CENTER', 'BOTTOM']),
+  orientation: PropTypes.oneOf(['HORIZONTAL', 'VERTICAL']),
+  drawInside: PropTypes.bool,
+  direction: PropTypes.oneOf(['LEFT_TO_RIGHT', 'RIGHT_TO_LEFT']),
+
+  form: PropTypes.oneOf(['NONE', 'EMPTY', 'DEFAULT', 'SQUARE', 'CIRCLE', 'LINE']),
+  formSize: PropTypes.number,
+  xEntrySpace: PropTypes.number,
+  yEntrySpace: PropTypes.number,
+  formToTextSpace: PropTypes.number,
+
+  custom: PropTypes.shape({
+    colors: PropTypes.arrayOf(PropTypes.number),
+    labels: PropTypes.arrayOf(PropTypes.string)
+  })
+};
+
+const chartIface = {
+  propTypes: {
+    ...ViewPropTypes,
+
+    animation: PropTypes.shape({
+      durationX: PropTypes.number, // Millis
+      durationY: PropTypes.number, // Millis
+
+      // option of easingX, easingY:
+      // Linear,
+      // EaseInQuad,
+      // EaseOutQuad,
+      // EaseInOutQuad,
+      // EaseInCubic,
+      // EaseOutCubic,
+      // EaseInOutCubic,
+      // EaseInQuart,
+      // EaseOutQuart,
+      // EaseInOutQuart,
+      // EaseInSine,
+      // EaseOutSine,
+      // EaseInOutSine,
+      // EaseInExpo,
+      // EaseOutExpo,
+      // EaseInOutExpo,
+      // EaseInCirc,
+      // EaseOutCirc,
+      // EaseInOutCirc,
+      // EaseInElastic,
+      // EaseOutElastic,
+      // EaseInOutElastic,
+      // EaseInBack,
+      // EaseOutBack,
+      // EaseInOutBack,
+      // EaseInBounce,
+      // EaseOutBounce,
+      // EaseInOutBounce,
+      easingX: PropTypes.string,
+      easingY: PropTypes.string
+    }),
+
+    chartBackgroundColor: PropTypes.number,
+    logEnabled: PropTypes.bool,
+    noDataText: PropTypes.string,
+    noDataTextColor: PropTypes.number,
+
+    touchEnabled: PropTypes.bool,
+    dragDecelerationEnabled: PropTypes.bool,
+    dragDecelerationFrictionCoef: (props, propName, componentName) => {
+      let coef = props[propName];
+      if (coef && (typeof coef !== 'number' || coef < 0 || coef > 1)) {
+        return new Error(
+          `Invalid prop ${propName} supplied to '${componentName}'. Value must be number and between 0 and 1.`
+        );
+      }
+    },
+
+    highlightPerTapEnabled: PropTypes.bool,
+    chartDescription: PropTypes.shape(descriptionIface),
+
+    legend: PropTypes.shape(legendIface),
+
+    xAxis: PropTypes.shape(xAxisIface),
+    onYaxisMinMaxChange: PropTypes.func,
+
+    marker: PropTypes.shape({
+      enabled: PropTypes.bool,
+      digits: PropTypes.number,
+      markerColor: PropTypes.number,
+      textColor: PropTypes.number,
+      textSize: PropTypes.number,
+
+    }),
+
+    // stackIndex for StackBarChart
+    highlights: PropTypes.arrayOf(
+      PropTypes.shape({
+        x: PropTypes.number.isRequired,
+        dataSetIndex: PropTypes.number,  // this is used in stacked bar chart
+        dataIndex: PropTypes.number,  // this is necessary in combined chart when default highlight is set. the default sequence is line, bar, scatter, candle, bubble
+        y: PropTypes.number,
+        stackIndex: PropTypes.number
+      }))
+  }
+};
+
+export default chartIface;

package/lib/ChartDataConfig.js

@@ -0,0 +1,263 @@
+import PropTypes from "prop-types";
+import ChartDataSetConfig from "./ChartDataSetConfig";
+
+const lineData = PropTypes.shape({
+  dataSets: PropTypes.arrayOf(
+    PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+          PropTypes.shape({
+            x: PropTypes.number,
+            y: PropTypes.number.isRequired,
+            marker: PropTypes.string,
+            icon: PropTypes.shape({
+              bundle: PropTypes.object,
+              width: PropTypes.number,
+              height: PropTypes.number
+            })
+          }),
+          PropTypes.number
+        ])
+      ),
+      label: PropTypes.string.isRequired,
+      config: PropTypes.shape({
+        ...ChartDataSetConfig.common,
+        ...ChartDataSetConfig.barLineScatterCandleBubble,
+        ...ChartDataSetConfig.lineScatterCandleRadar,
+        ...ChartDataSetConfig.lineRadar,
+
+        circleRadius: PropTypes.number,
+        drawCircles: PropTypes.bool,
+        mode: PropTypes.oneOf([
+          "LINEAR",
+          "STEPPED",
+          "CUBIC_BEZIER",
+          "HORIZONTAL_BEZIER"
+        ]),
+        drawCubicIntensity: PropTypes.number,
+        circleColor: PropTypes.number,
+        circleColors: PropTypes.arrayOf(PropTypes.number),
+        circleHoleColor: PropTypes.number,
+        drawCircleHole: PropTypes.bool,
+        fillFormatter: PropTypes.shape({
+          min: PropTypes.number.isRequired,
+        }),
+
+        dashedLine: PropTypes.shape({
+          lineLength: PropTypes.number.isRequired,
+          spaceLength: PropTypes.number.isRequired,
+          phase: PropTypes.number
+        })
+      })
+    })
+  )
+});
+
+const barData = PropTypes.shape({
+  dataSets: PropTypes.arrayOf(
+    PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+          PropTypes.shape({
+            x: PropTypes.number,
+            y: PropTypes.oneOfType([
+              PropTypes.number,
+              PropTypes.arrayOf(PropTypes.number)
+            ]),
+            marker: PropTypes.oneOfType([
+              PropTypes.string,
+              PropTypes.arrayOf(PropTypes.string)
+            ])
+          }),
+          PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.arrayOf(PropTypes.number)
+          ])
+        ])
+      ),
+      label: PropTypes.string.isRequired,
+      config: PropTypes.shape({
+        ...ChartDataSetConfig.common,
+        ...ChartDataSetConfig.barLineScatterCandleBubble,
+
+        barShadowColor: PropTypes.number,
+        highlightAlpha: PropTypes.number, // using android format (0-255), not ios format(0-1), the conversion is x/255
+        stackLabels: PropTypes.arrayOf(PropTypes.string)
+      })
+    })
+  ),
+
+  config: PropTypes.shape({
+    barWidth: PropTypes.number,
+    group: PropTypes.shape({
+      fromX: PropTypes.number.isRequired,
+      groupSpace: PropTypes.number.isRequired,
+      barSpace: PropTypes.number.isRequired
+    })
+  })
+});
+
+const bubbleData = PropTypes.shape({
+  dataSets: PropTypes.arrayOf(
+    PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.shape({
+          x: PropTypes.number,
+          y: PropTypes.number.isRequired,
+          size: PropTypes.number.isRequired,
+          marker: PropTypes.string
+        })
+      ),
+      label: PropTypes.string.isRequired,
+      config: PropTypes.shape({
+        ...ChartDataSetConfig.common,
+        ...ChartDataSetConfig.barLineScatterCandleBubble
+      })
+    })
+  )
+});
+
+const candleData = PropTypes.shape({
+  dataSets: PropTypes.arrayOf(
+    PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.shape({
+          x: PropTypes.number,
+          shadowH: PropTypes.number.isRequired,
+          shadowL: PropTypes.number.isRequired,
+          open: PropTypes.number.isRequired,
+          close: PropTypes.number.isRequired,
+          marker: PropTypes.string
+        })
+      ),
+      label: PropTypes.string.isRequired,
+      config: PropTypes.shape({
+        ...ChartDataSetConfig.common,
+        ...ChartDataSetConfig.barLineScatterCandleBubble,
+        ...ChartDataSetConfig.lineScatterCandleRadar,
+
+        barSpace: PropTypes.number,
+        shadowWidth: PropTypes.number,
+        shadowColor: PropTypes.number,
+        shadowColorSameAsCandle: PropTypes.bool,
+        neutralColor: PropTypes.number,
+        decreasingColor: PropTypes.number,
+        decreasingPaintStyle: PropTypes.oneOf([
+          "FILL",
+          "STROKE",
+          "FILL_AND_STROKE"
+        ]),
+        increasingColor: PropTypes.number,
+        increasingPaintStyle: PropTypes.oneOf([
+          "FILL",
+          "STROKE",
+          "FILL_AND_STROKE"
+        ])
+      })
+    })
+  )
+});
+
+const pieData = PropTypes.shape({
+  dataSets: PropTypes.arrayOf(
+    PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+          PropTypes.shape({
+            value: PropTypes.number.isRequired,
+            label: PropTypes.string
+          }),
+          PropTypes.number
+        ])
+      ),
+      label: PropTypes.string.isRequired,
+      config: PropTypes.shape({
+        ...ChartDataSetConfig.common,
+
+        sliceSpace: PropTypes.number,
+        selectionShift: PropTypes.number,
+        xValuePosition: PropTypes.oneOf(["INSIDE_SLICE", "OUTSIDE_SLICE"]),
+        yValuePosition: PropTypes.oneOf(["INSIDE_SLICE", "OUTSIDE_SLICE"]),
+        valueLinePart1Length: PropTypes.number,
+        valueLinePart2Length: PropTypes.number,
+        valueLineColor: PropTypes.number,
+        valueLineWidth: PropTypes.number,
+        valueLinePart1OffsetPercentage: PropTypes.number,
+        valueLineVariableLength: PropTypes.bool
+      })
+    })
+  )
+});
+
+const radarData = PropTypes.shape({
+  dataSets: PropTypes.arrayOf(
+    PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+          PropTypes.shape({ value: PropTypes.number.isRequired }),
+          PropTypes.number
+        ])
+      ),
+      label: PropTypes.string.isRequired,
+      config: PropTypes.shape({
+        ...ChartDataSetConfig.common,
+        ...ChartDataSetConfig.lineScatterCandleRadar,
+        ...ChartDataSetConfig.lineRadar
+      })
+    })
+  ),
+  labels: PropTypes.arrayOf(PropTypes.string)
+});
+
+const scatterData = PropTypes.shape({
+  dataSets: PropTypes.arrayOf(
+    PropTypes.shape({
+      values: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+          PropTypes.shape({
+            x: PropTypes.number,
+            y: PropTypes.number.isRequired,
+            marker: PropTypes.string
+          }),
+          PropTypes.number
+        ])
+      ),
+      label: PropTypes.string.isRequired,
+      config: PropTypes.shape({
+        ...ChartDataSetConfig.common,
+        ...ChartDataSetConfig.barLineScatterCandleBubble,
+        ...ChartDataSetConfig.lineScatterCandleRadar,
+
+        scatterShapeSize: PropTypes.number,
+        scatterShape: PropTypes.oneOf([
+          "SQUARE",
+          "CIRCLE",
+          "TRIANGLE",
+          "CROSS",
+          "X"
+        ]),
+        scatterShapeHoleColor: PropTypes.number,
+        scatterShapeHoleRadius: PropTypes.number
+      })
+    })
+  )
+});
+
+const combinedData = PropTypes.shape({
+  lineData: lineData,
+  barData: barData,
+  scatterData: scatterData,
+  candleData: candleData,
+  bubbleData: bubbleData
+});
+
+export {
+  lineData,
+  barData,
+  pieData,
+  bubbleData,
+  scatterData,
+  candleData,
+  radarData,
+  combinedData
+};