eleventy-plugin-uncharted 0.7.3 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/css/uncharted.css +19 -21
  2. package/package.json +1 -1
  3. package/src/renderers/donut.js +4 -4
  4. package/src/renderers/dot.js +3 -3
  5. package/src/renderers/sankey.js +4 -4
  6. package/src/renderers/scatter.js +3 -3
  7. package/src/renderers/stacked-bar.js +3 -3
  8. package/src/renderers/stacked-column.js +3 -3
package/css/uncharted.css CHANGED
@@ -102,7 +102,6 @@
102
102
  flex-wrap: wrap;
103
103
  column-gap: 1rem;
104
104
  row-gap: 0.375rem;
105
- list-style: none;
106
105
  padding: 0;
107
106
  margin: 0;
108
107
  font-size: 0.875rem;
@@ -126,33 +125,32 @@
126
125
  margin-bottom: 1rem;
127
126
  }
128
127
 
129
- .chart-legend > .chart-legend-item {
128
+ .chart-legend-item {
130
129
  display: flex;
131
130
  align-items: baseline;
132
131
  gap: 0.5rem;
133
132
  background: transparent;
134
- margin: 0;
135
- }
136
133
 
137
- .chart-legend-item::before {
138
- content: '';
139
- width: 1cap;
140
- height: 1cap;
141
- border-radius: 2px;
142
- background-color: var(--color);
143
- flex-shrink: 0;
144
- }
134
+ &::before {
135
+ content: '';
136
+ width: 1cap;
137
+ height: 1cap;
138
+ border-radius: 2px;
139
+ background-color: var(--color);
140
+ flex-shrink: 0;
141
+ }
145
142
 
146
- /* Dot/scatter/line charts use circular legend markers */
147
- .chart-dot .chart-legend-item::before,
148
- .chart-line .chart-legend-item::before,
149
- .chart-scatter .chart-legend-item::before {
150
- border-radius: 50%;
151
- }
143
+ .legend-value {
144
+ opacity: 0.7;
145
+ margin-left: 0.125rem;
146
+ }
152
147
 
153
- .chart-legend-item .legend-value {
154
- opacity: 0.7;
155
- margin-left: 0.125rem;
148
+ /* Dot/scatter/line charts use circular legend markers */
149
+ .chart-dot &::before,
150
+ .chart-line &::before,
151
+ .chart-scatter &::before {
152
+ border-radius: 50%;
153
+ }
156
154
  }
157
155
 
158
156
  .chart-legend-title {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eleventy-plugin-uncharted",
3
- "version": "0.7.3",
3
+ "version": "0.7.4",
4
4
  "description": "An Eleventy plugin that renders CSS-based charts from CSV data using shortcodes",
5
5
  "main": "eleventy.config.js",
6
6
  "type": "module",
package/src/renderers/donut.js CHANGED
@@ -118,7 +118,7 @@ export function renderDonut(config) {
118
118
  // Show if legend !== false (donut always shows legend by default)
119
119
  const showLegend = config.legend !== false;
120
120
  if (showLegend) {
121
- html += `<ul class="chart-legend">`;
121
+ html += `<div class="chart-legend">`;
122
122
  segments.forEach((segment, i) => {
123
123
  const label = getSegmentLabel(segment, i);
124
124
  let displayValue;
@@ -129,12 +129,12 @@ export function renderDonut(config) {
129
129
  }
130
130
  const colorClass = `chart-color-${i + 1}`;
131
131
  const seriesClass = `chart-series-${slugify(segment.label)}`;
132
- html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">`;
132
+ html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">`;
133
133
  html += `<span class="legend-label">${escapeHtml(label)}</span>`;
134
134
  html += `<span class="legend-value">${escapeHtml(String(displayValue))}</span>`;
135
- html += `</li>`;
135
+ html += `</span>`;
136
136
  });
137
- html += `</ul>`;
137
+ html += `</div>`;
138
138
  }
139
139
 
140
140
  html += renderDownloadLink(downloadDataUrl, downloadData);
package/src/renderers/dot.js CHANGED
@@ -164,14 +164,14 @@ export function renderDot(config) {
164
164
  if (legendTitle) {
165
165
  html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
166
166
  }
167
- html += `<ul class="chart-legend">`;
167
+ html += `<div class="chart-legend">`;
168
168
  seriesKeys.forEach((key, i) => {
169
169
  const label = getSeriesLabel(key, i);
170
170
  const colorClass = `chart-color-${i + 1}`;
171
171
  const seriesClass = `chart-series-${slugify(key)}`;
172
- html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</li>`;
172
+ html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
173
173
  });
174
- html += `</ul>`;
174
+ html += `</div>`;
175
175
  }
176
176
 
177
177
  html += renderDownloadLink(downloadDataUrl, downloadData);
package/src/renderers/sankey.js CHANGED
@@ -512,18 +512,18 @@ export function renderSankey(config) {
512
512
 
513
513
  // Legend (optional)
514
514
  if (legend) {
515
- html += `<ul class="chart-legend">`;
515
+ html += `<div class="chart-legend">`;
516
516
  nodes.forEach((node, i) => {
517
517
  const colorClass = `chart-color-${nodeColors.get(node)}`;
518
518
  const seriesClass = `chart-series-${slugify(node)}`;
519
519
  const throughput = nodeThroughput.get(node);
520
- html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(node)}`;
520
+ html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(node)}`;
521
521
  if (valueFormat) {
522
522
  html += ` <span class="legend-value">${formatNumber(throughput, valueFormat) || throughput}</span>`;
523
523
  }
524
- html += `</li>`;
524
+ html += `</span>`;
525
525
  });
526
- html += `</ul>`;
526
+ html += `</div>`;
527
527
  }
528
528
 
529
529
  html += renderDownloadLink(downloadDataUrl, downloadData);
package/src/renderers/scatter.js CHANGED
@@ -201,14 +201,14 @@ export function renderScatter(config) {
201
201
  if (legendTitle) {
202
202
  html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
203
203
  }
204
- html += `<ul class="chart-legend">`;
204
+ html += `<div class="chart-legend">`;
205
205
  seriesList.forEach((series, i) => {
206
206
  const label = legendLabels[i] ?? series;
207
207
  const colorClass = `chart-color-${i + 1}`;
208
208
  const seriesClass = `chart-series-${slugify(series)}`;
209
- html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</li>`;
209
+ html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
210
210
  });
211
- html += `</ul>`;
211
+ html += `</div>`;
212
212
  }
213
213
 
214
214
  // Size legend (when sizeTitle is specified and size column exists)
package/src/renderers/stacked-bar.js CHANGED
@@ -65,14 +65,14 @@ export function renderStackedBar(config) {
65
65
  if (legendTitle) {
66
66
  html += `<span class="chart-legend-title">${escapeHtml(legendTitle)}</span>`;
67
67
  }
68
- html += `<ul class="chart-legend">`;
68
+ html += `<div class="chart-legend">`;
69
69
  seriesKeys.forEach((key, i) => {
70
70
  const label = getSeriesLabel(key, i);
71
71
  const colorClass = `chart-color-${i + 1}`;
72
72
  const seriesClass = `chart-series-${slugify(key)}`;
73
- html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</li>`;
73
+ html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
74
74
  });
75
- html += `</ul>`;
75
+ html += `</div>`;
76
76
  }
77
77
 
78
78
  // Calculate delay step to cap total stagger at 1s
package/src/renderers/stacked-column.js CHANGED
@@ -199,14 +199,14 @@ export function renderStackedColumn(config) {
199
199
  // Legend (show if legend !== false and we have series keys)
200
200
  const showLegend = config.legend !== false && seriesKeys.length > 0;
201
201
  if (showLegend) {
202
- html += `<ul class="chart-legend">`;
202
+ html += `<div class="chart-legend">`;
203
203
  seriesKeys.forEach((key, i) => {
204
204
  const label = getSeriesLabel(key, i);
205
205
  const colorClass = `chart-color-${i + 1}`;
206
206
  const seriesClass = `chart-series-${slugify(key)}`;
207
- html += `<li class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</li>`;
207
+ html += `<span class="chart-legend-item ${colorClass} ${seriesClass}">${escapeHtml(label)}</span>`;
208
208
  });
209
- html += `</ul>`;
209
+ html += `</div>`;
210
210
  }
211
211
 
212
212
  html += renderDownloadLink(downloadDataUrl, downloadData);