vue-chrts 2.1.0-beta-7 → 2.1.0-beta-8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AreaChart/AreaChart.js +95 -116
- package/dist/components/AreaChart/types.d.ts +1 -205
- package/dist/components/BarChart/BarChart.js +9 -9
- package/dist/components/BarChart/types.d.ts +1 -191
- package/dist/components/BubbleChart/BubbleChart.js +4 -4
- package/dist/components/BubbleChart/types.d.ts +1 -172
- package/dist/components/DagreGraph/DagreGraph.js +65 -62
- package/dist/components/DagreGraph/types.d.ts +1 -1
- package/dist/components/DonutChart/DonutChart.js +5 -5
- package/dist/components/DonutChart/types.d.ts +2 -68
- package/dist/components/DualChart/DualChart.js +125 -122
- package/dist/components/DualChart/types.d.ts +1 -1
- package/dist/components/GanttChart/GanttChart.js +6 -6
- package/dist/components/GanttChart/types.d.ts +1 -124
- package/dist/components/LineChart/LineChart.js +7 -12
- package/dist/components/LineChart/types.d.ts +1 -2
- package/dist/components/Maps/DottedMap/DottedMap.js +2 -2
- package/dist/components/Maps/DottedMap/core.js +2 -2
- package/dist/components/Maps/DottedMap/core.vue.d.ts +1 -1
- package/dist/components/Maps/DottedMap/mapUtils.js +1 -1
- package/dist/components/Maps/TopoJSONMap/TopoJSONMap.js +5 -5
- package/dist/components/SankeyChart/SankeyChart.js +59 -56
- package/dist/components/SankeyChart/types.d.ts +1 -1
- package/dist/components/Tooltip.js +5 -5
- package/dist/index.d.ts +3 -3
- package/dist/index.js +2 -2
- package/dist/node_modules/.pnpm/{@turf_boolean-point-in-polygon@7.3.1 → @turf_boolean-point-in-polygon@7.3.2}/node_modules/@turf/boolean-point-in-polygon/dist/esm/index.js +1 -1
- package/dist/node_modules/.pnpm/robust-predicates@3.0.2/node_modules/robust-predicates/esm/orient2d.js +1 -1
- package/dist/packages/shared/dist/donut-chart.js +7 -0
- package/dist/packages/shared/dist/index.js +19 -0
- package/dist/types.d.ts +7 -101
- package/package.json +8 -2
- package/dist/components/DonutChart/types.js +0 -4
- package/dist/types.js +0 -6
- /package/dist/node_modules/.pnpm/{@turf_invariant@7.3.1 → @turf_invariant@7.3.2}/node_modules/@turf/invariant/dist/esm/index.js +0 -0
|
@@ -1,68 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export type DonutChartProps
|
|
3
|
-
/**
|
|
4
|
-
* The type of donut chart to render.
|
|
5
|
-
* See `DonutType` for available options.
|
|
6
|
-
*/
|
|
7
|
-
type?: DonutType;
|
|
8
|
-
/**
|
|
9
|
-
* The data to be displayed in the donut chart.
|
|
10
|
-
* Each number in the array represents a segment value.
|
|
11
|
-
*/
|
|
12
|
-
data: number[];
|
|
13
|
-
/**
|
|
14
|
-
* The arc width of the chart in pixels.
|
|
15
|
-
*/
|
|
16
|
-
arcWidth?: number;
|
|
17
|
-
/**
|
|
18
|
-
* The height of the chart in pixels.
|
|
19
|
-
*/
|
|
20
|
-
height?: number;
|
|
21
|
-
/**
|
|
22
|
-
* The radius of the donut in pixels.
|
|
23
|
-
*/
|
|
24
|
-
radius: number;
|
|
25
|
-
/**
|
|
26
|
-
* If `true`, hides the chart legend.
|
|
27
|
-
*/
|
|
28
|
-
hideLegend?: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* Optional position for the legend, if applicable.
|
|
31
|
-
* See `LegendPosition` for available options.
|
|
32
|
-
*/
|
|
33
|
-
legendPosition?: LegendPosition;
|
|
34
|
-
/**
|
|
35
|
-
* Optional style object for the legend container. Allows custom CSS styling.
|
|
36
|
-
*/
|
|
37
|
-
legendStyle?: string | Record<string, string>;
|
|
38
|
-
/**
|
|
39
|
-
* A record mapping category keys to `BulletLegendItemInterface` objects.
|
|
40
|
-
* This defines the visual representation and labels for each category in the chart's legend.
|
|
41
|
-
*/
|
|
42
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
43
|
-
/**
|
|
44
|
-
* Pad angle. Default: 0
|
|
45
|
-
*/
|
|
46
|
-
padAngle?: number;
|
|
47
|
-
/**
|
|
48
|
-
* Use custom formatter for tooltip titles
|
|
49
|
-
*/
|
|
50
|
-
tooltipTitleFormatter?: (data: T) => string | number;
|
|
51
|
-
/**
|
|
52
|
-
* If `true`, hides the chart tooltip.
|
|
53
|
-
*/
|
|
54
|
-
hideTooltip?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Configuration object for the chart tooltip.
|
|
57
|
-
*/
|
|
58
|
-
tooltip?: TooltipConfig;
|
|
59
|
-
/**
|
|
60
|
-
* Animation duration in milliseconds.
|
|
61
|
-
*/
|
|
62
|
-
duration?: number;
|
|
63
|
-
};
|
|
64
|
-
declare enum DonutType {
|
|
65
|
-
Half = "half",
|
|
66
|
-
Full = "full"
|
|
67
|
-
}
|
|
68
|
-
export { DonutType };
|
|
1
|
+
export { DonutType } from '../../../../shared/dist/index.d.ts';
|
|
2
|
+
export type { DonutChartProps } from '../../../../shared/dist/index.d.ts';
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Orientation as
|
|
3
|
-
import { VisXYContainer as
|
|
4
|
-
import
|
|
5
|
-
import { LegendPosition as
|
|
6
|
-
const
|
|
1
|
+
import { defineComponent as G, useSlots as z, useTemplateRef as H, ref as X, computed as y, openBlock as r, createElementBlock as f, normalizeStyle as x, createVNode as k, unref as i, withCtx as j, createBlock as u, createCommentVNode as c, Fragment as q, renderList as $, mergeProps as h, createElementVNode as R, renderSlot as B } from "vue";
|
|
2
|
+
import { Orientation as g, CurveType as Y, Position as w, StackedBar as U, GroupedBar as I } from "@unovis/ts";
|
|
3
|
+
import { VisXYContainer as J, VisTooltip as K, VisGroupedBar as Q, VisStackedBar as Z, VisLine as _, VisAxis as P, VisCrosshair as ee, VisBulletLegend as te } from "@unovis/vue";
|
|
4
|
+
import ie from "../Tooltip.js";
|
|
5
|
+
import { LegendPosition as ae } from "../../packages/shared/dist/index.js";
|
|
6
|
+
const ne = {
|
|
7
7
|
ref: "slotWrapper",
|
|
8
8
|
style: { display: "none" }
|
|
9
|
-
},
|
|
9
|
+
}, ce = /* @__PURE__ */ G({
|
|
10
10
|
__name: "DualChart",
|
|
11
11
|
props: {
|
|
12
12
|
data: {},
|
|
@@ -27,7 +27,7 @@ const te = {
|
|
|
27
27
|
xFormatter: {},
|
|
28
28
|
yFormatter: {},
|
|
29
29
|
tooltipTitleFormatter: {},
|
|
30
|
-
curveType: { default:
|
|
30
|
+
curveType: { default: Y.MonotoneX },
|
|
31
31
|
lineWidth: { default: 2 },
|
|
32
32
|
xNumTicks: {},
|
|
33
33
|
xExplicitTicks: {},
|
|
@@ -35,7 +35,7 @@ const te = {
|
|
|
35
35
|
yNumTicks: {},
|
|
36
36
|
hideLegend: { type: Boolean, default: !1 },
|
|
37
37
|
hideTooltip: { type: Boolean, default: !1 },
|
|
38
|
-
legendPosition: { default:
|
|
38
|
+
legendPosition: { default: ae.BottomCenter },
|
|
39
39
|
legendStyle: { default: void 0 },
|
|
40
40
|
xDomainLine: { type: Boolean },
|
|
41
41
|
yDomainLine: { type: Boolean },
|
|
@@ -54,163 +54,166 @@ const te = {
|
|
|
54
54
|
groupPadding: { default: 0 },
|
|
55
55
|
barPadding: { default: 0.2 },
|
|
56
56
|
radius: {},
|
|
57
|
-
orientation: { default:
|
|
57
|
+
orientation: { default: g.Vertical },
|
|
58
58
|
duration: { default: 600 },
|
|
59
59
|
tooltip: { default: () => ({
|
|
60
60
|
followCursor: !0
|
|
61
61
|
}) }
|
|
62
62
|
},
|
|
63
63
|
emits: ["click"],
|
|
64
|
-
setup(e, { emit:
|
|
65
|
-
const
|
|
64
|
+
setup(e, { emit: V }) {
|
|
65
|
+
const D = V, t = e, F = z(), m = H("slotWrapper"), s = X();
|
|
66
66
|
if (!t.barYAxis || t.barYAxis.length === 0)
|
|
67
67
|
throw console.error("[DualChart] barYAxis prop is required and must contain at least one field key"), new Error("DualChart: 'barYAxis' is required and must contain at least one field key. Provide an array of property keys from your data type (e.g., ['revenue', 'costs'])");
|
|
68
68
|
if (!t.lineYAxis || t.lineYAxis.length === 0)
|
|
69
69
|
throw console.error("[DualChart] lineYAxis prop is required and must contain at least one field key"), new Error("DualChart: 'lineYAxis' is required and must contain at least one field key. Provide an array of property keys from your data type (e.g., ['profit', 'target'])");
|
|
70
|
-
const
|
|
71
|
-
var
|
|
72
|
-
return (
|
|
73
|
-
},
|
|
70
|
+
const v = y(() => t.barYAxis.map((a) => (d) => d[a])), M = y(() => t.lineYAxis.map((a) => (d) => d[a])), C = (a, d) => {
|
|
71
|
+
var n;
|
|
72
|
+
return (n = Object.values(t.barCategories)[d]) == null ? void 0 : n.color;
|
|
73
|
+
}, b = y(() => ({
|
|
74
74
|
...t.barCategories,
|
|
75
75
|
...t.lineCategories
|
|
76
|
-
})),
|
|
77
|
-
function
|
|
78
|
-
|
|
76
|
+
})), O = y(() => t.legendPosition.startsWith("top")), S = y(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
|
|
77
|
+
function T(a) {
|
|
78
|
+
s.value = a;
|
|
79
79
|
}
|
|
80
|
-
function
|
|
81
|
-
return typeof window > "u" ? "" :
|
|
80
|
+
function N(a) {
|
|
81
|
+
return typeof window > "u" ? "" : m.value ? m.value.innerHTML : "";
|
|
82
82
|
}
|
|
83
|
-
function
|
|
84
|
-
return
|
|
83
|
+
function W(a) {
|
|
84
|
+
return s.value = a, N();
|
|
85
85
|
}
|
|
86
|
-
return (
|
|
87
|
-
style:
|
|
86
|
+
return (a, d) => (r(), f("div", {
|
|
87
|
+
style: x({
|
|
88
88
|
display: "flex",
|
|
89
|
-
flexDirection:
|
|
89
|
+
flexDirection: O.value ? "column-reverse" : "column",
|
|
90
90
|
gap: "var(--vis-legend-spacing)"
|
|
91
91
|
}),
|
|
92
|
-
onClick:
|
|
92
|
+
onClick: d[0] || (d[0] = (n) => D("click", n, s.value))
|
|
93
93
|
}, [
|
|
94
|
-
|
|
94
|
+
k(i(J), {
|
|
95
95
|
padding: e.padding,
|
|
96
96
|
height: e.height,
|
|
97
97
|
duration: e.duration,
|
|
98
98
|
data: e.data
|
|
99
99
|
}, {
|
|
100
|
-
default:
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
100
|
+
default: j(() => {
|
|
101
|
+
var n, A, p;
|
|
102
|
+
return [
|
|
103
|
+
e.hideTooltip ? c("", !0) : (r(), u(i(K), {
|
|
104
|
+
key: 0,
|
|
105
|
+
followCursor: (n = t.tooltip) == null ? void 0 : n.followCursor,
|
|
106
|
+
"show-delay": (A = t.tooltip) == null ? void 0 : A.showDelay,
|
|
107
|
+
"hide-delay": (p = t.tooltip) == null ? void 0 : p.hideDelay,
|
|
108
|
+
triggers: {
|
|
109
|
+
[i(I).selectors.bar]: (l) => {
|
|
110
|
+
var o;
|
|
111
|
+
return T(l), l ? (o = m.value) == null ? void 0 : o.innerHTML : "";
|
|
112
|
+
},
|
|
113
|
+
[i(U).selectors.bar]: (l) => {
|
|
114
|
+
var o;
|
|
115
|
+
return T(l), l ? (o = m.value) == null ? void 0 : o.innerHTML : "";
|
|
116
|
+
}
|
|
110
117
|
},
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
"horizontal-placement": a(L).Right,
|
|
117
|
-
"vertical-placement": a(L).Top
|
|
118
|
-
}, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers", "horizontal-placement", "vertical-placement"])),
|
|
119
|
-
e.stacked ? (r(), d(a(J), {
|
|
120
|
-
key: 2,
|
|
121
|
-
data: e.data,
|
|
122
|
-
x: (i, o) => o,
|
|
123
|
-
y: h.value,
|
|
124
|
-
color: v,
|
|
125
|
-
"rounded-corners": e.radius ?? 0,
|
|
126
|
-
"group-padding": e.groupPadding ?? 0,
|
|
127
|
-
"bar-padding": e.barPadding ?? 0.2,
|
|
128
|
-
orientation: e.orientation ?? a(y).Vertical
|
|
129
|
-
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (r(), d(a(I), {
|
|
130
|
-
key: 1,
|
|
131
|
-
data: e.data,
|
|
132
|
-
x: (i, o) => o,
|
|
133
|
-
y: h.value,
|
|
134
|
-
color: v,
|
|
135
|
-
"rounded-corners": e.radius ?? 0,
|
|
136
|
-
"group-padding": e.groupPadding ?? 0,
|
|
137
|
-
"bar-padding": e.barPadding ?? 0.2,
|
|
138
|
-
orientation: e.orientation ?? a(y).Vertical
|
|
139
|
-
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
|
|
140
|
-
(r(!0), m(X, null, j(V.value, (i, o) => {
|
|
141
|
-
var T;
|
|
142
|
-
return r(), d(a(K), {
|
|
143
|
-
key: `line-${o}`,
|
|
118
|
+
"horizontal-placement": i(w).Right,
|
|
119
|
+
"vertical-placement": i(w).Top
|
|
120
|
+
}, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers", "horizontal-placement", "vertical-placement"])),
|
|
121
|
+
e.stacked ? (r(), u(i(Z), {
|
|
122
|
+
key: 2,
|
|
144
123
|
data: e.data,
|
|
145
|
-
x: (
|
|
146
|
-
y:
|
|
147
|
-
color:
|
|
148
|
-
"
|
|
149
|
-
"
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
124
|
+
x: (l, o) => o,
|
|
125
|
+
y: v.value,
|
|
126
|
+
color: C,
|
|
127
|
+
"rounded-corners": e.radius ?? 0,
|
|
128
|
+
"group-padding": e.groupPadding ?? 0,
|
|
129
|
+
"bar-padding": e.barPadding ?? 0.2,
|
|
130
|
+
orientation: e.orientation ?? i(g).Vertical
|
|
131
|
+
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (r(), u(i(Q), {
|
|
132
|
+
key: 1,
|
|
133
|
+
data: e.data,
|
|
134
|
+
x: (l, o) => o,
|
|
135
|
+
y: v.value,
|
|
136
|
+
color: C,
|
|
137
|
+
"rounded-corners": e.radius ?? 0,
|
|
138
|
+
"group-padding": e.groupPadding ?? 0,
|
|
139
|
+
"bar-padding": e.barPadding ?? 0.2,
|
|
140
|
+
orientation: e.orientation ?? i(g).Vertical
|
|
141
|
+
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
|
|
142
|
+
(r(!0), f(q, null, $(M.value, (l, o) => {
|
|
143
|
+
var L;
|
|
144
|
+
return r(), u(i(_), {
|
|
145
|
+
key: `line-${o}`,
|
|
146
|
+
data: e.data,
|
|
147
|
+
x: (oe, E) => E,
|
|
148
|
+
y: l,
|
|
149
|
+
color: (L = Object.values(t.lineCategories)[o]) == null ? void 0 : L.color,
|
|
150
|
+
"curve-type": e.curveType ?? i(Y).MonotoneX,
|
|
151
|
+
"line-width": e.lineWidth
|
|
152
|
+
}, null, 8, ["data", "x", "y", "color", "curve-type", "line-width"]);
|
|
153
|
+
}), 128)),
|
|
154
|
+
e.hideXAxis ? c("", !0) : (r(), u(i(P), h({
|
|
155
|
+
key: 3,
|
|
156
|
+
type: "x",
|
|
157
|
+
"tick-format": e.xFormatter,
|
|
158
|
+
label: e.xLabel,
|
|
159
|
+
"grid-line": e.xGridLine,
|
|
160
|
+
"domain-line": !!e.xDomainLine,
|
|
161
|
+
"tick-line": e.xTickLine,
|
|
162
|
+
"num-ticks": e.xNumTicks,
|
|
163
|
+
"tick-values": e.xExplicitTicks,
|
|
164
|
+
minMaxTicksOnly: e.minMaxTicksOnly,
|
|
165
|
+
duration: e.duration
|
|
166
|
+
}, e.xAxisConfig), null, 16, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly", "duration"])),
|
|
167
|
+
e.hideYAxis ? c("", !0) : (r(), u(i(P), h({
|
|
168
|
+
key: 4,
|
|
169
|
+
type: "y",
|
|
170
|
+
label: e.yLabel,
|
|
171
|
+
"grid-line": e.orientation !== i(g).Horizontal && e.yGridLine,
|
|
172
|
+
"domain-line": !!e.yDomainLine,
|
|
173
|
+
"tick-format": e.yFormatter,
|
|
174
|
+
"num-ticks": e.yNumTicks,
|
|
175
|
+
"tick-line": e.yTickLine,
|
|
176
|
+
duration: e.duration
|
|
177
|
+
}, e.yAxisConfig), null, 16, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line", "duration"])),
|
|
178
|
+
e.hideTooltip ? c("", !0) : (r(), u(i(ee), h({ key: 5 }, e.crosshairConfig, { template: W }), null, 16))
|
|
179
|
+
];
|
|
180
|
+
}),
|
|
178
181
|
_: 1
|
|
179
182
|
}, 8, ["padding", "height", "duration", "data"]),
|
|
180
|
-
t.hideLegend ?
|
|
183
|
+
t.hideLegend ? c("", !0) : (r(), f("div", {
|
|
181
184
|
key: 0,
|
|
182
|
-
style:
|
|
185
|
+
style: x({
|
|
183
186
|
display: "flex",
|
|
184
|
-
justifyContent:
|
|
187
|
+
justifyContent: S.value
|
|
185
188
|
})
|
|
186
189
|
}, [
|
|
187
|
-
|
|
188
|
-
style:
|
|
190
|
+
k(i(te), {
|
|
191
|
+
style: x([
|
|
189
192
|
t.legendStyle,
|
|
190
193
|
"display: flex; gap: var(--vis-legend-spacing);"
|
|
191
194
|
]),
|
|
192
|
-
items: Object.values(
|
|
193
|
-
...
|
|
194
|
-
color: Array.isArray(
|
|
195
|
+
items: Object.values(b.value).map((n) => ({
|
|
196
|
+
...n,
|
|
197
|
+
color: Array.isArray(n.color) ? n.color[0] : n.color
|
|
195
198
|
}))
|
|
196
199
|
}, null, 8, ["style", "items"])
|
|
197
200
|
], 4)),
|
|
198
|
-
|
|
199
|
-
|
|
201
|
+
R("div", ne, [
|
|
202
|
+
i(F).tooltip ? B(a.$slots, "tooltip", {
|
|
200
203
|
key: 0,
|
|
201
|
-
values:
|
|
202
|
-
}) :
|
|
203
|
-
|
|
204
|
-
data:
|
|
205
|
-
categories:
|
|
204
|
+
values: s.value
|
|
205
|
+
}) : s.value ? B(a.$slots, "fallback", { key: 1 }, () => [
|
|
206
|
+
k(ie, {
|
|
207
|
+
data: s.value,
|
|
208
|
+
categories: b.value,
|
|
206
209
|
"title-formatter": t.tooltipTitleFormatter,
|
|
207
|
-
yFormatter: t.orientation ===
|
|
210
|
+
yFormatter: t.orientation === i(g).Horizontal ? t.xFormatter : t.yFormatter
|
|
208
211
|
}, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
|
|
209
|
-
]) :
|
|
212
|
+
]) : c("", !0)
|
|
210
213
|
], 512)
|
|
211
214
|
], 4));
|
|
212
215
|
}
|
|
213
216
|
});
|
|
214
217
|
export {
|
|
215
|
-
|
|
218
|
+
ce as default
|
|
216
219
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { axisFormatter, CrosshairConfig,
|
|
1
|
+
import { axisFormatter, CrosshairConfig, AxisConfig, BulletLegendItemInterface, TooltipConfig, LegendPosition, Orientation } from '../../../../shared/dist/index.d.ts';
|
|
2
2
|
import { CurveType } from '@unovis/ts';
|
|
3
3
|
export interface DualChartProps<T> {
|
|
4
4
|
/**
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as W, useSlots as B, useTemplateRef as V, ref as A, computed as d,
|
|
1
|
+
import { defineComponent as W, useSlots as B, useTemplateRef as V, ref as A, computed as d, openBlock as c, createElementBlock as p, normalizeStyle as u, createVNode as n, unref as i, withCtx as F, createBlock as H, createCommentVNode as g, mergeProps as P, createElementVNode as S, renderSlot as y } from "vue";
|
|
2
2
|
import { Timeline as x } from "@unovis/ts";
|
|
3
3
|
import { dateFormatter as D } from "../../utils.js";
|
|
4
4
|
import N from "../Tooltip.js";
|
|
5
5
|
import { VisXYContainer as j, VisTimeline as O, VisTooltip as $, VisAxis as G, VisBulletLegend as M } from "@unovis/vue";
|
|
6
|
-
import { LegendPosition as E } from "../../
|
|
6
|
+
import { LegendPosition as E } from "../../packages/shared/dist/index.js";
|
|
7
7
|
const J = /* @__PURE__ */ W({
|
|
8
8
|
__name: "GanttChart",
|
|
9
9
|
props: {
|
|
@@ -73,7 +73,7 @@ const J = /* @__PURE__ */ W({
|
|
|
73
73
|
duration: l.duration,
|
|
74
74
|
onWheel: L
|
|
75
75
|
}, {
|
|
76
|
-
default:
|
|
76
|
+
default: F(() => [
|
|
77
77
|
n(i(O), {
|
|
78
78
|
x: e.x,
|
|
79
79
|
length: e.length,
|
|
@@ -85,7 +85,7 @@ const J = /* @__PURE__ */ W({
|
|
|
85
85
|
showLabels: e.showLabels,
|
|
86
86
|
onClick: C
|
|
87
87
|
}, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
|
|
88
|
-
l.hideTooltip ? g("", !0) : (c(),
|
|
88
|
+
l.hideTooltip ? g("", !0) : (c(), H(i($), {
|
|
89
89
|
key: 0,
|
|
90
90
|
followCursor: e.tooltip.followCursor,
|
|
91
91
|
"show-delay": e.tooltip.showDelay,
|
|
@@ -97,7 +97,7 @@ const J = /* @__PURE__ */ W({
|
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
}, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
|
|
100
|
-
n(i(G),
|
|
100
|
+
n(i(G), P({
|
|
101
101
|
type: "x",
|
|
102
102
|
tickFormat: l.xTickFormat || i(D),
|
|
103
103
|
numTicks: l.xNumTicks,
|
|
@@ -127,7 +127,7 @@ const J = /* @__PURE__ */ W({
|
|
|
127
127
|
}))
|
|
128
128
|
}, null, 8, ["style", "items"])
|
|
129
129
|
], 4)),
|
|
130
|
-
|
|
130
|
+
S("div", {
|
|
131
131
|
ref_key: "slotWrapper",
|
|
132
132
|
ref: m,
|
|
133
133
|
style: { display: "none" }
|
|
@@ -1,124 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export interface GanttChartProps<T> {
|
|
3
|
-
/**
|
|
4
|
-
* The data to be displayed in the timeline chart.
|
|
5
|
-
* Each element of the array represents a timeline event or item.
|
|
6
|
-
* The structure of 'T' should be compatible with the chart's rendering logic.
|
|
7
|
-
*/
|
|
8
|
-
data: T[];
|
|
9
|
-
/**
|
|
10
|
-
* The width of the label area in pixels.
|
|
11
|
-
* Default: 220
|
|
12
|
-
*/
|
|
13
|
-
labelWidth?: number;
|
|
14
|
-
/**
|
|
15
|
-
* The height of the chart in pixels.
|
|
16
|
-
*/
|
|
17
|
-
height?: number;
|
|
18
|
-
/**
|
|
19
|
-
* Optional title for the timeline chart.
|
|
20
|
-
*/
|
|
21
|
-
title?: string;
|
|
22
|
-
/**
|
|
23
|
-
* A record mapping category keys to `BulletLegendItemInterface` objects.
|
|
24
|
-
* This defines the visual representation and labels for each category in the chart's legend.
|
|
25
|
-
*/
|
|
26
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
27
|
-
/**
|
|
28
|
-
* Accessor function that returns the x-position (start time/value) for each timeline item.
|
|
29
|
-
* @param {T} d - The data item.
|
|
30
|
-
* @returns {number} The x-position value.
|
|
31
|
-
*/
|
|
32
|
-
x: (d: T) => number;
|
|
33
|
-
/**
|
|
34
|
-
* Accessor function that returns the length (duration) for each timeline item.
|
|
35
|
-
* @param {T} d - The data item.
|
|
36
|
-
* @returns {number} The length/duration value.
|
|
37
|
-
*/
|
|
38
|
-
length: (d: T) => number;
|
|
39
|
-
/**
|
|
40
|
-
* Accessor function that returns the type/category for each timeline item.
|
|
41
|
-
* This determines the color and style of the timeline bar.
|
|
42
|
-
* @param {T} d - The data item.
|
|
43
|
-
* @returns {string} The type/category identifier.
|
|
44
|
-
*/
|
|
45
|
-
type: (d: T) => string;
|
|
46
|
-
/**
|
|
47
|
-
* Use custom formatter for tooltip titles
|
|
48
|
-
*/
|
|
49
|
-
tooltipTitleFormatter?: (data: T) => string | number;
|
|
50
|
-
/**
|
|
51
|
-
* Optional custom tooltip text generator function.
|
|
52
|
-
* @param {string} label - The label of the item.
|
|
53
|
-
* @param {number} index - The index of the item in the data array.
|
|
54
|
-
* @param {T[]} data - The full data array.
|
|
55
|
-
* @returns {string} The formatted tooltip text.
|
|
56
|
-
*/
|
|
57
|
-
getTooltipText?: (label: string, index: number, data: T[]) => string;
|
|
58
|
-
/**
|
|
59
|
-
* The desired number of ticks on the x-axis.
|
|
60
|
-
*/
|
|
61
|
-
xNumTicks?: number;
|
|
62
|
-
/**
|
|
63
|
-
* If `true`, displays labels for each timeline row.
|
|
64
|
-
* Default: true
|
|
65
|
-
*/
|
|
66
|
-
showLabels?: boolean;
|
|
67
|
-
/**
|
|
68
|
-
* If `true`, hides the chart tooltip.
|
|
69
|
-
*/
|
|
70
|
-
hideTooltip?: boolean;
|
|
71
|
-
/**
|
|
72
|
-
* Crosshair configuration object for customizing the appearance of the crosshair line.
|
|
73
|
-
*/
|
|
74
|
-
crosshairConfig?: CrosshairConfig;
|
|
75
|
-
/**
|
|
76
|
-
* The width of the timeline bars in pixels.
|
|
77
|
-
* Default: 12
|
|
78
|
-
*/
|
|
79
|
-
lineWidth?: number;
|
|
80
|
-
/**
|
|
81
|
-
* The height of each row in the timeline in pixels.
|
|
82
|
-
* Default: 24
|
|
83
|
-
*/
|
|
84
|
-
rowHeight?: number;
|
|
85
|
-
/**
|
|
86
|
-
* Optional position for the legend, if applicable.
|
|
87
|
-
* See `LegendPosition` for available options.
|
|
88
|
-
* Default: LegendPosition.TopRight
|
|
89
|
-
*/
|
|
90
|
-
legendPosition?: LegendPosition;
|
|
91
|
-
/**
|
|
92
|
-
* Optional style object for the legend container. Allows custom CSS styling.
|
|
93
|
-
*/
|
|
94
|
-
legendStyle?: string | Record<string, string>;
|
|
95
|
-
/**
|
|
96
|
-
* If `true`, hides the chart legend.
|
|
97
|
-
*/
|
|
98
|
-
hideLegend?: boolean;
|
|
99
|
-
/**
|
|
100
|
-
* If `true`, displays tick lines on the x-axis.
|
|
101
|
-
*/
|
|
102
|
-
xTickLine?: boolean;
|
|
103
|
-
xTickFormat?: (tick: number | Date, i?: number, ticks?: number[] | Date[]) => string;
|
|
104
|
-
xMinMaxTicksOnly?: boolean;
|
|
105
|
-
xTickValues?: number[] | Date[];
|
|
106
|
-
xGridLine?: boolean;
|
|
107
|
-
xDomainLine?: boolean;
|
|
108
|
-
/**
|
|
109
|
-
* Axis configuration object for customizing the appearance of the axes.
|
|
110
|
-
*/
|
|
111
|
-
xAxisConfig?: AxisConfig;
|
|
112
|
-
/**
|
|
113
|
-
* Axis configuration object for customizing the appearance of the axes.
|
|
114
|
-
*/
|
|
115
|
-
yAxisConfig?: AxisConfig;
|
|
116
|
-
/**
|
|
117
|
-
* Animation duration in milliseconds for the chart components.
|
|
118
|
-
*/
|
|
119
|
-
duration?: number;
|
|
120
|
-
/**
|
|
121
|
-
* Configuration object for the chart tooltip.
|
|
122
|
-
*/
|
|
123
|
-
tooltip?: TooltipConfig;
|
|
124
|
-
}
|
|
1
|
+
export type { GanttChartProps } from '../../../../shared/dist/index.d.ts';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as n, useSlots as a, openBlock as r, createBlock as l, mergeProps as p, createSlots as s, withCtx as y, renderSlot as c, normalizeProps as m, guardReactiveProps as d } from "vue";
|
|
2
|
+
import x from "../AreaChart/AreaChart.js";
|
|
3
|
+
const g = /* @__PURE__ */ n({
|
|
4
4
|
__name: "LineChart",
|
|
5
5
|
props: {
|
|
6
6
|
data: {},
|
|
@@ -19,11 +19,6 @@ const T = /* @__PURE__ */ t({
|
|
|
19
19
|
xNumTicks: {},
|
|
20
20
|
xExplicitTicks: {},
|
|
21
21
|
minMaxTicksOnly: { type: Boolean },
|
|
22
|
-
xMinMaxTicksOnly: { type: Boolean },
|
|
23
|
-
yMinMaxTicksOnly: { type: Boolean },
|
|
24
|
-
minMaxTicksOnlyShowGridLines: { type: Boolean },
|
|
25
|
-
xMinMaxTicksOnlyShowGridLines: { type: Boolean },
|
|
26
|
-
yMinMaxTicksOnlyShowGridLines: { type: Boolean },
|
|
27
22
|
yNumTicks: {},
|
|
28
23
|
yExplicitTicks: {},
|
|
29
24
|
hideLegend: { type: Boolean },
|
|
@@ -49,11 +44,11 @@ const T = /* @__PURE__ */ t({
|
|
|
49
44
|
},
|
|
50
45
|
setup(o) {
|
|
51
46
|
const i = o;
|
|
52
|
-
return a(), (e,
|
|
47
|
+
return a(), (e, u) => (r(), l(x, p(i, { "hide-area": !0 }), s({ _: 2 }, [
|
|
53
48
|
e.$slots.tooltip ? {
|
|
54
49
|
name: "tooltip",
|
|
55
|
-
fn: y((
|
|
56
|
-
c(e.$slots, "tooltip", d(
|
|
50
|
+
fn: y((t) => [
|
|
51
|
+
c(e.$slots, "tooltip", m(d(t)))
|
|
57
52
|
]),
|
|
58
53
|
key: "0"
|
|
59
54
|
} : void 0
|
|
@@ -61,5 +56,5 @@ const T = /* @__PURE__ */ t({
|
|
|
61
56
|
}
|
|
62
57
|
});
|
|
63
58
|
export {
|
|
64
|
-
|
|
59
|
+
g as default
|
|
65
60
|
};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export type LineChartProps<T> = Omit<AreaChartProps<T>, "hideArea" | "gradientStops">;
|
|
1
|
+
export type { LineChartProps } from '../../../../shared/dist/index.d.ts';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as x, ref as W, computed as d, watch as M,
|
|
1
|
+
import { defineComponent as x, ref as W, computed as d, watch as M, openBlock as Z, createElementBlock as H, normalizeStyle as f, createElementVNode as v, withModifiers as $, unref as a, createVNode as I, mergeProps as _, renderSlot as k } from "vue";
|
|
2
2
|
import { REGIONS as B, COUNTRIES as E, DEFAULT_ZOOM as D } from "./regions.js";
|
|
3
3
|
import { USA_PINS as V, WORLD_PINS as L } from "./pins.js";
|
|
4
4
|
import { useMapPanZoom as R } from "./useMapPanZoom.js";
|
|
@@ -103,7 +103,7 @@ const j = { class: "absolute bottom-4 right-4 flex flex-col gap-2" }, J = /* @__
|
|
|
103
103
|
zoomIn: z,
|
|
104
104
|
zoomOut: P,
|
|
105
105
|
resetView: () => p(o.value.defaultZoom)
|
|
106
|
-
}), (i, t) => (
|
|
106
|
+
}), (i, t) => (Z(), H("div", {
|
|
107
107
|
class: "w-full h-full overflow-hidden relative",
|
|
108
108
|
style: f({
|
|
109
109
|
width: "100%",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as Y, computed as u,
|
|
1
|
+
import { defineComponent as Y, computed as u, openBlock as q, createElementBlock as F, normalizeStyle as L, renderSlot as T, createElementVNode as J } from "vue";
|
|
2
2
|
import { getMap as R, getPin as V } from "./mapUtils.js";
|
|
3
3
|
import D from "../../../data/countries.geo.json.js";
|
|
4
4
|
const G = ["innerHTML"], Z = /* @__PURE__ */ Y({
|
|
@@ -94,7 +94,7 @@ const G = ["innerHTML"], Z = /* @__PURE__ */ Y({
|
|
|
94
94
|
O("point-click", n, l);
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
|
-
return (n, e) => (
|
|
97
|
+
return (n, e) => (q(), F("div", {
|
|
98
98
|
class: "dotted-world-map-container",
|
|
99
99
|
style: L({
|
|
100
100
|
backgroundColor: p.backgroundColor,
|