eleventy-plugin-uncharted 0.7.3 → 0.7.5

package/css/uncharted.css

@@ -102,7 +102,6 @@
   flex-wrap: wrap;
   column-gap: 1rem;
   row-gap: 0.375rem;
-  list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0.875rem;
@@ -126,33 +125,32 @@
   margin-bottom: 1rem;
 }
 
-.chart-legend > .chart-legend-item {
+.chart-legend-item {
   display: flex;
   align-items: baseline;
   gap: 0.5rem;
   background: transparent;
-  margin: 0;
-}
 
-.chart-legend-item::before {
-  content: '';
-  width: 1cap;
-  height: 1cap;
-  border-radius: 2px;
-  background-color: var(--color);
-  flex-shrink: 0;
-}
+  &::before {
+    content: '';
+    width: 1cap;
+    height: 1cap;
+    border-radius: 2px;
+    background-color: var(--color);
+    flex-shrink: 0;
+  }
 
-/* Dot/scatter/line charts use circular legend markers */
-.chart-dot .chart-legend-item::before,
-.chart-line .chart-legend-item::before,
-.chart-scatter .chart-legend-item::before {
-  border-radius: 50%;
-}
+  .legend-value {
+    opacity: 0.7;
+    margin-left: 0.125rem;
+  }
 
-.chart-legend-item .legend-value {
-  opacity: 0.7;
-  margin-left: 0.125rem;
+  /* Dot/scatter/line charts use circular legend markers */
+  .chart-dot &::before,
+  .chart-line &::before,
+  .chart-scatter &::before {
+    border-radius: 50%;
+  }
 }
 
 .chart-legend-title {

package/eleventy.config.js

@@ -11,7 +11,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
  * Uncharted - Eleventy CSS Charts Plugin
  * @param {Object} eleventyConfig - Eleventy configuration object
  * @param {Object} [options] - Plugin options
- * @param {string} [options.dataDir] - @deprecated Data directory path (now auto-detected from Eleventy's dir.data)
+ * @param {string} [options.dataDir] - Data directory path relative to root (e.g., '_data/charts'). Defaults to Eleventy's dir.data config.
  * @param {boolean} [options.animate] - Enable animations globally (individual charts can override)
  * @param {string} [options.cssPath] - Output path for stylesheet (default: '/css/uncharted.css')
  * @param {boolean} [options.injectCss] - Automatically copy and inject CSS (default: true)
@@ -28,14 +28,9 @@ export default function(eleventyConfig, options = {}) {
     eleventyDirs = dirs;
   });
 
-  // Warn if deprecated dataDir option is used
-  if (options.dataDir) {
-    console.warn('[uncharted] "dataDir" option is deprecated; the plugin now auto-detects from Eleventy\'s dir.data config');
-  }
-
   // Helper to resolve data directory
   function getDataDir() {
-    // Plugin option takes precedence if explicitly set (deprecated)
+    // Plugin option takes precedence if explicitly set
     if (options.dataDir) {
       return path.resolve(process.cwd(), options.dataDir);
     }
@@ -93,13 +88,13 @@ export default function(eleventyConfig, options = {}) {
     });
   }
 
-  // CSV data passthrough for download links (set up after directories are known)
+  // CSV data passthrough for download links
+  // When dataDir is set explicitly, use it; otherwise use Eleventy's default _data
   if (dataPassthrough) {
-    eleventyConfig.on('eleventy.directories', () => {
-      const resolvedDataDir = getDataDir();
-      eleventyConfig.addPassthroughCopy({
-        [resolvedDataDir]: dataPath.replace(/^\//, '').replace(/\/$/, '')
-      });
+    const dataDirForPassthrough = options.dataDir || '_data';
+    const destPath = dataPath.replace(/^\//, '').replace(/\/$/, '');
+    eleventyConfig.addPassthroughCopy({
+      [dataDirForPassthrough]: destPath
     });
   }
 

package/package.json

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

package/src/config.js

@@ -68,11 +68,6 @@ export function normalizeConfig(config, chartId = 'unknown') {
   // Build y axis config
   normalized.y = buildAxisConfig('y', config, chartId);
 
-  // Warn for deprecated columns key
-  if (config.columns) {
-    warnDeprecation(chartId, 'columns', 'x.column / y.columns');
-  }
-
   // Warn for deprecated legend array (when used for labels, not boolean)
   if (Array.isArray(config.legend)) {
     warnDeprecation(chartId, 'legend (array)', 'y.columns: { key: "Label" }');

package/src/renderers/donut.js

@@ -118,7 +118,7 @@ export function renderDonut(config) {
   // Show if legend !== false (donut always shows legend by default)
   const showLegend = config.legend !== false;
   if (showLegend) {
-    html += `<ul class="chart-legend">`;
+    html += `<div class="chart-legend">`;
     segments.forEach((segment, i) => {
       const label = getSegmentLabel(segment, i);
       let displayValue;
@@ -129,12 +129,12 @@ export function renderDonut(config) {
       }
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(segment.label)}`;
-      html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">`;
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">`;
       html += `<span class="legend-label">${escapeHtml(label)}</span>`;
       html += `<span class="legend-value">${escapeHtml(String(displayValue))}</span>`;
-      html += `</li>`;
+      html += `</span>`;
     });
-    html += `</ul>`;
+    html += `</div>`;
   }
 
   html += renderDownloadLink(downloadDataUrl, downloadData);

package/src/renderers/dot.js

@@ -164,14 +164,14 @@ export function renderDot(config) {
     if (legendTitle) {
       html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
     }
-    html += `<ul class="chart-legend">`;
+    html += `<div class="chart-legend">`;
     seriesKeys.forEach((key, i) => {
       const label = getSeriesLabel(key, i);
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
-      html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</li>`;
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
     });
-    html += `</ul>`;
+    html += `</div>`;
   }
 
   html += renderDownloadLink(downloadDataUrl, downloadData);

package/src/renderers/sankey.js

@@ -512,18 +512,18 @@ export function renderSankey(config) {
 
   // Legend (optional)
   if (legend) {
-    html += `<ul class="chart-legend">`;
+    html += `<div class="chart-legend">`;
     nodes.forEach((node, i) => {
       const colorClass = `chart-color-${nodeColors.get(node)}`;
       const seriesClass = `chart-series-${slugify(node)}`;
       const throughput = nodeThroughput.get(node);
-      html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(node)}`;
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(node)}`;
       if (valueFormat) {
         html += ` <span class="legend-value">${formatNumber(throughput, valueFormat) || throughput}</span>`;
       }
-      html += `</li>`;
+      html += `</span>`;
     });
-    html += `</ul>`;
+    html += `</div>`;
   }
 
   html += renderDownloadLink(downloadDataUrl, downloadData);

package/src/renderers/scatter.js

@@ -201,14 +201,14 @@ export function renderScatter(config) {
     if (legendTitle) {
       html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
     }
-    html += `<ul class="chart-legend">`;
+    html += `<div class="chart-legend">`;
     seriesList.forEach((series, i) => {
       const label = legendLabels[i] ?? series;
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(series)}`;
-      html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</li>`;
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
     });
-    html += `</ul>`;
+    html += `</div>`;
   }
 
   // Size legend (when sizeTitle is specified and size column exists)

package/src/renderers/stacked-bar.js

@@ -65,14 +65,14 @@ export function renderStackedBar(config) {
     if (legendTitle) {
       html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
     }
-    html += `<ul class="chart-legend">`;
+    html += `<div class="chart-legend">`;
     seriesKeys.forEach((key, i) => {
       const label = getSeriesLabel(key, i);
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
-      html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</li>`;
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
     });
-    html += `</ul>`;
+    html += `</div>`;
   }
 
   // Calculate delay step to cap total stagger at 1s

package/src/renderers/stacked-column.js

@@ -199,14 +199,14 @@ export function renderStackedColumn(config) {
   // Legend (show if legend !== false and we have series keys)
   const showLegend = config.legend !== false && seriesKeys.length > 0;
   if (showLegend) {
-    html += `<ul class="chart-legend">`;
+    html += `<div class="chart-legend">`;
     seriesKeys.forEach((key, i) => {
       const label = getSeriesLabel(key, i);
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
-      html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</li>`;
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
     });
-    html += `</ul>`;
+    html += `</div>`;
   }
 
   html += renderDownloadLink(downloadDataUrl, downloadData);