eleventy-plugin-uncharted 0.7.4 → 0.8.0

package/css/uncharted.css

@@ -160,6 +160,20 @@
   margin-bottom: 0.375rem;
 }
 
+/* ==========================================================================
+   Icons (Font Awesome support for dots and legends)
+   ========================================================================== */
+
+/* Legend items with icons - hide the default ::before marker */
+.chart-legend-item.has-icon::before {
+  display: none;
+}
+
+.chart-legend-item.has-icon i {
+  color: var(--color);
+  margin-inline-end: 0.35em;
+}
+
 /* ==========================================================================
    Axes
    ========================================================================== */
@@ -560,7 +574,6 @@
   left: 0.5rem;
   display: flex;
   align-items: stretch;
-  gap: 6px;
 }
 
 :is(.chart-dot, .chart-line) .dot-col {
@@ -586,6 +599,34 @@
   z-index: 1;
 }
 
+/* Dots with icons */
+:is(.chart-dot, .chart-line) .dot.has-icon {
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:is(.chart-dot, .chart-line) .dot.has-icon i {
+  color: var(--color);
+  font-size: var(--chart-dot-size);
+  line-height: 1;
+}
+
+/* Line chart icons: clip the line ends around the icons */
+.chart-line:has(.dot.has-icon) .chart-line-segment {
+  --clip-size: calc(var(--chart-dot-size) * 0.75);
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    transparent var(--clip-size),
+    black var(--clip-size),
+    black calc(100% - var(--clip-size)),
+    transparent calc(100% - var(--clip-size)),
+    transparent 100%
+  );
+}
+
 :is(.chart-dot, .chart-line) .dot-labels {
   grid-row: 2;
   display: flex;
@@ -702,6 +743,20 @@
   z-index: 1;
 }
 
+/* Scatter dots with icons */
+.chart-scatter .dot.has-icon {
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart-scatter .dot.has-icon i {
+  color: var(--color);
+  font-size: var(--chart-dot-size);
+  line-height: 1;
+}
+
 /* Variable-sized dots (size column) */
 .chart-scatter .dot[style*="--size-scale"] {
   --computed-size: calc(
@@ -712,6 +767,11 @@
   height: var(--computed-size);
 }
 
+/* Variable-sized dots with icons */
+.chart-scatter .dot.has-icon[style*="--size-scale"] i {
+  font-size: var(--computed-size);
+}
+
 /* Size legend */
 .chart-size-legend {
   display: flex;

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.4",
+  "version": "0.8.0",
   "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/dot.js

@@ -16,7 +16,7 @@ import { getAxisMax, getAxisMin, getAxisFormat, getRotateLabels } from '../confi
  * @returns {string} - HTML string
  */
 export function renderDot(config) {
-  const { title, subtitle, data, max, min, legend, legendTitle, animate, format, id, downloadData, downloadDataUrl, connectDots, dots: showDots = true, chartType = 'dot', _columns } = config;
+  const { title, subtitle, data, max, min, legend, legendTitle, animate, format, id, downloadData, downloadDataUrl, connectDots, dots: showDots = true, icons, chartType = 'dot', _columns } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Dot chart: no data provided -->`;
@@ -34,6 +34,13 @@ export function renderDot(config) {
     return key;
   };
 
+  // Helper to get icon for a series
+  const getSeriesIcon = (key) => {
+    if (!icons) return null;
+    if (typeof icons === 'string') return icons;
+    return icons[key] ?? null;
+  };
+
   const animateClass = animate ? ' chart-animate' : '';
   const rotateLabels = getRotateLabels(config, config.id);
 
@@ -62,7 +69,8 @@ export function renderDot(config) {
   const negativeClass = hasNegativeY ? ' has-negative-y' : '';
   const idClass = id ? ` chart-${id}` : '';
   const rotateClass = rotateLabels ? ' rotate-labels' : '';
-  const dotsClass = !showDots ? ' no-dots' : '';
+  // Only add no-dots class if dots are disabled AND no icons are set
+  const dotsClass = (!showDots && !icons) ? ' no-dots' : '';
   let html = `<figure class="chart chart-${chartType}${animateClass}${negativeClass}${idClass}${rotateClass}${dotsClass}">`;
 
   if (title) {
@@ -120,7 +128,8 @@ export function renderDot(config) {
   }
 
   // Each row becomes a column with dots for each series
-  if (showDots) {
+  // Show dots if explicitly enabled OR if icons are set (icons override dots: false)
+  if (showDots || icons) {
     data.forEach((row, colIndex) => {
       const label = row[labelKey] ?? '';
 
@@ -133,11 +142,17 @@ export function renderDot(config) {
         const colorClass = `chart-color-${i + 1}`;
         const seriesClass = `chart-series-${slugify(key)}`;
         const tooltipLabel = getSeriesLabel(key, i);
+        const icon = getSeriesIcon(key);
+        const iconClass = icon ? ' has-icon' : '';
 
-        html += `<div class="dot ${colorClass} ${seriesClass}" `;
+        html += `<div class="dot ${colorClass} ${seriesClass}${iconClass}" `;
         html += `style="--value: ${yPct.toFixed(2)}%" `;
         html += `title="${escapeHtml(tooltipLabel)}: ${formatNumber(value, yFormat) || value}"`;
-        html += `></div>`;
+        html += `>`;
+        if (icon) {
+          html += `<i class="${escapeHtml(icon)}"></i>`;
+        }
+        html += `</div>`;
       });
 
       html += `</div>`;
@@ -169,7 +184,13 @@ export function renderDot(config) {
       const label = getSeriesLabel(key, i);
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(key)}`;
-      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
+      const icon = getSeriesIcon(key);
+      const iconClass = icon ? ' has-icon' : '';
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}${iconClass}">`;
+      if (icon) {
+        html += `<i class="${escapeHtml(icon)}"></i>`;
+      }
+      html += `${escapeHtml(label)}</span>`;
     });
     html += `</div>`;
   }

