@longline/aqua-ui 1.0.236 → 1.0.237

package/controls/Histogram/Histogram.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { IHistogramAppearance } from './HistogramAppearance';
+import { IHistogramBin } from './IHistogramBin';
+type TTickStyle = 'none' | 'tick' | 'value';
+type TValueStyle = 'hide' | 'show' | 'hover';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Name, count, start and end for each bin.
+     */
+    bins: IHistogramBin[];
+    /**
+     * If currently `loading`, a Histogram displays grey bars and no values.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Show axis with ticks?
+     * @default none
+     */
+    tickStyle?: TTickStyle;
+    /**
+     * Optional unit to show under the Histogram
+     */
+    unit?: string;
+    /**
+     * Show values?
+     * @default show
+     */
+    values?: TValueStyle;
+    /**
+     * Histogram appearance (with sensible defaults).
+     * @default DefaultHistogramAppearance
+     */
+    appearance?: IHistogramAppearance;
+    /**
+     * No data text. A default text is supplied.
+     */
+    nodata?: React.ReactNode;
+    /**
+     * Optional click event includes the index of the bar clicked (0-based):
+     */
+    onClick?: (idx: number) => void;
+}
+/**
+ * A `Histogram` visualizes a number of bins, each of which has a `name`,
+ * a `count` (number of items in the bin), and a `start` and `end` for the
+ * values interval contained within the bin.
+ */
+declare const Histogram: ({ appearance, values, tickStyle, ...props }: IProps) => React.JSX.Element;
+export { Histogram, TValueStyle };

package/controls/Histogram/Histogram.js

@@ -0,0 +1,92 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { HistogramNoData } from './HistogramNoData';
+import { HistogramBar } from './HistogramBar';
+import { HistogramTick } from './HistogramTick';
+import { DefaultHistogramAppearance } from './HistogramAppearance';
+/**
+ * @example
+ * <Histogram
+ *   tickStyle='tick'
+ *   hoverValues
+ *   onClick={(idx: number) => console.log(`Bin ${idx} clicked.`)}
+ *   bins: {[
+ *     { count: 50, start: 0, binEnd: 1000 },
+ *     { count: 70, end: 1000, binEnd: 2000 },
+ *   ]}/>
+ * @todo Consider using children for bins.
+ */
+var HistogramBase = function (p) {
+    // Abort if there are no bins.
+    if (p.bins.length == 0)
+        return React.createElement(HistogramNoData, null, p.nodata);
+    // Find tallest bar. This is used to calculate the percentage height
+    // of each bar.
+    var maxHeight = Math.max.apply(Math, p.bins.map(function (b) { return b.count; }));
+    // Abort if bins are all empty.
+    if (maxHeight == 0)
+        return React.createElement(HistogramNoData, null, p.nodata);
+    return (React.createElement("div", { className: p.className },
+        React.createElement(ChartArea, null,
+            React.createElement(Indent, null,
+                React.createElement(BarArea, null, p.bins.map(function (bin, idx) {
+                    return React.createElement(HistogramBar, { key: idx, values: p.values, value: bin.count, label: bin.name, height: 100 * bin.count / maxHeight, onClick: p.onClick ? function () { return p.onClick(idx); } : null, loading: p.loading, appearance: p.appearance });
+                })))),
+        p.tickStyle != 'none' && React.createElement(AxisArea, null,
+            React.createElement(Indent, null,
+                p.bins.map(function (bin, idx) {
+                    return React.createElement(HistogramTick, { key: idx, showValue: p.tickStyle === 'value', left: 100 * idx / p.bins.length, value: bin.start });
+                }),
+                p.bins.length > 0 &&
+                    React.createElement(HistogramTick, { left: 100, showValue: p.tickStyle === 'value', value: p.bins[p.bins.length - 1].end }))),
+        p.unit && React.createElement(UnitArea, null, p.unit)));
+};
+var ChartArea = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var AxisArea = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var UnitArea = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+var BarArea = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+var Indent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
+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"
+    /**
+     * A `Histogram` visualizes a number of bins, each of which has a `name`,
+     * a `count` (number of items in the bin), and a `start` and `end` for the
+     * values interval contained within the bin.
+     */
+])), ChartArea, AxisArea, UnitArea, BarArea, Indent);
+/**
+ * A `Histogram` visualizes a number of bins, each of which has a `name`,
+ * a `count` (number of items in the bin), and a `start` and `end` for the
+ * values interval contained within the bin.
+ */
+var Histogram = function (_a) {
+    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"]);
+    return React.createElement(HistogramStyled, __assign({ appearance: appearance, values: values, tickStyle: tickStyle }, props));
+};
+export { Histogram };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/controls/Histogram/HistogramAppearance.d.ts

