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

package/src/Custom/Charts/CBarChart.js

@@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import { Defs, LinearGradient, Stop, Text, Line } from 'react-native-svg';
+import { View, Dimensions, TouchableOpacity } from 'react-native';
+import { BarChart, Grid, XAxis } from 'react-native-svg-charts';
+import CText from '../../CustomComponents/CText';
+import moment from 'moment';
+import SDatePickerNew from '../../StaticComponents/SDatePickerNew';
+import { normalize } from '../../CommonStyle/componentStyle';
+
+export default function CBarChart(props) {
+    const fill = '#0e4482';
+    // const OverlayHOCComponentChart = HChart(HeaderBlock);
+    const { height, width } = Dimensions.get('screen');
+    const [propsData, setPropsData] = useState(props.data);
+    const [Nested, setNested] = useState(false);
+    const [data, setData] = useState((propsData).map(({ value }) => value));
+    const axesSvg = { fontSize: normalize(11), fill: 'grey' };
+    const verticalContentInset = { top: 5, bottom: 5 };
+    const xAxisHeight = 30;
+
+    function getDateWiseLineChart(params) {
+        console.log('TYGWUFYUFUF', moment(params).format('YYYY-MM-DD'));
+        setPropsData([{
+            'value': 55,
+            'display': 'JAN',
+        },
+        {
+            'value': 35,
+            'display': 'FEB',
+        }]);
+        setData(([{
+            'value': 55,
+            'display': 'JANUVARY',
+        },
+        {
+            'value': 35,
+            'display': 'FEBRUVARY',
+        }]).map(({ value }) => value));
+    }
+
+    function getPreviousInfo() {
+        setNested(true);
+    }
+
+    const CUT_OFF = props.component != undefined && props.component.benchmarkcutoff != undefined &&
+        props.component.benchmarkcutoff != 0 ? props.component.benchmarkcutoff : 0;
+    console.log('CUTTTTTTTT OFFFFFFFFFFFF', JSON.stringify(CUT_OFF));
+    const Labels = ({ x, y, bandwidth, data }) => (
+        data.map((value, index) => (
+            <Text
+                key={index}
+                x={x(index) + (bandwidth / 2)}
+                y={value < CUT_OFF ? y(value) - 10 : y(value) + 15}
+                fontSize={normalize(10)}
+                fontWeight={'bold'}
+                fill={value >= CUT_OFF ? 'white' : 'red'}
+                alignmentBaseline={'middle'}
+                textAnchor={'middle'}
+            >
+                {value}
+            </Text>)));
+
+    const Gradient = () => (
+        <Defs key={'gradient'}>
+            <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
+                <Stop offset={'0%'} stopColor={'black'} />
+                <Stop offset={'100%'} stopColor={'grey'} />
+            </LinearGradient>
+        </Defs>
+    );
+
+    const HorizontalLine = (({ y }) => (
+        <Line
+            key={'zero-axis'}
+            x1={'0%'}
+            x2={'100%'}
+            y1={y(50)}
+            y2={y(50)}
+            stroke={'green'}
+            strokeDasharray={[4, 6]}
+            strokeWidth={normalize(3)}
+        />
+    ));
+    return (
+        data != null && data != undefined ?
+            <>
+                {Nested ?
+                    <CHistoryChart data={{
+                        'keyid': 3,
+                        'customcomponent': 'CBarChart',
+                        'heading': 'Monthly Profit',
+                        'date': '2021-03-01',
+                        'data': [
+                            {
+                                'value': 65,
+                                'display': 'Billed',
+                            },
+                            {
+                                'value': 65,
+                                'display': 'Dispensed',
+                            },
+                            {
+                                'value': 467,
+                                'display': 'Picked',
+                            },
+                        ],
+                    }} /> : null}
+                <View style={{ marginRight: 2, marginTop: 10 }}>
+                    <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
+                        <CText style={{ fontSize: normalize(15), paddingHorizontal: 5, fontWeight: 'bold', color: 'black' }}>{props.component.heading}</CText>
+                        {/* <TouchableOpacity onPress={() => getPreviousInfo()} style={{ alignItems: 'center' }}>
+                            <MaterialCommunityIcons name={'scale-balance'} color="black" size={normalize(20)} style={{ opacity: 0.8 }} />
+                            <CText style={{ fontSize: normalize(10), color: 'black' }}>{"Compare"}</CText>
+                        </TouchableOpacity> */}
+                    </View>
+
+                    {props.component.date != undefined ?
+                        <View>
+                            <SDatePickerNew
+                                callBack={val => (val == undefined ? null : getDateWiseLineChart(val))} />
+                        </View> : null}
+
+                    <View style={{ height: normalize(225), padding: normalize(5), flexDirection: 'row' }}>
+                        <View style={{ flex: 1 }}>
+                            <BarChart
+                                style={{ flex: 1 }}
+                                data={data}
+                                svg={{
+                                    strokeWidth: 2,
+                                    fill: 'url(#gradient)',
+                                }}
+                                spacingInner={0.5}
+                                spacing={0.2}
+                                gridMin={0}
+                            >
+                                {CUT_OFF != 0 ? <HorizontalLine /> : null}
+                                <Grid />
+                                <Gradient />
+                                <Labels />
+                            </BarChart>
+                            <XAxis
+                                style={{ marginHorizontal: -10, height: xAxisHeight }}
+                                data={propsData}
+                                formatLabel={(value, index) => propsData[index].display}
+                                contentInset={{ left: normalize(20), right: normalize(40) }}
+                                svg={{ fontSize: normalize(9), fontWeight: 'bold', fill: 'black', translateY: normalize(8), rotation: normalize(10), originY: 40 }}
+                            />
+                        </View>
+                    </View>
+
+                    {CUT_OFF != 0 ?
+                        <View style={{ flexDirection: 'row', justifyContent: 'space-evenly', width: '50%', marginBottom: normalize(10) }}>
+                            <CText style={{ color: 'darkgreen', fontWeight: 'bold' }}>----</CText>
+                            <CText style={{ color: 'black', fontSize: normalize(14) }}>Benchmark: {CUT_OFF}</CText>
+                        </View> : null}
+                </View>
+            </>
+            : null
+    );
+}
+
+// <CBarChart
+// component={BarChart}
+// data={BarChart.data}
+// />
+
+// var BarChart = {
+//     "keyid": 3,
+//     "customcomponent": "CBarChart",
+//     "date": "2021-03-01",
+//     "benchmarkcutoff": 23,
+//     "heading": "Yearly",
+//     "data": [
+//         {
+//             "value": 13,
+//             "display": "1"
+//         },
+//         {
+//             "value": 45,
+//             "display": "2"
+//         },
+//         {
+//             "value": 87,
+//             "display": "3"
+//         },
+//         {
+//             "value": 98,
+//             "display": "4"
+//         },
+//         {
+//             "value": 34,
+//             "display": "5"
+//         },
+//         {
+//             "value": 19,
+//             "display": "6"
+//         },
+//         {
+//             "value": 12,
+//             "display": "7"
+//         },
+//         {
+//             "value": 13,
+//             "display": "8"
+//         },
+//         {
+//             "value": 67,
+//             "display": "9"
+//         },
+//         {
+//             "value": 45,
+//             "display": "10"
+//         }
+//     ]
+// }
+
+
+

