@jescon-technologies/react-native-ui-kit 0.0.3 → 0.0.5

package/src/Custom/Charts/CLineChart.js

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { Defs, LinearGradient, Stop } from 'react-native-svg';
+import { View, Dimensions, TouchableOpacity, Platform } from 'react-native';
+import { LineChart, Grid, XAxis, YAxis } from 'react-native-svg-charts';
+import { Circle, G, Line, Rect, Text } from 'react-native-svg';
+import CText from '../../CustomComponents/CText';
+import moment from 'moment';
+import SDatePickerNew from '../../StaticComponents/SDatePickerNew';
+import { normalize } from '../../CommonStyle/componentStyle';
+import { ScrollView } from 'react-native';
+import { ArrayCheck, isBNUL, ValueCheck } from '../../CommonStyle/ComponentFunctions';
+
+
+export default function CLineChart(props) {
+
+    const [index, setIndex] = useState(1);
+    const [propsData, setPropsData] = useState(props.data);
+    const [data, setData] = useState(isBNUL(propsData) ? (propsData).map(({ value }) => parseFloat(value)) : []);
+    const axesSvg = { fontSize: normalize(11), fill: 'grey' };
+    const verticalContentInset = { top: 5, bottom: 5 };
+    const xAxisHeight = 30;
+
+    const Gradient = () => (
+        <Defs key={'gradient'}>
+            <LinearGradient id={'gradient'} x1={'0'} y={'0%'} x2={'100%'} y2={'0%'}>
+                <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'} />
+                <Stop offset={'100%'} stopColor={'rgb(66, 194, 244)'} />
+            </LinearGradient>
+        </Defs>
+    );
+
+    const Tooltip = ({ x, y }) => (
+
+        propsData[index] != undefined ?
+            <G
+                x={10}
+                key={'tooltip'}
+                onPress={() => console.log('tooltip clicked')}
+            >
+                <G y={50}>
+                    <Rect
+                        height={normalize(30)}
+                        width={normalize(70)}
+                        stroke={'grey'}
+                        fill={'white'}
+                        ry={10}
+                        rx={10}
+                    />
+                    <Text
+                        x={75 / 2}
+                        dy={normalize(10)}
+                        alignmentBaseline={'middle'}
+                        textAnchor={'middle'}
+                        stroke={'rgb(134, 65, 244)'}
+                    >
+                        {`${data[index]}`}
+                    </Text>
+
+                    <Text
+                        x={75 / 2}
+                        dy={normalize(25)}
+                        alignmentBaseline={'middle'}
+                        textAnchor={'middle'}
+                        stroke={'rgb(134, 65, 244)'}
+                        fontSize={'7'}
+                    >
+                        {`${propsData[index].date}`}
+                    </Text>
+                </G>
+                <G x={75 / 2}>
+                    <Circle
+                        cy={y(data[index])}
+                        r={6}
+                        stroke={'rgb(134, 65, 244)'}
+                        strokeWidth={2}
+                        fill={'white'}
+                    />
+                </G>
+            </G> : null
+    );
+
+    const Decorator = ({ x, y, data }) => {
+        return data.map((value, index) => (
+            <Circle
+                onPress={() => setIndex(index)}
+                key={index}
+                cx={x(index)}
+                cy={y(value)}
+                r={6}
+                stroke={'rgb(134, 65, 244)'}
+                fill={'white'}
+            />
+        ));
+    };
+
+    return (
+        data != null && data != undefined && data.length > 0 ?
+            <>
+                <View style={{ alignItems: 'flex-start', borderWidth: 0, borderColor: 'green', backgroundColor: 'white' }}>
+                    <View style={{ flexDirection: 'row', borderWidth: 0 }}>
+                        <YAxis
+                            data={data}
+                            style={{ borderWidth: 0 }}
+                            contentInset={verticalContentInset}
+                            svg={axesSvg}
+                        />
+                        <View style={{ flex: 1, borderWidth: 0 }}>
+                            <LineChart
+                                style={{ height: normalize(150) }}
+                                data={data}
+                                contentInset={{ top: normalize(10), bottom: normalize(10), left: normalize(10), right: normalize(10) }}
+                                svg={{
+                                    strokeWidth: normalize(3),
+                                    stroke: 'url(#gradient)',
+                                }}
+                            >
+                                <Grid
+                                    direction="HORIZONTAL"
+                                // direction='VERTICAL'
+                                />
+                                <Gradient />
+                                {/* <Tooltip /> */}
+                                <Decorator />
+                            </LineChart>
+                        </View>
+                    </View>
+                    <XAxis
+                        style={{ marginHorizontal: 0, height: normalize(55), borderWidth: 0, width: '100%' }}
+                        data={propsData}
+                        formatLabel={(value, index) => propsData[index].displayvalue}
+                        contentInset={{ left: normalize(20), right: normalize(10)}}
+                        svg={{ fontSize: normalize(7), fontWeight: 'bold', fill: 'black', translateY: normalize(15), rotation: normalize(75), originY: 0 }}
+                    />
+                </View>
+            </>
+            : null
+    );
+}
+
+
+{/* <CLinechart
+component={Line}
+data={Line.data}
+ /> */}
+
+
+// var Line = {
+//     "keyid": 3,
+//     "customcomponent": "CLinechart",
+//     "heading": "JULY",
+//     "data": [
+//         {
+//             "value": 220,
+//             "display": "JUL 18"
+//         },
+//         {
+//             "value": 189,
+//             "display": "JUL 17"
+//         },
+//         {
+//             "value": 178,
+//             "display": "JUL 16"
+//         },
+//         {
+//             "value": 170,
+//             "display": "JUL 15"
+//         },
+//         {
+//             "value": 156,
+//             "display": "JUL 14"
+//         },
+//         {
+//             "value": 196,
+//             "display": "JUL 13"
+//         },
+//         {
+//             "value": 122,
+//             "display": "JUL 12"
+//         },
+//         {
+//             "value": 139,
+//             "display": "JUL 11"
+//         },
+//         {
+//             "value": 167,
+//             "display": "JUL 10"
+//         },
+//         {
+//             "value": 145,
+//             "display": "JUL 09"
+//         }
+//     ]
+// }

