@kiva/kv-components 8.9.1 → 8.10.0

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

@@ -0,0 +1,202 @@
+import { PropType } from 'vue';
+export interface KvPieChartV2Item {
+    label: string;
+    value: number;
+    color?: string;
+}
+export type PieChartUnit = 'percent' | 'amount' | 'count';
+interface ComputedSegment {
+    label: string;
+    value: number;
+    percent: number;
+    color: string;
+    dashLength: number;
+    startDeg: number;
+    delay: number;
+    isVisible: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    values: {
+        type: PropType<KvPieChartV2Item[]>;
+        default: () => any[];
+    };
+    unit: {
+        type: PropType<PieChartUnit>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    shownSegments: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    segmentGap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    animateOut: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    CX: number;
+    CY: number;
+    radius: import('vue').ComputedRef<number>;
+    circumference: import('vue').ComputedRef<number>;
+    LOADING_BG_COLOR: string;
+    OTHER_SEGMENT_BG_COLOR: string;
+    showOtherLightbox: import('vue').Ref<boolean, boolean>;
+    animatedIn: import('vue').Ref<boolean, boolean>;
+    displayValues: import('vue').Ref<number[], number[]>;
+    hasData: import('vue').ComputedRef<boolean>;
+    visibleSegments: import('vue').ComputedRef<ComputedSegment[]>;
+    otherSegment: import('vue').ComputedRef<ComputedSegment>;
+    otherItems: import('vue').ComputedRef<{
+        color: string;
+        label: string;
+        value: number;
+    }[]>;
+    allItemsWithColors: import('vue').ComputedRef<{
+        color: string;
+        label: string;
+        value: number;
+    }[]>;
+    valueMinWidth: import('vue').ComputedRef<string>;
+    formatDisplayValue: (index: number) => string;
+    formatItemValue: (item: {
+        value: number;
+    }) => string;
+    formatOtherDisplayValue: () => string;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    values: {
+        type: PropType<KvPieChartV2Item[]>;
+        default: () => any[];
+    };
+    unit: {
+        type: PropType<PieChartUnit>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    shownSegments: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    segmentGap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    animateOut: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    values: KvPieChartV2Item[];
+    loading: boolean;
+    unit: PieChartUnit;
+    shownSegments: number;
+    strokeWidth: number;
+    segmentGap: number;
+    initialDelay: number;
+    animateOut: boolean;
+}, {}, {
+    KvLightbox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        blurBackground: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            default: string;
+            validator(value: string): boolean;
+        };
+        title: {
+            type: StringConstructor;
+            required: true;
+        };
+        preventClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {
+        mdiClose: string;
+        role: import('vue').ComputedRef<"alertdialog" | "dialog">;
+        kvLightbox: import('vue').Ref<any, any>;
+        kvLightboxBody: import('vue').Ref<any, any>;
+        onKeyUp: any;
+        onScreenClick: () => void;
+        hide: (closedBy?: string) => void;
+        show: () => void;
+        controlsRef: import('vue').Ref<any, any>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "lightbox-closed"[], "lightbox-closed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        blurBackground: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            default: string;
+            validator(value: string): boolean;
+        };
+        title: {
+            type: StringConstructor;
+            required: true;
+        };
+        preventClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        "onLightbox-closed"?: (...args: any[]) => any;
+    }>, {
+        variant: string;
+        visible: boolean;
+        preventClose: boolean;
+        blurBackground: boolean;
+    }, {}, {
+        KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{}>, {
+            icon: string;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvPieChartV22.js

@@ -0,0 +1,232 @@
+import { toRefs as z, ref as I, computed as u, onMounted as J, watch as U, onUnmounted as Q } from "vue";
+import { getPieChartColor as $, LOADING_BG_COLOR as Z, OTHER_SEGMENT_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 = {
+  name: "KvPieChartV2",
+  components: {
+    KvLightbox: ae
+  },
+  props: {
+    /**
+     * Chart data items. Each must have a label and numeric value.
+     */
+    values: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * How values are displayed in legend pills.
+     * @values percent, amount, count
+     */
+    unit: {
+      type: String,
+      default: "percent",
+      validator: (g) => ["percent", "amount", "count"].includes(g)
+    },
+    /**
+     * Shows a skeleton donut ring when true.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Maximum number of visible segments before remaining items collapse into "Other".
+     */
+    shownSegments: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * Donut ring thickness in SVG user units (viewBox is 262x262). The radius
+     * shrinks as this grows, so the outer edge always fits within the viewBox.
+     */
+    strokeWidth: {
+      type: Number,
+      default: 56
+    },
+    /**
+     * Visual gap between adjacent segments, in SVG user units along the ring's
+     * circumference. Set to 0 for no gap.
+     */
+    segmentGap: {
+      type: Number,
+      default: 2
+    },
+    /**
+     * Delay in milliseconds before the first segment starts animating in.
+     * Subsequent segments stagger from this baseline.
+     */
+    initialDelay: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * When changed from false to true, plays the reverse sweep-out animation.
+     */
+    animateOut: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(g) {
+    const {
+      values: A,
+      unit: m,
+      loading: M,
+      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) => ({
+      ...t,
+      color: $(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(() => {
+      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;
+        return e += a, {
+          label: t.label,
+          value: t.value,
+          percent: a,
+          color: $(n, t.color),
+          dashLength: l,
+          startDeg: s,
+          delay: D.value + n * W,
+          isVisible: c.value && !y.value
+        };
+      });
+    }), v = u(() => {
+      if (C.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;
+      return {
+        label: "Other",
+        value: w.value,
+        percent: R.value,
+        color: "#C4C4C4",
+        dashLength: t,
+        startDeg: n,
+        delay: D.value + a * W,
+        isVisible: c.value && !y.value
+      };
+    }), r = I([]), p = [], i = [], V = (e) => m.value === "percent" ? Math.round(e.percent * 100) : e.value, _ = (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));
+      }
+      i[e] = requestAnimationFrame(l);
+    }, x = (e = !1) => {
+      p.forEach(clearTimeout), p.length = 0, i.forEach(cancelAnimationFrame), i.length = 0;
+      const t = [
+        ...f.value,
+        ...v.value ? [v.value] : []
+      ];
+      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);
+        }, s);
+        p.push(L);
+      });
+    }, N = (e) => {
+      const t = r.value[e] ?? 0;
+      switch (m.value) {
+        case "percent":
+          return `${t}%`;
+        case "amount":
+          return `$${t.toLocaleString()}`;
+        case "count":
+        default:
+          return `${t.toLocaleString()}`;
+      }
+    }, K = (e) => {
+      const t = o.value > 0 ? e.value / o.value : 0;
+      switch (m.value) {
+        case "percent":
+          return `${Math.round(t * 100)}%`;
+        case "amount":
+          return `$${e.value.toLocaleString()}`;
+        case "count":
+        default:
+          return `${e.value.toLocaleString()}`;
+      }
+    }, X = () => {
+      const e = f.value.length;
+      return N(e);
+    }, H = u(() => {
+      const e = [
+        ...f.value,
+        ...v.value ? [v.value] : []
+      ];
+      let t = 0;
+      return e.forEach((n) => {
+        const a = V(n);
+        let l;
+        switch (m.value) {
+          case "percent":
+            l = `${a}%`;
+            break;
+          case "amount":
+            l = `$${a.toLocaleString()}`;
+            break;
+          default:
+            l = `${a.toLocaleString()}`;
+        }
+        l.length > t && (t = l.length);
+      }), `${t}ch`;
+    }), F = () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          c.value = !0, x(!1);
+        });
+      });
+    };
+    return J(() => {
+      !M.value && O.value && F();
+    }), U(M, (e) => {
+      !e && O.value && F();
+    }), U(y, (e) => {
+      e && (c.value = !1, x(!0));
+    }), Q(() => {
+      p.forEach(clearTimeout), i.forEach(cancelAnimationFrame);
+    }), {
+      // Constants
+      CX: le,
+      CY: ne,
+      radius: G,
+      circumference: b,
+      LOADING_BG_COLOR: Z,
+      OTHER_SEGMENT_BG_COLOR: ee,
+      // State
+      showOtherLightbox: k,
+      animatedIn: c,
+      displayValues: r,
+      // Computed
+      hasData: O,
+      visibleSegments: f,
+      otherSegment: v,
+      otherItems: C,
+      allItemsWithColors: q,
+      valueMinWidth: H,
+      // Methods
+      formatDisplayValue: N,
+      formatItemValue: K,
+      formatOtherDisplayValue: X
+    };
+  }
+};
+export {
+  ve as default
+};

package/dist/vue/KvProgressCircle.vue.d.ts

@@ -64,9 +64,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     color: string;
+    strokeWidth: number;
     arcScale: number;
     rotate: number;
-    strokeWidth: number;
     showNumber: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/vue/index.d.ts

@@ -58,6 +58,7 @@ export { default as KvMaterialIcon } from './KvMaterialIcon.vue';
 export { default as KvPageContainer } from './KvPageContainer.vue';
 export { default as KvPagination } from './KvPagination.vue';
 export { default as KvPieChart } from './KvPieChart.vue';
+export { default as KvPieChartV2 } from './KvPieChartV2.vue';
 export { default as KvPill } from './KvPill.vue';
 export { default as KvPopper } from './KvPopper.vue';
 export { default as KvProgressBar } from './KvProgressBar.vue';