eleventy-plugin-uncharted 0.1.1 → 0.1.2

package/README.md

@@ -1,6 +1,6 @@
 # Uncharted
 
-A CSS-based charting plugin for Eleventy. Renders charts as pure HTML/CSS with no JavaScript dependencies.
+A CSS-based chart plugin for Eleventy. Renders charts as pure HTML/CSS with no JavaScript dependencies.
 
 ## Installation
 
@@ -110,10 +110,10 @@ charts:
 
 ## CSV Format
 
-CSV files use the first column as labels and subsequent columns as data series:
+CSV files use the first column as labels and subsequent columns as data series. The column names can be anything descriptive:
 
 ```csv
-label,existing,new
+department,existing,new
 Finance,11,11
 Sales,16,2
 Core,8,0
@@ -135,7 +135,7 @@ Stacked column, dot, and scatter charts support negative values. When negative v
 For stacked columns, positive values stack upward from zero and negative values stack downward:
 
 ```csv
-label,Cost,Profit
+quarter,Cost,Profit
 Q1,20,10
 Q2,25,-10
 Q3,15,25

package/css/uncharted.css

@@ -201,6 +201,7 @@
   height: 100%;
   width: var(--value);
   transition: width 0.3s ease;
+  background-color: var(--color);
 }
 
 .chart-stacked-bar .bar-value {
@@ -243,6 +244,7 @@
   width: 100%;
   height: var(--value);
   transition: height 0.3s ease;
+  background-color: var(--color);
 }
 
 .chart-stacked-column .column-labels {
@@ -381,6 +383,7 @@
   bottom: var(--value);
   transform: translate(-50%, 50%);
   cursor: default;
+  background-color: var(--color);
 }
 
 .chart-dot .dot[title]:hover {
@@ -443,6 +446,7 @@
   bottom: var(--value);
   transform: translate(-50%, 50%);
   cursor: default;
+  background-color: var(--color);
 }
 
 .chart-scatter .dot[title]:hover {

package/package.json

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

package/src/index.js

@@ -1,3 +1,3 @@
 export { renderers } from './renderers/index.js';
 export { loadCSV, parseCSV } from './csv.js';
-export { slugify, calculatePercentages, getSeriesNames, escapeHtml } from './utils.js';
+export { slugify, calculatePercentages, getLabelKey, getValueKey, getSeriesNames, escapeHtml } from './utils.js';

package/src/renderers/donut.js

@@ -1,4 +1,4 @@
-import { slugify, escapeHtml } from '../utils.js';
+import { slugify, escapeHtml, getLabelKey, getValueKey, getSeriesNames } from '../utils.js';
 
 /**
  * Render a donut/pie chart using conic-gradient
@@ -22,18 +22,22 @@ export function renderDonut(config) {
 
   const animateClass = animate ? ' chart-animate' : '';
 
-  // Extract values - support both {label, value} format and series format
+  // Get column keys positionally
+  const labelKey = getLabelKey(data);
+  const valueKey = getValueKey(data);
+  const seriesKeys = getSeriesNames(data);
+
+  // Extract values - support both label/value format and series format
   let segments = [];
-  if (data[0].value !== undefined) {
-    // Direct {label, value} format
+  if (seriesKeys.length === 1) {
+    // Two columns: first is label, second is value (multiple rows)
     segments = data.map(item => ({
-      label: item.label,
-      value: typeof item.value === 'number' ? item.value : parseFloat(item.value) || 0
+      label: item[labelKey],
+      value: typeof item[valueKey] === 'number' ? item[valueKey] : parseFloat(item[valueKey]) || 0
     }));
   } else {
-    // Series format - first row only for donut
-    const seriesNames = Object.keys(data[0]).filter(k => k !== 'label');
-    segments = seriesNames.map(name => ({
+    // Series format - first row only, columns after the first are series
+    segments = seriesKeys.map(name => ({
       label: name,
       value: typeof data[0][name] === 'number' ? data[0][name] : parseFloat(data[0][name]) || 0
     }));

package/src/renderers/dot.js

@@ -1,4 +1,4 @@
-import { slugify, escapeHtml, getSeriesNames } from '../utils.js';
+import { slugify, escapeHtml, getLabelKey, getSeriesNames } from '../utils.js';
 
 /**
  * Render a categorical dot chart (columns with dots at different Y positions)
@@ -20,7 +20,8 @@ export function renderDot(config) {
     return `<!-- Dot chart: no data provided -->`;
   }
 
-  // Get series keys from data columns (excluding 'label')
+  // Get label key (first column) and series keys (remaining columns)
+  const labelKey = getLabelKey(data);
   const seriesKeys = getSeriesNames(data);
   const legendLabels = legend ?? seriesKeys;
   const animateClass = animate ? ' chart-animate' : '';
@@ -82,7 +83,7 @@ export function renderDot(config) {
 
   // Each row becomes a column with dots for each series
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
 
     html += `<div class="dot-col">`;
 
@@ -110,7 +111,7 @@ export function renderDot(config) {
   // X-axis labels
   html += `<div class="dot-labels">`;
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
     html += `<span class="dot-label">${escapeHtml(label)}</span>`;
   });
   html += `</div>`;

package/src/renderers/stacked-bar.js

@@ -1,4 +1,4 @@
-import { slugify, calculatePercentages, getSeriesNames, escapeHtml } from '../utils.js';
+import { slugify, calculatePercentages, getLabelKey, getSeriesNames, escapeHtml } from '../utils.js';
 
 /**
  * Render a stacked bar chart (horizontal)
@@ -18,7 +18,8 @@ export function renderStackedBar(config) {
     return `<!-- Stacked bar chart: no data provided -->`;
   }
 
-  // Get actual data keys from the first row (excluding 'label')
+  // Get label key (first column) and series keys (remaining columns)
+  const labelKey = getLabelKey(data);
   const seriesKeys = getSeriesNames(data);
   // Use legend for display labels, fall back to data keys
   const legendLabels = legend ?? seriesKeys;
@@ -49,7 +50,7 @@ export function renderStackedBar(config) {
   html += `<div class="chart-bars">`;
 
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
     const values = seriesKeys.map(key => {
       const val = row[key];
       return typeof val === 'number' ? val : parseFloat(val) || 0;

package/src/renderers/stacked-column.js

@@ -1,4 +1,4 @@
-import { slugify, getSeriesNames, escapeHtml } from '../utils.js';
+import { slugify, getLabelKey, getSeriesNames, escapeHtml } from '../utils.js';
 
 /**
  * Render a stacked column chart (vertical)
@@ -19,7 +19,8 @@ export function renderStackedColumn(config) {
     return `<!-- Stacked column chart: no data provided -->`;
   }
 
-  // Get actual data keys from the first row (excluding 'label')
+  // Get label key (first column) and series keys (remaining columns)
+  const labelKey = getLabelKey(data);
   const seriesKeys = getSeriesNames(data);
   // Use legend for display labels, fall back to data keys
   const legendLabels = legend ?? seriesKeys;
@@ -90,7 +91,7 @@ export function renderStackedColumn(config) {
   html += `<div class="chart-columns"${columnsStyle}>`;
 
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
     html += `<div class="column-track" title="${escapeHtml(label)}">`;
 
     if (hasNegativeY) {
@@ -173,7 +174,7 @@ export function renderStackedColumn(config) {
   // X-axis labels
   html += `<div class="column-labels">`;
   data.forEach(row => {
-    const label = row.label ?? '';
+    const label = row[labelKey] ?? '';
     html += `<span class="column-label">${escapeHtml(label)}</span>`;
   });
   html += `</div>`;

package/src/utils.js

@@ -25,13 +25,33 @@ export function calculatePercentages(values, max) {
 }
 
 /**
- * Extract series names from CSV data (all columns except 'label')
+ * Get the label key (first column name) from CSV data
+ * @param {Object[]} data - Array of data objects
+ * @returns {string|undefined} - The first column name, or undefined if no data
+ */
+export function getLabelKey(data) {
+  if (!data || data.length === 0) return undefined;
+  return Object.keys(data[0])[0];
+}
+
+/**
+ * Get the value key (second column name) from CSV data
+ * @param {Object[]} data - Array of data objects
+ * @returns {string|undefined} - The second column name, or undefined if no data
+ */
+export function getValueKey(data) {
+  if (!data || data.length === 0) return undefined;
+  return Object.keys(data[0])[1];
+}
+
+/**
+ * Extract series names from CSV data (all columns except the first)
  * @param {Object[]} data - Array of data objects
  * @returns {string[]} - Array of series names
  */
 export function getSeriesNames(data) {
   if (!data || data.length === 0) return [];
-  return Object.keys(data[0]).filter(key => key !== 'label');
+  return Object.keys(data[0]).slice(1);
 }
 
 /**