react-native-gifted-charts 1.0.19 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

package/src/BarChart/index.tsx

@@ -743,6 +743,9 @@ export const BarChart = (props: PropTypes) => {
                       <Text
                         style={[
                           {position: 'absolute'},
+                          yAxisSide === 'right' && {
+                            transform: [{rotateY: '180deg'}],
+                          },
                           referenceLine1Config.labelTextStyle,
                         ]}>
                         {referenceLine1Config.labelText}
@@ -762,6 +765,9 @@ export const BarChart = (props: PropTypes) => {
                       <Text
                         style={[
                           {position: 'absolute'},
+                          yAxisSide === 'right' && {
+                            transform: [{rotateY: '180deg'}],
+                          },
                           referenceLine2Config.labelTextStyle,
                         ]}>
                         {referenceLine2Config.labelText}
@@ -781,6 +787,9 @@ export const BarChart = (props: PropTypes) => {
                       <Text
                         style={[
                           {position: 'absolute'},
+                          yAxisSide === 'right' && {
+                            transform: [{rotateY: '180deg'}],
+                          },
                           referenceLine3Config.labelTextStyle,
                         ]}>
                         {referenceLine3Config.labelText}
@@ -1214,7 +1223,10 @@ export const BarChart = (props: PropTypes) => {
           {
             // backgroundColor: 'yellow',
             height:
-              containerHeight + 130 + horizSectionsBelow.length * stepHeight + labelsExtraHeight,
+              containerHeight +
+              130 +
+              horizSectionsBelow.length * stepHeight +
+              labelsExtraHeight,
             paddingLeft: initialSpacing,
             paddingBottom:
               horizSectionsBelow.length * stepHeight + labelsExtraHeight,

package/src/LineChart/index.tsx

@@ -1681,6 +1681,9 @@ export const LineChart = (props: propTypes) => {
                         <Text
                           style={[
                             {position: 'absolute'},
+                            yAxisSide === 'right' && {
+                              transform: [{rotateY: '180deg'}],
+                            },
                             referenceLine1Config.labelTextStyle,
                           ]}>
                           {referenceLine1Config.labelText}
@@ -1700,6 +1703,9 @@ export const LineChart = (props: propTypes) => {
                         <Text
                           style={[
                             {position: 'absolute'},
+                            yAxisSide === 'right' && {
+                              transform: [{rotateY: '180deg'}],
+                            },
                             referenceLine2Config.labelTextStyle,
                           ]}>
                           {referenceLine2Config.labelText}
@@ -1719,6 +1725,9 @@ export const LineChart = (props: propTypes) => {
                         <Text
                           style={[
                             {position: 'absolute'},
+                            yAxisSide === 'right' && {
+                              transform: [{rotateY: '180deg'}],
+                            },
                             referenceLine3Config.labelTextStyle,
                           ]}>
                           {referenceLine3Config.labelText}

package/src/SvgPie/index.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import {ColorValue, View, Text} from 'react-native';
+import Svg, {
+  Path,
+  LinearGradient,
+  Stop,
+  Circle,
+  Rect,
+  Text as CanvasText,
+} from 'react-native-svg';
+import {svgPath, bezierCommand} from '../utils';
+
+type propTypes = {
+  radius?: number;
+  isThreeD?: Boolean;
+  donut?: Boolean;
+  innerRadius?: number;
+  shadow?: Boolean;
+  innerCircleColor?: ColorValue;
+  innerCircleBorderWidth?: number;
+  innerCircleBorderColor?: ColorValue;
+  shiftInnerCenterX?: number;
+  shiftInnerCenterY?: number;
+  shadowColor?: string;
+  shadowWidth?: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  backgroundColor?: string;
+  data: Array<itemType>;
+  semiCircle?: Boolean;
+
+  showText?: Boolean;
+  textColor?: string;
+  textSize?: number;
+  fontStyle?: string;
+  fontWeight?: string;
+  font?: string;
+  showTextBackground?: Boolean;
+  textBackgroundColor?: string;
+  textBackgroundRadius?: number;
+  showValuesAsLabels?: Boolean;
+
+  centerLabelComponent?: Function;
+  tilt?: number;
+  initialAngle?: number;
+};
+type itemType = {
+  value: number;
+  shiftX?: number;
+  shiftY?: number;
+  color?: string;
+  text?: string;
+  textColor?: string;
+  textSize?: number;
+  fontStyle?: string;
+  fontWeight?: string;
+  font?: string;
+  textBackgroundColor?: string;
+  textBackgroundRadius?: number;
+  shiftTextX?: number;
+  shiftTextY?: number;
+};
+
+export const SvgPie = (props: propTypes) => {
+  let radius = 40;
+  let cx = radius,
+    cy = radius;
+  let ix = cx,
+    iy = 0;
+
+  let data = [30, 40, 20, 30];
+  let total = data.reduce((v, a) => v + a);
+  let acc = 0;
+  let pData = data.map(item => {
+    acc += item / total;
+    return acc;
+  });
+  pData = [0, ...pData];
+
+  const getCoordinatesForPercent = percent => {
+    const x = Math.cos(2 * Math.PI * percent);
+    const y = Math.sin(2 * Math.PI * percent);
+
+    return [x, y];
+  };
+
+  return (
+    <Svg height="100%" width="100%" viewBox="-5 0 110 110">
+      <Circle
+        cx={cx}
+        cy={cy}
+        r={radius}
+        stroke="blue"
+        strokeWidth="1.5"
+        fill="green"
+      />
+      {pData.map((item, index) => {
+        //   if(index>1) return null;
+        console.log('index', index);
+        // let sx = ix,
+        //   sy = iy;
+        let nextItem;
+        if (index === pData.length - 1) nextItem = pData[0];
+        else nextItem = pData[index + 1];
+        let sx = cx * (1 + Math.sin(2 * Math.PI * item));
+        let sy = cy * (1 - Math.cos(2 * Math.PI * item));
+        let ax = cx * (1 + Math.sin(2 * Math.PI * nextItem));
+        let ay = cy * (1 - Math.cos(2 * Math.PI * nextItem));
+
+        console.log('sx', sx);
+        console.log('sy', sy);
+        console.log('ax', ax);
+        console.log('ay', ay);
+        // let [ax, ay] = getCoordinatesForPercent(item*100);
+        // console.log('ax...', ax);
+        // console.log('ay...', ay);
+        return (
+          <Path
+            d={`M ${cx} ${cy} L ${sx} ${sy} A ${radius} ${radius} 0 0 1 ${ax} ${ay} L ${cx} ${cy}`}
+            stroke="red"
+            strokeWidth="1.5"
+            fill={'yellow'}
+          />
+        );
+      })}
+      <Circle
+        cx={cx}
+        cy={cy}
+        r={radius / 2.5}
+        stroke="red"
+        strokeWidth="1.5"
+        fill="white"
+      />
+    </Svg>
+  );
+};

package/src/ss.html

@@ -0,0 +1,8 @@
+<svg height="20" width="20" viewBox="0 0 20 20">
+    <circle r="10" cx="10" cy="10" fill="green" />
+    <circle r="5" cx="10" cy="10" fill="transparent"
+            stroke="tomato"
+            stroke-width="10"
+            stroke-dasharray="calc(35 * 31.4 / 100) 31.4"
+            transform="rotate(-90) translate(-20)" />
+  </svg>