Spaces:

alterzick
/

graph-creator

Running

App Files Files Community

alterzick commited on Dec 2, 2025

Commit

6df924e

verified ·

1 Parent(s): db4ac3e

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +769 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Graph Creator
-emoji: 👁
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: graph-creator
+emoji: ⚛️
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - QwenSite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,769 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Advanced Graph Creator</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/luxon@3.0.2/build/global/luxon.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0/dist/chartjs-adapter-luxon.min.js"></script>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+  <style>
+    .chart-container {
+      position: relative;
+      height: 60vh;
+      width: 100%;
+    }
+    .hidden {
+      display: none;
+    }
+    .data-point {
+      display: flex;
+      margin-bottom: 8px;
+      align-items: center;
+    }
+    .data-point input {
+      margin-right: 8px;
+      padding: 6px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+    .remove-point {
+      color: #ef4444;
+      cursor: pointer;
+      margin-left: 8px;
+      font-size: 18px;
+    }
+    .custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: #6b7280 #f3f4f6;
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 6px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: #f3f4f6;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background-color: #6b7280;
+      border-radius: 20px;
+    }
+    .slide-in {
+      animation: slideIn 0.3s ease-out forwards;
+    }
+    .slide-out {
+      animation: slideOut 0.3s ease-out forwards;
+    }
+    @keyframes slideIn {
+      from {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+    @keyframes slideOut {
+      from {
+        transform: translateX(0);
+        opacity: 1;
+      }
+      to {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+    }
+    .tooltip {
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: white;
+      padding: 5px 10px;
+      border-radius: 4px;
+      font-size: 12px;
+      pointer-events: none;
+      z-index: 1000;
+      white-space: nowrap;
+    }
+  </style>
+</head>
+<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-sans">
+  <div class="container mx-auto px-4 py-8">
+    <!-- Header -->
+    <header class="text-center mb-8">
+      <h1 class="text-4xl font-bold text-indigo-800 mb-2">📊 Graph Creator</h1>
+      <p class="text-lg text-gray-600">Create beautiful charts from your data with customizable options</p>
+    </header>
+    <div class="flex flex-col lg:flex-row gap-6">
+      <!-- Left Panel: Controls -->
+      <div class="lg:w-1/3">
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 transition-all duration-300 hover:shadow-xl">
+          <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+            <i class="fas fa-cogs mr-2 text-indigo-600"></i> Configuration
+          </h2>
+          <!-- Data Input Method -->
+          <div class="mb-6">
+            <label class="block text-sm font-medium text-gray-700 mb-2">Data Input Method</label>
+            <div class="grid grid-cols-2 gap-2">
+              <button id="manual-input-btn" class="py-2 px-4 bg-indigo-100 text-indigo-800 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center hover:bg-indigo-200 active:bg-indigo-300">
+                <i class="fas fa-keyboard mr-2"></i> Manual
+              </button>
+              <button id="file-input-btn" class="py-2 px-4 bg-gray-100 text-gray-700 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center hover:bg-gray-200 active:bg-gray-300">
+                <i class="fas fa-file-upload mr-2"></i> Upload
+              </button>
+            </div>
+          </div>
+          <!-- Manual Input Section -->
+          <div id="manual-input" class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Chart Title</label>
+              <input type="text" id="chart-title" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter chart title">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">X-axis Label</label>
+              <input type="text" id="x-label" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter X-axis label">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Y-axis Label</label>
+              <input type="text" id="y-label" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter Y-axis label">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2">Data Points</label>
+              <div id="data-points-container" class="space-y-2 max-h-40 overflow-y-auto custom-scrollbar pr-2">
+                <div class="data-point">
+                  <input type="text" class="x-value w-1/3" placeholder="X">
+                  <input type="number" class="y-value w-1/3" placeholder="Y">
+                  <i class="fas fa-trash remove-point"></i>
+                </div>
+              </div>
+              <button id="add-point" class="mt-2 flex items-center text-sm text-indigo-600 hover:text-indigo-800">
+                <i class="fas fa-plus mr-1"></i> Add Data Point
+              </button>
+            </div>
+          </div>
+          <!-- File Upload Section (Hidden by default) -->
+          <div id="file-input" class="hidden space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Upload CSV File</label>
+              <input type="file" id="csv-file" accept=".csv" class="w-full px-3 py-2 border border-gray-300 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
+              <p class="text-xs text-gray-500 mt-1">Upload a CSV file with two columns (X,Y)</p>
+            </div>
+            <div id="csv-preview" class="hidden">
+              <h3 class="text-sm font-medium text-gray-700 mb-2">Preview</h3>
+              <div id="csv-content" class="bg-gray-50 p-3 rounded-lg text-xs max-h-32 overflow-y-auto custom-scrollbar"></div>
+            </div>
+          </div>
+        </div>
+        <!-- Chart Settings -->
+        <div class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl">
+          <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+            <i class="fas fa-sliders-h mr-2 text-indigo-600"></i> Chart Settings
+          </h2>
+          <div class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Chart Type</label>
+              <select id="chart-type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                <option value="bar">Bar Chart</option>
+                <option value="line">Line Chart</option>
+                <option value="pie">Pie Chart</option>
+                <option value="doughnut">Doughnut Chart</option>
+                <option value="radar">Radar Chart</option>
+                <option value="polarArea">Polar Area</option>
+                <option value="bubble">Bubble Chart</option>
+              </select>
+            </div>
+            <div id="line-options" class="space-y-3">
+              <div class="flex items-center">
+                <input type="checkbox" id="show-lines" class="mr-2 h-4 w-4 text-indigo-600 rounded focus:ring-indigo-500">
+                <label for="show-lines" class="text-sm font-medium text-gray-700">Show Lines</label>
+              </div>
+              <div class="flex items-center">
+                <input type="checkbox" id="show-points" class="mr-2 h-4 w-4 text-indigo-600 rounded focus:ring-indigo-500">
+                <label for="show-points" class="text-sm font-medium text-gray-700">Show Points</label>
+              </div>
+            </div>
+            <div id="color-scheme">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Color Scheme</label>
+              <div class="grid grid-cols-3 gap-2">
+                <button class="color-option p-2 rounded-lg flex items-center justify-center" data-colors='["#3B82F6", "#1D4ED8", "#1E40AF", "#1E3A8A", "#172554"]'>
+                  <div class="w-6 h-6 bg-blue-500 rounded-full"></div>
+                </button>
+                <button class="color-option p-2 rounded-lg flex items-center justify-center" data-colors='["#EC4899", "#DB2777", "#BE185D", "#9D174D", "#7E113B"]'>
+                  <div class="w-6 h-6 bg-pink-500 rounded-full"></div>
+                </button>
+                <button class="color-option p-2 rounded-lg flex items-center justify-center" data-colors='["#10B981", "#059669", "#047857", "#065F46", "#064E3B"]'>
+                  <div class="w-6 h-6 bg-green-500 rounded-full"></div>
+                </button>
+                <button class="color-option p-2 rounded-lg flex items-center justify-center" data-colors='["#F59E0B", "#D97706", "#B45309", "#92400E", "#78350F"]'>
+                  <div class="w-6 h-6 bg-amber-500 rounded-full"></div>
+                </button>
+                <button class="color-option p-2 rounded-lg flex items-center justify-center" data-colors='["#8B5CF6", "#7C3AED", "#6D28D9", "#5B21B6", "#4C1D95"]'>
+                  <div class="w-6 h-6 bg-purple-500 rounded-full"></div>
+                </button>
+                <button class="color-option p-2 rounded-lg flex items-center justify-center" data-colors='["#06B6D4", "#0891B2", "#0E7490", "#155E75", "#164E63"]'>
+                  <div class="w-6 h-6 bg-cyan-500 rounded-full"></div>
+                </button>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Animation Duration (ms)</label>
+              <input type="range" id="animation-duration" min="0" max="3000" value="1000" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider">
+              <div class="flex justify-between text-xs text-gray-500 mt-1">
+                <span>0ms</span>
+                <span id="duration-value">1000ms</span>
+                <span>3000ms</span>
+              </div>
+            </div>
+            <button id="generate-btn" class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg">
+              <i class="fas fa-chart-line mr-2"></i> Generate Chart
+            </button>
+            <button id="download-btn" class="w-full py-2 px-4 bg-gray-600 hover:bg-gray-700 text-white transition ease-in duration-200 text-center text-sm font-semibold shadow-md focus:outline-none rounded-lg flex items-center justify-center">
+              <i class="fas fa-download mr-2"></i> Download Chart
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- Right Panel: Chart -->
+      <div class="lg:w-2/3">
+        <div class="bg-white rounded-xl shadow-lg p-6 h-full transition-all duration-300 hover:shadow-xl">
+          <div class="flex justify-between items-center mb-4">
+            <h2 class="text-xl font-semibold text-gray-800 flex items-center">
+              <i class="fas fa-chart-bar mr-2 text-indigo-600"></i> <span id="chart-title-display">Your Chart</span>
+            </h2>
+            <div class="flex space-x-2">
+              <button id="fullscreen-btn" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+                <i class="fas fa-expand"></i>
+              </button>
+            </div>
+          </div>
+          <div class="chart-container relative">
+            <canvas id="graph" class="w-full h-full"></canvas>
+            <div id="empty-state" class="absolute inset-0 flex flex-col items-center justify-center text-gray-400">
+              <i class="fas fa-chart-line text-6xl mb-4 opacity-50"></i>
+              <p class="text-lg font-medium">No data to display</p>
+              <p class="text-sm">Configure your data and settings, then click "Generate Chart"</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Toast Notification -->
+    <div id="toast" class="fixed bottom-5 right-5 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg flex items-center hidden transition-all duration-300 z-50">
+      <i class="fas fa-check-circle mr-2"></i>
+      <span id="toast-message">Chart downloaded successfully!</span>
+    </div>
+    <!-- Fullscreen Modal -->
+    <div id="fullscreen-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center p-4">
+      <div class="relative w-full max-w-5xl">
+        <button id="close-fullscreen" class="absolute -top-12 right-0 text-white text-2xl hover:text-gray-300 transition-colors duration-200">
+          <i class="fas fa-times"></i>
+        </button>
+        <h3 id="fullscreen-title" class="text-white text-xl mb-4 text-center"></h3>
+        <div class="bg-white rounded-lg p-2">
+          <canvas id="fullscreen-chart" class="w-full h-auto"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      // Elements
+      const manualInputBtn = document.getElementById('manual-input-btn');
+      const fileInputBtn = document.getElementById('file-input-btn');
+      const manualInput = document.getElementById('manual-input');
+      const fileInput = document.getElementById('file-input');
+      const csvFile = document.getElementById('csv-file');
+      const csvPreview = document.getElementById('csv-preview');
+      const csvContent = document.getElementById('csv-content');
+      const addPointBtn = document.getElementById('add-point');
+      const dataPointsContainer = document.getElementById('data-points-container');
+      const chartType = document.getElementById('chart-type');
+      const lineOptions = document.getElementById('line-options');
+      const showLines = document.getElementById('show-lines');
+      const showPoints = document.getElementById('show-points');
+      const colorScheme = document.getElementById('color-scheme');
+      const colorOptions = document.querySelectorAll('.color-option');
+      const animationDuration = document.getElementById('animation-duration');
+      const durationValue = document.getElementById('duration-value');
+      const generateBtn = document.getElementById('generate-btn');
+      const downloadBtn = document.getElementById('download-btn');
+      const chartTitle = document.getElementById('chart-title');
+      const xLabel = document.getElementById('x-label');
+      const yLabel = document.getElementById('y-label');
+      const chartTitleDisplay = document.getElementById('chart-title-display');
+      const emptyState = document.getElementById('empty-state');
+      const toast = document.getElementById('toast');
+      const toastMessage = document.getElementById('toast-message');
+      const fullscreenBtn = document.getElementById('fullscreen-btn');
+      const fullscreenModal = document.getElementById('fullscreen-modal');
+      const closeFullscreen = document.getElementById('close-fullscreen');
+      const fullscreenTitle = document.getElementById('fullscreen-title');
+      const graph = document.getElementById('graph');
+      const fullscreenChart = document.getElementById('fullscreen-chart');
+      // Chart instance
+      let chart = null;
+      let fullscreenChartInstance = null;
+      let currentColors = ['#3B82F6', '#1D4ED8', '#1E40AF', '#1E3A8A', '#172554'];
+      // Initialize chart with empty data
+      function initChart() {
+        return new Chart(graph, {
+          type: 'bar',
+          data: {
+            labels: [],
+            datasets: [{
+              label: 'Data',
+              data: [],
+              backgroundColor: currentColors[0],
+              borderColor: currentColors[0],
+              borderWidth: 1
+            }]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: false
+              },
+              tooltip: {
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                titleColor: '#fff',
+                bodyColor: '#fff',
+                borderColor: '#333',
+                borderWidth: 1,
+                cornerRadius: 6,
+                displayColors: false
+              }
+            },
+            scales: {
+              y: {
+                beginAtZero: true,
+                grid: {
+                  color: 'rgba(0, 0, 0, 0.05)'
+                },
+                ticks: {
+                  color: '#6b7280'
+                }
+              },
+              x: {
+                grid: {
+                  color: 'rgba(0, 0, 0, 0.05)'
+                },
+                ticks: {
+                  color: '#6b7280'
+                }
+              }
+            }
+          }
+        });
+      }
+      // Initialize chart
+      chart = initChart();
+      // Event Listeners
+      manualInputBtn.addEventListener('click', function() {
+        manualInputBtn.classList.add('bg-indigo-100', 'text-indigo-800');
+        manualInputBtn.classList.remove('bg-gray-100', 'text-gray-700');
+        fileInputBtn.classList.remove('bg-indigo-100', 'text-indigo-800');
+        fileInputBtn.classList.add('bg-gray-100', 'text-gray-700');
+        manualInput.classList.remove('hidden');
+        fileInput.classList.add('hidden');
+      });
+      fileInputBtn.addEventListener('click', function() {
+        fileInputBtn.classList.add('bg-indigo-100', 'text-indigo-800');
+        fileInputBtn.classList.remove('bg-gray-100', 'text-gray-700');
+        manualInputBtn.classList.remove('bg-indigo-100', 'text-indigo-800');
+        manualInputBtn.classList.add('bg-gray-100', 'text-gray-700');
+        fileInput.classList.remove('hidden');
+        manualInput.classList.add('hidden');
+      });
+      // Add new data point
+      addPointBtn.addEventListener('click', function() {
+        const point = document.createElement('div');
+        point.className = 'data-point';
+        point.innerHTML = `
+          <input type="text" class="x-value w-1/3" placeholder="X">
+          <input type="number" class="y-value w-1/3" placeholder="Y">
+          <i class="fas fa-trash remove-point"></i>
+        `;
+        dataPointsContainer.appendChild(point);
+        // Add event listener to remove button
+        point.querySelector('.remove-point').addEventListener('click', function() {
+          dataPointsContainer.removeChild(point);
+        });
+      });
+      // Remove data point
+      dataPointsContainer.addEventListener('click', function(e) {
+        if (e.target.classList.contains('remove-point')) {
+          const point = e.target.closest('.data-point');
+          if (dataPointsContainer.children.length > 1) {
+            dataPointsContainer.removeChild(point);
+          }
+        }
+      });
+      // Handle file upload
+      csvFile.addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = function(e) {
+          const content = e.target.result;
+          csvContent.textContent = content.split('\n').slice(0, 10).join('\n') + (content.split('\n').length > 10 ? '\n...' : '');
+          csvPreview.classList.remove('hidden');
+        };
+        reader.readAsText(file);
+      });
+      // Update animation duration display
+      animationDuration.addEventListener('input', function() {
+        durationValue.textContent = `${this.value}ms`;
+      });
+      // Apply color scheme
+      colorOptions.forEach(option => {
+        option.addEventListener('click', function() {
+          colorOptions.forEach(opt => {
+            opt.classList.remove('ring-2', 'ring-indigo-500');
+          });
+          this.classList.add('ring-2', 'ring-indigo-500');
+          currentColors = JSON.parse(this.dataset.colors);
+        });
+      });
+      // Set default color scheme
+      colorOptions[0].classList.add('ring-2', 'ring-indigo-500');
+      // Chart type change
+      chartType.addEventListener('change', function() {
+        if (this.value === 'line') {
+          lineOptions.classList.remove('hidden');
+        } else {
+          lineOptions.classList.add('hidden');
+        }
+      });
+      // Generate chart
+      generateBtn.addEventListener('click', function() {
+        // Get data based on input method
+        let labels = [];
+        let data = [];
+        if (manualInput.classList.contains('hidden')) {
+          // File input method
+          const file = csvFile.files[0];
+          if (!file) {
+            showToast('Please select a CSV file');
+            return;
+          }
+          const reader = new FileReader();
+          reader.onload = function(e) {
+            const content = e.target.result;
+            const rows = content.split('\n');
+            for (let i = 0; i < rows.length; i++) {
+              if (rows[i].trim() === '') continue;
+              const cols = rows[i].split(',');
+              if (cols.length >= 2) {
+                labels.push(cols[0].trim());
+                data.push(parseFloat(cols[1].trim()));
+              }
+            }
+            createChart(labels, data);
+          };
+          reader.readAsText(file);
+        } else {
+          // Manual input method
+          const points = dataPointsContainer.querySelectorAll('.data-point');
+          let isValid = true;
+          points.forEach(point => {
+            const xValue = point.querySelector('.x-value').value;
+            const yValue = point.querySelector('.y-value').value;
+            if (xValue && yValue !== '') {
+              labels.push(xValue);
+              data.push(parseFloat(yValue));
+            } else if (xValue || yValue !== '') {
+              isValid = false;
+            }
+          });
+          if (!isValid) {
+            showToast('Please fill in all data points');
+            return;
+          }
+          if (labels.length === 0) {
+            showToast('Please add at least one data point');
+            return;
+          }
+          createChart(labels, data);
+        }
+      });
+      // Create chart with data
+      function createChart(labels, data) {
+        // Update chart title
+        const title = chartTitle.value || 'Your Chart';
+        chartTitleDisplay.textContent = title;
+        // Destroy existing chart
+        if (chart) {
+          chart.destroy();
+        }
+        // Chart configuration
+        const chartConfig = {
+          type: chartType.value,
+          data: {
+            labels: labels,
+            datasets: [{
+              label: 'Data',
+              data: data,
+              backgroundColor: currentColors[0],
+              borderColor: currentColors[0],
+              borderWidth: 1
+            }]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: {
+              duration: parseInt(animationDuration.value)
+            },
+            plugins: {
+              title: {
+                display: true,
+                text: title,
+                font: {
+                  size: 16
+                }
+              },
+              legend: {
+                display: false
+              },
+              tooltip: {
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                titleColor: '#fff',
+                bodyColor: '#fff',
+                borderColor: '#333',
+                borderWidth: 1,
+                cornerRadius: 6,
+                displayColors: false
+              }
+            },
+            scales: {
+              y: {
+                beginAtZero: true,
+                grid: {
+                  color: 'rgba(0, 0, 0, 0.05)'
+                },
+                ticks: {
+                  color: '#6b7280'
+                },
+                title: {
+                  display: true,
+                  text: yLabel.value || 'Value',
+                  color: '#6b7280'
+                }
+              },
+              x: {
+                grid: {
+                  color: 'rgba(0, 0, 0, 0.05)'
+                },
+                ticks: {
+                  color: '#6b7280'
+                },
+                title: {
+                  display: true,
+                  text: xLabel.value || 'Category',
+                  color: '#6b7280'
+                }
+              }
+            }
+          }
+        };
+        // Special configurations for different chart types
+        if (chartType.value === 'bar') {
+          chartConfig.data.datasets[0].backgroundColor = currentColors.map(color =>
+            typeof color === 'string' ? color : color.backgroundColor
+          ).slice(0, data.length);
+        } else if (chartType.value === 'pie' || chartType.value === 'doughnut') {
+          chartConfig.data.datasets[0].backgroundColor = currentColors.slice(0, data.length);
+          chartConfig.data.datasets[0].borderColor = currentColors.slice(0, data.length).map(c => '#ffffff');
+          chartConfig.options.plugins.legend = {
+            display: true,
+            position: 'bottom'
+          };
+          chartConfig.options.scales = {};
+        } else if (chartType.value === 'radar') {
+          chartConfig.data.datasets[0].backgroundColor = 'rgba(59, 130, 246, 0.2)';
+          chartConfig.data.datasets[0].borderColor = currentColors[0];
+        } else if (chartType.value === 'polarArea') {
+          chartConfig.data.datasets[0].backgroundColor = currentColors.slice(0, data.length);
+        } else if (chartType.value === 'line') {
+          chartConfig.data.datasets[0].backgroundColor = 'rgba(59, 130, 246, 0.1)';
+          chartConfig.data.datasets[0].borderColor = currentColors[0];
+          chartConfig.data.datasets[0].borderWidth = 3;
+          chartConfig.data.datasets[0].pointBackgroundColor = currentColors[0];
+          chartConfig.data.datasets[0].pointBorderColor = '#fff';
+          chartConfig.data.datasets[0].pointBorderWidth = 2;
+          chartConfig.data.datasets[0].pointRadius = showPoints.checked ? 4 : 0;
+          chartConfig.options.scales.x.title.display = true;
+          if (!showLines.checked) {
+            chartConfig.data.datasets[0].borderWidth = 0;
+          }
+          if (!showPoints.checked) {
+            chartConfig.data.datasets[0].pointRadius = 0;
+          }
+        } else if (chartType.value === 'bubble') {
+          // Convert data to bubble format
+          const bubbleData = [];
+          for (let i = 0; i < data.length; i++) {
+            bubbleData.push({
+              x: i,
+              y: data[i],
+              r: Math.abs(data[i]) * 2 + 5
+            });
+          }
+          chartConfig.data.datasets[0].data = bubbleData;
+          chartConfig.data.datasets[0].backgroundColor = currentColors[0];
+          chartConfig.data.labels = [];
+          chartConfig.options.scales.x.min = -1;
+          chartConfig.options.scales.x.max = data.length;
+        }
+        // Create new chart
+        chart = new Chart(graph, chartConfig);
+        // Hide empty state
+        emptyState.classList.add('hidden');
+        // Show success message
+        showToast('Chart generated successfully!');
+      }
+      // Download chart
+      downloadBtn.addEventListener('click', function() {
+        if (!chart) {
+          showToast('No chart to download');
+          return;
+        }
+        const now = new Date();
+        const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}-${String(now.getMinutes()).padStart(2, '0')}`;
+        const filename = `chart_${timestamp}.png`;
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = chart.toBase64Image();
+        link.click();
+        showToast(`Chart downloaded as ${filename}`);
+      });
+      // Fullscreen functionality
+      fullscreenBtn.addEventListener('click', function() {
+        fullscreenModal.classList.remove('hidden');
+        fullscreenModal.classList.add('slide-in');
+        // Create fullscreen chart
+        if (fullscreenChartInstance) {
+          fullscreenChartInstance.destroy();
+        }
+        fullscreenTitle.textContent = chartTitleDisplay.textContent;
+        fullscreenChartInstance = new Chart(fullscreenChart, JSON.parse(JSON.stringify(chart.config)));
+      });
+      closeFullscreen.addEventListener('click', function() {
+        fullscreenModal.classList.remove('slide-in');
+        fullscreenModal.classList.add('slide-out');
+        setTimeout(() => {
+          fullscreenModal.classList.add('hidden');
+          fullscreenModal.classList.remove('slide-out');
+          if (fullscreenChartInstance) {
+            fullscreenChartInstance.destroy();
+            fullscreenChartInstance = null;
+          }
+        }, 300);
+      });
+      // Toast notification
+      function showToast(message) {
+        toastMessage.textContent = message;
+        toast.classList.remove('hidden');
+        toast.classList.add('slide-in');
+        setTimeout(() => {
+          toast.classList.remove('slide-in');
+          toast.classList.add('slide-out');
+          setTimeout(() => {
+            toast.classList.add('hidden');
+            toast.classList.remove('slide-out');
+          }, 300);
+        }, 3000);
+      }
+      // Initialize with empty data point if none exists
+      if (dataPointsContainer.children.length === 0) {
+        addPointBtn.click();
+      }
+    });
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/graph-creator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ tolong buatkan grafik creator yang memiliki beberapa fitur pengaturan dan bentuk grafik yang bisa di pilih. baik dengan cara upload data atau dengan inputing data