Enhance chart customization options by adding color selection, grid display, tooltip display, animation, and value formatting.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/52091063-0956-4712-acd3-7bb273cc6f8d.jpg

client/src/components/ui/color-picker.tsx

@@ -1,8 +1,9 @@
-import { useState, useEffect, useRef } from "react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Check, Droplet } from "lucide-react";
+import { useState, useEffect, useRef } from 'react';
+import { 
+  Popover, 
+  PopoverContent, 
+  PopoverTrigger 
+} from "@/components/ui/popover";
 
 interface ColorPickerProps {
   value: string;
@@ -10,107 +11,69 @@ interface ColorPickerProps {
   className?: string;
 }
 
-const PRESET_COLORS = [
-  "#000000", "#ffffff", "#f44336", "#e91e63", "#9c27b0", "#673ab7", 
-  "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", 
-  "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", 
-  "#795548", "#607d8b", "#9e9e9e", "#f5f5f5", "#1a237e", "#004d40",
-];
-
 export function ColorPicker({ value, onChange, className = "" }: ColorPickerProps) {
-  const [color, setColor] = useState(value || "#000000");
   const [isOpen, setIsOpen] = useState(false);
+  const [currentColor, setCurrentColor] = useState(value || "#000000");
   const inputRef = useRef<HTMLInputElement>(null);
-  
+
   useEffect(() => {
-    setColor(value);
+    setCurrentColor(value);
   }, [value]);
 
-  const handleChangeComplete = (newColor: string) => {
-    setColor(newColor);
+  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newColor = e.target.value;
+    setCurrentColor(newColor);
     onChange(newColor);
   };
-
-  const isValidColor = (color: string) => {
-    const s = new Option().style;
-    s.color = color;
-    return s.color !== '';
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newColor = e.target.value;
-    setColor(newColor);
-    
-    // Validate color format before updating
-    if (isValidColor(newColor)) {
-      onChange(newColor);
-    }
-  };
+  
+  const presetColors = [
+    "#1E40AF", // Blue
+    "#047857", // Green
+    "#B91C1C", // Red
+    "#C2410C", // Orange
+    "#7E22CE", // Purple
+    "#0369A1", // Sky Blue
+    "#4D7C0F", // Lime
+    "#A16207", // Amber
+    "#0F172A", // Slate
+    "#64748B", // Gray
+  ];
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
-        <Button 
-          variant="outline" 
-          className={`w-10 h-10 p-0 border-2 ${className}`}
-          style={{ backgroundColor: color }}
+        <button
+          type="button"
+          className={`w-9 h-9 rounded-md border border-input focus:outline-none focus:ring-2 focus:ring-ring ${className}`}
+          style={{ backgroundColor: currentColor }}
+          onClick={() => setIsOpen(true)}
           aria-label="Pick a color"
-        >
-          <span className="sr-only">Pick a color</span>
-        </Button>
+        />
       </PopoverTrigger>
-      <PopoverContent className="w-64">
-        <div className="space-y-2">
-          <div 
-            className="w-full h-8 rounded cursor-pointer border"
-            style={{ backgroundColor: color }}
-            onClick={() => inputRef.current?.click()}
-          />
-          
-          <div className="flex gap-2">
-            <Input
+      <PopoverContent className="w-64 p-3">
+        <div className="space-y-3">
+          <div>
+            <input
               ref={inputRef}
-              value={color}
-              onChange={handleInputChange}
-              className="flex-1"
+              type="color"
+              value={currentColor}
+              onChange={handleColorChange}
+              className="w-full h-8 cursor-pointer"
             />
-            <Button 
-              size="icon" 
-              variant="outline"
-              onClick={() => {
-                if (typeof window !== 'undefined' && 'EyeDropper' in window) {
-                  // @ts-ignore
-                  const eyeDropper = new window.EyeDropper();
-                  eyeDropper.open()
-                    .then((result: { sRGBHex: string }) => {
-                      handleChangeComplete(result.sRGBHex);
-                    })
-                    .catch(() => {
-                      // User canceled the eyedropper
-                    });
-                }
-              }}
-            >
-              <Droplet className="h-4 w-4" />
-            </Button>
           </div>
-          
-          <div className="grid grid-cols-8 gap-1">
-            {PRESET_COLORS.map((presetColor) => (
-              <Button
-                key={presetColor}
-                style={{ backgroundColor: presetColor }}
-                className="w-6 h-6 p-0 rounded-sm"
+          <div className="grid grid-cols-5 gap-2">
+            {presetColors.map((color) => (
+              <button
+                key={color}
+                type="button"
+                className="w-8 h-8 rounded-md border border-input focus:outline-none focus:ring-2 focus:ring-ring"
+                style={{ backgroundColor: color }}
                 onClick={() => {
-                  handleChangeComplete(presetColor);
-                  setIsOpen(false);
+                  setCurrentColor(color);
+                  onChange(color);
                 }}
-              >
-                {color.toLowerCase() === presetColor.toLowerCase() && (
-                  <Check className="h-3 w-3 text-white" />
-                )}
-                <span className="sr-only">Select color {presetColor}</span>
-              </Button>
+                aria-label={`Select color ${color}`}
+              />
             ))}
           </div>
         </div>