@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/chart/Chart.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    v-p-aspect-ratio="16 / 9"
+    class="chart"
+    data-testid="chart"
+    :class="classNames">
+    <slot />
+    <canvas
+      ref="canvas"
+      data-testid="chart-canvas"
+      class="chart__canvas" />
+  </div>
+</template>
+
+<script setup>
+import { watchIgnorable } from "@vueuse/core";
+import {
+  onMounted,
+  watch,
+  shallowRef,
+  onBeforeUnmount,
+  toRef,
+  computed,
+  nextTick,
+  ref
+} from "vue";
+import { defuFn } from "defu";
+import getAdapter from "./adapter/index";
+import { createChart } from "./utils/use-chart";
+import { vPAspectRatio } from "../aspect-ratio";
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "line"
+  },
+  legend: {
+    type: String,
+    default: "bottom"
+  },
+  data: {
+    type: Object,
+    default: void 0
+  },
+  options: {
+    type: Object,
+    default: void 0
+  }
+});
+const slots = defineSlots();
+const instance = shallowRef();
+const canvas = ref();
+const variant = toRef(props, "variant");
+const legend = toRef(props, "legend");
+const classNames = computed(() => {
+  const result = [];
+  if (props.variant)
+    result.push(`chart--${props.variant}`);
+  if (props.legend)
+    result.push(`chart--${props.legend}`);
+  return result;
+});
+const data = computed(() => {
+  return defuFn(
+    props.data,
+    getAdapter(variant.value)?.getDatasets(slots?.default?.() ?? [])
+  );
+});
+const options = computed(() => {
+  return defuFn(
+    props.options,
+    {
+      plugins: {
+        legend: {
+          display: legend.value !== "none",
+          position: legend.value === "none" ? void 0 : legend.value,
+          labels: {
+            color: "#9CA3AF",
+            font: {
+              family: "DM Sans",
+              size: 12,
+              weight: 600
+            }
+          }
+        }
+      }
+    },
+    getAdapter(variant.value)?.getStyle()
+  );
+});
+async function initChart() {
+  if (instance.value)
+    instance.value.destroy();
+  instance.value = await createChart(
+    canvas.value,
+    variant.value,
+    data.value,
+    options.value
+  );
+}
+const { ignoreUpdates } = watchIgnorable(data, (newData) => {
+  if (instance.value) {
+    instance.value.data = newData;
+    instance.value.update();
+  }
+});
+watch([variant, legend], () => {
+  ignoreUpdates(async () => {
+    await initChart();
+    await nextTick();
+  });
+}, { flush: "pre" });
+onMounted(() => {
+  initChart();
+});
+onBeforeUnmount(() => {
+  if (instance.value)
+    instance.value.destroy();
+});
+</script>
+
+<style lang="postcss">
+.chart {
+  --p-chart-padding-x: theme(spacing.4);
+  --p-chart-padding-y: theme(spacing.4);
+
+  @apply w-full bg-default px-[var(--p-chart-padding-x)] py-[var(--p-chart-padding-y)];
+  @apply dark:bg-dark-default;
+}
+</style>

package/dist/components/chart/Chart.vue.d.ts

@@ -0,0 +1,63 @@
+import type { ChartData, ChartType, ChartOptions } from 'chart.js/auto';
+import type { PropType, VNode } from 'vue';
+import type { LegendPosition } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
+    };
+    refs: {
+        canvas: HTMLCanvasElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<ChartType>;
+        default: string;
+    };
+    legend: {
+        type: PropType<LegendPosition>;
+        default: string;
+    };
+    data: {
+        type: PropType<ChartData>;
+        default: undefined;
+    };
+    options: {
+        type: PropType<ChartOptions>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<ChartType>;
+        default: string;
+    };
+    legend: {
+        type: PropType<LegendPosition>;
+        default: string;
+    };
+    data: {
+        type: PropType<ChartData>;
+        default: undefined;
+    };
+    options: {
+        type: PropType<ChartOptions>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    data: ChartData<keyof import("chart.js/auto").ChartTypeRegistry, (number | import("chart.js/auto").Point | [number, number] | import("chart.js/auto").BubbleDataPoint | null)[], unknown>;
+    legend: LegendPosition;
+    variant: keyof import("chart.js/auto").ChartTypeRegistry;
+    options: import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").CoreChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ElementChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").PluginChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").DatasetChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ScaleChartOptions<keyof import("chart.js/auto").ChartTypeRegistry>>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/chart/ChartSet.vue

