@longline/aqua-ui 1.0.273 → 1.0.274
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.
|
@@ -20,6 +20,11 @@ interface ILinearChartProps {
|
|
|
20
20
|
* the color is the theme primary color.
|
|
21
21
|
*/
|
|
22
22
|
color?: string;
|
|
23
|
+
/**
|
|
24
|
+
* If set, `LinearChart` is in ghost mode. If a ghosted `label is desired,
|
|
25
|
+
* `label` must have a value.
|
|
26
|
+
*/
|
|
27
|
+
ghost?: boolean;
|
|
23
28
|
}
|
|
24
29
|
/**
|
|
25
30
|
* Data visualization element.
|
|
@@ -26,17 +26,23 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled from 'styled-components';
|
|
29
|
+
import { Ghost } from '../Ghost';
|
|
29
30
|
var LinearChartBase = function (props) {
|
|
30
31
|
var percentage = Math.round(Math.max(0, Math.min(100, props.value))) + "%";
|
|
31
32
|
return (React.createElement("div", { className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
|
|
32
|
-
props.label && React.createElement(Label, null,
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
props.label && React.createElement(Label, null,
|
|
34
|
+
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0 } }),
|
|
35
|
+
!props.ghost && props.label),
|
|
36
|
+
!props.ghost && props.numbered && React.createElement(Number, null, percentage),
|
|
37
|
+
!props.ghost && React.createElement(Bar, null),
|
|
38
|
+
props.ghost && React.createElement(GhostWrapper, null,
|
|
39
|
+
React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0 } }))));
|
|
35
40
|
};
|
|
36
|
-
var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 120px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n height: 18px;\n line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"], ["\n width: 120px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n height: 18px;\n line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"])));
|
|
41
|
+
var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 120px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n height: 18px;\n line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"], ["\n position: relative;\n width: 120px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n height: 18px;\n line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"])));
|
|
37
42
|
var Number = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 40px;\n text-align: right;\n height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n line-height: 18px;\n"], ["\n width: 40px;\n text-align: right;\n height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n line-height: 18px;\n"])));
|
|
38
43
|
var Bar = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative; \n box-sizing: border-box;\n flex: 1;\n height: 14px;\n\n background-color: ", ";\n border-radius: 7px;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n box-sizing: border-box;\n transition: width ", "ms ease;\n border-radius: 7px;\n } \n"], ["\n position: relative; \n box-sizing: border-box;\n flex: 1;\n height: 14px;\n\n background-color: ", ";\n border-radius: 7px;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n box-sizing: border-box;\n transition: width ", "ms ease;\n border-radius: 7px;\n } \n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.animation.duration * 2; });
|
|
39
|
-
var
|
|
44
|
+
var GhostWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n height: 18px;\n flex: 1;\n"], ["\n position: relative;\n height: 18px;\n flex: 1;\n"])));
|
|
45
|
+
var LinearChartStyled = styled(LinearChartBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n height: 18px;\n gap: 8px;\n min-width: 200px;\n user-select: none;\n\n font: ", ";\n color: ", ";\n line-height: 0;\n text-transform: uppercase;\n\n ", " {\n &:before {\n width: ", "%;\n background-color: ", ";\n }\n }\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n height: 18px;\n gap: 8px;\n min-width: 200px;\n user-select: none;\n\n font: ", ";\n color: ", ";\n line-height: 0;\n text-transform: uppercase;\n\n ", " {\n &:before {\n width: ", "%;\n background-color: ", ";\n }\n }\n"
|
|
40
46
|
/**
|
|
41
47
|
* Data visualization element.
|
|
42
48
|
*
|
|
@@ -56,4 +62,4 @@ var LinearChart = function (_a) {
|
|
|
56
62
|
};
|
|
57
63
|
LinearChart.displayName = "LinearChart";
|
|
58
64
|
export { LinearChart };
|
|
59
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
65
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|