omui-lib 1.0.20 → 1.0.22
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,121 @@
|
|
|
1
|
+
// src/components/LineChartCard/LineChartCard.jsx
|
|
2
|
+
import React from "react";
|
|
3
|
+
var LineChartCard = ({
|
|
4
|
+
title = "Revenue Overview",
|
|
5
|
+
data = [
|
|
6
|
+
{ label: "Jan", value: 1200 },
|
|
7
|
+
{ label: "Feb", value: 1800 },
|
|
8
|
+
{ label: "Mar", value: 1500 },
|
|
9
|
+
{ label: "Apr", value: 2400 },
|
|
10
|
+
{ label: "May", value: 2800 },
|
|
11
|
+
{ label: "Jun", value: 3200 }
|
|
12
|
+
],
|
|
13
|
+
color = "#6366f1"
|
|
14
|
+
}) => {
|
|
15
|
+
const maxValue = Math.max(...data.map((item) => item.value));
|
|
16
|
+
const points = data.map((item, index) => {
|
|
17
|
+
const x = index / (data.length - 1) * 100;
|
|
18
|
+
const y = 100 - item.value / maxValue * 80;
|
|
19
|
+
return `${x},${y}`;
|
|
20
|
+
}).join(" ");
|
|
21
|
+
return /* @__PURE__ */ React.createElement(
|
|
22
|
+
"div",
|
|
23
|
+
{
|
|
24
|
+
style: {
|
|
25
|
+
width: "500px",
|
|
26
|
+
padding: "24px",
|
|
27
|
+
borderRadius: "20px",
|
|
28
|
+
background: "rgba(255,255,255,0.08)",
|
|
29
|
+
border: "1px solid rgba(255,255,255,0.12)",
|
|
30
|
+
backdropFilter: "blur(12px)",
|
|
31
|
+
color: "#fff"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
/* @__PURE__ */ React.createElement(
|
|
35
|
+
"h3",
|
|
36
|
+
{
|
|
37
|
+
style: {
|
|
38
|
+
margin: "0 0 24px",
|
|
39
|
+
fontSize: "18px"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
title
|
|
43
|
+
),
|
|
44
|
+
/* @__PURE__ */ React.createElement(
|
|
45
|
+
"div",
|
|
46
|
+
{
|
|
47
|
+
style: {
|
|
48
|
+
position: "relative",
|
|
49
|
+
width: "100%",
|
|
50
|
+
height: "220px"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
/* @__PURE__ */ React.createElement(
|
|
54
|
+
"svg",
|
|
55
|
+
{
|
|
56
|
+
viewBox: "0 0 100 100",
|
|
57
|
+
preserveAspectRatio: "none",
|
|
58
|
+
style: {
|
|
59
|
+
width: "100%",
|
|
60
|
+
height: "180px",
|
|
61
|
+
overflow: "visible"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
[20, 40, 60, 80].map((y) => /* @__PURE__ */ React.createElement(
|
|
65
|
+
"line",
|
|
66
|
+
{
|
|
67
|
+
key: y,
|
|
68
|
+
x1: "0",
|
|
69
|
+
y1: y,
|
|
70
|
+
x2: "100",
|
|
71
|
+
y2: y,
|
|
72
|
+
stroke: "rgba(255,255,255,0.1)",
|
|
73
|
+
strokeWidth: "0.5"
|
|
74
|
+
}
|
|
75
|
+
)),
|
|
76
|
+
/* @__PURE__ */ React.createElement(
|
|
77
|
+
"polyline",
|
|
78
|
+
{
|
|
79
|
+
points,
|
|
80
|
+
fill: "none",
|
|
81
|
+
stroke: color,
|
|
82
|
+
strokeWidth: "2",
|
|
83
|
+
vectorEffect: "non-scaling-stroke"
|
|
84
|
+
}
|
|
85
|
+
),
|
|
86
|
+
data.map((item, index) => {
|
|
87
|
+
const x = index / (data.length - 1) * 100;
|
|
88
|
+
const y = 100 - item.value / maxValue * 80;
|
|
89
|
+
return /* @__PURE__ */ React.createElement(
|
|
90
|
+
"circle",
|
|
91
|
+
{
|
|
92
|
+
key: index,
|
|
93
|
+
cx: x,
|
|
94
|
+
cy: y,
|
|
95
|
+
r: "2",
|
|
96
|
+
fill: color,
|
|
97
|
+
vectorEffect: "non-scaling-stroke"
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
})
|
|
101
|
+
),
|
|
102
|
+
/* @__PURE__ */ React.createElement(
|
|
103
|
+
"div",
|
|
104
|
+
{
|
|
105
|
+
style: {
|
|
106
|
+
display: "flex",
|
|
107
|
+
justifyContent: "space-between",
|
|
108
|
+
marginTop: "10px",
|
|
109
|
+
color: "rgba(255,255,255,0.5)",
|
|
110
|
+
fontSize: "12px"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
data.map((item, index) => /* @__PURE__ */ React.createElement("span", { key: index }, item.label))
|
|
114
|
+
)
|
|
115
|
+
)
|
|
116
|
+
);
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
export {
|
|
120
|
+
LineChartCard
|
|
121
|
+
};
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/LineChartCard/LineChartCard.jsx
|
|
30
|
+
var LineChartCard_exports = {};
|
|
31
|
+
__export(LineChartCard_exports, {
|
|
32
|
+
LineChartCard: () => LineChartCard
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(LineChartCard_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var LineChartCard = ({
|
|
37
|
+
title = "Revenue Overview",
|
|
38
|
+
data = [
|
|
39
|
+
{ label: "Jan", value: 1200 },
|
|
40
|
+
{ label: "Feb", value: 1800 },
|
|
41
|
+
{ label: "Mar", value: 1500 },
|
|
42
|
+
{ label: "Apr", value: 2400 },
|
|
43
|
+
{ label: "May", value: 2800 },
|
|
44
|
+
{ label: "Jun", value: 3200 }
|
|
45
|
+
],
|
|
46
|
+
color = "#6366f1"
|
|
47
|
+
}) => {
|
|
48
|
+
const maxValue = Math.max(...data.map((item) => item.value));
|
|
49
|
+
const points = data.map((item, index) => {
|
|
50
|
+
const x = index / (data.length - 1) * 100;
|
|
51
|
+
const y = 100 - item.value / maxValue * 80;
|
|
52
|
+
return `${x},${y}`;
|
|
53
|
+
}).join(" ");
|
|
54
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
55
|
+
"div",
|
|
56
|
+
{
|
|
57
|
+
style: {
|
|
58
|
+
width: "500px",
|
|
59
|
+
padding: "24px",
|
|
60
|
+
borderRadius: "20px",
|
|
61
|
+
background: "rgba(255,255,255,0.08)",
|
|
62
|
+
border: "1px solid rgba(255,255,255,0.12)",
|
|
63
|
+
backdropFilter: "blur(12px)",
|
|
64
|
+
color: "#fff"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
68
|
+
"h3",
|
|
69
|
+
{
|
|
70
|
+
style: {
|
|
71
|
+
margin: "0 0 24px",
|
|
72
|
+
fontSize: "18px"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
title
|
|
76
|
+
),
|
|
77
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
style: {
|
|
81
|
+
position: "relative",
|
|
82
|
+
width: "100%",
|
|
83
|
+
height: "220px"
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
87
|
+
"svg",
|
|
88
|
+
{
|
|
89
|
+
viewBox: "0 0 100 100",
|
|
90
|
+
preserveAspectRatio: "none",
|
|
91
|
+
style: {
|
|
92
|
+
width: "100%",
|
|
93
|
+
height: "180px",
|
|
94
|
+
overflow: "visible"
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
[20, 40, 60, 80].map((y) => /* @__PURE__ */ import_react.default.createElement(
|
|
98
|
+
"line",
|
|
99
|
+
{
|
|
100
|
+
key: y,
|
|
101
|
+
x1: "0",
|
|
102
|
+
y1: y,
|
|
103
|
+
x2: "100",
|
|
104
|
+
y2: y,
|
|
105
|
+
stroke: "rgba(255,255,255,0.1)",
|
|
106
|
+
strokeWidth: "0.5"
|
|
107
|
+
}
|
|
108
|
+
)),
|
|
109
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
110
|
+
"polyline",
|
|
111
|
+
{
|
|
112
|
+
points,
|
|
113
|
+
fill: "none",
|
|
114
|
+
stroke: color,
|
|
115
|
+
strokeWidth: "2",
|
|
116
|
+
vectorEffect: "non-scaling-stroke"
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
data.map((item, index) => {
|
|
120
|
+
const x = index / (data.length - 1) * 100;
|
|
121
|
+
const y = 100 - item.value / maxValue * 80;
|
|
122
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
123
|
+
"circle",
|
|
124
|
+
{
|
|
125
|
+
key: index,
|
|
126
|
+
cx: x,
|
|
127
|
+
cy: y,
|
|
128
|
+
r: "2",
|
|
129
|
+
fill: color,
|
|
130
|
+
vectorEffect: "non-scaling-stroke"
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
})
|
|
134
|
+
),
|
|
135
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
136
|
+
"div",
|
|
137
|
+
{
|
|
138
|
+
style: {
|
|
139
|
+
display: "flex",
|
|
140
|
+
justifyContent: "space-between",
|
|
141
|
+
marginTop: "10px",
|
|
142
|
+
color: "rgba(255,255,255,0.5)",
|
|
143
|
+
fontSize: "12px"
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
data.map((item, index) => /* @__PURE__ */ import_react.default.createElement("span", { key: index }, item.label))
|
|
147
|
+
)
|
|
148
|
+
)
|
|
149
|
+
);
|
|
150
|
+
};
|
|
151
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
152
|
+
0 && (module.exports = {
|
|
153
|
+
LineChartCard
|
|
154
|
+
});
|
package/dist/index.js
CHANGED
|
@@ -36,6 +36,7 @@ __export(index_exports, {
|
|
|
36
36
|
FeatureCard: () => FeatureCard,
|
|
37
37
|
Graph: () => Graph,
|
|
38
38
|
HoverCard: () => HoverCard,
|
|
39
|
+
LineChartCard: () => LineChartCard,
|
|
39
40
|
Loader: () => Loader,
|
|
40
41
|
NotificationCard: () => NotificationCard,
|
|
41
42
|
PricingCard: () => PricingCard,
|
|
@@ -1837,6 +1838,124 @@ var TeamMemberCard = ({
|
|
|
1837
1838
|
)
|
|
1838
1839
|
);
|
|
1839
1840
|
};
|
|
1841
|
+
|
|
1842
|
+
// src/components/LineChartCard/LineChartCard.jsx
|
|
1843
|
+
var import_react19 = __toESM(require("react"));
|
|
1844
|
+
var LineChartCard = ({
|
|
1845
|
+
title = "Revenue Overview",
|
|
1846
|
+
data = [
|
|
1847
|
+
{ label: "Jan", value: 1200 },
|
|
1848
|
+
{ label: "Feb", value: 1800 },
|
|
1849
|
+
{ label: "Mar", value: 1500 },
|
|
1850
|
+
{ label: "Apr", value: 2400 },
|
|
1851
|
+
{ label: "May", value: 2800 },
|
|
1852
|
+
{ label: "Jun", value: 3200 }
|
|
1853
|
+
],
|
|
1854
|
+
color = "#6366f1"
|
|
1855
|
+
}) => {
|
|
1856
|
+
const maxValue = Math.max(...data.map((item) => item.value));
|
|
1857
|
+
const points = data.map((item, index) => {
|
|
1858
|
+
const x = index / (data.length - 1) * 100;
|
|
1859
|
+
const y = 100 - item.value / maxValue * 80;
|
|
1860
|
+
return `${x},${y}`;
|
|
1861
|
+
}).join(" ");
|
|
1862
|
+
return /* @__PURE__ */ import_react19.default.createElement(
|
|
1863
|
+
"div",
|
|
1864
|
+
{
|
|
1865
|
+
style: {
|
|
1866
|
+
width: "500px",
|
|
1867
|
+
padding: "24px",
|
|
1868
|
+
borderRadius: "20px",
|
|
1869
|
+
background: "rgba(255,255,255,0.08)",
|
|
1870
|
+
border: "1px solid rgba(255,255,255,0.12)",
|
|
1871
|
+
backdropFilter: "blur(12px)",
|
|
1872
|
+
color: "#fff"
|
|
1873
|
+
}
|
|
1874
|
+
},
|
|
1875
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
1876
|
+
"h3",
|
|
1877
|
+
{
|
|
1878
|
+
style: {
|
|
1879
|
+
margin: "0 0 24px",
|
|
1880
|
+
fontSize: "18px"
|
|
1881
|
+
}
|
|
1882
|
+
},
|
|
1883
|
+
title
|
|
1884
|
+
),
|
|
1885
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
1886
|
+
"div",
|
|
1887
|
+
{
|
|
1888
|
+
style: {
|
|
1889
|
+
position: "relative",
|
|
1890
|
+
width: "100%",
|
|
1891
|
+
height: "220px"
|
|
1892
|
+
}
|
|
1893
|
+
},
|
|
1894
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
1895
|
+
"svg",
|
|
1896
|
+
{
|
|
1897
|
+
viewBox: "0 0 100 100",
|
|
1898
|
+
preserveAspectRatio: "none",
|
|
1899
|
+
style: {
|
|
1900
|
+
width: "100%",
|
|
1901
|
+
height: "180px",
|
|
1902
|
+
overflow: "visible"
|
|
1903
|
+
}
|
|
1904
|
+
},
|
|
1905
|
+
[20, 40, 60, 80].map((y) => /* @__PURE__ */ import_react19.default.createElement(
|
|
1906
|
+
"line",
|
|
1907
|
+
{
|
|
1908
|
+
key: y,
|
|
1909
|
+
x1: "0",
|
|
1910
|
+
y1: y,
|
|
1911
|
+
x2: "100",
|
|
1912
|
+
y2: y,
|
|
1913
|
+
stroke: "rgba(255,255,255,0.1)",
|
|
1914
|
+
strokeWidth: "0.5"
|
|
1915
|
+
}
|
|
1916
|
+
)),
|
|
1917
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
1918
|
+
"polyline",
|
|
1919
|
+
{
|
|
1920
|
+
points,
|
|
1921
|
+
fill: "none",
|
|
1922
|
+
stroke: color,
|
|
1923
|
+
strokeWidth: "2",
|
|
1924
|
+
vectorEffect: "non-scaling-stroke"
|
|
1925
|
+
}
|
|
1926
|
+
),
|
|
1927
|
+
data.map((item, index) => {
|
|
1928
|
+
const x = index / (data.length - 1) * 100;
|
|
1929
|
+
const y = 100 - item.value / maxValue * 80;
|
|
1930
|
+
return /* @__PURE__ */ import_react19.default.createElement(
|
|
1931
|
+
"circle",
|
|
1932
|
+
{
|
|
1933
|
+
key: index,
|
|
1934
|
+
cx: x,
|
|
1935
|
+
cy: y,
|
|
1936
|
+
r: "2",
|
|
1937
|
+
fill: color,
|
|
1938
|
+
vectorEffect: "non-scaling-stroke"
|
|
1939
|
+
}
|
|
1940
|
+
);
|
|
1941
|
+
})
|
|
1942
|
+
),
|
|
1943
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
1944
|
+
"div",
|
|
1945
|
+
{
|
|
1946
|
+
style: {
|
|
1947
|
+
display: "flex",
|
|
1948
|
+
justifyContent: "space-between",
|
|
1949
|
+
marginTop: "10px",
|
|
1950
|
+
color: "rgba(255,255,255,0.5)",
|
|
1951
|
+
fontSize: "12px"
|
|
1952
|
+
}
|
|
1953
|
+
},
|
|
1954
|
+
data.map((item, index) => /* @__PURE__ */ import_react19.default.createElement("span", { key: index }, item.label))
|
|
1955
|
+
)
|
|
1956
|
+
)
|
|
1957
|
+
);
|
|
1958
|
+
};
|
|
1840
1959
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1841
1960
|
0 && (module.exports = {
|
|
1842
1961
|
AnimatedProgressBar,
|
|
@@ -1846,6 +1965,7 @@ var TeamMemberCard = ({
|
|
|
1846
1965
|
FeatureCard,
|
|
1847
1966
|
Graph,
|
|
1848
1967
|
HoverCard,
|
|
1968
|
+
LineChartCard,
|
|
1849
1969
|
Loader,
|
|
1850
1970
|
NotificationCard,
|
|
1851
1971
|
PricingCard,
|
package/dist/index.mjs
CHANGED
|
@@ -7,6 +7,12 @@ import {
|
|
|
7
7
|
import {
|
|
8
8
|
ThumbnailCard
|
|
9
9
|
} from "./chunk-57QJO5RD.mjs";
|
|
10
|
+
import {
|
|
11
|
+
StatsCard
|
|
12
|
+
} from "./chunk-472PLVGR.mjs";
|
|
13
|
+
import {
|
|
14
|
+
LineChartCard
|
|
15
|
+
} from "./chunk-GGOOL7HS.mjs";
|
|
10
16
|
import {
|
|
11
17
|
Loader
|
|
12
18
|
} from "./chunk-XGVKPI3O.mjs";
|
|
@@ -25,9 +31,6 @@ import {
|
|
|
25
31
|
import {
|
|
26
32
|
SliderCard
|
|
27
33
|
} from "./chunk-NJSJATQ6.mjs";
|
|
28
|
-
import {
|
|
29
|
-
StatsCard
|
|
30
|
-
} from "./chunk-472PLVGR.mjs";
|
|
31
34
|
import {
|
|
32
35
|
SwipeCard
|
|
33
36
|
} from "./chunk-XD6E2QQI.mjs";
|
|
@@ -60,6 +63,7 @@ export {
|
|
|
60
63
|
FeatureCard,
|
|
61
64
|
Graph,
|
|
62
65
|
HoverCard,
|
|
66
|
+
LineChartCard,
|
|
63
67
|
Loader,
|
|
64
68
|
NotificationCard,
|
|
65
69
|
PricingCard,
|