vue-chrts 0.0.134 → 0.0.137
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Area/AreaChart.cjs +7 -0
- package/dist/components/Area/AreaChart.cjs.map +1 -0
- package/dist/components/Area/AreaChart.js +123 -0
- package/dist/components/Area/AreaChart.js.map +1 -0
- package/dist/components/Area/AreaChart.vue.d.ts +36 -0
- package/dist/components/Area/AreaChart2.cjs +2 -0
- package/dist/components/Area/AreaChart2.cjs.map +1 -0
- package/dist/components/Area/AreaChart2.js +5 -0
- package/dist/components/Area/AreaChart2.js.map +1 -0
- package/dist/components/Area/index.d.ts +1 -0
- package/dist/components/AreaStacked/AreaStackedChart.cjs +2 -0
- package/dist/components/AreaStacked/AreaStackedChart.cjs.map +1 -0
- package/dist/components/AreaStacked/AreaStackedChart.js +51 -0
- package/dist/components/AreaStacked/AreaStackedChart.js.map +1 -0
- package/dist/components/AreaStacked/AreaStackedChart.vue.d.ts +18 -0
- package/dist/components/AreaStacked/AreaStackedChart2.cjs +2 -0
- package/dist/components/AreaStacked/AreaStackedChart2.cjs.map +1 -0
- package/dist/components/AreaStacked/AreaStackedChart2.js +5 -0
- package/dist/components/AreaStacked/AreaStackedChart2.js.map +1 -0
- package/{src/components/AreaStacked/index.ts → dist/components/AreaStacked/index.d.ts} +1 -1
- package/dist/components/Bar/index.d.ts +1 -0
- package/dist/components/Crosshair/Crosshair.cjs +2 -0
- package/dist/components/Crosshair/Crosshair.cjs.map +1 -0
- package/dist/components/Crosshair/Crosshair.js +40 -0
- package/dist/components/Crosshair/Crosshair.js.map +1 -0
- package/dist/components/Crosshair/Crosshair.vue.d.ts +38 -0
- package/dist/components/Crosshair/Crosshair2.cjs +2 -0
- package/dist/components/Crosshair/Crosshair2.cjs.map +1 -0
- package/dist/components/Crosshair/Crosshair2.js +5 -0
- package/dist/components/Crosshair/Crosshair2.js.map +1 -0
- package/dist/components/Crosshair/index.d.ts +1 -0
- package/dist/components/Donut/DonutChart.cjs +6 -0
- package/dist/components/Donut/DonutChart.cjs.map +1 -0
- package/dist/components/Donut/DonutChart.js +59 -0
- package/dist/components/Donut/DonutChart.js.map +1 -0
- package/dist/components/Donut/DonutChart.vue.d.ts +31 -0
- package/dist/components/Donut/DonutChart2.cjs +2 -0
- package/dist/components/Donut/DonutChart2.cjs.map +1 -0
- package/dist/components/Donut/DonutChart2.js +5 -0
- package/dist/components/Donut/DonutChart2.js.map +1 -0
- package/dist/components/Donut/index.d.ts +1 -0
- package/dist/components/Line/index.d.ts +1 -0
- package/dist/components/Tooltip.cjs +2 -0
- package/dist/components/Tooltip.cjs.map +1 -0
- package/dist/components/Tooltip.js +21 -0
- package/dist/components/Tooltip.js.map +1 -0
- package/dist/components/Tooltip.vue.d.ts +14 -0
- package/dist/components/Tooltip2.cjs +2 -0
- package/dist/components/Tooltip2.cjs.map +1 -0
- package/dist/components/Tooltip2.js +5 -0
- package/dist/components/Tooltip2.js.map +1 -0
- package/dist/components.d.ts +4 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +13 -0
- package/dist/index.js.map +1 -0
- package/package.json +13 -10
- package/.vscode/extensions.json +0 -3
- package/auto-imports.d.ts +0 -58
- package/components.d.ts +0 -46
- package/image.png +0 -0
- package/index.html +0 -14
- package/index.js +0 -2
- package/src/components/Area/AreaChart.vue +0 -141
- package/src/components/Area/index.ts +0 -1
- package/src/components/AreaStacked/AreaStackedChart.vue +0 -51
- package/src/components/Bar/BarChart.vue +0 -130
- package/src/components/Bar/index.ts +0 -1
- package/src/components/Crosshair/Crosshair.vue +0 -46
- package/src/components/Crosshair/index.ts +0 -1
- package/src/components/Donut/DonutChart.vue +0 -71
- package/src/components/Donut/index.ts +0 -1
- package/src/components/Line/LineChart.vue +0 -94
- package/src/components/Line/index.ts +0 -1
- package/src/components/Tooltip.vue +0 -17
- package/src/components.ts +0 -6
- package/src/index.ts +0 -6
- package/src/shims-vue.d.ts +0 -1
- package/src-demo/AdminTemplate.vue +0 -5
- package/src-demo/App.vue +0 -37
- package/src-demo/AreaChartPage.vue +0 -125
- package/src-demo/BarChartPage.vue +0 -166
- package/src-demo/DashboardTemplate.vue +0 -687
- package/src-demo/Homepage.vue +0 -325
- package/src-demo/LineChartPage.vue +0 -140
- package/src-demo/assets/main.css +0 -34
- package/src-demo/components/Progress/Progress.vue +0 -42
- package/src-demo/components/Progress/index.ts +0 -1
- package/src-demo/components/Status/Status.vue +0 -95
- package/src-demo/components/Status/index.ts +0 -1
- package/src-demo/components/charts.ts +0 -37
- package/src-demo/components/index.ts +0 -49
- package/src-demo/data/AreaChartData.ts +0 -294
- package/src-demo/data/BarChartData.ts +0 -79
- package/src-demo/data/IncomeExpenseData.ts +0 -189
- package/src-demo/data/InvestmentData.ts +0 -352
- package/src-demo/data/RevenueData.ts +0 -58
- package/src-demo/data/VisitorsData.ts +0 -260
- package/src-demo/elements/Button.vue +0 -13
- package/src-demo/elements/Card.vue +0 -17
- package/src-demo/elements/Dropdown.vue +0 -112
- package/src-demo/elements/Logo.vue +0 -8
- package/src-demo/elements/Table.vue +0 -363
- package/src-demo/elements/TopBar.vue +0 -40
- package/src-demo/index.ts +0 -58
- package/tsconfig.json +0 -11
- package/vite.config.ts +0 -63
- /package/{public → dist}/vite.svg +0 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { defineComponent as l, createElementBlock as e, openBlock as t, Fragment as n, renderList as i, createElementVNode as s, toDisplayString as a } from "vue";
|
|
2
|
+
const _ = { class: "flex flex-col" }, p = { class: "flex items-center mr-2 mt-2" }, d = { class: "font-semibold capitalize text-white/75" }, m = { class: "font-normal" }, x = /* @__PURE__ */ l({
|
|
3
|
+
__name: "Tooltip",
|
|
4
|
+
props: {
|
|
5
|
+
data: {}
|
|
6
|
+
},
|
|
7
|
+
setup(f) {
|
|
8
|
+
return (r, u) => (t(), e("div", _, [
|
|
9
|
+
(t(!0), e(n, null, i(Object.entries(r.data), ([o, c]) => (t(), e(n, { key: o }, [
|
|
10
|
+
s("div", p, [
|
|
11
|
+
s("span", d, a(o) + ":", 1)
|
|
12
|
+
]),
|
|
13
|
+
s("span", m, a(c), 1)
|
|
14
|
+
], 64))), 128))
|
|
15
|
+
]));
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
export {
|
|
19
|
+
x as default
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
2
|
+
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
|
|
3
|
+
data: T;
|
|
4
|
+
}, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
|
|
5
|
+
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
6
|
+
attrs: any;
|
|
7
|
+
slots: ReturnType<() => {}>;
|
|
8
|
+
emit: typeof __VLS_emit;
|
|
9
|
+
}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
}> & {
|
|
12
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
13
|
+
};
|
|
14
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./components/Area/AreaChart.cjs"),u=require("./components/AreaStacked/AreaStackedChart.cjs"),_=require("./components/Donut/DonutChart.cjs"),a=require("./components/Crosshair/Crosshair.cjs");var t=(e=>(e.Top="top",e.Bottom="bottom",e))(t||{});exports.AreaChart=r.default;exports.AreaStackedChart=u.default;exports.DonutChart=_.default;exports.Crosshair=a.default;exports.PaginationPosition=t;
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\nexport enum PaginationPosition {\n Top = \"top\",\n Bottom = \"bottom\",\n}\n"],"names":["PaginationPosition"],"mappings":"+RACY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA"}
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as e } from "./components/Area/AreaChart.js";
|
|
2
|
+
import { default as p } from "./components/AreaStacked/AreaStackedChart.js";
|
|
3
|
+
import { default as u } from "./components/Donut/DonutChart.js";
|
|
4
|
+
import { default as s } from "./components/Crosshair/Crosshair.js";
|
|
5
|
+
var t = /* @__PURE__ */ ((r) => (r.Top = "top", r.Bottom = "bottom", r))(t || {});
|
|
6
|
+
export {
|
|
7
|
+
e as AreaChart,
|
|
8
|
+
p as AreaStackedChart,
|
|
9
|
+
s as Crosshair,
|
|
10
|
+
u as DonutChart,
|
|
11
|
+
t as PaginationPosition
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\nexport enum PaginationPosition {\n Top = \"top\",\n Bottom = \"bottom\",\n}\n"],"names":["PaginationPosition"],"mappings":";;;;AACY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;"}
|
package/package.json
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-chrts",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.137",
|
|
4
4
|
"license": "MIT",
|
|
5
|
+
"files": [
|
|
6
|
+
"dist"
|
|
7
|
+
],
|
|
5
8
|
"exports": {
|
|
6
9
|
".": {
|
|
7
|
-
"types": "./index.d.ts",
|
|
8
|
-
"require": "./index.cjs",
|
|
9
|
-
"import": "./index.js"
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"require": "./dist/index.cjs",
|
|
12
|
+
"import": "./dist/index.js"
|
|
10
13
|
},
|
|
11
14
|
"./*": {
|
|
12
|
-
"types": "./*/index.d.ts",
|
|
13
|
-
"require": "./*/index.cjs",
|
|
14
|
-
"import": "./*/index.js"
|
|
15
|
+
"types": "./*/dist/index.d.ts",
|
|
16
|
+
"require": "./*/dist/index.cjs",
|
|
17
|
+
"import": "./*/dist/index.js"
|
|
15
18
|
}
|
|
16
19
|
},
|
|
17
|
-
"main": "./index.cjs",
|
|
18
|
-
"module": "./index.js",
|
|
19
|
-
"types": "./index.d.ts",
|
|
20
|
+
"main": "./dist/index.cjs",
|
|
21
|
+
"module": "./dist/index.js",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
20
23
|
"typings": "./index.d.ts",
|
|
21
24
|
"type": "module",
|
|
22
25
|
"sideEffects": false,
|
package/.vscode/extensions.json
DELETED
package/auto-imports.d.ts
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
/* eslint-disable */
|
|
2
|
-
/* prettier-ignore */
|
|
3
|
-
// @ts-nocheck
|
|
4
|
-
// noinspection JSUnusedGlobalSymbols
|
|
5
|
-
// Generated by unplugin-auto-import
|
|
6
|
-
// biome-ignore lint: disable
|
|
7
|
-
export {}
|
|
8
|
-
declare global {
|
|
9
|
-
const avatarGroupInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useAvatarGroup.js')['avatarGroupInjectionKey']
|
|
10
|
-
const buttonGroupInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useButtonGroup.js')['buttonGroupInjectionKey']
|
|
11
|
-
const defineLocale: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineLocale.js')['defineLocale']
|
|
12
|
-
const defineShortcuts: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.js')['defineShortcuts']
|
|
13
|
-
const extendDevtoolsMeta: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/extendDevtoolsMeta.js')['extendDevtoolsMeta']
|
|
14
|
-
const extractShortcuts: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.js')['extractShortcuts']
|
|
15
|
-
const formBusInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formBusInjectionKey']
|
|
16
|
-
const formFieldInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formFieldInjectionKey']
|
|
17
|
-
const formInputsInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formInputsInjectionKey']
|
|
18
|
-
const formLoadingInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formLoadingInjectionKey']
|
|
19
|
-
const formOptionsInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formOptionsInjectionKey']
|
|
20
|
-
const inputIdInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['inputIdInjectionKey']
|
|
21
|
-
const kbdKeysMap: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useKbd.js')['kbdKeysMap']
|
|
22
|
-
const localeContextInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useLocale.js')['localeContextInjectionKey']
|
|
23
|
-
const modalInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useModal.js')['modalInjectionKey']
|
|
24
|
-
const slideoverInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useSlideover.js')['slideoverInjectionKey']
|
|
25
|
-
const useAvatarGroup: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useAvatarGroup.js')['useAvatarGroup']
|
|
26
|
-
const useButtonGroup: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useButtonGroup.js')['useButtonGroup']
|
|
27
|
-
const useComponentIcons: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useComponentIcons.js')['useComponentIcons']
|
|
28
|
-
const useFormField: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['useFormField']
|
|
29
|
-
const useKbd: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useKbd.js')['useKbd']
|
|
30
|
-
const useLocale: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useLocale.js')['useLocale']
|
|
31
|
-
const useModal: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useModal.js')['useModal']
|
|
32
|
-
const useSlideover: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useSlideover.js')['useSlideover']
|
|
33
|
-
const useToast: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useToast.js')['useToast']
|
|
34
|
-
}
|
|
35
|
-
// for type re-export
|
|
36
|
-
declare global {
|
|
37
|
-
// @ts-ignore
|
|
38
|
-
export type { ShortcutConfig, ShortcutsConfig, ShortcutsOptions } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.d'
|
|
39
|
-
import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.d')
|
|
40
|
-
// @ts-ignore
|
|
41
|
-
export type { DevtoolsMeta } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/extendDevtoolsMeta.d'
|
|
42
|
-
import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/extendDevtoolsMeta.d')
|
|
43
|
-
// @ts-ignore
|
|
44
|
-
export type { UseComponentIconsProps } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useComponentIcons.d'
|
|
45
|
-
import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useComponentIcons.d')
|
|
46
|
-
// @ts-ignore
|
|
47
|
-
export type { KbdKey, KbdKeySpecific } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useKbd.d'
|
|
48
|
-
import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useKbd.d')
|
|
49
|
-
// @ts-ignore
|
|
50
|
-
export type { ModalState } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useModal.d'
|
|
51
|
-
import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useModal.d')
|
|
52
|
-
// @ts-ignore
|
|
53
|
-
export type { SlideoverState } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useSlideover.d'
|
|
54
|
-
import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useSlideover.d')
|
|
55
|
-
// @ts-ignore
|
|
56
|
-
export type { Toast } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useToast.d'
|
|
57
|
-
import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useToast.d')
|
|
58
|
-
}
|
package/components.d.ts
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/* eslint-disable */
|
|
2
|
-
// @ts-nocheck
|
|
3
|
-
// Generated by unplugin-vue-components
|
|
4
|
-
// Read more: https://github.com/vuejs/core/pull/3399
|
|
5
|
-
export {}
|
|
6
|
-
|
|
7
|
-
/* prettier-ignore */
|
|
8
|
-
declare module 'vue' {
|
|
9
|
-
export interface GlobalComponents {
|
|
10
|
-
Area: typeof import('./src/components/Base/Area.vue')['default']
|
|
11
|
-
AreaChart: typeof import('./src/components/Pages/AreaChart.vue')['default']
|
|
12
|
-
AreaChartPage: typeof import('./src/components/Pages/AreaChartPage.vue')['default']
|
|
13
|
-
AreaStacked: typeof import('./src/components/Base/AreaStacked.vue')['default']
|
|
14
|
-
Bar: typeof import('./src/components/Base/Bar.vue')['default']
|
|
15
|
-
BarChart: typeof import('./src/components/BarChart.vue')['default']
|
|
16
|
-
BarChartPage: typeof import('./src/components/Pages/BarChartPage.vue')['default']
|
|
17
|
-
Button: typeof import('./src/components/Elements/Button.vue')['default']
|
|
18
|
-
Card: typeof import('./src/components/Elements/Card.vue')['default']
|
|
19
|
-
copy: typeof import('./src/components/Pages/LineChartPage copy.vue')['default']
|
|
20
|
-
Crosshair: typeof import('./src/components/Base/Crosshair.vue')['default']
|
|
21
|
-
Donut: typeof import('./src/components/Base/Donut.vue')['default']
|
|
22
|
-
DonutChart: typeof import('./src/components/DonutChart.vue')['default']
|
|
23
|
-
DonutChartPage: typeof import('./src/components/Pages/DonutChartPage.vue')['default']
|
|
24
|
-
Homepage: typeof import('./src/components/Homepage.vue')['default']
|
|
25
|
-
Index: typeof import('./src/components/Base/Line/Index.vue')['default']
|
|
26
|
-
Line: typeof import('./src/components/Base/Line/Line.vue')['default']
|
|
27
|
-
LineChartPage: typeof import('./src/components/Pages/LineChartPage.vue')['default']
|
|
28
|
-
Logo: typeof import('./src/components/Logo.vue')['default']
|
|
29
|
-
Overview: typeof import('./src/components/Overview.vue')['default']
|
|
30
|
-
Progress: typeof import('./src/components/Base/Progress.vue')['default']
|
|
31
|
-
RouterLink: typeof import('vue-router')['RouterLink']
|
|
32
|
-
RouterView: typeof import('vue-router')['RouterView']
|
|
33
|
-
Status: typeof import('./src/components/Base/Status.vue')['default']
|
|
34
|
-
Table: typeof import('./src/components/Elements/Table/Table.vue')['default']
|
|
35
|
-
TablePage: typeof import('./src/components/Pages/TablePage.vue')['default']
|
|
36
|
-
Test3d: typeof import('./src/components/Test3d.vue')['default']
|
|
37
|
-
Tooltip: typeof import('./src/components/Base/Tooltip.vue')['default']
|
|
38
|
-
UApp: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/App.vue')['default']
|
|
39
|
-
UAvatar: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/Avatar.vue')['default']
|
|
40
|
-
UButton: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/Button.vue')['default']
|
|
41
|
-
UCard: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/Card.vue')['default']
|
|
42
|
-
UIcon: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/vue/components/Icon.vue')['default']
|
|
43
|
-
ULinkBase: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/LinkBase.vue')['default']
|
|
44
|
-
UTable: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/Table.vue')['default']
|
|
45
|
-
}
|
|
46
|
-
}
|
package/image.png
DELETED
|
Binary file
|
package/index.html
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Vite + Vue + TS</title>
|
|
8
|
-
</head>
|
|
9
|
-
<body class="bg-white dark:bg-background">
|
|
10
|
-
<div id="app">
|
|
11
|
-
</div>
|
|
12
|
-
<script type="module" src="/src-demo/index.ts"></script>
|
|
13
|
-
</body>
|
|
14
|
-
</html>
|
package/index.js
DELETED
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts" generic="T">
|
|
2
|
-
import { computed, createApp } from "vue";
|
|
3
|
-
import type { BulletLegendItemInterface, NumericAccessor } from "@unovis/ts";
|
|
4
|
-
import { CurveType, Position } from "@unovis/ts";
|
|
5
|
-
import {
|
|
6
|
-
VisArea,
|
|
7
|
-
VisAxis,
|
|
8
|
-
VisBulletLegend,
|
|
9
|
-
VisCrosshair,
|
|
10
|
-
VisLine,
|
|
11
|
-
VisTooltip,
|
|
12
|
-
VisXYContainer,
|
|
13
|
-
} from "@unovis/vue";
|
|
14
|
-
|
|
15
|
-
import Tooltip from "./../Tooltip.vue";
|
|
16
|
-
import { PaginationPosition } from "../..";
|
|
17
|
-
|
|
18
|
-
export type AreaChartProps<T> = {
|
|
19
|
-
data: T[];
|
|
20
|
-
height: number;
|
|
21
|
-
xLabel?: string;
|
|
22
|
-
yLabel?: string;
|
|
23
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
24
|
-
xFormatter: (i: number, idx: number) => string;
|
|
25
|
-
yFormatter?: (i: number, idx?: number) => string | number;
|
|
26
|
-
curveType?: CurveType;
|
|
27
|
-
xNumTicks?: number;
|
|
28
|
-
yNumTicks?: number;
|
|
29
|
-
hideLegend?: boolean;
|
|
30
|
-
hideTooltip?: boolean;
|
|
31
|
-
gridLineX?: boolean;
|
|
32
|
-
domainLineX?: boolean;
|
|
33
|
-
gridLineY?: boolean;
|
|
34
|
-
domainLineY?: boolean;
|
|
35
|
-
paginationPoisition?: PaginationPosition;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const props = withDefaults(
|
|
39
|
-
defineProps<AreaChartProps<T>>(),
|
|
40
|
-
{
|
|
41
|
-
xNumTicks: (props) =>
|
|
42
|
-
props.data.length > 24 ? 24 / 4 : props.data.length - 1,
|
|
43
|
-
yNumTicks: (props) =>
|
|
44
|
-
props.data.length > 24 ? 24 / 4 : props.data.length - 1,
|
|
45
|
-
}
|
|
46
|
-
);
|
|
47
|
-
|
|
48
|
-
const colors = Object.values(props.categories).map((c) => c.color);
|
|
49
|
-
|
|
50
|
-
const generateTooltip = computed(() => (d: T) => {
|
|
51
|
-
const app = createApp(Tooltip, {
|
|
52
|
-
data: d,
|
|
53
|
-
categories: props.categories,
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
const container = document.createElement("div");
|
|
57
|
-
app.mount(container);
|
|
58
|
-
|
|
59
|
-
const html = container.innerHTML;
|
|
60
|
-
app.unmount();
|
|
61
|
-
|
|
62
|
-
return html;
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
function accessors(id: string): { y: NumericAccessor<T>; color: string } {
|
|
66
|
-
return {
|
|
67
|
-
y: (d: T) => Number(d[id as keyof typeof d]),
|
|
68
|
-
color: props.categories[id]?.color ?? "#3b82f6",
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
const svgDefs = colors
|
|
73
|
-
.map(
|
|
74
|
-
(color, index) => `
|
|
75
|
-
<linearGradient id="gradient${index}-${color}" gradientTransform="rotate(90)">
|
|
76
|
-
<stop offset="0%" stop-color="${color}" stop-opacity="1" />
|
|
77
|
-
<stop offset="100%" stop-color="${color}" stop-opacity="0" />
|
|
78
|
-
</linearGradient>
|
|
79
|
-
`
|
|
80
|
-
)
|
|
81
|
-
.join("");
|
|
82
|
-
</script>
|
|
83
|
-
|
|
84
|
-
<template>
|
|
85
|
-
<div
|
|
86
|
-
class="flex flex-col space-y-4"
|
|
87
|
-
:class="{
|
|
88
|
-
'flex-col-reverse': props.paginationPoisition === 'top',
|
|
89
|
-
}"
|
|
90
|
-
>
|
|
91
|
-
<VisXYContainer :data="data" :height="height" :svg-defs="svgDefs">
|
|
92
|
-
<VisTooltip
|
|
93
|
-
v-if="!hideTooltip"
|
|
94
|
-
:horizontal-placement="Position.Right"
|
|
95
|
-
:vertical-placement="Position.Top"
|
|
96
|
-
/>
|
|
97
|
-
<template v-for="(i, iKey) in Object.keys(props.categories)" :key="iKey">
|
|
98
|
-
<VisArea
|
|
99
|
-
:x="(_: T, i: number) => i"
|
|
100
|
-
v-bind="accessors(i)"
|
|
101
|
-
:color="`url(#gradient${iKey}-${colors[iKey]})`"
|
|
102
|
-
:opacity="0.5"
|
|
103
|
-
:curve-type="curveType ?? CurveType.MonotoneX"
|
|
104
|
-
/>
|
|
105
|
-
<VisLine
|
|
106
|
-
:x="(_: any, i: number) => i"
|
|
107
|
-
:y="(d: T) => d[i as keyof typeof d]"
|
|
108
|
-
:color="colors[iKey]"
|
|
109
|
-
:curve-type="curveType ?? CurveType.MonotoneX"
|
|
110
|
-
/>
|
|
111
|
-
</template>
|
|
112
|
-
|
|
113
|
-
<VisAxis
|
|
114
|
-
type="x"
|
|
115
|
-
:tick-format="xFormatter"
|
|
116
|
-
:num-ticks="xNumTicks"
|
|
117
|
-
:label="xLabel"
|
|
118
|
-
:grid-line="gridLineX"
|
|
119
|
-
:domain-line="domainLineX"
|
|
120
|
-
:tick-line="!!gridLineX"
|
|
121
|
-
/>
|
|
122
|
-
<VisAxis
|
|
123
|
-
type="y"
|
|
124
|
-
:num-ticks="yNumTicks ?? data.length"
|
|
125
|
-
:tick-format="yFormatter"
|
|
126
|
-
:label="yLabel"
|
|
127
|
-
:grid-line="gridLineY"
|
|
128
|
-
:domain-line="domainLineY"
|
|
129
|
-
:tick-line="!!gridLineY"
|
|
130
|
-
/>
|
|
131
|
-
<VisCrosshair
|
|
132
|
-
v-if="!hideTooltip"
|
|
133
|
-
color="#666"
|
|
134
|
-
:template="generateTooltip"
|
|
135
|
-
/>
|
|
136
|
-
</VisXYContainer>
|
|
137
|
-
<div v-if="!hideLegend" class="flex items center justify-end">
|
|
138
|
-
<VisBulletLegend :items="Object.values(categories)" />
|
|
139
|
-
</div>
|
|
140
|
-
</div>
|
|
141
|
-
</template>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as AreaChart } from './AreaChart.vue';
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts" generic="T">
|
|
2
|
-
import { VisXYContainer, VisAxis, VisArea, VisBulletLegend } from '@unovis/vue'
|
|
3
|
-
import { BulletLegendItemInterface, CurveType } from '@unovis/ts'
|
|
4
|
-
|
|
5
|
-
export type AreaStackedChartProps<T> = {
|
|
6
|
-
data: T[];
|
|
7
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const props = defineProps<AreaStackedChartProps<T>>()
|
|
11
|
-
|
|
12
|
-
const x = (d: any) => {
|
|
13
|
-
return Number.parseInt(d.time)
|
|
14
|
-
}
|
|
15
|
-
const y = [
|
|
16
|
-
(d: any) => d.firstTime,
|
|
17
|
-
(d: any) => d.returning
|
|
18
|
-
]
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<template>
|
|
22
|
-
<div class="flex flex-col space-y-4">
|
|
23
|
-
<VisXYContainer
|
|
24
|
-
:data="data"
|
|
25
|
-
:height="200"
|
|
26
|
-
>
|
|
27
|
-
<VisArea
|
|
28
|
-
:x="x"
|
|
29
|
-
:y="y"
|
|
30
|
-
:color="Object.values(props.categories).map((i) => i.color) "
|
|
31
|
-
:curve-type="CurveType.Linear"
|
|
32
|
-
/>
|
|
33
|
-
<VisAxis
|
|
34
|
-
type="x"
|
|
35
|
-
label="Time"
|
|
36
|
-
:num-ticks="12"
|
|
37
|
-
|
|
38
|
-
/>
|
|
39
|
-
<VisAxis
|
|
40
|
-
type="y"
|
|
41
|
-
label="Number of visitors"
|
|
42
|
-
:num-ticks="3"
|
|
43
|
-
/>
|
|
44
|
-
</VisXYContainer>
|
|
45
|
-
<div class="flex items center justify-end">
|
|
46
|
-
<VisBulletLegend
|
|
47
|
-
:items="Object.values(categories)"
|
|
48
|
-
/>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</template>
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts" generic="T">
|
|
2
|
-
import { computed, ComputedRef, createApp } from "vue";
|
|
3
|
-
import { BulletLegendItemInterface, GroupedBar, Orientation } from "@unovis/ts";
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
VisAxis,
|
|
7
|
-
VisBulletLegend,
|
|
8
|
-
VisGroupedBar,
|
|
9
|
-
VisStackedBar,
|
|
10
|
-
VisTooltip,
|
|
11
|
-
VisXYContainer,
|
|
12
|
-
} from "@unovis/vue";
|
|
13
|
-
|
|
14
|
-
import Tooltip from "./../Tooltip.vue";
|
|
15
|
-
import { PaginationPosition } from "../..";
|
|
16
|
-
|
|
17
|
-
export type BarChartProps<T> = {
|
|
18
|
-
data: T[];
|
|
19
|
-
stacked?: boolean;
|
|
20
|
-
height: number;
|
|
21
|
-
xLabel?: string;
|
|
22
|
-
yLabel?: string;
|
|
23
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
24
|
-
xFormatter: (i: number, idx?: number) => string | number;
|
|
25
|
-
yFormatter?: (i: number, idx?: number) => string | number;
|
|
26
|
-
yNumTicks?: number;
|
|
27
|
-
xNumTicks?: number;
|
|
28
|
-
yAxis: (keyof T)[];
|
|
29
|
-
groupPadding?: number;
|
|
30
|
-
barPadding?: number;
|
|
31
|
-
radius?: number;
|
|
32
|
-
hideLegend?: boolean;
|
|
33
|
-
orientation?: Orientation;
|
|
34
|
-
paginationPosition?: PaginationPosition;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
const props = withDefaults(
|
|
38
|
-
defineProps<BarChartProps<T>>(),
|
|
39
|
-
{
|
|
40
|
-
orientation: Orientation.Vertical,
|
|
41
|
-
paginationPosition: PaginationPosition.Bottom
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
const yAxis: ComputedRef<((d: T) => T[keyof T])[]> = computed(() => {
|
|
46
|
-
return props.yAxis.map((key) => (d: T) => {
|
|
47
|
-
return d[key];
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
const color = (_: T, i: number) => Object.values(props.categories)[i].color;
|
|
52
|
-
|
|
53
|
-
const generateTooltip = computed(() => (d: T) => {
|
|
54
|
-
const app = createApp(Tooltip, {
|
|
55
|
-
data: d,
|
|
56
|
-
categories: props.categories,
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
const container = document.createElement("div");
|
|
60
|
-
app.mount(container);
|
|
61
|
-
|
|
62
|
-
const html = container.innerHTML;
|
|
63
|
-
app.unmount();
|
|
64
|
-
|
|
65
|
-
return html;
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
const PaginationPositionTop = computed(() => props.paginationPosition === PaginationPosition.Top)
|
|
69
|
-
</script>
|
|
70
|
-
|
|
71
|
-
<template>
|
|
72
|
-
<div
|
|
73
|
-
class="flex flex-col space-y-4"
|
|
74
|
-
:class="{'flex-col-reverse' : PaginationPositionTop}"
|
|
75
|
-
>
|
|
76
|
-
<VisXYContainer :height="height">
|
|
77
|
-
<VisTooltip
|
|
78
|
-
:triggers="{
|
|
79
|
-
[GroupedBar.selectors.bar]: generateTooltip,
|
|
80
|
-
}"
|
|
81
|
-
/>
|
|
82
|
-
|
|
83
|
-
<VisGroupedBar
|
|
84
|
-
v-if="!stacked"
|
|
85
|
-
:data="data"
|
|
86
|
-
:x="(_: T, i: number) => i"
|
|
87
|
-
:y="yAxis"
|
|
88
|
-
:grid-line="false"
|
|
89
|
-
:domain-line="false"
|
|
90
|
-
:color="color"
|
|
91
|
-
:rounded-corners="radius ?? 0"
|
|
92
|
-
:group-padding="groupPadding ?? 0"
|
|
93
|
-
:bar-padding="barPadding ?? 0.2"
|
|
94
|
-
:orientation="orientation ?? Orientation.Vertical"
|
|
95
|
-
/>
|
|
96
|
-
<VisStackedBar
|
|
97
|
-
v-else
|
|
98
|
-
:data="data"
|
|
99
|
-
:x="(_: T, i: number) => i"
|
|
100
|
-
:y="yAxis"
|
|
101
|
-
:grid-line="false"
|
|
102
|
-
:domain-line="false"
|
|
103
|
-
:color="color"
|
|
104
|
-
:rounded-corners="radius ?? 0"
|
|
105
|
-
:group-padding="groupPadding ?? 0"
|
|
106
|
-
:bar-padding="barPadding ?? 0.2"
|
|
107
|
-
:orientation="orientation ?? Orientation.Vertical"
|
|
108
|
-
/>
|
|
109
|
-
<VisAxis
|
|
110
|
-
type="x"
|
|
111
|
-
:label="xLabel"
|
|
112
|
-
:grid-line="false"
|
|
113
|
-
:domain-line="false"
|
|
114
|
-
:tick-format="xFormatter"
|
|
115
|
-
:num-ticks="xNumTicks"
|
|
116
|
-
:tick-line="false"
|
|
117
|
-
/>
|
|
118
|
-
<VisAxis
|
|
119
|
-
type="y"
|
|
120
|
-
:label="yLabel"
|
|
121
|
-
:grid-line="orientation !== Orientation.Horizontal"
|
|
122
|
-
:domain-line="false"
|
|
123
|
-
:tick-format="yFormatter"
|
|
124
|
-
/>
|
|
125
|
-
</VisXYContainer>
|
|
126
|
-
<div v-if="!hideLegend" class="flex items center justify-end" :class="{'pb-4' : PaginationPositionTop}">
|
|
127
|
-
<VisBulletLegend :items="Object.values(categories)" />
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
</template>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as BarChart } from './BarChart.vue';
|