ui-soxo-bootstrap-core 2.4.24

package/core/lib/elements/complex/bargraph/bar-graph.js

@@ -0,0 +1,262 @@
+/**
+ * Component used for Table
+ *
+ * @author Ashique
+ *
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect } from 'react'
+
+// import { ResponsiveLine } from '@nivo/line';
+
+// import { ResponsiveBar } from '@nivo/bar'
+
+import { Modal } from 'antd'
+
+import StatisticCard from '../statistic-card/statistic-card'
+
+/**
+ * To Display a bar graph
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function BarGraph({ data, index, ...props }) {
+  const [visible, setVisible] = useState(false)
+
+  const [selected, setSelected] = useState({})
+
+  let cases = []
+
+  var content = []
+
+  // # Note a temporary setup
+  // managing data manipulation here for the dashboard
+  // var months = Object.keys(result);
+  if (data.length) {
+    //To show legends
+    data = data.map((item) => {
+      item.counts = {
+        ...item.counts,
+        'Total Cases': item.counts.total_cases,
+        'Total Positive Cases': item.counts.total_positive_cases,
+        'Total Negative Cases': item.counts.total_negative_cases,
+      }
+
+      return item
+    })
+
+    cases.push('Total Cases', 'Total Positive Cases', 'Total Negative Cases')
+
+    //To remove the first element from array.(In map data first element is total counts )
+    data = data.slice(1, data.length).map((item) => {
+      if (!item[0]) {
+        content.push(item.counts)
+      }
+    })
+  } else {
+    data.forEach((month) => {
+      let element = {
+        Month: month.Month,
+      }
+
+      //
+      if (cases.indexOf(month.Service) === -1) {
+        cases.push(month.Service)
+      }
+
+      element[month.Service] = month['Total_Nos']
+
+      content.push(element)
+    })
+  }
+
+  /**
+   * On select of the record
+   */
+  const onSelect = (selected) => {
+    setVisible(true)
+
+    setSelected(selected)
+  }
+
+  return (
+    <div className="graph-container">
+      {/* <ResponsiveBar
+        data={content}
+        keys={cases}
+        indexBy={index}
+        margin={{ top: 50, right: 90, bottom: 60, left: 60 }}
+        padding={0.3}
+        groupMode="grouped"
+        valueScale={{ type: 'linear' }}
+        indexScale={{ type: 'band', round: false }}
+        colors={{ scheme: 'nivo' }}
+        defs={[
+          {
+            id: 'dots',
+            type: 'patternDots',
+            background: 'inherit',
+            color: '#30002',
+            size: 4,
+            padding: 1,
+            stagger: true,
+          },
+          {
+            id: 'lines',
+            type: 'patternLines',
+            background: 'inherit',
+            color: '#eed312',
+            rotation: -45,
+            lineWidth: 6,
+            spacing: 10,
+          },
+        ]}
+        fill={[
+          {
+            match: {
+              id: 'total_positive_cases',
+            },
+            id: 'lines',
+          },
+
+          {
+            match: {
+              id: 'total_negative_cases',
+            },
+            id: 'lines',
+          },
+
+          {
+            match: {
+              id: 'total_cases',
+            },
+            id: 'lines',
+          },
+        ]}
+        borderColor={{
+          from: 'color',
+          modifiers: [['darker', 1.6]],
+        }}
+        axisTop={null}
+        axisRight={null}
+        axisBottom={{
+          tickSize: 5,
+          tickPadding: 7,
+          tickRotation: 35,
+          legend: 'City',
+          legendPosition: 'middle',
+          legendOffset: 32,
+        }}
+        axisLeft={{
+          tickSize: 5,
+          tickPadding: 5,
+          tickRotation: 0,
+          legend: 'Cases',
+          legendPosition: 'middle',
+          legendOffset: -40,
+        }}
+        labelSkipWidth={12}
+        labelSkipHeight={12}
+        labelTextColor={{
+          from: 'color',
+          modifiers: [['darker', 2.5]],
+        }}
+        onClick={(record) => {
+          onSelect(record)
+
+          setVisible(true)
+          console.log(record)
+        }}
+        legends={[
+          {
+            dataFrom: 'keys',
+            anchor: 'top-right',
+            direction: 'column',
+            justify: false,
+            translateX: 20,
+            translateY: -40,
+            itemsSpacing: 2,
+            itemWidth: 80,
+            itemHeight: 20,
+            itemDirection: 'left-to-right',
+            // itemOpacity: 0.35,
+            symbolSize: 20,
+            effects: [
+              {
+                on: 'hover',
+                style: {
+                  itemOpacity: 1,
+                },
+              },
+            ],
+          },
+        ]}
+        role="application"
+        ariaLabel="Nivo bar chart demo"
+        // label={(d) => {
+
+        //     return <>
+
+        //         <h1>
+
+        //             Ashique
+        //         </h1>
+
+        //         <p>
+
+        //             HelloPform
+        //             `${d.id}: ${d.value}`
+
+        //         </p>
+
+        //     </>
+        // }}
+        tooltip={(record) => {
+          const { data } = record
+
+          console.log(data.total_positive)
+
+          return (
+            <div className="card">
+              <div>{record.label}</div>
+
+              <div>{data.total_cases}</div>
+
+              <div>
+                <strong>Positive - {data.total_positive_cases}</strong>
+              </div>
+            </div>
+          )
+        }}
+        barAriaLabel={function (e) {
+          // return "Ashique";
+          // return e.id + ": " + e.formattedValue + " in country: " + e.indexValue
+        }}
+      /> */}
+
+      {/* 
+             <Modal
+                 header={null}
+                 // className="camera-modal"
+                 visible={visible}
+                 // title={'Camera'}
+                 footer={null}
+                 onCancel={() => { setVisible(false); }}
+             >
+ 
+                 {visible ? <StatisticCard result={selected.data} {...props} /> : null}
+ 
+             </Modal> */}
+    </div>
+  )
+}
+
+var groupBy = function (xs, key) {
+  return xs.reduce(function (rv, x) {
+    ;(rv[x[key]] = rv[x[key]] || []).push(x)
+
+    return rv
+  }, {})
+}

