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