@ansible/ansible-ui-framework 0.0.395 → 0.0.397
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageDashboard/PageChartContainer.d.ts +8 -0
- package/cjs/PageDashboard/PageChartContainer.js +69 -0
- package/cjs/PageDashboard/PageDashboardCard.d.ts +5 -0
- package/cjs/PageDashboard/PageDashboardCard.js +22 -0
- package/cjs/PageDashboard/PageDonutChart.d.ts +13 -0
- package/cjs/PageDashboard/PageDonutChart.js +53 -0
- package/cjs/PageDashboard/PageScatterChart.d.ts +11 -0
- package/cjs/PageDashboard/PageScatterChart.js +5564 -0
- package/package.json +1 -1
@@ -0,0 +1,69 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
var __read = (this && this.__read) || function (o, n) {
|
14
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
15
|
+
if (!m) return o;
|
16
|
+
var i = m.call(o), r, ar = [], e;
|
17
|
+
try {
|
18
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
19
|
+
}
|
20
|
+
catch (error) { e = { error: error }; }
|
21
|
+
finally {
|
22
|
+
try {
|
23
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
24
|
+
}
|
25
|
+
finally { if (e) throw e.error; }
|
26
|
+
}
|
27
|
+
return ar;
|
28
|
+
};
|
29
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
30
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
31
|
+
};
|
32
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
33
|
+
exports.PageChartContainer = void 0;
|
34
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
35
|
+
var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
|
36
|
+
var react_1 = require("react");
|
37
|
+
function PageChartContainer(props) {
|
38
|
+
var _a, _b, _c, _d;
|
39
|
+
var ref = (0, react_1.useRef)(null);
|
40
|
+
var _e = __read((0, react_1.useState)({
|
41
|
+
width: (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0,
|
42
|
+
height: (_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0,
|
43
|
+
}), 2), containerSize = _e[0], setContainerSize = _e[1];
|
44
|
+
var updateSize = (0, react_1.useCallback)(function () {
|
45
|
+
return setContainerSize(function (containerSize) {
|
46
|
+
var _a, _b, _c, _d;
|
47
|
+
var newContainerSize = {
|
48
|
+
width: (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0,
|
49
|
+
height: (_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0,
|
50
|
+
};
|
51
|
+
if (newContainerSize.width !== containerSize.width ||
|
52
|
+
newContainerSize.height !== containerSize.height) {
|
53
|
+
return newContainerSize;
|
54
|
+
}
|
55
|
+
return containerSize;
|
56
|
+
});
|
57
|
+
}, []);
|
58
|
+
(0, react_1.useEffect)(function () { return updateSize(); }, [ref, updateSize]);
|
59
|
+
(0, resize_observer_1.default)(ref, function () { return updateSize(); });
|
60
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: ref, style: {
|
61
|
+
width: '100%',
|
62
|
+
height: '100%',
|
63
|
+
flexGrow: 1,
|
64
|
+
alignSelf: 'stretch',
|
65
|
+
justifySelf: 'stretch',
|
66
|
+
position: 'relative',
|
67
|
+
} }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { position: 'absolute' } }, { children: props.children(containerSize) })) })));
|
68
|
+
}
|
69
|
+
exports.PageChartContainer = PageChartContainer;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.PageDashboardCard = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
var usePageNavigate_1 = require("../components/usePageNavigate");
|
18
|
+
function PageDashboardCard(props) {
|
19
|
+
var history = (0, usePageNavigate_1.usePageNavigate)();
|
20
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Card, __assign({ isFlat: true, isSelectable: true, isRounded: true, style: { transition: 'box-shadow 0.25s', minHeight: 300 }, onClick: function () { return props.to && history(props.to); } }, { children: props.children })));
|
21
|
+
}
|
22
|
+
exports.PageDashboardCard = PageDashboardCard;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { ChartDonutProps } from '@patternfly/react-charts';
|
3
|
+
export declare function PageDonutChart(props: Omit<ChartDonutProps, 'width' | 'height'>): JSX.Element;
|
4
|
+
export declare function PageDashboardDonutCard(props: {
|
5
|
+
title: string;
|
6
|
+
to: string;
|
7
|
+
items: {
|
8
|
+
count: number;
|
9
|
+
label: string;
|
10
|
+
color: string;
|
11
|
+
}[];
|
12
|
+
loading?: boolean;
|
13
|
+
}): JSX.Element;
|
@@ -0,0 +1,53 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.PageDashboardDonutCard = exports.PageDonutChart = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_charts_1 = require("@patternfly/react-charts");
|
17
|
+
var react_core_1 = require("@patternfly/react-core");
|
18
|
+
var react_1 = require("react");
|
19
|
+
var usePageNavigate_1 = require("../components/usePageNavigate");
|
20
|
+
var PageChartContainer_1 = require("./PageChartContainer");
|
21
|
+
function PageDonutChart(props) {
|
22
|
+
return ((0, jsx_runtime_1.jsx)(PageChartContainer_1.PageChartContainer, { children: function (size) { return ((0, jsx_runtime_1.jsx)(react_charts_1.ChartDonut
|
23
|
+
// ariaDesc="Average number of pets"
|
24
|
+
// ariaTitle="Donut chart example"
|
25
|
+
// constrainToVisibleArea
|
26
|
+
// data={items.map((item) => ({ x: item.label, y: item.count }))}
|
27
|
+
// title={total.toString()}
|
28
|
+
// colorScale={items.map((item) => item.color)}
|
29
|
+
// padding={{ top: 0, left: 0, right: 0, bottom: 0 }}
|
30
|
+
, __assign({}, props, { width: size.width, height: size.height }))); } }));
|
31
|
+
}
|
32
|
+
exports.PageDonutChart = PageDonutChart;
|
33
|
+
function PageDashboardDonutCard(props) {
|
34
|
+
var title = props.title, items = props.items, loading = props.loading;
|
35
|
+
var total = items.reduce(function (total, item) { return total + item.count; }, 0);
|
36
|
+
var history = (0, usePageNavigate_1.usePageNavigate)();
|
37
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, __assign({ isFlat: true, isSelectable: true, isRounded: true, style: { transition: 'box-shadow 0.25s' }, onClick: function () { return history(props.to); } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: title }) }), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: loading === true ? ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { shape: "circle", width: "100px" }) }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { marginTop: 'auto', marginBottom: 'auto' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsMd' } }, { children: items.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsSm' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { width: 12, height: 12 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { shape: "square", width: "12", height: "12" }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { shape: "square", width: "70px", height: "14px" }) }))] })) }, item.label)); }) })) }))] }))) : ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { width: '100px', height: '100px' } }, { children: (0, jsx_runtime_1.jsx)(PageDonutChart, { ariaDesc: "Average number of pets", ariaTitle: "Donut chart example", constrainToVisibleArea: true, data: items.map(function (item) { return ({ x: item.label, y: item.count }); }), title: total.toString(), colorScale: items.map(function (item) { return item.color; }), padding: { top: 0, left: 0, right: 0, bottom: 0 } }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { marginTop: 'auto', marginBottom: 'auto' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm' } }, { children: items.map(function (item) {
|
38
|
+
if (item.count === 0)
|
39
|
+
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {}, item.label);
|
40
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsSm' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", { style: {
|
41
|
+
width: 12,
|
42
|
+
height: 12,
|
43
|
+
backgroundColor: item.color,
|
44
|
+
borderRadius: 2,
|
45
|
+
} }) }), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: {
|
46
|
+
paddingLeft: 4,
|
47
|
+
paddingRight: 2,
|
48
|
+
textAlign: 'right',
|
49
|
+
minWidth: 16,
|
50
|
+
} }, { children: item.count })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: item.label })] })) }, item.label));
|
51
|
+
}) })) }))] }))) })] })));
|
52
|
+
}
|
53
|
+
exports.PageDashboardDonutCard = PageDashboardDonutCard;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export declare function PageScatterChart(): JSX.Element;
|
3
|
+
interface IHostPlot {
|
4
|
+
date?: Date;
|
5
|
+
name: string;
|
6
|
+
x: string | number;
|
7
|
+
y: number;
|
8
|
+
anomaly: boolean;
|
9
|
+
}
|
10
|
+
export declare const hosts: IHostPlot[];
|
11
|
+
export {};
|