vue-chrts 0.1.0-beta.2-internal-7 → 0.1.0-beta.2-internal-8
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/AreaStacked/AreaStackedChart.d.ts +4 -3
- package/dist/components/Bar/BarChart.d.ts +5 -4
- package/dist/components/Crosshair/Crosshair.d.ts +6 -6
- package/dist/components/Donut/DonutChart.d.ts +4 -3
- package/dist/components/Line/LineChart.d.ts +5 -4
- package/dist/components/Tooltip.d.ts +5 -4
- package/dist/components/{Area/AreaChart.cjs → area/index.cjs} +3 -3
- package/dist/components/area/index.cjs.map +1 -0
- package/dist/components/area/index.d.ts +2 -0
- package/dist/components/{Area/AreaChart.js → area/index.js} +14 -14
- package/dist/components/area/index.js.map +1 -0
- package/dist/components/area/index2.cjs +2 -0
- package/dist/components/area/index2.cjs.map +1 -0
- package/dist/components/area/index2.js +5 -0
- package/dist/components/area/index2.js.map +1 -0
- package/dist/components.d.ts +2 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +3 -5
- package/dist/index.js +18 -18
- package/dist/index.js.map +1 -1
- package/package.json +4 -5
- package/dist/components/Area/AreaChart.cjs.map +0 -1
- package/dist/components/Area/AreaChart.d.ts +0 -17
- package/dist/components/Area/AreaChart.js.map +0 -1
- package/dist/components/Area/AreaChart2.cjs +0 -2
- package/dist/components/Area/AreaChart2.cjs.map +0 -1
- package/dist/components/Area/AreaChart2.js +0 -5
- package/dist/components/Area/AreaChart2.js.map +0 -1
- package/dist/components/Area/index.d.ts +0 -2
- /package/dist/components/{Area → area}/types.d.ts +0 -0
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { BulletLegendItemInterface } from '@unovis/ts';
|
|
2
|
+
import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
|
|
2
3
|
|
|
3
4
|
export type AreaStackedChartProps<T> = {
|
|
4
5
|
data: T[];
|
|
@@ -7,12 +8,12 @@ export type AreaStackedChartProps<T> = {
|
|
|
7
8
|
hideTooltip?: boolean;
|
|
8
9
|
};
|
|
9
10
|
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<{
|
|
10
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} &
|
|
11
|
-
expose(exposed:
|
|
11
|
+
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & AreaStackedChartProps<T>, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
|
|
12
|
+
expose(exposed: ShallowUnwrapRef<{}>): void;
|
|
12
13
|
attrs: any;
|
|
13
14
|
slots: ReturnType<() => {}>;
|
|
14
15
|
emit: typeof __VLS_emit;
|
|
15
|
-
}>) =>
|
|
16
|
+
}>) => VNode<RendererNode, RendererElement, {
|
|
16
17
|
[key: string]: any;
|
|
17
18
|
}> & {
|
|
18
19
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { BulletLegendItemInterface, Orientation } from '@unovis/ts';
|
|
2
2
|
import { PaginationPosition } from '../../types';
|
|
3
|
+
import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
|
|
3
4
|
|
|
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<{
|
|
5
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} &
|
|
6
|
+
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & {
|
|
6
7
|
data: T[];
|
|
7
8
|
stacked?: boolean;
|
|
8
9
|
height: number;
|
|
@@ -20,12 +21,12 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
|
|
|
20
21
|
hideLegend?: boolean;
|
|
21
22
|
orientation?: Orientation;
|
|
22
23
|
paginationPosition?: PaginationPosition;
|
|
23
|
-
}, keyof
|
|
24
|
-
expose(exposed:
|
|
24
|
+
}, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
|
|
25
|
+
expose(exposed: ShallowUnwrapRef<{}>): void;
|
|
25
26
|
attrs: any;
|
|
26
27
|
slots: ReturnType<() => {}>;
|
|
27
28
|
emit: typeof __VLS_emit;
|
|
28
|
-
}>) =>
|
|
29
|
+
}>) => VNode<RendererNode, RendererElement, {
|
|
29
30
|
[key: string]: any;
|
|
30
31
|
}> & {
|
|
31
32
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { BulletLegendItemInterface } from '@unovis/ts';
|
|
2
|
-
import { Component } from 'vue';
|
|
2
|
+
import { Component, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
|
|
3
3
|
|
|
4
|
-
declare const _default:
|
|
4
|
+
declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
5
5
|
colors: string[];
|
|
6
6
|
index: string;
|
|
7
7
|
items: BulletLegendItemInterface[];
|
|
8
8
|
customTooltip?: Component;
|
|
9
9
|
}>, {
|
|
10
10
|
colors: () => any[];
|
|
11
|
-
}>>, {}, {}, {}, {},
|
|
11
|
+
}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
12
12
|
colors: string[];
|
|
13
13
|
index: string;
|
|
14
14
|
items: BulletLegendItemInterface[];
|
|
@@ -17,14 +17,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
17
17
|
colors: () => any[];
|
|
18
18
|
}>>> & Readonly<{}>, {
|
|
19
19
|
colors: string[];
|
|
20
|
-
}, {}, {}, {}, string,
|
|
20
|
+
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
21
21
|
export default _default;
|
|
22
22
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
23
23
|
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
24
24
|
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
25
|
-
type:
|
|
25
|
+
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
26
26
|
} : {
|
|
27
|
-
type:
|
|
27
|
+
type: PropType<T[K]>;
|
|
28
28
|
required: true;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { DonutChartProps } from '.';
|
|
2
|
+
import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
|
|
2
3
|
|
|
3
4
|
declare function __VLS_template(): {
|
|
4
5
|
default?(_: {}): any;
|
|
5
6
|
};
|
|
6
|
-
declare const __VLS_component:
|
|
7
|
+
declare const __VLS_component: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
7
8
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
8
9
|
export default _default;
|
|
9
10
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
10
11
|
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
11
12
|
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
12
|
-
type:
|
|
13
|
+
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
13
14
|
} : {
|
|
14
|
-
type:
|
|
15
|
+
type: PropType<T[K]>;
|
|
15
16
|
required: true;
|
|
16
17
|
};
|
|
17
18
|
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { CurveType, BulletLegendItemInterface } from '@unovis/ts';
|
|
2
2
|
import { PaginationPosition } from '../../types';
|
|
3
|
+
import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
|
|
3
4
|
|
|
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<{
|
|
5
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} &
|
|
6
|
+
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & {
|
|
6
7
|
data: T[];
|
|
7
8
|
height: number;
|
|
8
9
|
xLabel?: string;
|
|
@@ -14,12 +15,12 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
|
|
|
14
15
|
yNumTicks?: number;
|
|
15
16
|
xNumTicks?: number;
|
|
16
17
|
paginationPosition?: PaginationPosition;
|
|
17
|
-
}, keyof
|
|
18
|
-
expose(exposed:
|
|
18
|
+
}, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
|
|
19
|
+
expose(exposed: ShallowUnwrapRef<{}>): void;
|
|
19
20
|
attrs: any;
|
|
20
21
|
slots: ReturnType<() => {}>;
|
|
21
22
|
emit: typeof __VLS_emit;
|
|
22
|
-
}>) =>
|
|
23
|
+
}>) => VNode<RendererNode, RendererElement, {
|
|
23
24
|
[key: string]: any;
|
|
24
25
|
}> & {
|
|
25
26
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { BulletLegendItemInterface } from '@unovis/ts';
|
|
2
|
+
import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
|
|
2
3
|
|
|
3
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<{
|
|
4
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} &
|
|
5
|
+
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & {
|
|
5
6
|
data: T;
|
|
6
7
|
categories: Record<string, BulletLegendItemInterface>;
|
|
7
|
-
}, keyof
|
|
8
|
-
expose(exposed:
|
|
8
|
+
}, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
|
|
9
|
+
expose(exposed: ShallowUnwrapRef<{}>): void;
|
|
9
10
|
attrs: any;
|
|
10
11
|
slots: ReturnType<() => {}>;
|
|
11
12
|
emit: typeof __VLS_emit;
|
|
12
|
-
}>) =>
|
|
13
|
+
}>) => VNode<RendererNode, RendererElement, {
|
|
13
14
|
[key: string]: any;
|
|
14
15
|
}> & {
|
|
15
16
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
@@ -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"),r=require("@unovis/vue"),h=require("../Tooltip.cjs"),T=require("../../types.cjs"),B=e.defineComponent({__name:"index",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}),i=document.createElement("div");n.mount(i);const l=i.innerHTML;return n.unmount(),l}catch{return""}});function y(t){var n;return{y:i=>Number(i[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(r.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(r.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),(i,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[e.createVNode(e.unref(r.VisArea),e.mergeProps({x:(p,m)=>m,ref_for:!0},y(i),{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(r.VisLine),{x:(p,m)=>m,y:p=>p[i],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(r.VisAxis),{type:"x","num-ticks":d.value.length,"tick-format":i=>t.xFormatter(d.value[i]),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(r.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(r.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(r.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])],2))],2))}});exports.default=B;
|
|
7
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as C, 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 w, VisTooltip as z, VisArea as A, 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 x } from "../../types.js";
|
|
7
|
+
const Q = /* @__PURE__ */ C({
|
|
8
|
+
__name: "index",
|
|
9
9
|
props: {
|
|
10
10
|
data: {},
|
|
11
11
|
height: {},
|
|
@@ -41,14 +41,14 @@ const Q = /* @__PURE__ */ X({
|
|
|
41
41
|
return "";
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
|
-
function
|
|
44
|
+
function P(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 X = 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__ */ X({
|
|
|
56
56
|
</linearGradient>
|
|
57
57
|
`
|
|
58
58
|
).join(""), h = c(
|
|
59
|
-
() => i.paginationPosition ===
|
|
59
|
+
() => i.paginationPosition === x.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__ */ X({
|
|
|
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(w), {
|
|
68
68
|
data: p.value,
|
|
69
69
|
height: e.height,
|
|
70
|
-
"svg-defs": t(
|
|
70
|
+
"svg-defs": t(X)
|
|
71
71
|
}, {
|
|
72
72
|
default: $(() => [
|
|
73
|
-
e.hideTooltip ? y("", !0) : (l(), k(t(
|
|
73
|
+
e.hideTooltip ? y("", !0) : (l(), k(t(z), {
|
|
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(A), j({
|
|
80
80
|
x: (g, f) => f,
|
|
81
81
|
ref_for: !0
|
|
82
|
-
},
|
|
82
|
+
}, P(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__ */ X({
|
|
|
131
131
|
export {
|
|
132
132
|
Q as default
|
|
133
133
|
};
|
|
134
|
-
//# sourceMappingURL=
|
|
134
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/components.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { default as AreaChart } from './components/area/index';
|
|
2
|
+
export type { AreaChartProps } from './components/area/types';
|
|
2
3
|
export * from './components/AreaStacked';
|
|
3
4
|
export * from './components/Line';
|
|
4
5
|
export * from './components/Bar';
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@unovis/ts"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./types.cjs"),e=require("@unovis/ts"),r=require("./components/area/index.cjs"),u=require("./components/AreaStacked/AreaStackedChart.cjs"),i=require("./components/Line/LineChart.cjs"),n=require("./components/Bar/BarChart.cjs"),_=require("./components/Donut/DonutChart.cjs"),a=require("./components/Crosshair/Crosshair.cjs"),o=require("./components/Donut/index.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;exports.AreaStackedChart=u.default;exports.LineChart=i.default;exports.BarChart=n.default;exports.DonutChart=_.default;exports.Crosshair=a.default;exports.DonutType=o.DonutType;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
export * from './components';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
export { CurveType, type BulletLegendItemInterface, Position, Orientation } from '@unovis/ts';
|
|
2
|
+
export { PaginationPosition } from './types';
|
|
3
|
+
export { CurveType, Position, Orientation, type NumericAccessor } from '@unovis/ts';
|
|
4
|
+
export type { BulletLegendItemInterface } from '@unovis/ts';
|
package/dist/index.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { default as s } from "./components/
|
|
4
|
-
import { default as
|
|
5
|
-
import { default as
|
|
6
|
-
import { default as
|
|
7
|
-
import { default as
|
|
8
|
-
import {
|
|
9
|
-
|
|
1
|
+
import { PaginationPosition as o } from "./types.js";
|
|
2
|
+
import { CurveType as e, Orientation as f, Position as p } from "@unovis/ts";
|
|
3
|
+
import { default as s } from "./components/area/index.js";
|
|
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";
|
|
10
10
|
export {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
s as AreaChart,
|
|
12
|
+
n as AreaStackedChart,
|
|
13
|
+
C as BarChart,
|
|
14
|
+
y as Crosshair,
|
|
15
|
+
e as CurveType,
|
|
16
|
+
l as DonutChart,
|
|
17
|
+
D as DonutType,
|
|
18
|
+
x as LineChart,
|
|
19
19
|
f as Orientation,
|
|
20
|
-
|
|
20
|
+
o as PaginationPosition,
|
|
21
21
|
p as Position
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-chrts",
|
|
3
|
-
"version": "0.1.0-beta.2-internal-
|
|
3
|
+
"version": "0.1.0-beta.2-internal-8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -12,15 +12,14 @@
|
|
|
12
12
|
"import": "./dist/index.js"
|
|
13
13
|
},
|
|
14
14
|
"./*": {
|
|
15
|
-
"types": "
|
|
16
|
-
"require": "
|
|
17
|
-
"import": "
|
|
15
|
+
"types": "./dist/*/index.d.ts",
|
|
16
|
+
"require": "./dist/*/index.cjs",
|
|
17
|
+
"import": "./dist/*/index.js"
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"main": "./dist/index.cjs",
|
|
21
21
|
"module": "./dist/index.js",
|
|
22
22
|
"types": "./dist/index.d.ts",
|
|
23
|
-
"typings": "./index.d.ts",
|
|
24
23
|
"type": "module",
|
|
25
24
|
"sideEffects": false,
|
|
26
25
|
"scripts": {
|
|
@@ -1 +0,0 @@
|
|
|
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 \"./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,17 +0,0 @@
|
|
|
1
|
-
import { AreaChartProps } from './types';
|
|
2
|
-
|
|
3
|
-
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<{
|
|
4
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
|
|
5
|
-
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
6
|
-
attrs: any;
|
|
7
|
-
slots: ReturnType<() => {}>;
|
|
8
|
-
emit: typeof __VLS_emit;
|
|
9
|
-
}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
10
|
-
[key: string]: any;
|
|
11
|
-
}> & {
|
|
12
|
-
__ctx?: Awaited<typeof __VLS_setup>;
|
|
13
|
-
};
|
|
14
|
-
export default _default;
|
|
15
|
-
type __VLS_Prettify<T> = {
|
|
16
|
-
[K in keyof T]: T[K];
|
|
17
|
-
} & {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AreaChart.js","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { 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":"AreaChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AreaChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
File without changes
|