package/src/Custom/Charts/CPieChart.js

@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from 'react';
+import { Dimensions, View, Text as RNText, TouchableOpacity, Platform } from 'react-native';
+import { PieChart } from 'react-native-svg-charts';
+import { Circle, G, Line, Text } from 'react-native-svg';
+import CText from '../../CustomComponents/CText';
+import moment from 'moment';
+import SDatePickerNew from '../../StaticComponents/SDatePickerNew';
+import { normalize } from '../../CommonStyle/componentStyle';
+
+export default function CPiechart(props) {
+    const [data, setData] = useState(props.data);
+    // console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>",props.data)
+    const [Nested, setNested] = useState(false);
+    const [visibility, setVisibility] = useState(true);
+    const [colorcode, setColorCode] = useState(props.colorArr != undefined && props.colorArr != null ? (props.colorArr).filter(word => word != undefined) : null);
+    const [styles, setStyles] = useState(props.style != undefined ? props.style : {
+        'innerRadius': normalize(52),
+        'outerRadius': normalize(30),
+        'labelRadius': normalize(70),
+        'height': 0.35,
+    });
+    const pieData =
+        data != undefined && data.filter(value => value.value > 0)
+            .map((value, index) => ({
+                value: value.value,
+                svg: { fill: colorcode != undefined ? colorcode[index] : getPieColor(index) },
+                key: `pie-${index}`,
+            }));
+
+    function getDateWisePieChart(params) {
+        setData([
+            {
+                'value': 33,
+                'display': '2022',
+            },
+            {
+                'value': 29,
+                'display': '2021',
+            },
+        ]);
+    }
+    const Labels = ({ slices }) => {
+        return slices.map((slice, index) => {
+            const { labelCentroid, pieCentroid, data } = slice;
+            return (
+                <G key={index}>
+                    <Line
+                        x1={labelCentroid[0]}
+                        y1={labelCentroid[1]}
+                        x2={pieCentroid[0]}
+                        y2={pieCentroid[1]}
+                        stroke={data.svg.fill}
+                    />
+
+                    <G x={labelCentroid[0]} y={labelCentroid[1]}>
+                        <Circle r={normalize(13)} fill={data.svg.fill} />
+                        <Circle r={normalize(11)} fill={'white'} />
+                        <Text
+                            key={index}
+                            x={-0.5}
+                            y={1.5}
+                            fill={'black'}
+                            textAnchor={'middle'}
+                            alignmentBaseline={'middle'}
+                            fontSize={normalize(10)}
+                            fontWeight={'bolder'}
+                            stroke={'white'}
+                            opacity={'1'}
+                            strokeWidth={0.4}>
+                            {data.value}
+                        </Text>
+                    </G>
+                </G>
+            );
+        });
+    };
+
+    function getPreviousInfo() {
+        setNested(true);
+    }
+
+    return (
+        pieData.length > 0 && visibility ?
+            <View style={{}}>
+                {Nested ?
+                    <CText>KKK</CText> : null}
+
+                <View style={{ paddingVertical: 0, marginTop: 0 }}>
+
+                    {props.component != undefined ?
+                        <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
+                            <CText style={{ fontSize: normalize(15), paddingHorizontal: 5, fontWeight: 'bold', color: 'black' }}>{props.component != undefined ? props.component.heading : ''}</CText>
+                        </View> : null}
+
+                    {props.component != undefined && props.component.date != undefined ?
+                        <View>
+                            <SDatePickerNew
+                                callBack={val => (val == undefined ? null : getDateWisePieChart(val))} />
+                        </View> : null}
+
+                    <View style={{ flexDirection: 'row', alignItems: 'center'}}>
+                        <View style={{ flexDirection: 'row' }}>
+                            <PieChart
+                                style={{
+                                    marginTop:normalize(-8),
+                                    height: Dimensions.get('screen').height *
+                                        (styles.height), width: Dimensions.get('screen').width * 0.6,
+                                }}
+                                data={pieData}
+                                innerRadius={normalize(styles.innerRadius)}
+                                outerRadius={normalize(styles.outerRadius)}
+                                labelRadius={normalize(styles.labelRadius)}
+                            >
+                                <Labels />
+                            </PieChart>
+                        </View>
+
+                        {/* <View style={{ paddingLeft: 15 }}>
+                            {data != undefined ? data.map((display, p) => {
+                                return (
+                                    display != null && display != undefined ?
+                                        <View key={p} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: normalize(4) }}>
+                                            <View style={{
+                                                paddingVertical: normalize(5), paddingHorizontal: normalize(4),
+                                                backgroundColor: getPieColor(p), borderRadius: 5, alignItems: 'center', justifyContent: 'center',
+                                                marginRight: 5
+                                            }}>
+                                                <CText style={{ fontSize: normalize(12), color: 'black', fontWeight: 'bold', color: 'white' }}>{display.value}</CText>
+                                            </View>
+                                            <CText style={{ fontSize: normalize(12), color: 'black', fontWeight: '500' }}>{display.display}</CText>
+                                        </View> : null)
+                            }) : null}
+                        </View> */}
+                    </View>
+                </View>
+            </View> : null
+    );
+    function getPieColor(params) {
+        switch (params) {
+            case 0: return 'blue';
+            case 1: return 'green';
+            case 2: return '#cf0404';
+            case 3: return '#24bfde';
+            case 4: return '#7b36bc';
+            case 5: return '#f28909';
+            case 6: return '#0cd3cd';
+            case 7: return '#ad400a';
+            default: return 'black';
+        }
+    }
+}
+
+{/* <CPiechart
+component={PieChart}
+data={PieChart.data}
+style={{
+    "innerRadius": normalize(52),
+    "outerRadius": normalize(30),
+    "labelRadius": normalize(70),
+    "height": 0.27
+}} /> */}
+
+// var PieChart = {
+//     "keyid": 3,
+//     "customcomponent": "CPiechart",
+//     "heading": "Monthly Profit",
+//     // "date": "2021-03-01",
+//     "data": [
+//         {
+//             "value": 23,
+//             "display": "JANUVARY"
+//         },
+//         {
+//             "value": 35,
+//             "display": "FEBRUVARY"
+//         },
+//         {
+//             "value": 40,
+//             "display": "MARCH"
+//         },
+//         {
+//             "value": 87,
+//             "display": "APRIL"
+//         }
+//     ]
+// }

