vue-chrts 0.2.0-test.3 → 0.2.0-test.4

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.
@@ -0,0 +1,9 @@
1
+ const s = (t, e) => {
2
+ const o = t.__vccOpts || t;
3
+ for (const [r, c] of e)
4
+ o[r] = c;
5
+ return o;
6
+ };
7
+ export {
8
+ s as default
9
+ };
@@ -1,158 +1,6 @@
1
- import { defineComponent as E, useSlots as x, useTemplateRef as P, ref as U, computed as k, createElementBlock as d, openBlock as a, normalizeClass as h, createVNode as c, createCommentVNode as r, createElementVNode as j, unref as i, withCtx as M, createBlock as u, Fragment as L, renderList as R, mergeProps as W, renderSlot as b } from "vue";
2
- import { Position as C, CurveType as B } from "@unovis/ts";
3
- import { getFirstPropertyValue as X } from "../../utils.js";
4
- import Y from "../Tooltip.js";
5
- import { VisXYContainer as w, VisTooltip as z, VisArea as I, VisLine as S, VisAxis as V, VisCrosshair as H, VisBulletLegend as K } from "@unovis/vue";
6
- import { LegendPosition as q } from "../../types.js";
7
- const J = {
8
- ref: "slotWrapper",
9
- class: "hidden"
10
- }, m = 24, A = 4, Q = 0.5, F = "#3b82f6", ae = /* @__PURE__ */ E({
11
- __name: "AreaChart",
12
- props: {
13
- data: {},
14
- height: {},
15
- xLabel: {},
16
- yLabel: {},
17
- padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
18
- categories: {},
19
- xFormatter: {},
20
- yFormatter: {},
21
- curveType: {},
22
- xNumTicks: { default: (n) => n.data.length > m ? m / A : n.data.length - 1 },
23
- xExplicitTicks: {},
24
- minMaxTicksOnly: { type: Boolean },
25
- yNumTicks: { default: (n) => n.data.length > m ? m / A : n.data.length - 1 },
26
- hideLegend: { type: Boolean },
27
- hideTooltip: { type: Boolean },
28
- legendPosition: {},
29
- xDomainLine: { type: Boolean },
30
- yDomainLine: { type: Boolean },
31
- xTickLine: { type: Boolean },
32
- yTickLine: { type: Boolean },
33
- xGridLine: { type: Boolean },
34
- yGridLine: { type: Boolean },
35
- hideXAxis: { type: Boolean },
36
- hideYAxis: { type: Boolean }
37
- },
38
- setup(n) {
39
- const l = n, $ = x(), v = P("slotWrapper"), s = U(), y = k(
40
- () => Object.values(l.categories).map((e) => e.color)
41
- ), T = k(() => l.legendPosition === q.Top), D = k(() => {
42
- const e = (t, o) => `
43
- <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
44
- <stop offset="0%" stop-color="${o}" stop-opacity="1" />
45
- <stop offset="100%" stop-color="${o}" stop-opacity="0" />
46
- </linearGradient>
47
- `, p = (t, o) => `
48
- <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
49
- <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
50
- <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
51
- </linearGradient>
52
- `;
53
- return y.value.map(
54
- (t, o) => t != null && t.includes("#") ? e(o, t) : p(o, t ?? F)
55
- ).join("");
56
- });
57
- function G(e) {
58
- var p;
59
- return {
60
- y: (t) => Number(t[e]),
61
- color: ((p = l.categories[e]) == null ? void 0 : p.color) ?? F
62
- };
63
- }
64
- function O(e) {
65
- return typeof window > "u" ? "" : v.value ? v.value.innerHTML : "";
66
- }
67
- function N(e) {
68
- return s.value = e, O();
69
- }
70
- return (e, p) => (a(), d("div", {
71
- class: h(["flex flex-col space-y-4", { "flex-col-reverse": T.value }])
72
- }, [
73
- c(i(w), {
74
- data: e.data,
75
- height: e.height,
76
- padding: e.padding,
77
- "svg-defs": D.value
78
- }, {
79
- default: M(() => [
80
- e.hideTooltip ? r("", !0) : (a(), u(i(z), {
81
- key: 0,
82
- "horizontal-placement": i(C).Right,
83
- "vertical-placement": i(C).Top
84
- }, null, 8, ["horizontal-placement", "vertical-placement"])),
85
- (a(!0), d(L, null, R(Object.keys(l.categories), (t, o) => (a(), d(L, { key: t }, [
86
- c(i(I), W({
87
- x: (f, g) => g,
88
- ref_for: !0
89
- }, G(t), {
90
- color: `url(#gradient${o}-${y.value[o]})`,
91
- opacity: Q,
92
- "curve-type": e.curveType ?? i(B).MonotoneX
93
- }), null, 16, ["x", "color", "curve-type"]),
94
- c(i(S), {
95
- x: (f, g) => g,
96
- y: (f) => f[t],
97
- color: y.value[o],
98
- "curve-type": e.curveType ?? i(B).MonotoneX
99
- }, null, 8, ["x", "y", "color", "curve-type"])
100
- ], 64))), 128)),
101
- e.hideXAxis ? r("", !0) : (a(), u(i(V), {
102
- key: 1,
103
- type: "x",
104
- label: e.xLabel,
105
- "label-margin": 8,
106
- "num-ticks": e.xNumTicks,
107
- "tick-format": e.xFormatter,
108
- "tick-values": e.xExplicitTicks,
109
- "grid-line": e.xGridLine,
110
- "domain-line": e.xDomainLine,
111
- "tick-line": e.xTickLine,
112
- "min-max-ticks-only": e.minMaxTicksOnly
113
- }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
114
- e.hideYAxis ? r("", !0) : (a(), u(i(V), {
115
- key: 2,
116
- type: "y",
117
- label: e.yLabel,
118
- "num-ticks": e.yNumTicks,
119
- "tick-format": e.yFormatter,
120
- "grid-line": e.yGridLine,
121
- "domain-line": e.yDomainLine,
122
- "tick-line": e.yTickLine
123
- }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
124
- e.hideTooltip ? r("", !0) : (a(), u(i(H), {
125
- key: 3,
126
- color: "#666",
127
- template: N
128
- }))
129
- ]),
130
- _: 1
131
- }, 8, ["data", "height", "padding", "svg-defs"]),
132
- e.hideLegend ? r("", !0) : (a(), d("div", {
133
- key: 0,
134
- class: h(["flex items-center justify-end", { "pb-4": T.value }])
135
- }, [
136
- c(i(K), {
137
- items: Object.values(e.categories)
138
- }, null, 8, ["items"])
139
- ], 2)),
140
- j("div", J, [
141
- i($).tooltip ? b(e.$slots, "tooltip", {
142
- key: 0,
143
- values: s.value
144
- }) : s.value ? b(e.$slots, "fallback", { key: 1 }, () => [
145
- c(Y, {
146
- data: s.value,
147
- categories: e.categories,
148
- toolTipTitle: i(X)(s.value) ?? "",
149
- yFormatter: l.yFormatter
150
- }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
151
- ]) : r("", !0)
152
- ], 512)
153
- ], 2));
154
- }
155
- });
1
+ import a from "./AreaChart2.js";
2
+ import o from "../../_virtual/_plugin-vue_export-helper.js";
3
+ const f = /* @__PURE__ */ o(a, [["__scopeId", "data-v-b9ab9df3"]]);
156
4
  export {
157
- ae as default
5
+ f as default
158
6
  };
@@ -1,4 +1,159 @@
1
- import f from "./AreaChart.js";
1
+ import { defineComponent as x, useSlots as P, useTemplateRef as M, ref as U, computed as c, createElementBlock as d, openBlock as a, normalizeClass as h, createVNode as u, createCommentVNode as l, createElementVNode as j, unref as i, withCtx as R, createBlock as m, Fragment as L, renderList as W, mergeProps as X, renderSlot as C } from "vue";
2
+ import { Position as b, CurveType as B } from "@unovis/ts";
3
+ import { createMarkers as S, getFirstPropertyValue as Y } from "../../utils.js";
4
+ import w from "../Tooltip.js";
5
+ import { VisXYContainer as z, VisTooltip as I, VisArea as H, VisLine as K, VisAxis as V, VisCrosshair as q, VisBulletLegend as J } from "@unovis/vue";
6
+ import { LegendPosition as Q } from "../../types.js";
7
+ const Z = {
8
+ ref: "slotWrapper",
9
+ class: "hidden"
10
+ }, y = 24, A = 4, _ = 0.5, F = "#3b82f6", ne = /* @__PURE__ */ x({
11
+ __name: "AreaChart",
12
+ props: {
13
+ data: {},
14
+ height: {},
15
+ xLabel: {},
16
+ yLabel: {},
17
+ padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
18
+ categories: {},
19
+ markerConfig: {},
20
+ xFormatter: {},
21
+ yFormatter: {},
22
+ curveType: {},
23
+ xNumTicks: { default: (n) => n.data.length > y ? y / A : n.data.length - 1 },
24
+ xExplicitTicks: {},
25
+ minMaxTicksOnly: { type: Boolean },
26
+ yNumTicks: { default: (n) => n.data.length > y ? y / A : n.data.length - 1 },
27
+ hideLegend: { type: Boolean },
28
+ hideTooltip: { type: Boolean },
29
+ legendPosition: {},
30
+ xDomainLine: { type: Boolean },
31
+ yDomainLine: { type: Boolean },
32
+ xTickLine: { type: Boolean },
33
+ yTickLine: { type: Boolean },
34
+ xGridLine: { type: Boolean },
35
+ yGridLine: { type: Boolean },
36
+ hideXAxis: { type: Boolean },
37
+ hideYAxis: { type: Boolean }
38
+ },
39
+ setup(n) {
40
+ const r = n, D = P(), v = M("slotWrapper"), s = U(), f = c(
41
+ () => Object.values(r.categories).map((e) => e.color)
42
+ ), T = c(() => r.legendPosition === Q.Top), $ = c(() => {
43
+ const e = (t, o) => `
44
+ <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
45
+ <stop offset="0%" stop-color="${o}" stop-opacity="1" />
46
+ <stop offset="100%" stop-color="${o}" stop-opacity="0" />
47
+ </linearGradient>
48
+ `, p = (t, o) => `
49
+ <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
50
+ <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
51
+ <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
52
+ </linearGradient>
53
+ `;
54
+ return f.value.map(
55
+ (t, o) => t != null && t.includes("#") ? e(o, t) : p(o, t ?? F)
56
+ ).join("");
57
+ }), G = c(() => r.markerConfig ? S(r.markerConfig) : "");
58
+ function O(e) {
59
+ var p;
60
+ return {
61
+ y: (t) => Number(t[e]),
62
+ color: ((p = r.categories[e]) == null ? void 0 : p.color) ?? F
63
+ };
64
+ }
65
+ function N(e) {
66
+ return typeof window > "u" ? "" : v.value ? v.value.innerHTML : "";
67
+ }
68
+ function E(e) {
69
+ return s.value = e, N();
70
+ }
71
+ return (e, p) => (a(), d("div", {
72
+ class: h(["flex flex-col space-y-4", { "flex-col-reverse": T.value, markers: !!r.markerConfig }])
73
+ }, [
74
+ u(i(z), {
75
+ data: e.data,
76
+ height: e.height,
77
+ padding: e.padding,
78
+ "svg-defs": $.value + G.value
79
+ }, {
80
+ default: R(() => [
81
+ e.hideTooltip ? l("", !0) : (a(), m(i(I), {
82
+ key: 0,
83
+ "horizontal-placement": i(b).Right,
84
+ "vertical-placement": i(b).Top
85
+ }, null, 8, ["horizontal-placement", "vertical-placement"])),
86
+ (a(!0), d(L, null, W(Object.keys(r.categories), (t, o) => (a(), d(L, { key: t }, [
87
+ u(i(H), X({
88
+ x: (g, k) => k,
89
+ ref_for: !0
90
+ }, O(t), {
91
+ color: `url(#gradient${o}-${f.value[o]})`,
92
+ opacity: _,
93
+ "curve-type": e.curveType ?? i(B).MonotoneX
94
+ }), null, 16, ["x", "color", "curve-type"]),
95
+ u(i(K), {
96
+ x: (g, k) => k,
97
+ y: (g) => g[t],
98
+ color: f.value[o],
99
+ "curve-type": e.curveType ?? i(B).MonotoneX
100
+ }, null, 8, ["x", "y", "color", "curve-type"])
101
+ ], 64))), 128)),
102
+ e.hideXAxis ? l("", !0) : (a(), m(i(V), {
103
+ key: 1,
104
+ type: "x",
105
+ label: e.xLabel,
106
+ "label-margin": 8,
107
+ "num-ticks": e.xNumTicks,
108
+ "tick-format": e.xFormatter,
109
+ "tick-values": e.xExplicitTicks,
110
+ "grid-line": e.xGridLine,
111
+ "domain-line": e.xDomainLine,
112
+ "tick-line": e.xTickLine,
113
+ "min-max-ticks-only": e.minMaxTicksOnly
114
+ }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
115
+ e.hideYAxis ? l("", !0) : (a(), m(i(V), {
116
+ key: 2,
117
+ type: "y",
118
+ label: e.yLabel,
119
+ "num-ticks": e.yNumTicks,
120
+ "tick-format": e.yFormatter,
121
+ "grid-line": e.yGridLine,
122
+ "domain-line": e.yDomainLine,
123
+ "tick-line": e.yTickLine
124
+ }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
125
+ e.hideTooltip ? l("", !0) : (a(), m(i(q), {
126
+ key: 3,
127
+ color: "#666",
128
+ template: E
129
+ }))
130
+ ]),
131
+ _: 1
132
+ }, 8, ["data", "height", "padding", "svg-defs"]),
133
+ e.hideLegend ? l("", !0) : (a(), d("div", {
134
+ key: 0,
135
+ class: h(["flex items-center justify-end", { "pb-4": T.value }])
136
+ }, [
137
+ u(i(J), {
138
+ items: Object.values(e.categories)
139
+ }, null, 8, ["items"])
140
+ ], 2)),
141
+ j("div", Z, [
142
+ i(D).tooltip ? C(e.$slots, "tooltip", {
143
+ key: 0,
144
+ values: s.value
145
+ }, void 0, !0) : s.value ? C(e.$slots, "fallback", { key: 1 }, () => [
146
+ u(w, {
147
+ data: s.value,
148
+ categories: e.categories,
149
+ toolTipTitle: i(Y)(s.value) ?? "",
150
+ yFormatter: r.yFormatter
151
+ }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
152
+ ], !0) : l("", !0)
153
+ ], 512)
154
+ ], 2));
155
+ }
156
+ });
2
157
  export {
3
- f as default
158
+ ne as default
4
159
  };
@@ -1,4 +1,4 @@
1
- import { axisFormatter, LegendPosition } from '../../types';
1
+ import { axisFormatter, LegendPosition, MarkerConfig } from '../../types';
2
2
  import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
3
3
  export interface AreaChartProps<T> {
4
4
  /**
@@ -34,6 +34,10 @@ export interface AreaChartProps<T> {
34
34
  * This defines the visual representation and labels for each category in the chart's legend.
35
35
  */
36
36
  categories: Record<string, BulletLegendItemInterface>;
37
+ /**
38
+ * A record mapping marker keys to show custom patterns.
39
+ */
40
+ markerConfig?: Record<string, MarkerConfig>;
37
41
  /**
38
42
  * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
39
43
  * @param {number} i - The index of the tick in the `ticks` array.
@@ -1,8 +1,8 @@
1
- import { defineComponent as D, computed as f, useSlots as O, useTemplateRef as M, ref as N, createElementBlock as m, openBlock as n, normalizeClass as k, createVNode as r, createCommentVNode as l, createElementVNode as P, unref as i, withCtx as j, createBlock as s, Fragment as A, renderList as E, renderSlot as v } from "vue";
2
- import { Position as h, CurveType as G } from "@unovis/ts";
1
+ import { defineComponent as D, computed as f, useSlots as N, useTemplateRef as O, ref as P, createElementBlock as m, openBlock as n, normalizeClass as k, createVNode as r, createCommentVNode as l, createElementVNode as j, unref as i, withCtx as A, createBlock as s, Fragment as M, renderList as E, renderSlot as g } from "vue";
2
+ import { Position as v, CurveType as G } from "@unovis/ts";
3
3
  import { createMarkers as X, getFirstPropertyValue as $ } from "../../utils.js";
4
4
  import w from "../Tooltip.js";
5
- import { VisXYContainer as z, VisTooltip as R, VisLine as W, VisAxis as T, VisCrosshair as Y, VisBulletLegend as S } from "@unovis/vue";
5
+ import { VisXYContainer as z, VisTooltip as R, VisLine as W, VisAxis as h, VisCrosshair as Y, VisBulletLegend as S } from "@unovis/vue";
6
6
  import { LegendPosition as H } from "../../types.js";
7
7
  const U = {
8
8
  ref: "slotWrapper",
@@ -25,10 +25,10 @@ const U = {
25
25
  xFormatter: {},
26
26
  yFormatter: {},
27
27
  curveType: {},
28
- xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
28
+ xNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
29
29
  xExplicitTicks: {},
30
30
  minMaxTicksOnly: { type: Boolean },
31
- yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
31
+ yNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
32
32
  hideTooltip: { type: Boolean },
33
33
  hideLegend: { type: Boolean },
34
34
  legendPosition: {},
@@ -41,43 +41,44 @@ const U = {
41
41
  hideXAxis: { type: Boolean },
42
42
  hideYAxis: { type: Boolean }
43
43
  },
44
- setup(t) {
45
- const o = t, d = f(() => o.markerConfig ? X(o.markerConfig) : "");
46
- console.log(d, "svgDefs");
47
- const L = O(), u = M("slotWrapper"), a = N();
48
- function C(e) {
49
- return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
50
- }
44
+ setup(o) {
45
+ const t = o, T = f(() => t.markerConfig ? X(t.markerConfig) : ""), L = N(), d = O("slotWrapper"), a = P();
51
46
  function b(e) {
52
- return a.value = e, C();
47
+ return typeof window > "u" ? "" : d.value ? d.value.innerHTML : "";
48
+ }
49
+ function B(e) {
50
+ return a.value = e, b();
53
51
  }
54
- const c = f(
55
- () => o.legendPosition === H.Top
56
- ), B = Object.values(o.categories).map(
57
- (e, p) => `var(--vis-color${p})`
58
- ), V = (e) => Object.values(o.categories)[e].color ?? B[e];
59
- return console.log(o.markerConfig, "props.markerConfig"), (e, p) => (n(), m("div", {
60
- class: k(["flex flex-col space-y-4", { "flex-col-reverse": c.value, markers: !!o.markerConfig }])
52
+ const u = f(
53
+ () => t.legendPosition === H.Top
54
+ ), C = Object.values(t.categories).map(
55
+ (e, c) => `var(--vis-color${c})`
56
+ ), V = (e) => Object.values(t.categories)[e].color ?? C[e];
57
+ return (e, c) => (n(), m("div", {
58
+ class: k(["flex flex-col space-y-4", {
59
+ "flex-col-reverse": u.value,
60
+ markers: !!t.markerConfig
61
+ }])
61
62
  }, [
62
63
  r(i(z), {
63
64
  data: e.data,
64
65
  padding: e.padding,
65
66
  height: e.height,
66
- svgDefs: d.value
67
+ svgDefs: T.value
67
68
  }, {
68
- default: j(() => [
69
+ default: A(() => [
69
70
  r(i(R), {
70
- "horizontal-placement": i(h).Right,
71
- "vertical-placement": i(h).Top
71
+ "horizontal-placement": i(v).Right,
72
+ "vertical-placement": i(v).Top
72
73
  }, null, 8, ["horizontal-placement", "vertical-placement"]),
73
- (n(!0), m(A, null, E(Object.keys(o.categories), (x, y) => (n(), s(i(W), {
74
- key: y,
75
- x: (g, F) => F,
76
- y: (g) => g[x],
77
- color: V(y),
74
+ (n(!0), m(M, null, E(Object.keys(t.categories), (x, p) => (n(), s(i(W), {
75
+ key: p,
76
+ x: (y, F) => F,
77
+ y: (y) => y[x],
78
+ color: V(p),
78
79
  "curve-type": e.curveType ?? i(G).MonotoneX
79
80
  }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
80
- e.hideXAxis ? l("", !0) : (n(), s(i(T), {
81
+ e.hideXAxis ? l("", !0) : (n(), s(i(h), {
81
82
  key: 0,
82
83
  type: "x",
83
84
  "tick-format": e.xFormatter,
@@ -88,9 +89,9 @@ const U = {
88
89
  "tick-line": e.xTickLine,
89
90
  "num-ticks": e.xNumTicks,
90
91
  "tick-values": e.xExplicitTicks,
91
- minMaxTicksOnly: e.minMaxTicksOnly
92
- }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
93
- e.hideYAxis ? l("", !0) : (n(), s(i(T), {
92
+ "min-max-ticks-only": e.minMaxTicksOnly
93
+ }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"])),
94
+ e.hideYAxis ? l("", !0) : (n(), s(i(h), {
94
95
  key: 1,
95
96
  type: "y",
96
97
  "tick-format": e.yFormatter,
@@ -103,29 +104,29 @@ const U = {
103
104
  e.hideTooltip ? l("", !0) : (n(), s(i(Y), {
104
105
  key: 2,
105
106
  color: "#666",
106
- template: b
107
+ template: B
107
108
  }))
108
109
  ]),
109
110
  _: 1
110
111
  }, 8, ["data", "padding", "height", "svgDefs"]),
111
112
  e.hideLegend ? l("", !0) : (n(), m("div", {
112
113
  key: 0,
113
- class: k(["flex items center justify-end", { "pb-4": c.value }])
114
+ class: k(["flex items center justify-end", { "pb-4": u.value }])
114
115
  }, [
115
116
  r(i(S), {
116
117
  items: Object.values(e.categories)
117
118
  }, null, 8, ["items"])
118
119
  ], 2)),
119
- P("div", U, [
120
- i(L).tooltip ? v(e.$slots, "tooltip", {
120
+ j("div", U, [
121
+ i(L).tooltip ? g(e.$slots, "tooltip", {
121
122
  key: 0,
122
123
  values: a.value
123
- }) : a.value ? v(e.$slots, "fallback", { key: 1 }, () => [
124
+ }) : a.value ? g(e.$slots, "fallback", { key: 1 }, () => [
124
125
  r(w, {
125
126
  data: a.value,
126
127
  categories: e.categories,
127
128
  toolTipTitle: i($)(a.value) ?? "",
128
- yFormatter: o.yFormatter
129
+ yFormatter: t.yFormatter
129
130
  }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
130
131
  ]) : l("", !0)
131
132
  ], 512)
@@ -1,10 +1,4 @@
1
- import { axisFormatter, BulletLegendItemInterface, CurveType, LegendPosition } from '../../types';
2
- export type MarkerConfig = {
3
- type: 'circle' | 'square' | 'triangle' | 'diamond';
4
- size?: number;
5
- strokeWidth?: number;
6
- color?: string;
7
- };
1
+ import { axisFormatter, BulletLegendItemInterface, CurveType, LegendPosition, MarkerConfig } from '../../types';
8
2
  export interface LineChartProps<T> {
9
3
  /**
10
4
  * The data to be displayed in the line chart.
@@ -39,6 +33,9 @@ export interface LineChartProps<T> {
39
33
  * This defines the visual representation and labels for each category in the chart's legend.
40
34
  */
41
35
  categories: Record<string, BulletLegendItemInterface>;
36
+ /**
37
+ * A record mapping marker keys to show custom patterns.
38
+ */
42
39
  markerConfig?: Record<string, MarkerConfig>;
43
40
  /**
44
41
  * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
@@ -0,0 +1 @@
1
+ .markers[data-v-b9ab9df3] *[stroke="#156F36"]{marker:url(#circle-marker-desktop)}.markers[data-v-b9ab9df3] *[stroke="#4ade80"]{marker:url(#circle-marker-mobile)}
package/dist/types.d.ts CHANGED
@@ -41,3 +41,9 @@ declare enum Orientation {
41
41
  }
42
42
  export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, };
43
43
  export type axisFormatter<T> = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
44
+ export type MarkerConfig = {
45
+ type: "circle" | "square" | "triangle" | "diamond";
46
+ size?: number;
47
+ strokeWidth?: number;
48
+ color?: string;
49
+ };
package/dist/utils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { MarkerConfig } from './components/LineChart/types';
1
+ import { MarkerConfig } from './types';
2
2
  export declare function getDistributedIndices(length: number, numTicks: number): number[];
3
3
  export declare function getFirstPropertyValue(obj: unknown): undefined;
4
4
  export declare const markerShape: (type: string, size: number, strokeWidth: number, color: string) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-chrts",
3
- "version": "0.2.0-test.3",
3
+ "version": "0.2.0-test.4",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"