@@ -0,0 +1,22 @@
+/**
+ * IHistogramAppearance describes what a Histogram looks like.
+ */
+interface IHistogramAppearance {
+    /** Normal bar gradient start color. */
+    bar_color_start: string;
+    /** Normal bar gradient end color. */
+    bar_color_end: string;
+    /** Bar loading color. */
+    bar_color_loading: string;
+    /** Gap on either side of a bar, in px. */
+    bar_gap: number;
+    /** Bar opacity on hover. */
+    hover_opacity: number;
+    /** Minimum bar height, in %. */
+    min_height: number;
+    /** Bar border radius, in px. */
+    bar_radius: number;
+}
+declare const DefaultHistogramAppearance: IHistogramAppearance;
+declare const BlueHistogramAppearance: IHistogramAppearance;
+export { IHistogramAppearance, DefaultHistogramAppearance, BlueHistogramAppearance };

package/controls/Histogram/HistogramAppearance.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var DefaultHistogramAppearance = {
+    bar_color_start: "#F2AF47",
+    bar_color_end: "#EBC95E",
+    bar_color_loading: "#dddddd",
+    bar_gap: 6,
+    hover_opacity: 0.5,
+    min_height: 3,
+    bar_radius: 6
+};
+var BlueHistogramAppearance = __assign(__assign({}, DefaultHistogramAppearance), { bar_color_start: "#B4D9F1", bar_color_end: "#B4D9F1", bar_gap: 2, bar_radius: 2 });
+export { DefaultHistogramAppearance, BlueHistogramAppearance };

package/controls/Histogram/HistogramBar.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IHistogramAppearance } from './HistogramAppearance';
+import { TValueStyle } from './Histogram';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Absolute bar value. */
+    value: number;
+    /** Optional bar label. */
+    label?: string;
+    /** Height must be a percentage. */
+    height: number;
+    /** Show values? */
+    values?: TValueStyle;
+    /** Currently loading? Defaults to false. */
+    loading?: boolean;
+    /** Histogram appearance. */
+    appearance: IHistogramAppearance;
+    /** Fired if bar is clicked. */
+    onClick?: () => void;
+}
+declare const HistogramBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { HistogramBar };

package/controls/Histogram/HistogramBar.js

