eleventy-plugin-uncharted 0.1.0 → 0.1.1

package/README.md

@@ -5,14 +5,14 @@ A CSS-based charting plugin for Eleventy. Renders charts as pure HTML/CSS with n
 ## Installation
 
 ```bash
-npm install uncharted
+npm install eleventy-plugin-uncharted
 ```
 
 ## Setup
 
 ```javascript
 // eleventy.config.js
-import uncharted from 'uncharted';
+import uncharted from 'eleventy-plugin-uncharted';
 
 export default function(eleventyConfig) {
   eleventyConfig.addPlugin(uncharted);
@@ -40,13 +40,13 @@ If you set `injectCss: false`, you'll need to manually include the stylesheet in
 
 ## Chart Types
 
-| Type | Description |
-|------|-------------|
-| `donut` | Pie/donut chart using conic-gradient |
-| `stacked-bar` | Horizontal bars with stacked segments |
-| `stacked-column` | Vertical columns with stacked segments |
-| `dot` | Categorical dot chart with Y-axis positioning |
-| `scatter` | XY scatter plot with continuous axes |
+| Type | Description | Negative Values |
+|------|-------------|-----------------|
+| `donut` | Pie/donut chart using conic-gradient | No |
+| `stacked-bar` | Horizontal bars with stacked segments | No |
+| `stacked-column` | Vertical columns with stacked segments | Yes |
+| `dot` | Categorical dot chart with Y-axis positioning | Yes |
+| `scatter` | XY scatter plot with continuous axes | Yes (X and Y) |
 
 ## Usage
 
@@ -128,6 +128,22 @@ Point B,25,78,alpha
 Point C,15,32,beta
 ```
 
+## Negative Values
+
+Stacked column, dot, and scatter charts support negative values. When negative values are present, a zero axis line appears automatically and values are positioned relative to it.
+
+For stacked columns, positive values stack upward from zero and negative values stack downward:
+
+```csv
+label,Cost,Profit
+Q1,20,10
+Q2,25,-10
+Q3,15,25
+Q4,30,-10
+```
+
+The chart automatically calculates the range from the maximum positive stack to the minimum negative stack, ensuring proper scaling.
+
 ## Configuration Options
 
 | Option | Type | Description |
@@ -137,9 +153,12 @@ Point C,15,32,beta
 | `subtitle` | string | Subtitle below title |
 | `file` | string | Path to CSV file (relative to dataDir) |
 | `data` | array | Inline data array |
-| `max` | number | Maximum value for scaling |
+| `max` | number | Maximum Y value for scaling |
+| `min` | number | Minimum Y value for scaling (column, dot) |
 | `maxX` | number | Maximum X value (scatter only) |
 | `maxY` | number | Maximum Y value (scatter only) |
+| `minX` | number | Minimum X value (scatter only) |
+| `minY` | number | Minimum Y value (scatter only) |
 | `legend` | array | Custom legend labels |
 | `center` | object | Donut center content (`value`, `label`) |
 | `animate` | boolean | Override global animation setting |

package/package.json

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

package/src/renderers/dot.js

@@ -8,12 +8,13 @@ import { slugify, escapeHtml, getSeriesNames } from '../utils.js';
  * @param {string} [config.subtitle] - Chart subtitle
  * @param {Object[]} config.data - Chart data with label column and value columns
  * @param {number} [config.max] - Maximum Y value (defaults to max in data)
+ * @param {number} [config.min] - Minimum Y value (defaults to min in data or 0)
  * @param {string[]} [config.legend] - Legend labels (defaults to series names)
  * @param {boolean} [config.animate] - Enable animations
  * @returns {string} - HTML string
  */
 export function renderDot(config) {
-  const { title, subtitle, data, max, legend, animate } = config;
+  const { title, subtitle, data, max, min, legend, animate } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Dot chart: no data provided -->`;
@@ -34,7 +35,7 @@ export function renderDot(config) {
   const dataMax = Math.max(...allValues);
   const dataMin = Math.min(...allValues);
   const maxValue = max ?? dataMax;
-  const minValue = dataMin < 0 ? dataMin : 0;
+  const minValue = min ?? (dataMin < 0 ? dataMin : 0);
   const range = maxValue - minValue;
   const hasNegativeY = minValue < 0;
 

package/src/renderers/scatter.js

@@ -8,12 +8,14 @@ import { slugify, escapeHtml } from '../utils.js';
  * @param {Object[]} config.data - Chart data (with label, x, y, and optionally series)
  * @param {number} [config.maxX] - Maximum X value (defaults to max in data)
  * @param {number} [config.maxY] - Maximum Y value (defaults to max in data)
+ * @param {number} [config.minX] - Minimum X value (defaults to min in data or 0)
+ * @param {number} [config.minY] - Minimum Y value (defaults to min in data or 0)
  * @param {string[]} [config.legend] - Legend labels for series
  * @param {boolean} [config.animate] - Enable animations
  * @returns {string} - HTML string
  */
 export function renderScatter(config) {
-  const { title, subtitle, data, maxX, maxY, legend, animate } = config;
+  const { title, subtitle, data, maxX, maxY, minX, minY, legend, animate } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Scatter chart: no data provided -->`;
@@ -51,8 +53,8 @@ export function renderScatter(config) {
 
   const calcMaxX = maxX ?? dataMaxX;
   const calcMaxY = maxY ?? dataMaxY;
-  const calcMinX = dataMinX < 0 ? dataMinX : 0;
-  const calcMinY = dataMinY < 0 ? dataMinY : 0;
+  const calcMinX = minX ?? (dataMinX < 0 ? dataMinX : 0);
+  const calcMinY = minY ?? (dataMinY < 0 ? dataMinY : 0);
   const rangeX = calcMaxX - calcMinX;
   const rangeY = calcMaxY - calcMinY;
 

package/src/renderers/stacked-column.js

@@ -6,13 +6,14 @@ import { slugify, getSeriesNames, escapeHtml } from '../utils.js';
  * @param {string} config.title - Chart title
  * @param {string} [config.subtitle] - Chart subtitle
  * @param {Object[]} config.data - Chart data
- * @param {number} [config.max] - Maximum value for percentage calculation
+ * @param {number} [config.max] - Maximum value for Y-axis scaling
+ * @param {number} [config.min] - Minimum value for Y-axis scaling (for negative values)
  * @param {string[]} [config.legend] - Legend labels (defaults to series names)
  * @param {boolean} [config.animate] - Enable animations
  * @returns {string} - HTML string
  */
 export function renderStackedColumn(config) {
-  const { title, subtitle, data, max, legend, animate } = config;
+  const { title, subtitle, data, max, min, legend, animate } = config;
 
   if (!data || data.length === 0) {
     return `<!-- Stacked column chart: no data provided -->`;
@@ -45,9 +46,9 @@ export function renderStackedColumn(config) {
     minNegativeStack = Math.min(minNegativeStack, negativeSum);
   });
 
-  const hasNegativeY = minNegativeStack < 0;
+  const hasNegativeY = minNegativeStack < 0 || min < 0;
   const maxValue = max ?? maxPositiveStack;
-  const minValue = minNegativeStack;
+  const minValue = min ?? minNegativeStack;
   const range = maxValue - minValue;
   const zeroPct = hasNegativeY ? ((0 - minValue) / range) * 100 : 0;