@@ -0,0 +1,28 @@
+<template>
+  <slot />
+</template>
+
+<script setup>
+defineOptions({
+  name: "ChartSet",
+  inheritAttrs: false
+});
+defineProps({
+  name: {
+    type: [String, Number],
+    required: true
+  },
+  color: {
+    type: String,
+    default: void 0
+  },
+  fill: {
+    type: String,
+    default: void 0
+  },
+  options: {
+    type: Object,
+    default: void 0
+  }
+});
+</script>

package/dist/components/chart/ChartSet.vue.d.ts

@@ -0,0 +1,57 @@
+import type { ChartDataset } from 'chart.js/auto';
+import type { PropType } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fill: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<ChartDataset>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fill: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<ChartDataset>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    fill: string;
+    color: string;
+    options: ChartDataset;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/chart/ChartVal.vue

@@ -0,0 +1,32 @@
+<template>
+  <slot />
+</template>
+
+<script setup>
+defineOptions({
+  name: "ChartVal",
+  inheritAttrs: false
+});
+defineProps({
+  name: {
+    type: [String, Number],
+    default: void 0
+  },
+  value: {
+    type: void 0,
+    default: void 0
+  },
+  color: {
+    type: String,
+    default: void 0
+  },
+  fill: {
+    type: String,
+    default: void 0
+  },
+  options: {
+    type: Object,
+    default: void 0
+  }
+});
+</script>

package/dist/components/chart/ChartVal.vue.d.ts

@@ -0,0 +1,67 @@
+import type { ChartDataset } from 'chart.js/auto';
+import type { PropType } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    value: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fill: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<ChartDataset>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    value: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fill: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<ChartDataset>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    value: any;
+    name: string | number;
+    fill: string;
+    color: string;
+    options: ChartDataset;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/chart/adapter/adapter.d.ts

@@ -0,0 +1,7 @@
+import type { ChartData, ChartOptions } from 'chart.js/auto';
+import type { VNode } from 'vue';
+export interface ChartAdapter {
+    getStyle: () => ChartOptions;
+    getDatasets: (vnodes: VNode[]) => ChartData;
+}
+export declare function defineAdapter(adapter: ChartAdapter): ChartAdapter;

package/dist/components/chart/adapter/adapter.mjs

@@ -0,0 +1,3 @@
+export function defineAdapter(adapter) {
+  return adapter;
+}

package/dist/components/chart/adapter/bubble.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./adapter").ChartAdapter;
+export default _default;

package/dist/components/chart/adapter/bubble.mjs

@@ -0,0 +1,26 @@
+import { findAllChildren } from "../../utils/vnode.mjs";
+import { defineAdapter } from "./adapter.mjs";
+import defu from "defu";
+import { startCase } from "lodash-es";
+import { colorHash } from "../../avatar/utils/color-hash.mjs";
+export default defineAdapter({
+  getDatasets(vnodes) {
+    return {
+      datasets: findAllChildren(vnodes, "ChartSet").map((set) => {
+        const color = set.props.color ?? colorHash(set.props.name).at(1);
+        const fill = set.props.fill ?? color;
+        return defu(set.props.options, {
+          label: startCase(set.props.name),
+          backgroundColor: fill,
+          borderColor: color,
+          data: findAllChildren(set.children.default(), "ChartVal").map((value) => {
+            return value.props.value;
+          })
+        });
+      })
+    };
+  },
+  getStyle() {
+    return {};
+  }
+});

package/dist/components/chart/adapter/index.d.ts

@@ -0,0 +1,3 @@
+import type { ChartAdapter } from './adapter';
+import type { ChartType } from 'chart.js/auto';
+export default function getAdapter(type: ChartType): ChartAdapter;

package/dist/components/chart/adapter/index.mjs

@@ -0,0 +1,16 @@
+import Line from "./line.mjs";
+import Pie from "./pie.mjs";
+import Bubble from "./bubble.mjs";
+const CHART_ADAPTER_MAP = {
+  line: Line,
+  bar: Line,
+  radar: Line,
+  pie: Pie,
+  doughnut: Pie,
+  polarArea: Pie,
+  scatter: Bubble,
+  bubble: Bubble
+};
+export default function getAdapter(type) {
+  return CHART_ADAPTER_MAP[type];
+}

