vue-chrts 0.0.47 → 0.0.48

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/components/Area/Area.d.ts +22 -23
  2. package/dist/components/Area/index.d.ts +0 -62
  3. package/dist/index.cjs +120 -222
  4. package/dist/index.js +122 -225
  5. package/package.json +1 -1
package/dist/components/Area/Area.d.ts CHANGED
@@ -1,31 +1,30 @@
1
- import { BaseChartProps } from '.';
2
1
  import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
3
- import { Component } from 'vue';
2
+ import { PaginationPosition } from '.';
4
3
 
5
- 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<{
6
- props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{
7
- readonly onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => any) | undefined;
8
- } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & (BaseChartProps<T> & {
9
- /**
10
- * Render custom tooltip component.
11
- */
12
- customTooltip?: Component;
13
- /**
14
- * Type of curve
15
- */
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<{
5
+ props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
6
+ 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;
16
13
  curveType?: CurveType;
17
- /**
18
- * Controls the visibility of gradient.
19
- * @default true
20
- */
21
- showGradiant?: boolean;
22
- }), keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
14
+ xNumTicks?: number;
15
+ yNumTicks?: number;
16
+ hideLegend?: boolean;
17
+ hideTooltip?: boolean;
18
+ gridLineX?: boolean;
19
+ domainLineX?: boolean;
20
+ gridLineY?: boolean;
21
+ domainLineY?: boolean;
22
+ paginationPoisition?: PaginationPosition;
23
+ }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
23
24
  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
24
25
  attrs: any;
25
- slots: ReturnType<() => {
26
- default?(_: {}): any;
27
- }>;
28
- emit: (evt: "legendItemClick", d: BulletLegendItemInterface, i: number) => void;
26
+ slots: ReturnType<() => {}>;
27
+ emit: typeof __VLS_emit;
29
28
  }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
30
29
  [key: string]: any;
31
30
  }> & {
package/dist/components/Area/index.d.ts CHANGED
@@ -1,67 +1,5 @@
1
- import { Spacing } from '@unovis/ts';
2
1
  export { default as Area } from './Area.vue';
3
2
  export declare enum PaginationPosition {
4
3
  Top = "top",
5
4
  Bottom = "bottom"
6
5
  }
7
- type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;
8
- export interface BaseChartProps<T extends Record<string, any>> {
9
- /**
10
- * The source data, in which each entry is a dictionary.
11
- */
12
- data: T[];
13
- /**
14
- * Select the categories from your data. Used to populate the legend and toolip.
15
- */
16
- categories: KeyOf<T>[];
17
- /**
18
- * Sets the key to map the data to the axis.
19
- */
20
- index: KeyOf<T>;
21
- /**
22
- * Change the default colors.
23
- */
24
- colors?: string[];
25
- /**
26
- * Margin of each the container
27
- */
28
- margin?: Spacing;
29
- /**
30
- * Change the opacity of the non-selected field
31
- * @default 0.2
32
- */
33
- filterOpacity?: number;
34
- /**
35
- * Function to format X label
36
- */
37
- xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;
38
- /**
39
- * Function to format Y label
40
- */
41
- yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;
42
- /**
43
- * Controls the visibility of the X axis.
44
- * @default true
45
- */
46
- showXAxis?: boolean;
47
- /**
48
- * Controls the visibility of the Y axis.
49
- * @default true
50
- */
51
- showYAxis?: boolean;
52
- /**
53
- * Controls the visibility of tooltip.
54
- * @default true
55
- */
56
- showTooltip?: boolean;
57
- /**
58
- * Controls the visibility of legend.
59
- * @default true
60
- */
61
- showLegend?: boolean;
62
- /**
63
- * Controls the visibility of gridline.
64
- * @default true
65
- */
66
- showGridLine?: boolean;
67
- }
package/dist/index.cjs CHANGED
@@ -1,265 +1,163 @@
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"), 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) {
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) {
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: {},
10
13
  categories: {},
11
- index: {},
12
- colors: {},
13
- margin: { default: () => ({ top: 0, bottom: 0, left: 0, right: 0 }) },
14
- filterOpacity: { default: 0.2 },
15
14
  xFormatter: {},
16
15
  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 }
