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.
Files changed (127) hide show
  1. package/.vscode/extensions.json +3 -0
  2. package/auto-imports.d.ts +58 -0
  3. package/components.d.ts +46 -0
  4. package/image.png +0 -0
  5. package/index.html +14 -0
  6. package/index.js +2 -0
  7. package/package.json +15 -13
  8. package/src/components/Area/AreaChart.vue +141 -0
  9. package/src/components/Area/index.ts +1 -0
  10. package/src/components/AreaStacked/AreaStackedChart.vue +51 -0
  11. package/{dist/components/AreaStacked/index.d.ts → src/components/AreaStacked/index.ts} +1 -1
  12. package/src/components/Bar/BarChart.vue +130 -0
  13. package/src/components/Bar/index.ts +1 -0
  14. package/src/components/Crosshair/Crosshair.vue +46 -0
  15. package/src/components/Crosshair/index.ts +1 -0
  16. package/src/components/Donut/DonutChart.vue +71 -0
  17. package/src/components/Donut/index.ts +1 -0
  18. package/src/components/Line/LineChart.vue +94 -0
  19. package/src/components/Line/index.ts +1 -0
  20. package/src/components/Tooltip.vue +17 -0
  21. package/src/components.ts +6 -0
  22. package/src/index.ts +6 -0
  23. package/src/shims-vue.d.ts +1 -0
  24. package/src-demo/AdminTemplate.vue +5 -0
  25. package/src-demo/App.vue +37 -0
  26. package/src-demo/AreaChartPage.vue +125 -0
  27. package/src-demo/BarChartPage.vue +166 -0
  28. package/src-demo/DashboardTemplate.vue +687 -0
  29. package/src-demo/Homepage.vue +325 -0
  30. package/src-demo/LineChartPage.vue +140 -0
  31. package/src-demo/assets/main.css +34 -0
  32. package/src-demo/components/Progress/Progress.vue +42 -0
  33. package/src-demo/components/Progress/index.ts +1 -0
  34. package/src-demo/components/Status/Status.vue +95 -0
  35. package/src-demo/components/Status/index.ts +1 -0
  36. package/src-demo/components/charts.ts +37 -0
  37. package/src-demo/components/index.ts +49 -0
  38. package/src-demo/data/AreaChartData.ts +294 -0
  39. package/src-demo/data/BarChartData.ts +79 -0
  40. package/src-demo/data/IncomeExpenseData.ts +189 -0
  41. package/src-demo/data/InvestmentData.ts +352 -0
  42. package/src-demo/data/RevenueData.ts +58 -0
  43. package/src-demo/data/VisitorsData.ts +260 -0
  44. package/src-demo/elements/Button.vue +13 -0
  45. package/src-demo/elements/Card.vue +17 -0
  46. package/src-demo/elements/Dropdown.vue +112 -0
  47. package/src-demo/elements/Logo.vue +8 -0
  48. package/src-demo/elements/Table.vue +363 -0
  49. package/src-demo/elements/TopBar.vue +40 -0
  50. package/src-demo/index.ts +58 -0
  51. package/tsconfig.json +11 -0
  52. package/vite.config.ts +63 -0
  53. package/dist/components/Area/AreaChart.cjs +0 -7
  54. package/dist/components/Area/AreaChart.cjs.map +0 -1
  55. package/dist/components/Area/AreaChart.js +0 -123
  56. package/dist/components/Area/AreaChart.js.map +0 -1
  57. package/dist/components/Area/AreaChart.vue.d.ts +0 -37
  58. package/dist/components/Area/AreaChart2.cjs +0 -2
  59. package/dist/components/Area/AreaChart2.cjs.map +0 -1
  60. package/dist/components/Area/AreaChart2.js +0 -5
  61. package/dist/components/Area/AreaChart2.js.map +0 -1
  62. package/dist/components/Area/index.d.ts +0 -1
  63. package/dist/components/AreaStacked/AreaStackedChart.cjs +0 -2
  64. package/dist/components/AreaStacked/AreaStackedChart.cjs.map +0 -1
  65. package/dist/components/AreaStacked/AreaStackedChart.js +0 -51
  66. package/dist/components/AreaStacked/AreaStackedChart.js.map +0 -1
  67. package/dist/components/AreaStacked/AreaStackedChart.vue.d.ts +0 -18
  68. package/dist/components/AreaStacked/AreaStackedChart2.cjs +0 -2
  69. package/dist/components/AreaStacked/AreaStackedChart2.cjs.map +0 -1
  70. package/dist/components/AreaStacked/AreaStackedChart2.js +0 -5
  71. package/dist/components/AreaStacked/AreaStackedChart2.js.map +0 -1
  72. package/dist/components/Bar/BarChart.cjs +0 -2
  73. package/dist/components/Bar/BarChart.cjs.map +0 -1
  74. package/dist/components/Bar/BarChart.js +0 -105
  75. package/dist/components/Bar/BarChart.js.map +0 -1
  76. package/dist/components/Bar/BarChart.vue.d.ts +0 -37
  77. package/dist/components/Bar/BarChart2.cjs +0 -2
  78. package/dist/components/Bar/BarChart2.cjs.map +0 -1
  79. package/dist/components/Bar/BarChart2.js +0 -5
  80. package/dist/components/Bar/BarChart2.js.map +0 -1
  81. package/dist/components/Bar/index.d.ts +0 -1
  82. package/dist/components/Crosshair/Crosshair.cjs +0 -2
  83. package/dist/components/Crosshair/Crosshair.cjs.map +0 -1
  84. package/dist/components/Crosshair/Crosshair.js +0 -40
  85. package/dist/components/Crosshair/Crosshair.js.map +0 -1
  86. package/dist/components/Crosshair/Crosshair.vue.d.ts +0 -38
  87. package/dist/components/Crosshair/Crosshair2.cjs +0 -2
  88. package/dist/components/Crosshair/Crosshair2.cjs.map +0 -1
  89. package/dist/components/Crosshair/Crosshair2.js +0 -5
  90. package/dist/components/Crosshair/Crosshair2.js.map +0 -1
  91. package/dist/components/Crosshair/index.d.ts +0 -1
  92. package/dist/components/Donut/DonutChart.cjs +0 -6
  93. package/dist/components/Donut/DonutChart.cjs.map +0 -1
  94. package/dist/components/Donut/DonutChart.js +0 -59
  95. package/dist/components/Donut/DonutChart.js.map +0 -1
  96. package/dist/components/Donut/DonutChart.vue.d.ts +0 -31
  97. package/dist/components/Donut/DonutChart2.cjs +0 -2
  98. package/dist/components/Donut/DonutChart2.cjs.map +0 -1
  99. package/dist/components/Donut/DonutChart2.js +0 -5
  100. package/dist/components/Donut/DonutChart2.js.map +0 -1
  101. package/dist/components/Donut/index.d.ts +0 -1
  102. package/dist/components/Line/LineChart.cjs +0 -2
  103. package/dist/components/Line/LineChart.cjs.map +0 -1
  104. package/dist/components/Line/LineChart.js +0 -85
  105. package/dist/components/Line/LineChart.js.map +0 -1
  106. package/dist/components/Line/LineChart.vue.d.ts +0 -28
  107. package/dist/components/Line/LineChart2.cjs +0 -2
  108. package/dist/components/Line/LineChart2.cjs.map +0 -1
  109. package/dist/components/Line/LineChart2.js +0 -5
  110. package/dist/components/Line/LineChart2.js.map +0 -1
  111. package/dist/components/Line/index.d.ts +0 -1
  112. package/dist/components/Tooltip.cjs +0 -2
  113. package/dist/components/Tooltip.cjs.map +0 -1
  114. package/dist/components/Tooltip.js +0 -21
  115. package/dist/components/Tooltip.js.map +0 -1
  116. package/dist/components/Tooltip.vue.d.ts +0 -14
  117. package/dist/components/Tooltip2.cjs +0 -2
  118. package/dist/components/Tooltip2.cjs.map +0 -1
  119. package/dist/components/Tooltip2.js +0 -5
  120. package/dist/components/Tooltip2.js.map +0 -1
  121. package/dist/components.d.ts +0 -6
  122. package/dist/index.cjs +0 -2
  123. package/dist/index.cjs.map +0 -1
  124. package/dist/index.d.ts +0 -5
  125. package/dist/index.js +0 -17
  126. package/dist/index.js.map +0 -1
  127. /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,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DonutChart.cjs");exports.default=e.default;
2
- //# sourceMappingURL=DonutChart2.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DonutChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import f from "./DonutChart.js";
2
- export {
3
- f as default
4
- };
5
- //# sourceMappingURL=DonutChart2.js.map
@@ -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,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./LineChart.cjs");exports.default=e.default;
2
- //# sourceMappingURL=LineChart2.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LineChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import f from "./LineChart.js";
2
- export {
3
- f as default
4
- };
5
- //# sourceMappingURL=LineChart2.js.map
@@ -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,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Tooltip.cjs");exports.default=e.default;
2
- //# sourceMappingURL=Tooltip2.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tooltip2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import f from "./Tooltip.js";
2
- export {
3
- f as default
4
- };
5
- //# sourceMappingURL=Tooltip2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tooltip2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,6 +0,0 @@
1
- export * from './components/Area';
2
- export * from './components/AreaStacked';
3
- export * from './components/Line';
4
- export * from './components/Bar';
5
- export * from './components/Donut';
6
- export * from './components/Crosshair';
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
@@ -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
@@ -1,5 +0,0 @@
1
- export * from './components';
2
- export declare enum PaginationPosition {
3
- Top = "top",
4
- Bottom = "bottom"
5
- }
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