@hisptz/react-ui
Version:
A collection of reusable complex DHIS2 react ui components.
132 lines (126 loc) • 3.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SingleValuesWithDecimalPlaces = exports.Default = exports.AnimatedSingleValue = exports.AnimatedAllValues = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = _interopRequireDefault(require("."));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const Template = args => /*#__PURE__*/_react.default.createElement(_.default, args);
const Default = Template.bind({});
exports.Default = Default;
Default.args = {
title: "PRIORITY INDICATORS",
singleValueItems: [{
label: "Total Bookings",
value: 136
}, {
label: "At least one dose",
value: 45,
percentage: 23,
color: "#0D47A1"
}, {
label: "Partially vaccinated",
value: 13,
percentage: 17,
color: "#0D47A1"
}, {
label: "Fully vaccinated",
value: 126,
percentage: 83,
color: "#0D47A1"
}, {
label: "Number of AEFI",
value: 26
}]
};
const AnimatedAllValues = Template.bind({});
exports.AnimatedAllValues = AnimatedAllValues;
AnimatedAllValues.args = {
title: "PRIORITY INDICATORS",
animationDuration: 1500,
animationDelay: 500,
singleValueItems: [{
label: "Total Bookings",
value: 136344
}, {
label: "At least one dose",
value: 4423,
percentage: 23,
color: "#0D47A1"
}, {
label: "Partially vaccinated",
value: 1394,
percentage: 17,
color: "#0D47A1"
}, {
label: "Fully vaccinated",
value: 12432,
percentage: 83,
color: "#0D47A1"
}, {
label: "Number of AEFI",
value: 26423
}]
};
const AnimatedSingleValue = Template.bind({});
exports.AnimatedSingleValue = AnimatedSingleValue;
AnimatedSingleValue.args = {
title: "PRIORITY INDICATORS",
singleValueItems: [{
label: "Total Bookings",
value: 13634244,
animationDuration: 1000,
animationDelay: 100
}, {
label: "At least one dose",
value: 45423,
percentage: 23,
color: "#0D47A1",
animationDuration: 1000,
animationDelay: 600
}, {
label: "Partially vaccinated",
value: 13434,
percentage: 17,
color: "#0D47A1",
animationDuration: 1000,
animationDelay: 1100
}, {
label: "Fully vaccinated",
value: 126432,
percentage: 83,
color: "#0D47A1",
animationDuration: 1000,
animationDelay: 1600
}, {
label: "Number of AEFI",
value: 268423,
animationDuration: 1000,
animationDelay: 2000
}]
};
const SingleValuesWithDecimalPlaces = Template.bind({});
exports.SingleValuesWithDecimalPlaces = SingleValuesWithDecimalPlaces;
SingleValuesWithDecimalPlaces.args = {
title: "ENROLLMENTS",
animationDuration: 1500,
animationDelay: 500,
singleValueItems: [{
label: "Number of Enrolled Clients",
value: 268423,
decimalPlaces: 3
}, {
label: "Number of Served Clients",
value: 268423,
decimalPlaces: 1
}]
};
var _default = {
title: "Components/Single Value Container",
component: _.default,
decorators: [SingleValueStory => {
return /*#__PURE__*/_react.default.createElement(SingleValueStory, null);
}]
};
exports.default = _default;