vue-chrts 0.0.49 → 0.0.51

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 (4) hide show
  1. package/dist/components/Area/Area.d.ts +1 -18
  2. package/dist/index.cjs +17 -140
  3. package/dist/index.js +18 -142
  4. package/package.json +1 -1
package/dist/components/Area/Area.d.ts CHANGED
@@ -1,25 +1,8 @@
1
- import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
2
- import { PaginationPosition } from '.';
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<{
1
+ declare const _default: <T extends Record<string, any>>(__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
2
  props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
6
3
  data: T[];
7
- height: number;
8
- xLabel?: string;
9
- yLabel?: string;
10
- categories: Record<string, BulletLegendItemInterface>;
11
- xFormatter: (i: number, idx: number) => string;
12
- yFormatter?: (i: number, idx?: number) => string | number;
13
- curveType?: CurveType;
14
4
  xNumTicks?: number;
15
5
  yNumTicks?: number;
16
- hideLegend?: boolean;
17
- hideTooltip?: boolean;
18
- gridLineX?: boolean;
19
- domainLineX?: boolean;
20
- gridLineY?: boolean;
21
- domainLineY?: boolean;
22
- paginationPoisition?: PaginationPosition;
23
6
  }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
24
7
  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
25
8
  attrs: any;
package/dist/index.cjs CHANGED
@@ -1,164 +1,41 @@
1
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")) : typeof define === "function" && define.amd ? define(["exports", "vue", "vue/server-renderer", "@unovis/ts", "@unovis/vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["vue-chrts"] = {}, global.Vue, global.serverRenderer, global.ts, global.vue$1));
3
- })(this, function(exports2, vue, serverRenderer, ts, vue$1) {
2
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("vue/server-renderer"), require("@unovis/vue")) : typeof define === "function" && define.amd ? define(["exports", "vue", "vue/server-renderer", "@unovis/vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["vue-chrts"] = {}, global.Vue, global.serverRenderer, global.vue$1));
3
+ })(this, function(exports2, vue, serverRenderer, vue$1) {
4
4
  "use strict";
5
5
  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
6
6
  __name: "Area",
7
7
  __ssrInlineRender: true,
8
8
  props: {
9
9
  data: {},
10
- height: {},
11
- xLabel: {},
12
- yLabel: {},
13
- categories: {},
14
- xFormatter: {},
15
- yFormatter: {},
16
- curveType: {},
17
10
  xNumTicks: { default: (props) => props.data.length > 24 ? 24 / 4 : props.data.length - 1 },
18
- yNumTicks: { default: (props) => props.data.length > 24 ? 24 / 4 : props.data.length - 1 },
19
- hideLegend: { type: Boolean },
20
- hideTooltip: { type: Boolean },
21
- gridLineX: { type: Boolean },
22
- domainLineX: { type: Boolean },
23
- gridLineY: { type: Boolean },
24
- domainLineY: { type: Boolean },
25
- paginationPoisition: {}
11
+ yNumTicks: { default: (props) => props.data.length > 24 ? 24 / 4 : props.data.length - 1 }
26
12
  },
27
13
  setup(__props) {
28
- const props = __props;
29
- const colors = Object.values(props.categories).map((c) => c.color);
30
- function accessors(id) {
31
- var _a;
32
- return {
33
- y: (d) => Number(d[id]),
34
- color: ((_a = props.categories[id]) == null ? void 0 : _a.color) ?? "#3b82f6"
35
- };
36
- }
37
- const svgDefs = colors.map(
38
- (color, index) => `
39
- <linearGradient id="gradient${index}-${color}" gradientTransform="rotate(90)">
40
- <stop offset="0%" stop-color="${color}" stop-opacity="1" />
41
- <stop offset="100%" stop-color="${color}" stop-opacity="0" />
42
- </linearGradient>
43
- `
44
- ).join("");
45
14
  return (_ctx, _push, _parent, _attrs) => {
46
- _push(`<div${serverRenderer.ssrRenderAttrs(vue.mergeProps({
47
- class: ["flex flex-col space-y-4", {
48
- "flex-col-reverse": props.paginationPoisition === "top"
49
- }]
50
- }, _attrs))}>`);
51
- _push(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisXYContainer), {
52
- data: _ctx.data,
53
- height: _ctx.height,
54
- "svg-defs": vue.unref(svgDefs)
55
- }, {
15
+ _push(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisXYContainer), vue.mergeProps({ height: 600 }, _attrs), {
56
16
  default: vue.withCtx((_, _push2, _parent2, _scopeId) => {
57
17
  if (_push2) {
58
- if (!_ctx.hideTooltip) {
59
- _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisTooltip), {
60
- "horizontal-placement": vue.unref(ts.Position).Right,
61
- "vertical-placement": vue.unref(ts.Position).Top
62
- }, null, _parent2, _scopeId));
63
- } else {
64
- _push2(`<!---->`);
65
- }
66
- _push2(`<!--[-->`);
67
- serverRenderer.ssrRenderList(Object.keys(props.categories), (i, iKey) => {
68
- _push2(`<!--[-->`);
69
- _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisArea), vue.mergeProps({
70
- x: (_2, i2) => i2,
71
- ref_for: true
72
- }, accessors(i), {
73
- color: `url(#gradient${iKey}-${vue.unref(colors)[iKey]})`,
74
- opacity: 0.5,
75
- "curve-type": _ctx.curveType ?? vue.unref(ts.CurveType).MonotoneX
76
- }), null, _parent2, _scopeId));
77
- _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisLine), {
78
- x: (_2, i2) => i2,
79
- y: (d) => d[i],
80
- color: vue.unref(colors)[iKey],
81
- "curve-type": _ctx.curveType ?? vue.unref(ts.CurveType).MonotoneX
82
- }, null, _parent2, _scopeId));
83
- _push2(`<!--]-->`);
84
- });
85
- _push2(`<!--]-->`);
86
- _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisAxis), {
87
- type: "x",
88
- "tick-format": _ctx.xFormatter,
89
- "num-ticks": _ctx.xNumTicks,
90
- label: _ctx.xLabel,
91
- "grid-line": _ctx.gridLineX,
92
- "domain-line": _ctx.domainLineX,
93
- "tick-line": !!_ctx.gridLineX
94
- }, null, _parent2, _scopeId));
95
- _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisAxis), {
96
- type: "y",
97
- "num-ticks": _ctx.yNumTicks ?? _ctx.data.length,
98
- "tick-format": _ctx.yFormatter,
99
- label: _ctx.yLabel,
100
- "grid-line": _ctx.gridLineY,
101
- "domain-line": _ctx.domainLineY,
102
- "tick-line": !!_ctx.gridLineY
18
+ _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisLine), {
19
+ data: _ctx.data,
20
+ x: (d) => d.x,
21
+ y: (d) => d.y
103
22
  }, null, _parent2, _scopeId));
