chore: update version to 0.0.18 and add release date to package.json; refactor chart components for improved configuration handling and UI enhancements

caioricciuti · caioricciuti · commit e560b0835734 · 2025-10-24T17:47:01.000+02:00
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "name": "duck-ui",
   "private": true,
-  "version": "0.0.17",
+  "version": "0.0.18",
+  "release_date": "2025-10-24",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/charts/ChartVisualizationPro.tsx b/src/components/charts/ChartVisualizationPro.tsx
@@ -82,7 +82,7 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
       yAxis: "",
       colors: DEFAULT_COLORS,
       showGrid: true,
-      enableAnimations: true,
+      enableAnimations: false,
       legend: { show: true, position: "top" },
     }
   );
@@ -121,7 +121,21 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
   };
 
   const applyConfig = () => {
-    onConfigChange(localConfig);
+    // Build series configuration from selected Y columns
+    const series = selectedYColumns.map((col, idx) => ({
+      column: col,
+      label: col,
+      color: DEFAULT_COLORS[idx % DEFAULT_COLORS.length],
+    }));
+
+    // Update config with selected Y columns as series
+    const updatedConfig = {
+      ...localConfig,
+      series: series.length > 0 ? series : undefined,
+      yAxis: series.length === 1 ? selectedYColumns[0] : undefined,
+    };
+
+    onConfigChange(updatedConfig);
     toast.success("Chart configuration applied");
   };
 
@@ -133,9 +147,10 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
       yAxis: "",
       colors: DEFAULT_COLORS,
       showGrid: true,
-      enableAnimations: true,
+      enableAnimations: false,
       legend: { show: true, position: "top" },
     });
+    setSelectedYColumns([]);
     toast.info("Chart cleared");
   };
 
