x-next 1.7.0 → 1.8.1
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/AI_USAGE.md +129 -4
- package/CHANGELOG.md +47 -0
- package/dist/_hooks/use-chart-size.d.ts +25 -0
- package/dist/_utils/chart/index.d.ts +6 -0
- package/dist/_utils/chart/padding.d.ts +15 -0
- package/dist/_utils/chart/path.d.ts +34 -0
- package/dist/_utils/chart/scale.d.ts +55 -0
- package/dist/components/_components/chart/ChartAxis.d.ts +85 -0
- package/dist/components/_components/chart/ChartLegend.d.ts +26 -0
- package/dist/components/_components/chart/ChartTooltip.d.ts +76 -0
- package/dist/components/_components/chart/colors.d.ts +10 -0
- package/dist/components/_components/chart/interface.d.ts +38 -0
- package/dist/components/bar-chart/BarChart.d.ts +278 -0
- package/dist/components/bar-chart/helpers/layout.d.ts +55 -0
- package/dist/components/bar-chart/index.d.ts +600 -0
- package/dist/components/bar-chart/interface.d.ts +74 -0
- package/dist/components/bar-chart/props.d.ts +145 -0
- package/dist/components/heatmap/Heatmap.d.ts +10 -1
- package/dist/components/heatmap/index.d.ts +30 -3
- package/dist/components/index.d.ts +3 -0
- package/dist/components/line-chart/LineChart.d.ts +295 -0
- package/dist/components/line-chart/helpers/layout.d.ts +74 -0
- package/dist/components/line-chart/index.d.ts +614 -0
- package/dist/components/line-chart/interface.d.ts +76 -0
- package/dist/components/line-chart/props.d.ts +173 -0
- package/dist/components/pie-chart/PieChart.d.ts +219 -0
- package/dist/components/pie-chart/index.d.ts +470 -0
- package/dist/components/pie-chart/interface.d.ts +58 -0
- package/dist/components/pie-chart/props.d.ts +107 -0
- package/dist/components/trend-chart/components/TrendChart.d.ts +19 -96
- package/dist/components/trend-chart/index.d.ts +33 -187
- package/dist/components/trend-chart/props.d.ts +9 -78
- package/dist/components/trend-chart/themes.d.ts +0 -1
- package/dist/es/_hooks/use-chart-size.js +25 -0
- package/dist/es/_styles/palette-aliases.js +5 -0
- package/dist/es/_utils/chart/padding.js +22 -0
- package/dist/es/_utils/chart/path.js +69 -0
- package/dist/es/_utils/chart/scale.js +77 -0
- package/dist/es/components/_components/chart/ChartAxis.js +79 -0
- package/dist/es/components/_components/chart/ChartLegend.js +53 -0
- package/dist/es/components/_components/chart/ChartTooltip.js +64 -0
- package/dist/es/components/_components/chart/colors.js +12 -0
- package/dist/es/components/bar-chart/BarChart.js +470 -0
- package/dist/es/components/bar-chart/helpers/layout.js +53 -0
- package/dist/es/components/bar-chart/index.js +8 -0
- package/dist/es/components/bar-chart/props.js +148 -0
- package/dist/es/components/heatmap/Heatmap.js +249 -172
- package/dist/es/components/index.js +132 -126
- package/dist/es/components/line-chart/LineChart.js +532 -0
- package/dist/es/components/line-chart/helpers/layout.js +80 -0
- package/dist/es/components/line-chart/index.js +8 -0
- package/dist/es/components/line-chart/props.js +178 -0
- package/dist/es/components/pie-chart/PieChart.js +397 -0
- package/dist/es/components/pie-chart/index.js +8 -0
- package/dist/es/components/pie-chart/props.js +104 -0
- package/dist/es/components/trend-chart/components/TrendChart.js +143 -183
- package/dist/es/components/trend-chart/components/trend-chart-curve.js +85 -81
- package/dist/es/components/trend-chart/props.js +28 -74
- package/dist/es/components/trend-chart/themes.js +30 -31
- package/dist/es/index.js +193 -187
- package/dist/es/locale/en-US.js +8 -1
- package/dist/es/locale/zh-CN.js +8 -1
- package/dist/es/style.css +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.umd.js +4 -4
- package/dist/locale/interface.d.ts +13 -0
- package/dist/style/bar-chart.css +1 -0
- package/dist/style/bar-chart.js +2 -0
- package/dist/style/base.css +1 -1
- package/dist/style/heatmap.css +1 -1
- package/dist/style/line-chart.css +1 -0
- package/dist/style/line-chart.js +2 -0
- package/dist/style/pie-chart.css +1 -0
- package/dist/style/pie-chart.js +2 -0
- package/dist/style.css +1 -1
- package/dist/types.d.ts +3 -0
- package/package.json +1 -1
- package/volar.d.ts +3 -0
- package/dist/components/trend-chart/components/trend-chart-grid.d.ts +0 -55
- package/dist/components/trend-chart/components/trend-chart-labels.d.ts +0 -26
- package/dist/components/trend-chart/helpers/genPath.d.ts +0 -8
- package/dist/components/trend-chart/helpers/getPadding.d.ts +0 -8
- package/dist/components/trend-chart/helpers/validatePadding.d.ts +0 -2
- package/dist/es/components/trend-chart/components/trend-chart-grid.js +0 -62
- package/dist/es/components/trend-chart/components/trend-chart-labels.js +0 -75
- package/dist/es/components/trend-chart/helpers/genPath.js +0 -22
- package/dist/es/components/trend-chart/helpers/getPadding.js +0 -21
- package/dist/es/components/trend-chart/helpers/validatePadding.js +0 -7
package/dist/types.d.ts
CHANGED
|
@@ -89,6 +89,9 @@ declare module 'vue' {
|
|
|
89
89
|
XColorPicker: (typeof import('x-next'))['ColorPicker'];
|
|
90
90
|
XHeatmap: (typeof import('x-next'))['Heatmap'];
|
|
91
91
|
XUpload: (typeof import('x-next'))['Upload'];
|
|
92
|
+
XBarChart: (typeof import('x-next'))['BarChart'];
|
|
93
|
+
XLineChart: (typeof import('x-next'))['LineChart'];
|
|
94
|
+
XPieChart: (typeof import('x-next'))['PieChart'];
|
|
92
95
|
}
|
|
93
96
|
}
|
|
94
97
|
export {};
|
package/package.json
CHANGED
package/volar.d.ts
CHANGED
|
@@ -90,6 +90,9 @@ declare module 'vue' {
|
|
|
90
90
|
XColorPicker: (typeof import('x-next'))['ColorPicker']
|
|
91
91
|
XHeatmap: (typeof import('x-next'))['Heatmap']
|
|
92
92
|
XUpload: (typeof import('x-next'))['Upload']
|
|
93
|
+
XBarChart: (typeof import('x-next'))['BarChart']
|
|
94
|
+
XLineChart: (typeof import('x-next'))['LineChart']
|
|
95
|
+
XPieChart: (typeof import('x-next'))['PieChart']
|
|
93
96
|
}
|
|
94
97
|
}
|
|
95
98
|
export {}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { VNode } from 'vue';
|
|
2
|
-
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
3
|
-
boundary: {
|
|
4
|
-
required: boolean;
|
|
5
|
-
type: import('vue').PropType<import('../props').Boundary>;
|
|
6
|
-
default: () => void;
|
|
7
|
-
};
|
|
8
|
-
verticalLines: {
|
|
9
|
-
default: boolean;
|
|
10
|
-
type: BooleanConstructor;
|
|
11
|
-
};
|
|
12
|
-
verticalLinesNumber: {
|
|
13
|
-
default: number;
|
|
14
|
-
type: NumberConstructor;
|
|
15
|
-
};
|
|
16
|
-
horizontalLines: {
|
|
17
|
-
default: boolean;
|
|
18
|
-
type: BooleanConstructor;
|
|
19
|
-
};
|
|
20
|
-
horizontalLinesNumber: {
|
|
21
|
-
default: number;
|
|
22
|
-
type: NumberConstructor;
|
|
23
|
-
};
|
|
24
|
-
}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
25
|
-
[key: string]: any;
|
|
26
|
-
}> | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
27
|
-
boundary: {
|
|
28
|
-
required: boolean;
|
|
29
|
-
type: import('vue').PropType<import('../props').Boundary>;
|
|
30
|
-
default: () => void;
|
|
31
|
-
};
|
|
32
|
-
verticalLines: {
|
|
33
|
-
default: boolean;
|
|
34
|
-
type: BooleanConstructor;
|
|
35
|
-
};
|
|
36
|
-
verticalLinesNumber: {
|
|
37
|
-
default: number;
|
|
38
|
-
type: NumberConstructor;
|
|
39
|
-
};
|
|
40
|
-
horizontalLines: {
|
|
41
|
-
default: boolean;
|
|
42
|
-
type: BooleanConstructor;
|
|
43
|
-
};
|
|
44
|
-
horizontalLinesNumber: {
|
|
45
|
-
default: number;
|
|
46
|
-
type: NumberConstructor;
|
|
47
|
-
};
|
|
48
|
-
}>> & Readonly<{}>, {
|
|
49
|
-
boundary: import('../props').Boundary;
|
|
50
|
-
verticalLines: boolean;
|
|
51
|
-
verticalLinesNumber: number;
|
|
52
|
-
horizontalLines: boolean;
|
|
53
|
-
horizontalLinesNumber: number;
|
|
54
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
55
|
-
export default _default;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { VNode } from 'vue';
|
|
2
|
-
declare const _default: import('vue').DefineComponent<{
|
|
3
|
-
boundary: import('../props').Boundary;
|
|
4
|
-
yLabelsTextFormatter: Function;
|
|
5
|
-
color?: import('../../../_props/css').CSSColor | undefined;
|
|
6
|
-
fontSize?: number | undefined;
|
|
7
|
-
minValue?: number | undefined;
|
|
8
|
-
maxValue?: number | undefined;
|
|
9
|
-
xLabels?: unknown[] | undefined;
|
|
10
|
-
yLabels?: number | undefined;
|
|
11
|
-
}, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
12
|
-
[key: string]: any;
|
|
13
|
-
}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
|
|
14
|
-
boundary: import('../props').Boundary;
|
|
15
|
-
yLabelsTextFormatter: Function;
|
|
16
|
-
color?: import('../../../_props/css').CSSColor | undefined;
|
|
17
|
-
fontSize?: number | undefined;
|
|
18
|
-
minValue?: number | undefined;
|
|
19
|
-
maxValue?: number | undefined;
|
|
20
|
-
xLabels?: unknown[] | undefined;
|
|
21
|
-
yLabels?: number | undefined;
|
|
22
|
-
}> & Readonly<{}>, {
|
|
23
|
-
boundary: import('../props').Boundary;
|
|
24
|
-
yLabelsTextFormatter: Function;
|
|
25
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
26
|
-
export default _default;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { defineComponent as b, computed as u, h as i } from "vue";
|
|
2
|
-
import { getComponentPrefix as h } from "../../../_utils/config.js";
|
|
3
|
-
import { trendChartGridProps as y } from "../props.js";
|
|
4
|
-
import { TrendChartAxisColor as m } from "../themes.js";
|
|
5
|
-
const N = b({
|
|
6
|
-
name: h("TrendChartGrid"),
|
|
7
|
-
props: y,
|
|
8
|
-
setup(n) {
|
|
9
|
-
const c = (e) => {
|
|
10
|
-
const t = n.verticalLinesNumber > 1 ? (n.boundary.maxX - n.boundary.minX) / (n.verticalLinesNumber - 1) : 0, r = n.boundary.minX + t * (e - 1), a = n.boundary.minY, o = n.boundary.maxY;
|
|
11
|
-
return {
|
|
12
|
-
x1: r,
|
|
13
|
-
x2: r,
|
|
14
|
-
y1: a,
|
|
15
|
-
y2: o,
|
|
16
|
-
style: { stroke: m }
|
|
17
|
-
};
|
|
18
|
-
}, d = (e) => {
|
|
19
|
-
const t = n.horizontalLinesNumber > 1 ? (n.boundary.maxY - n.boundary.minY) / (n.horizontalLinesNumber - 1) : 0, r = n.boundary.maxY - t * (e - 1), a = n.boundary.minX, o = n.boundary.maxX;
|
|
20
|
-
return {
|
|
21
|
-
x1: a,
|
|
22
|
-
x2: o,
|
|
23
|
-
y1: r,
|
|
24
|
-
y2: r,
|
|
25
|
-
style: { stroke: m }
|
|
26
|
-
};
|
|
27
|
-
}, l = u(() => {
|
|
28
|
-
if (n.verticalLines && n.verticalLinesNumber > 0) {
|
|
29
|
-
const e = [];
|
|
30
|
-
for (let t = 1; t <= n.verticalLinesNumber; t++)
|
|
31
|
-
e.push(
|
|
32
|
-
i("line", {
|
|
33
|
-
class: "line",
|
|
34
|
-
...c(t)
|
|
35
|
-
})
|
|
36
|
-
);
|
|
37
|
-
return i("g", { class: "vertical" }, e);
|
|
38
|
-
}
|
|
39
|
-
return null;
|
|
40
|
-
}), s = u(() => {
|
|
41
|
-
if (n.horizontalLines && n.horizontalLinesNumber > 0) {
|
|
42
|
-
const e = [];
|
|
43
|
-
for (let t = 1; t <= n.horizontalLinesNumber; t++)
|
|
44
|
-
e.push(
|
|
45
|
-
i("line", {
|
|
46
|
-
class: "line",
|
|
47
|
-
...d(t)
|
|
48
|
-
})
|
|
49
|
-
);
|
|
50
|
-
return i("g", { class: "horizontal" }, e);
|
|
51
|
-
}
|
|
52
|
-
return null;
|
|
53
|
-
});
|
|
54
|
-
return () => {
|
|
55
|
-
const e = [];
|
|
56
|
-
return l.value && e.push(l.value), s.value && e.push(s.value), e.length === 0 ? null : i("g", null, e);
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
export {
|
|
61
|
-
N as default
|
|
62
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { defineComponent as h, computed as l, h as t } from "vue";
|
|
2
|
-
import { getComponentPrefix as v } from "../../../_utils/config.js";
|
|
3
|
-
import { trendChartLabelsProps as Y } from "../props.js";
|
|
4
|
-
import { TrendChartAxisColor as d } from "../themes.js";
|
|
5
|
-
const S = h({
|
|
6
|
-
name: v("TrendChartLabels"),
|
|
7
|
-
props: Y,
|
|
8
|
-
setup(e) {
|
|
9
|
-
const u = l(() => {
|
|
10
|
-
if (e.fontSize)
|
|
11
|
-
return e.fontSize;
|
|
12
|
-
const a = e.boundary.maxY - e.boundary.minY;
|
|
13
|
-
return a >= 100 ? 12 : a >= 60 ? 11 : 10;
|
|
14
|
-
}), c = l(() => e.color ?? "var(--x-color-text-secondary)"), b = l(() => ({
|
|
15
|
-
fill: c.value,
|
|
16
|
-
fontSize: `${u.value}px`
|
|
17
|
-
})), x = (a) => {
|
|
18
|
-
var y;
|
|
19
|
-
const n = ((y = e.xLabels) == null ? void 0 : y.length) ?? 0, r = n > 1 ? (e.boundary.maxX - e.boundary.minX) / (n - 1) : 0, o = n > 1 ? e.boundary.minX + r * a : e.boundary.minX + (e.boundary.maxX - e.boundary.minX) / 2, s = e.boundary.maxY;
|
|
20
|
-
return { transform: `translate(${o}, ${s})` };
|
|
21
|
-
}, f = (a) => {
|
|
22
|
-
const n = e.yLabels ?? 0, r = n > 1 ? (e.boundary.maxY - e.boundary.minY) / (n - 1) : 0, o = e.boundary.minX, s = n > 1 ? e.boundary.maxY - r * a : e.boundary.minY + (e.boundary.maxY - e.boundary.minY) / 2;
|
|
23
|
-
return { transform: `translate(${o}, ${s})` };
|
|
24
|
-
}, L = (a) => {
|
|
25
|
-
const n = e.yLabels ?? 0;
|
|
26
|
-
return n <= 1 ? e.minValue : e.minValue + (e.maxValue - e.minValue) / (n - 1) * a;
|
|
27
|
-
}, m = l(() => e.xLabels && e.xLabels.length ? t(
|
|
28
|
-
"g",
|
|
29
|
-
{ class: "x-labels" },
|
|
30
|
-
e.xLabels.map(
|
|
31
|
-
(a, n) => t("g", { class: "label", ...x(n) }, [
|
|
32
|
-
t(
|
|
33
|
-
"text",
|
|
34
|
-
{
|
|
35
|
-
dy: u.value + 5,
|
|
36
|
-
"text-anchor": "middle",
|
|
37
|
-
style: b.value
|
|
38
|
-
},
|
|
39
|
-
a
|
|
40
|
-
),
|
|
41
|
-
t("line", { style: { stroke: d }, y2: 5 })
|
|
42
|
-
])
|
|
43
|
-
)
|
|
44
|
-
) : null), i = l(() => {
|
|
45
|
-
if (e.yLabels && e.yLabels > 0) {
|
|
46
|
-
const a = [];
|
|
47
|
-
for (let n = 0; n < e.yLabels; n++)
|
|
48
|
-
a.push(
|
|
49
|
-
t("g", { class: "label", ...f(n) }, [
|
|
50
|
-
t(
|
|
51
|
-
"text",
|
|
52
|
-
{
|
|
53
|
-
dx: -10,
|
|
54
|
-
dy: u.value / 4,
|
|
55
|
-
"text-anchor": "end",
|
|
56
|
-
style: b.value
|
|
57
|
-
},
|
|
58
|
-
e.yLabelsTextFormatter(L(n))
|
|
59
|
-
),
|
|
60
|
-
t("line", { style: { stroke: d }, x1: 0, x2: -5 })
|
|
61
|
-
])
|
|
62
|
-
);
|
|
63
|
-
return t("g", { class: "y-labels" }, a);
|
|
64
|
-
}
|
|
65
|
-
return null;
|
|
66
|
-
});
|
|
67
|
-
return () => {
|
|
68
|
-
const a = [];
|
|
69
|
-
return m.value && a.push(m.value), i.value && a.push(i.value), t("g", a);
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
export {
|
|
74
|
-
S as default
|
|
75
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
const P = (e, n, { maxY: $ }) => {
|
|
2
|
-
if (!e.length)
|
|
3
|
-
return { linePath: "", fillPath: "" };
|
|
4
|
-
if (e.length === 1) {
|
|
5
|
-
const [t] = e;
|
|
6
|
-
return { linePath: `M ${t.x},${t.y}`, fillPath: "" };
|
|
7
|
-
}
|
|
8
|
-
const l = e.shift(), a = e[e.length - 1], c = (e[0].x - l.x) / 2;
|
|
9
|
-
let h = `M ${l.x},${l.y}`;
|
|
10
|
-
e.forEach((t, x) => {
|
|
11
|
-
if (!n) h += ` L${t.x},${t.y}`;
|
|
12
|
-
else {
|
|
13
|
-
const r = e[x - 1] || l;
|
|
14
|
-
h += ` C ${c + r.x},${r.y} ${c + r.x},${t.y} ${t.x},${t.y}`;
|
|
15
|
-
}
|
|
16
|
-
});
|
|
17
|
-
let f = h;
|
|
18
|
-
return a.y !== $ && (f += ` L${a.x},${$}`), l.y !== $ && (f += ` L${l.x},${$}`), f += " Z", { linePath: h, fillPath: f };
|
|
19
|
-
};
|
|
20
|
-
export {
|
|
21
|
-
P as default
|
|
22
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
const l = (o) => {
|
|
2
|
-
const t = (typeof o == "number" ? `${o}` : o).split(" ").filter((r) => r !== "").map((r) => Number(r));
|
|
3
|
-
let e = {};
|
|
4
|
-
switch (t.length) {
|
|
5
|
-
case 4:
|
|
6
|
-
e = { top: t[0], right: t[1], bottom: t[2], left: t[3] };
|
|
7
|
-
break;
|
|
8
|
-
case 3:
|
|
9
|
-
e = { top: t[0], right: t[1], bottom: t[2], left: t[1] };
|
|
10
|
-
break;
|
|
11
|
-
case 2:
|
|
12
|
-
e = { top: t[0], right: t[1], bottom: t[0], left: t[1] };
|
|
13
|
-
break;
|
|
14
|
-
default:
|
|
15
|
-
e = { top: t[0], right: t[0], bottom: t[0], left: t[0] };
|
|
16
|
-
}
|
|
17
|
-
return e;
|
|
18
|
-
};
|
|
19
|
-
export {
|
|
20
|
-
l as default
|
|
21
|
-
};
|