23
+ _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisAxis), { type: "x" }, null, _parent2, _scopeId));
24
+ _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisAxis), { type: "y" }, null, _parent2, _scopeId));
104
25
  } else {
105
26
  return [
106
- !_ctx.hideTooltip ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.VisTooltip), {
107
- key: 0,
108
- "horizontal-placement": vue.unref(ts.Position).Right,
109
- "vertical-placement": vue.unref(ts.Position).Top
110
- }, null, 8, ["horizontal-placement", "vertical-placement"])) : vue.createCommentVNode("", true),
111
- (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(Object.keys(props.categories), (i, iKey) => {
112
- return vue.openBlock(), vue.createBlock(vue.Fragment, { key: iKey }, [
113
- vue.createVNode(vue.unref(vue$1.VisArea), vue.mergeProps({
114
- x: (_2, i2) => i2,
115
- ref_for: true
116
- }, accessors(i), {
117
- color: `url(#gradient${iKey}-${vue.unref(colors)[iKey]})`,
118
- opacity: 0.5,
119
- "curve-type": _ctx.curveType ?? vue.unref(ts.CurveType).MonotoneX
120
- }), null, 16, ["x", "color", "curve-type"]),
121
- vue.createVNode(vue.unref(vue$1.VisLine), {
122
- x: (_2, i2) => i2,
123
- y: (d) => d[i],
124
- color: vue.unref(colors)[iKey],
125
- "curve-type": _ctx.curveType ?? vue.unref(ts.CurveType).MonotoneX
126
- }, null, 8, ["x", "y", "color", "curve-type"])
127
- ], 64);
128
- }), 128)),
129
- vue.createVNode(vue.unref(vue$1.VisAxis), {
130
- type: "x",
131
- "tick-format": _ctx.xFormatter,
132
- "num-ticks": _ctx.xNumTicks,
133
- label: _ctx.xLabel,
134
- "grid-line": _ctx.gridLineX,
135
- "domain-line": _ctx.domainLineX,
136
- "tick-line": !!_ctx.gridLineX
137
- }, null, 8, ["tick-format", "num-ticks", "label", "grid-line", "domain-line", "tick-line"]),
138
- vue.createVNode(vue.unref(vue$1.VisAxis), {
139
- type: "y",
140
- "num-ticks": _ctx.yNumTicks ?? _ctx.data.length,
141
- "tick-format": _ctx.yFormatter,
142
- label: _ctx.yLabel,
143
- "grid-line": _ctx.gridLineY,
144
- "domain-line": _ctx.domainLineY,
145
- "tick-line": !!_ctx.gridLineY
146
- }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"])
27
+ vue.createVNode(vue.unref(vue$1.VisLine), {
28
+ data: _ctx.data,
29
+ x: (d) => d.x,
30
+ y: (d) => d.y
31
+ }, null, 8, ["data", "x", "y"]),
32
+ vue.createVNode(vue.unref(vue$1.VisAxis), { type: "x" }),
33
+ vue.createVNode(vue.unref(vue$1.VisAxis), { type: "y" })
147
34
  ];