package/src/Custom/Loader.js

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import {
+  StyleSheet,
+  Dimensions,
+  View,
+  Modal,
+  Animated,
+  Easing,
+  Text,
+  Image,
+  Platform,
+} from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+
+export default function Loader({
+  visible = true,
+  overlayColor = 'rgba(0,0,0,0.4)',
+  loaderColor = 'lightblue',
+  size = Platform.OS !== 'web' ? 30 : 50,
+  gifSource = { uri: `${APIURL}file/getCommonFile/image/heartpulse.gif` },
+  message = '',
+  messageStyle = {},
+  animationType = 'fade',
+  hasBackground = true,
+  borderRadius = 20,
+  shadow = true,
+}) {
+  const [rotation] = useState(new Animated.Value(0));
+  const [pulse] = useState(new Animated.Value(1));
+  const [fade] = useState(new Animated.Value(0));
+
+  // Rotation animation
+  useEffect(() => {
+    if (!gifSource) { // Only animate if not using a GIF
+      Animated.loop(
+        Animated.timing(rotation, {
+          toValue: 1,
+          duration: 1500,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
+      ).start();
+    }
+
+    // Pulse animation
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1.1,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+
+    // Fade in animation
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const loaderContent = gifSource ? (
+    <Image
+      style={[styles.icon_style, { width: normalize(size), height: normalize(size) }]}
+      source={gifSource}
+      resizeMode="contain"
+    />
+  ) : (
+    <Animated.View style={[
+      styles.defaultLoader,
+      {
+        borderColor: loaderColor,
+        transform: [{ rotate: spin }, { scale: pulse }],
+        width: normalize(size),
+        height: normalize(size),
+        borderWidth: normalize(size / 10),
+      },
+    ]}>
+      <View style={[
+        styles.innerCircle,
+        {
+          backgroundColor: loaderColor,
+          width: normalize(size / 2),
+          height: normalize(size / 2),
+        },
+      ]} />
+    </Animated.View>
+  );
+
+
+
+
+  return (
+    <Modal
+      animationType={animationType}
+      transparent={true}
+      visible={visible}
+      onRequestClose={() => { }}
+    >
+      <Animated.View style={[
+        styles.modalContainer,
+        {
+          backgroundColor: overlayColor,
+          opacity: fade,
+        },
+      ]}>
+        <Animated.View style={[
+          styles.loaderContainer,
+          {
+            backgroundColor: hasBackground ? 'white' : 'transparent',
+            borderRadius: normalize(borderRadius),
+            transform: [{ scale: pulse }],
+            ...(shadow && styles.shadowStyle),
+          },
+        ]}>
+          {loaderContent}
+          {message ? (
+            <Text style={[styles.messageText, messageStyle]}>
+              {message}
+            </Text>
+          ) : null}
+        </Animated.View>
+      </Animated.View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+
+
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loaderContainer: {
+    padding: normalize(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon_style: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  defaultLoader: {
+    borderRadius: normalize(100),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  innerCircle: {
+    borderRadius: normalize(100),
+  },
+  messageText: {
+    marginTop: normalize(15),
+    fontSize: normalize(14),
+    color: '#555',
+    textAlign: 'center',
+  },
+  shadowStyle: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+});