eleventy-plugin-uncharted 1.0.0-rc.1 → 1.0.0

package/css/uncharted.css

@@ -387,7 +387,6 @@
 .chart-stacked-column .column-labels {
   grid-row: 2;
   display: flex;
-  flex-wrap: wrap;
   gap: clamp(0.375rem, 1.5cqi, 1rem);
   padding: 0.25rem 0.5rem 0;
 }
@@ -411,6 +410,7 @@
   transform: rotate(180deg);
   display: flex;
   align-items: center;
+  white-space: nowrap;
   overflow: visible;
   text-overflow: clip;
 }
@@ -642,7 +642,6 @@
 :is(.chart-dot, .chart-line) .dot-labels {
   grid-row: 2;
   display: flex;
-  flex-wrap: wrap;
   gap: 6px;
   padding: 0 0.5rem;
   margin-top: 0.5rem;
@@ -664,17 +663,19 @@
   transform: rotate(180deg);
   display: flex;
   align-items: center;
+  white-space: nowrap;
   overflow: visible;
   text-overflow: clip;
 }
 
-:is(.chart-dot, .chart-line) .dot-labels .axis-title {
-  flex-basis: 100%;
+:is(.chart-dot, .chart-line, .chart-stacked-column) .chart-body > .axis-title {
+  grid-column: 2;
   text-align: center;
   font-size: 0.7rem;
   opacity: 0.6;
   white-space: nowrap;
   margin-top: 0.5rem;
+  display: block;
 }
 
 /* ==========================================================================
@@ -783,7 +784,6 @@
 .chart-bubble .dot-labels {
   grid-row: 2;
   display: flex;
-  flex-wrap: wrap;
   gap: 6px;
   padding: 0 0.5rem;
   margin-top: 0.5rem;
@@ -808,17 +808,18 @@
   transform: rotate(180deg);
   display: flex;
   align-items: center;
+  white-space: nowrap;
   overflow: visible;
   text-overflow: clip;
 }
 
-.chart-bubble .dot-labels .axis-title {
-  flex-basis: 100%;
+.chart-bubble .chart-body > .axis-title {
   text-align: center;
   font-size: 0.7rem;
   opacity: 0.6;
   white-space: nowrap;
   margin-top: 0.5rem;
+  display: block;
 }
 
 /* Bubble chart legend uses circular markers */
@@ -1373,10 +1374,11 @@
   }
 }
 
-/* Line chart: animate scroll container */
-.chart-animate.chart-line .chart-scroll {
-  clip-path: inset(0 100% 0 0);
-  animation: container-reveal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+/* Line chart: animate dot-field only (so x-axis labels and background don't animate) */
+/* Negative insets allow dots to overflow the field bounds */
+.chart-animate.chart-line .dot-field {
+  clip-path: inset(-1rem 100% -1rem 0);
+  animation: timeseries-reveal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
 }
 
 /* Timeseries: animate dot-field only (so x-axis labels and background don't animate) */
@@ -1391,11 +1393,6 @@
   to   { clip-path: inset(-1rem); }
 }
 
