Merge pull request #107 from REAN-Foundation/release/uat-0.2.15

Release/uat 0.2.15
REAN-Foundation · Dec 23, 2024 · 3dc375d · 3dc375d
2 parents 2107210 + 9198de0
commit 3dc375d
Show file tree

Hide file tree

Showing 45 changed files with 2,008 additions and 886 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -69,3 +69,12 @@ a:not([class]):hover {
 	/* border-radius: 14px; */
 	/* border: 3px solid var(--primary); */
 }
+
+.table th[data-sort]:hover {
+	background-color: inherit !important;
+}
+
+.table tbody td {
+	padding-left: 16px !important; 
+    padding-right: 16px !important;
+}
diff --git a/src/lib/components/analytics/PieChart.svelte b/src/lib/components/analytics/PieChart.svelte
@@ -8,42 +8,91 @@
     const tickColorLight = getTickColorLight();
     const tickColorDark = getTickColorDark();
 
-    export let labels: [];
-    export let data: [];
-    export let title: string;
+    export let labels: string[] = [];
+    export let data: number[] = [];
+    export let title: string = '';
+    export let showLegendData: boolean = false;
 
     let pieChart;
     let ctx;
-
-    console.log(data, 'data', labels);
     const colorPalette = getDoughnutColors();
 
-    onMount(async () => {
-        // const dynamicColors = getDynamicColors(data); // Get dynamic colors based on the dataset
+    const initChart = () => {
+        if (pieChart) {
+            pieChart.destroy();
+        }
+        ctx = (document.getElementById('myPieChart') as HTMLCanvasElement)?.getContext('2d');
 
-        ctx = pieChart.getContext('2d');
         pieChart = new Chart(ctx, {
             type: 'pie',
             data: {
                 labels: labels,
                 datasets: [
                     {
                         data: data,
-                        backgroundColor: colorPalette, // Dynamic colors for the pie chart
+                        backgroundColor: colorPalette,
                         hoverBackgroundColor: colorPalette
                     }
                 ]
             },
             options: {
                 responsive: true,
                 plugins: {
+                    // legend: {
+                    //     display: true,
+                    //     position: 'bottom',
+                    //     labels: {
+                    //         boxWidth: 10,
+                    //         boxHeight: 10,
+                    //         color: document.documentElement.classList.contains('dark') ? tickColorDark : tickColorLight,
+
+                    //     }
+                    // },
                     legend: {
                         display: true,
                         position: 'bottom',
                         labels: {
                             boxWidth: 10,
                             boxHeight: 10,
-                            color: document.documentElement.classList.contains('dark') ? tickColorDark : tickColorLight
+                            color: document.documentElement.classList.contains('dark') ? tickColorDark : tickColorLight,
+                            generateLabels: (chart: Chart) => {
+                                const data = chart.data;
+
+                                if (data.labels?.length && data.datasets?.length) {
+                                    const dataset = data.datasets[0];
+                                    const total = dataset.data.reduce((acc: number, curr: any) => {
+                                        if (typeof curr === 'number') {
+                                            return acc + curr;
+                                        } else if (Array.isArray(curr)) {
+                                            return acc + curr[0] || 0;
+                                        } else if (typeof curr === 'object' && 'x' in curr && 'y' in curr) {
+                                            return acc + (curr.x || 0);
+                                        } else {
+                                            return acc;
+                                        }
+                                    }, 0);
+
+                                    return data.labels.map((label, i) => {
+                                        const value = typeof dataset.data[i] === 'number' ? dataset.data[i] : 0;
+                                        const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
+                                        const fillStyle = dataset.backgroundColor?.[i] || '#000';
+                                        const strokeStyle = dataset.borderColor?.[i] || '#fff';
+
+                                        const text = showLegendData
+                                            ? `${label}: ${value} (${percentage}%)` 
+                                            : `${label}`;
+                                        return {
+                                            text: text,
+                                            fillStyle,
+                                            strokeStyle,
+                                            hidden: false,
+                                            index: i
+                                        };
+                                    });
+                                }
+
+                                return [];
+                            }
                         }
                     },
                     title: {
@@ -58,16 +107,41 @@
                             weight: 'normal',
                             lineHeight: 1.2
                         }
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: (context) => {
+                                const label = context.label || '';
+                                const value = context.raw as number;
+                                const total = context.dataset.data.reduce((acc, curr) => acc + (curr as number), 0);
+                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
+                                return `${label}: ${value} (${percentage}%)`;
+                            }
+                        }
                     }
                 }
             }
         });
+    };
+
+    onMount(() => {
+        initChart();
     });
+
+    $: {
+        if (data.length > 0 && labels.length > 0) {
+            initChart();
+        }
+    }
 </script>
 