package/src/Custom/Charts/CDashBoardList.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, Dimensions } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { isBNU, isBNUL } from '../../CommonStyle/ComponentFunctions';
+// import PieChart from 'react-native-pie-chart';
+import { normalize } from '../../CommonStyle/componentStyle';
+import Icons from '../../Common/Icons';
+
+export default function CDashBoardList(params) {
+    function renderDataNew(params, l, pindex) {
+        let newdata = isBNUL(params.item.data) ? params.item.data.filter(function (item) { return item; }) : [];
+        return (
+            isBNUL(newdata) ?
+                <View style={{
+                    margin: normalize(5),
+                    borderWidth: 1,
+                    backgroundColor: params.item.view ? '#ffffff36' : '#ffffff00',
+                    borderColor: 'lightgrey',
+                    borderRadius: 5,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: normalize(5),
+                }}>
+                    <View style={{ borderWidth: 0, width: '100%', justifyContent: 'center', alignItems: 'center', paddingBottom: normalize(5), borderWidth: 0 }}>
+                        <Text
+                            style={{
+                                fontSize: normalize(10),
+                                fontWeight: 'bold',
+                                color: 'black',
+                            }}>
+                            {params.item.heading}
+                        </Text>
+                    </View>
+
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            borderRadius: 5,
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                        }}
+                    >
+
+                        <PieChart
+                            widthAndHeight={normalize(150)}
+                            series={isBNUL(newdata) ? newdata.map((val) => { return isBNU(val.value) ? val.value : undefined; }) : []}
+                            sliceColor={isBNUL(newdata) ? newdata.map((val) => { return isBNU(val.bcolor) ? val.bcolor : undefined; }) : []}
+                            coverRadius={0.1}
+                            coverFill={'#ffffff8a'}
+                        />
+
+                        <View style={{ height: normalize(210), width: normalize(160) }}>
+                            <FlashList
+                                showsVerticalScrollIndicator={true}
+                                persistentscrollbar={true}
+                                data={newdata}
+                                nestedScrollEnabled={true}
+                                renderItem={val => renderChartList(val, pindex, l, params.index, newdata, params.item.view)}
+                                keyExtractor={(item, index) => index.toString()}
+                                estimatedItemSize={normalize(20)}
+                            />
+                            <View style={{ justifyContent: 'center', alignItems: 'center', marginVertical: 0, zIndex: 3 }}>
+                                <Text style={{ fontSize: normalize(10), color: 'darkblue' }}>Scroll down</Text>
+                                <Icons.FontAwesome5
+                                    name={'sort-down'}
+                                    size={normalize(18)}
+                                    color={'darkblue'}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                : null
+        );
+
+    }
+    function renderChartList(v, pindex, pview, newindex, darray, arrayview) {
+        return (
+            <TouchableOpacity
+                onPress={() => { params.callback(pindex, true, pview, newindex, darray, v.index, v.item.link, false); }}
+                style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'flex-start',
+                    borderWidth: (arrayview && v.item.view) ? 0 : 0,
+                    borderRadius: 5,
+                    borderColor: 'grey',
+                    marginVertical: normalize(3),
+                    marginHorizontal: normalize(5),
+                    padding: normalize(3),
+                    borderWidth: 0,
+                    backgroundColor: (arrayview && v.item.view) ? '#f0f0f0' : 'transparent',
+                }}>
+                <View style={{ borderWidth: 0, borderColor: '#808080', backgroundColor: v.item.bcolor, textAlign: 'center', justifyContent: 'center', alignItems: 'center', borderRadius: 5, width: normalize(35), height: normalize(20) }}>
+                    <Text adjustsFontSizeToFit numberOfLines={2} style={{
+                        fontSize: normalize(11),
+                        color: '#000000',
+                        fontWeight: 'bold',
+                        textShadowColor: '#ffffff',
+                        textShadowRadius: 1,
+                        textAlign: 'center',
+                        textShadowOffset: { width: 0, height: 1 },
+                    }}>
+                        {v.item.value}
+                    </Text>
+                </View>
+                <Text adjustsFontSizeToFit numberOfLines={2} style={{ marginHorizontal: normalize(5), fontWeight: 'bold', fontSize: normalize(10), color: '#000000', borderWidth: 0, width: '75%' }}>{v.item.display}</Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function renderChartListNew(params, i) {
+        let newdata = isBNUL(params) ? params.filter(function (item) { return item; }) : [];
+        return (
+            <FlashList
+                showsHorizontalScrollIndicator={false}
+                horizontal={true}
+                nestedScrollEnabled={true}
+                data={newdata}
+                renderItem={val => renderDataNew(val, newdata, i)}
+                keyExtractor={(item, index) => index.toString()}
+                estimatedItemSize={normalize(300)}
+            />
+        );
+
+    }
+
+    return (
+        <View>
+            {renderChartListNew(params.data, params.index)}
+        </View>
+    );
+}