package/core/lib/elements/complex/basic-table/basic-table.js

@@ -0,0 +1,111 @@
+
+/**
+ * Component used for Table 
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { Space, Table } from 'antd';
+
+// import { ExportReactCSV } from '../../../modules/generic/generic-list/ExportReactCSV';
+
+// import { getExportData } from '../../../utils/generic/generic.utils';
+
+
+import './basic-table.scss';
+
+/**
+ * Basic Tabular
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function BasicTable({ result, styles = {}, ...props }) {
+
+    // Get the columns
+    let columns = [];
+
+    if (result[0]) {
+
+        columns = Object.keys(result[0]).map(column => {
+            return {
+                // title : <div style={{ textAlign: styles[column].textAlign }}>{column}</div>,
+                title: column,
+                dataIndex: column,
+                key: column,
+                render: (text, record) => {
+
+                    return <div className='table-field' style={styles[column]}>{text}</div>;
+                },
+            };
+        });
+
+    } else {
+
+    }
+
+    // Get the export data 
+    // let exportData = getExportData(result, columns);
+
+    return (
+
+        <>
+
+            <div className="table-actions">
+
+                {/*table data export to csc component*/}
+                {/* {result && <ExportReactCSV csvData={exportData} />} */}
+
+            </div>
+
+
+            <Table
+                className="table-exportable"
+                scroll={{ x: true }}
+                // loading={loading}
+                size="small"
+                rowKey={(record) => record.id}
+                dataSource={result}
+                columns={columns}
+                pagination={false}
+            ></Table>
+
+
+        </>
+    );
+}
+
+
+
+
+
+
+/**
+ *
+ * @param {*} records
+ * @param {*} columns
+ * @returns
+ */
+// export function getExportData(records = [], columns) {
+
+//     return records.map((ele, index) => {
+
+//         let entry = {
+//             'Sl No': index + 1
+//         };
+
+//         columns.forEach((column, index) => {
+
+
+//             entry[column.title] = ele[column.field];
+
+//         })
+
+//         return entry;
+
+//     })
+// }