-<div class="h-96 w-full  items-center pl-10 justify-center">
-    {#if data}
-        <canvas height="400" width="400"  bind:this={pieChart} />
+<div class="h-96 w-full items-center justify-center">
+    {#if data.length > 0 && labels.length > 0}
+        <canvas
+            id="myPieChart"
+            height="400"
+            width="400"
+        />
     {:else}
         <p>No data available.</p>
     {/if}

diff --git a/src/lib/components/navbar/dashboard.tabs.svelte b/src/lib/components/navbar/dashboard.tabs.svelte
@@ -108,7 +108,7 @@
       {/if}
     </div>
     {#if tenantCode === 'default'}
-    <div class="relative inline-block text-left ml-auto">
+    <div class="relative inline-block text-left ml-auto pl-2 ">
       <div>
         <button
           type="button"

diff --git a/src/lib/components/tooltip.svelte b/src/lib/components/tooltip.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let text: string;
+
+    let showTooltip = false;
+    let tooltipElement: HTMLSpanElement;
+    let shouldShowTooltip = false;
+
+    $: shouldShowTooltip = text.length > 40;
+
+    function handleMouseEnter() {
+        if (shouldShowTooltip) {
+            showTooltip = true;
+        }
+    }
+
+    function handleMouseLeave() {
+        showTooltip = false;
+    }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span
+    class="relative inline-block"
+    on:mouseenter={handleMouseEnter}
+    on:mouseleave={handleMouseLeave}
+>
+    <slot></slot>
+    {#if showTooltip && shouldShowTooltip}
+        <span
+            bind:this={tooltipElement}
+            class="absolute z-10 text-xs rounded-lg shadow-lg"
+            style="bottom: 100%; left: 50%; transform: translateX(-50%); background-color: rgba(71, 85, 105, 0.95); border: 1px solid rgba(51, 65, 85, 0.1); color: #ffffff; margin-top: 10px; padding: 8px; font-size: 12px; min-width: 200px; max-width: 400px; text-align: left; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
+        >
+            {text}
+            <span
+                class="absolute"
+                style="top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(71, 85, 105, 0.95);"
+            >
+            </span>
+        </span>
+    {/if}
+</span>
diff --git a/src/lib/components/users-stats/charts/pie-chart.svelte b/src/lib/components/users-stats/charts/pie-chart.svelte
@@ -56,6 +56,17 @@
 							color: document.documentElement.classList.contains('dark') ? tickColorDark : tickColorLight
 						}
 					},
+					tooltip: {
+						callbacks: {
+							label: (context) => {
+								const label = context.label || '';
+								const value = context.raw as number;
+								const total = context.dataset.data.reduce((acc, curr) => acc + (curr as number), 0);
+								const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
+								return `${label}: ${value} (${percentage}%)`;
+							}
+						}
+					},
 					title: {
 						display: false,
 						text: title,

diff --git a/src/lib/options/aha.options.ts b/src/lib/options/aha.options.ts
@@ -126,7 +126,7 @@ export const Options: FeatureOptions[] = [
     },
     //..............................
     {
-        Name: 'Miscellaneous',
+        Name: 'Add-ons',
         Enabled: true
     },
     {
@@ -147,7 +147,7 @@ export const Options: FeatureOptions[] = [
     },
     {
         Name: 'Newsfeeds',
-        Enabled: true
+        Enabled: false
     },
     //..............................
     {

diff --git a/src/lib/options/gmu.options.ts b/src/lib/options/gmu.options.ts
@@ -126,7 +126,7 @@ export const Options: FeatureOptions[] = [
     },
     //..............................
     {
-        Name: 'Miscellaneous',
+        Name: 'Add-ons',
         Enabled: false
     },
     {

diff --git a/src/lib/options/rean.options.ts b/src/lib/options/rean.options.ts
@@ -126,7 +126,7 @@ export const Options: FeatureOptions[] = [
     },
     //..............................
     {
-        Name: 'Miscellaneous',
+        Name: 'Add-ons',
         Enabled: true
     },
     {
@@ -147,7 +147,7 @@ export const Options: FeatureOptions[] = [
     },
     {
         Name: 'Newsfeeds',
-        Enabled: true
+        Enabled: false
     },
     //..............................
     {

diff --git a/src/lib/server/cache/cache.interface.ts b/src/lib/server/cache/cache.interface.ts
@@ -0,0 +1,9 @@
+
+export interface ICache {
+    set(key: string, value: unknown): Promise<void>;
+    get(key: string): Promise<unknown | undefined>;
+    has(key: string): Promise<boolean>;
+    delete(key: string): Promise<boolean>;
+    clear(): Promise<void>;
+    findAndClear(searchPattern: string): Promise<string[]>;
+}
diff --git a/src/lib/server/cache/cache.map.ts b/src/lib/server/cache/cache.map.ts
@@ -0,0 +1,45 @@
+
+export class CacheMap<V> {
+
+    private cache: Map<string, V>;
+
+    constructor() {
+        this.cache = new Map<string, V>();
+    }
+
+    set(key: string, value: V): void {
+        this.cache.set(key, value);
+    }
+
+    get(key: string): V | undefined {
+        return this.cache.get(key);
+    }
+
+    has(key: string): boolean {
+        return this.cache.has(key);
+    }
+
+    delete(key: string): boolean {
+        return this.cache.delete(key);
+    }
+
+    clear(): void {
+        this.cache.clear();
+    }
+
+    findAndClear(searchPattern: string): string[] {
+        let keys: string[] = [];
+        for (let key of this.cache.keys()) {
+            if (key.includes(searchPattern)) {
+                keys.push(key);
+            }
+        }
+        for (let key of keys) {
+            this.cache.delete(key);
+        }
+        return keys;
+    }
+
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
diff --git a/src/lib/server/cache/cache.md b/src/lib/server/cache/cache.md
@@ -0,0 +1,27 @@
+# Cache
+
+## Setup KeyDB as a Redis cache
+KeyDB is a high-performance fork of Redis with a focus on multithreading and memory efficiency
+It is designed to be a drop-in replacement for Redis
+KeyDB is fully compatible with Redis and supports all Redis commands
+
+```
+docker run \
+-d --name keydb \
+-p 6379:6379 \
+-e "CACHE_PASSWORD=your-password" \
+-v /path/to/your/data:/data \
+-v /path/to/your/logs:/logs keydb/keydb \
+eqalpha/keydb
+```
+
+Process to connect with KeyDB is same as Redis.
+1. Run the docker container.
+2. Set the password by logging into container
+   a. First run redis-cli as 
+      ```# redis-cli```
+   b. Set the password using
+      ```# auth <your-password>```
+3. Create a client and connect to KeyDB.
+4. Use the client to perform operations.
+5. Close the connection when done.