vue-chrts 0.1.0-beta.2-internal-9 → 0.1.0-beta.2-internal-11
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/index.cjs → Area/AreaChart.cjs} +3 -3
- package/dist/components/Area/AreaChart.cjs.map +1 -0
- package/dist/components/{AreaStacked/AreaStackedChart.d.ts → Area/AreaChart.d.ts} +5 -8
- package/dist/components/{area/index.js → Area/AreaChart.js} +14 -14
- package/dist/components/Area/AreaChart.js.map +1 -0
- package/dist/components/{AreaStacked/AreaStackedChart2.cjs → Area/AreaChart2.cjs} +2 -2
- package/dist/components/Area/AreaChart2.cjs.map +1 -0
- package/dist/components/Area/AreaChart2.js +5 -0
- package/dist/components/Area/AreaChart2.js.map +1 -0
- package/dist/components/Area/index.d.ts +2 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -3
- package/dist/index.js +8 -20
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/AreaStacked/AreaStackedChart.cjs +0 -2
- package/dist/components/AreaStacked/AreaStackedChart.cjs.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart.js +0 -70
- package/dist/components/AreaStacked/AreaStackedChart.js.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart2.cjs.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart2.js +0 -5
- package/dist/components/AreaStacked/AreaStackedChart2.js.map +0 -1
- package/dist/components/Bar/BarChart.cjs +0 -2
- package/dist/components/Bar/BarChart.cjs.map +0 -1
- package/dist/components/Bar/BarChart.d.ts +0 -37
- package/dist/components/Bar/BarChart.js +0 -114
- package/dist/components/Bar/BarChart.js.map +0 -1
- package/dist/components/Bar/BarChart2.cjs +0 -2
- package/dist/components/Bar/BarChart2.cjs.map +0 -1
- package/dist/components/Bar/BarChart2.js +0 -5
- package/dist/components/Bar/BarChart2.js.map +0 -1
- package/dist/components/Crosshair/Crosshair.cjs +0 -2
- package/dist/components/Crosshair/Crosshair.cjs.map +0 -1
- package/dist/components/Crosshair/Crosshair.d.ts +0 -38
- package/dist/components/Crosshair/Crosshair.js +0 -40
- package/dist/components/Crosshair/Crosshair.js.map +0 -1
- package/dist/components/Crosshair/Crosshair2.cjs +0 -2
- package/dist/components/Crosshair/Crosshair2.cjs.map +0 -1
- package/dist/components/Crosshair/Crosshair2.js +0 -5
- package/dist/components/Crosshair/Crosshair2.js.map +0 -1
- package/dist/components/Donut/DonutChart.cjs +0 -6
- package/dist/components/Donut/DonutChart.cjs.map +0 -1
- package/dist/components/Donut/DonutChart.d.ts +0 -23
- package/dist/components/Donut/DonutChart.js +0 -59
- package/dist/components/Donut/DonutChart.js.map +0 -1
- package/dist/components/Donut/DonutChart2.cjs +0 -2
- package/dist/components/Donut/DonutChart2.cjs.map +0 -1
- package/dist/components/Donut/DonutChart2.js +0 -5
- package/dist/components/Donut/DonutChart2.js.map +0 -1
- package/dist/components/Donut/index.cjs +0 -2
- package/dist/components/Donut/index.cjs.map +0 -1
- package/dist/components/Donut/index.js +0 -5
- package/dist/components/Donut/index.js.map +0 -1
- package/dist/components/Line/LineChart.cjs +0 -2
- package/dist/components/Line/LineChart.cjs.map +0 -1
- package/dist/components/Line/LineChart.d.ts +0 -28
- package/dist/components/Line/LineChart.js +0 -91
- package/dist/components/Line/LineChart.js.map +0 -1
- package/dist/components/Line/LineChart2.cjs +0 -2
- package/dist/components/Line/LineChart2.cjs.map +0 -1
- package/dist/components/Line/LineChart2.js +0 -5
- package/dist/components/Line/LineChart2.js.map +0 -1
- package/dist/components/area/index.cjs.map +0 -1
- package/dist/components/area/index.d.ts +0 -2
- package/dist/components/area/index.js.map +0 -1
- package/dist/components/area/index2.cjs +0 -2
- package/dist/components/area/index2.cjs.map +0 -1
- package/dist/components/area/index2.js +0 -5
- package/dist/components/area/index2.js.map +0 -1
- package/dist/components.d.ts +0 -5
- /package/dist/components/{area/types.d.ts → Area/AreaChart.types.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"),v=require("../../utils.cjs"),c=require("@unovis/ts"),
|
|
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
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(""),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(
|
|
7
|
-
//# sourceMappingURL=
|
|
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
|
+
//# sourceMappingURL=AreaChart.cjs.map
|
|
@@ -0,0 +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 { getDistributedIndices } from '../../utils'\nimport {\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\";\nimport { AreaChartProps } from \"./AreaChart.types\";\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":"6sBAsBA,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"}
|
|
@@ -1,14 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AreaChartProps } from './AreaChart.types';
|
|
2
2
|
import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
|
|
3
3
|
|
|
4
|
-
export type AreaStackedChartProps<T> = {
|
|
5
|
-
data: T[];
|
|
6
|
-
height: number;
|
|
7
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
8
|
-
hideTooltip?: boolean;
|
|
9
|
-
};
|
|
10
4
|
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<{
|
|
11
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) &
|
|
5
|
+
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & AreaChartProps<T>, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
|
|
12
6
|
expose(exposed: ShallowUnwrapRef<{}>): void;
|
|
13
7
|
attrs: any;
|
|
14
8
|
slots: ReturnType<() => {}>;
|
|
@@ -19,3 +13,6 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
|
|
|
19
13
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
20
14
|
};
|
|
21
15
|
export default _default;
|
|
16
|
+
type __VLS_Prettify<T> = {
|
|
17
|
+
[K in keyof T]: T[K];
|
|
18
|
+
} & {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
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
2
|
import { getDistributedIndices as F } from "../../utils.js";
|
|
3
3
|
import { Position as T, CurveType as b } from "@unovis/ts";
|
|
4
|
-
import { VisXYContainer as
|
|
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
5
|
import O from "../Tooltip.js";
|
|
6
|
-
import { PaginationPosition as
|
|
7
|
-
const Q = /* @__PURE__ */
|
|
8
|
-
__name: "
|
|
6
|
+
import { PaginationPosition as E } from "../../types.js";
|
|
7
|
+
const Q = /* @__PURE__ */ X({
|
|
8
|
+
__name: "AreaChart",
|
|
9
9
|
props: {
|
|
10
10
|
data: {},
|
|
11
11
|
height: {},
|
|
@@ -41,14 +41,14 @@ const Q = /* @__PURE__ */ C({
|
|
|
41
41
|
return "";
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
|
-
function
|
|
44
|
+
function C(e) {
|
|
45
45
|
var o;
|
|
46
46
|
return {
|
|
47
47
|
y: (n) => Number(n[e]),
|
|
48
48
|
color: ((o = i.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
|
|
49
49
|
};
|
|
50
50
|
}
|
|
51
|
-
const
|
|
51
|
+
const P = u.map(
|
|
52
52
|
(e, o) => `
|
|
53
53
|
<linearGradient id="gradient${o}-${e}" gradientTransform="rotate(90)">
|
|
54
54
|
<stop offset="0%" stop-color="${e}" stop-opacity="1" />
|
|
@@ -56,7 +56,7 @@ const Q = /* @__PURE__ */ C({
|
|
|
56
56
|
</linearGradient>
|
|
57
57
|
`
|
|
58
58
|
).join(""), h = c(
|
|
59
|
-
() => i.paginationPosition ===
|
|
59
|
+
() => i.paginationPosition === E.Top
|
|
60
60
|
), m = c(() => F(i.data.length, i.xNumTicks)), p = c(() => {
|
|
61
61
|
var e;
|
|
62
62
|
return !((e = i.data) != null && e.length) || !m || m.value.length === 0 ? [] : m.value.map((o) => i.data[o]);
|
|
@@ -64,22 +64,22 @@ const Q = /* @__PURE__ */ C({
|
|
|
64
64
|
return (e, o) => (l(), d("div", {
|
|
65
65
|
class: v(["flex flex-col space-y-4", { "flex-col-reverse": h.value }])
|
|
66
66
|
}, [
|
|
67
|
-
s(t(
|
|
67
|
+
s(t(A), {
|
|
68
68
|
data: p.value,
|
|
69
69
|
height: e.height,
|
|
70
|
-
"svg-defs": t(
|
|
70
|
+
"svg-defs": t(P)
|
|
71
71
|
}, {
|
|
72
72
|
default: $(() => [
|
|
73
|
-
e.hideTooltip ? y("", !0) : (l(), k(t(
|
|
73
|
+
e.hideTooltip ? y("", !0) : (l(), k(t(w), {
|
|
74
74
|
key: 0,
|
|
75
75
|
"horizontal-placement": t(T).Right,
|
|
76
76
|
"vertical-placement": t(T).Top
|
|
77
77
|
}, null, 8, ["horizontal-placement", "vertical-placement"])),
|
|
78
78
|
(l(!0), d(L, null, Y(Object.keys(i.categories), (n, r) => (l(), d(L, { key: r }, [
|
|
79
|
-
s(t(
|
|
79
|
+
s(t(z), j({
|
|
80
80
|
x: (g, f) => f,
|
|
81
81
|
ref_for: !0
|
|
82
|
-
},
|
|
82
|
+
}, C(n), {
|
|
83
83
|
color: `url(#gradient${r}-${t(u)[r]})`,
|
|
84
84
|
opacity: 0.5,
|
|
85
85
|
"curve-type": e.curveType ?? t(b).MonotoneX
|
|
@@ -131,4 +131,4 @@ const Q = /* @__PURE__ */ C({
|
|
|
131
131
|
export {
|
|
132
132
|
Q as default
|
|
133
133
|
};
|
|
134
|
-
//# sourceMappingURL=
|
|
134
|
+
//# sourceMappingURL=AreaChart.js.map
|
|
@@ -0,0 +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 { getDistributedIndices } from '../../utils'\nimport {\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\";\nimport { AreaChartProps } from \"./AreaChart.types\";\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,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,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./
|
|
2
|
-
//# sourceMappingURL=
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AreaChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AreaChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./types.cjs"),e=require("@unovis/ts"),r=require("./components/
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./types.cjs"),e=require("@unovis/ts"),r=require("./components/Area/AreaChart.cjs");exports.PaginationPosition=t.PaginationPosition;Object.defineProperty(exports,"CurveType",{enumerable:!0,get:()=>e.CurveType});Object.defineProperty(exports,"Orientation",{enumerable:!0,get:()=>e.Orientation});Object.defineProperty(exports,"Position",{enumerable:!0,get:()=>e.Position});exports.AreaChart=r.default;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
export * from './components';
|
|
1
|
+
export * from './components/Area';
|
|
2
2
|
export { PaginationPosition } from './types';
|
|
3
3
|
export { CurveType, Position, Orientation, type NumericAccessor } from '@unovis/ts';
|
|
4
4
|
export type { BulletLegendItemInterface } from '@unovis/ts';
|
|
5
|
-
export { default as AreaChart } from './components/area/index';
|
|
6
|
-
export type { AreaChartProps } from './components/area/types';
|
package/dist/index.js
CHANGED
|
@@ -1,23 +1,11 @@
|
|
|
1
|
-
import { PaginationPosition as
|
|
2
|
-
import { CurveType as
|
|
3
|
-
import { default as
|
|
4
|
-
import { default as n } from "./components/AreaStacked/AreaStackedChart.js";
|
|
5
|
-
import { default as x } from "./components/Line/LineChart.js";
|
|
6
|
-
import { default as C } from "./components/Bar/BarChart.js";
|
|
7
|
-
import { default as l } from "./components/Donut/DonutChart.js";
|
|
8
|
-
import { default as y } from "./components/Crosshair/Crosshair.js";
|
|
9
|
-
import { DonutType as D } from "./components/Donut/index.js";
|
|
1
|
+
import { PaginationPosition as t } from "./types.js";
|
|
2
|
+
import { CurveType as i, Orientation as a, Position as n } from "@unovis/ts";
|
|
3
|
+
import { default as p } from "./components/Area/AreaChart.js";
|
|
10
4
|
export {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
l as DonutChart,
|
|
17
|
-
D as DonutType,
|
|
18
|
-
x as LineChart,
|
|
19
|
-
f as Orientation,
|
|
20
|
-
o as PaginationPosition,
|
|
21
|
-
p as Position
|
|
5
|
+
p as AreaChart,
|
|
6
|
+
i as CurveType,
|
|
7
|
+
a as Orientation,
|
|
8
|
+
t as PaginationPosition,
|
|
9
|
+
n as Position
|
|
22
10
|
};
|
|
23
11
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/package.json
CHANGED
|
@@ -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"),d=require("@unovis/ts"),p=require("../Tooltip.cjs"),m={class:"flex flex-col space-y-4"},f={class:"flex items center justify-end"},h=e.defineComponent({__name:"AreaStackedChart",props:{data:{},height:{},categories:{},hideTooltip:{type:Boolean}},setup(a){const i=a,c=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const o=e.createApp(p.default,{data:t,categories:i.categories}),n=document.createElement("div");o.mount(n);const l=n.innerHTML;return o.unmount(),l}catch{return""}}),s=t=>Number.parseInt(t.time),u=[t=>t.firstTime,t=>t.returning];return(t,o)=>(e.openBlock(),e.createElementBlock("div",m,[e.createVNode(e.unref(r.VisXYContainer),{data:t.data,height:t.height},{default:e.withCtx(()=>[e.createVNode(e.unref(r.VisArea),{x:s,y:u,color:Object.values(i.categories).map(n=>n.color),"curve-type":e.unref(d.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}),t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(r.VisCrosshair),{key:0,color:"#666",template:c.value},null,8,["template"]))]),_:1},8,["data","height"]),e.createElementVNode("div",f,[e.createVNode(e.unref(r.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])]))}});exports.default=h;
|
|
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 {\n VisXYContainer,\n VisAxis,\n VisArea,\n VisBulletLegend,\n VisCrosshair,\n} from \"@unovis/vue\";\nimport { BulletLegendItemInterface, CurveType } from \"@unovis/ts\";\nimport Tooltip from \"./../Tooltip.vue\";\nimport { computed, createApp } from \"vue\";\n\nexport type AreaStackedChartProps<T> = {\n data: T[];\n height: number;\n categories: Record<string, BulletLegendItemInterface>;\n hideTooltip?: boolean;\n};\n\nconst props = defineProps<AreaStackedChartProps<T>>();\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\nconst x = (d: any) => {\n return Number.parseInt(d.time);\n};\nconst y = [(d: any) => d.firstTime, (d: any) => d.returning];\n</script>\n\n<template>\n <div class=\"flex flex-col space-y-4\">\n <VisXYContainer :data=\"data\" :height=\"height\">\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 type=\"x\" label=\"Time\" :num-ticks=\"12\" />\n <VisAxis type=\"y\" label=\"Number of visitors\" :num-ticks=\"3\" />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\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","generateTooltip","computed","d","app","createApp","Tooltip","container","html","x","y"],"mappings":"yZAmBA,MAAMA,EAAQC,EAERC,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,WAAYJ,EAAM,UAAA,CACnB,EAEKQ,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAEKC,EAAKN,GACF,OAAO,SAASA,EAAE,IAAI,EAEzBO,EAAI,CAAEP,GAAWA,EAAE,UAAYA,GAAWA,EAAE,SAAS"}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { defineComponent as d, computed as f, createApp as h, createElementBlock as y, openBlock as a, createVNode as o, createElementVNode as g, unref as t, withCtx as v, createBlock as _, createCommentVNode as V } from "vue";
|
|
2
|
-
import { VisXYContainer as k, VisArea as C, VisAxis as c, VisCrosshair as T, VisBulletLegend as b } from "@unovis/vue";
|
|
3
|
-
import { CurveType as x } from "@unovis/ts";
|
|
4
|
-
import B from "../Tooltip.js";
|
|
5
|
-
const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center justify-end" }, O = /* @__PURE__ */ d({
|
|
6
|
-
__name: "AreaStackedChart",
|
|
7
|
-
props: {
|
|
8
|
-
data: {},
|
|
9
|
-
height: {},
|
|
10
|
-
categories: {},
|
|
11
|
-
hideTooltip: { type: Boolean }
|
|
12
|
-
},
|
|
13
|
-
setup(s) {
|
|
14
|
-
const i = s, l = f(() => (e) => {
|
|
15
|
-
if (typeof window > "u" || typeof document > "u")
|
|
16
|
-
return "";
|
|
17
|
-
try {
|
|
18
|
-
const r = h(B, {
|
|
19
|
-
data: e,
|
|
20
|
-
categories: i.categories
|
|
21
|
-
}), n = document.createElement("div");
|
|
22
|
-
r.mount(n);
|
|
23
|
-
const p = n.innerHTML;
|
|
24
|
-
return r.unmount(), p;
|
|
25
|
-
} catch {
|
|
26
|
-
return "";
|
|
27
|
-
}
|
|
28
|
-
}), m = (e) => Number.parseInt(e.time), u = [(e) => e.firstTime, (e) => e.returning];
|
|
29
|
-
return (e, r) => (a(), y("div", N, [
|
|
30
|
-
o(t(k), {
|
|
31
|
-
data: e.data,
|
|
32
|
-
height: e.height
|
|
33
|
-
}, {
|
|
34
|
-
default: v(() => [
|
|
35
|
-
o(t(C), {
|
|
36
|
-
x: m,
|
|
37
|
-
y: u,
|
|
38
|
-
color: Object.values(i.categories).map((n) => n.color),
|
|
39
|
-
"curve-type": t(x).Linear
|
|
40
|
-
}, null, 8, ["color", "curve-type"]),
|
|
41
|
-
o(t(c), {
|
|
42
|
-
type: "x",
|
|
43
|
-
label: "Time",
|
|
44
|
-
"num-ticks": 12
|
|
45
|
-
}),
|
|
46
|
-
o(t(c), {
|
|
47
|
-
type: "y",
|
|
48
|
-
label: "Number of visitors",
|
|
49
|
-
"num-ticks": 3
|
|
50
|
-
}),
|
|
51
|
-
e.hideTooltip ? V("", !0) : (a(), _(t(T), {
|
|
52
|
-
key: 0,
|
|
53
|
-
color: "#666",
|
|
54
|
-
template: l.value
|
|
55
|
-
}, null, 8, ["template"]))
|
|
56
|
-
]),
|
|
57
|
-
_: 1
|
|
58
|
-
}, 8, ["data", "height"]),
|
|
59
|
-
g("div", A, [
|
|
60
|
-
o(t(b), {
|
|
61
|
-
items: Object.values(e.categories)
|
|
62
|
-
}, null, 8, ["items"])
|
|
63
|
-
])
|
|
64
|
-
]));
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
export {
|
|
68
|
-
O as default
|
|
69
|
-
};
|
|
70
|
-
//# 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 {\n VisXYContainer,\n VisAxis,\n VisArea,\n VisBulletLegend,\n VisCrosshair,\n} from \"@unovis/vue\";\nimport { BulletLegendItemInterface, CurveType } from \"@unovis/ts\";\nimport Tooltip from \"./../Tooltip.vue\";\nimport { computed, createApp } from \"vue\";\n\nexport type AreaStackedChartProps<T> = {\n data: T[];\n height: number;\n categories: Record<string, BulletLegendItemInterface>;\n hideTooltip?: boolean;\n};\n\nconst props = defineProps<AreaStackedChartProps<T>>();\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\nconst x = (d: any) => {\n return Number.parseInt(d.time);\n};\nconst y = [(d: any) => d.firstTime, (d: any) => d.returning];\n</script>\n\n<template>\n <div class=\"flex flex-col space-y-4\">\n <VisXYContainer :data=\"data\" :height=\"height\">\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 type=\"x\" label=\"Time\" :num-ticks=\"12\" />\n <VisAxis type=\"y\" label=\"Number of visitors\" :num-ticks=\"3\" />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\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","generateTooltip","computed","d","app","createApp","Tooltip","container","html","x","y"],"mappings":";;;;;;;;;;;;;AAmBA,UAAMA,IAAQC,GAERC,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,YAAYJ,EAAM;AAAA,QAAA,CACnB,GAEKQ,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,GAEKC,IAAI,CAACN,MACF,OAAO,SAASA,EAAE,IAAI,GAEzBO,IAAI,CAAC,CAACP,MAAWA,EAAE,WAAW,CAACA,MAAWA,EAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AreaStackedChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -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"),t=require("@unovis/ts"),r=require("@unovis/vue"),f=require("../Tooltip.cjs"),p=require("../../types.cjs"),m=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:t.Orientation.Vertical},paginationPosition:{default:p.PaginationPosition.Bottom}},setup(g){const o=g,d=e.computed(()=>o.yAxis.map(n=>a=>a[n])),s=(n,a)=>Object.values(o.categories)[a].color,u=e.computed(()=>n=>{if(typeof window>"u"||typeof document>"u")return"";try{const a=e.createApp(f.default,{data:n,categories:o.categories}),l=document.createElement("div");a.mount(l);const i=l.innerHTML;return a.unmount(),i}catch{return""}}),c=e.computed(()=>o.paginationPosition===p.PaginationPosition.Top);return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":c.value}])},[e.createVNode(e.unref(r.VisXYContainer),{height:n.height},{default:e.withCtx(()=>[e.createVNode(e.unref(r.VisTooltip),{triggers:{[e.unref(t.GroupedBar).selectors.bar]:u.value,[e.unref(t.StackedBar).selectors.bar]:u.value}},null,8,["triggers"]),n.stacked?(e.openBlock(),e.createBlock(e.unref(r.VisStackedBar),{key:1,data:n.data,x:(l,i)=>i,y:d.value,"grid-line":!1,"domain-line":!1,color:s,"rounded-corners":n.radius??0,"group-padding":n.groupPadding??0,"bar-padding":n.barPadding??.2,orientation:n.orientation??e.unref(t.Orientation).Vertical},null,8,["data","x","y","rounded-corners","group-padding","bar-padding","orientation"])):(e.openBlock(),e.createBlock(e.unref(r.VisGroupedBar),{key:0,data:n.data,x:(l,i)=>i,y:d.value,"grid-line":!1,"domain-line":!1,color:s,"rounded-corners":n.radius??0,"group-padding":n.groupPadding??0,"bar-padding":n.barPadding??.2,orientation:n.orientation??e.unref(t.Orientation).Vertical},null,8,["data","x","y","rounded-corners","group-padding","bar-padding","orientation"])),e.createVNode(e.unref(r.VisAxis),{type:"x",label:n.xLabel,"grid-line":!1,"domain-line":!1,"tick-format":n.xFormatter,"num-ticks":n.xNumTicks,"tick-line":!1},null,8,["label","tick-format","num-ticks"]),e.createVNode(e.unref(r.VisAxis),{type:"y",label:n.yLabel,"grid-line":n.orientation!==e.unref(t.Orientation).Horizontal,"domain-line":!1,"tick-format":n.yFormatter},null,8,["label","grid-line","tick-format"])]),_:1},8,["height"]),n.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items center justify-end",{"pb-4":c.value}])},[e.createVNode(e.unref(r.VisBulletLegend),{items:Object.values(n.categories)},null,8,["items"])],2))],2))}});exports.default=m;
|
|
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, StackedBar } 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 \"../../types\";\n\ntype 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(defineProps<BarChartProps<T>>(), {\n orientation: Orientation.Vertical,\n paginationPosition: PaginationPosition.Bottom,\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 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\nconst PaginationPositionTop = computed(\n () => props.paginationPosition === PaginationPosition.Top\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 :height=\"height\">\n <VisTooltip\n :triggers=\"{\n [GroupedBar.selectors.bar]: generateTooltip,\n [StackedBar.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\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","yAxis","computed","key","d","color","_","i","generateTooltip","app","createApp","Tooltip","container","html","PaginationPositionTop","PaginationPosition"],"mappings":"ulBAoCA,MAAMA,EAAQC,EAKRC,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,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,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,OACO,CACP,MAAA,EAAA,CACT,CACD,EAEKC,EAAwBZ,EAAA,SAC5B,IAAMH,EAAM,qBAAuBgB,qBAAmB,GACxD"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { BulletLegendItemInterface, Orientation } from '@unovis/ts';
|
|
2
|
-
import { PaginationPosition } from '../../types';
|
|
3
|
-
import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
|
|
4
|
-
|
|
5
|
-
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<{
|
|
6
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & {
|
|
7
|
-
data: T[];
|
|
8
|
-
stacked?: boolean;
|
|
9
|
-
height: number;
|
|
10
|
-
xLabel?: string;
|
|
11
|
-
yLabel?: string;
|
|
12
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
13
|
-
xFormatter: (i: number, idx?: number) => string | number;
|
|
14
|
-
yFormatter?: (i: number, idx?: number) => string | number;
|
|
15
|
-
yNumTicks?: number;
|
|
16
|
-
xNumTicks?: number;
|
|
17
|
-
yAxis: (keyof T)[];
|
|
18
|
-
groupPadding?: number;
|
|
19
|
-
barPadding?: number;
|
|
20
|
-
radius?: number;
|
|
21
|
-
hideLegend?: boolean;
|
|
22
|
-
orientation?: Orientation;
|
|
23
|
-
paginationPosition?: PaginationPosition;
|
|
24
|
-
}, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
|
|
25
|
-
expose(exposed: ShallowUnwrapRef<{}>): void;
|
|
26
|
-
attrs: any;
|
|
27
|
-
slots: ReturnType<() => {}>;
|
|
28
|
-
emit: typeof __VLS_emit;
|
|
29
|
-
}>) => VNode<RendererNode, 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,114 +0,0 @@
|
|
|
1
|
-
import { defineComponent as v, computed as s, createApp as B, createElementBlock as m, openBlock as d, normalizeClass as f, createVNode as o, createCommentVNode as P, unref as a, withCtx as V, createBlock as y } from "vue";
|
|
2
|
-
import { Orientation as l, StackedBar as L, GroupedBar as T } from "@unovis/ts";
|
|
3
|
-
import { VisXYContainer as C, VisTooltip as A, VisGroupedBar as N, VisStackedBar as F, VisAxis as b, VisBulletLegend as j } from "@unovis/vue";
|
|
4
|
-
import w from "../Tooltip.js";
|
|
5
|
-
import { PaginationPosition as k } from "../../types.js";
|
|
6
|
-
const H = /* @__PURE__ */ v({
|
|
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: l.Vertical },
|
|
25
|
-
paginationPosition: { default: k.Bottom }
|
|
26
|
-
},
|
|
27
|
-
setup(h) {
|
|
28
|
-
const n = h, u = s(() => n.yAxis.map((e) => (i) => i[e])), p = (e, i) => Object.values(n.categories)[i].color, c = s(() => (e) => {
|
|
29
|
-
if (typeof window > "u" || typeof document > "u")
|
|
30
|
-
return "";
|
|
31
|
-
try {
|
|
32
|
-
const i = B(w, {
|
|
33
|
-
data: e,
|
|
34
|
-
categories: n.categories
|
|
35
|
-
}), t = document.createElement("div");
|
|
36
|
-
i.mount(t);
|
|
37
|
-
const r = t.innerHTML;
|
|
38
|
-
return i.unmount(), r;
|
|
39
|
-
} catch {
|
|
40
|
-
return "";
|
|
41
|
-
}
|
|
42
|
-
}), g = s(
|
|
43
|
-
() => n.paginationPosition === k.Top
|
|
44
|
-
);
|
|
45
|
-
return (e, i) => (d(), m("div", {
|
|
46
|
-
class: f(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
|
|
47
|
-
}, [
|
|
48
|
-
o(a(C), { height: e.height }, {
|
|
49
|
-
default: V(() => [
|
|
50
|
-
o(a(A), {
|
|
51
|
-
triggers: {
|
|
52
|
-
[a(T).selectors.bar]: c.value,
|
|
53
|
-
[a(L).selectors.bar]: c.value
|
|
54
|
-
}
|
|
55
|
-
}, null, 8, ["triggers"]),
|
|
56
|
-
e.stacked ? (d(), y(a(F), {
|
|
57
|
-
key: 1,
|
|
58
|
-
data: e.data,
|
|
59
|
-
x: (t, r) => r,
|
|
60
|
-
y: u.value,
|
|
61
|
-
"grid-line": !1,
|
|
62
|
-
"domain-line": !1,
|
|
63
|
-
color: p,
|
|
64
|
-
"rounded-corners": e.radius ?? 0,
|
|
65
|
-
"group-padding": e.groupPadding ?? 0,
|
|
66
|
-
"bar-padding": e.barPadding ?? 0.2,
|
|
67
|
-
orientation: e.orientation ?? a(l).Vertical
|
|
68
|
-
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), y(a(N), {
|
|
69
|
-
key: 0,
|
|
70
|
-
data: e.data,
|
|
71
|
-
x: (t, r) => r,
|
|
72
|
-
y: u.value,
|
|
73
|
-
"grid-line": !1,
|
|
74
|
-
"domain-line": !1,
|
|
75
|
-
color: p,
|
|
76
|
-
"rounded-corners": e.radius ?? 0,
|
|
77
|
-
"group-padding": e.groupPadding ?? 0,
|
|
78
|
-
"bar-padding": e.barPadding ?? 0.2,
|
|
79
|
-
orientation: e.orientation ?? a(l).Vertical
|
|
80
|
-
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
|
|
81
|
-
o(a(b), {
|
|
82
|
-
type: "x",
|
|
83
|
-
label: e.xLabel,
|
|
84
|
-
"grid-line": !1,
|
|
85
|
-
"domain-line": !1,
|
|
86
|
-
"tick-format": e.xFormatter,
|
|
87
|
-
"num-ticks": e.xNumTicks,
|
|
88
|
-
"tick-line": !1
|
|
89
|
-
}, null, 8, ["label", "tick-format", "num-ticks"]),
|
|
90
|
-
o(a(b), {
|
|
91
|
-
type: "y",
|
|
92
|
-
label: e.yLabel,
|
|
93
|
-
"grid-line": e.orientation !== a(l).Horizontal,
|
|
94
|
-
"domain-line": !1,
|
|
95
|
-
"tick-format": e.yFormatter
|
|
96
|
-
}, null, 8, ["label", "grid-line", "tick-format"])
|
|
97
|
-
]),
|
|
98
|
-
_: 1
|
|
99
|
-
}, 8, ["height"]),
|
|
100
|
-
e.hideLegend ? P("", !0) : (d(), m("div", {
|
|
101
|
-
key: 0,
|
|
102
|
-
class: f(["flex items center justify-end", { "pb-4": g.value }])
|
|
103
|
-
}, [
|
|
104
|
-
o(a(j), {
|
|
105
|
-
items: Object.values(e.categories)
|
|
106
|
-
}, null, 8, ["items"])
|
|
107
|
-
], 2))
|
|
108
|
-
], 2));
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
export {
|
|
112
|
-
H as default
|
|
113
|
-
};
|
|
114
|
-
//# 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, StackedBar } 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 \"../../types\";\n\ntype 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(defineProps<BarChartProps<T>>(), {\n orientation: Orientation.Vertical,\n paginationPosition: PaginationPosition.Bottom,\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 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\nconst PaginationPositionTop = computed(\n () => props.paginationPosition === PaginationPosition.Top\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 :height=\"height\">\n <VisTooltip\n :triggers=\"{\n [GroupedBar.selectors.bar]: generateTooltip,\n [StackedBar.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\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","yAxis","computed","key","d","color","_","generateTooltip","app","createApp","Tooltip","container","html","PaginationPositionTop","PaginationPosition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAMA,IAAQC,GAKRC,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;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAI,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMN;AAAA,UACN,YAAYL,EAAM;AAAA,QAAA,CACnB,GAEKY,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,GAEKC,IAAwBX;AAAA,MAC5B,MAAMH,EAAM,uBAAuBe,EAAmB;AAAA,IACxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart2.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"),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,38 +0,0 @@
|
|
|
1
|
-
import { BulletLegendItemInterface } from '@unovis/ts';
|
|
2
|
-
import { Component, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
|
|
3
|
-
|
|
4
|
-
declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
5
|
-
colors: string[];
|
|
6
|
-
index: string;
|
|
7
|
-
items: BulletLegendItemInterface[];
|
|
8
|
-
customTooltip?: Component;
|
|
9
|
-
}>, {
|
|
10
|
-
colors: () => any[];
|
|
11
|
-
}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< 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, 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: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
26
|
-
} : {
|
|
27
|
-
type: 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,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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Crosshair2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Crosshair2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -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"),n=require("@unovis/vue"),u=require("./index.cjs"),d={class:"flex items-center justify-center"},g={key:0,class:"flex items-center justify-center mt-4"},f=e.defineComponent({__name:"DonutChart",props:{type:{},data:{},height:{},radius:{},hidePagination:{type:Boolean},labels:{}},setup(r){const o=r,i=t=>t,l=o.type===u.DonutType.Half,s={[c.Donut.selectors.segment]:t=>`<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${o.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",d,[e.createVNode(e.unref(n.VisSingleContainer),{data:t.data,height:t.height,margin:{}},{default:e.withCtx(()=>[e.createVNode(e.unref(n.VisTooltip),{"horizontal-shift":20,"vertical-shift":20,triggers:s}),e.createVNode(e.unref(n.VisDonut),{value:i,"corner-radius":t.radius,color:o.labels.map(a=>a.color),"angle-range":l?[-1.5707963267948966,1.5707963267948966]:[]},null,8,["corner-radius","color","angle-range"])]),_:1},8,["data","height"]),e.renderSlot(t.$slots,"default")]),t.hidePagination?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",g,[e.createVNode(e.unref(n.VisBulletLegend),{items:t.labels},null,8,["items"])]))],64))}});exports.default=f;
|
|
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\";\nimport { type DonutChartProps, DonutType } from \".\";\n\nconst props = defineProps<DonutChartProps>()\n\nconst value = (d: number) => d;\n\nconst isHalf = props.type === DonutType.Half;\n\nconst tooltip = {\n [Donut.selectors.segment]: (d: any) => {\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 :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","DonutType","tooltip","Donut"],"mappings":"wbAUA,MAAMA,EAAQC,EAERC,EAASC,GAAcA,EAEvBC,EAASJ,EAAM,OAASK,EAAU,UAAA,KAElCC,EAAU,CACd,CAACC,QAAM,UAAU,OAAO,EAAIJ,GACnB,kGACLH,EAAM,OAAOG,EAAE,KAAK,EAAE,KACxB;AAAA,eACWA,EAAE,IAAI;AAAA;AAAA;AAAA,SAKrB"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { DonutChartProps } from '.';
|
|
2
|
-
import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
|
|
3
|
-
|
|
4
|
-
declare function __VLS_template(): {
|
|
5
|
-
default?(_: {}): any;
|
|
6
|
-
};
|
|
7
|
-
declare const __VLS_component: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
8
|
-
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
9
|
-
export default _default;
|
|
10
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
11
|
-
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
12
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
13
|
-
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
14
|
-
} : {
|
|
15
|
-
type: PropType<T[K]>;
|
|
16
|
-
required: true;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
20
|
-
new (): {
|
|
21
|
-
$slots: S;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { defineComponent as u, createElementBlock as n, openBlock as r, Fragment as m, createElementVNode as f, createCommentVNode as p, createVNode as t, renderSlot as g, unref as o, withCtx as h } from "vue";
|
|
2
|
-
import { Donut as v } from "@unovis/ts";
|
|
3
|
-
import { VisSingleContainer as y, VisTooltip as V, VisDonut as b, VisBulletLegend as C } from "@unovis/vue";
|
|
4
|
-
import { DonutType as _ } from "./index.js";
|
|
5
|
-
const k = { class: "flex items-center justify-center" }, B = {
|
|
6
|
-
key: 0,
|
|
7
|
-
class: "flex items-center justify-center mt-4"
|
|
8
|
-
}, E = /* @__PURE__ */ u({
|
|
9
|
-
__name: "DonutChart",
|
|
10
|
-
props: {
|
|
11
|
-
type: {},
|
|
12
|
-
data: {},
|
|
13
|
-
height: {},
|
|
14
|
-
radius: {},
|
|
15
|
-
hidePagination: { type: Boolean },
|
|
16
|
-
labels: {}
|
|
17
|
-
},
|
|
18
|
-
setup(a) {
|
|
19
|
-
const i = a, l = (e) => e, s = i.type === _.Half, d = {
|
|
20
|
-
[v.selectors.segment]: (e) => `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${i.labels[e.index].color} ;'></div>
|
|
21
|
-
<div>${e.data}</div>
|
|
22
|
-
</vistooltip>
|
|
23
|
-
</vissinglecontainer>
|
|
24
|
-
</div>`
|
|
25
|
-
};
|
|
26
|
-
return (e, D) => (r(), n(m, null, [
|
|
27
|
-
f("div", k, [
|
|
28
|
-
t(o(y), {
|
|
29
|
-
data: e.data,
|
|
30
|
-
height: e.height,
|
|
31
|
-
margin: {}
|
|
32
|
-
}, {
|
|
33
|
-
default: h(() => [
|
|
34
|
-
t(o(V), {
|
|
35
|
-
"horizontal-shift": 20,
|
|
36
|
-
"vertical-shift": 20,
|
|
37
|
-
triggers: d
|
|
38
|
-
}),
|
|
39
|
-
t(o(b), {
|
|
40
|
-
value: l,
|
|
41
|
-
"corner-radius": e.radius,
|
|
42
|
-
color: i.labels.map((c) => c.color),
|
|
43
|
-
"angle-range": s ? [-1.5707963267948966, 1.5707963267948966] : []
|
|
44
|
-
}, null, 8, ["corner-radius", "color", "angle-range"])
|
|
45
|
-
]),
|
|
46
|
-
_: 1
|
|
47
|
-
}, 8, ["data", "height"]),
|
|
48
|
-
g(e.$slots, "default")
|
|
49
|
-
]),
|
|
50
|
-
e.hidePagination ? p("", !0) : (r(), n("div", B, [
|
|
51
|
-
t(o(C), { items: e.labels }, null, 8, ["items"])
|
|
52
|
-
]))
|
|
53
|
-
], 64));
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
export {
|
|
57
|
-
E 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\";\nimport { type DonutChartProps, DonutType } from \".\";\n\nconst props = defineProps<DonutChartProps>()\n\nconst value = (d: number) => d;\n\nconst isHalf = props.type === DonutType.Half;\n\nconst tooltip = {\n [Donut.selectors.segment]: (d: any) => {\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 :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","DonutType","tooltip","Donut"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAcA,GAEvBC,IAASJ,EAAM,SAASK,EAAU,MAElCC,IAAU;AAAA,MACd,CAACC,EAAM,UAAU,OAAO,GAAG,CAACJ,MACnB,kGACLH,EAAM,OAAOG,EAAE,KAAK,EAAE,KACxB;AAAA,eACWA,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA,IAKrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/Donut/index.ts"],"sourcesContent":["export { default as DonutChart } from \"./DonutChart.vue\";\n\ntype 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\nenum DonutType {\n Half = \"half\",\n Full = \"full\",\n}\n\nexport { type DonutChartProps, DonutType };\n"],"names":["DonutType"],"mappings":"gFAcK,IAAAA,GAAAA,IACHA,EAAA,KAAO,OACPA,EAAA,KAAO,OAFJA,IAAAA,GAAA,CAAA,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Donut/index.ts"],"sourcesContent":["export { default as DonutChart } from \"./DonutChart.vue\";\n\ntype 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\nenum DonutType {\n Half = \"half\",\n Full = \"full\",\n}\n\nexport { type DonutChartProps, DonutType };\n"],"names":["DonutType"],"mappings":"AAcK,IAAAA,sBAAAA,OACHA,EAAA,OAAO,QACPA,EAAA,OAAO,QAFJA,IAAAA,KAAA,CAAA,CAAA;"}
|
|
@@ -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"),o=require("@unovis/vue"),d=require("../Tooltip.cjs"),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=>{if(typeof window>"u"||typeof document>"u")return"";try{const r=e.createApp(d.default,{data:t,categories:n.categories}),a=document.createElement("div");r.mount(a);const i=a.innerHTML;return r.unmount(),i}catch{return""}});return(t,r)=>(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),(a,i)=>(e.openBlock(),e.createBlock(e.unref(o.VisLine),{key:i,x:(c,p)=>p,y:c=>c[a],color:u(i),"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 {\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype 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 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</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,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"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { CurveType, BulletLegendItemInterface } from '@unovis/ts';
|
|
2
|
-
import { PaginationPosition } from '../../types';
|
|
3
|
-
import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
|
|
4
|
-
|
|
5
|
-
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<{
|
|
6
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & {
|
|
7
|
-
data: T[];
|
|
8
|
-
height: number;
|
|
9
|
-
xLabel?: string;
|
|
10
|
-
yLabel?: string;
|
|
11
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
12
|
-
xFormatter: (i: number, idx: number) => string;
|
|
13
|
-
yFormatter?: (i: number, idx: number) => string;
|
|
14
|
-
curveType?: CurveType;
|
|
15
|
-
yNumTicks?: number;
|
|
16
|
-
xNumTicks?: number;
|
|
17
|
-
paginationPosition?: PaginationPosition;
|
|
18
|
-
}, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
|
|
19
|
-
expose(exposed: ShallowUnwrapRef<{}>): void;
|
|
20
|
-
attrs: any;
|
|
21
|
-
slots: ReturnType<() => {}>;
|
|
22
|
-
emit: typeof __VLS_emit;
|
|
23
|
-
}>) => VNode<RendererNode, RendererElement, {
|
|
24
|
-
[key: string]: any;
|
|
25
|
-
}> & {
|
|
26
|
-
__ctx?: Awaited<typeof __VLS_setup>;
|
|
27
|
-
};
|
|
28
|
-
export default _default;
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { defineComponent as g, computed as h, createApp as k, createElementBlock as s, openBlock as l, 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 { VisXYContainer as F, VisTooltip as N, VisLine as j, VisAxis as u, VisCrosshair as B, VisBulletLegend as w } from "@unovis/vue";
|
|
4
|
-
import z from "../Tooltip.js";
|
|
5
|
-
const E = { class: "flex items center justify-end" }, X = /* @__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 n = p, d = (e) => Object.values(n.categories)[e].color, f = h(() => (e) => {
|
|
22
|
-
if (typeof window > "u" || typeof document > "u")
|
|
23
|
-
return "";
|
|
24
|
-
try {
|
|
25
|
-
const r = k(z, {
|
|
26
|
-
data: e,
|
|
27
|
-
categories: n.categories
|
|
28
|
-
}), a = document.createElement("div");
|
|
29
|
-
r.mount(a);
|
|
30
|
-
const i = a.innerHTML;
|
|
31
|
-
return r.unmount(), i;
|
|
32
|
-
} catch {
|
|
33
|
-
return "";
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
return (e, r) => (l(), s("div", {
|
|
37
|
-
class: v(["space-y-4 flex flex-col", {
|
|
38
|
-
"flex-col-reverse": n.paginationPosition === "top"
|
|
39
|
-
}])
|
|
40
|
-
}, [
|
|
41
|
-
o(t(F), {
|
|
42
|
-
data: e.data,
|
|
43
|
-
height: e.height
|
|
44
|
-
}, {
|
|
45
|
-
default: T(() => [
|
|
46
|
-
o(t(N), {
|
|
47
|
-
"horizontal-placement": t(m).Right,
|
|
48
|
-
"vertical-placement": t(m).Top
|
|
49
|
-
}, null, 8, ["horizontal-placement", "vertical-placement"]),
|
|
50
|
-
(l(!0), s(L, null, V(Object.keys(n.categories), (a, i) => (l(), x(t(j), {
|
|
51
|
-
key: i,
|
|
52
|
-
x: (c, y) => y,
|
|
53
|
-
y: (c) => c[a],
|
|
54
|
-
color: d(i),
|
|
55
|
-
"curve-type": e.curveType ?? t(C).MonotoneX
|
|
56
|
-
}, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
|
|
57
|
-
o(t(u), {
|
|
58
|
-
type: "x",
|
|
59
|
-
"tick-format": e.xFormatter,
|
|
60
|
-
"num-ticks": e.xNumTicks ?? 4,
|
|
61
|
-
label: e.xLabel,
|
|
62
|
-
"label-margin": 8,
|
|
63
|
-
"domain-line": !1,
|
|
64
|
-
"grid-line": !1
|
|
65
|
-
}, null, 8, ["tick-format", "num-ticks", "label"]),
|
|
66
|
-
o(t(u), {
|
|
67
|
-
type: "y",
|
|
68
|
-
"num-ticks": e.yNumTicks ?? 4,
|
|
69
|
-
"tick-format": e.yFormatter,
|
|
70
|
-
label: e.yLabel,
|
|
71
|
-
"domain-line": !1
|
|
72
|
-
}, null, 8, ["num-ticks", "tick-format", "label"]),
|
|
73
|
-
o(t(B), {
|
|
74
|
-
color: "#666",
|
|
75
|
-
template: f.value
|
|
76
|
-
}, null, 8, ["template"])
|
|
77
|
-
]),
|
|
78
|
-
_: 1
|
|
79
|
-
}, 8, ["data", "height"]),
|
|
80
|
-
b("div", E, [
|
|
81
|
-
o(t(w), {
|
|
82
|
-
items: Object.values(e.categories)
|
|
83
|
-
}, null, 8, ["items"])
|
|
84
|
-
])
|
|
85
|
-
], 2));
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
export {
|
|
89
|
-
X as default
|
|
90
|
-
};
|
|
91
|
-
//# 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 {\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype 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 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</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;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/area/index.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from '../../utils'\nimport {\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\";\nimport { AreaChartProps } from \"./types\";\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":"ysBAsBA,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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/area/index.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from '../../utils'\nimport {\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\";\nimport { AreaChartProps } from \"./types\";\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/components.d.ts
DELETED
|
File without changes
|