@visns-studio/visns-components 5.1.26 → 5.2.0

package/package.json

@@ -51,6 +51,7 @@
         "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
+        "swapy": "^1.0.5",
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.12.0",
@@ -77,7 +78,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.1.26",
+    "version": "5.2.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/generic/GenericDashboard.jsx

@@ -1,6 +1,6 @@
 import '../../styles/global.css';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsiveLine } from '@nivo/line';
@@ -8,6 +8,7 @@ import { ResponsivePie } from '@nivo/pie';
 import Popup from 'reactjs-popup';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
+import { createSwapy } from 'swapy';
 import { CircleX } from 'akar-icons';
 
 import CustomFetch from '../../crm/Fetch';
@@ -18,6 +19,8 @@ import styles from './styles/GenericDashboard.module.scss';
 const toSnakeCase = (str) => str.replace(/[\s-]+/g, '_').toLowerCase();
 
 function GenericDashboard({ setting }) {
+    const swapy = useRef(null);
+    const container = useRef(null);
     const navigate = useNavigate();
     const [data, setData] = useState({});
     const [dropdowns, setDropdowns] = useState({});
@@ -197,6 +200,23 @@ function GenericDashboard({ setting }) {
         fetchData(filters);
     }, [filters]);
 
+    useEffect(() => {
+        // If container element is loaded
+        if (container.current) {
+            swapy.current = createSwapy(container.current);
+
+            // Your event listeners
+            swapy.current.onSwap((event) => {
+                console.log('swap', event);
+            });
+        }
+
+        return () => {
+            // Destroy the swapy instance on component destroy
+            swapy.current?.destroy();
+        };
+    }, []);
+
     const renderFilters = (widget) => {
         if (!widget.filters || widget.filters.length === 0) return null;
 
@@ -407,6 +427,37 @@ function GenericDashboard({ setting }) {
                         widget.props.keys = widgetData.keys;
                     }
 
+                    // Build legendMapping and attach legendLabel and a custom tooltip if a legend is provided.
+                    let legendMapping = {};
+                    if (widget.legend) {
+                        legendMapping = widget.legend.reduce((acc, curr) => {
+                            acc[curr.id] = curr.label;
+                            return acc;
+                        }, {});
+                        widget.props.legendLabel = (e) =>
+                            legendMapping[e.id] || e.id;
+
+                        // Define a custom tooltip that uses the legendMapping
+                        const CustomTooltip = ({ id, value, color }) => {
+                            const label = legendMapping[id] || id;
+                            return (
+                                <div
+                                    style={{
+                                        padding: '6px 9px',
+                                        background: 'white',
+                                        border: `1px solid ${color}`,
+                                        borderRadius: '3px',
+                                    }}
+                                >
+                                    <strong style={{ color }}>{label}</strong>:{' '}
+                                    {value}
+                                </div>
+                            );
+                        };
+
+                        widget.props.tooltip = CustomTooltip;
+                    }
+
                     const barData =
                         widgetData.bar?.data || widgetData.data || widgetData;
 
@@ -420,6 +471,7 @@ function GenericDashboard({ setting }) {
                             </div>
                         );
                     }
+                    break;
                 case 'line':
                     if (widgetData.length > 0) {
                         return (
@@ -733,25 +785,28 @@ function GenericDashboard({ setting }) {
                                         : styles.dashwidget
                                     : ''
                             }`}
+                            data-swapy-slot={`row-slot-${widget.id}-${rowIndex}`}
                         >
-                            <div className={styles.widgetTitle}>
-                                <h2>{widget.title}</h2>
-                            </div>
-                            {renderFilters(widget)}
-                            <div>{renderWidget(widget)}</div>
-                            {widget.modal && (
-                                <div className={styles.widgetAction}>
-                                    <button
-                                        className={`${styles.btn} ${styles.dmore}`}
-                                        onClick={() => openModal(widget.id)}
-                                    >
-                                        View all{' '}
-                                        <span>
-                                            ({data[widget.id]?.length || 0})
-                                        </span>
-                                    </button>
+                            <div data-swapy-item={`widget-${widget.id}`}>
+                                <div className={styles.widgetTitle}>
+                                    <h2>{widget.title}</h2>
                                 </div>
-                            )}
+                                {renderFilters(widget)}
+                                <div>{renderWidget(widget)}</div>
+                                {widget.modal && (
+                                    <div className={styles.widgetAction}>
+                                        <button
+                                            className={`${styles.btn} ${styles.dmore}`}
+                                            onClick={() => openModal(widget.id)}
+                                        >
+                                            View all{' '}
+                                            <span>
+                                                ({data[widget.id]?.length || 0})
+                                            </span>
+                                        </button>
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     ))}
                 </div>
@@ -760,7 +815,7 @@ function GenericDashboard({ setting }) {
     };
 
     return (
-        <div className={styles.grid}>
+        <div className={styles.grid} ref={container}>
             {renderRows()}
             <Popup open={modalShow} onClose={closeModal}>
                 <div className="modalwrap top--modal modalWide">