@longline/aqua-ui 1.0.238 → 1.0.239

package/controls/Histogram/Histogram.d.ts

@@ -49,4 +49,4 @@ interface IProps {
  * 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/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/package.json

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