@kiva/kv-components 8.27.0 → 8.28.0

package/dist/vue/KvPieChartV2.css

@@ -1 +1 @@
-.segment-circle[data-v-73c9f5f9]{transition:stroke-dashoffset .5s ease-in-out}.skeleton-ring[data-v-73c9f5f9]{opacity:1;transition:opacity .5s ease-in-out}.skeleton-ring--loading[data-v-73c9f5f9]{animation:skeleton-ring-pulse-73c9f5f9 1.4s ease-in-out infinite;transform-origin:center}.legend-dot[data-v-73c9f5f9]{transition:background-color .5s ease-in-out}@keyframes skeleton-ring-pulse-73c9f5f9{0%,to{opacity:.45}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.skeleton-ring--loading[data-v-73c9f5f9]{animation:none}}
+.segment-circle[data-v-9afd557d]{transition:stroke-dashoffset var(--segment-grow-duration, .5s) ease-in-out}.skeleton-ring[data-v-9afd557d]{opacity:1;transition:opacity .5s ease-in-out}.skeleton-ring--loading[data-v-9afd557d]{animation:skeleton-ring-pulse-9afd557d 1.4s ease-in-out infinite;transform-origin:center}.legend-dot[data-v-9afd557d]{transition:background-color .5s ease-in-out}@keyframes skeleton-ring-pulse-9afd557d{0%,to{opacity:.45}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.skeleton-ring--loading[data-v-9afd557d]{animation:none}}

package/dist/vue/KvPieChartV2.js

@@ -1,29 +1,30 @@
 import y from "./KvPieChartV22.js";
-import { resolveComponent as x, openBlock as l, createElementBlock as o, createElementVNode as r, normalizeClass as k, createCommentVNode as n, Fragment as d, renderList as c, normalizeStyle as s, toDisplayString as w, createBlock as _, withCtx as b } from "vue";
+import { resolveComponent as x, openBlock as l, createElementBlock as o, normalizeStyle as s, createElementVNode as r, normalizeClass as k, createCommentVNode as n, Fragment as d, renderList as c, toDisplayString as w, createBlock as _, withCtx as b } from "vue";
 import "./KvPieChartV2.css";
 import u from "../_virtual/_plugin-vue_export-helper.js";
-const v = {
-  class: "kv-pie-chart-v2 tw-flex tw-flex-col tw-items-center tw-gap-1",
-  "aria-label": "Pie chart"
-}, C = { class: "tw-px-2" }, D = {
+const v = { class: "tw-px-2" }, C = {
   viewBox: "0 0 262 262",
   fill: "none",
   class: "tw-w-full",
   role: "img",
   "aria-hidden": "true"
-}, S = ["cx", "cy", "r", "stroke", "stroke-width"], L = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], O = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], V = {
+}, D = ["cx", "cy", "r", "stroke", "stroke-width"], S = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], L = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], O = {
   key: 0,
   class: "tw-flex tw-flex-wrap tw-justify-center tw-gap-0.5 tw-w-full tw-pt-0.5"
-}, W = { class: "tw-flex tw-gap-0.5 tw-items-center tw-min-w-0 tw-overflow-hidden" }, B = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, p = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0" }, E = { class: "tw-grid tw-grid-cols-2 tw-grid-flow-row tw-gap-0.5" }, I = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0 tw-overflow-hidden" }, X = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, Y = {
+}, V = { class: "tw-flex tw-gap-0.5 tw-items-center tw-min-w-0 tw-overflow-hidden" }, W = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, B = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0" }, E = { class: "tw-grid tw-grid-cols-2 tw-grid-flow-row tw-gap-0.5" }, I = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0 tw-overflow-hidden" }, X = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, Y = {
   class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
   style: { "min-width": "2.8ch" }
 };
