eleventy-plugin-uncharted 0.8.0 → 0.9.0

package/css/uncharted.css

@@ -44,9 +44,9 @@
   --chart-column-width: 1rem;
   --chart-donut-size: 20rem;
   --chart-donut-hole: 30%;
-  --chart-dot-size: 0.75rem;
-  --chart-dot-size-min: 0.375rem;
-  --chart-dot-size-max: 1.5rem;
+  --chart-dot-size: 0.5rem;
+  --chart-bubble-size-min: 0.25rem;
+  --chart-bubble-size-max: 2rem;
   --chart-height: 12rem;
 }
 
@@ -145,10 +145,11 @@
     margin-left: 0.125rem;
   }
 
-  /* Dot/scatter/line charts use circular legend markers */
+  /* Dot/scatter/line/timeseries charts use circular legend markers */
   .chart-dot &::before,
   .chart-line &::before,
-  .chart-scatter &::before {
+  .chart-scatter &::before,
+  .chart-timeseries &::before {
     border-radius: 50%;
   }
 }
@@ -557,12 +558,12 @@
 }
 
 :is(.chart-dot, .chart-line) .dot-chart {
+  background: var(--chart-bg);
+  border-radius: 3px;
   grid-row: 1;
   position: relative;
   min-height: var(--chart-height);
   box-sizing: border-box;
-  background: var(--chart-bg);
-  border-radius: 3px;
 }
 
 /* Inner field sized to content area - dots position relative to this */
@@ -582,9 +583,17 @@
   min-width: 1.5rem;
 }
 
