ui-soxo-bootstrap-core 2.4.24

package/core/lib/elements/complex/google-map/google-map.js

@@ -0,0 +1,230 @@
+/**
+ * Our  
+ * 
+ * @description
+ * @author Hasna
+ * 
+ * @todo A map component should not have the logic of marker . It should be managed in the consuming 
+ * component
+ * 
+ */
+
+import React from "react";
+
+import GoogleMapReact from 'google-map-react';
+
+import './google-map.scss'
+
+
+
+export default function GoogleMap(props) {
+
+
+  let { CandidatesModal } = props;
+
+  const defaultProps = {
+    center: props.center,
+    zoom: 5
+  };
+
+  return (
+    // Important! Always set the container height explicitly
+    <div className="google-maps-element" style={{ height: props.height, width: props.width }}>
+
+
+      <GoogleMapReact
+        bootstrapURLKeys={{ key: "AIzaSyBuXbHQ3ZJYKOLkrBOk90JSFu1yHSbDZ-k" }}
+        center={defaultProps.center}
+        defaultZoom={defaultProps.zoom}
+        yesIWantToUseGoogleMapApiInternals
+        onGoogleApiLoaded={({ map, maps }) => props.onMapsLoaded(map, maps)}
+        options={{
+          gestureHandling: 'greedy'
+        }}
+
+        draggable={props.draggable}
+      >
+
+        {props.data && props.data.map((refr) => {
+
+          var referrer = {}
+
+          var lat = refr.data[0].op_bill[0].opReg.referrer.refr_latitude;
+          var lng = refr.data[0].op_bill[0].opReg.referrer.refr_longitude;
+
+          referrer = refr.counts;
+          {/* <> */ }
+
+          return (<Marker
+
+            CandidatesModal={CandidatesModal}
+
+            //key={place.id}
+            lat={lat}
+            lng={lng}
+            referrer={referrer}
+
+            data={refr.data}
+
+
+          />)
+          {/* </> */ }
+        })}
+
+
+        {props.lat && props.lng ?
+          <div>
+            <Marker lat={props.lat} lng={props.lng} referrer={props.referrer} />
+
+          </div> : null}
+
+      </GoogleMapReact>
+    </div>
+  );
+}
+
+
+// Marker component
+const Marker = (props) => {
+  const markerStyle = {
+    border: "1px solid white",
+    borderRadius: "50%",
+    height: 10,
+    width: 10,
+    backgroundColor: "red",
+    cursor: "pointer",
+    zIndex: 10
+  };
+
+  return (
+    <>
+      <div style={markerStyle} />
+      <InfoWindow data={props.data} CandidatesModal={props.CandidatesModal} lat={props.lat} lng={props.lng} referrer={props.referrer} />
+    </>
+  );
+};
+
+
+// InfoWindow component
+const InfoWindow = ({ lat, lng, referrer, CandidatesModal, data }) => {
+
+
+  const infoWindowStyle = {
+    position: "relative",
+    bottom: '105px',
+    left: "-55px",
+    width: 200,
+    // height: 80,
+    backgroundColor: "white",
+    boxShadow: "rgb(195 195 195 / 30%) 0px 2px 7px 1px",
+    padding: 10,
+    fontSize: 14,
+    borderRadius: 5,
+    //zIndex: 100,
+    textAlign: 'left',
+  };
+
+
+
+
+  const paraStyle = {
+    marginBottom: "0px",
+  };
+
+
+  const contentStyle = {
+    display: 'flex',
+    justifyContent: 'space-between'
+
+  }
+
+
+
+  let confirmed_positive = (parseFloat((referrer.total_lab_positive_cases / referrer.total_cases) * 100).toFixed(2));
+
+
+  return (
+
+
+    <div style={infoWindowStyle} lat={lat} lng={lng}>
+
+
+      {
+        referrer.title
+          ?
+          (<div>
+
+            {/* Campaign Name */}
+            <p style={paraStyle}>
+              <b>
+                {referrer.title}
+              </b>
+            </p>
+            {/* Campaign Name Ends */}
+
+            {/* <div>
+              Total Cases - 
+            </div> */}
+
+            {/* Total Cases */}
+            {/* <p>
+              <b> - Cases</b>
+            </p> */}
+            {/* Total Cases Ends */}
+
+            <div style={contentStyle}>
+
+              {/* XRay Positive */}
+              <p style={paraStyle}>
+                <b>{referrer.total_lab_positive_cases}</b> +ve / {referrer.total_cases} - <b>{confirmed_positive} %</b>
+
+                {/* - <b>{referrer.total_lab_positive_cases}</b> */}
+              </p>
+              {/* XRay Positive Ends */}
+
+
+
+              {/* LAB Positive */}
+              {/* <div>
+                <b>{referrer.total_lab_positive_cases}</b> - LAB +ve
+              </div> */}
+              {/* LAB Positive Ends */}
+
+            </div>
+
+            {/* <p>
+              Positive Ratio - 
+            </p> */}
+
+
+            <CandidatesModal records={data} />
+
+          </div>)
+          :
+          <p>
+            <b>
+              {referrer}
+            </b>
+          </p>
+      }
+
+    </div>
+  );
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/core/lib/elements/complex/google-map/google-map.scss

@@ -0,0 +1,13 @@
+.google-maps-element {
+  .arrow {
+    border: solid white;
+    color: white;
+    border-width: 0 3px 3px 0;
+    display: inline-block;
+    padding: 3px;
+  }
+  .down {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+  }
+}

package/core/lib/elements/complex/line-graph/line-graph.js

@@ -0,0 +1,108 @@
+/**
+ * Component used for Table 
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+
+import React, { useState, useEffect } from 'react';
+
+// import { ResponsiveLine } from '@nivo/line';
+
+
+/**
+ * To Display a bar graph
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function LineGraph({ data, ...props }) {
+
+    var content = {
+        id: 'graph',
+        data: [],
+    };
+
+    data.forEach((record) => {
+        content.data.push({
+            x: record.Date,
+            y: record.Cases,
+        });
+    });
+
+
+    return (
+        <div className="graph-container">
+            {/* <ResponsiveLine
+                data={[content]}
+                margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+                xScale={{ type: 'point' }}
+                yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
+                yFormat=" >-.2f"
+                axisTop={null}
+                axisRight={null}
+                axisBottom={{
+                    orient: 'bottom',
+                    tickSize: 5,
+                    tickPadding: 5,
+                    tickRotation: 0,
+                    legend: 'Date',
+                    legendOffset: 36,
+                    legendPosition: 'middle',
+                }}
+                axisLeft={{
+                    orient: 'left',
+                    tickSize: 5,
+                    tickPadding: 5,
+                    tickRotation: 0,
+                    legend: 'Weight',
+                    legendOffset: -40,
+                    legendPosition: 'middle',
+                }}
+                pointSize={10}
+                pointColor={{ theme: 'background' }}
+                pointBorderWidth={2}
+                pointBorderColor={{ from: 'serieColor' }}
+                pointLabelYOffset={-12}
+                useMesh={true}
+                legends={[
+                    {
+                        anchor: 'bottom-right',
+                        direction: 'column',
+                        justify: false,
+                        translateX: 100,
+                        translateY: 0,
+                        itemsSpacing: 0,
+                        itemDirection: 'left-to-right',
+                        itemWidth: 80,
+                        itemHeight: 20,
+                        itemOpacity: 0.75,
+                        symbolSize: 12,
+                        symbolShape: 'circle',
+                        symbolBorderColor: 'rgba(0, 0, 0, .5)',
+                        effects: [
+                            {
+                                on: 'hover',
+                                style: {
+                                    itemBackground: 'rgba(0, 0, 0, .03)',
+                                    itemOpacity: 1,
+                                },
+                            },
+                        ],
+                    },
+                ]}
+            /> */}
+        </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/location-search-input/location-search-input.js

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react'
+
+import PlacesAutocomplete from 'react-places-autocomplete'
+
+import {
+  geocodeByAddress,
+  geocodeByPlaceId,
+  getLatLng,
+} from 'react-places-autocomplete'
+
+export default function LocationSearchInput({ value, onChange, disabled }) {
+  const [address, setAddress] = useState(
+    value && value.value ? value.value : value,
+  )
+
+  const [coordinates, setCoordinates] = useState({ lat: null, lng: null })
+
+  const handleSelect = async (value) => {
+    const results = await geocodeByAddress(value)
+
+    const ll = await getLatLng(results[0])
+
+    console.log(ll)
+
+    setAddress(value)
+
+    onChange({ ll, value })
+
+    setCoordinates(ll)
+
+    return ll
+  }
+
+  return (
+    <div>
+      {/* <p><b>Lat:</b> {coordinates.lat}</p>
+
+            <p><b>Lng:</b> {coordinates.lng}</p>
+
+            <p><b>Address:</b> {address}</p> */}
+
+      <PlacesAutocomplete
+        value={address}
+        onChange={setAddress}
+        onSelect={handleSelect}
+      >
+        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
+          <div key={suggestions.description} className="input">
+            <input
+              {...getInputProps({
+                placeholder: 'Search Places ...',
+                className: 'ant-input',
+                disabled: disabled,
+              })}
+            />
+            <div
+              className="autocomplete-dropdown-container"
+              style={{
+                position: 'absolute',
+                background: 'white',
+                border: ' 1px solid #e2e2e2',
+                zIndex: '999',
+                width: '100%',
+              }}
+            >
+              {loading && <div>Loading...</div>}
+              {suggestions.map((suggestion) => {
+                const className = suggestion.active
+                  ? 'suggestion-item--active'
+                  : 'suggestion-item'
+                // inline style for demonstration purpose
+                const style = suggestion.active
+                  ? {
+                      backgroundColor: '#D3D3D3',
+                      cursor: 'pointer',
+                      padding: '5px',
+                    }
+                  : {
+                      backgroundColor: 'white',
+                      cursor: 'pointer',
+                      padding: '5px',
+                    }
+                return (
+                  <div
+                    {...getSuggestionItemProps(suggestion, {
+                      className,
+                      style,
+                    })}
+                  >
+                    <span>{suggestion.description}</span>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+      </PlacesAutocomplete>
+    </div>
+  )
+}

package/core/lib/elements/complex/pie-chart/pie-chart.js

@@ -0,0 +1,203 @@
+/**
+ * Component used for Table 
+ * 
+ * @author Hasna
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+
+import React, { useState, useEffect } from 'react';
+
+
+// import { ResponsivePie } from '@nivo/pie'
+
+import { Modal } from 'antd';
+
+import StatisticCard from '../statistic-card/statistic-card';
+
+/**
+ * To Display a bar graph
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function PieChart({ data, ...props }) {
+
+    const [pieData, setPieData] = useState([]);
+
+    const [def, setDef] = useState([])
+
+    useEffect(() => {
+
+        if (data.length) {
+
+            data = data.slice(1, data.length).map((record) => {
+
+                record = {
+                    "id": record.counts.title,
+                    "label": record.counts.title,
+                    "value": record.counts.total_cases,
+                    "color": "hsl(2, 70%, 50%)",
+                    stats: record.counts
+                }
+
+                return record;
+            })
+        }
+
+
+        setPieData(data)
+
+        data = data.map((item) => {
+            item = {
+                match: {
+                    id: item.id
+                },
+                id: 'lines'
+            }
+
+            return item;
+        })
+
+        setDef(data)
+
+    }, [])
+
+
+    return (
+
+        <div>
+
+            <div className="graph-container">
+                {/* {pieData.length ?
+                    <ResponsivePie
+
+                        arcLabelsSkipAngle={20}
+                        arcLabelsRadiusOffset={0.55}
+                        arcLabelsTextColor={{
+                            from: 'color',
+                            modifiers: [['darker', 0.6]],
+                        }}
+                        arcLinkLabelsOffset={2}
+                        arcLinkLabelsColor={{ from: 'color' }}
+                        arcLinkLabelsThickness={3}
+
+                        arcLabelsComponent={({ datum, label, style }) => {
+
+
+                            return (<div transform={style.transform}>
+                                <circle fill={style.textColor} cy={6} r={15} />
+                                <circle fill="#ffffff" stroke={datum.color} strokeWidth={2} r={16} />
+                                <text
+                                    textAnchor="middle"
+                                    dominantBaseline="central"
+                                    fill={style.textColor}
+                                    style={{
+                                        fontSize: 10,
+                                        fontWeight: 800,
+                                    }}
+                                >
+                                    {label}
+                                </text>
+                            </div>)
+                        }}
+
+                        tooltip={({ datum, }) => {
+
+                            const { id, value, color, data } = datum
+
+                            const { stats } = data;
+
+                            const { total_lab_positive_cases } = stats;
+
+                            return (< div
+                                style={{
+                                    padding: 12,
+                                    color,
+                                    background: '#222222',
+                                }}
+                            >
+                                <strong>
+                                    {id}: {value}
+                                </strong>
+
+                                <br />
+
+                                <span>Confirmed Positive : {total_lab_positive_cases}</span>
+
+                            </div>)
+                        }}
+
+                        data={pieData}
+                        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
+                        innerRadius={0.5}
+                        padAngle={0.7}
+                        cornerRadius={3}
+                        activeOuterRadiusOffset={8}
+                        borderWidth={1}
+                        borderColor={{
+                            from: 'red',
+                            modifiers: [
+                                [
+                                    'darker',
+                                    0.2
+                                ]
+                            ]
+                        }}
+                        arcLinkLabelsSkipAngle={10}
+                        arcLinkLabelsTextColor="#333333"
+
+
+                        defs={[
+                            {
+                                id: 'dots',
+                                type: 'patternDots',
+                                background: 'inherit',
+                                color: 'rgba(255, 255, 255, 0.3)',
+                                size: 4,
+                                padding: 1,
+                                stagger: true
+                            },
+                            {
+                                id: 'lines',
+                                type: 'patternLines',
+                                background: 'inherit',
+                                color: 'rgba(255, 255, 255, 0.3)',
+                                rotation: -45,
+                                lineWidth: 6,
+                                spacing: 10
+                            }
+                        ]}
+                        fill={def}
+                        legends={[
+                            {
+                                anchor: 'right',
+                                direction: 'column',
+                                justify: false,
+                                translateX: 0,
+                                translateY: 10,
+                                itemsSpacing: 0,
+                                itemWidth: 100,
+                                itemHeight: 20,
+                                itemTextColor: '#999',
+                                itemDirection: 'left-to-right',
+                                itemOpacity: 1,
+                                symbolSize: 18,
+                                symbolShape: 'circle',
+                                effects: [
+                                    {
+                                        on: 'hover',
+                                        style: {
+                                            itemTextColor: '#000'
+                                        }
+                                    }
+                                ]
+                            }
+                        ]}
+                    />
+                    : null} */}
+
+            </div>
+        </div >)
+}

package/core/lib/elements/complex/qr-code/qr-code.js

@@ -0,0 +1,27 @@
+
+/**
+ * QR Component
+ */
+
+
+import React from 'react';
+
+import QRCode from 'qrcode.react';
+
+
+/**
+ * Use `Card` for Card you need to keep.
+ */
+export default function QRCodeElement({
+    value,
+    className,
+    imageSettings = {}
+}) {
+
+
+    return <div className={`${className}`}>
+
+
+        <QRCode size={80} width={20} value={value} imageSettings={imageSettings} />
+    </div>;
+}