sccoreui
Version:
ui-sccore
28 lines (27 loc) • 5.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const progressbar_1 = require("primereact/progressbar");
const react_1 = require("react");
const slider_1 = require("primereact/slider");
const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar"));
const half_circle_progres_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/half-circle-progres-bar"));
require("./progress-bar.scss");
const ProgressBarComponent = () => {
const [value, setValue] = (0, react_1.useState)("");
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Progress-Bar" })), (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-14rem my-8 ml-auto mr-auto progress-slider" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full w-full flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid mt-7 w-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
position: "absolute",
top: 33,
left: `${value}%`,
transition: "left 1s ease-in-out",
transform: "translate(-50%, -50%)",
}, className: "px-3 p-progress-value bg-white shadow-3 h-2rem border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2 flex align-items-start text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
position: "absolute",
top: -24,
left: `${value}%`,
transition: "left 1s ease-in-out",
transform: "translate(-50%, -50%)",
}, className: "p-progress-value bg-white shadow-3 h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value bg-white shadow-3 py-2 flex align-items-center text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { textClassName: "text-md text-green-500", valueTextClassName: "text-green text-5xl", text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 15, strokeBgColor: "var(--gray-300)" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(half_circle_progres_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) }))] })) }))] }));
};
exports.default = ProgressBarComponent;