vue-chrts 0.0.46 → 0.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +317 -0
  2. package/dist/index.js +318 -0
  3. package/package.json +1 -1
  4. package/dist/vue-chrts.js +0 -7814
  5. package/dist/vue-chrts.umd.cjs +0 -225
package/dist/index.cjs ADDED
@@ -0,0 +1,317 @@
1
+ (function(global, factory) {
2
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("vue/server-renderer"), require("@unovis/ts"), require("@unovis/vue"), require("@vueuse/core")) : typeof define === "function" && define.amd ? define(["exports", "vue", "vue/server-renderer", "@unovis/ts", "@unovis/vue", "@vueuse/core"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["vue-chrts"] = {}, global.Vue, global.serverRenderer, global.ts, global.vue$1, global.core));
3
+ })(this, function(exports2, vue, serverRenderer, ts, vue$1, core) {
4
+ "use strict";
5
+ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
6
+ __name: "Area",
7
+ __ssrInlineRender: true,
8
+ props: {
9
+ data: {},
10
+ categories: {},
11
+ index: {},
12
+ colors: {},
13
+ margin: { default: () => ({ top: 0, bottom: 0, left: 0, right: 0 }) },
14
+ filterOpacity: { default: 0.2 },
15
+ xFormatter: {},
16
+ yFormatter: {},
17
+ showXAxis: { type: Boolean, default: true },
18
+ showYAxis: { type: Boolean, default: true },
19
+ showTooltip: { type: Boolean, default: true },
20
+ showLegend: { type: Boolean, default: true },
21
+ showGridLine: { type: Boolean, default: true },
22
+ customTooltip: {},
23
+ curveType: { default: ts.CurveType.MonotoneX },
24
+ showGradiant: { type: Boolean, default: true }
25
+ },
26
+ emits: ["legendItemClick"],
27
+ setup(__props, { emit: __emit }) {
28
+ function defaultColors(count = 3) {
29
+ const quotient = Math.floor(count / 2);
30
+ const remainder = count % 2;
31
+ const primaryCount = quotient + remainder;
32
+ const secondaryCount = quotient;
33
+ return [
34
+ ...Array.from(new Array(primaryCount).keys()).map((i) => `hsl(var(--vis-primary-color) / ${1 - 1 / primaryCount * i})`),
35
+ ...Array.from(new Array(secondaryCount).keys()).map((i) => `hsl(var(--vis-secondary-color) / ${1 - 1 / secondaryCount * i})`)
36
+ ];
37
+ }
38
+ const props = __props;
39
+ const emits = __emit;
40
+ const index = vue.computed(() => props.index);
41
+ const colors = vue.computed(() => {
42
+ var _a;
43
+ return ((_a = props.colors) == null ? void 0 : _a.length) ? props.colors : defaultColors(props.categories.length);
44
+ });
45
+ const legendItems = vue.ref(props.categories.map((category, i) => ({
46
+ name: category,
47
+ color: colors.value[i],
48
+ inactive: false
49
+ })));
50
+ const isMounted = core.useMounted();
51
+ function handleLegendItemClick(d, i) {
52
+ emits("legendItemClick", d, i);
53
+ }
54
+ return (_ctx, _push, _parent, _attrs) => {
55
+ const _component_ChartLegend = vue.resolveComponent("ChartLegend");
56
+ const _component_ChartCrosshair = vue.resolveComponent("ChartCrosshair");
57
+ _push(`<div${serverRenderer.ssrRenderAttrs(vue.mergeProps({ class: "w-full h-[400px] flex flex-col items-end" }, _attrs))}>`);
58
+ if (_ctx.showLegend) {
59
+ _push(serverRenderer.ssrRenderComponent(_component_ChartLegend, {
60
+ items: legendItems.value,
61
+ "onUpdate:items": ($event) => legendItems.value = $event,
62
+ onLegendItemClick: handleLegendItemClick
63
+ }, null, _parent));
64
+ } else {
65
+ _push(`<!---->`);
66
+ }
67
+ _push(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisXYContainer), {
68
+ style: { height: vue.unref(isMounted) ? "100%" : "auto" },
69
+ margin: { left: 20, right: 20 },
70
+ data: _ctx.data
71
+ }, {
72
+ default: vue.withCtx((_, _push2, _parent2, _scopeId) => {
73
+ if (_push2) {
74
+ _push2(`<svg width="0" height="0"${_scopeId}><defs${_scopeId}><!--[-->`);
75
+ serverRenderer.ssrRenderList(colors.value, (color, i) => {
76
+ _push2(`<linearGradient x1="0" y1="0" x2="0" y2="1"${_scopeId}>`);
77
+ if (_ctx.showGradiant) {
78
+ _push2(`<!--[--><stop offset="5%"${serverRenderer.ssrRenderAttr("stop-color", color)} stop-opacity="0.4"${_scopeId}></stop><stop offset="95%"${serverRenderer.ssrRenderAttr("stop-color", color)} stop-opacity="0"${_scopeId}></stop><!--]-->`);
79
+ } else {
80
+ _push2(`<stop offset="0%"${serverRenderer.ssrRenderAttr("stop-color", color)}${_scopeId}></stop>`);
81
+ }
82
+ _push2(`</linearGradient>`);
83
+ });
84
+ _push2(`<!--]--></defs></svg>`);
85
+ if (_ctx.showTooltip) {
86
+ _push2(serverRenderer.ssrRenderComponent(_component_ChartCrosshair, {
87
+ colors: colors.value,
88
+ items: legendItems.value,
89
+ index: index.value,
90
+ "custom-tooltip": _ctx.customTooltip
91
+ }, null, _parent2, _scopeId));
92
+ } else {
93
+ _push2(`<!---->`);
94
+ }
95
+ _push2(`<!--[-->`);
96
+ serverRenderer.ssrRenderList(_ctx.categories, (category) => {
97
+ var _a;
98
+ _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisArea), {
99
+ x: (_2, i) => i,
100
+ y: (d) => d[category],
101
+ color: "auto",
102
+ "curve-type": _ctx.curveType,
103
+ attributes: {
104
+ [vue.unref(ts.Area).selectors.area]: {
105
+ fill: ``
106
+ }
107
+ },
108
+ opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
109
+ }, null, _parent2, _scopeId));
110
+ });
111
+ _push2(`<!--]--><!--[-->`);
112
+ serverRenderer.ssrRenderList(_ctx.categories, (category, i) => {
113
+ var _a;
114
+ _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisLine), {
115
+ x: (_2, i2) => i2,
116
+ y: (d) => d[category],
117
+ color: colors.value[i],
118
+ "curve-type": _ctx.curveType,
119
+ attributes: {
120
+ [vue.unref(ts.Line).selectors.line]: {
121
+ opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
122
+ }
123
+ }
124
+ }, null, _parent2, _scopeId));
125
+ });
126
+ _push2(`<!--]-->`);
127
+ if (_ctx.showXAxis) {
128
+ _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisAxis), {
129
+ type: "x",
130
+ "tick-format": _ctx.xFormatter ?? ((v) => {
131
+ var _a;
132
+ return (_a = _ctx.data[v]) == null ? void 0 : _a[index.value];
133
+ }),
134
+ "grid-line": false,
135
+ "tick-line": false,
136
+ "tick-text-color": "hsl(var(--vis-text-color))"
137
+ }, null, _parent2, _scopeId));
138
+ } else {
139
+ _push2(`<!---->`);
140
+ }
141
+ if (_ctx.showYAxis) {
142
+ _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisAxis), {
143
+ type: "y",
144
+ "tick-line": false,
145
+ "tick-format": _ctx.yFormatter,
146
+ "domain-line": false,
147
+ "grid-line": _ctx.showGridLine,
148
+ attributes: {
149
+ [vue.unref(ts.Axis).selectors.grid]: {
150
+ class: "text-muted"
151
+ }
152
+ },
153
+ "tick-text-color": "hsl(var(--vis-text-color))"
154
+ }, null, _parent2, _scopeId));
155
+ } else {
156
+ _push2(`<!---->`);
157
+ }
158
+ serverRenderer.ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
159
+ } else {
160
+ return [
161
+ (vue.openBlock(), vue.createBlock("svg", {
162
+ width: "0",
163
+ height: "0"
164
+ }, [
165
+ vue.createVNode("defs", null, [
166
+ (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(colors.value, (color, i) => {
167
+ return vue.openBlock(), vue.createBlock("linearGradient", {
168
+ key: i,
169
+ x1: "0",
170
+ y1: "0",
171
+ x2: "0",
172
+ y2: "1"
173
+ }, [
174
+ _ctx.showGradiant ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [
175
+ vue.createVNode("stop", {
176
+ offset: "5%",
177
+ "stop-color": color,
178
+ "stop-opacity": "0.4"
179
+ }, null, 8, ["stop-color"]),
180
+ vue.createVNode("stop", {
181
+ offset: "95%",
182
+ "stop-color": color,
183
+ "stop-opacity": "0"
184
+ }, null, 8, ["stop-color"])
185
+ ], 64)) : (vue.openBlock(), vue.createBlock("stop", {
186
+ key: 1,
187
+ offset: "0%",
188
+ "stop-color": color
189
+ }, null, 8, ["stop-color"]))
190
+ ]);
191
+ }), 128))
192
+ ])
193
+ ])),
194
+ _ctx.showTooltip ? (vue.openBlock(), vue.createBlock(_component_ChartCrosshair, {
195
+ key: 0,
196
+ colors: colors.value,
197
+ items: legendItems.value,
198
+ index: index.value,
199
+ "custom-tooltip": _ctx.customTooltip
200
+ }, null, 8, ["colors", "items", "index", "custom-tooltip"])) : vue.createCommentVNode("", true),
201
+ (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.categories, (category) => {
202
+ var _a;
203
+ return vue.openBlock(), vue.createBlock(vue.unref(vue$1.VisArea), {
204
+ key: category,
205
+ x: (_2, i) => i,
206
+ y: (d) => d[category],
207
+ color: "auto",
208
+ "curve-type": _ctx.curveType,
209
+ attributes: {
210
+ [vue.unref(ts.Area).selectors.area]: {
211
+ fill: ``
212
+ }
213
+ },
214
+ opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
215
+ }, null, 8, ["x", "y", "curve-type", "attributes", "opacity"]);
216
+ }), 128)),
217
+ (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.categories, (category, i) => {
218
+ var _a;
219
+ return vue.openBlock(), vue.createBlock(vue.unref(vue$1.VisLine), {
220
+ key: category,
221
+ x: (_2, i2) => i2,
222
+ y: (d) => d[category],
223
+ color: colors.value[i],
224
+ "curve-type": _ctx.curveType,
225
+ attributes: {
226
+ [vue.unref(ts.Line).selectors.line]: {
227
+ opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
228
+ }
229
+ }
230
+ }, null, 8, ["x", "y", "color", "curve-type", "attributes"]);
231
+ }), 128)),
232
+ _ctx.showXAxis ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.VisAxis), {
233
+ key: 1,
234
+ type: "x",
235
+ "tick-format": _ctx.xFormatter ?? ((v) => {
236
+ var _a;
237
+ return (_a = _ctx.data[v]) == null ? void 0 : _a[index.value];
238
+ }),
239
+ "grid-line": false,
240
+ "tick-line": false,
241
+ "tick-text-color": "hsl(var(--vis-text-color))"
242
+ }, null, 8, ["tick-format"])) : vue.createCommentVNode("", true),
243
+ _ctx.showYAxis ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.VisAxis), {
244
+ key: 2,
245
+ type: "y",
246
+ "tick-line": false,
247
+ "tick-format": _ctx.yFormatter,
248
+ "domain-line": false,
249
+ "grid-line": _ctx.showGridLine,
250
+ attributes: {
251
+ [vue.unref(ts.Axis).selectors.grid]: {
252
+ class: "text-muted"
253
+ }
254
+ },
255
+ "tick-text-color": "hsl(var(--vis-text-color))"
256
+ }, null, 8, ["tick-format", "grid-line", "attributes"])) : vue.createCommentVNode("", true),
257
+ vue.renderSlot(_ctx.$slots, "default")
258
+ ];
259
+ }
260
+ }),
261
+ _: 3
262
+ }, _parent));
263
+ _push(`</div>`);
264
+ };
265
+ }
266
+ });
267
+ const _sfc_setup$1 = _sfc_main$1.setup;
268
+ _sfc_main$1.setup = (props, ctx) => {
269
+ const ssrContext = vue.useSSRContext();
270
+ (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Area/Area.vue");
271
+ return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
272
+ };
273
+ var PaginationPosition = /* @__PURE__ */ ((PaginationPosition2) => {
274
+ PaginationPosition2["Top"] = "top";
275
+ PaginationPosition2["Bottom"] = "bottom";
276
+ return PaginationPosition2;
277
+ })(PaginationPosition || {});
278
+ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
279
+ __name: "Button",
280
+ __ssrInlineRender: true,
281
+ props: {
282
+ variant: {},
283
+ size: {}
284
+ },
285
+ setup(__props) {
286
+ return (_ctx, _push, _parent, _attrs) => {
287
+ _push(`<button${serverRenderer.ssrRenderAttrs(vue.mergeProps({
288
+ class: [
289
+ "button",
290
+ `button--${_ctx.variant || "primary"}`,
291
+ `button--${_ctx.size || "medium"}`
292
+ ]
293
+ }, _attrs))} data-v-52b6ec0c>`);
294
+ serverRenderer.ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
295
+ _push(`</button>`);
296
+ };
297
+ }
298
+ });
299
+ const _export_sfc = (sfc, props) => {
300
+ const target = sfc.__vccOpts || sfc;
301
+ for (const [key, val] of props) {
302
+ target[key] = val;
303
+ }
304
+ return target;
305
+ };
306
+ const _sfc_setup = _sfc_main.setup;
307
+ _sfc_main.setup = (props, ctx) => {
308
+ const ssrContext = vue.useSSRContext();
309
+ (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Button/Button.vue");
310
+ return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
311
+ };
312
+ const Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52b6ec0c"]]);
313
+ exports2.Area = _sfc_main$1;
314
+ exports2.Button = Button;
315
+ exports2.PaginationPosition = PaginationPosition;
316
+ Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
317
+ });
package/dist/index.js ADDED
@@ -0,0 +1,318 @@
1
+ import { defineComponent, computed, ref, resolveComponent, mergeProps, unref, withCtx, createBlock, createCommentVNode, renderSlot, openBlock, createVNode, Fragment, renderList, useSSRContext } from "vue";
2
+ import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderAttr, ssrRenderSlot } from "vue/server-renderer";
3
+ import { CurveType, Area, Line, Axis } from "@unovis/ts";
4
+ import { VisXYContainer, VisArea, VisLine, VisAxis } from "@unovis/vue";
5
+ import { useMounted } from "@vueuse/core";
6
+ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
7
+ __name: "Area",
8
+ __ssrInlineRender: true,
9
+ props: {
10
+ data: {},
11
+ categories: {},
12
+ index: {},
13
+ colors: {},
14
+ margin: { default: () => ({ top: 0, bottom: 0, left: 0, right: 0 }) },
15
+ filterOpacity: { default: 0.2 },
16
+ xFormatter: {},
17
+ yFormatter: {},
18
+ showXAxis: { type: Boolean, default: true },
19
+ showYAxis: { type: Boolean, default: true },
20
+ showTooltip: { type: Boolean, default: true },
21
+ showLegend: { type: Boolean, default: true },
22
+ showGridLine: { type: Boolean, default: true },
23
+ customTooltip: {},
24
+ curveType: { default: CurveType.MonotoneX },
25
+ showGradiant: { type: Boolean, default: true }
26
+ },
27
+ emits: ["legendItemClick"],
28
+ setup(__props, { emit: __emit }) {
29
+ function defaultColors(count = 3) {
30
+ const quotient = Math.floor(count / 2);
31
+ const remainder = count % 2;
32
+ const primaryCount = quotient + remainder;
33
+ const secondaryCount = quotient;
34
+ return [
35
+ ...Array.from(new Array(primaryCount).keys()).map((i) => `hsl(var(--vis-primary-color) / ${1 - 1 / primaryCount * i})`),
36
+ ...Array.from(new Array(secondaryCount).keys()).map((i) => `hsl(var(--vis-secondary-color) / ${1 - 1 / secondaryCount * i})`)
37
+ ];
38
+ }
39
+ const props = __props;
40
+ const emits = __emit;
41
+ const index = computed(() => props.index);
42
+ const colors = computed(() => {
43
+ var _a;
44
+ return ((_a = props.colors) == null ? void 0 : _a.length) ? props.colors : defaultColors(props.categories.length);
45
+ });
46
+ const legendItems = ref(props.categories.map((category, i) => ({
47
+ name: category,
48
+ color: colors.value[i],
49
+ inactive: false
50
+ })));
51
+ const isMounted = useMounted();
52
+ function handleLegendItemClick(d, i) {
53
+ emits("legendItemClick", d, i);
54
+ }
55
+ return (_ctx, _push, _parent, _attrs) => {
56
+ const _component_ChartLegend = resolveComponent("ChartLegend");
57
+ const _component_ChartCrosshair = resolveComponent("ChartCrosshair");
58
+ _push(`<div${ssrRenderAttrs(mergeProps({ class: "w-full h-[400px] flex flex-col items-end" }, _attrs))}>`);
59
+ if (_ctx.showLegend) {
60
+ _push(ssrRenderComponent(_component_ChartLegend, {
61
+ items: legendItems.value,
62
+ "onUpdate:items": ($event) => legendItems.value = $event,
63
+ onLegendItemClick: handleLegendItemClick
64
+ }, null, _parent));
65
+ } else {
66
+ _push(`<!---->`);
67
+ }
68
+ _push(ssrRenderComponent(unref(VisXYContainer), {
69
+ style: { height: unref(isMounted) ? "100%" : "auto" },
70
+ margin: { left: 20, right: 20 },
71
+ data: _ctx.data
72
+ }, {
73
+ default: withCtx((_, _push2, _parent2, _scopeId) => {
74
+ if (_push2) {
75
+ _push2(`<svg width="0" height="0"${_scopeId}><defs${_scopeId}><!--[-->`);
76
+ ssrRenderList(colors.value, (color, i) => {
77
+ _push2(`<linearGradient x1="0" y1="0" x2="0" y2="1"${_scopeId}>`);
78
+ if (_ctx.showGradiant) {
79
+ _push2(`<!--[--><stop offset="5%"${ssrRenderAttr("stop-color", color)} stop-opacity="0.4"${_scopeId}></stop><stop offset="95%"${ssrRenderAttr("stop-color", color)} stop-opacity="0"${_scopeId}></stop><!--]-->`);
80
+ } else {
81
+ _push2(`<stop offset="0%"${ssrRenderAttr("stop-color", color)}${_scopeId}></stop>`);
82
+ }
83
+ _push2(`</linearGradient>`);
84
+ });
85
+ _push2(`<!--]--></defs></svg>`);
86
+ if (_ctx.showTooltip) {
87
+ _push2(ssrRenderComponent(_component_ChartCrosshair, {
88
+ colors: colors.value,
89
+ items: legendItems.value,
90
+ index: index.value,
91
+ "custom-tooltip": _ctx.customTooltip
92
+ }, null, _parent2, _scopeId));
93
+ } else {
94
+ _push2(`<!---->`);
95
+ }
96
+ _push2(`<!--[-->`);
97
+ ssrRenderList(_ctx.categories, (category) => {
98
+ var _a;
99
+ _push2(ssrRenderComponent(unref(VisArea), {
100
+ x: (_2, i) => i,
101
+ y: (d) => d[category],
102
+ color: "auto",
103
+ "curve-type": _ctx.curveType,
104
+ attributes: {
105
+ [unref(Area).selectors.area]: {
106
+ fill: ``
107
+ }
108
+ },
109
+ opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
110
+ }, null, _parent2, _scopeId));
111
+ });
112
+ _push2(`<!--]--><!--[-->`);
113
+ ssrRenderList(_ctx.categories, (category, i) => {
114
+ var _a;
115
+ _push2(ssrRenderComponent(unref(VisLine), {
116
+ x: (_2, i2) => i2,
117
+ y: (d) => d[category],
118
+ color: colors.value[i],
119
+ "curve-type": _ctx.curveType,
120
+ attributes: {
121
+ [unref(Line).selectors.line]: {
122
+ opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
123
+ }
124
+ }
125
+ }, null, _parent2, _scopeId));
126
+ });
127
+ _push2(`<!--]-->`);
128
+ if (_ctx.showXAxis) {
129
+ _push2(ssrRenderComponent(unref(VisAxis), {
130
+ type: "x",
131
+ "tick-format": _ctx.xFormatter ?? ((v) => {
132
+ var _a;
133
+ return (_a = _ctx.data[v]) == null ? void 0 : _a[index.value];
134
+ }),
135
+ "grid-line": false,
136
+ "tick-line": false,
137
+ "tick-text-color": "hsl(var(--vis-text-color))"
138
+ }, null, _parent2, _scopeId));
139
+ } else {
140
+ _push2(`<!---->`);
141
+ }
142
+ if (_ctx.showYAxis) {
143
+ _push2(ssrRenderComponent(unref(VisAxis), {
144
+ type: "y",
145
+ "tick-line": false,
146
+ "tick-format": _ctx.yFormatter,
147
+ "domain-line": false,
148
+ "grid-line": _ctx.showGridLine,
149
+ attributes: {
150
+ [unref(Axis).selectors.grid]: {
151
+ class: "text-muted"
152
+ }
153
+ },
154
+ "tick-text-color": "hsl(var(--vis-text-color))"
155
+ }, null, _parent2, _scopeId));
156
+ } else {
157
+ _push2(`<!---->`);
158
+ }
159
+ ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
160
+ } else {
161
+ return [
162
+ (openBlock(), createBlock("svg", {
163
+ width: "0",
164
+ height: "0"
165
+ }, [
166
+ createVNode("defs", null, [
167
+ (openBlock(true), createBlock(Fragment, null, renderList(colors.value, (color, i) => {
168
+ return openBlock(), createBlock("linearGradient", {
169
+ key: i,
170
+ x1: "0",
171
+ y1: "0",
172
+ x2: "0",
173
+ y2: "1"
174
+ }, [
175
+ _ctx.showGradiant ? (openBlock(), createBlock(Fragment, { key: 0 }, [
176
+ createVNode("stop", {
177
+ offset: "5%",
178
+ "stop-color": color,
179
+ "stop-opacity": "0.4"
180
+ }, null, 8, ["stop-color"]),
181
+ createVNode("stop", {
182
+ offset: "95%",
183
+ "stop-color": color,
184
+ "stop-opacity": "0"
185
+ }, null, 8, ["stop-color"])
186
+ ], 64)) : (openBlock(), createBlock("stop", {
187
+ key: 1,
188
+ offset: "0%",
189
+ "stop-color": color
190
+ }, null, 8, ["stop-color"]))
191
+ ]);
192
+ }), 128))
193
+ ])
194
+ ])),
195
+ _ctx.showTooltip ? (openBlock(), createBlock(_component_ChartCrosshair, {
196
+ key: 0,
197
+ colors: colors.value,
198
+ items: legendItems.value,
199
+ index: index.value,
200
+ "custom-tooltip": _ctx.customTooltip
201
+ }, null, 8, ["colors", "items", "index", "custom-tooltip"])) : createCommentVNode("", true),
202
+ (openBlock(true), createBlock(Fragment, null, renderList(_ctx.categories, (category) => {
203
+ var _a;
204
+ return openBlock(), createBlock(unref(VisArea), {
205
+ key: category,
206
+ x: (_2, i) => i,
207
+ y: (d) => d[category],
208
+ color: "auto",
209
+ "curve-type": _ctx.curveType,
210
+ attributes: {
211
+ [unref(Area).selectors.area]: {
212
+ fill: ``
213
+ }
214
+ },
215
+ opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
216
+ }, null, 8, ["x", "y", "curve-type", "attributes", "opacity"]);
217
+ }), 128)),
218
+ (openBlock(true), createBlock(Fragment, null, renderList(_ctx.categories, (category, i) => {
219
+ var _a;
220
+ return openBlock(), createBlock(unref(VisLine), {
221
+ key: category,
222
+ x: (_2, i2) => i2,
223
+ y: (d) => d[category],
224
+ color: colors.value[i],
225
+ "curve-type": _ctx.curveType,
226
+ attributes: {
227
+ [unref(Line).selectors.line]: {
228
+ opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
229
+ }
230
+ }
231
+ }, null, 8, ["x", "y", "color", "curve-type", "attributes"]);
232
+ }), 128)),
233
+ _ctx.showXAxis ? (openBlock(), createBlock(unref(VisAxis), {
234
+ key: 1,
235
+ type: "x",
236
+ "tick-format": _ctx.xFormatter ?? ((v) => {
237
+ var _a;
238
+ return (_a = _ctx.data[v]) == null ? void 0 : _a[index.value];
239
+ }),
240
+ "grid-line": false,
241
+ "tick-line": false,
242
+ "tick-text-color": "hsl(var(--vis-text-color))"
243
+ }, null, 8, ["tick-format"])) : createCommentVNode("", true),
244
+ _ctx.showYAxis ? (openBlock(), createBlock(unref(VisAxis), {
245
+ key: 2,
246
+ type: "y",
247
+ "tick-line": false,
248
+ "tick-format": _ctx.yFormatter,
249
+ "domain-line": false,
250
+ "grid-line": _ctx.showGridLine,
251
+ attributes: {
252
+ [unref(Axis).selectors.grid]: {
253
+ class: "text-muted"
254
+ }
255
+ },
256
+ "tick-text-color": "hsl(var(--vis-text-color))"
257
+ }, null, 8, ["tick-format", "grid-line", "attributes"])) : createCommentVNode("", true),
258
+ renderSlot(_ctx.$slots, "default")
259
+ ];
260
+ }
261
+ }),
262
+ _: 3
263
+ }, _parent));
264
+ _push(`</div>`);
265
+ };
266
+ }
267
+ });
268
+ const _sfc_setup$1 = _sfc_main$1.setup;
269
+ _sfc_main$1.setup = (props, ctx) => {
270
+ const ssrContext = useSSRContext();
271
+ (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Area/Area.vue");
272
+ return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
273
+ };
274
+ var PaginationPosition = /* @__PURE__ */ ((PaginationPosition2) => {
275
+ PaginationPosition2["Top"] = "top";
276
+ PaginationPosition2["Bottom"] = "bottom";
277
+ return PaginationPosition2;
278
+ })(PaginationPosition || {});
279
+ const _sfc_main = /* @__PURE__ */ defineComponent({
280
+ __name: "Button",
281
+ __ssrInlineRender: true,
282
+ props: {
283
+ variant: {},
284
+ size: {}
285
+ },
286
+ setup(__props) {
287
+ return (_ctx, _push, _parent, _attrs) => {
288
+ _push(`<button${ssrRenderAttrs(mergeProps({
289
+ class: [
290
+ "button",
291
+ `button--${_ctx.variant || "primary"}`,
292
+ `button--${_ctx.size || "medium"}`
293
+ ]
294
+ }, _attrs))} data-v-52b6ec0c>`);
295
+ ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
296
+ _push(`</button>`);
297
+ };
298
+ }
299
+ });
300
+ const _export_sfc = (sfc, props) => {
301
+ const target = sfc.__vccOpts || sfc;
302
+ for (const [key, val] of props) {
303
+ target[key] = val;
304
+ }
305
+ return target;
306
+ };
307
+ const _sfc_setup = _sfc_main.setup;
308
+ _sfc_main.setup = (props, ctx) => {
309
+ const ssrContext = useSSRContext();
310
+ (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Button/Button.vue");
311
+ return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
312
+ };
313
+ const Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52b6ec0c"]]);
314
+ export {
315
+ _sfc_main$1 as Area,
316
+ Button,
317
+ PaginationPosition
318
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-chrts",
3
- "version": "0.0.46",
3
+ "version": "0.0.47",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"