16
+ curveType: {},
17
+ 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: {}
25
26
  },
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
- }
27
+ setup(__props) {
38
28
  const props = __props;
39
- const emits = __emit;
40
- const index = vue.computed(() => props.index);
41
- const colors = vue.computed(() => {
29
+ const colors = Object.values(props.categories).map((c) => c.color);
30
+ function accessors(id) {
42
31
  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);
32
+ return {
33
+ y: (d) => Number(d[id]),
34
+ color: ((_a = props.categories[id]) == null ? void 0 : _a.color) ?? "#3b82f6"
35
+ };
53
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("");
54
45
  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
- }
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))}>`);
67
51
  _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
52
+ data: _ctx.data,
53
+ height: _ctx.height,
54
+ "svg-defs": vue.unref(svgDefs)
71
55
  }, {
72
56
  default: vue.withCtx((_, _push2, _parent2, _scopeId) => {
73
57
  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
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
91
62
  }, null, _parent2, _scopeId));
92
63
  } else {
93
64
  _push2(`<!---->`);
94
65
  }
95
66
  _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;
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));
114
77
  _push2(serverRenderer.ssrRenderComponent(vue.unref(vue$1.VisLine), {
115
78
  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
- }
79
+ y: (d) => d[i],
80
+ color: vue.unref(colors)[iKey],
81
+ "curve-type": _ctx.curveType ?? vue.unref(ts.CurveType).MonotoneX
124
82
  }, null, _parent2, _scopeId));
83
+ _push2(`<!--]-->`);
125
84
  });
126
85
  _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);
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
103
+ }, null, _parent2, _scopeId));
159
104
  } else {
160
105
  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, {
106
+ !_ctx.hideTooltip ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.VisTooltip), {
195
107
  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"]);
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);
231
128
  }), 128)),
232
- _ctx.showXAxis ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.VisAxis), {
233
- key: 1,
129
+ vue.createVNode(vue.unref(vue$1.VisAxis), {
234
130
  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,
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), {
245
139
  type: "y",
246
- "tick-line": false,
140
+ "num-ticks": _ctx.yNumTicks ?? _ctx.data.length,
247
141
  "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")
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"])
258
147
  ];
259
148
  }
260
149
  }),
261
- _: 3
150
+ _: 1
262
151
  }, _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
+ }
263
161
  _push(`</div>`);
264
162
  };
265
163
  }
package/dist/index.js CHANGED
@@ -1,266 +1,163 @@
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";
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";
6
5
  const _sfc_main$1 = /* @__PURE__ */ defineComponent({
7
6
  __name: "Area",
8
7
  __ssrInlineRender: true,
9
8
  props: {
10
9
  data: {},
10
+ height: {},
11
+ xLabel: {},
12
+ yLabel: {},
11
13
  categories: {},
12
- index: {},
13
- colors: {},
14
- margin: { default: () => ({ top: 0, bottom: 0, left: 0, right: 0 }) },
15
- filterOpacity: { default: 0.2 },
16
14
  xFormatter: {},
17
15
  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 }
16
+ curveType: {},
17
+ 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: {}
26
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
- }
27
+ setup(__props) {
39
28
  const props = __props;
40
- const emits = __emit;
41
- const index = computed(() => props.index);
42
- const colors = computed(() => {
29
+ const colors = Object.values(props.categories).map((c) => c.color);
30
+ function accessors(id) {
43
31
  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);
32
+ return {
33
+ y: (d) => Number(d[id]),
34
+ color: ((_a = props.categories[id]) == null ? void 0 : _a.color) ?? "#3b82f6"
35
+ };
54
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("");
55
45
  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
- }
46
+ _push(`<div${ssrRenderAttrs(mergeProps({
47
+ class: ["flex flex-col space-y-4", {
48
+ "flex-col-reverse": props.paginationPoisition === "top"
49
+ }]
50
+ }, _attrs))}>`);
68
51
  _push(ssrRenderComponent(unref(VisXYContainer), {
69
- style: { height: unref(isMounted) ? "100%" : "auto" },
70
- margin: { left: 20, right: 20 },
71
- data: _ctx.data
52
+ data: _ctx.data,
53
+ height: _ctx.height,
54
+ "svg-defs": unref(svgDefs)
72
55
  }, {
73
56
  default: withCtx((_, _push2, _parent2, _scopeId) => {
74
57
  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
58
+ if (!_ctx.hideTooltip) {
59
+ _push2(ssrRenderComponent(unref(VisTooltip), {
60
+ "horizontal-placement": unref(Position).Right,
61
+ "vertical-placement": unref(Position).Top
92
62
  }, null, _parent2, _scopeId));
93
63
  } else {
94
64
  _push2(`<!---->`);
95
65
  }
96
66
  _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;
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));
115
77
  _push2(ssrRenderComponent(unref(VisLine), {
116
78
  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
- }
79
+ y: (d) => d[i],
80
+ color: unref(colors)[iKey],
81
+ "curve-type": _ctx.curveType ?? unref(CurveType).MonotoneX
125
82
  }, null, _parent2, _scopeId));
83
+ _push2(`<!--]-->`);
126
84
  });
127
85
  _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);
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
103
+ }, null, _parent2, _scopeId));
160
104
  } else {
161
105
  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, {
106
+ !_ctx.hideTooltip ? (openBlock(), createBlock(unref(VisTooltip), {
196
107
  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"]);
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);
232
128
  }), 128)),
233
- _ctx.showXAxis ? (openBlock(), createBlock(unref(VisAxis), {
234
- key: 1,
129
+ createVNode(unref(VisAxis), {
235
130
  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,
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), {
246
139
  type: "y",
247
- "tick-line": false,
140
+ "num-ticks": _ctx.yNumTicks ?? _ctx.data.length,
248
141
  "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")
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"])
259
147
  ];
260
148
  }
261
149
  }),
262
- _: 3
150
+ _: 1
263
151
  }, _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
+ }
264
161
  _push(`</div>`);
265
162
  };
266
163
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-chrts",
3
- "version": "0.0.47",
3
+ "version": "0.0.48",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"