working

index.html

@@ -15,45 +15,29 @@
     <div class="flex flex-1">
         <!-- Sidebar -->
         <div class="w-80 bg-white shadow-lg flex flex-col">
-            <div class="p-4 border-b">
-                <h1 class="text-xl font-bold text-gray-800">Sankey Flow Wizard 🧙‍♂️</h1>
+            <div class="p-4 border-b flex items-center justify-between">
+                <h1 class="text-xl font-bold text-gray-800">Sankey Flow Wizard</h1>
+                <button id="settings-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-2 rounded-md text-sm flex items-center space-x-2">
+                    <i data-feather="settings" class="mr-1"></i>
+                </button>
             </div>
             
             <div class="flex-1 overflow-y-auto p-4 space-y-6">
-                <!-- Import/Export -->
-                <div class="bg-gray-50 p-4 rounded-lg">
-                    <h3 class="font-medium text-gray-700 mb-3 flex items-center">
-                        <i data-feather="upload" class="mr-2"></i> Import/Export
-                    </h3>
-                    <div class="grid grid-cols-2 gap-2">
-                        <button id="import-csv" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-md text-sm transition">
-                            <i data-feather="upload" class="mr-1"></i> Import CSV
-                        </button>
-                        <button id="export-csv" class="bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded-md text-sm transition">
-                            <i data-feather="download" class="mr-1"></i> Export CSV
-                        </button>
-                        <button id="center-diagram" class="bg-purple-500 hover:bg-purple-600 text-white px-3 py-2 rounded-md text-sm transition col-span-2">
-                            <i data-feather="crosshair" class="mr-1"></i> Center Diagram
-                        </button>
-                    </div>
-                    <input type="file" id="csv-file" accept=".csv" class="hidden">
-                </div>
-
-                <!-- Appearance -->
-                <div class="bg-gray-50 p-4 rounded-lg">
+                <!-- Settings panel (hidden by default) -->
+                <div id="settings-panel" class="bg-gray-50 p-4 rounded-lg hidden">
                     <h3 class="font-medium text-gray-700 mb-3 flex items-center">
-                        <i data-feather="eye" class="mr-2"></i> Appearance
+                        <i data-feather="sliders" class="mr-2"></i> Configuración
                     </h3>
                     <div class="space-y-4">
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Text Color</label>
-                            <input type="color" id="text-color" value="#ffffff" class="w-full h-10">
+                            <input type="color" id="text-color" value="#000000" class="w-full h-10">
                         </div>
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Text Position</label>
                             <select id="text-position" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option value="top" selected>Top</option>
                                 <option value="middle">Middle</option>
-                                <option value="top">Top</option>
                                 <option value="bottom">Bottom</option>
                             </select>
                         </div>
@@ -71,6 +55,26 @@
                         </div>
                     </div>
                 </div>
+                <!-- Import/Export -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h3 class="font-medium text-gray-700 mb-3 flex items-center">
+                        <i data-feather="upload" class="mr-2"></i> Import/Export
+                    </h3>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button id="import-csv" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-md text-sm transition">
+                            <i data-feather="upload" class="mr-1"></i> Import CSV
+                        </button>
+                        <button id="export-csv" class="bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded-md text-sm transition">
+                            <i data-feather="download" class="mr-1"></i> Export CSV
+                        </button>
+                        <button id="center-diagram" class="bg-purple-500 hover:bg-purple-600 text-white px-3 py-2 rounded-md text-sm transition col-span-2">
+                            <i data-feather="crosshair" class="mr-1"></i> Center Diagram
+                        </button>
+                    </div>
+                    <input type="file" id="csv-file" accept=".csv" class="hidden">
+                </div>
+
+                <!-- Appearance moved into the Settings panel -->
 
                 <!-- Nodes Management -->
                 <div class="bg-gray-50 p-4 rounded-lg">
@@ -110,7 +114,7 @@
         <div class="flex-1 flex flex-col">
             <!-- Diagram Area -->
             <div class="flex-1 p-6">
-                <div id="diagram-container" class="bg-gray-200 rounded-xl shadow-md h-full relative">
+                <div id="diagram-container" class="bg-gray-200 rounded-xl shadow-md h-full overflow-hidden">
                     <svg id="sankey-diagram" class="w-full h-full"></svg>
                 </div>
             </div>

script.js

@@ -48,13 +48,16 @@ function initDiagram() {
     
     // Set up the sankey diagram properties
     const width = document.getElementById('diagram-container').clientWidth;
-    const height = parseInt(document.getElementById('diagram-height').value);
+    const baseHeight = parseInt(document.getElementById('diagram-height').value);
+    const textPosition = document.getElementById('text-position').value;
+    const textPadding = textPosition !== 'middle' ? 50 : 0; // Extra space for text above/below
+    const height = baseHeight + textPadding;
     const linkAlpha = parseFloat(document.getElementById('link-alpha').value);
     
     const sankey = d3.sankey()
         .nodeWidth(parseInt(document.getElementById('node-width').value))
         .nodePadding(20)
-        .extent([[1, 1], [width - 1, height - 6]]);
+        .extent([[textPadding/2, textPadding/2], [width - textPadding/2, height - textPadding/2]]);
     
     // Generate the sankey diagram
     const graph = sankey({
@@ -136,12 +139,11 @@ function initDiagram() {
     );
 
     // Add text with customizable position
-    const textPosition = document.getElementById('text-position').value;
     let textY, textDy;
     
     switch(textPosition) {
         case 'top':
-            textY = -5;
+            textY = -3;
             textDy = "0em";
             break;
         case 'bottom':
@@ -398,6 +400,15 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         e.target.value = ''; // Reset input
     });
+
+    // Settings panel toggle
+    const settingsBtn = document.getElementById('settings-btn');
+    const settingsPanel = document.getElementById('settings-panel');
+    if (settingsBtn && settingsPanel) {
+        settingsBtn.addEventListener('click', () => {
+            settingsPanel.classList.toggle('hidden');
+        });
+    }
     
     // Center diagram
     document.getElementById('center-diagram').addEventListener('click', () => {