@gpa-gemstone/react-graph
Version:
Interactive UI Components for GPA products
132 lines • 15.3 kB
JavaScript
"use strict";
// ******************************************************************************************************
// LineLegend.tsx - Gbtc
//
// Copyright © 2023, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 03/04/2023 - C Lackner
// Generated original version of source code.
//
// ******************************************************************************************************
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
var LegendContext_1 = require("./LegendContext");
var fontFamily = window.getComputedStyle(document.body).fontFamily;
var nonTextualWidth = 25;
var cssStyle = "margin: auto auto auto 0px; display: inline-block; font-weight: 400; font-family: ".concat(fontFamily, ";");
var scrollBarWidth = (0, helper_functions_1.GetScrollbarWidth)();
function LineLegend(props) {
var containerRef = React.useRef(null);
var _a = __read(React.useState(props.label), 2), label = _a[0], setLabel = _a[1];
var _b = __read(React.useState(100), 2), legendWidth = _b[0], setLegendWith = _b[1];
var _c = __read(React.useState(100), 2), legendHeight = _c[0], setLegendHeight = _c[1];
var _d = __read(React.useState(false), 2), useMultiLine = _d[0], setUseMultiLine = _d[1];
var _e = __read(React.useState((0, helper_functions_1.CreateGuid)()), 1), guid = _e[0];
var context = React.useContext(LegendContext_1.LegendContext);
React.useEffect(function () {
return function () {
context.RequestLegendWidth(-1, guid);
};
}, []);
React.useEffect(function () {
setLabel((props.hasNoData ? gpa_symbols_1.Warning : "") + props.label);
}, [props.hasNoData, props.label]);
React.useEffect(function () { return setLegendWith(props.size === 'sm' ? context.SmWidth : context.LgWidth); }, [context.LgWidth, context.SmWidth, props.size]);
React.useEffect(function () { return setLegendHeight(props.size === 'sm' ? context.SmHeight : context.LgHeight); }, [context.SmHeight, context.LgHeight, props.size]);
React.useEffect(function () {
var _a, _b;
var hasYScroll = legendHeight < ((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : -1);
var availableWidth = hasYScroll ? legendWidth - scrollBarWidth : legendWidth;
var newFontSize = 1;
var textHeight = (0, helper_functions_1.GetTextHeight)(fontFamily, "".concat(newFontSize, "em"), label, "".concat(cssStyle), "".concat(availableWidth - nonTextualWidth, "px"));
var textWidth = (0, helper_functions_1.GetTextWidth)(fontFamily, "".concat(newFontSize, "em"), label, "".concat(cssStyle), "".concat(textHeight, "px"));
var useML = false;
context.RequestLegendWidth(textWidth + nonTextualWidth, guid);
while (newFontSize > 0.4 && (textWidth > availableWidth - nonTextualWidth || textHeight > legendHeight)) {
newFontSize -= 0.05;
textWidth = (0, helper_functions_1.GetTextWidth)(fontFamily, "".concat(newFontSize, "em"), label, "".concat(cssStyle), "".concat(legendHeight, "px"), "".concat(useML ? 'normal' : undefined), "".concat(availableWidth - nonTextualWidth, "px"));
textHeight = (0, helper_functions_1.GetTextHeight)(fontFamily, "".concat(newFontSize, "em"), label, "".concat(cssStyle), "".concat(availableWidth - nonTextualWidth, "px"), "".concat(useML ? 'normal' : undefined));
useML = false;
// Consider special case when width is limiting but height is available
if (textWidth >= (availableWidth - nonTextualWidth) && textHeight < legendHeight) {
useML = true;
textHeight = (0, helper_functions_1.GetTextHeight)(fontFamily, "".concat(newFontSize, "em"), label, "".concat(cssStyle), "".concat(availableWidth - nonTextualWidth, "px"), "".concat(useML ? 'normal' : undefined));
textWidth = (0, helper_functions_1.GetTextWidth)(fontFamily, "".concat(newFontSize, "em"), label, "".concat(cssStyle), "".concat(legendHeight, "px"), "".concat(useML ? 'normal' : undefined), "".concat(availableWidth - nonTextualWidth, "px"));
}
}
context.RegisterFontSize(guid, newFontSize);
setUseMultiLine(useML);
}, [label, legendWidth, legendHeight, props.size, props.hasNoData, guid, context.RegisterFontSize]);
React.useEffect(function () {
return function () {
context.UnRegisterFontSize(guid);
};
}, [guid]);
return (React.createElement("div", { style: { height: legendHeight, width: legendWidth }, ref: containerRef },
React.createElement("div", { onClick: function () { return props.setEnabled(!props.enabled); }, style: { width: '100%', display: 'flex', alignItems: 'center', marginRight: '5px', height: '100%' } },
(props.lineStyle === '-' ?
React.createElement("div", { style: {
width: '10px',
height: 0,
borderTop: "2px solid ".concat(props.color),
borderRight: "10px solid ".concat(props.color),
borderBottom: "2px solid ".concat(props.color),
borderLeft: "10px solid ".concat(props.color),
overflow: 'hidden',
marginRight: '5px',
opacity: (props.enabled ? 1 : 0.5)
} }) :
React.createElement("div", { style: {
width: '10px',
height: '4px',
borderTop: 'none',
borderRight: "3px solid ".concat(props.color),
borderBottom: 'none',
borderLeft: "3px solid ".concat(props.color),
overflow: 'hidden',
marginRight: '5px',
opacity: (props.enabled ? 1 : 0.5)
} })),
React.createElement("label", { style: {
fontFamily: fontFamily,
fontWeight: 400,
display: 'inline-block',
margin: 'auto',
marginLeft: 0,
fontSize: context.SmallestFontSize + 'em',
whiteSpace: (useMultiLine ? 'normal' : 'nowrap')
} }, label))));
}
exports.default = LineLegend;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGluZUxlZ2VuZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9MaW5lTGVnZW5kLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEseUdBQXlHO0FBQ3pHLHlCQUF5QjtBQUN6QixFQUFFO0FBQ0YscUVBQXFFO0FBQ3JFLEVBQUU7QUFDRix3R0FBd0c7QUFDeEcsd0dBQXdHO0FBQ3hHLHNHQUFzRztBQUN0Ryx3RkFBd0Y7QUFDeEYsRUFBRTtBQUNGLDBDQUEwQztBQUMxQyxFQUFFO0FBQ0Ysd0dBQXdHO0FBQ3hHLHdHQUF3RztBQUN4Ryw0RUFBNEU7QUFDNUUsRUFBRTtBQUNGLDhCQUE4QjtBQUM5Qix3R0FBd0c7QUFDeEcsMEJBQTBCO0FBQzFCLG1EQUFtRDtBQUNuRCxFQUFFO0FBQ0YseUdBQXlHOzs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFHekcsNkJBQStCO0FBRS9CLG1FQUE0RztBQUM1Ryx5REFBb0Q7QUFDcEQsaURBQXNFO0FBVXRFLElBQU0sVUFBVSxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsVUFBVSxDQUFDO0FBQ3JFLElBQU0sZUFBZSxHQUFHLEVBQUUsQ0FBQztBQUMzQixJQUFNLFFBQVEsR0FBRyw0RkFBcUYsVUFBVSxNQUFHLENBQUE7QUFDbkgsSUFBTSxjQUFjLEdBQUcsSUFBQSxvQ0FBaUIsR0FBRSxDQUFDO0FBRTNDLFNBQVMsVUFBVSxDQUFDLEtBQWE7SUFDN0IsSUFBTSxZQUFZLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBd0IsSUFBSSxDQUFDLENBQUM7SUFFekQsSUFBQSxLQUFBLE9BQW9CLEtBQUssQ0FBQyxRQUFRLENBQVMsS0FBSyxDQUFDLEtBQUssQ0FBQyxJQUFBLEVBQXRELEtBQUssUUFBQSxFQUFFLFFBQVEsUUFBdUMsQ0FBQztJQUN4RCxJQUFBLEtBQUEsT0FBK0IsS0FBSyxDQUFDLFFBQVEsQ0FBUyxHQUFHLENBQUMsSUFBQSxFQUF6RCxXQUFXLFFB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