@@ -0,0 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { NumberFormatter } from '../../formatters/NumberFormatter';
+var HistogramBarBase = function (props) {
+    return React.createElement("div", { className: props.className, onClick: props.onClick }, props.values != 'hide' && !props.loading && !isNaN(props.value) &&
+        React.createElement(HistogramBarText, { title: props.label },
+            React.createElement(HistogramBarLabel, null, props.label),
+            React.createElement(HistogramBarCount, null,
+                React.createElement(NumberFormatter, { value: Math.round(props.value), decimals: 0 }))));
+};
+var HistogramBarText = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position:\n  position: absolute;\n  top: 10px;\n  bottom: 10px;\n  left: 0;\n  right: 0;\n\n  // Content:\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n\n  transition: opacity ease-in-out 0.2s;\n"], ["\n  // Position:\n  position: absolute;\n  top: 10px;\n  bottom: 10px;\n  left: 0;\n  right: 0;\n\n  // Content:\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n\n  transition: opacity ease-in-out 0.2s;\n"])));
+var HistogramBarCount = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  transform: rotate(-180deg);\n  text-align: left;\n  writing-mode: vertical-lr;\n  user-select: none;\n  z-index: 2;\n  color: #fff;\n"], ["\n  flex: 1;\n  transform: rotate(-180deg);\n  text-align: left;\n  writing-mode: vertical-lr;\n  user-select: none;\n  z-index: 2;\n  color: #fff;\n"])));
+var HistogramBarLabel = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform: rotate(-180deg);\n  text-align: right;\n  writing-mode: vertical-lr;\n  user-select: none;\n  z-index: 2;\n  white-space: nowrap;\n  color: #fff;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  transform: rotate(-180deg);\n  text-align: right;\n  writing-mode: vertical-lr;\n  user-select: none;\n  z-index: 2;\n  white-space: nowrap;\n  color: #fff;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var HistogramBar = styled(HistogramBarBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position:   relative;\n  height:     100%;\n  flex:       1;\n  background-color: transparent;\n  margin: 0 ", "px 0 ", "px;\n  border-radius: ", "px;\n\n  // Cursor is only changed if onClick handler is provided and loading is complete:\n  cursor: ", ";\n\n  /** :after is the actual bar. */\n  transition: background-color ease-in-out 0.2s;\n  &:after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n\n    height: ", "%;\n    min-height: ", "%;\n    ", "\n\n    border-radius: ", "px;\n    background: linear-gradient(to bottom, ", ", ", ");\n    ", "\n    opacity: 1;\n    transition: height ease-in-out 1s, \n                background-color ease-in-out 1s, \n                opacity ease-in-out 0.2s;\n  }\n\n  // Hover effect only if hoverValues is set and loading is complete.\n  ", "\n"], ["\n  position:   relative;\n  height:     100%;\n  flex:       1;\n  background-color: transparent;\n  margin: 0 ", "px 0 ", "px;\n  border-radius: ", "px;\n\n  // Cursor is only changed if onClick handler is provided and loading is complete:\n  cursor: ", ";\n\n  /** :after is the actual bar. */\n  transition: background-color ease-in-out 0.2s;\n  &:after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n\n    height: ", "%;\n    min-height: ", "%;\n    ", "\n\n    border-radius: ", "px;\n    background: linear-gradient(to bottom, ", ", ", ");\n    ", "\n    opacity: 1;\n    transition: height ease-in-out 1s, \n                background-color ease-in-out 1s, \n                opacity ease-in-out 0.2s;\n  }\n\n  // Hover effect only if hoverValues is set and loading is complete.\n  ", "\n"])), function (p) { return p.appearance.bar_gap; }, function (p) { return p.appearance.bar_gap; }, function (p) { return p.appearance.bar_radius; }, function (p) { return p.onClick && !p.loading ? "pointer" : null; }, function (p) { return p.height; }, function (p) { return p.appearance.min_height; }, function (p) { return p.loading && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["height: 50%;"], ["height: 50%;"]))); }, function (p) { return p.appearance.bar_radius; }, function (p) { return p.appearance.bar_color_start; }, function (p) { return p.appearance.bar_color_end; }, function (p) { return p.loading && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["background: ", ";"], ["background: ", ";"])), p.appearance.bar_color_loading); }, function (p) { return (p.values == 'hover' || p.onClick) && !p.loading && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n    &:hover {\n      background-color: ", ";\n      ", " {\n        opacity: 1;\n        color: #fff;\n      }\n    }\n    // Hovering over :after\n    &:hover {\n      &:after {\n        opacity: ", ";\n      }  \n    }\n  "], ["\n    ", "\n    &:hover {\n      background-color: ", ";\n      ", " {\n        opacity: 1;\n        color: #fff;\n      }\n    }\n    // Hovering over :after\n    &:hover {\n      &:after {\n        opacity: ", ";\n      }  \n    }\n  "])), p.values == 'hover' && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      ", " {\n        opacity: 0;\n      }\n    "], ["\n      ", " {\n        opacity: 0;\n      }\n    "])), HistogramBarText), function (p) { return p.theme.colors.primary[1]; }, HistogramBarText, p.appearance.hover_opacity); });
+export { HistogramBar };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/controls/Histogram/HistogramNoData.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+}
+declare const HistogramNoData: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { HistogramNoData };

package/controls/Histogram/HistogramNoData.js