-function G(N, i, a, t, M, R) {
+function G(N, i, a, t, p, M) {
   var h, m;
-  const f = x("kv-lightbox");
-  return l(), o("figure", v, [
-    r("div", C, [
-      (l(), o("svg", D, [
+  const g = x("kv-lightbox");
+  return l(), o("figure", {
+    class: "kv-pie-chart-v2 tw-flex tw-flex-col tw-items-center tw-gap-1",
+    style: s({ "--segment-grow-duration": `${a.growDuration}ms` }),
+    "aria-label": "Pie chart"
+  }, [
+    r("div", v, [
+      (l(), o("svg", C, [
         a.loading || !t.hasData ? (l(), o("circle", {
           key: 0,
           cx: t.CX,
@@ -33,7 +34,7 @@ function G(N, i, a, t, M, R) {
           "stroke-width": a.strokeWidth,
           fill: "none",
           class: k(["skeleton-ring", { "skeleton-ring--loading": a.loading }])
-        }, null, 10, S)) : n("", !0),
+        }, null, 10, D)) : n("", !0),
         (l(!0), o(d, null, c(t.visibleSegments, (e) => (l(), o("circle", {
           key: e.label,
           cx: t.CX,
@@ -49,7 +50,7 @@ function G(N, i, a, t, M, R) {
             strokeDashoffset: e.isVisible ? 0 : e.dashLength,
             transitionDelay: `${e.delay}ms`
           })
-        }, null, 12, L))), 128)),
+        }, null, 12, S))), 128)),
         t.otherSegment ? (l(), o("circle", {
           key: 1,
           cx: t.CX,
@@ -65,15 +66,15 @@ function G(N, i, a, t, M, R) {
             strokeDashoffset: t.otherSegment.isVisible ? 0 : t.otherSegment.dashLength,
             transitionDelay: `${t.otherSegment.delay}ms`
           })
-        }, null, 12, O)) : n("", !0)
+        }, null, 12, L)) : n("", !0)
       ]))
     ]),
