@longline/aqua-ui 1.0.237 → 1.0.238
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.
|
@@ -45,8 +45,8 @@ interface IProps {
|
|
|
45
45
|
}
|
|
46
46
|
/**
|
|
47
47
|
* A `Histogram` visualizes a number of bins, each of which has a `name`,
|
|
48
|
-
* a `count` (number of items in the bin), and a `
|
|
49
|
-
* values interval contained within the bin.
|
|
48
|
+
* a `count` (number of items in the bin), and a `binStart` and `binEnd` for
|
|
49
|
+
* the values interval contained within the bin.
|
|
50
50
|
*/
|
|
51
51
|
declare const Histogram: ({ appearance, values, tickStyle, ...props }: IProps) => React.JSX.Element;
|
|
52
52
|
export { Histogram, TValueStyle };
|
|
@@ -37,8 +37,8 @@ import { DefaultHistogramAppearance } from './HistogramAppearance';
|
|
|
37
37
|
* hoverValues
|
|
38
38
|
* onClick={(idx: number) => console.log(`Bin ${idx} clicked.`)}
|
|
39
39
|
* bins: {[
|
|
40
|
-
* { count: 50,
|
|
41
|
-
* { count: 70,
|
|
40
|
+
* { count: 50, binEnd: 1000 },
|
|
41
|
+
* { count: 70, binEnd: 2000 },
|
|
42
42
|
* ]}/>
|
|
43
43
|
* @todo Consider using children for bins.
|
|
44
44
|
*/
|
|
@@ -61,10 +61,10 @@ var HistogramBase = function (p) {
|
|
|
61
61
|
p.tickStyle != 'none' && React.createElement(AxisArea, null,
|
|
62
62
|
React.createElement(Indent, null,
|
|
63
63
|
p.bins.map(function (bin, idx) {
|
|
64
|
-
return React.createElement(HistogramTick, { key: idx, showValue: p.tickStyle === 'value', left: 100 * idx / p.bins.length, value: bin.
|
|
64
|
+
return React.createElement(HistogramTick, { key: idx, showValue: p.tickStyle === 'value', left: 100 * idx / p.bins.length, value: bin.binStart });
|
|
65
65
|
}),
|
|
66
66
|
p.bins.length > 0 &&
|
|
67
|
-
React.createElement(HistogramTick, { left: 100, showValue: p.tickStyle === 'value', value: p.bins[p.bins.length - 1].
|
|
67
|
+
React.createElement(HistogramTick, { left: 100, showValue: p.tickStyle === 'value', value: p.bins[p.bins.length - 1].binEnd }))),
|
|
68
68
|
p.unit && React.createElement(UnitArea, null, p.unit)));
|
|
69
69
|
};
|
|
70
70
|
var ChartArea = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
@@ -75,14 +75,14 @@ var Indent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateOb
|
|
|
75
75
|
var HistogramStyled = styled(HistogramBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n // Chart elements are stacked vertically:\n display: flex;\n flex-direction: column;\n // Histogram fills available space:\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n ", " {\n position: relative;\n flex: 1;\n }\n ", " {\n position: relative;\n flex: 0;\n height: 22px;\n min-height: 22px;\n box-sizing: border-box;\n }\n ", " {\n flex: 0;\n height: 20px;\n min-height: 20px;\n font-size: 10px;\n color: #fff;\n user-select: none; \n display: flex;\n flex-direction: column;\n justify-content: end;\n align-items: center;\n }\n ", " {\n // BarArea takes up an absolute position:\n position: absolute;\n width: 100%;\n height: 100%;\n // Bars are placed using flexbox:\n display: flex;\n flex-direction: row; \n justify-content: center;\n align-items: flex-end;\n overflow-y: hidden;\n overflow-x: hidden;\n }\n ", " {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 5%;\n right: 5%;\n }\n"], ["\n // Chart elements are stacked vertically:\n display: flex;\n flex-direction: column;\n // Histogram fills available space:\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n ", " {\n position: relative;\n flex: 1;\n }\n ", " {\n position: relative;\n flex: 0;\n height: 22px;\n min-height: 22px;\n box-sizing: border-box;\n }\n ", " {\n flex: 0;\n height: 20px;\n min-height: 20px;\n font-size: 10px;\n color: #fff;\n user-select: none; \n display: flex;\n flex-direction: column;\n justify-content: end;\n align-items: center;\n }\n ", " {\n // BarArea takes up an absolute position:\n position: absolute;\n width: 100%;\n height: 100%;\n // Bars are placed using flexbox:\n display: flex;\n flex-direction: row; \n justify-content: center;\n align-items: flex-end;\n overflow-y: hidden;\n overflow-x: hidden;\n }\n ", " {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 5%;\n right: 5%;\n }\n"
|
|
76
76
|
/**
|
|
77
77
|
* A `Histogram` visualizes a number of bins, each of which has a `name`,
|
|
78
|
-
* a `count` (number of items in the bin), and a `
|
|
79
|
-
* values interval contained within the bin.
|
|
78
|
+
* a `count` (number of items in the bin), and a `binStart` and `binEnd` for
|
|
79
|
+
* the values interval contained within the bin.
|
|
80
80
|
*/
|
|
81
81
|
])), ChartArea, AxisArea, UnitArea, BarArea, Indent);
|
|
82
82
|
/**
|
|
83
83
|
* A `Histogram` visualizes a number of bins, each of which has a `name`,
|
|
84
|
-
* a `count` (number of items in the bin), and a `
|
|
85
|
-
* values interval contained within the bin.
|
|
84
|
+
* a `count` (number of items in the bin), and a `binStart` and `binEnd` for
|
|
85
|
+
* the values interval contained within the bin.
|
|
86
86
|
*/
|
|
87
87
|
var Histogram = function (_a) {
|
|
88
88
|
var _b = _a.appearance, appearance = _b === void 0 ? DefaultHistogramAppearance : _b, _c = _a.values, values = _c === void 0 ? 'show' : _c, _d = _a.tickStyle, tickStyle = _d === void 0 ? 'none' : _d, props = __rest(_a, ["appearance", "values", "tickStyle"]);
|
|
@@ -11,11 +11,11 @@ interface IHistogramBin {
|
|
|
11
11
|
* Parameter start value
|
|
12
12
|
* e.g. Ponds of at least 200 km2
|
|
13
13
|
*/
|
|
14
|
-
|
|
14
|
+
binStart?: number;
|
|
15
15
|
/**
|
|
16
16
|
* Parameter end value
|
|
17
17
|
* e.g. Ponds of at most 200 km2
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
binEnd?: number;
|
|
20
20
|
}
|
|
21
21
|
export { IHistogramBin };
|