-@keyframes container-reveal {
-  from { clip-path: inset(0 100% 0 0); }
-  to   { clip-path: inset(0); }
-}
-
 /* Donut chart: clockwise reveal using animated mask */
 @property --donut-reveal {
   syntax: '<angle>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-plugin-uncharted",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0",
   "description": "An Eleventy plugin that renders CSS-based charts from CSV data using shortcodes",
   "main": "eleventy.config.js",
   "type": "module",

package/src/renderers/bubble.js

@@ -134,7 +134,7 @@ export function renderBubble(config) {
   const yAxisStyle = hasNegativeY ? ` style="--zero-position: ${zeroPctY.toFixed(2)}%"` : '';
   html += `<div class="chart-y-axis"${yAxisStyle}>`;
   html += `<span class="axis-label">${formatNumber(calcMaxY, fmtY) || calcMaxY}</span>`;
-  const midLabelY = hasNegativeY ? 0 : Math.round((calcMaxY + calcMinY) / 2);
+  const midLabelY = hasNegativeY ? 0 : (calcMaxY + calcMinY) / 2;
   html += `<span class="axis-label">${formatNumber(midLabelY, fmtY) || midLabelY}</span>`;
   html += `<span class="axis-label">${formatNumber(calcMinY, fmtY) || calcMinY}</span>`;
   if (yAxisTitle) {
@@ -213,12 +213,12 @@ export function renderBubble(config) {
   categories.forEach(category => {
     html += `<span class="dot-label">${escapeHtml(category)}</span>`;
   });
-  if (xAxisTitle) {
-    html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
-  }
   html += `</div>`;
 
   html += `</div>`; // close chart-scroll
+  if (xAxisTitle) {
+    html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
+  }
   html += `</div>`; // close chart-body
 
   // Legend (if multiple series or legendTitle specified)

package/src/renderers/line.js

@@ -90,7 +90,7 @@ export function renderLine(config) {
   const yAxisStyle = hasNegativeY ? ` style="--zero-position: ${zeroPct.toFixed(2)}%"` : '';
   html += `<div class="chart-y-axis"${yAxisStyle}>`;
   html += `<span class="axis-label">${formatNumber(maxValue, yFormat) || maxValue}</span>`;
-  const midLabelY = hasNegativeY ? 0 : Math.round((maxValue + minValue) / 2);
+  const midLabelY = hasNegativeY ? 0 : (maxValue + minValue) / 2;
   html += `<span class="axis-label">${formatNumber(midLabelY, yFormat) || midLabelY}</span>`;
   html += `<span class="axis-label">${formatNumber(minValue, yFormat) || minValue}</span>`;
   if (yAxisTitle) {
@@ -181,12 +181,12 @@ export function renderLine(config) {
     const label = row[labelKey] ?? '';
     html += `<span class="dot-label">${escapeHtml(label)}</span>`;
   });
-  if (xAxisTitle) {
-    html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
-  }
   html += `</div>`;
 
   html += `</div>`; // close chart-scroll
+  if (xAxisTitle) {
+    html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
+  }
   html += `</div>`; // close chart-body
 
   // Legend (show if legend !== false and we have series keys or legendTitle)

package/src/renderers/scatter.js

@@ -141,7 +141,7 @@ export function renderScatter(config) {
   const yAxisStyle = hasNegativeY ? ` style="--zero-position-y: ${zeroPctY.toFixed(2)}%"` : '';
   html += `<div class="chart-y-axis"${yAxisStyle}>`;
   html += `<span class="axis-label">${formatNumber(calcMaxY, fmtY) || calcMaxY}</span>`;
-  const midLabelY = hasNegativeY ? 0 : Math.round((calcMaxY + calcMinY) / 2);
+  const midLabelY = hasNegativeY ? 0 : (calcMaxY + calcMinY) / 2;
   html += `<span class="axis-label">${formatNumber(midLabelY, fmtY) || midLabelY}</span>`;
   html += `<span class="axis-label">${formatNumber(calcMinY, fmtY) || calcMinY}</span>`;
   html += `<span class="axis-title">${escapeHtml(yAxisTitle)}</span>`;
@@ -209,7 +209,7 @@ export function renderScatter(config) {
   const xAxisStyle = hasNegativeX ? ` style="--zero-position-x: ${zeroPctX.toFixed(2)}%"` : '';
   html += `<div class="chart-x-axis"${xAxisStyle}>`;
   html += `<span class="axis-label">${formatNumber(calcMinX, fmtX) || calcMinX}</span>`;
-  const midLabelX = hasNegativeX ? 0 : Math.round((calcMaxX + calcMinX) / 2);
+  const midLabelX = hasNegativeX ? 0 : (calcMaxX + calcMinX) / 2;
   html += `<span class="axis-label">${formatNumber(midLabelX, fmtX) || midLabelX}</span>`;
   html += `<span class="axis-label">${formatNumber(calcMaxX, fmtX) || calcMaxX}</span>`;
   html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;

package/src/renderers/stacked-column.js

@@ -1,6 +1,6 @@
 import { slugify, getLabelKey, getSeriesNames, escapeHtml, renderDownloadLinks } from '../utils.js';
 import { formatNumber } from '../formatters.js';
-import { getAxisMax, getAxisMin, getAxisFormat, getRotateLabels } from '../config.js';
+import { getAxisMax, getAxisMin, getAxisFormat, getAxisTitle, getRotateLabels } from '../config.js';
 
 /**
  * Render a stacked column chart (vertical)
@@ -35,8 +35,10 @@ export function renderStackedColumn(config) {
   const animateClass = animate ? ' chart-animate' : '';
   const rotateLabels = getRotateLabels(config);
 
-  // Get Y-axis format
+  // Get Y-axis format and axis titles
   const yFormat = getAxisFormat(config, 'y');
+  const xAxisTitle = getAxisTitle(config, 'x', '');
+  const yAxisTitle = getAxisTitle(config, 'y', '');
 
   // Calculate stacked totals for positive and negative values separately
   // Positives stack up from zero, negatives stack down from zero
@@ -91,6 +93,9 @@ export function renderStackedColumn(config) {
   html += `<span class="axis-label">${formatNumber(midLabelY, yFormat) || midLabelY}</span>`;
   const minLabelY = hasNegativeY ? minValue : 0;
   html += `<span class="axis-label">${formatNumber(minLabelY, yFormat) || minLabelY}</span>`;
+  if (yAxisTitle) {
+    html += `<span class="axis-title">${escapeHtml(yAxisTitle)}</span>`;
+  }
   html += `</div>`;
 
   // Scroll wrapper for columns + labels
@@ -193,6 +198,9 @@ export function renderStackedColumn(config) {
   html += `</div>`;
 
   html += `</div>`; // close chart-scroll
+  if (xAxisTitle) {
+    html += `<span class="axis-title">${escapeHtml(xAxisTitle)}</span>`;
+  }
   html += `</div>`; // close chart-body
 
   // Legend (show if legend !== false and we have series keys)

package/src/renderers/timeseries.js

@@ -380,7 +380,7 @@ export function renderTimeseries(config) {
   const yAxisStyle = hasNegativeY ? ` style="--zero-position: ${zeroPctY.toFixed(2)}%"` : '';
   html += `<div class="chart-y-axis"${yAxisStyle}>`;
   html += `<span class="axis-label">${formatNumber(maxValue, yFormat) || maxValue}</span>`;
-  const midLabelY = hasNegativeY ? 0 : Math.round((maxValue + minValue) / 2);
+  const midLabelY = hasNegativeY ? 0 : (maxValue + minValue) / 2;
   html += `<span class="axis-label">${formatNumber(midLabelY, yFormat) || midLabelY}</span>`;
   html += `<span class="axis-label">${formatNumber(minValue, yFormat) || minValue}</span>`;
   if (yAxisTitle) {