-    t.hasData && !a.loading ? (l(), o("div", V, [
-      (l(!0), o(d, null, c(t.visibleSegments, (e, g) => (l(), o("div", {
+    t.hasData && !a.loading ? (l(), o("div", O, [
+      (l(!0), o(d, null, c(t.visibleSegments, (e, f) => (l(), o("div", {
         key: e.label,
         class: "tw-bg-gray-100 tw-flex tw-gap-0.5 tw-items-center tw-px-1 tw-py-0.5 tw-rounded-xs"
       }, [
-        r("div", W, [
+        r("div", V, [
           r("span", {
             class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot",
             style: s({
@@ -81,12 +82,12 @@ function G(N, i, a, t, M, R) {
               transitionDelay: `${e.delay}ms`
             })
           }, null, 4),
-          r("span", B, w(e.label), 1)
+          r("span", W, w(e.label), 1)
         ]),
         r("span", {
           class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
           style: s({ minWidth: t.valueMinWidth })
-        }, w(t.formatDisplayValue(g)), 5)
+        }, w(t.formatDisplayValue(f)), 5)
       ]))), 128)),
       t.otherItems.length > 0 ? (l(), o("button", {
         key: 0,
@@ -94,7 +95,7 @@ function G(N, i, a, t, M, R) {
         type: "button",
         onClick: i[0] || (i[0] = (e) => t.showOtherLightbox = !0)
       }, [
-        r("div", p, [
+        r("div", B, [
           r("span", {
             class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot",
             style: s({
@@ -110,7 +111,7 @@ function G(N, i, a, t, M, R) {
         }, w(t.formatOtherDisplayValue()), 5)
       ])) : n("", !0)
     ])) : n("", !0),
-    t.hasData && !a.loading ? (l(), _(f, {
+    t.hasData && !a.loading ? (l(), _(g, {
       key: 1,
       visible: t.showOtherLightbox,
       title: "Other",
@@ -135,9 +136,9 @@ function G(N, i, a, t, M, R) {
       ]),
       _: 1
     }, 8, ["visible"])) : n("", !0)
-  ]);
+  ], 4);
 }
-const A = /* @__PURE__ */ u(y, [["render", G], ["__scopeId", "data-v-73c9f5f9"]]);
+const T = /* @__PURE__ */ u(y, [["render", G], ["__scopeId", "data-v-9afd557d"]]);
 export {
-  A as default
+  T as default
 };

package/dist/vue/KvPieChartV2.vue.d.ts

@@ -45,6 +45,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    growDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
     animateOut: {
         type: BooleanConstructor;
         default: boolean;
@@ -108,6 +112,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    growDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
     animateOut: {
         type: BooleanConstructor;
         default: boolean;
@@ -120,6 +128,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     unit: PieChartUnit;
     shownSegments: number;
     segmentGap: number;
+    growDuration: number;
     animateOut: boolean;
 }, {}, {
     KvLightbox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/vue/KvPieChartV22.js

@@ -1,8 +1,8 @@
 import { toRefs as z, ref as I, computed as u, onMounted as J, watch as U, onUnmounted as Q } from "vue";
-import { getPieChartColor as $, OTHER_SEGMENT_BG_COLOR as Z, LOADING_BG_COLOR as ee } from "../utils/pieChartColors.js";
+import { getPieChartColor as D, OTHER_SEGMENT_BG_COLOR as Z, LOADING_BG_COLOR as ee } from "../utils/pieChartColors.js";
 import { easeInOutCubic as te } from "../utils/useCountUp.js";
 import ae from "./KvLightbox.js";
-const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
+const E = 262, le = E / 2, ne = E / 2, ce = {
   name: "KvPieChartV2",
   components: {
     KvLightbox: ae
@@ -62,6 +62,15 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       type: Number,
       default: 1e3
     },
+    /**
+     * Duration in milliseconds of each segment's grow animation. The stagger between
+     * segments and the count-up pacing use this same value, so lowering it speeds up
+     * the whole ring — draw and numbers — in sync. Default keeps the original timing.
+     */
+    growDuration: {
+      type: Number,
+      default: 500
+    },
     /**
      * When changed from false to true, plays the reverse sweep-out animation.
      */
@@ -72,61 +81,62 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
   },
   setup(g) {
     const {
-      values: A,
+      values: M,
       unit: m,
-      loading: M,
+      loading: w,
       shownSegments: d,
-      strokeWidth: B,
-      segmentGap: T,
-      initialDelay: D,
-      animateOut: y
-    } = z(g), k = I(!1), c = I(!1), G = u(() => Math.max((E - B.value) / 2, 1)), b = u(() => 2 * Math.PI * G.value), h = u(() => [...A.value].sort((e, t) => t.value - e.value)), o = u(() => h.value.reduce((e, t) => e + t.value, 0)), O = u(() => A.value.length > 0), S = u(() => h.value.slice(0, d.value)), C = u(() => h.value.slice(d.value).map((t, n) => ({
+      strokeWidth: W,
+      segmentGap: A,
+      initialDelay: T,
+      growDuration: y,
+      animateOut: b
+    } = z(g), k = I(!1), c = I(!1), V = u(() => Math.max((E - W.value) / 2, 1)), C = u(() => 2 * Math.PI * V.value), h = u(() => [...M.value].sort((e, t) => t.value - e.value)), o = u(() => h.value.reduce((e, t) => e + t.value, 0)), L = u(() => M.value.length > 0), S = u(() => h.value.slice(0, d.value)), O = u(() => h.value.slice(d.value).map((t, n) => ({
       ...t,
-      color: $(d.value + n, t.color)
+      color: D(d.value + n, t.color)
     }))), q = u(() => h.value.map((e, t) => ({
       ...e,
-      color: $(t, e.color)
-    }))), w = u(() => C.value.reduce((e, t) => e + t.value, 0)), R = u(() => o.value > 0 ? w.value / o.value : 0), f = u(() => {
+      color: D(t, e.color)
+    }))), x = u(() => O.value.reduce((e, t) => e + t.value, 0)), N = u(() => o.value > 0 ? x.value / o.value : 0), f = u(() => {
       let e = 0;
       return S.value.map((t, n) => {
-        const a = o.value > 0 ? t.value / o.value : 0, l = Math.max(a * b.value - T.value, 0), s = e * 360 - 90;
+        const a = o.value > 0 ? t.value / o.value : 0, l = Math.max(a * C.value - A.value, 0), s = e * 360 - 90;
         return e += a, {
           label: t.label,
           value: t.value,
           percent: a,
-          color: $(n, t.color),
+          color: D(n, t.color),
           dashLength: l,
           startDeg: s,
-          delay: D.value + n * W,
-          isVisible: c.value && !y.value
+          delay: T.value + n * y.value,
+          isVisible: c.value && !b.value
         };
       });
     }), v = u(() => {
-      if (C.value.length === 0) return null;
+      if (O.value.length === 0) return null;
       let e = 0;
       S.value.forEach((l) => {
         e += o.value > 0 ? l.value / o.value : 0;
       });
-      const t = Math.max(R.value * b.value - T.value, 0), n = e * 360 - 90, a = S.value.length;
+      const t = Math.max(N.value * C.value - A.value, 0), n = e * 360 - 90, a = S.value.length;
       return {
         label: "Other",
-        value: w.value,
-        percent: R.value,
+        value: x.value,
+        percent: N.value,
         color: "#C4C4C4",
         dashLength: t,
         startDeg: n,
-        delay: D.value + a * W,
-        isVisible: c.value && !y.value
+        delay: T.value + a * y.value,
+        isVisible: c.value && !b.value
       };
-    }), r = I([]), p = [], i = [], V = (e) => m.value === "percent" ? Math.round(e.percent * 100) : e.value, _ = (e, t, n) => {
+    }), r = I([]), p = [], i = [], _ = (e) => m.value === "percent" ? Math.round(e.percent * 100) : e.value, F = (e, t, n) => {
       let a = null;
       function l(s) {
         a === null && (a = s);
-        const L = s - a, P = Math.min(L / ue, 1), Y = te(P), j = Math.round(t + (n - t) * Y);
-        r.value[e] = j, P < 1 && (i[e] = requestAnimationFrame(l));
+        const $ = s - a, R = Math.min($ / y.value, 1), Y = te(R), j = Math.round(t + (n - t) * Y);
+        r.value[e] = j, R < 1 && (i[e] = requestAnimationFrame(l));
       }
       i[e] = requestAnimationFrame(l);
-    }, x = (e = !1) => {
+    }, G = (e = !1) => {
       p.forEach(clearTimeout), p.length = 0, i.forEach(cancelAnimationFrame), i.length = 0;
       const t = [
         ...f.value,
@@ -135,12 +145,12 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       for (; r.value.length < t.length; )
         r.value.push(0);
       t.forEach((n, a) => {
-        const l = V(n), { delay: s } = n, L = setTimeout(() => {
-          e ? _(a, r.value[a], 0) : _(a, 0, l);
+        const l = _(n), { delay: s } = n, $ = setTimeout(() => {
+          e ? F(a, r.value[a], 0) : F(a, 0, l);
         }, s);
-        p.push(L);
+        p.push($);
       });
-    }, N = (e) => {
+    }, P = (e) => {
       const t = r.value[e] ?? 0;
       switch (m.value) {
         case "percent":
@@ -164,7 +174,7 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       }
     }, X = () => {
       const e = f.value.length;
-      return N(e);
+      return P(e);
     }, H = u(() => {
       const e = [
         ...f.value,
@@ -172,7 +182,7 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       ];
       let t = 0;
       return e.forEach((n) => {
-        const a = V(n);
+        const a = _(n);
         let l;
         switch (m.value) {
           case "percent":
@@ -186,27 +196,27 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
         }
         l.length > t && (t = l.length);
       }), `${t}ch`;
-    }), F = () => {
+    }), B = () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          c.value = !0, x(!1);
+          c.value = !0, G(!1);
         });
       });
     };
     return J(() => {
-      !M.value && O.value && F();
-    }), U(M, (e) => {
-      !e && O.value && F();
-    }), U(y, (e) => {
-      e && (c.value = !1, x(!0));
+      !w.value && L.value && B();
+    }), U(w, (e) => {
+      !e && L.value && B();
+    }), U(b, (e) => {
+      e && (c.value = !1, G(!0));
     }), Q(() => {
       p.forEach(clearTimeout), i.forEach(cancelAnimationFrame);
     }), {
       // Constants
       CX: le,
       CY: ne,
-      radius: G,
-      circumference: b,
+      radius: V,
+      circumference: C,
       LOADING_BG_COLOR: ee,
       OTHER_SEGMENT_BG_COLOR: Z,
       // State
@@ -214,19 +224,19 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       animatedIn: c,
       displayValues: r,
       // Computed
-      hasData: O,
+      hasData: L,
       visibleSegments: f,
       otherSegment: v,
-      otherItems: C,
+      otherItems: O,
       allItemsWithColors: q,
       valueMinWidth: H,
       // Methods
-      formatDisplayValue: N,
+      formatDisplayValue: P,
       formatItemValue: K,
       formatOtherDisplayValue: X
     };
   }
 };
 export {
-  ve as default
+  ce as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.27.0",
+  "version": "8.28.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "bb636116de28fdd44916765d3f498617f473ed22"
+  "gitHead": "88c9f72fd0eacc5c167b9697bda2527c073d7356"
 }