diff --git a/src/components/charts/CustomChartTooltip.tsx b/src/components/charts/CustomChartTooltip.tsx
@@ -34,13 +34,12 @@ export const CustomChartTooltip: React.FC<CustomChartTooltipProps> = ({
 
   return (
     <div
-      className="rounded-lg border p-3 shadow-xl"
+      className="rounded-lg border p-3 shadow-lg backdrop-blur-sm"
       style={{
         borderColor: 'hsl(var(--border))',
         backgroundColor: theme === 'dark'
-          ? 'hsl(222.2 84% 4.9%)'  // Solid dark background
-          : 'hsl(0 0% 100%)',        // Solid white background
-        opacity: 1,
+          ? 'rgba(9, 9, 11, 0.92)'  // Semi-transparent dark
+          : 'rgba(255, 255, 255, 0.92)',  // Semi-transparent white
       }}
     >
       {label && (
diff --git a/src/components/explorer/ColumnNode.tsx b/src/components/explorer/ColumnNode.tsx
@@ -1,5 +1,12 @@
 import React, { useState } from "react";
-import { ChevronRight, ChevronDown, Hash, Type, Calendar, ToggleLeft } from "lucide-react";
+import {
+  ChevronRight,
+  ChevronDown,
+  Hash,
+  Type,
+  Calendar,
+  ToggleLeft,
+} from "lucide-react";
 import { type ColumnStats } from "@/store";
 
 interface ColumnNodeProps {
@@ -8,7 +15,12 @@ interface ColumnNodeProps {
 
 const getTypeIcon = (type: string) => {
   const upperType = type.toUpperCase();
-  if (upperType.includes("INT") || upperType.includes("DOUBLE") || upperType.includes("FLOAT") || upperType.includes("DECIMAL")) {
+  if (
+    upperType.includes("INT") ||
+    upperType.includes("DOUBLE") ||
+    upperType.includes("FLOAT") ||
+    upperType.includes("DECIMAL")
+  ) {
     return <Hash className="w-3 h-3" />;
   } else if (upperType.includes("DATE") || upperType.includes("TIME")) {
     return <Calendar className="w-3 h-3" />;
@@ -20,7 +32,12 @@ const getTypeIcon = (type: string) => {
 
 const getTypeColor = (type: string) => {
   const upperType = type.toUpperCase();
-  if (upperType.includes("INT") || upperType.includes("DOUBLE") || upperType.includes("FLOAT") || upperType.includes("DECIMAL")) {
+  if (
+    upperType.includes("INT") ||
+    upperType.includes("DOUBLE") ||
+    upperType.includes("FLOAT") ||
+    upperType.includes("DECIMAL")
+  ) {
     return "text-purple-500 bg-purple-500/10";
   } else if (upperType.includes("DATE") || upperType.includes("TIME")) {
     return "text-green-500 bg-green-500/10";
@@ -41,10 +58,10 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
 
   // Safe parsing function that handles both string and number types
   const parseValue = (value: any): number => {
-    if (typeof value === 'number') return value;
-    if (typeof value === 'string') {
+    if (typeof value === "number") return value;
+    if (typeof value === "string") {
       // Remove quotes if present
-      const cleaned = value.replace(/"/g, '');
+      const cleaned = value.replace(/"/g, "");
       return parseFloat(cleaned) || 0;
     }
     return 0;
@@ -55,7 +72,8 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
   const uniqueCount = stats.approx_unique ? parseValue(stats.approx_unique) : 0;
   const totalCount = parseValue(stats.count);
 
-  const isNumeric = stats.column_type.toUpperCase().includes("INT") ||
+  const isNumeric =
+    stats.column_type.toUpperCase().includes("INT") ||
     stats.column_type.toUpperCase().includes("DOUBLE") ||
     stats.column_type.toUpperCase().includes("FLOAT") ||
     stats.column_type.toUpperCase().includes("DECIMAL");
@@ -73,13 +91,19 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
             <ChevronRight className="w-3 h-3 flex-shrink-0 text-muted-foreground" />
           )}
 
-          <div className={`flex-shrink-0 p-1 rounded ${getTypeColor(stats.column_type)}`}>
+          <div
+            className={`flex-shrink-0 p-1 rounded ${getTypeColor(
+              stats.column_type
+            )}`}
+          >
             {getTypeIcon(stats.column_type)}
           </div>
 
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
-              <span className="text-xs font-medium truncate">{stats.column_name}</span>
+              <span className="text-xs font-medium truncate">
+                {stats.column_name}
+              </span>
               <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono">
                 {stats.column_type}
               </span>
@@ -91,7 +115,9 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
                   <div className="flex items-center gap-1">
                     <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
                       <div
-                        className={`h-full ${getFillColor(fillPercentage)} transition-all`}
+                        className={`h-full ${getFillColor(
+                          fillPercentage
+                        )} transition-all`}
                         style={{ width: `${fillPercentage}%` }}
                       />
                     </div>
@@ -119,7 +145,9 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
             </div>
             <div className="h-2 bg-background rounded-full overflow-hidden">
               <div
-                className={`h-full ${getFillColor(fillPercentage)} transition-all`}
+                className={`h-full ${getFillColor(
+                  fillPercentage
+                )} transition-all`}
                 style={{ width: `${fillPercentage}%` }}
               />
             </div>
@@ -137,11 +165,18 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">Nulls:</span>
-              <span className="font-mono">{((nullPercentage / 100) * totalCount).toFixed(0)}</span>
+              <span className="font-mono">
+                {((nullPercentage / 100) * totalCount).toFixed(0)}
+              </span>
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">Cardinality:</span>
-              <span className="font-mono">{((uniqueCount / totalCount) * 100).toFixed(1)}%</span>
+              <span className="font-mono">
+                {isNaN((uniqueCount / totalCount) * 100)
+                  ? "0.0"
+                  : ((uniqueCount / totalCount) * 100).toFixed(1)}
+                %
+              </span>
             </div>
           </div>
 
@@ -152,20 +187,32 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
               <div className="space-y-1 text-[10px]">
                 <div className="flex justify-between">
                   <span className="text-muted-foreground">Min:</span>
-                  <span className="font-mono">{parseValue(stats.min!).toLocaleString()}</span>
+                  <span className="font-mono">
+                    {parseValue(stats.min!).toLocaleString()}
+                  </span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-muted-foreground">Max:</span>
-                  <span className="font-mono">{parseValue(stats.max!).toLocaleString()}</span>
+                  <span className="font-mono">
+                    {parseValue(stats.max!).toLocaleString()}
+                  </span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-muted-foreground">Avg:</span>
-                  <span className="font-mono">{parseValue(stats.avg).toLocaleString(undefined, { maximumFractionDigits: 2 })}</span>
+                  <span className="font-mono">
+                    {parseValue(stats.avg).toLocaleString(undefined, {
+                      maximumFractionDigits: 2,
+                    })}
+                  </span>
                 </div>
                 {stats.std && (
                   <div className="flex justify-between">
                     <span className="text-muted-foreground">Std Dev:</span>
-                    <span className="font-mono">{parseValue(stats.std).toLocaleString(undefined, { maximumFractionDigits: 2 })}</span>
+                    <span className="font-mono">
+                      {parseValue(stats.std).toLocaleString(undefined, {
+                        maximumFractionDigits: 2,
+                      })}
+                    </span>
                   </div>
                 )}
               </div>
@@ -174,18 +221,26 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
                 <>
                   <div className="border-t border-border/50 my-1" />
                   <div className="space-y-1 text-[10px]">
-                    <div className="text-[9px] text-muted-foreground font-medium mb-1">Quartiles</div>
+                    <div className="text-[9px] text-muted-foreground font-medium mb-1">
+                      Quartiles
+                    </div>
                     <div className="flex justify-between">
                       <span className="text-muted-foreground">Q1 (25%):</span>
-                      <span className="font-mono text-[9px]">{parseValue(stats.q25).toLocaleString()}</span>
+                      <span className="font-mono text-[9px]">
+                        {parseValue(stats.q25).toLocaleString()}
+                      </span>
                     </div>
                     <div className="flex justify-between">
                       <span className="text-muted-foreground">Q2 (50%):</span>
-                      <span className="font-mono text-[9px]">{parseValue(stats.q50).toLocaleString()}</span>
+                      <span className="font-mono text-[9px]">
+                        {parseValue(stats.q50).toLocaleString()}
+                      </span>
                     </div>
                     <div className="flex justify-between">
                       <span className="text-muted-foreground">Q3 (75%):</span>
-                      <span className="font-mono text-[9px]">{parseValue(stats.q75).toLocaleString()}</span>
+                      <span className="font-mono text-[9px]">
+                        {parseValue(stats.q75).toLocaleString()}
+                      </span>
                     </div>
                   </div>
                 </>
@@ -199,12 +254,26 @@ export const ColumnNode: React.FC<ColumnNodeProps> = ({ stats }) => {
               <div className="border-t border-border/50 my-1" />
               <div className="space-y-1 text-[10px]">
                 <div className="flex justify-between gap-2">
-                  <span className="text-muted-foreground flex-shrink-0">Min:</span>
-                  <span className="font-mono truncate text-right" title={stats.min}>{stats.min}</span>
+                  <span className="text-muted-foreground flex-shrink-0">
+                    Min:
+                  </span>
+                  <span
+                    className="font-mono truncate text-right"
+                    title={stats.min}
+                  >
+                    {stats.min}
+                  </span>
                 </div>
                 <div className="flex justify-between gap-2">
-                  <span className="text-muted-foreground flex-shrink-0">Max:</span>
-                  <span className="font-mono truncate text-right" title={stats.max}>{stats.max}</span>
+                  <span className="text-muted-foreground flex-shrink-0">
+                    Max:
+                  </span>
+                  <span
+                    className="font-mono truncate text-right"
+                    title={stats.max}
+                  >
+                    {stats.max}
+                  </span>
                 </div>
               </div>
             </>
diff --git a/src/components/table/ColumnStatsPanel.tsx b/src/components/table/ColumnStatsPanel.tsx
@@ -120,8 +120,8 @@ const MiniChart: React.FC<{ stats: ColumnStats }> = ({ stats }) => {
     : ["#7c3aed", "#8b5cf6", "#a78bfa", "#c4b5fd", "#ddd6fe"];
 
   return (
-    <ResponsiveContainer width="100%" height={150}>
-      <BarChart data={chartData} margin={{ top: 5, right: 5, bottom: 20, left: 5 }}>
+    <ResponsiveContainer width="100%" height={250}>
+      <BarChart data={chartData} margin={{ top: 15, right: 15, bottom: 20, left: 5 }}>
         <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
         <XAxis
           dataKey="name"
@@ -137,6 +137,7 @@ const MiniChart: React.FC<{ stats: ColumnStats }> = ({ stats }) => {
             border: "1px solid #cbd5e1",
             borderRadius: "6px",
             fontSize: "12px",
+            color: theme === "dark" ? "#65fc2eff" : "#0f172a",
           }}
         />
         <Bar dataKey="value" radius={[4, 4, 0, 0]}>
@@ -259,7 +260,7 @@ export const ColumnStatsPanel: React.FC<ColumnStatsPanelProps> = ({
   }
 
   return (
-    <Card className="fixed bottom-4 left-4 z-30 w-[800px] max-h-[600px] shadow-lg border">
+    <Card className="fixed bottom-4 left-4 z-30 w-7xl shadow-lg border">
       <CardHeader className="p-3 border-b">
         <div className="flex items-center justify-between">
           <div>
diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx
@@ -71,19 +71,19 @@ export function MultiSelect({
           aria-expanded={open}
           className={cn("w-full justify-between min-h-10 h-auto", className)}
         >
-          <div className="flex gap-1 overflow-x-auto flex-1 mr-2 py-1 scrollbar-thin">
+          <div className="flex gap-1 overflow-x-auto flex-1 mr-2  scrollbar-thin">
             {selectedOptions.length > 0 ? (
               selectedOptions.map((option) => (
                 <Badge
                   key={option.value}
-                  variant="secondary"
-                  className="shrink-0 gap-1.5 px-2.5 py-1"
+                  className="shrink-0 gap-1.5 font-medium"
                   style={{
                     backgroundColor: option.color
-                      ? `${option.color}20`
+                      ? `${option.color}65`
                       : undefined,
                     borderColor: option.color || undefined,
-                    borderWidth: '1px',
+                    borderWidth: '2px',
+                    boxShadow: option.color ? `0 1px 3px ${option.color}30` : undefined,
                   }}
                 >
                   {option.color && (
@@ -92,7 +92,7 @@ export function MultiSelect({
                       style={{ backgroundColor: option.color }}
                     />
                   )}
-                  <span className="whitespace-nowrap">{option.label}</span>
+                  <span className="whitespace-nowrap text-foreground">{option.label}</span>
                   <X
                     className="h-3.5 w-3.5 cursor-pointer opacity-70 hover:opacity-100 shrink-0"
                     onClick={(e) => handleRemove(option.value, e)}
diff --git a/src/components/workspace/HomeTab.tsx b/src/components/workspace/HomeTab.tsx
@@ -122,6 +122,8 @@ SELECT * FROM 'https://shell.duckdb.org/data/tpch/0_01/parquet/orders.parquet' L
 
   //@ts-ignore
   const duck_ui_version = __DUCK_UI_VERSION__ || "Error loading version";
+  //@ts-ignore
+  const duck_ui_release_date = __DUCK_UI_RELEASE_DATE__ || "N/A";
 
   const { theme } = useTheme();
 
@@ -294,7 +296,7 @@ SELECT * FROM 'https://shell.duckdb.org/data/tpch/0_01/parquet/orders.parquet' L
           </TabsContent>
         </Tabs>
         <p className="text-muted-foreground text-center text-xs">
-          Duck-UI Version: {duck_ui_version}
+          Duck-UI Version: {duck_ui_version} - Released on: {duck_ui_release_date}
         </p>
       </div>
     </div>
diff --git a/vite.config.ts b/vite.config.ts
@@ -22,6 +22,7 @@ export default defineConfig(({ mode }) => {
     },
     define: {
       __DUCK_UI_VERSION__: JSON.stringify(pkg.version),
+      __DUCK_UI_RELEASE_DATE__: JSON.stringify(pkg.release_date),
       ...processEnvValues // Spread the processed variables
     },
   };
