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,123 +0,0 @@
1
- import { defineComponent as b, computed as B, createApp as V, createElementBlock as c, openBlock as r, normalizeClass as C, createVNode as l, createCommentVNode as u, unref as t, withCtx as X, createBlock as g, Fragment as f, renderList as N, mergeProps as $ } from "vue";
2
- import { Position as y, CurveType as h } from "@unovis/ts";
3
- import { VisXYContainer as Y, VisTooltip as j, VisArea as F, VisLine as A, VisAxis as k, VisCrosshair as P, VisBulletLegend as z } from "@unovis/vue";
4
- import M from "../Tooltip.js";
5
- const O = {
6
- key: 0,
7
- class: "flex items center justify-end"
8
- }, H = /* @__PURE__ */ b({
9
- __name: "AreaChart",
10
- props: {
11
- data: {},
12
- height: {},
13
- xLabel: {},
14
- yLabel: {},
15
- categories: {},
16
- xFormatter: {},
17
- yFormatter: {},
18
- curveType: {},
19
- xNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
20
- yNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
21
- hideLegend: { type: Boolean },
22
- hideTooltip: { type: Boolean },
23
- gridLineX: { type: Boolean },
24
- domainLineX: { type: Boolean },
25
- gridLineY: { type: Boolean },
26
- domainLineY: { type: Boolean },
27
- paginationPoisition: {}
28
- },
29
- setup(i) {
30
- const s = i, m = Object.values(s.categories).map((e) => e.color), v = B(() => (e) => {
31
- const o = V(M, {
32
- data: e,
33
- categories: s.categories
34
- }), n = document.createElement("div");
35
- o.mount(n);
36
- const a = n.innerHTML;
37
- return o.unmount(), a;
38
- });
39
- function L(e) {
40
- var o;
41
- return {
42
- y: (n) => Number(n[e]),
43
- color: ((o = s.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
44
- };
45
- }
46
- const T = m.map(
47
- (e, o) => `
48
- <linearGradient id="gradient${o}-${e}" gradientTransform="rotate(90)">
49
- <stop offset="0%" stop-color="${e}" stop-opacity="1" />
50
- <stop offset="100%" stop-color="${e}" stop-opacity="0" />
51
- </linearGradient>
52
- `
53
- ).join("");
54
- return (e, o) => (r(), c("div", {
55
- class: C(["flex flex-col space-y-4", {
56
- "flex-col-reverse": s.paginationPoisition === "top"
57
- }])
58
- }, [
59
- l(t(Y), {
60
- data: e.data,
61
- height: e.height,
62
- "svg-defs": t(T)
63
- }, {
64
- default: X(() => [
65
- e.hideTooltip ? u("", !0) : (r(), g(t(j), {
66
- key: 0,
67
- "horizontal-placement": t(y).Right,
68
- "vertical-placement": t(y).Top
69
- }, null, 8, ["horizontal-placement", "vertical-placement"])),
70
- (r(!0), c(f, null, N(Object.keys(s.categories), (n, a) => (r(), c(f, { key: a }, [
71
- l(t(F), $({
72
- x: (d, p) => p,
73
- ref_for: !0
74
- }, L(n), {
75
- color: `url(#gradient${a}-${t(m)[a]})`,
76
- opacity: 0.5,
77
- "curve-type": e.curveType ?? t(h).MonotoneX
78
- }), null, 16, ["x", "color", "curve-type"]),
79
- l(t(A), {
80
- x: (d, p) => p,
81
- y: (d) => d[n],
82
- color: t(m)[a],
83
- "curve-type": e.curveType ?? t(h).MonotoneX
84
- }, null, 8, ["x", "y", "color", "curve-type"])
85
- ], 64))), 128)),
86
- l(t(k), {
87
- type: "x",
88
- "tick-format": e.xFormatter,
89
- "num-ticks": e.xNumTicks,
90
- label: e.xLabel,
91
- "grid-line": e.gridLineX,
92
- "domain-line": e.domainLineX,
93
- "tick-line": !!e.gridLineX
94
- }, null, 8, ["tick-format", "num-ticks", "label", "grid-line", "domain-line", "tick-line"]),
95
- l(t(k), {
96
- type: "y",
97
- "num-ticks": e.yNumTicks ?? e.data.length,
98
- "tick-format": e.yFormatter,
99
- label: e.yLabel,
100
- "grid-line": e.gridLineY,
101
- "domain-line": e.domainLineY,
102
- "tick-line": !!e.gridLineY
103
- }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
104
- e.hideTooltip ? u("", !0) : (r(), g(t(P), {
105
- key: 1,
106
- color: "#666",
107
- template: v.value
108
- }, null, 8, ["template"]))
109
- ]),
110
- _: 1
111
- }, 8, ["data", "height", "svg-defs"]),
112
- e.hideLegend ? u("", !0) : (r(), c("div", O, [
113
- l(t(z), {
114
- items: Object.values(e.categories)
115
- }, null, 8, ["items"])
116
- ]))
117
- ], 2));
118
- }
119
- });
120
- export {
121
- H as default
122
- };
123
- //# sourceMappingURL=AreaChart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AreaChart.js","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport type { BulletLegendItemInterface, NumericAccessor } from \"@unovis/ts\";\nimport { CurveType, Position } from \"@unovis/ts\";\nimport {\n VisArea,\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisTooltip,\n VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../..\";\n\nexport type AreaChartProps<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 | number;\n curveType?: CurveType;\n xNumTicks?: number;\n yNumTicks?: number;\n hideLegend?: boolean;\n hideTooltip?: boolean;\n gridLineX?: boolean;\n domainLineX?: boolean;\n gridLineY?: boolean;\n domainLineY?: boolean;\n paginationPoisition?: PaginationPosition;\n }\n\nconst props = withDefaults(\n defineProps<AreaChartProps<T>>(),\n {\n xNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n yNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n }\n);\n\nconst colors = Object.values(props.categories).map((c) => c.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\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n return {\n y: (d: T) => Number(d[id as keyof typeof d]),\n color: props.categories[id]?.color ?? \"#3b82f6\",\n };\n}\n\nconst svgDefs = colors\n .map(\n (color, index) => `\n <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n </linearGradient>\n`\n )\n .join(\"\");\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{\n 'flex-col-reverse': props.paginationPoisition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\" :svg-defs=\"svgDefs\">\n <VisTooltip\n v-if=\"!hideTooltip\"\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 <VisArea\n :x=\"(_: T, i: number) => i\"\n v-bind=\"accessors(i)\"\n :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n :opacity=\"0.5\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"colors[iKey]\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :label=\"xLabel\"\n :grid-line=\"gridLineX\"\n :domain-line=\"domainLineX\"\n :tick-line=\"!!gridLineX\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? data.length\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :grid-line=\"gridLineY\"\n :domain-line=\"domainLineY\"\n :tick-line=\"!!gridLineY\"\n />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\n </VisXYContainer>\n <div v-if=\"!hideLegend\" class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,UAAMA,IAAQC,GAURC,IAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAI,CAACG,MAAMA,EAAE,KAAK,GAE3DC,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;AAED,aAASC,EAAUC,GAAsD;;AAChE,aAAA;AAAA,QACL,GAAG,CAACP,MAAS,OAAOA,EAAEO,CAAoB,CAAC;AAAA,QAC3C,SAAOC,IAAAd,EAAM,WAAWa,CAAE,MAAnB,gBAAAC,EAAsB,UAAS;AAAA,MACxC;AAAA,IAAA;AAGF,UAAMC,IAAUb,EACb;AAAA,MACC,CAACc,GAAOC,MAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA;AAAA,IAAA,EAIxC,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,37 +0,0 @@
1
- import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
2
- import { PaginationPosition } from '../..';
3
-
4
- export type AreaChartProps<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 | number;
12
- curveType?: CurveType;
13
- xNumTicks?: number;
14
- yNumTicks?: number;
15
- hideLegend?: boolean;
16
- hideTooltip?: boolean;
17
- gridLineX?: boolean;
18
- domainLineX?: boolean;
19
- gridLineY?: boolean;
20
- domainLineY?: boolean;
21
- paginationPoisition?: PaginationPosition;
22
- };
23
- 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<{
24
- props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
25
- expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
26
- attrs: any;
27
- slots: ReturnType<() => {}>;
28
- emit: typeof __VLS_emit;
29
- }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
30
- [key: string]: any;
31
- }> & {
32
- __ctx?: Awaited<typeof __VLS_setup>;
33
- };
34
- export default _default;
35
- type __VLS_Prettify<T> = {
36
- [K in keyof T]: T[K];
37
- } & {};
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./AreaChart.cjs");exports.default=e.default;
2
- //# sourceMappingURL=AreaChart2.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AreaChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import f from "./AreaChart.js";
2
- export {
3
- f as default
4
- };
5
- //# sourceMappingURL=AreaChart2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AreaChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1 +0,0 @@
1
- export { default as AreaChart } from './AreaChart.vue';
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@unovis/vue"),i=require("@unovis/ts"),u={class:"flex flex-col space-y-4"},l={class:"flex items center justify-end"},d=e.defineComponent({__name:"AreaStackedChart",props:{data:{},categories:{}},setup(s){const o=s,a=t=>Number.parseInt(t.time),n=[t=>t.firstTime,t=>t.returning];return(t,f)=>(e.openBlock(),e.createElementBlock("div",u,[e.createVNode(e.unref(r.VisXYContainer),{data:t.data,height:200},{default:e.withCtx(()=>[e.createVNode(e.unref(r.VisArea),{x:a,y:n,color:Object.values(o.categories).map(c=>c.color),"curve-type":e.unref(i.CurveType).Linear},null,8,["color","curve-type"]),e.createVNode(e.unref(r.VisAxis),{type:"x",label:"Time","num-ticks":12}),e.createVNode(e.unref(r.VisAxis),{type:"y",label:"Number of visitors","num-ticks":3})]),_:1},8,["data"]),e.createElementVNode("div",l,[e.createVNode(e.unref(r.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])]))}});exports.default=d;
2
- //# sourceMappingURL=AreaStackedChart.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AreaStackedChart.cjs","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { VisXYContainer, VisAxis, VisArea, VisBulletLegend } from '@unovis/vue'\nimport { BulletLegendItemInterface, CurveType } from '@unovis/ts'\n\nexport type AreaStackedChartProps<T> = {\n data: T[];\n categories: Record<string, BulletLegendItemInterface>;\n }\n\nconst props = defineProps<AreaStackedChartProps<T>>()\n\nconst x = (d: any) => {\n return Number.parseInt(d.time)\n}\nconst y = [\n (d: any) => d.firstTime,\n (d: any) => d.returning\n]\n</script>\n\n<template>\n <div class=\"flex flex-col space-y-4\">\n <VisXYContainer\n :data=\"data\"\n :height=\"200\"\n >\n <VisArea\n :x=\"x\"\n :y=\"y\"\n :color=\"Object.values(props.categories).map((i) => i.color) \"\n :curve-type=\"CurveType.Linear\"\n />\n <VisAxis\n type=\"x\"\n label=\"Time\"\n :num-ticks=\"12\"\n\n />\n <VisAxis\n type=\"y\"\n label=\"Number of visitors\"\n :num-ticks=\"3\"\n />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend\n :items=\"Object.values(categories)\"\n />\n </div>\n </div>\n</template>"],"names":["props","__props","x","d","y"],"mappings":"wVASA,MAAMA,EAAQC,EAERC,EAAKC,GACF,OAAO,SAASA,EAAE,IAAI,EAEzBC,EAAI,CACPD,GAAWA,EAAE,UACbA,GAAWA,EAAE,SAChB"}
@@ -1,51 +0,0 @@
1
- import { defineComponent as l, createElementBlock as m, openBlock as u, createVNode as r, createElementVNode as p, unref as t, withCtx as d } from "vue";
2
- import { VisXYContainer as f, VisArea as y, VisAxis as s, VisBulletLegend as _ } from "@unovis/vue";
3
- import { CurveType as v } from "@unovis/ts";
4
- const h = { class: "flex flex-col space-y-4" }, x = { class: "flex items center justify-end" }, C = /* @__PURE__ */ l({
5
- __name: "AreaStackedChart",
6
- props: {
7
- data: {},
8
- categories: {}
9
- },
10
- setup(o) {
11
- const a = o, i = (e) => Number.parseInt(e.time), c = [
12
- (e) => e.firstTime,
13
- (e) => e.returning
14
- ];
15
- return (e, b) => (u(), m("div", h, [
16
- r(t(f), {
17
- data: e.data,
18
- height: 200
19
- }, {
20
- default: d(() => [
21
- r(t(y), {
22
- x: i,
23
- y: c,
24
- color: Object.values(a.categories).map((n) => n.color),
25
- "curve-type": t(v).Linear
26
- }, null, 8, ["color", "curve-type"]),
27
- r(t(s), {
28
- type: "x",
29
- label: "Time",
30
- "num-ticks": 12
31
- }),
32
- r(t(s), {
33
- type: "y",
34
- label: "Number of visitors",
35
- "num-ticks": 3
36
- })
37
- ]),
38
- _: 1
39
- }, 8, ["data"]),
40
- p("div", x, [
41
- r(t(_), {
42
- items: Object.values(e.categories)
43
- }, null, 8, ["items"])
44
- ])
45
- ]));
46
- }
47
- });
48
- export {
49
- C as default
50
- };
51
- //# sourceMappingURL=AreaStackedChart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AreaStackedChart.js","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { VisXYContainer, VisAxis, VisArea, VisBulletLegend } from '@unovis/vue'\nimport { BulletLegendItemInterface, CurveType } from '@unovis/ts'\n\nexport type AreaStackedChartProps<T> = {\n data: T[];\n categories: Record<string, BulletLegendItemInterface>;\n }\n\nconst props = defineProps<AreaStackedChartProps<T>>()\n\nconst x = (d: any) => {\n return Number.parseInt(d.time)\n}\nconst y = [\n (d: any) => d.firstTime,\n (d: any) => d.returning\n]\n</script>\n\n<template>\n <div class=\"flex flex-col space-y-4\">\n <VisXYContainer\n :data=\"data\"\n :height=\"200\"\n >\n <VisArea\n :x=\"x\"\n :y=\"y\"\n :color=\"Object.values(props.categories).map((i) => i.color) \"\n :curve-type=\"CurveType.Linear\"\n />\n <VisAxis\n type=\"x\"\n label=\"Time\"\n :num-ticks=\"12\"\n\n />\n <VisAxis\n type=\"y\"\n label=\"Number of visitors\"\n :num-ticks=\"3\"\n />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend\n :items=\"Object.values(categories)\"\n />\n </div>\n </div>\n</template>"],"names":["props","__props","x","d","y"],"mappings":";;;;;;;;;;AASA,UAAMA,IAAQC,GAERC,IAAI,CAACC,MACF,OAAO,SAASA,EAAE,IAAI,GAEzBC,IAAI;AAAA,MACR,CAACD,MAAWA,EAAE;AAAA,MACd,CAACA,MAAWA,EAAE;AAAA,IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,18 +0,0 @@
1
- import { BulletLegendItemInterface } from '@unovis/ts';
2
-
3
- export type AreaStackedChartProps<T> = {
4
- data: T[];
5
- categories: Record<string, BulletLegendItemInterface>;
6
- };
7
- 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<{
8
- props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaStackedChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
9
- expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
10
- attrs: any;
11
- slots: ReturnType<() => {}>;
12
- emit: typeof __VLS_emit;
13
- }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
14
- [key: string]: any;
15
- }> & {
16
- __ctx?: Awaited<typeof __VLS_setup>;
17
- };
18
- export default _default;
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./AreaStackedChart.cjs");exports.default=e.default;
2
- //# sourceMappingURL=AreaStackedChart2.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AreaStackedChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import f from "./AreaStackedChart.js";
2
- export {
3
- f as default
4
- };
5
- //# sourceMappingURL=AreaStackedChart2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AreaStackedChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("@unovis/ts"),i=require("@unovis/vue"),m=require("../Tooltip.cjs"),c=require("../../index.cjs"),f=e.defineComponent({__name:"BarChart",props:{data:{},stacked:{type:Boolean},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},yNumTicks:{},xNumTicks:{},yAxis:{},groupPadding:{},barPadding:{},radius:{},hideLegend:{type:Boolean},orientation:{default:o.Orientation.Vertical},paginationPosition:{default:c.PaginationPosition.Bottom}},setup(p){const r=p,d=e.computed(()=>r.yAxis.map(a=>n=>n[a])),s=(a,n)=>Object.values(r.categories)[n].color,g=e.computed(()=>a=>{const n=e.createApp(m.default,{data:a,categories:r.categories}),l=document.createElement("div");n.mount(l);const t=l.innerHTML;return n.unmount(),t}),u=e.computed(()=>r.paginationPosition===c.PaginationPosition.Top);return(a,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":u.value}])},[e.createVNode(e.unref(i.VisXYContainer),{height:a.height},{default:e.withCtx(()=>[e.createVNode(e.unref(i.VisTooltip),{triggers:{[e.unref(o.GroupedBar).selectors.bar]:g.value}},null,8,["triggers"]),a.stacked?(e.openBlock(),e.createBlock(e.unref(i.VisStackedBar),{key:1,data:a.data,x:(l,t)=>t,y:d.value,"grid-line":!1,"domain-line":!1,color:s,"rounded-corners":a.radius??0,"group-padding":a.groupPadding??0,"bar-padding":a.barPadding??.2,orientation:a.orientation??e.unref(o.Orientation).Vertical},null,8,["data","x","y","rounded-corners","group-padding","bar-padding","orientation"])):(e.openBlock(),e.createBlock(e.unref(i.VisGroupedBar),{key:0,data:a.data,x:(l,t)=>t,y:d.value,"grid-line":!1,"domain-line":!1,color:s,"rounded-corners":a.radius??0,"group-padding":a.groupPadding??0,"bar-padding":a.barPadding??.2,orientation:a.orientation??e.unref(o.Orientation).Vertical},null,8,["data","x","y","rounded-corners","group-padding","bar-padding","orientation"])),e.createVNode(e.unref(i.VisAxis),{type:"x",label:a.xLabel,"grid-line":!1,"domain-line":!1,"tick-format":a.xFormatter,"num-ticks":a.xNumTicks,"tick-line":!1},null,8,["label","tick-format","num-ticks"]),e.createVNode(e.unref(i.VisAxis),{type:"y",label:a.yLabel,"grid-line":a.orientation!==e.unref(o.Orientation).Horizontal,"domain-line":!1,"tick-format":a.yFormatter},null,8,["label","grid-line","tick-format"])]),_:1},8,["height"]),a.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items center justify-end",{"pb-4":u.value}])},[e.createVNode(e.unref(i.VisBulletLegend),{items:Object.values(a.categories)},null,8,["items"])],2))],2))}});exports.default=f;
2
- //# sourceMappingURL=BarChart.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BarChart.cjs","sources":["../../../src/components/Bar/BarChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, ComputedRef, createApp } from \"vue\";\nimport { BulletLegendItemInterface, GroupedBar, Orientation } from \"@unovis/ts\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisGroupedBar,\n VisStackedBar,\n VisTooltip,\n VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../..\";\n\nexport type BarChartProps<T> = {\n data: T[];\n stacked?: boolean;\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx?: number) => string | number;\n yFormatter?: (i: number, idx?: number) => string | number;\n yNumTicks?: number;\n xNumTicks?: number;\n yAxis: (keyof T)[];\n groupPadding?: number;\n barPadding?: number;\n radius?: number;\n hideLegend?: boolean;\n orientation?: Orientation;\n paginationPosition?: PaginationPosition;\n }\n\nconst props = withDefaults(\n defineProps<BarChartProps<T>>(),\n {\n orientation: Orientation.Vertical,\n paginationPosition: PaginationPosition.Bottom\n }\n);\n\nconst yAxis: ComputedRef<((d: T) => T[keyof T])[]> = computed(() => {\n return props.yAxis.map((key) => (d: T) => {\n return d[key];\n });\n});\n\nconst color = (_: T, i: number) => Object.values(props.categories)[i].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\nconst PaginationPositionTop = computed(() => props.paginationPosition === PaginationPosition.Top)\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{'flex-col-reverse' : PaginationPositionTop}\"\n >\n <VisXYContainer :height=\"height\">\n <VisTooltip\n :triggers=\"{\n [GroupedBar.selectors.bar]: generateTooltip,\n }\"\n />\n\n <VisGroupedBar\n v-if=\"!stacked\"\n :data=\"data\"\n :x=\"(_: T, i: number) => i\"\n :y=\"yAxis\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :color=\"color\"\n :rounded-corners=\"radius ?? 0\"\n :group-padding=\"groupPadding ?? 0\"\n :bar-padding=\"barPadding ?? 0.2\"\n :orientation=\"orientation ?? Orientation.Vertical\"\n />\n <VisStackedBar\n v-else\n :data=\"data\"\n :x=\"(_: T, i: number) => i\"\n :y=\"yAxis\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :color=\"color\"\n :rounded-corners=\"radius ?? 0\"\n :group-padding=\"groupPadding ?? 0\"\n :bar-padding=\"barPadding ?? 0.2\"\n :orientation=\"orientation ?? Orientation.Vertical\"\n />\n <VisAxis\n type=\"x\"\n :label=\"xLabel\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :tick-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :label=\"yLabel\"\n :grid-line=\"orientation !== Orientation.Horizontal\"\n :domain-line=\"false\"\n :tick-format=\"yFormatter\"\n />\n </VisXYContainer>\n <div v-if=\"!hideLegend\" class=\"flex items center justify-end\" :class=\"{'pb-4' : PaginationPositionTop}\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","yAxis","computed","key","d","color","_","i","generateTooltip","app","createApp","Tooltip","container","html","PaginationPositionTop","PaginationPosition"],"mappings":"ulBAoCA,MAAMA,EAAQC,EAQRC,EAA+CC,EAAAA,SAAS,IACrDH,EAAM,MAAM,IAAKI,GAASC,GACxBA,EAAED,CAAG,CACb,CACF,EAEKE,EAAQ,CAACC,EAAMC,IAAc,OAAO,OAAOR,EAAM,UAAU,EAAEQ,CAAC,EAAE,MAEhEC,EAAkBN,EAAAA,SAAS,IAAOE,GAAS,CACzC,MAAAK,EAAMC,YAAUC,UAAS,CAC7B,KAAMP,EACN,WAAYL,EAAM,UAAA,CACnB,EAEKa,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,CAAA,CACR,EAEKC,EAAwBZ,EAAAA,SAAS,IAAMH,EAAM,qBAAuBgB,qBAAmB,GAAG"}
@@ -1,105 +0,0 @@
1
- import { defineComponent as P, computed as s, createApp as v, createElementBlock as m, openBlock as l, normalizeClass as c, createVNode as n, createCommentVNode as B, unref as a, withCtx as V, createBlock as f } from "vue";
2
- import { Orientation as d, GroupedBar as L } from "@unovis/ts";
3
- import { VisXYContainer as T, VisTooltip as C, VisGroupedBar as A, VisStackedBar as N, VisAxis as y, VisBulletLegend as F } from "@unovis/vue";
4
- import j from "../Tooltip.js";
5
- import { PaginationPosition as b } from "../../index.js";
6
- const H = /* @__PURE__ */ P({
7
- __name: "BarChart",
8
- props: {
9
- data: {},
10
- stacked: { type: Boolean },
11
- height: {},
12
- xLabel: {},
13
- yLabel: {},
14
- categories: {},
15
- xFormatter: {},
16
- yFormatter: {},
17
- yNumTicks: {},
18
- xNumTicks: {},
19
- yAxis: {},
20
- groupPadding: {},
21
- barPadding: {},
22
- radius: {},
23
- hideLegend: { type: Boolean },
24
- orientation: { default: d.Vertical },
25
- paginationPosition: { default: b.Bottom }
26
- },
27
- setup(k) {
28
- const r = k, u = s(() => r.yAxis.map((e) => (i) => i[e])), p = (e, i) => Object.values(r.categories)[i].color, h = s(() => (e) => {
29
- const i = v(j, {
30
- data: e,
31
- categories: r.categories
32
- }), t = document.createElement("div");
33
- i.mount(t);
34
- const o = t.innerHTML;
35
- return i.unmount(), o;
36
- }), g = s(() => r.paginationPosition === b.Top);
37
- return (e, i) => (l(), m("div", {
38
- class: c(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
39
- }, [
40
- n(a(T), { height: e.height }, {
41
- default: V(() => [
42
- n(a(C), {
43
- triggers: {
44
- [a(L).selectors.bar]: h.value
45
- }
46
- }, null, 8, ["triggers"]),
47
- e.stacked ? (l(), f(a(N), {
48
- key: 1,
49
- data: e.data,
50
- x: (t, o) => o,
51
- y: u.value,
52
- "grid-line": !1,
53
- "domain-line": !1,
54
- color: p,
55
- "rounded-corners": e.radius ?? 0,
56
- "group-padding": e.groupPadding ?? 0,
57
- "bar-padding": e.barPadding ?? 0.2,
58
- orientation: e.orientation ?? a(d).Vertical
59
- }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), f(a(A), {
60
- key: 0,
61
- data: e.data,
62
- x: (t, o) => o,
63
- y: u.value,
64
- "grid-line": !1,
65
- "domain-line": !1,
66
- color: p,
67
- "rounded-corners": e.radius ?? 0,
68
- "group-padding": e.groupPadding ?? 0,
69
- "bar-padding": e.barPadding ?? 0.2,
70
- orientation: e.orientation ?? a(d).Vertical
71
- }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
72
- n(a(y), {
73
- type: "x",
74
- label: e.xLabel,
75
- "grid-line": !1,
76
- "domain-line": !1,
77
- "tick-format": e.xFormatter,
78
- "num-ticks": e.xNumTicks,
79
- "tick-line": !1
80
- }, null, 8, ["label", "tick-format", "num-ticks"]),
81
- n(a(y), {
82
- type: "y",
83
- label: e.yLabel,
84
- "grid-line": e.orientation !== a(d).Horizontal,
85
- "domain-line": !1,
86
- "tick-format": e.yFormatter
87
- }, null, 8, ["label", "grid-line", "tick-format"])
88
- ]),
89
- _: 1
90
- }, 8, ["height"]),
91
- e.hideLegend ? B("", !0) : (l(), m("div", {
92
- key: 0,
93
- class: c(["flex items center justify-end", { "pb-4": g.value }])
94
- }, [
95
- n(a(F), {
96
- items: Object.values(e.categories)
97
- }, null, 8, ["items"])
98
- ], 2))
99
- ], 2));
100
- }
101
- });
102
- export {
103
- H as default
104
- };
105
- //# sourceMappingURL=BarChart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BarChart.js","sources":["../../../src/components/Bar/BarChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, ComputedRef, createApp } from \"vue\";\nimport { BulletLegendItemInterface, GroupedBar, Orientation } from \"@unovis/ts\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisGroupedBar,\n VisStackedBar,\n VisTooltip,\n VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../..\";\n\nexport type BarChartProps<T> = {\n data: T[];\n stacked?: boolean;\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx?: number) => string | number;\n yFormatter?: (i: number, idx?: number) => string | number;\n yNumTicks?: number;\n xNumTicks?: number;\n yAxis: (keyof T)[];\n groupPadding?: number;\n barPadding?: number;\n radius?: number;\n hideLegend?: boolean;\n orientation?: Orientation;\n paginationPosition?: PaginationPosition;\n }\n\nconst props = withDefaults(\n defineProps<BarChartProps<T>>(),\n {\n orientation: Orientation.Vertical,\n paginationPosition: PaginationPosition.Bottom\n }\n);\n\nconst yAxis: ComputedRef<((d: T) => T[keyof T])[]> = computed(() => {\n return props.yAxis.map((key) => (d: T) => {\n return d[key];\n });\n});\n\nconst color = (_: T, i: number) => Object.values(props.categories)[i].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\nconst PaginationPositionTop = computed(() => props.paginationPosition === PaginationPosition.Top)\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{'flex-col-reverse' : PaginationPositionTop}\"\n >\n <VisXYContainer :height=\"height\">\n <VisTooltip\n :triggers=\"{\n [GroupedBar.selectors.bar]: generateTooltip,\n }\"\n />\n\n <VisGroupedBar\n v-if=\"!stacked\"\n :data=\"data\"\n :x=\"(_: T, i: number) => i\"\n :y=\"yAxis\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :color=\"color\"\n :rounded-corners=\"radius ?? 0\"\n :group-padding=\"groupPadding ?? 0\"\n :bar-padding=\"barPadding ?? 0.2\"\n :orientation=\"orientation ?? Orientation.Vertical\"\n />\n <VisStackedBar\n v-else\n :data=\"data\"\n :x=\"(_: T, i: number) => i\"\n :y=\"yAxis\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :color=\"color\"\n :rounded-corners=\"radius ?? 0\"\n :group-padding=\"groupPadding ?? 0\"\n :bar-padding=\"barPadding ?? 0.2\"\n :orientation=\"orientation ?? Orientation.Vertical\"\n />\n <VisAxis\n type=\"x\"\n :label=\"xLabel\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :tick-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :label=\"yLabel\"\n :grid-line=\"orientation !== Orientation.Horizontal\"\n :domain-line=\"false\"\n :tick-format=\"yFormatter\"\n />\n </VisXYContainer>\n <div v-if=\"!hideLegend\" class=\"flex items center justify-end\" :class=\"{'pb-4' : PaginationPositionTop}\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","yAxis","computed","key","d","color","_","generateTooltip","app","createApp","Tooltip","container","html","PaginationPositionTop","PaginationPosition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAMA,IAAQC,GAQRC,IAA+CC,EAAS,MACrDH,EAAM,MAAM,IAAI,CAACI,MAAQ,CAACC,MACxBA,EAAED,CAAG,CACb,CACF,GAEKE,IAAQ,CAACC,GAAM,MAAc,OAAO,OAAOP,EAAM,UAAU,EAAE,CAAC,EAAE,OAEhEQ,IAAkBL,EAAS,MAAM,CAACE,MAAS;AACzC,YAAAI,IAAMC,EAAUC,GAAS;AAAA,QAC7B,MAAMN;AAAA,QACN,YAAYL,EAAM;AAAA,MAAA,CACnB,GAEKY,IAAY,SAAS,cAAc,KAAK;AAC9C,MAAAH,EAAI,MAAMG,CAAS;AAEnB,YAAMC,IAAOD,EAAU;AACvB,aAAAH,EAAI,QAAQ,GAELI;AAAA,IAAA,CACR,GAEKC,IAAwBX,EAAS,MAAMH,EAAM,uBAAuBe,EAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,37 +0,0 @@
1
- import { BulletLegendItemInterface, Orientation } from '@unovis/ts';
2
- import { PaginationPosition } from '../..';
3
-
4
- export type BarChartProps<T> = {
5
- data: T[];
6
- stacked?: boolean;
7
- height: number;
8
- xLabel?: string;
9
- yLabel?: string;
10
- categories: Record<string, BulletLegendItemInterface>;
11
- xFormatter: (i: number, idx?: number) => string | number;
12
- yFormatter?: (i: number, idx?: number) => string | number;
13
- yNumTicks?: number;
14
- xNumTicks?: number;
15
- yAxis: (keyof T)[];
16
- groupPadding?: number;
17
- barPadding?: number;
18
- radius?: number;
19
- hideLegend?: boolean;
20
- orientation?: Orientation;
21
- paginationPosition?: PaginationPosition;
22
- };
23
- 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<{
24
- props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & BarChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
25
- expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
26
- attrs: any;
27
- slots: ReturnType<() => {}>;
28
- emit: typeof __VLS_emit;
29
- }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
30
- [key: string]: any;
31
- }> & {
32
- __ctx?: Awaited<typeof __VLS_setup>;
33
- };
34
- export default _default;
35
- type __VLS_Prettify<T> = {
36
- [K in keyof T]: T[K];
37
- } & {};
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BarChart.cjs");exports.default=e.default;
2
- //# sourceMappingURL=BarChart2.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BarChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import f from "./BarChart.js";
2
- export {
3
- f as default
4
- };
5
- //# sourceMappingURL=BarChart2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BarChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1 +0,0 @@
1
- export { default as BarChart } from './BarChart.vue';
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("@unovis/ts"),i=require("@unovis/vue"),_=e.defineComponent({__name:"Crosshair",props:{colors:{default:()=>[]},index:{},items:{},customTooltip:{}},setup(s){const o=s,r=new WeakMap;function c(t){if(r.has(t))return r.get(t);if(typeof window<"u"){const n=document.createElement("div"),u=Object.entries(d.omit(t,[o.index])).map(([p,m])=>({...o.items.find(f=>f.name===p),value:m})),l=o.customTooltip??i.VisTooltip;return e.createApp(l,{title:t[o.index].toString(),data:u}).mount(n),r.set(t,n.innerHTML),n.innerHTML}}function a(t,n){return o.colors[n]??"transparent"}return(t,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(i.VisTooltip),{"horizontal-shift":20,"vertical-shift":20}),e.createVNode(e.unref(i.VisCrosshair),{template:c,color:a})],64))}});exports.default=_;
2
- //# sourceMappingURL=Crosshair.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Crosshair.cjs","sources":["../../../src/components/Crosshair/Crosshair.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\n\nconst props = withDefaults(defineProps<{\n colors: string[]\n index: string\n items: BulletLegendItemInterface[]\n customTooltip?: Component\n}>(), {\n colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n if (typeof window !== 'undefined') {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find(i => i.name === key)\n return { ...legendReference, value }\n })\n const TooltipComponent = props.customTooltip ?? VisTooltip\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n\n }\n}\n\nfunction color(_: unknown, i: number) {\n return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>"],"names":["props","__props","wm","template","d","componentDiv","omittedData","omit","key","value","i","TooltipComponent","VisTooltip","createApp","color","_"],"mappings":"wSAMA,MAAMA,EAAQC,EAURC,MAAS,QACf,SAASC,EAASC,EAAQ,CACpB,GAAAF,EAAG,IAAIE,CAAC,EACH,OAAAF,EAAG,IAAIE,CAAC,EAGX,GAAA,OAAO,OAAW,IAAa,CAC3B,MAAAC,EAAe,SAAS,cAAc,KAAK,EAC3CC,EAAc,OAAO,QAAQC,EAAK,KAAAH,EAAG,CAACJ,EAAM,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAACQ,EAAKC,CAAK,KAElE,CAAE,GADeT,EAAM,MAAM,KAAUU,GAAAA,EAAE,OAASF,CAAG,EAC/B,MAAAC,CAAM,EACpC,EACGE,EAAmBX,EAAM,eAAiBY,EAAA,WAChDC,OAAAA,EAAAA,UAAUF,EAAkB,CAAE,MAAOP,EAAEJ,EAAM,KAAK,EAAE,SAAS,EAAG,KAAMM,CAAa,CAAA,EAAE,MAAMD,CAAY,EACpGH,EAAA,IAAIE,EAAGC,EAAa,SAAS,EACzBA,EAAa,SAAA,CAGtB,CAGO,SAAAS,EAAMC,EAAYL,EAAW,CAC7B,OAAAV,EAAM,OAAOU,CAAC,GAAK,aAAA"}
@@ -1,40 +0,0 @@
1
- import { defineComponent as h, createElementBlock as _, openBlock as T, Fragment as g, createVNode as r, unref as i, createApp as x } from "vue";
2
- import { omit as w } from "@unovis/ts";
3
- import { VisTooltip as s, VisCrosshair as C } from "@unovis/vue";
4
- const B = /* @__PURE__ */ h({
5
- __name: "Crosshair",
6
- props: {
7
- colors: { default: () => [] },
8
- index: {},
9
- items: {},
10
- customTooltip: {}
11
- },
12
- setup(c) {
13
- const n = c, o = /* @__PURE__ */ new WeakMap();
14
- function a(e) {
15
- if (o.has(e))
16
- return o.get(e);
17
- if (typeof window < "u") {
18
- const t = document.createElement("div"), p = Object.entries(w(e, [n.index])).map(([f, u]) => ({ ...n.items.find((d) => d.name === f), value: u })), l = n.customTooltip ?? s;
19
- return x(l, { title: e[n.index].toString(), data: p }).mount(t), o.set(e, t.innerHTML), t.innerHTML;
20
- }
21
- }
22
- function m(e, t) {
23
- return n.colors[t] ?? "transparent";
24
- }
25
- return (e, t) => (T(), _(g, null, [
26
- r(i(s), {
27
- "horizontal-shift": 20,
28
- "vertical-shift": 20
29
- }),
30
- r(i(C), {
31
- template: a,
32
- color: m
33
- })
34
- ], 64));
35
- }
36
- });
37
- export {
38
- B as default
39
- };
40
- //# sourceMappingURL=Crosshair.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Crosshair.js","sources":["../../../src/components/Crosshair/Crosshair.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\n\nconst props = withDefaults(defineProps<{\n colors: string[]\n index: string\n items: BulletLegendItemInterface[]\n customTooltip?: Component\n}>(), {\n colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n if (typeof window !== 'undefined') {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find(i => i.name === key)\n return { ...legendReference, value }\n })\n const TooltipComponent = props.customTooltip ?? VisTooltip\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n\n }\n}\n\nfunction color(_: unknown, i: number) {\n return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>"],"names":["props","__props","wm","template","d","componentDiv","omittedData","omit","key","value","i","TooltipComponent","VisTooltip","createApp","color","_"],"mappings":";;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAURC,wBAAS,QAAQ;AACvB,aAASC,EAASC,GAAQ;AACpB,UAAAF,EAAG,IAAIE,CAAC;AACH,eAAAF,EAAG,IAAIE,CAAC;AAGX,UAAA,OAAO,SAAW,KAAa;AAC3B,cAAAC,IAAe,SAAS,cAAc,KAAK,GAC3CC,IAAc,OAAO,QAAQC,EAAKH,GAAG,CAACJ,EAAM,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAACQ,GAAKC,CAAK,OAElE,EAAE,GADeT,EAAM,MAAM,KAAK,CAAKU,MAAAA,EAAE,SAASF,CAAG,GAC/B,OAAAC,EAAM,EACpC,GACGE,IAAmBX,EAAM,iBAAiBY;AAChD,eAAAC,EAAUF,GAAkB,EAAE,OAAOP,EAAEJ,EAAM,KAAK,EAAE,SAAS,GAAG,MAAMM,EAAa,CAAA,EAAE,MAAMD,CAAY,GACpGH,EAAA,IAAIE,GAAGC,EAAa,SAAS,GACzBA,EAAa;AAAA,MAAA;AAAA,IAGtB;AAGO,aAAAS,EAAMC,GAAYL,GAAW;AAC7B,aAAAV,EAAM,OAAOU,CAAC,KAAK;AAAA,IAAA;;;;;;;;;;;;;"}
@@ -1,38 +0,0 @@
1
- import { BulletLegendItemInterface } from '@unovis/ts';
2
- import { Component } from 'vue';
3
-
4
- declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
5
- colors: string[];
6
- index: string;
7
- items: BulletLegendItemInterface[];
8
- customTooltip?: Component;
9
- }>, {
10
- colors: () => any[];
11
- }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
12
- colors: string[];
13
- index: string;
14
- items: BulletLegendItemInterface[];
15
- customTooltip?: Component;
16
- }>, {
17
- colors: () => any[];
18
- }>>> & Readonly<{}>, {
19
- colors: string[];
20
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
21
- export default _default;
22
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
23
- type __VLS_TypePropsToRuntimeProps<T> = {
24
- [K in keyof T]-?: {} extends Pick<T, K> ? {
25
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
26
- } : {
27
- type: import('vue').PropType<T[K]>;
28
- required: true;
29
- };
30
- };
31
- type __VLS_WithDefaults<P, D> = {
32
- [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
33
- default: D[K];
34
- }> : P[K];
35
- };
36
- type __VLS_Prettify<T> = {
37
- [K in keyof T]: T[K];
38
- } & {};
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Crosshair.cjs");exports.default=e.default;
2
- //# sourceMappingURL=Crosshair2.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Crosshair2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import f from "./Crosshair.js";
2
- export {
3
- f as default
4
- };
5
- //# sourceMappingURL=Crosshair2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Crosshair2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}