@@ -0,0 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+/**
+ * Special content for Histogram in case no data is found (all bars have a
+ * count of zero).
+ */
+var HistogramNoDataBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        React.createElement(Label, null, props.children ? props.children : "No data"));
+};
+var HistogramNoData = styled(HistogramNoDataBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
+var Label = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: #aaa;\n  gap: 8px;\n  user-select: none;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: #aaa;\n  gap: 8px;\n  user-select: none;\n"])));
+export { HistogramNoData };
+var templateObject_1, templateObject_2;

package/controls/Histogram/HistogramSingleValue.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    value: string;
+}
+declare const HistogramSingleValue: (props: IProps) => React.JSX.Element;
+export { HistogramSingleValue };

package/controls/Histogram/HistogramSingleValue.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var HistogramSingleValueBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        React.createElement("svg", { viewBox: "0 0 100 100", x: "0", y: "0" },
+            React.createElement("text", { x: "50%", y: "55", textLength: "100%", textAnchor: "middle", lengthAdjust: "spacingAndGlyphs" }, props.value)));
+};
+var HistogramSingleValueStyled = styled(HistogramSingleValueBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  &>svg {\n    width: 100%;\n    height: 100%;\n    font-weight: 500;\n    fill: #333;\n    user-select: none;\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  &>svg {\n    width: 100%;\n    height: 100%;\n    font-weight: 500;\n    fill: #333;\n    user-select: none;\n  }\n"])));
+var HistogramSingleValue = function (props) { return React.createElement(HistogramSingleValueStyled, __assign({}, props)); };
+export { HistogramSingleValue };
+var templateObject_1;

package/controls/Histogram/HistogramTick.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Tick's left offset, in pixels. */
+    left: number;
+    /** Tick value. */
+    value: number;
+    /** Show tick value? */
+    showValue?: boolean;
+}
+declare const HistogramTick: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { HistogramTick };

package/controls/Histogram/HistogramTick.js

@@ -0,0 +1,14 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { HumanFormatter } from '../../formatters/HumanFormatter';
+var HistogramTickBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.showValue && React.createElement("span", null,
+        React.createElement(HumanFormatter, { value: props.value })));
+};
+var HistogramTick = styled(HistogramTickBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position:\n  position:   absolute;\n  left:       ", "%;\n  top:        4px;\n  width:      2px;\n  height:     5px;\n  box-sizing: border-box;\n\n  // Appearance (tick line):\n  border-radius: 1px;\n  border:        solid 1px #fff;\n  background-color: #fff;\n\n  // Appearance (tick value):\n  span {\n    display:     block;\n    position:    absolute;\n    top:         5px;\n    left:        0;\n    transform:   translate(-50%, 0);\n    font-size:   10px;\n    color:     #fff;\n    user-select: none;\n  }\n"], ["\n  // Position:\n  position:   absolute;\n  left:       ", "%;\n  top:        4px;\n  width:      2px;\n  height:     5px;\n  box-sizing: border-box;\n\n  // Appearance (tick line):\n  border-radius: 1px;\n  border:        solid 1px #fff;\n  background-color: #fff;\n\n  // Appearance (tick value):\n  span {\n    display:     block;\n    position:    absolute;\n    top:         5px;\n    left:        0;\n    transform:   translate(-50%, 0);\n    font-size:   10px;\n    color:     #fff;\n    user-select: none;\n  }\n"])), function (p) { return p.left; });
+export { HistogramTick };
+var templateObject_1;

package/controls/Histogram/IHistogramBin.d.ts

@@ -0,0 +1,21 @@
+interface IHistogramBin {
+    /**
+     * Bin name
+     */
+    name?: string;
+    /**
+     * Bin value (e.g. pond count)
+     */
+    count?: number;
+    /**
+     * Parameter start value
+     * e.g. Ponds of at least 200 km2
+     */
+    start?: number;
+    /**
+     * Parameter end value
+     * e.g. Ponds of at most 200 km2
+     */
+    end?: number;
+}
+export { IHistogramBin };

package/controls/Histogram/IHistogramBin.js

@@ -0,0 +1 @@
+export {};

package/controls/Histogram/index.d.ts

@@ -0,0 +1 @@
+export * from './Histogram';

package/controls/Histogram/index.js

@@ -0,0 +1 @@
+export * from './Histogram';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.236",
+  "version": "1.0.237",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",