package/src/Custom/Charts/CDashBoardTable.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, Dimensions, ScrollView } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { ArrayCheck, isBNU, isBNUL, isPermitted, notifyMessage, ValueCheck } from '../../CommonStyle/ComponentFunctions';
+import { normalize } from '../../CommonStyle/componentStyle';
+import CTextHeader from '../TableComponent/CTextHeader';
+import { Global } from '../../Common/Global';
+import Icons from '../../Common/Icons';
+import FileViewer from 'react-native-file-viewer';
+import RNFetchBlob from 'rn-fetch-blob';
+
+export default function CDashBoardTable(params) {
+    function renderDataNew(params, l, pindex) {
+        let newdata = isBNUL(params.item.data) ? params.item.data.filter(function (item) { return item; }) : [];
+        return (
+            isBNUL(newdata) ?
+                <View>
+                    <View
+                        style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: normalize(5), paddingHorizontal: normalize(5) }}>
+                        <Icons.FontAwesome5 name={'dot-circle'} color={'black'} size={normalize(10)} />
+                        <Text style={{
+                            fontSize: normalize(11),
+                            fontWeight: '800',
+                            color: Global.AppTheme.primary_color,
+                        }}> {params.item.heading}
+                        </Text>
+
+                        <TouchableOpacity
+                            onPress={() => getExcelReport(newdata)}
+                            style={{ position: 'absolute', right: normalize(30) }}>
+                            <Icons.FontAwesome5 name={'file-excel'} color={Global.AppTheme.primary_color} size={normalize(15)} />
+                        </TouchableOpacity>
+                    </View>
+
+                    <ScrollView horizontal={true}>
+                        <View style={{ marginTop: normalize(3), marginHorizontal: normalize(5) }}>
+                            <View style={{ flexDirection: 'row' }}>
+                                {newdata.map((item, i) => {
+                                    return (
+                                        <View key={i}>
+                                            <View style={{ flexDirection: 'row' }}>
+                                                {[{ 'header': item.displayheader, 'width': item.width }].map((header, j) => {
+                                                    return (
+                                                        <View key={j} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                                            <CTextHeader key={i}
+                                                                text={header.header}
+                                                                widthArr={Dimensions.get('screen').width * header.width}
+                                                                bgColor={'#eae8e8'} color={'black'} borderColor={'lightgrey'} marginHorizontal={normalize(2)} borderRadius={5} elevation={3}
+                                                            />
+                                                        </View>
+                                                    );
+                                                })}
+                                            </View>
+
+                                            <View>
+                                                {item.rows.map((details, k) => {
+                                                    return (
+                                                        <TouchableOpacity key={k}
+                                                            style={{
+                                                                flexDirection: 'row',
+                                                                marginTop: 1,
+                                                                backgroundColor: 'white',
+                                                                padding: 1,
+                                                            }}>
+                                                            {getSwitchComponent(item, details, k)}
+                                                        </TouchableOpacity>);
+                                                })}
+                                            </View>
+                                        </View>
+                                    );
+                                })}
+                            </View>
+                        </View>
+                    </ScrollView>
+                </View>
+                : null
+        );
+    }
+
+    function getExcelReport(params) {
+
+        var arrayString = ArrayCheck(params) && ValueCheck(params[0].rows) && ArrayCheck(params[0].rows) ? params[0].rows.map(s => s.value) : null;
+        var headerString = ArrayCheck(arrayString) ? arrayString.map(d => `${d}`).join(',') + '\n' : null;
+
+        var rowEliminate1st = ArrayCheck(params) ? params.slice(0) : null;
+        var dataArrFormat = ArrayCheck(rowEliminate1st) ?
+            rowEliminate1st.flatMap(
+                (o, i) => o.rows.flatMap(
+                    (y, k) => getObjectMAP(o)
+                )
+            ) : [];
+        var rowString = ArrayCheck(dataArrFormat) ? dataArrFormat.map(d => `${d.data1},"${d.data2}","${d.data3}","${d.data4}","${d.data5}","${d.data6}","${d.data7}","${d.data8}","${d.data9}","${d.data10}","${d.data11}","${d.data12}","${d.data13}","${d.data14}","${d.data15}","${d.data16}","${d.data17}","${d.data18}","${d.data19}","${d.data20}"\n`).join('') : null;
+        var csvString = `${headerString}${rowString}`;
+        console.log('OBJECTSTSTSTTSTSTSTSTTSTTSTTSTTS', JSON.stringify(csvString));
+        getExcel(csvString);
+    }
+
+    function getObjectMAP(params) {
+        var objects = {};
+        for (var x = 1; x < 71; x++) {
+            objects['data' + x] = ValueCheck(params.rows[x - 1]) ? params.rows[x - 1].value : '';
+        }
+        return objects;
+    }
+
+    const getExcel = async (arg1) => {
+        if (await isPermitted()) {
+            let filePath = RNFetchBlob.fs.dirs.DownloadDir +
+                '/' + 'ExcelTable' + Math.floor(Math.random() * 90 + 10) + '.csv';
+            RNFetchBlob.fs.writeFile(filePath, arg1, 'utf8').then(response => {
+                console.log(filePath);
+                console.log('response', response);
+                OpenFileView(filePath);
+                notifyMessage(filePath, 1);
+            })
+                .catch(errors => {
+                    console.log('DOWNLOAD FAILED', errors);
+                    notifyMessage('Download Failed', 2);
+                });
+        }
+    };
+
+    function OpenFileView(arg) {
+        console.log('EXCEL PATHHHHHHHHHHHHHHHH', JSON.stringify(arg));
+        FileViewer.open(arg)
+            .then(() => {
+                notifyMessage('SUCCESS', 1);
+            })
+            .catch((error) => {
+                notifyMessage('ERROR' + error, 2);
+            });
+    }
+
+    function renderChartListNew(params, i) {
+        let newdata = isBNUL(params) ? params.filter(function (item) { return item; }) : [];
+        return (
+            <FlashList
+                showsHorizontalScrollIndicator={false}
+                nestedScrollEnabled={true}
+                data={newdata}
+                renderItem={val => renderDataNew(val, newdata, i)}
+                keyExtractor={(item, index) => index.toString()}
+                estimatedItemSize={normalize(300)}
+            />
+        );
+
+    }
+
+    return (
+        <View>
+            {renderChartListNew(params.data, params.index)}
+        </View>
+    );
+
+    function getSwitchComponent(item, details, rowkey) {
+        switch (item.columntype) {
+            case 1:
+                return (
+                    <View
+                        style={{
+                            borderWidth: 1, justifyContent: 'center', backgroundColor: '#fff', borderColor: 'lightgrey', height: normalize(25),
+                            borderRadius: 5, elevation: 3, width: Dimensions.get('screen').width * item.width, alignItems: 'center',
+                        }}>
+                        <Text adjustsFontSizeToFit numberOfLines={1} style={{
+                            fontSize: normalize(13), fontWeight: 'bold', paddingVertical: normalize(2.5),
+                            color: 'black',
+                        }}>{details.value}</Text>
+                    </View>
+                );
+        }
+    }
+}