@leavepulse/ui 0.28.2 → 0.28.3

package/dist/chunks/{LpChart-tNXs1ttr.js → LpChart-UiU4RhXP.js}

@@ -379,6 +379,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { deep: true }
     );
     const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`;
+    const gradientId = (name, index) => `${clipId}-g-${index}-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "root",
@@ -435,9 +436,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onContextmenu: onContextMenu
               }, [
                 createElementVNode("defs", null, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s) => {
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s, i) => {
                     return openBlock(), createElementBlock("linearGradient", {
-                      id: `${clipId}-g-${s.name}`,
+                      id: gradientId(s.name, i),
                       key: s.name,
                       x1: "0",
                       y1: "0",
@@ -543,11 +544,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       opacity: active.value < 0 || active.value === b.index ? 1 : 0.45
                     }, null, 8, _hoisted_25);
                   }), 128)),
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s) => {
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s, i) => {
                     return withDirectives((openBlock(), createElementBlock("path", {
                       key: `f-${s.name}`,
                       d: s.fill,
-                      fill: `url(#${clipId}-g-${s.name})`
+                      fill: `url(#${gradientId(s.name, i)})`
                     }, null, 8, _hoisted_26)), [
                       [vShow, __props.type === "area"]
                     ]);

package/dist/components/LpChart.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpChart-tNXs1ttr.js";
+import { _ as _sfc_main } from "../chunks/LpChart-UiU4RhXP.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -11,7 +11,7 @@ import { _ as _9 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
 import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.js";
 import { _ as _11 } from "./chunks/LpCalendar-B7ZL0ty3.js";
 import { _ as _12 } from "./chunks/LpCard-gu11ZmSt.js";
-import { _ as _13 } from "./chunks/LpChart-tNXs1ttr.js";
+import { _ as _13 } from "./chunks/LpChart-UiU4RhXP.js";
 import { CHART_PALETTE, axisTicks, formatTick, niceScale, resolveSlices } from "./components/chart.js";
 import { _ as _14 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-rS_6mO3D.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.28.2",
+  "version": "0.28.3",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpChart.vue

@@ -553,6 +553,25 @@ watch(
 )
 
 const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
+
+/*
+ * The gradient id for a series, with the series NAME reduced to id-safe
+ * characters.
+ *
+ * A name is a label — "used %", "in eth0", "read sda" — and putting it verbatim
+ * into an id produced `url(#lp-chart-x-g-used %)`, which is not a valid
+ * reference: the browser fails to resolve it and falls back to painting the
+ * shape black. The gradient was there, correct, and simply never reached, so an
+ * area chart of any series whose name held a space or a percent sign rendered
+ * as a solid black block under its line — while "cpu" and "memory" on the same
+ * page kept their colour, which is what made it look like a data problem rather
+ * than an escaping one.
+ *
+ * Index-suffixed so two names that differ only in punctuation ("in eth0" and
+ * "in-eth0") cannot collapse onto one id and share a colour.
+ */
+const gradientId = (name: string, index: number) =>
+  `${clipId}-g-${index}-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}`
 </script>
 
 <template>
@@ -618,8 +637,8 @@ const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
         >
           <defs>
             <linearGradient
-              v-for="s in lines"
-              :id="`${clipId}-g-${s.name}`"
+              v-for="(s, i) in lines"
+              :id="gradientId(s.name, i)"
               :key="s.name"
               x1="0"
               y1="0"
@@ -728,11 +747,11 @@ const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
 
             <!-- area fills -->
             <path
-              v-for="s in lines"
+              v-for="(s, i) in lines"
               v-show="type === 'area'"
               :key="`f-${s.name}`"
               :d="s.fill"
-              :fill="`url(#${clipId}-g-${s.name})`"
+              :fill="`url(#${gradientId(s.name, i)})`"
             />
 
             <!-- lines -->