Merge pull request #5 from anedyaio/dev

add DataTable widget

Author: surajmaurya-git

src/components/GaugeChart.tsx

@@ -22,12 +22,12 @@ const GaugeChart: React.FC<GaugeChartProps> = ({
 }) => {
   // Clamp value to ensure it stays within range
   const clampedValue = Math.min(max, Math.max(min, value));
-  
+
   //, ... (existing code)
-  
+
   // Calculate percentage (0 to 1) for needle position
   const normalizedValue = (clampedValue - min) / (max - min);
-  
+
   // Angle for needle: -90 (left) to 90 (right)
   const angle = normalizedValue * 180 - 90;
 
@@ -51,6 +51,17 @@ const GaugeChart: React.FC<GaugeChartProps> = ({
     };
   };
 
+  // Helper for dynamic precision based on step size
+  const getPrecision = (num: number) => {
+    if (Number.isInteger(num)) return 0;
+    const str = num.toString();
+    const decimalPart = str.split('.')[1] || '';
+    return Math.min(decimalPart.length, 3); // Cap at 3 decimals to avoid floating point issues
+  };
+
+  const step = (max - min) / 4;
+  const precision = getPrecision(step);
+
   // Generate ticks
   const ticks = [0, 0.25, 0.5, 0.75, 1].map((percent) => {
     const val = min + (max - min) * percent;
@@ -69,7 +80,7 @@ const GaugeChart: React.FC<GaugeChartProps> = ({
       y2: end.y, 
       tx: textPos.x,
       ty: textPos.y,
-      value: Math.round(val), 
+      value: parseFloat(val.toFixed(precision)), 
       angle: tickAngle 
     };
   });
@@ -81,7 +92,7 @@ const GaugeChart: React.FC<GaugeChartProps> = ({
     if (val <= 0) return "text-blue-500";
     if (val < 40) return "text-cyan-600";
     if (val < 70) return "text-orange-500";
-    return "text-red-600"; 
+    return "text-red-600";
   };
 
   const formatValue = (v: number) => {
@@ -101,7 +112,7 @@ const GaugeChart: React.FC<GaugeChartProps> = ({
               <stop offset="100%" stopColor="#ef4444" /> {/* Red */}
             </linearGradient>
             <filter id="needleShadow" x="-50%" y="-50%" width="200%" height="200%">
-               <feDropShadow dx="1" dy="1" stdDeviation="2" floodOpacity="0.3"/>
+              <feDropShadow dx="1" dy="1" stdDeviation="2" floodOpacity="0.3" />
             </filter>
           </defs>
 
@@ -117,33 +128,33 @@ const GaugeChart: React.FC<GaugeChartProps> = ({
 
           {/* Colored Gradient Arc */}
           <path
-             d="M 30 100 A 70 70 0 0 1 170 100"
-             fill="none"
-             stroke="url(#coldToHotGradient)"
-             strokeWidth={strokeWidth}
-             strokeLinecap="round"
+            d="M 30 100 A 70 70 0 0 1 170 100"
+            fill="none"
+            stroke="url(#coldToHotGradient)"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
           />
 
           {/* Ticks & Labels */}
           {ticks.map((tick, i) => (
-             <g key={i}>
-                <line 
-                    x1={tick.x1} y1={tick.y1} 
-                    x2={tick.x2} y2={tick.y2} 
-                    stroke="currentColor" 
-                    strokeWidth="1.5" 
-                    className="text-muted-foreground/50" 
-                />
-                <text 
-                  x={tick.tx} 
-                  y={tick.ty} 
-                  textAnchor="middle" 
-                  alignmentBaseline="middle"
-                  className="text-[10px] fill-muted-foreground font-medium"
-                >
-                  {tick.value}
-                </text>
-             </g>
+            <g key={i}>
+              <line
+                x1={tick.x1} y1={tick.y1}
+                x2={tick.x2} y2={tick.y2}
+                stroke="currentColor"
+                strokeWidth="1.5"
+                className="text-muted-foreground/50"
+              />
+              <text
+                x={tick.tx}
+                y={tick.ty}
+                textAnchor="middle"
+                alignmentBaseline="middle"
+                className="text-[10px] fill-muted-foreground font-medium"
+              >
+                {tick.value}
+              </text>
+            </g>
           ))}
 
           {/* Needle Layer */}
@@ -154,41 +165,41 @@ const GaugeChart: React.FC<GaugeChartProps> = ({
               transition: "transform 1.2s cubic-bezier(0.4, 0, 0.2, 1)",
             }}
           >
-             {/* Main triangular needle */}
-             <path
-               d="M 100 110 L 95 100 L 100 40 L 105 100 Z"
-               fill="currentColor"
-               className="text-foreground"
-               filter="url(#needleShadow)"
-             />
-             {/* Center Pivot */}
+            {/* Main triangular needle */}
+            <path
+              d="M 100 110 L 95 100 L 100 40 L 105 100 Z"
+              fill="currentColor"
+              className="text-foreground"
+              filter="url(#needleShadow)"
+            />
+            {/* Center Pivot */}
             <circle cx="100" cy="100" r="5" className="fill-foreground" />
             <circle cx="100" cy="100" r="2" className="fill-background" />
           </g>
         </svg>
       </div>
-      
+
       {/* Detail Value Display */}
       {showValue && (
         <div className="-mt-8 text-center flex flex-col items-center z-10 relative">
-           <div className="flex items-baseline gap-1">
-               <span className={`text-4xl font-bold tracking-tight ${getValueColor(value)}`}>
-                   {formatValue(value)}
-               </span>
-               <span className="text-sm font-bold text-muted-foreground/80 mb-1">{unit}</span>
-           </div>
-       
-            {timestamp && timestamp > 0 && (
-              <span className="text-xs text-muted-foreground/60 mt-1">
-                {new Date(timestamp * 1000).toLocaleString(undefined, {
-                    month: "short",
-                    day: "numeric",
-                    hour: "2-digit",
-                    minute: "2-digit",
-                    second: "2-digit",
-                  })}
-              </span>
-            )}
+          <div className="flex items-baseline gap-1">
+            <span className={`text-4xl font-bold tracking-tight ${getValueColor(value)}`}>
+              {formatValue(value)}
+            </span>
+            <span className="text-sm font-bold text-muted-foreground/80 mb-1">{unit}</span>
+          </div>
+
+          {timestamp && timestamp > 0 && (
+            <span className="text-xs text-muted-foreground/60 mt-1">
+              {new Date(timestamp * 1000).toLocaleString(undefined, {
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+              })}
+            </span>
+          )}
         </div>
       )}
     </div>

src/components/dashboard-builder/ComponentSidebar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Card, CardContent } from '@/components/ui/card';
-import { Gauge, LineChart, Hash, Settings, PieChart, ToggleRight, Battery, SlidersHorizontal, Cylinder, Activity, Map as MapIcon, Video, BarChart2, Target } from 'lucide-react';
+import { Gauge, LineChart, Hash, Settings, PieChart, ToggleRight, Battery, SlidersHorizontal, Cylinder, Activity, Map as MapIcon, Video, BarChart2, Target, Table } from 'lucide-react';
 import { useBuilderStore } from '../../store/useBuilderStore';
 import { WIDGET_SIZE_CONSTRAINTS } from './widgetConfig';
 
@@ -19,6 +19,7 @@ const WIDGET_TYPES = [
   { id: 'SparklineWidget',    name: 'Sparkline Trend',       icon: <Activity size={18} /> },
   { id: 'MapWidget',          name: 'Map',                   icon: <MapIcon size={18} /> },
   { id: 'CameraViewerWidget', name: 'Camera Viewer',         icon: <Video size={18} /> },
+  { id: 'DataTableWidget',    name: 'Data Table',            icon: <Table size={18} /> },
 ];
 
 export default function ComponentSidebar() {