@mekari/pixel3-chart 0.0.1-dev.0

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import {
+  MpChart
+} from "./chunk-RG3PDKE3.mjs";
+import "./chunk-5SYLA56O.mjs";
+import "./chunk-4Y625OEJ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpChart
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/chart.props.ts":{"bytes":2837,"imports":[{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/chart.hooks.ts":{"bytes":20141,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"color","kind":"import-statement","external":true},{"path":"chart.js/auto","kind":"import-statement","external":true},{"path":"chartjs-plugin-datalabels","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/chart.tsx":{"bytes":3150,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"src/modules/chart.props.ts","kind":"import-statement","original":"./modules/chart.props"},{"path":"src/modules/chart.hooks.ts","kind":"import-statement","original":"./modules/chart.hooks"},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":119,"imports":[{"path":"src/chart.tsx","kind":"import-statement","original":"./chart"}],"format":"esm"}},"outputs":{"dist/chart.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true},{"path":"color","kind":"require-call","external":true},{"path":"chart.js/auto","kind":"require-call","external":true},{"path":"chartjs-plugin-datalabels","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/chart.tsx","inputs":{"src/chart.tsx":{"bytesInOutput":3871},"src/modules/chart.props.ts":{"bytesInOutput":1785},"src/modules/chart.hooks.ts":{"bytesInOutput":20999}},"bytes":28340},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true},{"path":"color","kind":"require-call","external":true},{"path":"chart.js/auto","kind":"require-call","external":true},{"path":"chartjs-plugin-datalabels","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":119},"src/chart.tsx":{"bytesInOutput":3746},"src/modules/chart.props.ts":{"bytesInOutput":1785},"src/modules/chart.hooks.ts":{"bytesInOutput":20999}},"bytes":28351},"dist/modules/chart.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true},{"path":"color","kind":"require-call","external":true},{"path":"chart.js/auto","kind":"require-call","external":true},{"path":"chartjs-plugin-datalabels","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/chart.hooks.ts","inputs":{"src/modules/chart.hooks.ts":{"bytesInOutput":21144}},"bytes":22763},"dist/modules/chart.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/chart.props.ts","inputs":{"src/modules/chart.props.ts":{"bytesInOutput":2030}},"bytes":2977}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/chart.props.ts":{"bytes":2837,"imports":[{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/chart.hooks.ts":{"bytes":20141,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"color","kind":"import-statement","external":true},{"path":"chart.js/auto","kind":"import-statement","external":true},{"path":"chartjs-plugin-datalabels","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/chart.tsx":{"bytes":3150,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"src/modules/chart.props.ts","kind":"import-statement","original":"./modules/chart.props"},{"path":"src/modules/chart.hooks.ts","kind":"import-statement","original":"./modules/chart.hooks"},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":119,"imports":[{"path":"src/chart.tsx","kind":"import-statement","original":"./chart"}],"format":"esm"}},"outputs":{"dist/chart.mjs":{"imports":[{"path":"dist/chunk-RG3PDKE3.mjs","kind":"import-statement"},{"path":"dist/chunk-5SYLA56O.mjs","kind":"import-statement"},{"path":"dist/chunk-4Y625OEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpChart"],"entryPoint":"src/chart.tsx","inputs":{},"bytes":165},"dist/index.mjs":{"imports":[{"path":"dist/chunk-RG3PDKE3.mjs","kind":"import-statement"},{"path":"dist/chunk-5SYLA56O.mjs","kind":"import-statement"},{"path":"dist/chunk-4Y625OEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpChart"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":165},"dist/chunk-RG3PDKE3.mjs":{"imports":[{"path":"dist/chunk-5SYLA56O.mjs","kind":"import-statement"},{"path":"dist/chunk-4Y625OEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"lodash-es","kind":"import-statement","external":true}],"exports":["MpChart"],"inputs":{"src/chart.tsx":{"bytesInOutput":3312}},"bytes":3506},"dist/modules/chart.hooks.mjs":{"imports":[{"path":"dist/chunk-5SYLA56O.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useChart"],"entryPoint":"src/modules/chart.hooks.ts","inputs":{},"bytes":107},"dist/chunk-5SYLA56O.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"color","kind":"import-statement","external":true},{"path":"chart.js/auto","kind":"import-statement","external":true},{"path":"chartjs-plugin-datalabels","kind":"import-statement","external":true}],"exports":["useChart"],"inputs":{"src/modules/chart.hooks.ts":{"bytesInOutput":19528}},"bytes":19632},"dist/modules/chart.props.mjs":{"imports":[{"path":"dist/chunk-4Y625OEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["chartEmit","chartProps"],"entryPoint":"src/modules/chart.props.ts","inputs":{},"bytes":137},"dist/chunk-4Y625OEJ.mjs":{"imports":[],"exports":["chartEmit","chartProps"],"inputs":{"src/modules/chart.props.ts":{"bytesInOutput":1851}},"bytes":1920},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/chart.hooks.d.mts

@@ -0,0 +1,106 @@
+import * as chart_js_auto from 'chart.js/auto';
+import chart_js_auto__default from 'chart.js/auto';
+import * as vue from 'vue';
+import { ChartProps, ChartEmit } from './chart.props.mjs';
+import 'chart.js/dist/types/utils';
+import 'chart.js';
+
+type LegendPosition = 'column' | 'column-reverse' | 'row' | 'row-reverse';
+declare function useChart(props: ChartProps, emit: ChartEmit): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string | undefined;
+        class: string;
+        style: {
+            width: string;
+        };
+    }>;
+    chartHeaderAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    chartWrapperAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            flexDirection: LegendPosition;
+        };
+    }>;
+    chartContainerAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        id: string;
+        class: string;
+        style: {
+            width: string;
+            height: string;
+        };
+    }>;
+    canvasContainerAttrs: vue.ComputedRef<{
+        id: string;
+        class: string;
+        style: {
+            width: string;
+            height: string;
+        };
+    }>;
+    canvasAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        id: string;
+        ariaLabel: string;
+        role: string;
+    }>;
+    chartLegendAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        id: string;
+        class: string;
+        style: {
+            justifyContent: string;
+            marginTop: string;
+            marginBottom: string;
+        };
+    }>;
+    legendWrapperAttrs: (item: any, index: number) => {
+        key: number;
+        class: string;
+        onClick: () => void;
+    };
+    legendBoxAttrs: (item: any) => {
+        class: string;
+        style: {
+            width: string;
+            height: string;
+            background: any;
+        };
+    };
+    chartTooltipAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            top: string;
+            left: string;
+            opacity: number;
+        };
+    }>;
+    tooltipWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    tooltipRowAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    tooltipItemAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    tooltipBoxAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            backgroundColor: any;
+        };
+    }>;
+    chart: vue.ShallowRef<chart_js_auto__default<keyof chart_js_auto.ChartTypeRegistry, (number | [number, number] | chart_js_auto.Point | chart_js_auto.BubbleDataPoint | null)[], unknown> | null>;
+    legend: vue.Ref<never[]>;
+    tooltip: vue.Ref<{
+        top: number;
+        left: number;
+        opacity: number;
+        data: any;
+    }>;
+};
+
+export { useChart };

