Spaces:

Kaliman-1981
/

curvemaster

Running

App Files Files Community

Kaliman-1981 commited on Aug 27, 2025

Commit

6f4eb51

verified ·

1 Parent(s): 91f5d67

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +350 -19
prompts.txt +14 -0

README.md CHANGED Viewed

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

 ---
+title: curvemaster
+emoji: ⚛️
+colorFrom: pink
+colorTo: green
 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,350 @@
-<!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" class="bg-slate-900 text-white">
+<head>
+  <meta charset="UTF-8" />
+  <title>Curve Master – S Curve Analysis</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
+  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+</head>
+<body class="p-6 font-sans bg-slate-900 text-white">
+  <div class="max-w-7xl mx-auto">
+    <h1 class="text-4xl font-extrabold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-amber-400">
+      <i class="fas fa-chart-line mr-2"></i>Curve Master – S Curve Analysis
+    </h1>
+    <!-- Status Messages -->
+    <div id="statusMessage" class="mb-4 text-center text-sm p-3 rounded shadow-md bg-slate-800"></div>
+    <!-- File Upload -->
+    <div class="mb-6 bg-slate-800 p-4 rounded shadow">
+      <label class="block font-medium mb-2">Upload CSV File(s):</label>
+      <input type="file" id="fileInput" multiple accept=".csv" class="text-white file:bg-amber-500 file:text-slate-900 file:border-0 file:py-2 file:px-4 file:rounded file:mr-2" />
+    </div>
+    <!-- Productivity Factor -->
+    <div class="mb-6 bg-slate-800 p-4 rounded shadow">
+      <label for="pfInput" class="block font-medium mb-2">Productivity Factor (PF):</label>
+      <input type="number" id="pfInput" value="1" step="0.01" min="0.01" class="bg-slate-700 text-white p-2 rounded w-full focus:ring-2 focus:ring-teal-400 focus:outline-none" />
+    </div>
+    <!-- Chart -->
+    <canvas id="curveChart" class="bg-slate-800 rounded shadow-lg mb-6 h-96 border border-slate-700"></canvas>
+    <!-- Dataset Toggle -->
+    <div class="mb-6 bg-slate-800 p-4 rounded shadow">
+      <h3 class="font-semibold mb-2">Toggle Data Series:</h3>
+      <div id="datasetToggles" class="space-y-2 text-sm"></div>
+    </div>
+    <!-- Export & Reset Buttons -->
+    <div class="flex gap-4 mb-8">
+      <button id="exportCsvBtn" class="bg-teal-600 hover:bg-teal-700 px-4 py-2 rounded flex items-center transition-all">
+        <i class="fas fa-file-csv mr-1"></i> Export CSV
+      </button>
+      <button id="exportPngBtn" class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded flex items-center transition-all">
+        <i class="fas fa-image mr-1"></i> Export PNG
+      </button>
+      <button id="resetBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded flex items-center transition-all">
+        <i class="fas fa-undo mr-1"></i> Reset
+      </button>
+    </div>
+    <!-- Data Table -->
+    <div id="dataTable" class="mt-8 overflow-auto max-h-64 bg-slate-800 p-4 rounded shadow border border-slate-700"></div>
+  </div>
+  <script>
+    const ctx = document.getElementById('curveChart').getContext('2d');
+    let curveChart = null;
+    let datasets = [];
+    let allDatasetLabels = [];
+    const requiredHeaders = {
+      units: [
+        "Budgeted Units", "Actual Units", "Cum Actual Units",
+        "Remaining Early Units", "Remaining Late Units",
+        "Cum Remaining Early Units", "Cum Remaining Late Units",
+        "Cum Baseline"
+      ],
+      cost: [
+        "Budgeted Cost", "Actual Cost", "Cum Actual Cost",
+        "Remaining Early Cost", "Remaining Late Cost",
+        "Cum Remaining Early Cost", "Cum Remaining Late Cost",
+        "Cum Baseline"
+      ]
+    };
+    const fileInput = document.getElementById('fileInput');
+    const pfInput = document.getElementById('pfInput');
+    const exportCsvBtn = document.getElementById('exportCsvBtn');
+    const exportPngBtn = document.getElementById('exportPngBtn');
+    const resetBtn = document.getElementById('resetBtn');
+    const datasetToggles = document.getElementById('datasetToggles');
+    const statusMessage = document.getElementById('statusMessage');
+    fileInput.addEventListener('change', handleFileUpload);
+    pfInput.addEventListener('input', updateChart);
+    exportCsvBtn.addEventListener('click', exportCSV);
+    exportPngBtn.addEventListener('click', exportPNG);
+    resetBtn.addEventListener('click', resetAll);
+    function resetAll() {
+      datasets = [];
+      allDatasetLabels = [];
+      if (curveChart) {
+        curveChart.destroy();
+      }
+      document.getElementById('dataTable').innerHTML = '';
+      document.getElementById('datasetToggles').innerHTML = '';
+      fileInput.value = '';
+      pfInput.value = 1;
+      statusMessage.textContent = "All data has been reset.";
+      statusMessage.className = 'mb-4 text-center text-sm p-3 rounded shadow-md bg-slate-800 text-blue-300';
+    }
+    function handleFileUpload(event) {
+      const files = Array.from(event.target.files);
+      if (files.length === 0) return;
+      statusMessage.textContent = `Processing ${files.length} file(s)...`;
+      statusMessage.className = 'mb-4 text-center text-sm p-3 rounded shadow-md bg-slate-800 text-yellow-300';
+      files.forEach(file => {
+        Papa.parse(file, {
+          header: true,
+          skipEmptyLines: true,
+          complete: (results) => {
+            try {
+              processDataset(results.data, results.meta.fields);
+              statusMessage.innerHTML = `<i class="fas fa-check-circle text-green-400 mr-1"></i> Successfully processed ${file.name}`;
+              statusMessage.className = 'mb-4 text-center text-sm p-3 rounded shadow-md bg-slate-800 text-green-400';
+            } catch (e) {
+              statusMessage.innerHTML = `<i class="fas fa-exclamation-circle text-red-400 mr-1"></i> Failed to process ${file.name}: ${e.message}`;
+              statusMessage.className = 'mb-4 text-center text-sm p-3 rounded shadow-md bg-slate-800 text-red-400';
+            }
+          },
+          error: (err) => {
+            statusMessage.innerHTML = `<i class="fas fa-exclamation-triangle text-red-400 mr-1"></i> CSV Parse Error: ${err.message}`;
+            statusMessage.className = 'mb-4 text-center text-sm p-3 rounded shadow-md bg-slate-800 text-red-400';
+          }
+        });
+      });
+    }
+    function processDataset(data, headers) {
+      const detectedType = detectType(headers);
+      if (!detectedType) throw new Error("Missing required headers. Expected: " + requiredHeaders.units.join(","));
+      const dates = data.map(row => row[headers[0]]); // First column is date
+      const series = requiredHeaders[detectedType].map(key => ({
+        label: key,
+        data: data.map(row => parseFloat(row[key]) || 0),
+        borderColor: getRandomColor(1),
+        backgroundColor: getRandomColor(0.7),
+        fill: key.includes("Cum"),
+        tension: key.includes("Cum") ? 0.3 : 0,
+        type: key.includes("Cum") ? 'line' : 'bar'
+      }));
+      datasets.push({ dates, series, type: detectedType });
+      allDatasetLabels = [...new Set([...allDatasetLabels, ...series.map(s => s.label)])];
+      updateChart();
+      renderDatasetToggles();
+      renderDataTable(data);
+    }
+    function detectType(headers) {
+      if (requiredHeaders.units.every(h => headers.includes(h))) return "units";
+      if (requiredHeaders.cost.every(h => headers.includes(h))) return "cost";
+      return null;
+    }
+    function updateChart() {
+      if (curveChart) curveChart.destroy();
+      const pf = parseFloat(pfInput.value) || 1;
+      const allLabels = new Set();
+      const allSeries = [];
+      datasets.forEach(dataset => {
+        const { dates, series } = dataset;
+        series.forEach(s => {
+          const adjustedData = [...s.data];
+          if (s.label.includes("Remaining")) adjustedData.forEach((v, i) => adjustedData[i] = v * pf);
+          const isCumulative = s.label.includes("Cum");
+          let yAxisID = isCumulative ? 'rightY' : 'leftY';
+          allSeries.push({
+            label: s.label + (pf !== 1 && s.label.includes("Remaining") ? ` (PF=${pf})` : ""),
+            data: adjustedData,
+            borderColor: s.borderColor,
+            backgroundColor: s.backgroundColor,
+            borderDash: s.label.includes("Remaining") && pf !== 1 ? [5, 5] : [],
+            tension: isCumulative ? 0.3 : 0,
+            fill: isCumulative,
+            type: isCumulative ? 'line' : 'bar',
+            pointRadius: isCumulative ? 3 : 0,
+            yAxisID
+          });
+        });
+        dates.forEach(d => allLabels.add(d));
+      });
+      curveChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: Array.from(allLabels).sort(),
+          datasets: allSeries
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              labels: { color: 'white' },
+              onClick: (e, legendItem) => {
+                const index = legendItem.datasetIndex;
+                const meta = curveChart.getDatasetMeta(index);
+                meta.hidden = meta.hidden === null ? true : !meta.hidden;
+                curveChart.update();
+              }
+            },
+            tooltip: {
+              mode: 'index',
+              intersect: false,
+              backgroundColor: 'rgba(0,0,0,0.8)',
+              titleColor: 'white',
+              bodyColor: 'white'
+            },
+            title: { display: true, text: "S-Curve Analysis", color: 'white' }
+          },
+          interaction: { mode: 'index', axis: 'x' },
+          scales: {
+            x: {
+              ticks: { color: 'white' },
+              grid: { color: 'rgba(255,255,255,0.1)' }
+            },
+            leftY: {
+              type: 'linear',
+              position: 'left',
+              title: { display: true, text: 'Units', color: '#6EE7B7' },
+              ticks: { color: '#6EE7B7' },
+              grid: { color: 'rgba(100,255,180,0.1)' }
+            },
+            rightY: {
+              type: 'linear',
+              position: 'right',
+              title: { display: true, text: 'Cumulative Units / Cost', color: '#FBBF24' },
+              ticks: { color: '#FBBF24' },
+              grid: { color: 'rgba(255,200,0,0.1)' }
+            }
+          }
+        }
+      });
+    }
+    function renderDatasetToggles() {
+      datasetToggles.innerHTML = '';
+      allDatasetLabels.forEach((label, index) => {
+        const div = document.createElement('div');
+        const id = `toggle-${index}`;
+        div.innerHTML = `
+          <label class="inline-flex items-center cursor-pointer">
+            <input type="checkbox" id="${id}" checked class="form-checkbox h-4 w-4 text-teal-500 rounded focus:ring-teal-500" />
+            <span class="ml-2">${label}</span>
+          </label>
+        `;
+        datasetToggles.appendChild(div);
+        const checkbox = document.getElementById(id);
+        checkbox.addEventListener('change', () => {
+          const meta = curveChart.getDatasetMeta(index);
+          meta.hidden = !checkbox.checked;
+          curveChart.update();
+        });
+      });
+    }
+    function getRandomColor(alpha = 1) {
+      const colors = [
+        'rgba(20, 184, 166, 1)', // teal-500
+        'rgba(245, 158, 11, 1)', // amber-500
+        'rgba(236, 72, 153, 1)', // rose-500
+        'rgba(59, 130, 246, 1)', // blue-500
+        'rgba(16, 185, 129, 1)', // green-500
+        'rgba(239, 68, 68, 1)',  // red-500
+        'rgba(147, 51, 234, 1)', // purple-500
+      ];
+      const color = colors[Math.floor(Math.random() * colors.length)];
+      return color.replace('1)', alpha + ')');
+    }
+    function renderDataTable(data) {
+      const table = document.createElement('table');
+      table.className = 'min-w-full bg-slate-800 text-sm rounded overflow-hidden divide-y divide-slate-700';
+      const thead = document.createElement('thead');
+      const headerRow = document.createElement('tr');
+      Object.keys(data[0]).forEach(key => {
+        const th = document.createElement('th');
+        th.textContent = key;
+        th.className = 'p-2 bg-slate-700';
+        headerRow.appendChild(th);
+      });
+      thead.appendChild(headerRow);
+      table.appendChild(thead);
+      const tbody = document.createElement('tbody');
+      data.forEach(row => {
+        const tr = document.createElement('tr');
+        Object.values(row).forEach(val => {
+          const td = document.createElement('td');
+          td.textContent = val;
+          td.className = 'p-2';
+          tr.appendChild(td);
+        });
+        tbody.appendChild(tr);
+      });
+      table.appendChild(tbody);
+      const dataTable = document.getElementById('dataTable');
+      dataTable.innerHTML = '';
+      dataTable.appendChild(table);
+    }
+    function exportCSV() {
+      let csv = "Date," + datasets.flatMap(d => d.series.map(s => s.label)).join(",") + "\n";
+      const labels = curveChart.data.labels;
+      labels.forEach((label, i) => {
+        let row = label;
+        curveChart.data.datasets.forEach(ds => {
+          row += "," + (ds.data[i] || 0);
+        });
+        csv += row + "\n";
+      });
+      const blob = new Blob([csv], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = "s_curve_data.csv";
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+    function exportPNG() {
+      const link = document.createElement('a');
+      link.download = 's_curve_chart.png';
+      link.href = curveChart.toBase64Image();
+      link.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=Kaliman-1981/curvemaster" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,14 @@

+You are Curve Master, an S-Curve generator and analyzer.   You take Excel or CSV input in vertical format where:   - The first row = dates (time axis).   - Each following row = one metric.    ### Import Feature - User uploads an Excel (.xlsx) or CSV (.csv).   - Auto-detect columns (Date, Budgeted, Actual, Remaining, etc.).   - Validate headers against the required fields:      (Budgeted Units, Actual Units, Cum Actual Units, Remaining Early Units, Remaining Late Units, Cum Remaining Early Units, Cum Remaining Late Units)      OR      (Budgeted Cost, Actual Cost, Cum Actual Cost, Remaining Early Cost, Remaining Late Cost, Cum Remaining Early Cost, Cum Remaining Late Cost).   - If headers are missing, prompt user to map columns manually.   - Allow multiple file uploads (compare Unit vs Cost curves in one session).    ### Inputs (Labor Hours / Units) - Budgeted Units   - Actual Units   - Cum Actual Units   - Remaining Early Units   - Remaining Late Units   - Cum Remaining Early Units   - Cum Remaining Late Units    ### Inputs (Cost) - Budgeted Cost   - Actual Cost   - Cum Actual Cost   - Remaining Early Cost   - Remaining Late Cost   - Cum Remaining Early Cost   - Cum Remaining Late Cost    ### Curve Controls 1. Plot S-curves for both **units** and **costs**.      - X-axis = Date      - Y-axis = Units or Cost      - Show multiple lines on one chart (Budget, Actual, Remaining Early, Remaining Late, Cumulative, etc.).      - Clear labels + legend.    2. Add **Productivity Factor (PF) control**:      - User sets PF (e.g., 0.75, 1.2).      - Remaining Early/Late curves are multiplied by PF.      - Show adjusted curves in **dashed lines**.    3. Provide two views:      - **Cumulative S-Curve** (long-term).      - **Period S-Curve** (weekly/monthly).    ### Output - Interactive charts (hover shows values).   - Export options:      - PNG (charts)      - CSV (adjusted dataset)      - XLSX (with both raw + adjusted curves).   - Title = “Curve Master – S Curve Analysis”   - Clean professional style: dark theme, bold lines, milestone markers.    ### Example Productivity Adjustments - PF = 0.75 → Remaining Early/Late Units × 0.75   - PF = 1.25 → Remaining Early/Late Cost × 1.25
+Budgeted Units, Actual Units, Remaining Early Units, Remaining Late Units, Need to be vertical bars like a histogram, the cumulative data makes the curves. Need option to filter on chart
+cumulative needs to remain lines, and i cant see the color they are faint
+need to fix the scaling , maybe use a combo style chart.
+Need to Add, one more line going to call it cum baseline
+NOT DOING ANYTHING WHEN CHART IS UPLOADED
+perfect, i dont like the color scheme
+Cum Actual Units - I need the data stop at the last actaul reported it shows a drop in the data cause actuals dont go past a certain data
+Set the left Y-axis to show Units (Budgeted, Actual, Remaining) and the right Y-axis to show Cumulative values (Cum Actual, Cum Remaining, Cum Baseline — the tail of the S-Curve).
+units dont need to be in period values
+Budgeted units, Actual units, Remaining Early units , Remaining Late units, should be read left y axis
+right side is cumulative units, left side is not cumalitve
+Make sure Units are only plotted on the left Y-axis and Cumulative values on the right Y-axis — do not stack or overlay them; keep each axis independent with clear titles (‘Units’ left, ‘Cumulative Units/Cost’ right)
+lets add reset button