@longline/aqua-ui 1.0.237 → 1.0.239

package/controls/Histogram/Histogram.d.ts

@@ -45,8 +45,8 @@ interface IProps {
 }
 /**
  * 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.
+ * a `count` (number of items in the bin), and a `binStart` and `binEnd` for
+ * the values interval contained within the bin.
  */
 declare const Histogram: ({ appearance, values, tickStyle, ...props }: IProps) => React.JSX.Element;
-export { Histogram, TValueStyle };
+export { Histogram, TValueStyle, TTickStyle };

package/controls/Histogram/Histogram.js

@@ -37,8 +37,8 @@ import { DefaultHistogramAppearance } from './HistogramAppearance';
  *   hoverValues
  *   onClick={(idx: number) => console.log(`Bin ${idx} clicked.`)}
  *   bins: {[
- *     { count: 50, start: 0, binEnd: 1000 },
- *     { count: 70, end: 1000, binEnd: 2000 },
+ *     { count: 50, binEnd: 1000 },
+ *     { count: 70, binEnd: 2000 },
  *   ]}/>
  * @todo Consider using children for bins.
  */
@@ -61,10 +61,10 @@ var HistogramBase = function (p) {
         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 });
+                    return React.createElement(HistogramTick, { key: idx, showValue: p.tickStyle === 'value', left: 100 * idx / p.bins.length, value: bin.binStart });
                 }),
                 p.bins.length > 0 &&
-                    React.createElement(HistogramTick, { left: 100, showValue: p.tickStyle === 'value', value: p.bins[p.bins.length - 1].end }))),
+                    React.createElement(HistogramTick, { left: 100, showValue: p.tickStyle === 'value', value: p.bins[p.bins.length - 1].binEnd }))),
         p.unit && React.createElement(UnitArea, null, p.unit)));
 };
 var ChartArea = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
@@ -75,14 +75,14 @@ var Indent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateOb
 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.
+     * a `count` (number of items in the bin), and a `binStart` and `binEnd` 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.
+ * a `count` (number of items in the bin), and a `binStart` and `binEnd` 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"]);

package/controls/Histogram/HistogramSingleValue.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 interface IProps {
     /** @ignore */
     className?: string;

package/controls/Histogram/HistogramSingleValue.js

@@ -13,14 +13,30 @@ var __assign = (this && this.__assign) || function () {
     };
     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)));
+import * as React from "react";
+import styled from "styled-components";
+var HistogramSingleValueBase = function (_a) {
+    var value = _a.value, className = _a.className;
+    var textRef = React.useRef(null);
+    var _b = React.useState(1), scale = _b[0], setScale = _b[1];
+    React.useEffect(function () {
+        if (textRef.current) {
+            // measure at default font size
+            var bbox = textRef.current.getBBox();
+            if (bbox.width && bbox.height) {
+                var scaleX = 100 / bbox.width;
+                var scaleY = 100 / bbox.height;
+                // uniform scale (preserve proportions)
+                setScale(Math.min(scaleX, scaleY));
+            }
+        }
+    }, [value]);
+    return (React.createElement("div", { className: className },
+        React.createElement("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet" },
+            React.createElement("g", { transform: "translate(50,50) scale(".concat(scale, ") translate(-50,-50)") },
+                React.createElement("text", { ref: textRef, x: "50", y: "50", dominantBaseline: "middle", textAnchor: "middle" }, 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 HistogramSingleValueStyled = styled(HistogramSingleValueBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  padding: 16px;\n  & > svg {\n    width: 100%;\n    height: 100%;\n    font: ", ";\n    fill: #fff;\n    user-select: none;\n  }\n"], ["\n  position: absolute;\n  inset: 0;\n  padding: 16px;\n  & > svg {\n    width: 100%;\n    height: 100%;\n    font: ", ";\n    fill: #fff;\n    user-select: none;\n  }\n"])), function (p) { return p.theme.font.dataSmall; });
 var HistogramSingleValue = function (props) { return React.createElement(HistogramSingleValueStyled, __assign({}, props)); };
 export { HistogramSingleValue };
 var templateObject_1;

package/controls/Histogram/IHistogramBin.d.ts

@@ -11,11 +11,11 @@ interface IHistogramBin {
      * Parameter start value
      * e.g. Ponds of at least 200 km2
      */
-    start?: number;
+    binStart?: number;
     /**
      * Parameter end value
      * e.g. Ponds of at most 200 km2
      */
-    end?: number;
+    binEnd?: number;
 }
 export { IHistogramBin };

package/controls/Histogram/index.d.ts

@@ -1 +1,4 @@
 export * from './Histogram';
+export * from './IHistogramBin';
+export * from './HistogramAppearance';
+export * from './HistogramSingleValue';

package/controls/Histogram/index.js

@@ -1 +1,4 @@
 export * from './Histogram';
+export * from './IHistogramBin';
+export * from './HistogramAppearance';
+export * from './HistogramSingleValue';

package/package.json

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