package/dist/modules/chart.hooks.d.ts

@@ -0,0 +1,106 @@
+import * as chart_js_auto from 'chart.js/auto';
+import chart_js_auto__default from 'chart.js/auto';
+import * as vue from 'vue';
+import { ChartProps, ChartEmit } from './chart.props.js';
+import 'chart.js/dist/types/utils';
+import 'chart.js';
+
+type LegendPosition = 'column' | 'column-reverse' | 'row' | 'row-reverse';
+declare function useChart(props: ChartProps, emit: ChartEmit): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string | undefined;
+        class: string;
+        style: {
+            width: string;
+        };
+    }>;
+    chartHeaderAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    chartWrapperAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            flexDirection: LegendPosition;
+        };
+    }>;
+    chartContainerAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        id: string;
+        class: string;
+        style: {
+            width: string;
+            height: string;
+        };
+    }>;
+    canvasContainerAttrs: vue.ComputedRef<{
+        id: string;
+        class: string;
+        style: {
+            width: string;
+            height: string;
+        };
+    }>;
+    canvasAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        id: string;
+        ariaLabel: string;
+        role: string;
+    }>;
+    chartLegendAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        id: string;
+        class: string;
+        style: {
+            justifyContent: string;
+            marginTop: string;
+            marginBottom: string;
+        };
+    }>;
+    legendWrapperAttrs: (item: any, index: number) => {
+        key: number;
+        class: string;
+        onClick: () => void;
+    };
+    legendBoxAttrs: (item: any) => {
+        class: string;
+        style: {
+            width: string;
+            height: string;
+            background: any;
+        };
+    };
+    chartTooltipAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            top: string;
+            left: string;
+            opacity: number;
+        };
+    }>;
+    tooltipWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    tooltipRowAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    tooltipItemAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    tooltipBoxAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            backgroundColor: any;
+        };
+    }>;
+    chart: vue.ShallowRef<chart_js_auto__default<keyof chart_js_auto.ChartTypeRegistry, (number | [number, number] | chart_js_auto.Point | chart_js_auto.BubbleDataPoint | null)[], unknown> | null>;
+    legend: vue.Ref<never[]>;
+    tooltip: vue.Ref<{
+        top: number;
+        left: number;
+        opacity: number;
+        data: any;
+    }>;
+};
+
+export { useChart };