148
35
  }
149
36
  }),
150
37
  _: 1
151
38
  }, _parent));
152
- if (!_ctx.hideLegend) {
153
- _push(`<div class="flex items center justify-end">`);
154
- _push(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisBulletLegend), {
155
- items: Object.values(_ctx.categories)
156
- }, null, _parent));
157
- _push(`</div>`);
158
- } else {
159
- _push(`<!---->`);
160
- }
161
- _push(`</div>`);
162
39
  };
163
40
  }
164
41
  });
package/dist/index.js CHANGED
@@ -1,164 +1,40 @@
1
- import { defineComponent, mergeProps, unref, withCtx, createBlock, createCommentVNode, createVNode, openBlock, Fragment, renderList, useSSRContext } from "vue";
2
- import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderSlot } from "vue/server-renderer";
3
- import { Position, CurveType } from "@unovis/ts";
4
- import { VisXYContainer, VisTooltip, VisArea, VisLine, VisAxis, VisBulletLegend } from "@unovis/vue";
1
+ import { defineComponent, unref, mergeProps, withCtx, createVNode, useSSRContext } from "vue";
2
+ import { ssrRenderComponent, ssrRenderAttrs, ssrRenderSlot } from "vue/server-renderer";
3
+ import { VisXYContainer, VisLine, VisAxis } from "@unovis/vue";
5
4
  const _sfc_main$1 = /* @__PURE__ */ defineComponent({
6
5
  __name: "Area",
7
6
  __ssrInlineRender: true,
8
7
  props: {
9
8
  data: {},
10
- height: {},
11
- xLabel: {},
12
- yLabel: {},
13
- categories: {},
14
- xFormatter: {},
15
- yFormatter: {},
16
- curveType: {},
17
9
  xNumTicks: { default: (props) => props.data.length > 24 ? 24 / 4 : props.data.length - 1 },
18
- yNumTicks: { default: (props) => props.data.length > 24 ? 24 / 4 : props.data.length - 1 },
19
- hideLegend: { type: Boolean },
20
- hideTooltip: { type: Boolean },
21
- gridLineX: { type: Boolean },
22
- domainLineX: { type: Boolean },
23
- gridLineY: { type: Boolean },
24
- domainLineY: { type: Boolean },
25
- paginationPoisition: {}
10
+ yNumTicks: { default: (props) => props.data.length > 24 ? 24 / 4 : props.data.length - 1 }
26
11
  },
27
12
  setup(__props) {
28
- const props = __props;
29
- const colors = Object.values(props.categories).map((c) => c.color);
30
- function accessors(id) {
31
- var _a;
32
- return {
33
- y: (d) => Number(d[id]),
34
- color: ((_a = props.categories[id]) == null ? void 0 : _a.color) ?? "#3b82f6"
35
- };
36
- }
37
- const svgDefs = colors.map(
38
- (color, index) => `
39
- <linearGradient id="gradient${index}-${color}" gradientTransform="rotate(90)">
40
- <stop offset="0%" stop-color="${color}" stop-opacity="1" />
41
- <stop offset="100%" stop-color="${color}" stop-opacity="0" />
42
- </linearGradient>
43
- `
44
- ).join("");
45
13
  return (_ctx, _push, _parent, _attrs) => {
46
- _push(`<div${ssrRenderAttrs(mergeProps({
47
- class: ["flex flex-col space-y-4", {
48
- "flex-col-reverse": props.paginationPoisition === "top"
49
- }]
50
- }, _attrs))}>`);
51
- _push(ssrRenderComponent(unref(VisXYContainer), {
52
- data: _ctx.data,
53
- height: _ctx.height,
54
- "svg-defs": unref(svgDefs)
55
- }, {
14
+ _push(ssrRenderComponent(unref(VisXYContainer), mergeProps({ height: 600 }, _attrs), {
56
15
  default: withCtx((_, _push2, _parent2, _scopeId) => {
57
16
  if (_push2) {
58
- if (!_ctx.hideTooltip) {
59
- _push2(ssrRenderComponent(unref(VisTooltip), {
60
- "horizontal-placement": unref(Position).Right,
61
- "vertical-placement": unref(Position).Top
62
- }, null, _parent2, _scopeId));
63
- } else {
64
- _push2(`<!---->`);
65
- }
66
- _push2(`<!--[-->`);
67
- ssrRenderList(Object.keys(props.categories), (i, iKey) => {
68
- _push2(`<!--[-->`);
69
- _push2(ssrRenderComponent(unref(VisArea), mergeProps({
70
- x: (_2, i2) => i2,
71
- ref_for: true
72
- }, accessors(i), {
73
- color: `url(#gradient${iKey}-${unref(colors)[iKey]})`,
74
- opacity: 0.5,
75
- "curve-type": _ctx.curveType ?? unref(CurveType).MonotoneX
76
- }), null, _parent2, _scopeId));
77
- _push2(ssrRenderComponent(unref(VisLine), {
78
- x: (_2, i2) => i2,
79
- y: (d) => d[i],
80
- color: unref(colors)[iKey],
81
- "curve-type": _ctx.curveType ?? unref(CurveType).MonotoneX
82
- }, null, _parent2, _scopeId));
83
- _push2(`<!--]-->`);
84
- });
85
- _push2(`<!--]-->`);
86
- _push2(ssrRenderComponent(unref(VisAxis), {
87
- type: "x",
88
- "tick-format": _ctx.xFormatter,
89
- "num-ticks": _ctx.xNumTicks,
90
- label: _ctx.xLabel,
91
- "grid-line": _ctx.gridLineX,
92
- "domain-line": _ctx.domainLineX,
93
- "tick-line": !!_ctx.gridLineX
94
- }, null, _parent2, _scopeId));
95
- _push2(ssrRenderComponent(unref(VisAxis), {
96
- type: "y",
97
- "num-ticks": _ctx.yNumTicks ?? _ctx.data.length,
98
- "tick-format": _ctx.yFormatter,
99
- label: _ctx.yLabel,
100
- "grid-line": _ctx.gridLineY,
101
- "domain-line": _ctx.domainLineY,
102
- "tick-line": !!_ctx.gridLineY
17
+ _push2(ssrRenderComponent(unref(VisLine), {
18
+ data: _ctx.data,
19
+ x: (d) => d.x,
20
+ y: (d) => d.y
103
21
  }, null, _parent2, _scopeId));
22
+ _push2(ssrRenderComponent(unref(VisAxis), { type: "x" }, null, _parent2, _scopeId));
23
+ _push2(ssrRenderComponent(unref(VisAxis), { type: "y" }, null, _parent2, _scopeId));
104
24
  } else {
105
25
  return [
106
- !_ctx.hideTooltip ? (openBlock(), createBlock(unref(VisTooltip), {
107
- key: 0,
108
- "horizontal-placement": unref(Position).Right,
109
- "vertical-placement": unref(Position).Top
110
- }, null, 8, ["horizontal-placement", "vertical-placement"])) : createCommentVNode("", true),
111
- (openBlock(true), createBlock(Fragment, null, renderList(Object.keys(props.categories), (i, iKey) => {
112
- return openBlock(), createBlock(Fragment, { key: iKey }, [
113
- createVNode(unref(VisArea), mergeProps({
114
- x: (_2, i2) => i2,
115
- ref_for: true
116
- }, accessors(i), {
117
- color: `url(#gradient${iKey}-${unref(colors)[iKey]})`,
118
- opacity: 0.5,
119
- "curve-type": _ctx.curveType ?? unref(CurveType).MonotoneX
120
- }), null, 16, ["x", "color", "curve-type"]),
121
- createVNode(unref(VisLine), {
122
- x: (_2, i2) => i2,
123
- y: (d) => d[i],
124
- color: unref(colors)[iKey],
125
- "curve-type": _ctx.curveType ?? unref(CurveType).MonotoneX
126
- }, null, 8, ["x", "y", "color", "curve-type"])
127
- ], 64);
128
- }), 128)),
129
- createVNode(unref(VisAxis), {
130
- type: "x",
131
- "tick-format": _ctx.xFormatter,
132
- "num-ticks": _ctx.xNumTicks,
133
- label: _ctx.xLabel,
134
- "grid-line": _ctx.gridLineX,
135
- "domain-line": _ctx.domainLineX,
136
- "tick-line": !!_ctx.gridLineX
137
- }, null, 8, ["tick-format", "num-ticks", "label", "grid-line", "domain-line", "tick-line"]),
138
- createVNode(unref(VisAxis), {
139
- type: "y",
140
- "num-ticks": _ctx.yNumTicks ?? _ctx.data.length,
141
- "tick-format": _ctx.yFormatter,
142
- label: _ctx.yLabel,
143
- "grid-line": _ctx.gridLineY,
144
- "domain-line": _ctx.domainLineY,
145
- "tick-line": !!_ctx.gridLineY
146
- }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"])
26
+ createVNode(unref(VisLine), {
27
+ data: _ctx.data,
28
+ x: (d) => d.x,
29
+ y: (d) => d.y
30
+ }, null, 8, ["data", "x", "y"]),
31
+ createVNode(unref(VisAxis), { type: "x" }),
32
+ createVNode(unref(VisAxis), { type: "y" })
147
33
  ];
148
34
  }
149
35
  }),
150
36
  _: 1
151
37
  }, _parent));
152
- if (!_ctx.hideLegend) {
153
- _push(`<div class="flex items center justify-end">`);
154
- _push(ssrRenderComponent(unref(VisBulletLegend), {
155
- items: Object.values(_ctx.categories)
156
- }, null, _parent));
157
- _push(`</div>`);
158
- } else {
159
- _push(`<!---->`);
160
- }
161
- _push(`</div>`);
162
38
  };
163
39
  }
164
40
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-chrts",
3
- "version": "0.0.49",
3
+ "version": "0.0.51",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"