package/core/lib/elements/complex/basic-table/basic-table.scss

@@ -0,0 +1,4 @@
+.table-actions {
+    display: flex;
+    justify-content: flex-end;
+}

package/core/lib/elements/complex/date-display/date-display.js

@@ -0,0 +1,37 @@
+
+/**
+ * Component used for Table 
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect } from 'react';
+
+//  import './basic-table.scss';
+
+import { DateUtils } from '../../../utils';
+
+/**
+ * Basic Tabular
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function DateDisplay({ value, format }) {
+
+    return (
+
+        <>
+
+            {DateUtils.formatDate(value)}
+
+        </>
+    );
+}
+
+
+
+
+

package/core/lib/elements/complex/error-boundary/error-boundary.js

@@ -0,0 +1,29 @@
+/**
+ * Function to add error boundary
+ * Using this component, If any functionality breaks, the application will not break
+ */
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    componentDidCatch(error, info) {
+        // Display fallback UI
+        this.setState({ hasError: true });
+        // You can also log the error to an error reporting service
+        // logErrorToMyService(error, info);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return <p>The module you are trying to access is having some issue. Please do continue with the other modules while we work on this.</p>;
+        }
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

package/core/lib/elements/complex/google-location-input/map-container-library-load.js

@@ -0,0 +1,93 @@
+
+
+
+// import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
+// import React, { Component } from 'react';
+
+// const mapStyles = {
+//   width: "96%",
+//   height: "50%"
+// };
+
+// export class MapContainer extends Component {
+
+
+//   state = {
+//     showingInfoWindow: true,
+//     mapLoaded: false,
+//      activeMarker: {},         
+//     selectedPlace: {}
+//   };
+
+
+
+//   onMarkerMounted = element => this.onMarkerClick(element.props, element.marker, element);
+
+
+
+//   onMarkerClick = (props, marker, e) => {
+//     this.setState({
+//       showingInfoWindow: true,
+//       selectedPlace: props,
+//       activeMarker: marker,
+//     });
+//   };
+
+
+
+//   render() {
+
+//     console.log(this.props.data)
+//     return (
+//       <Map google={this.props.google} style={mapStyles} zoom={7} initialCenter={{
+//         lat: 10.543190,
+//         lng: 76.136627,
+//       }}  >
+
+
+//         {this.props.data.map((ref) => {
+
+//           var lat = ref.data[0].opReg.referrer.refr_latitude;
+//           var lng = ref.data[0].opReg.referrer.refr_longitude;
+
+//           var position = {
+//             lat: lat,
+//             lng: lng
+//           };
+
+
+//           return (
+//             <>
+//               <Marker onClick={this.onMarkerClick}
+//                 ref={this.onMarkerMounted} position={{
+//                   lat: 10.543190,
+//                   lng: 76.136627
+//                 }} name={'Current location'} >
+
+//               <InfoWindow marker={this.state.activeMarker}  onClose={this.onInfoWindowClose} visible={true} position={{
+//                 lat: 10.543190,
+//                 lng: 76.136627
+//               }}>
+//                 <div><h2>Place</h2></div>
+//               </InfoWindow>
+              
+//               </Marker>
+//             </>
+//           )
+//         }
+//         )
+//         }
+
+//       </Map>
+//     );
+//   }
+
+// }
+
+// export default GoogleApiWrapper({
+
+//   apiKey: 'AIzaSyAMMRIvR_niHHtS4tUHiw46OatXIoPSONs'
+
+
+//   // apiKey: 'AIzaSyA2Jbw1Zpws6LFIxi3Xyb48vUOEoWRbeZA'
+// })(MapContainer)