package/src/renderers/scatter.js

@@ -18,7 +18,7 @@ import { getAxisMax, getAxisMin, getAxisTitle, getAxisFormat } from '../config.j
  * @returns {string} - HTML string
  */
 export function renderScatter(config) {
-  const { title, subtitle, data, legend, animate, format, id, downloadData, downloadDataUrl, proportional, _columns } = config;
+  const { title, subtitle, data, legend, animate, format, id, downloadData, downloadDataUrl, proportional, icons, _columns } = config;
 
   // Get axis-specific format configs (normalized config provides x.format/y.format)
   const fmtX = getAxisFormat(config, 'x');
@@ -115,6 +115,13 @@ export function renderScatter(config) {
   const seriesList = Array.from(seriesSet);
   const seriesIndex = new Map(seriesList.map((s, i) => [s, i]));
 
+  // Helper to get icon for a series
+  const getSeriesIcon = (seriesName) => {
+    if (!icons) return null;
+    if (typeof icons === 'string') return icons;
+    return icons[seriesName] ?? null;
+  };
+
   const negativeClasses = (hasNegativeX ? ' has-negative-x' : '') + (hasNegativeY ? ' has-negative-y' : '');
   const proportionalClass = proportional ? ' chart-proportional' : '';
   const idClass = id ? ` chart-${id}` : '';
@@ -159,6 +166,8 @@ export function renderScatter(config) {
     const seriesClass = `chart-series-${slugify(dot.series)}`;
     const fmtXVal = formatNumber(dot.x, fmtX) || dot.x;
     const fmtYVal = formatNumber(dot.y, fmtY) || dot.y;
+    const icon = getSeriesIcon(dot.series);
+    const iconClass = icon ? ' has-icon' : '';
 
     // Build tooltip with optional size value
     let tooltipText = dot.label ? `${dot.label}: (${fmtXVal}, ${fmtYVal})` : `(${fmtXVal}, ${fmtYVal})`;
@@ -173,10 +182,14 @@ export function renderScatter(config) {
       styleStr += `; --size-scale: ${dot.sizeScale.toFixed(4)}`;
     }
 
-    html += `<div class="dot ${colorClass} ${seriesClass}" `;
+    html += `<div class="dot ${colorClass} ${seriesClass}${iconClass}" `;
     html += `style="${styleStr}" `;
     html += `title="${escapeHtml(tooltipText)}"`;
-    html += `></div>`;
+    html += `>`;
+    if (icon) {
+      html += `<i class="${escapeHtml(icon)}"></i>`;
+    }
+    html += `</div>`;
   });
 
   html += `</div>`;
@@ -206,7 +219,13 @@ export function renderScatter(config) {
       const label = legendLabels[i] ?? series;
       const colorClass = `chart-color-${i + 1}`;
       const seriesClass = `chart-series-${slugify(series)}`;
-      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
+      const icon = getSeriesIcon(series);
+      const iconClass = icon ? ' has-icon' : '';
+      html += `<span class="chart-legend-item ${colorClass} ${seriesClass}${iconClass}">`;
+      if (icon) {
+        html += `<i class="${escapeHtml(icon)}"></i>`;
+      }
+      html += `${escapeHtml(label)}</span>`;
     });
     html += `</div>`;
   }