vue-chrts 0.0.132 → 0.0.134
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/.vscode/extensions.json +3 -0
- package/auto-imports.d.ts +58 -0
- package/components.d.ts +46 -0
- package/image.png +0 -0
- package/index.html +14 -0
- package/index.js +2 -0
- package/package.json +15 -13
- package/src/components/Area/AreaChart.vue +141 -0
- package/src/components/Area/index.ts +1 -0
- package/src/components/AreaStacked/AreaStackedChart.vue +51 -0
- package/{dist/components/AreaStacked/index.d.ts → src/components/AreaStacked/index.ts} +1 -1
- package/src/components/Bar/BarChart.vue +130 -0
- package/src/components/Bar/index.ts +1 -0
- package/src/components/Crosshair/Crosshair.vue +46 -0
- package/src/components/Crosshair/index.ts +1 -0
- package/src/components/Donut/DonutChart.vue +71 -0
- package/src/components/Donut/index.ts +1 -0
- package/src/components/Line/LineChart.vue +94 -0
- package/src/components/Line/index.ts +1 -0
- package/src/components/Tooltip.vue +17 -0
- package/src/components.ts +6 -0
- package/src/index.ts +6 -0
- package/src/shims-vue.d.ts +1 -0
- package/src-demo/AdminTemplate.vue +5 -0
- package/src-demo/App.vue +37 -0
- package/src-demo/AreaChartPage.vue +125 -0
- package/src-demo/BarChartPage.vue +166 -0
- package/src-demo/DashboardTemplate.vue +687 -0
- package/src-demo/Homepage.vue +325 -0
- package/src-demo/LineChartPage.vue +140 -0
- package/src-demo/assets/main.css +34 -0
- package/src-demo/components/Progress/Progress.vue +42 -0
- package/src-demo/components/Progress/index.ts +1 -0
- package/src-demo/components/Status/Status.vue +95 -0
- package/src-demo/components/Status/index.ts +1 -0
- package/src-demo/components/charts.ts +37 -0
- package/src-demo/components/index.ts +49 -0
- package/src-demo/data/AreaChartData.ts +294 -0
- package/src-demo/data/BarChartData.ts +79 -0
- package/src-demo/data/IncomeExpenseData.ts +189 -0
- package/src-demo/data/InvestmentData.ts +352 -0
- package/src-demo/data/RevenueData.ts +58 -0
- package/src-demo/data/VisitorsData.ts +260 -0
- package/src-demo/elements/Button.vue +13 -0
- package/src-demo/elements/Card.vue +17 -0
- package/src-demo/elements/Dropdown.vue +112 -0
- package/src-demo/elements/Logo.vue +8 -0
- package/src-demo/elements/Table.vue +363 -0
- package/src-demo/elements/TopBar.vue +40 -0
- package/src-demo/index.ts +58 -0
- package/tsconfig.json +11 -0
- package/vite.config.ts +63 -0
- package/dist/components/Area/AreaChart.cjs +0 -7
- package/dist/components/Area/AreaChart.cjs.map +0 -1
- package/dist/components/Area/AreaChart.js +0 -123
- package/dist/components/Area/AreaChart.js.map +0 -1
- package/dist/components/Area/AreaChart.vue.d.ts +0 -37
- package/dist/components/Area/AreaChart2.cjs +0 -2
- package/dist/components/Area/AreaChart2.cjs.map +0 -1
- package/dist/components/Area/AreaChart2.js +0 -5
- package/dist/components/Area/AreaChart2.js.map +0 -1
- package/dist/components/Area/index.d.ts +0 -1
- package/dist/components/AreaStacked/AreaStackedChart.cjs +0 -2
- package/dist/components/AreaStacked/AreaStackedChart.cjs.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart.js +0 -51
- package/dist/components/AreaStacked/AreaStackedChart.js.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart.vue.d.ts +0 -18
- package/dist/components/AreaStacked/AreaStackedChart2.cjs +0 -2
- package/dist/components/AreaStacked/AreaStackedChart2.cjs.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart2.js +0 -5
- package/dist/components/AreaStacked/AreaStackedChart2.js.map +0 -1
- package/dist/components/Bar/BarChart.cjs +0 -2
- package/dist/components/Bar/BarChart.cjs.map +0 -1
- package/dist/components/Bar/BarChart.js +0 -105
- package/dist/components/Bar/BarChart.js.map +0 -1
- package/dist/components/Bar/BarChart.vue.d.ts +0 -37
- package/dist/components/Bar/BarChart2.cjs +0 -2
- package/dist/components/Bar/BarChart2.cjs.map +0 -1
- package/dist/components/Bar/BarChart2.js +0 -5
- package/dist/components/Bar/BarChart2.js.map +0 -1
- package/dist/components/Bar/index.d.ts +0 -1
- package/dist/components/Crosshair/Crosshair.cjs +0 -2
- package/dist/components/Crosshair/Crosshair.cjs.map +0 -1
- package/dist/components/Crosshair/Crosshair.js +0 -40
- package/dist/components/Crosshair/Crosshair.js.map +0 -1
- package/dist/components/Crosshair/Crosshair.vue.d.ts +0 -38
- package/dist/components/Crosshair/Crosshair2.cjs +0 -2
- package/dist/components/Crosshair/Crosshair2.cjs.map +0 -1
- package/dist/components/Crosshair/Crosshair2.js +0 -5
- package/dist/components/Crosshair/Crosshair2.js.map +0 -1
- package/dist/components/Crosshair/index.d.ts +0 -1
- package/dist/components/Donut/DonutChart.cjs +0 -6
- package/dist/components/Donut/DonutChart.cjs.map +0 -1
- package/dist/components/Donut/DonutChart.js +0 -59
- package/dist/components/Donut/DonutChart.js.map +0 -1
- package/dist/components/Donut/DonutChart.vue.d.ts +0 -31
- package/dist/components/Donut/DonutChart2.cjs +0 -2
- package/dist/components/Donut/DonutChart2.cjs.map +0 -1
- package/dist/components/Donut/DonutChart2.js +0 -5
- package/dist/components/Donut/DonutChart2.js.map +0 -1
- package/dist/components/Donut/index.d.ts +0 -1
- package/dist/components/Line/LineChart.cjs +0 -2
- package/dist/components/Line/LineChart.cjs.map +0 -1
- package/dist/components/Line/LineChart.js +0 -85
- package/dist/components/Line/LineChart.js.map +0 -1
- package/dist/components/Line/LineChart.vue.d.ts +0 -28
- package/dist/components/Line/LineChart2.cjs +0 -2
- package/dist/components/Line/LineChart2.cjs.map +0 -1
- package/dist/components/Line/LineChart2.js +0 -5
- package/dist/components/Line/LineChart2.js.map +0 -1
- package/dist/components/Line/index.d.ts +0 -1
- package/dist/components/Tooltip.cjs +0 -2
- package/dist/components/Tooltip.cjs.map +0 -1
- package/dist/components/Tooltip.js +0 -21
- package/dist/components/Tooltip.js.map +0 -1
- package/dist/components/Tooltip.vue.d.ts +0 -14
- package/dist/components/Tooltip2.cjs +0 -2
- package/dist/components/Tooltip2.cjs.map +0 -1
- package/dist/components/Tooltip2.js +0 -5
- package/dist/components/Tooltip2.js.map +0 -1
- package/dist/components.d.ts +0 -6
- package/dist/index.cjs +0 -2
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.ts +0 -5
- package/dist/index.js +0 -17
- package/dist/index.js.map +0 -1
- /package/{dist → public}/vite.svg +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Crosshair } from './Crosshair.vue';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@unovis/ts"),o=require("@unovis/vue"),u={class:"flex items-center justify-center"},d={key:0,class:"flex items-center justify-center mt-4"},g=e.defineComponent({__name:"DonutChart",props:{type:{},data:{},height:{},radius:{},hidePagination:{type:Boolean},labels:{}},setup(r){const n=r,s=t=>t,l=n.type==="half",a={[c.Donut.selectors.segment]:t=>(console.log(),`<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${n.labels[t.index].color} ;'></div>
|
|
2
|
-
<div>${t.data}</div>
|
|
3
|
-
</vistooltip>
|
|
4
|
-
</vissinglecontainer>
|
|
5
|
-
</div>`)};return(t,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",u,[e.createVNode(e.unref(o.VisSingleContainer),{class:e.normalizeClass(l?"mt-24":""),data:t.data,height:t.height,margin:{}},{default:e.withCtx(()=>[e.createVNode(e.unref(o.VisTooltip),{"horizontal-shift":20,"vertical-shift":20,triggers:a}),e.createVNode(e.unref(o.VisDonut),{value:s,"corner-radius":t.radius,color:n.labels.map(i=>i.color),"angle-range":l?[-1.5707963267948966,1.5707963267948966]:[]},null,8,["corner-radius","color","angle-range"])]),_:1},8,["class","data","height"]),e.renderSlot(t.$slots,"default")]),t.hidePagination?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",d,[e.createVNode(e.unref(o.VisBulletLegend),{items:t.labels},null,8,["items"])]))],64))}});exports.default=g;
|
|
6
|
-
//# sourceMappingURL=DonutChart.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart.cjs","sources":["../../../src/components/Donut/DonutChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Donut } from \"@unovis/ts\";\nimport {\n VisBulletLegend,\n VisDonut,\n VisSingleContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nexport type DonutChartProps = {\n type?: string;\n data: number[];\n height: number;\n radius: number;\n hidePagination?: boolean\n labels: {\n name: string;\n color: string;\n }[];\n }\n\nconst props = defineProps<DonutChartProps>();\n\nconst value = (d: number) => d;\n\nconst isHalf = props.type === \"half\";\n\nconst tooltip = {\n [Donut.selectors.segment]: (d: any) => {\n console.log();\n\n return `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${\n props.labels[d.index].color\n } ;'></div>\n <div>${d.data}</div>\n </vistooltip>\n </vissinglecontainer>\n </div>`;\n },\n};\n</script>\n\n<template>\n <div class=\"flex items-center justify-center\">\n <VisSingleContainer\n :class=\"isHalf ? 'mt-24' : ''\"\n :data=\"data\"\n :height=\"height\"\n :margin=\"{}\"\n >\n <VisTooltip\n :horizontal-shift=\"20\"\n :vertical-shift=\"20\"\n :triggers=\"tooltip\"\n />\n\n <VisDonut\n :value=\"value\"\n :corner-radius=\"radius\"\n :color=\"props.labels.map((l) => l.color)\"\n :angle-range=\"isHalf ? [-1.5707963267948966, 1.5707963267948966] : []\"\n />\n </VisSingleContainer>\n\n <slot />\n </div>\n\n <div v-if=\"!hidePagination\" class=\"flex items-center justify-center mt-4\">\n <VisBulletLegend :items=\"labels\" />\n </div>\n</template>\n"],"names":["props","__props","value","d","isHalf","tooltip","Donut"],"mappings":"+ZAqBA,MAAMA,EAAQC,EAERC,EAASC,GAAcA,EAEvBC,EAASJ,EAAM,OAAS,OAExBK,EAAU,CACd,CAACC,QAAM,UAAU,OAAO,EAAIH,IAC1B,QAAQ,IAAI,EAEL,kGACLH,EAAM,OAAOG,EAAE,KAAK,EAAE,KACxB;AAAA,eACWA,EAAE,IAAI;AAAA;AAAA;AAAA,UAKrB"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { defineComponent as m, createElementBlock as i, openBlock as n, Fragment as u, createElementVNode as g, createCommentVNode as h, createVNode as t, renderSlot as f, unref as o, normalizeClass as p, withCtx as v } from "vue";
|
|
2
|
-
import { Donut as y } from "@unovis/ts";
|
|
3
|
-
import { VisSingleContainer as V, VisTooltip as C, VisDonut as b, VisBulletLegend as _ } from "@unovis/vue";
|
|
4
|
-
const k = { class: "flex items-center justify-center" }, B = {
|
|
5
|
-
key: 0,
|
|
6
|
-
class: "flex items-center justify-center mt-4"
|
|
7
|
-
}, w = /* @__PURE__ */ m({
|
|
8
|
-
__name: "DonutChart",
|
|
9
|
-
props: {
|
|
10
|
-
type: {},
|
|
11
|
-
data: {},
|
|
12
|
-
height: {},
|
|
13
|
-
radius: {},
|
|
14
|
-
hidePagination: { type: Boolean },
|
|
15
|
-
labels: {}
|
|
16
|
-
},
|
|
17
|
-
setup(a) {
|
|
18
|
-
const s = a, r = (e) => e, l = s.type === "half", c = {
|
|
19
|
-
[y.selectors.segment]: (e) => (console.log(), `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${s.labels[e.index].color} ;'></div>
|
|
20
|
-
<div>${e.data}</div>
|
|
21
|
-
</vistooltip>
|
|
22
|
-
</vissinglecontainer>
|
|
23
|
-
</div>`)
|
|
24
|
-
};
|
|
25
|
-
return (e, D) => (n(), i(u, null, [
|
|
26
|
-
g("div", k, [
|
|
27
|
-
t(o(V), {
|
|
28
|
-
class: p(l ? "mt-24" : ""),
|
|
29
|
-
data: e.data,
|
|
30
|
-
height: e.height,
|
|
31
|
-
margin: {}
|
|
32
|
-
}, {
|
|
33
|
-
default: v(() => [
|
|
34
|
-
t(o(C), {
|
|
35
|
-
"horizontal-shift": 20,
|
|
36
|
-
"vertical-shift": 20,
|
|
37
|
-
triggers: c
|
|
38
|
-
}),
|
|
39
|
-
t(o(b), {
|
|
40
|
-
value: r,
|
|
41
|
-
"corner-radius": e.radius,
|
|
42
|
-
color: s.labels.map((d) => d.color),
|
|
43
|
-
"angle-range": l ? [-1.5707963267948966, 1.5707963267948966] : []
|
|
44
|
-
}, null, 8, ["corner-radius", "color", "angle-range"])
|
|
45
|
-
]),
|
|
46
|
-
_: 1
|
|
47
|
-
}, 8, ["class", "data", "height"]),
|
|
48
|
-
f(e.$slots, "default")
|
|
49
|
-
]),
|
|
50
|
-
e.hidePagination ? h("", !0) : (n(), i("div", B, [
|
|
51
|
-
t(o(_), { items: e.labels }, null, 8, ["items"])
|
|
52
|
-
]))
|
|
53
|
-
], 64));
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
export {
|
|
57
|
-
w as default
|
|
58
|
-
};
|
|
59
|
-
//# sourceMappingURL=DonutChart.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart.js","sources":["../../../src/components/Donut/DonutChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Donut } from \"@unovis/ts\";\nimport {\n VisBulletLegend,\n VisDonut,\n VisSingleContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nexport type DonutChartProps = {\n type?: string;\n data: number[];\n height: number;\n radius: number;\n hidePagination?: boolean\n labels: {\n name: string;\n color: string;\n }[];\n }\n\nconst props = defineProps<DonutChartProps>();\n\nconst value = (d: number) => d;\n\nconst isHalf = props.type === \"half\";\n\nconst tooltip = {\n [Donut.selectors.segment]: (d: any) => {\n console.log();\n\n return `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${\n props.labels[d.index].color\n } ;'></div>\n <div>${d.data}</div>\n </vistooltip>\n </vissinglecontainer>\n </div>`;\n },\n};\n</script>\n\n<template>\n <div class=\"flex items-center justify-center\">\n <VisSingleContainer\n :class=\"isHalf ? 'mt-24' : ''\"\n :data=\"data\"\n :height=\"height\"\n :margin=\"{}\"\n >\n <VisTooltip\n :horizontal-shift=\"20\"\n :vertical-shift=\"20\"\n :triggers=\"tooltip\"\n />\n\n <VisDonut\n :value=\"value\"\n :corner-radius=\"radius\"\n :color=\"props.labels.map((l) => l.color)\"\n :angle-range=\"isHalf ? [-1.5707963267948966, 1.5707963267948966] : []\"\n />\n </VisSingleContainer>\n\n <slot />\n </div>\n\n <div v-if=\"!hidePagination\" class=\"flex items-center justify-center mt-4\">\n <VisBulletLegend :items=\"labels\" />\n </div>\n</template>\n"],"names":["props","__props","value","d","isHalf","tooltip","Donut"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAcA,GAEvBC,IAASJ,EAAM,SAAS,QAExBK,IAAU;AAAA,MACd,CAACC,EAAM,UAAU,OAAO,GAAG,CAACH,OAC1B,QAAQ,IAAI,GAEL,kGACLH,EAAM,OAAOG,EAAE,KAAK,EAAE,KACxB;AAAA,eACWA,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA,IAKrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
export type DonutChartProps = {
|
|
2
|
-
type?: string;
|
|
3
|
-
data: number[];
|
|
4
|
-
height: number;
|
|
5
|
-
radius: number;
|
|
6
|
-
hidePagination?: boolean;
|
|
7
|
-
labels: {
|
|
8
|
-
name: string;
|
|
9
|
-
color: string;
|
|
10
|
-
}[];
|
|
11
|
-
};
|
|
12
|
-
declare function __VLS_template(): {
|
|
13
|
-
default?(_: {}): any;
|
|
14
|
-
};
|
|
15
|
-
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
16
|
-
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
17
|
-
export default _default;
|
|
18
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
19
|
-
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
20
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
21
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
22
|
-
} : {
|
|
23
|
-
type: import('vue').PropType<T[K]>;
|
|
24
|
-
required: true;
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
28
|
-
new (): {
|
|
29
|
-
$slots: S;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DonutChart } from './DonutChart.vue';
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("@unovis/ts"),d=require("../Tooltip.cjs"),o=require("@unovis/vue"),f={class:"flex items center justify-end"},y=e.defineComponent({__name:"LineChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{type:Function},yFormatter:{type:Function},curveType:{},yNumTicks:{},xNumTicks:{},paginationPosition:{}},setup(s){const n=s,u=t=>Object.values(n.categories)[t].color,m=e.computed(()=>t=>{const i=e.createApp(d.default,{data:t,categories:n.categories}),r=document.createElement("div");i.mount(r);const a=r.innerHTML;return i.unmount(),a});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["space-y-4 flex flex-col",{"flex-col-reverse":n.paginationPosition==="top"}])},[e.createVNode(e.unref(o.VisXYContainer),{data:t.data,height:t.height},{default:e.withCtx(()=>[e.createVNode(e.unref(o.VisTooltip),{"horizontal-placement":e.unref(l.Position).Right,"vertical-placement":e.unref(l.Position).Top},null,8,["horizontal-placement","vertical-placement"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(n.categories),(r,a)=>(e.openBlock(),e.createBlock(e.unref(o.VisLine),{key:a,x:(c,p)=>p,y:c=>c[r],color:u(a),"curve-type":t.curveType??e.unref(l.CurveType).MonotoneX},null,8,["x","y","color","curve-type"]))),128)),e.createVNode(e.unref(o.VisAxis),{type:"x","tick-format":t.xFormatter,"num-ticks":t.xNumTicks??4,label:t.xLabel,"label-margin":8,"domain-line":!1,"grid-line":!1},null,8,["tick-format","num-ticks","label"]),e.createVNode(e.unref(o.VisAxis),{type:"y","num-ticks":t.yNumTicks??4,"tick-format":t.yFormatter,label:t.yLabel,"domain-line":!1},null,8,["num-ticks","tick-format","label"]),e.createVNode(e.unref(o.VisCrosshair),{color:"#666",template:m.value},null,8,["template"])]),_:1},8,["data","height"]),e.createElementVNode("div",f,[e.createVNode(e.unref(o.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])],2))}});exports.default=y;
|
|
2
|
-
//# sourceMappingURL=LineChart.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.cjs","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, BulletLegendItemInterface, Position } from \"@unovis/ts\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../..\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nexport type LineChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx: number) => string;\n curveType?: CurveType;\n yNumTicks?: number;\n xNumTicks?: number;\n paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n});\n</script>\n\n<template>\n <div\n class=\"space-y-4 flex flex-col\"\n :class=\"{\n 'flex-col-reverse': props.paginationPosition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\">\n <VisTooltip\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"color(iKey)\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks ?? 4\"\n :label=\"xLabel\"\n :label-margin=\"8\"\n :domain-line=\"false\"\n :grid-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? 4\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :domain-line=\"false\"\n />\n <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":"0dA+BA,MAAMA,EAAQC,EAERC,EAASC,GAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,MAE9DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CACzC,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,CAAA,CACR"}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { defineComponent as g, computed as h, createApp as k, createElementBlock as c, openBlock as r, normalizeClass as v, createVNode as o, createElementVNode as b, unref as t, withCtx as T, Fragment as L, renderList as V, createBlock as x } from "vue";
|
|
2
|
-
import { Position as m, CurveType as C } from "@unovis/ts";
|
|
3
|
-
import F from "../Tooltip.js";
|
|
4
|
-
import { VisXYContainer as N, VisTooltip as j, VisLine as B, VisAxis as u, VisCrosshair as z, VisBulletLegend as E } from "@unovis/vue";
|
|
5
|
-
const O = { class: "flex items center justify-end" }, _ = /* @__PURE__ */ g({
|
|
6
|
-
__name: "LineChart",
|
|
7
|
-
props: {
|
|
8
|
-
data: {},
|
|
9
|
-
height: {},
|
|
10
|
-
xLabel: {},
|
|
11
|
-
yLabel: {},
|
|
12
|
-
categories: {},
|
|
13
|
-
xFormatter: { type: Function },
|
|
14
|
-
yFormatter: { type: Function },
|
|
15
|
-
curveType: {},
|
|
16
|
-
yNumTicks: {},
|
|
17
|
-
xNumTicks: {},
|
|
18
|
-
paginationPosition: {}
|
|
19
|
-
},
|
|
20
|
-
setup(p) {
|
|
21
|
-
const a = p, d = (e) => Object.values(a.categories)[e].color, f = h(() => (e) => {
|
|
22
|
-
const l = k(F, {
|
|
23
|
-
data: e,
|
|
24
|
-
categories: a.categories
|
|
25
|
-
}), i = document.createElement("div");
|
|
26
|
-
l.mount(i);
|
|
27
|
-
const n = i.innerHTML;
|
|
28
|
-
return l.unmount(), n;
|
|
29
|
-
});
|
|
30
|
-
return (e, l) => (r(), c("div", {
|
|
31
|
-
class: v(["space-y-4 flex flex-col", {
|
|
32
|
-
"flex-col-reverse": a.paginationPosition === "top"
|
|
33
|
-
}])
|
|
34
|
-
}, [
|
|
35
|
-
o(t(N), {
|
|
36
|
-
data: e.data,
|
|
37
|
-
height: e.height
|
|
38
|
-
}, {
|
|
39
|
-
default: T(() => [
|
|
40
|
-
o(t(j), {
|
|
41
|
-
"horizontal-placement": t(m).Right,
|
|
42
|
-
"vertical-placement": t(m).Top
|
|
43
|
-
}, null, 8, ["horizontal-placement", "vertical-placement"]),
|
|
44
|
-
(r(!0), c(L, null, V(Object.keys(a.categories), (i, n) => (r(), x(t(B), {
|
|
45
|
-
key: n,
|
|
46
|
-
x: (s, y) => y,
|
|
47
|
-
y: (s) => s[i],
|
|
48
|
-
color: d(n),
|
|
49
|
-
"curve-type": e.curveType ?? t(C).MonotoneX
|
|
50
|
-
}, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
|
|
51
|
-
o(t(u), {
|
|
52
|
-
type: "x",
|
|
53
|
-
"tick-format": e.xFormatter,
|
|
54
|
-
"num-ticks": e.xNumTicks ?? 4,
|
|
55
|
-
label: e.xLabel,
|
|
56
|
-
"label-margin": 8,
|
|
57
|
-
"domain-line": !1,
|
|
58
|
-
"grid-line": !1
|
|
59
|
-
}, null, 8, ["tick-format", "num-ticks", "label"]),
|
|
60
|
-
o(t(u), {
|
|
61
|
-
type: "y",
|
|
62
|
-
"num-ticks": e.yNumTicks ?? 4,
|
|
63
|
-
"tick-format": e.yFormatter,
|
|
64
|
-
label: e.yLabel,
|
|
65
|
-
"domain-line": !1
|
|
66
|
-
}, null, 8, ["num-ticks", "tick-format", "label"]),
|
|
67
|
-
o(t(z), {
|
|
68
|
-
color: "#666",
|
|
69
|
-
template: f.value
|
|
70
|
-
}, null, 8, ["template"])
|
|
71
|
-
]),
|
|
72
|
-
_: 1
|
|
73
|
-
}, 8, ["data", "height"]),
|
|
74
|
-
b("div", O, [
|
|
75
|
-
o(t(E), {
|
|
76
|
-
items: Object.values(e.categories)
|
|
77
|
-
}, null, 8, ["items"])
|
|
78
|
-
])
|
|
79
|
-
], 2));
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
export {
|
|
83
|
-
_ as default
|
|
84
|
-
};
|
|
85
|
-
//# sourceMappingURL=LineChart.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.js","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, BulletLegendItemInterface, Position } from \"@unovis/ts\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../..\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nexport type LineChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx: number) => string;\n curveType?: CurveType;\n yNumTicks?: number;\n xNumTicks?: number;\n paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n});\n</script>\n\n<template>\n <div\n class=\"space-y-4 flex flex-col\"\n :class=\"{\n 'flex-col-reverse': props.paginationPosition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\">\n <VisTooltip\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"color(iKey)\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks ?? 4\"\n :label=\"xLabel\"\n :label-margin=\"8\"\n :domain-line=\"false\"\n :grid-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? 4\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :domain-line=\"false\"\n />\n <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,OAE9DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AACzC,YAAAC,IAAMC,EAAUC,GAAS;AAAA,QAC7B,MAAMH;AAAA,QACN,YAAYN,EAAM;AAAA,MAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,MAAAH,EAAI,MAAMG,CAAS;AAEnB,YAAMC,IAAOD,EAAU;AACvB,aAAAH,EAAI,QAAQ,GAELI;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { CurveType, BulletLegendItemInterface } from '@unovis/ts';
|
|
2
|
-
import { PaginationPosition } from '../..';
|
|
3
|
-
|
|
4
|
-
export type LineChartProps<T> = {
|
|
5
|
-
data: T[];
|
|
6
|
-
height: number;
|
|
7
|
-
xLabel?: string;
|
|
8
|
-
yLabel?: string;
|
|
9
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
10
|
-
xFormatter: (i: number, idx: number) => string;
|
|
11
|
-
yFormatter?: (i: number, idx: number) => string;
|
|
12
|
-
curveType?: CurveType;
|
|
13
|
-
yNumTicks?: number;
|
|
14
|
-
xNumTicks?: number;
|
|
15
|
-
paginationPosition?: PaginationPosition;
|
|
16
|
-
};
|
|
17
|
-
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<{
|
|
18
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & LineChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
|
|
19
|
-
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
20
|
-
attrs: any;
|
|
21
|
-
slots: ReturnType<() => {}>;
|
|
22
|
-
emit: typeof __VLS_emit;
|
|
23
|
-
}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
24
|
-
[key: string]: any;
|
|
25
|
-
}> & {
|
|
26
|
-
__ctx?: Awaited<typeof __VLS_setup>;
|
|
27
|
-
};
|
|
28
|
-
export default _default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as LineChart } from './LineChart.vue';
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l={class:"flex flex-col"},s={class:"flex items-center mr-2 mt-2"},r={class:"font-semibold capitalize text-white/75"},c={class:"font-normal"},a=e.defineComponent({__name:"Tooltip",props:{data:{}},setup(i){return(o,d)=>(e.openBlock(),e.createElementBlock("div",l,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.entries(o.data),([t,n])=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},[e.createElementVNode("div",s,[e.createElementVNode("span",r,e.toDisplayString(t)+":",1)]),e.createElementVNode("span",c,e.toDisplayString(n),1)],64))),128))]))}});exports.default=a;
|
|
2
|
-
//# sourceMappingURL=Tooltip.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,21 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
|
@@ -1,14 +0,0 @@
|
|
|
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;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/components.d.ts
DELETED
package/dist/index.cjs
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
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/Line/LineChart.cjs"),a=require("./components/Bar/BarChart.cjs"),s=require("./components/Donut/DonutChart.cjs"),p=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.LineChart=_.default;exports.BarChart=a.default;exports.DonutChart=s.default;exports.Crosshair=p.default;exports.PaginationPosition=t;
|
|
2
|
-
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\n\nexport enum PaginationPosition {\n Top = \"top\",\n Bottom = \"bottom\",\n}\n"],"names":["PaginationPosition"],"mappings":"uXAEY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA"}
|
package/dist/index.d.ts
DELETED
package/dist/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { default as o } from "./components/Area/AreaChart.js";
|
|
2
|
-
import { default as p } from "./components/AreaStacked/AreaStackedChart.js";
|
|
3
|
-
import { default as u } from "./components/Line/LineChart.js";
|
|
4
|
-
import { default as s } from "./components/Bar/BarChart.js";
|
|
5
|
-
import { default as h } from "./components/Donut/DonutChart.js";
|
|
6
|
-
import { default as C } from "./components/Crosshair/Crosshair.js";
|
|
7
|
-
var t = /* @__PURE__ */ ((r) => (r.Top = "top", r.Bottom = "bottom", r))(t || {});
|
|
8
|
-
export {
|
|
9
|
-
o as AreaChart,
|
|
10
|
-
p as AreaStackedChart,
|
|
11
|
-
s as BarChart,
|
|
12
|
-
C as Crosshair,
|
|
13
|
-
h as DonutChart,
|
|
14
|
-
u as LineChart,
|
|
15
|
-
t as PaginationPosition
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\n\nexport enum PaginationPosition {\n Top = \"top\",\n Bottom = \"bottom\",\n}\n"],"names":["PaginationPosition"],"mappings":";;;;;;AAEY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;"}
|
|
File without changes
|