package/dist/components/chart/adapter/line.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./adapter").ChartAdapter;
+export default _default;

package/dist/components/chart/adapter/line.mjs

@@ -0,0 +1,66 @@
+import { startCase } from "lodash-es";
+import { defineAdapter } from "./adapter.mjs";
+import { colorHash } from "../../avatar/utils/color-hash.mjs";
+import { findAllChildren } from "../../utils/vnode.mjs";
+import defu from "defu";
+export default defineAdapter({
+  getDatasets(vnodes) {
+    const sets = findAllChildren(vnodes, "ChartSet");
+    const datasets = /* @__PURE__ */ new Map();
+    const labels = [];
+    for (const set of sets) {
+      const values = findAllChildren(set.children.default(), "ChartVal");
+      for (const value of values) {
+        const item = datasets.get(value.props.name);
+        const color = value.props.color ?? colorHash(value.props.name).at(1);
+        const fill = value.props.fill ?? color;
+        if (item) {
+          item.data.push(value.props.value);
+          item.borderColor.push(color);
+          item.backgroundColor.push(fill);
+        } else {
+          datasets.set(value.props.name, defu(value.props.options, {
+            label: startCase(value.props.name),
+            data: [value.props.value],
+            borderColor: [color],
+            backgroundColor: [fill],
+            fill: !!value.props.fill
+          }));
+        }
+      }
+      labels.push(startCase(set.props.name));
+    }
+    return { labels, datasets: [...datasets.values()] };
+  },
+  getStyle() {
+    return {
+      scales: {
+        x: {
+          ticks: {
+            color: "#9CA3AF",
+            font: {
+              family: "DM Sans",
+              size: 12,
+              weight: 600
+            }
+          },
+          border: { color: "#BFBFBF" }
+        },
+        y: {
+          ticks: {
+            color: "#9CA3AF",
+            font: {
+              family: "DM Sans",
+              size: 12,
+              weight: 600
+            }
+          },
+          border: {
+            color: "#BFBFBF",
+            dash: [4]
+          }
+        }
+      }
+    };
+  }
+});

package/dist/components/chart/adapter/pie.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./adapter").ChartAdapter;
+export default _default;

package/dist/components/chart/adapter/pie.mjs

@@ -0,0 +1,34 @@
+import { startCase } from "lodash-es";
+import { colorHash } from "../../avatar/utils/color-hash.mjs";
+import { findAllChildren } from "../../utils/vnode.mjs";
+import { defineAdapter } from "./adapter.mjs";
+import defu from "defu";
+export default defineAdapter({
+  getDatasets(vnodes) {
+    const sets = findAllChildren(vnodes, "ChartSet");
+    const datasets = /* @__PURE__ */ new Map();
+    const labels = [];
+    for (const set of sets) {
+      const values = findAllChildren(set.children.default(), "ChartVal");
+      for (const value of values) {
+        const item = datasets.get(set.props.name);
+        const fill = value.props.fill ?? value.props.color ?? colorHash(value.props.name).at(1);
+        if (item) {
+          item.data.push(value.props.value);
+          item.backgroundColor.push(fill);
+        } else {
+          datasets.set(set.props.name, defu(set.props.options, {
+            label: startCase(set.props.name),
+            data: [value.props.value],
+            backgroundColor: [fill]
+          }));
+        }
+        labels.push(startCase(value.props.name));
+      }
+    }
+    return { labels, datasets: [...datasets.values()] };
+  },
+  getStyle() {
+    return {};
+  }
+});

package/dist/components/chart/index.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutPosition } from 'chart.js';
+export type LegendPosition = 'none' | LayoutPosition;

package/dist/components/chart/utils/use-chart.d.ts

@@ -0,0 +1,2 @@
+import type { ChartData, ChartType, ChartOptions, Chart } from 'chart.js/auto';
+export declare function createChart(target: HTMLCanvasElement, type: ChartType, data: ChartData, options: ChartOptions): Promise<Chart>;

package/dist/components/chart/utils/use-chart.mjs

@@ -0,0 +1,9 @@
+export async function createChart(target, type, data, options) {
+  const { default: Chart } = await import("chart.js/auto");
+  const instance = new Chart(target, {
+    type,
+    data,
+    options
+  });
+  return instance;
+}