vue-chrts 0.1.0-beta.1 → 0.1.0-beta.2-internal
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Area/AreaChart.cjs +3 -3
- package/dist/components/Area/AreaChart.cjs.map +1 -1
- package/dist/components/Area/{AreaChart.vue.d.ts → AreaChart.d.ts} +2 -2
- package/dist/components/Area/AreaChart.js +58 -53
- package/dist/components/Area/AreaChart.js.map +1 -1
- package/dist/components/Area/index.d.ts +1 -1
- package/dist/components/Area/types.d.ts +1 -1
- package/dist/components/AreaStacked/index.d.ts +1 -1
- package/dist/components/Bar/index.d.ts +1 -1
- package/dist/components/Crosshair/index.d.ts +1 -1
- package/dist/components/Donut/index.d.ts +1 -1
- package/dist/components/Line/index.d.ts +1 -1
- package/dist/utils.cjs +2 -0
- package/dist/utils.cjs.map +1 -0
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +19 -0
- package/dist/utils.js.map +1 -0
- package/package.json +7 -6
- /package/dist/components/AreaStacked/{AreaStackedChart.vue.d.ts → AreaStackedChart.d.ts} +0 -0
- /package/dist/components/Bar/{BarChart.vue.d.ts → BarChart.d.ts} +0 -0
- /package/dist/components/Crosshair/{Crosshair.vue.d.ts → Crosshair.d.ts} +0 -0
- /package/dist/components/Donut/{DonutChart.vue.d.ts → DonutChart.d.ts} +0 -0
- /package/dist/components/Line/{LineChart.vue.d.ts → LineChart.d.ts} +0 -0
- /package/dist/components/{Tooltip.vue.d.ts → Tooltip.d.ts} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@unovis/ts"),
|
|
2
|
-
<linearGradient id="gradient${
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),v=require("../../utils.cjs"),c=require("@unovis/ts"),i=require("@unovis/vue"),h=require("../Tooltip.cjs"),T=require("../../types.cjs"),B=e.defineComponent({__name:"AreaChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},curveType:{},xNumTicks:{default:a=>a.data.length>24?24/4:a.data.length-1},yNumTicks:{default:a=>a.data.length>24?24/4:a.data.length-1},hideLegend:{type:Boolean},hideTooltip:{type:Boolean},gridLineX:{type:Boolean},domainLineX:{type:Boolean},gridLineY:{type:Boolean},domainLineY:{type:Boolean},paginationPosition:{}},setup(a){const o=a,u=Object.values(o.categories).map(t=>t.color),g=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const n=e.createApp(h.default,{data:t,categories:o.categories}),r=document.createElement("div");n.mount(r);const l=r.innerHTML;return n.unmount(),l}catch{return""}});function y(t){var n;return{y:r=>Number(r[t]),color:((n=o.categories[t])==null?void 0:n.color)??"#3b82f6"}}const k=u.map((t,n)=>`
|
|
2
|
+
<linearGradient id="gradient${n}-${t}" gradientTransform="rotate(90)">
|
|
3
3
|
<stop offset="0%" stop-color="${t}" stop-opacity="1" />
|
|
4
4
|
<stop offset="100%" stop-color="${t}" stop-opacity="0" />
|
|
5
5
|
</linearGradient>
|
|
6
|
-
`).join("");return(t
|
|
6
|
+
`).join(""),f=e.computed(()=>o.paginationPosition===T.PaginationPosition.Top),s=e.computed(()=>v.getDistributedIndices(o.data.length,o.xNumTicks)),d=e.computed(()=>{var t;return!((t=o.data)!=null&&t.length)||!s||s.value.length===0?[]:s.value.map(n=>o.data[n])});return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":f.value}])},[e.createVNode(e.unref(i.VisXYContainer),{data:d.value,height:t.height,"svg-defs":e.unref(k)},{default:e.withCtx(()=>[t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(i.VisTooltip),{key:0,"horizontal-placement":e.unref(c.Position).Right,"vertical-placement":e.unref(c.Position).Top},null,8,["horizontal-placement","vertical-placement"])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(o.categories),(r,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[e.createVNode(e.unref(i.VisArea),e.mergeProps({x:(p,m)=>m,ref_for:!0},y(r),{color:`url(#gradient${l}-${e.unref(u)[l]})`,opacity:.5,"curve-type":t.curveType??e.unref(c.CurveType).MonotoneX}),null,16,["x","color","curve-type"]),e.createVNode(e.unref(i.VisLine),{x:(p,m)=>m,y:p=>p[r],color:e.unref(u)[l],"curve-type":t.curveType??e.unref(c.CurveType).MonotoneX},null,8,["x","y","color","curve-type"])],64))),128)),e.createVNode(e.unref(i.VisAxis),{type:"x","num-ticks":d.value.length,"tick-format":r=>t.xFormatter(d.value[r]),label:t.xLabel,"grid-line":t.gridLineX,"domain-line":t.domainLineX,"tick-line":!!t.gridLineX},null,8,["num-ticks","tick-format","label","grid-line","domain-line","tick-line"]),e.createVNode(e.unref(i.VisAxis),{type:"y","num-ticks":t.yNumTicks,"tick-format":t.yFormatter,label:t.yLabel,"grid-line":t.gridLineY,"domain-line":t.domainLineY,"tick-line":!!t.gridLineY},null,8,["num-ticks","tick-format","label","grid-line","domain-line","tick-line"]),t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(i.VisCrosshair),{key:1,color:"#666",template:g.value},null,8,["template"]))]),_:1},8,["data","height","svg-defs"]),t.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items center justify-end",{"pb-4":f.value}])},[e.createVNode(e.unref(i.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])],2))],2))}});exports.default=B;
|
|
7
7
|
//# sourceMappingURL=AreaChart.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport
|
|
1
|
+
{"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from './../../utils'\nimport {\n type BulletLegendItemInterface,\n type NumericAccessor,\n CurveType,\n Position,\n} 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 \"../../types\";\n\ntype AreaChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: T) => 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 paginationPosition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\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\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n return \"\";\n }\n\n try {\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 } catch (error) {\n return \"\";\n }\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\nconst PaginationPositionTop = computed(\n () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() => getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n return [];\n }\n return tickIndices.value.map((index) => props.data[index]);\n})\n\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n >\n <VisXYContainer :data=\"filteredDataByIndices\" :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 :num-ticks=\"filteredDataByIndices.length\"\n :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\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\"\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\n v-if=\"!hideLegend\"\n class=\"flex items center justify-end\"\n :class=\"{ 'pb-4': PaginationPositionTop }\"\n >\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","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":"6sBA0CA,MAAMA,EAAQC,EAORC,EAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAKG,GAAMA,EAAE,KAAK,EAE3DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,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,OACO,CACP,MAAA,EAAA,CACT,CACD,EAED,SAASC,EAAUC,EAAsD,OAChE,MAAA,CACL,EAAIP,GAAS,OAAOA,EAAEO,CAAoB,CAAC,EAC3C,QAAOC,EAAAd,EAAM,WAAWa,CAAE,IAAnB,YAAAC,EAAsB,QAAS,SACxC,CAAA,CAGF,MAAMC,EAAUb,EACb,IACC,CAACc,EAAOC,IAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA,CAAA,EAIxC,KAAK,EAAE,EAEJE,EAAwBb,EAAA,SAC5B,IAAML,EAAM,qBAAuBmB,qBAAmB,GACxD,EAEMC,EAAcf,WAAS,IAAOgB,wBAAsBrB,EAAM,KAAK,OAAQA,EAAM,SAAS,CAAC,EAEvFsB,EAAwBjB,EAAAA,SAAS,IAAM,OACvC,MAAA,GAACS,EAAAd,EAAM,OAAN,MAAAc,EAAY,SAAU,CAACM,GAAeA,EAAY,MAAM,SAAW,EAC/D,CAAC,EAEHA,EAAY,MAAM,IAAKH,GAAUjB,EAAM,KAAKiB,CAAK,CAAC,CAAA,CAC1D"}
|
|
@@ -8,7 +8,7 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
|
|
|
8
8
|
xLabel?: string;
|
|
9
9
|
yLabel?: string;
|
|
10
10
|
categories: Record<string, BulletLegendItemInterface>;
|
|
11
|
-
xFormatter: (i:
|
|
11
|
+
xFormatter: (i: T) => string;
|
|
12
12
|
yFormatter?: (i: number, idx?: number) => string | number;
|
|
13
13
|
curveType?: CurveType;
|
|
14
14
|
xNumTicks?: number;
|
|
@@ -19,7 +19,7 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
|
|
|
19
19
|
domainLineX?: boolean;
|
|
20
20
|
gridLineY?: boolean;
|
|
21
21
|
domainLineY?: boolean;
|
|
22
|
-
|
|
22
|
+
paginationPosition?: PaginationPosition;
|
|
23
23
|
}, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
|
|
24
24
|
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
25
25
|
attrs: any;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import z from "
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}, H = /* @__PURE__ */ b({
|
|
1
|
+
import { defineComponent as X, computed as c, createApp as N, createElementBlock as d, openBlock as l, normalizeClass as v, createVNode as s, createCommentVNode as y, unref as t, withCtx as $, createBlock as k, Fragment as L, renderList as Y, mergeProps as j } from "vue";
|
|
2
|
+
import { getDistributedIndices as F } from "../../utils.js";
|
|
3
|
+
import { Position as T, CurveType as b } from "@unovis/ts";
|
|
4
|
+
import { VisXYContainer as A, VisTooltip as w, VisArea as z, VisLine as D, VisAxis as B, VisCrosshair as I, VisBulletLegend as M } from "@unovis/vue";
|
|
5
|
+
import O from "../Tooltip.js";
|
|
6
|
+
import { PaginationPosition as E } from "../../types.js";
|
|
7
|
+
const Q = /* @__PURE__ */ X({
|
|
9
8
|
__name: "AreaChart",
|
|
10
9
|
props: {
|
|
11
10
|
data: {},
|
|
@@ -16,24 +15,24 @@ const M = {
|
|
|
16
15
|
xFormatter: {},
|
|
17
16
|
yFormatter: {},
|
|
18
17
|
curveType: {},
|
|
19
|
-
xNumTicks: { default: (
|
|
20
|
-
yNumTicks: { default: (
|
|
18
|
+
xNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
|
|
19
|
+
yNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
|
|
21
20
|
hideLegend: { type: Boolean },
|
|
22
21
|
hideTooltip: { type: Boolean },
|
|
23
22
|
gridLineX: { type: Boolean },
|
|
24
23
|
domainLineX: { type: Boolean },
|
|
25
24
|
gridLineY: { type: Boolean },
|
|
26
25
|
domainLineY: { type: Boolean },
|
|
27
|
-
|
|
26
|
+
paginationPosition: {}
|
|
28
27
|
},
|
|
29
|
-
setup(
|
|
30
|
-
const
|
|
28
|
+
setup(a) {
|
|
29
|
+
const i = a, u = Object.values(i.categories).map((e) => e.color), V = c(() => (e) => {
|
|
31
30
|
if (typeof window > "u" || typeof document > "u")
|
|
32
31
|
return "";
|
|
33
32
|
try {
|
|
34
|
-
const o =
|
|
33
|
+
const o = N(O, {
|
|
35
34
|
data: e,
|
|
36
|
-
categories:
|
|
35
|
+
categories: i.categories
|
|
37
36
|
}), n = document.createElement("div");
|
|
38
37
|
o.mount(n);
|
|
39
38
|
const r = n.innerHTML;
|
|
@@ -42,88 +41,94 @@ const M = {
|
|
|
42
41
|
return "";
|
|
43
42
|
}
|
|
44
43
|
});
|
|
45
|
-
function
|
|
44
|
+
function C(e) {
|
|
46
45
|
var o;
|
|
47
46
|
return {
|
|
48
47
|
y: (n) => Number(n[e]),
|
|
49
|
-
color: ((o =
|
|
48
|
+
color: ((o = i.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
|
|
50
49
|
};
|
|
51
50
|
}
|
|
52
|
-
const
|
|
51
|
+
const P = u.map(
|
|
53
52
|
(e, o) => `
|
|
54
53
|
<linearGradient id="gradient${o}-${e}" gradientTransform="rotate(90)">
|
|
55
54
|
<stop offset="0%" stop-color="${e}" stop-opacity="1" />
|
|
56
55
|
<stop offset="100%" stop-color="${e}" stop-opacity="0" />
|
|
57
56
|
</linearGradient>
|
|
58
57
|
`
|
|
59
|
-
).join("")
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
58
|
+
).join(""), h = c(
|
|
59
|
+
() => i.paginationPosition === E.Top
|
|
60
|
+
), m = c(() => F(i.data.length, i.xNumTicks)), p = c(() => {
|
|
61
|
+
var e;
|
|
62
|
+
return !((e = i.data) != null && e.length) || !m || m.value.length === 0 ? [] : m.value.map((o) => i.data[o]);
|
|
63
|
+
});
|
|
64
|
+
return (e, o) => (l(), d("div", {
|
|
65
|
+
class: v(["flex flex-col space-y-4", { "flex-col-reverse": h.value }])
|
|
64
66
|
}, [
|
|
65
|
-
|
|
66
|
-
data:
|
|
67
|
+
s(t(A), {
|
|
68
|
+
data: p.value,
|
|
67
69
|
height: e.height,
|
|
68
|
-
"svg-defs": t(
|
|
70
|
+
"svg-defs": t(P)
|
|
69
71
|
}, {
|
|
70
|
-
default:
|
|
71
|
-
e.hideTooltip ?
|
|
72
|
+
default: $(() => [
|
|
73
|
+
e.hideTooltip ? y("", !0) : (l(), k(t(w), {
|
|
72
74
|
key: 0,
|
|
73
|
-
"horizontal-placement": t(
|
|
74
|
-
"vertical-placement": t(
|
|
75
|
+
"horizontal-placement": t(T).Right,
|
|
76
|
+
"vertical-placement": t(T).Top
|
|
75
77
|
}, null, 8, ["horizontal-placement", "vertical-placement"])),
|
|
76
|
-
(
|
|
77
|
-
|
|
78
|
-
x: (
|
|
78
|
+
(l(!0), d(L, null, Y(Object.keys(i.categories), (n, r) => (l(), d(L, { key: r }, [
|
|
79
|
+
s(t(z), j({
|
|
80
|
+
x: (g, f) => f,
|
|
79
81
|
ref_for: !0
|
|
80
|
-
},
|
|
81
|
-
color: `url(#gradient${r}-${t(
|
|
82
|
+
}, C(n), {
|
|
83
|
+
color: `url(#gradient${r}-${t(u)[r]})`,
|
|
82
84
|
opacity: 0.5,
|
|
83
|
-
"curve-type": e.curveType ?? t(
|
|
85
|
+
"curve-type": e.curveType ?? t(b).MonotoneX
|
|
84
86
|
}), null, 16, ["x", "color", "curve-type"]),
|
|
85
|
-
|
|
86
|
-
x: (
|
|
87
|
-
y: (
|
|
88
|
-
color: t(
|
|
89
|
-
"curve-type": e.curveType ?? t(
|
|
87
|
+
s(t(D), {
|
|
88
|
+
x: (g, f) => f,
|
|
89
|
+
y: (g) => g[n],
|
|
90
|
+
color: t(u)[r],
|
|
91
|
+
"curve-type": e.curveType ?? t(b).MonotoneX
|
|
90
92
|
}, null, 8, ["x", "y", "color", "curve-type"])
|
|
91
93
|
], 64))), 128)),
|
|
92
|
-
|
|
94
|
+
s(t(B), {
|
|
93
95
|
type: "x",
|
|
94
|
-
"
|
|
95
|
-
"
|
|
96
|
+
"num-ticks": p.value.length,
|
|
97
|
+
"tick-format": (n) => e.xFormatter(p.value[n]),
|
|
96
98
|
label: e.xLabel,
|
|
97
99
|
"grid-line": e.gridLineX,
|
|
98
100
|
"domain-line": e.domainLineX,
|
|
99
101
|
"tick-line": !!e.gridLineX
|
|
100
|
-
}, null, 8, ["
|
|
101
|
-
|
|
102
|
+
}, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
|
|
103
|
+
s(t(B), {
|
|
102
104
|
type: "y",
|
|
103
|
-
"num-ticks": e.yNumTicks
|
|
105
|
+
"num-ticks": e.yNumTicks,
|
|
104
106
|
"tick-format": e.yFormatter,
|
|
105
107
|
label: e.yLabel,
|
|
106
108
|
"grid-line": e.gridLineY,
|
|
107
109
|
"domain-line": e.domainLineY,
|
|
108
110
|
"tick-line": !!e.gridLineY
|
|
109
111
|
}, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
|
|
110
|
-
e.hideTooltip ?
|
|
112
|
+
e.hideTooltip ? y("", !0) : (l(), k(t(I), {
|
|
111
113
|
key: 1,
|
|
112
114
|
color: "#666",
|
|
113
|
-
template:
|
|
115
|
+
template: V.value
|
|
114
116
|
}, null, 8, ["template"]))
|
|
115
117
|
]),
|
|
116
118
|
_: 1
|
|
117
119
|
}, 8, ["data", "height", "svg-defs"]),
|
|
118
|
-
e.hideLegend ?
|
|
119
|
-
|
|
120
|
+
e.hideLegend ? y("", !0) : (l(), d("div", {
|
|
121
|
+
key: 0,
|
|
122
|
+
class: v(["flex items center justify-end", { "pb-4": h.value }])
|
|
123
|
+
}, [
|
|
124
|
+
s(t(M), {
|
|
120
125
|
items: Object.values(e.categories)
|
|
121
126
|
}, null, 8, ["items"])
|
|
122
|
-
]))
|
|
127
|
+
], 2))
|
|
123
128
|
], 2));
|
|
124
129
|
}
|
|
125
130
|
});
|
|
126
131
|
export {
|
|
127
|
-
|
|
132
|
+
Q as default
|
|
128
133
|
};
|
|
129
134
|
//# sourceMappingURL=AreaChart.js.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 { getDistributedIndices } from './../../utils'\nimport {\n type BulletLegendItemInterface,\n type NumericAccessor,\n CurveType,\n Position,\n} 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 \"../../types\";\n\ntype AreaChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: T) => 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 paginationPosition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\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\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n return \"\";\n }\n\n try {\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 } catch (error) {\n return \"\";\n }\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\nconst PaginationPositionTop = computed(\n () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() => getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n return [];\n }\n return tickIndices.value.map((index) => props.data[index]);\n})\n\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n >\n <VisXYContainer :data=\"filteredDataByIndices\" :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 :num-ticks=\"filteredDataByIndices.length\"\n :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\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\"\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\n v-if=\"!hideLegend\"\n class=\"flex items center justify-end\"\n :class=\"{ 'pb-4': PaginationPositionTop }\"\n >\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","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,UAAMA,IAAQC,GAORC,IAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAI,CAACG,MAAMA,EAAE,KAAK,GAE3DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYN,EAAM;AAAA,QAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD;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,GAEJE,IAAwBb;AAAA,MAC5B,MAAML,EAAM,uBAAuBmB,EAAmB;AAAA,IACxD,GAEMC,IAAcf,EAAS,MAAOgB,EAAsBrB,EAAM,KAAK,QAAQA,EAAM,SAAS,CAAC,GAEvFsB,IAAwBjB,EAAS,MAAM;;AACvC,aAAA,GAACS,IAAAd,EAAM,SAAN,QAAAc,EAAY,WAAU,CAACM,KAAeA,EAAY,MAAM,WAAW,IAC/D,CAAC,IAEHA,EAAY,MAAM,IAAI,CAACH,MAAUjB,EAAM,KAAKiB,CAAK,CAAC;AAAA,IAAA,CAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as AreaChart } from './AreaChart
|
|
1
|
+
export { default as AreaChart } from './AreaChart';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as AreaStackedChart } from './AreaStackedChart
|
|
1
|
+
export { default as AreaStackedChart } from './AreaStackedChart';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as BarChart } from './BarChart
|
|
1
|
+
export { default as BarChart } from './BarChart';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as Crosshair } from './Crosshair
|
|
1
|
+
export { default as Crosshair } from './Crosshair';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as LineChart } from './LineChart
|
|
1
|
+
export { default as LineChart } from './LineChart';
|
package/dist/utils.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function d(t,r){if(r<=0)return[];if(r>=t)return Array.from({length:t},(e,i)=>i);if(r===1)return[Math.floor((t-1)/2)];if(r===2)return[0,t-1];const o=[];for(let e=0;e<r;e++){const i=Math.round(e*(t-1)/(r-1));o.push(i)}return o}exports.getDistributedIndices=d;
|
|
2
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../src/utils.ts"],"sourcesContent":["export function getDistributedIndices(length, numTicks) {\n // Handle edge cases\n if (numTicks <= 0) return [];\n\n // If numTicks >= length, return all indices\n if (numTicks >= length) {\n return Array.from({ length }, (_, i) => i);\n }\n\n // Special case: if numTicks is 1, return only the middle index\n if (numTicks === 1) {\n return [Math.floor((length - 1) / 2)];\n }\n\n // For 2 ticks, just return first and last\n if (numTicks === 2) {\n return [0, length - 1];\n }\n\n // For 3 or more ticks, we need to ensure perfectly even distribution\n const indices = [];\n\n // We'll manually calculate the indices to ensure perfect distribution\n for (let i = 0; i < numTicks; i++) {\n // This formula ensures perfect distribution of indices\n const index = Math.round(i * (length - 1) / (numTicks - 1));\n indices.push(index);\n }\n\n // No need to filter duplicates as our formula ensures unique indices\n return indices;\n}"],"names":["getDistributedIndices","length","numTicks","_","indices","i","index"],"mappings":"gFAAgB,SAAAA,EAAsBC,EAAQC,EAAU,CAElD,GAAAA,GAAY,EAAG,MAAO,CAAC,EAG3B,GAAIA,GAAYD,EACP,OAAA,MAAM,KAAK,CAAE,OAAAA,GAAU,CAACE,EAAG,IAAM,CAAC,EAI3C,GAAID,IAAa,EACf,MAAO,CAAC,KAAK,OAAOD,EAAS,GAAK,CAAC,CAAC,EAItC,GAAIC,IAAa,EACR,MAAA,CAAC,EAAGD,EAAS,CAAC,EAIvB,MAAMG,EAAU,CAAC,EAGjB,QAASC,EAAI,EAAGA,EAAIH,EAAUG,IAAK,CAEjC,MAAMC,EAAQ,KAAK,MAAMD,GAAKJ,EAAS,IAAMC,EAAW,EAAE,EAC1DE,EAAQ,KAAKE,CAAK,CAAA,CAIb,OAAAF,CACT"}
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getDistributedIndices(length: any, numTicks: any): any[];
|
package/dist/utils.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
function i(t, r) {
|
|
2
|
+
if (r <= 0) return [];
|
|
3
|
+
if (r >= t)
|
|
4
|
+
return Array.from({ length: t }, (o, e) => e);
|
|
5
|
+
if (r === 1)
|
|
6
|
+
return [Math.floor((t - 1) / 2)];
|
|
7
|
+
if (r === 2)
|
|
8
|
+
return [0, t - 1];
|
|
9
|
+
const f = [];
|
|
10
|
+
for (let o = 0; o < r; o++) {
|
|
11
|
+
const e = Math.round(o * (t - 1) / (r - 1));
|
|
12
|
+
f.push(e);
|
|
13
|
+
}
|
|
14
|
+
return f;
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
i as getDistributedIndices
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["export function getDistributedIndices(length, numTicks) {\n // Handle edge cases\n if (numTicks <= 0) return [];\n\n // If numTicks >= length, return all indices\n if (numTicks >= length) {\n return Array.from({ length }, (_, i) => i);\n }\n\n // Special case: if numTicks is 1, return only the middle index\n if (numTicks === 1) {\n return [Math.floor((length - 1) / 2)];\n }\n\n // For 2 ticks, just return first and last\n if (numTicks === 2) {\n return [0, length - 1];\n }\n\n // For 3 or more ticks, we need to ensure perfectly even distribution\n const indices = [];\n\n // We'll manually calculate the indices to ensure perfect distribution\n for (let i = 0; i < numTicks; i++) {\n // This formula ensures perfect distribution of indices\n const index = Math.round(i * (length - 1) / (numTicks - 1));\n indices.push(index);\n }\n\n // No need to filter duplicates as our formula ensures unique indices\n return indices;\n}"],"names":["getDistributedIndices","length","numTicks","_","i","indices","index"],"mappings":"AAAgB,SAAAA,EAAsBC,GAAQC,GAAU;AAElD,MAAAA,KAAY,EAAG,QAAO,CAAC;AAG3B,MAAIA,KAAYD;AACP,WAAA,MAAM,KAAK,EAAE,QAAAA,KAAU,CAACE,GAAGC,MAAMA,CAAC;AAI3C,MAAIF,MAAa;AACf,WAAO,CAAC,KAAK,OAAOD,IAAS,KAAK,CAAC,CAAC;AAItC,MAAIC,MAAa;AACR,WAAA,CAAC,GAAGD,IAAS,CAAC;AAIvB,QAAMI,IAAU,CAAC;AAGjB,WAASD,IAAI,GAAGA,IAAIF,GAAUE,KAAK;AAEjC,UAAME,IAAQ,KAAK,MAAMF,KAAKH,IAAS,MAAMC,IAAW,EAAE;AAC1D,IAAAG,EAAQ,KAAKC,CAAK;AAAA,EAAA;AAIb,SAAAD;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-chrts",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.2-internal",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -29,10 +29,12 @@
|
|
|
29
29
|
"preview": "vite preview",
|
|
30
30
|
"deploy": "pnpm build && npm publish"
|
|
31
31
|
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"vue": "^3.5.13"
|
|
34
|
+
},
|
|
32
35
|
"dependencies": {
|
|
33
|
-
"
|
|
34
|
-
"@unovis/
|
|
35
|
-
"@unovis/vue": "^1.5.1"
|
|
36
|
+
"@unovis/ts": "1.5.1",
|
|
37
|
+
"@unovis/vue": "1.5.1"
|
|
36
38
|
},
|
|
37
39
|
"devDependencies": {
|
|
38
40
|
"@rollup/plugin-node-resolve": "^13.0.4",
|
|
@@ -51,6 +53,5 @@
|
|
|
51
53
|
"vite-plugin-dts": "^3.9.1",
|
|
52
54
|
"vue-router": "^4.5.0",
|
|
53
55
|
"vue-tsc": "^2.2.0"
|
|
54
|
-
}
|
|
55
|
-
"packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2"
|
|
56
|
+
}
|
|
56
57
|
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|