-:is(.chart-dot, .chart-line) .dot {
+.chart-dot .dot {
   width: var(--chart-dot-size);
   height: var(--chart-dot-size);
+}
+
+.chart-line .dot {
+  width: var(--chart-dot-size);
+  height: var(--chart-dot-size);
+}
+
+:is(.chart-dot, .chart-line) .dot {
   border-radius: 50%;
   position: absolute;
   left: 50%;
@@ -600,31 +609,23 @@
 }
 
 /* Dots with icons */
-:is(.chart-dot, .chart-line) .dot.has-icon {
+:is(.chart-dot, .chart-line, .chart-timeseries) .dot.has-icon {
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-:is(.chart-dot, .chart-line) .dot.has-icon i {
+.chart-dot .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-line, .chart-timeseries) .dot.has-icon i {
+  color: var(--color);
+  font-size: var(--chart-dot-size);
+  line-height: 1;
 }
 
 :is(.chart-dot, .chart-line) .dot-labels {
@@ -655,15 +656,198 @@
   text-overflow: clip;
 }
 
+:is(.chart-dot, .chart-line) .dot-labels .axis-title {
+  flex-basis: 100%;
+  text-align: center;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  white-space: nowrap;
+  margin-top: 0.5rem;
+}
+
+/* ==========================================================================
+   Bubble Chart (Categorical X, Continuous Y, Variable Dot Sizes)
+   ========================================================================== */
+
+/* Bubble chart uses same layout as dot/line charts */
+.chart-bubble .chart-body {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+}
+
+.chart-bubble .chart-y-axis {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.chart-bubble .chart-scroll {
+  grid-row: 1 / -1;
+  grid-column: 2;
+  display: grid;
+  grid-template-rows: subgrid;
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+.chart-bubble .dot-chart {
+  background: var(--chart-bg);
+  border-radius: 3px;
+  grid-row: 1;
+  position: relative;
+  min-height: var(--chart-height);
+  box-sizing: border-box;
+}
+
+.chart-bubble .dot-field {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  bottom: 0;
+  left: 0.5rem;
+  display: flex;
+  align-items: stretch;
+}
+
+.chart-bubble .dot-col {
+  flex: 1;
+  position: relative;
+  min-width: 1.5rem;
+}
+
+.chart-bubble .dot {
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  bottom: var(--value);
+  transform: translate(-50%, 50%);
+  cursor: default;
+  background-color: var(--color);
+}
+
+/* Variable-sized dots for bubble charts */
+.chart-bubble .dot[style*="--size-scale"] {
+  --computed-size: calc(
+    var(--chart-bubble-size-min) +
+    var(--size-scale) * (var(--chart-bubble-size-max) - var(--chart-bubble-size-min))
+  );
+  width: var(--computed-size);
+  height: var(--computed-size);
+}
+
+/* Fallback size when no size-scale */
+.chart-bubble .dot:not([style*="--size-scale"]) {
+  width: var(--chart-dot-size);
+  height: var(--chart-dot-size);
+}
+
+.chart-bubble .dot[title]:hover {
+  transform: translate(-50%, 50%) scale(1.3);
+  z-index: 1;
+}
+
+/* Bubble dots with icons */
+.chart-bubble .dot.has-icon {
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart-bubble .dot.has-icon[style*="--size-scale"] i {
+  color: var(--color);
+  font-size: var(--computed-size);
+  line-height: 1;
+}
+
+.chart-bubble .dot-labels {
+  grid-row: 2;
+  display: flex;
+  gap: 6px;
+  padding: 0 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.chart-bubble .dot-label {
+  flex: 1;
+  min-width: 1.5rem;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  text-align: center;
+}
+
+/* Rotated bubble labels (opt-in via rotateLabels config) */
+.chart-bubble.rotate-labels .dot-labels {
+  padding-top: 0.5rem;
+  align-items: flex-start;
+}
+
+.chart-bubble.rotate-labels .dot-label {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  display: flex;
+  align-items: center;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.chart-bubble .dot-labels .axis-title {
+  flex-basis: 100%;
+  text-align: center;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  white-space: nowrap;
+  margin-top: 0.5rem;
+}
+
+/* Bubble chart legend uses circular markers */
+.chart-bubble .chart-legend-item::before {
+  border-radius: 50%;
+}
+
+/* Bubble chart negative Y support */
+.chart-bubble.has-negative-y .dot-field {
+  bottom: 0.5rem;
+}
+
+.chart-bubble.has-negative-y .chart-y-axis {
+  padding-bottom: 0.5rem;
+}
+
+.chart-bubble.has-negative-y .dot-field::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: var(--zero-position, 0);
+  height: 1px;
+  background-color: currentColor;
+  opacity: 0.4;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.chart-bubble.has-negative-y .chart-y-axis {
+  position: relative;
+}
+
+.chart-bubble.has-negative-y .chart-y-axis .axis-label:nth-child(2) {
+  position: absolute;
+  right: 0;
+  transform: translateY(50%);
+  bottom: calc(0.5rem + var(--zero-position, 50%) * 11 / 12);
+}
+
 /* ==========================================================================
    Line Chart (CSS segments connecting dots)
    ========================================================================== */
 
-.chart-line .dot-field {
+/* Shared line segment styles for line and timeseries charts */
+:is(.chart-line, .chart-timeseries) .dot-field {
   container-type: size;
 }
 
-.chart-line .chart-line-segment {
+:is(.chart-line, .chart-timeseries) .chart-line-segment {
   position: absolute;
   left: calc(var(--x1) * 1%);
   bottom: calc(var(--y1) * 1%);
@@ -677,9 +861,18 @@
   pointer-events: none;
 }
 
-/* Hide dots when dots: false */
-.chart-line.no-dots .dot {
-  display: none;
+/* Icon clipping: clip line ends around icons */
+:is(.chart-line, .chart-timeseries):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%
+  );
 }
 
 /* ==========================================================================
@@ -760,8 +953,8 @@
 /* Variable-sized dots (size column) */
 .chart-scatter .dot[style*="--size-scale"] {
   --computed-size: calc(
-    var(--chart-dot-size-min) +
-    var(--size-scale) * (var(--chart-dot-size-max) - var(--chart-dot-size-min))
+    var(--chart-bubble-size-min) +
+    var(--size-scale) * (var(--chart-bubble-size-max) - var(--chart-bubble-size-min))
   );
   width: var(--computed-size);
   height: var(--computed-size);
@@ -772,6 +965,126 @@
   font-size: var(--computed-size);
 }
 
+/* ==========================================================================
+   Time-Series Chart (Continuous X axis with proportional positioning)
+   ========================================================================== */
+
+.chart-timeseries .chart-body {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+  overflow: visible;
+}
+
+.chart-timeseries .chart-y-axis {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.chart-timeseries .timeseries-container,
+.chart-timeseries .dot-area,
+.chart-timeseries .dot-field {
+  overflow: visible;
+}
+
+.chart-timeseries .chart-scroll {
+  grid-row: 1 / -1;
+  grid-column: 2;
+  display: grid;
+  grid-template-rows: subgrid;
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+.chart-timeseries .timeseries-container {
+  grid-row: 1 / -1;
+  grid-column: 1;
+  display: grid;
+  grid-template-rows: subgrid;
+  /* When dots shown, minimum width ensures scrollability */
+  min-width: max(100%, calc(var(--point-count, 0) * 0.75rem));
+}
+
+.chart-timeseries .dot-area {
+  grid-row: 1;
+  position: relative;
+  min-height: var(--chart-height);
+  box-sizing: border-box;
+  background: var(--chart-bg);
+  border-radius: 3px;
+}
+
+.chart-timeseries .chart-x-axis {
+  grid-row: 2;
+}
+
+/* Inner field sized to content area - dots position relative to this */
+.chart-timeseries .dot-field {
+  position: absolute;
+  inset: 0.5rem 1rem 0;
+}
+
+/* Dots positioned by --x and --value (like scatter) */
+.chart-timeseries .dot {
+  position: absolute;
+  width: var(--chart-dot-size);
+  height: var(--chart-dot-size);
+  border-radius: 50%;
+  left: var(--x);
+  bottom: var(--value);
+  transform: translate(-50%, 50%);
+  cursor: default;
+  background-color: var(--color);
+}
+
+.chart-timeseries .dot[title]:hover {
+  transform: translate(-50%, 50%) scale(1.3);
+  z-index: 1;
+}
+
+/* Hide dots visually but keep them hoverable for tooltips */
+:is(.chart-line, .chart-timeseries).no-dots .dot {
+  background: transparent;
+  min-width: var(--chart-dot-size);
+  min-height: var(--chart-dot-size);
+}
+
+:is(.chart-line, .chart-timeseries).no-dots .dot:hover {
+  background-color: var(--color);
+  transform: translate(-50%, 50%) scale(1.3);
+  z-index: 1;
+}
+
+/* X-axis with positioned labels */
+.chart-timeseries .timeseries-x-axis {
+  position: relative;
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  min-height: 2.5em;
+}
+
+.chart-timeseries .timeseries-x-axis .axis-label {
+  position: absolute;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  font-variant-numeric: tabular-nums;
+  /* Position labels to align with dot-field (inset 1rem from dot-area) */
+  left: calc(1rem + var(--x) * (100% - 2rem));
+  transform: translateX(-50%);
+  text-align: center;
+  line-height: 1.2;
+}
+
+
+.chart-timeseries .timeseries-x-axis .axis-title {
+  display: block;
+  text-align: center;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  white-space: nowrap;
+  margin-top: 1.25em;
+}
+
 /* Size legend */
 .chart-size-legend {
   display: flex;
@@ -799,13 +1112,13 @@
 }
 
 .size-dot-min {
-  width: var(--chart-dot-size-min);
-  height: var(--chart-dot-size-min);
+  width: var(--chart-bubble-size-min);
+  height: var(--chart-bubble-size-min);
 }
 
 .size-dot-max {
-  width: var(--chart-dot-size-max);
-  height: var(--chart-dot-size-max);
+  width: var(--chart-bubble-size-max);
+  height: var(--chart-bubble-size-max);
 }
 
 .size-value {
@@ -1039,15 +1352,27 @@
   }
 }
 
-/* Line chart: clip-path sweep reveals lines and dots left-to-right */
-.chart-animate.chart-line .dot-field {
-  clip-path: inset(calc(var(--chart-dot-size) * -0.5) 100% calc(var(--chart-dot-size) * -0.5) 0);
-  animation: line-reveal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+/* 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;
+}
+
+/* Timeseries: 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-timeseries .dot-field {
+  clip-path: inset(-1rem 100% -1rem 0);
+  animation: timeseries-reveal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
 }
 
-@keyframes line-reveal {
-  from { clip-path: inset(calc(var(--chart-dot-size) * -0.5) 100% calc(var(--chart-dot-size) * -0.5) 0); }
-  to   { clip-path: inset(calc(var(--chart-dot-size) * -0.5) 0 calc(var(--chart-dot-size) * -0.5) 0); }
+@keyframes timeseries-reveal {
+  from { clip-path: inset(-1rem 100% -1rem 0); }
+  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 */
@@ -1093,6 +1418,44 @@
   }
 }
 
+/* Bubble chart: dots rise and scale from bottom */
+.chart-animate.chart-bubble .dot {
+  animation: bubble-rise 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--dot-index, 0) * var(--delay-step, 0.08s));
+  opacity: 0;
+}
+
+@keyframes bubble-rise {
+  from {
+    bottom: 0;
+    opacity: 0;
+    transform: translate(-50%, 50%) scale(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 50%) scale(1);
+  }
+}
+
+/* Bubble chart with negatives: dots move from zero axis */
+.chart-animate.chart-bubble.has-negative-y .dot {
+  animation: bubble-from-zero 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--dot-index, 0) * var(--delay-step, 0.08s));
+  opacity: 0;
+}
+
+@keyframes bubble-from-zero {
+  from {
+    bottom: var(--zero-position, 0%);
+    opacity: 0;
+    transform: translate(-50%, 50%) scale(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 50%) scale(1);
+  }
+}
+
 /* Sankey chart: SVG flows reveal from left to right */
 .chart-animate.chart-sankey .chart-sankey-flow {
   clip-path: inset(0 100% 0 0);
@@ -1111,28 +1474,29 @@
   .chart-animate .column-track,
   .chart-animate.chart-dot .dot,
   .chart-animate.chart-scatter .dot,
+  .chart-animate.chart-bubble .dot,
   .chart-animate .donut-ring::before,
   .chart-animate.chart-sankey .chart-sankey-flow,
-  .chart-animate.chart-line .dot-field {
+  .chart-animate.chart-line .chart-scroll,
+  .chart-animate.chart-timeseries .dot-field {
     animation: none;
   }
 
   .chart-animate.chart-dot .dot,
-  .chart-animate.chart-scatter .dot {
+  .chart-animate.chart-scatter .dot,
+  .chart-animate.chart-bubble .dot {
     opacity: 1;
     transform: translate(-50%, 50%);
   }
 
-  .chart-animate.chart-line .dot-field {
+  .chart-animate.chart-line .chart-scroll,
+  .chart-animate.has-negative-y .column-track,
+  .chart-animate.chart-sankey .chart-sankey-flow {
     clip-path: none;
   }
 
-  .chart-animate.has-negative-y .column-track {
-    clip-path: none;
-  }
-
-  .chart-animate.chart-sankey .chart-sankey-flow {
-    clip-path: none;
+  .chart-animate.chart-timeseries .dot-field {
+    clip-path: inset(-1rem);
   }
 }
 
@@ -1202,7 +1566,8 @@
 
 /* Expand dot-field insets for negative values */
 :is(.chart-dot, .chart-line).has-negative-y .dot-field,
-.chart-scatter.has-negative-y .dot-field {
+.chart-scatter.has-negative-y .dot-field,
+.chart-timeseries.has-negative-y .dot-field {
   bottom: 0.5rem;
 }
 
@@ -1212,12 +1577,13 @@
 
 /* Y-axis padding adjustment for negative values */
 :is(.chart-dot, .chart-line).has-negative-y .chart-y-axis,
-.chart-scatter.has-negative-y .chart-y-axis {
+.chart-scatter.has-negative-y .chart-y-axis,
+.chart-timeseries.has-negative-y .chart-y-axis {
   padding-bottom: 0.5rem;
 }
 
 /* Zero axis lines - use dot-field for proper alignment */
-:is(.chart-dot, .chart-line).has-negative-y .dot-field::after {
+:is(.chart-dot, .chart-line, .chart-timeseries).has-negative-y .dot-field::after {
   content: '';
   position: absolute;
   left: 0;
@@ -1262,20 +1628,20 @@
    ========================================================================== */
 
 /* Y-axis needs relative positioning for absolute label */
-:is(.chart-dot, .chart-line).has-negative-y .chart-y-axis,
+:is(.chart-dot, .chart-line, .chart-timeseries).has-negative-y .chart-y-axis,
 .chart-scatter.has-negative-y .chart-y-axis {
   position: relative;
 }
 
 /* Position middle Y-axis label at zero */
-:is(.chart-dot, .chart-line).has-negative-y .chart-y-axis .axis-label:nth-child(2),
+:is(.chart-dot, .chart-line, .chart-timeseries).has-negative-y .chart-y-axis .axis-label:nth-child(2),
 .chart-scatter.has-negative-y .chart-y-axis .axis-label:nth-child(2) {
   position: absolute;
   right: 0;
   transform: translateY(50%);
 }
 
-:is(.chart-dot, .chart-line).has-negative-y .chart-y-axis .axis-label:nth-child(2) {
+:is(.chart-dot, .chart-line, .chart-timeseries).has-negative-y .chart-y-axis .axis-label:nth-child(2) {
   bottom: calc(0.5rem + var(--zero-position, 50%) * 11 / 12);
 }
 

package/package.json

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