setup (but did not apply) holofoil styling and added new seticon for perfect order set

src/assets/js/priceChart.js

@@ -39,10 +39,27 @@ function buildChartData(history, rangeKey) {
 
   const filtered = history.filter(r => new Date(r.calculatedAt) >= cutoff);
 
-  const allDates = [...new Set(filtered.map(r => r.calculatedAt))]
-    .sort((a, b) => new Date(a) - new Date(b));
+  // Always build the full date axis for the selected window, even if sparse.
+  // Generate one label per day in the range so the x-axis reflects the
+  // chosen period rather than collapsing to only the days that have data.
+  const dataDateSet = new Set(filtered.map(r => r.calculatedAt));
+  const allDates = [...dataDateSet].sort((a, b) => new Date(a) - new Date(b));
 
-  const labels = allDates.map(formatDate);
+  // If we have real data, expand the axis to span from cutoff → today so
+  // empty stretches at the start/end of a range are visible.
+  let axisLabels = allDates;
+  if (allDates.length > 0 && RANGE_DAYS[rangeKey] !== Infinity) {
+    const start = new Date(cutoff);
+    const end   = new Date();
+    const expanded = [];
+    // Step through every day in the window
+    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+      expanded.push(d.toISOString().split('T')[0]);
+    }
+    axisLabels = expanded;
+  }
+
+  const labels = axisLabels.map(formatDate);
 
   const lookup = {};
   for (const row of filtered) {
@@ -50,16 +67,14 @@ function buildChartData(history, rangeKey) {
     lookup[row.condition][row.calculatedAt] = Number(row.marketPrice);
   }
 
-  // Check specifically whether the active condition has any data points
-  const activeConditionDates = allDates.filter(
+  const activeConditionHasData = allDates.some(
     date => lookup[activeCondition]?.[date] != null
   );
-  const activeConditionHasData = activeConditionDates.length > 0;
 
   const datasets = CONDITIONS.map(condition => {
     const isActive = condition === activeCondition;
     const colors = CONDITION_COLORS[condition];
-    const data = allDates.map(date => lookup[condition]?.[date] ?? null);
+    const data = axisLabels.map(date => lookup[condition]?.[date] ?? null);
     return {
       label: condition,
       data,
@@ -75,23 +90,29 @@ function buildChartData(history, rangeKey) {
     };
   });
 
-  return { labels, datasets, hasData: allDates.length > 0, activeConditionHasData };
+  return {
+    labels,
+    datasets,
+    hasData: allDates.length > 0,
+    activeConditionHasData,
+  };
 }
 
 function updateChart() {
   if (!chartInstance) return;
   const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
 
-  // Show empty state if no data at all, or if the active condition specifically has no data
-  if (!hasData || !activeConditionHasData) {
-    setEmptyState(true);
-    return;
-  }
-
-  setEmptyState(false);
-  chartInstance.data.labels = labels;
+  // Always push the new labels/datasets to the chart so the x-axis
+  // reflects the selected time window — even when there's no data for
+  // the active condition. Then toggle the empty state overlay on top.
+  chartInstance.data.labels   = labels;
   chartInstance.data.datasets = datasets;
   chartInstance.update('none');
+
+  // Show the empty state overlay if the active condition has no points
+  // in this window, but leave the (empty) chart visible underneath so
+  // the axis communicates the selected period.
+  setEmptyState(!hasData || !activeConditionHasData);
 }
 
 function initPriceChart(canvas) {
@@ -114,12 +135,8 @@ function initPriceChart(canvas) {
 
   const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
 
-  if (!hasData || !activeConditionHasData) {
-    setEmptyState(true);
-    return;
-  }
-
-  setEmptyState(false);
+  // Render the chart regardless — show empty state overlay if needed
+  setEmptyState(!hasData || !activeConditionHasData);
 
   chartInstance = new Chart(canvas.getContext('2d'), {
     type: 'line',