@gpa-gemstone/react-graph
Version:
Interactive UI Components for GPA products
109 lines • 13.2 kB
JavaScript
"use strict";
// ******************************************************************************************************
// HeatLegend.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:
// ----------------------------------------------------------------------------------------------------
// 11/21/2023 - G. Santos
// 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 LegendContext_1 = require("./LegendContext");
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
var SvgStyle = {
fill: 'none',
userSelect: 'none',
WebkitTouchCallout: 'none',
WebkitUserSelect: 'none',
KhtmlUserSelect: 'none',
MozUserSelect: 'none',
msUserSelect: 'none',
pointerEvents: 'none',
};
var TextStyle = {
fontSize: '1em',
textAnchor: 'middle',
dominantBaseline: 'hanging',
transition: 'x 0.5s, y 0.5s'
};
function HeatLegend(props) {
var _a = __read(React.useState(100), 2), wLegend = _a[0], setWLegend = _a[1];
var _b = __read(React.useState(100), 2), hLegend = _b[0], setHLegend = _b[1];
var _c = __read(React.useState(1), 2), nDigits = _c[0], setNdigits = _c[1];
var _d = __read(React.useState(''), 2), guid = _d[0], setGuid = _d[1];
var context = React.useContext(LegendContext_1.LegendContext);
// Effect to update the legend's width and height based on the container's dimensions
React.useEffect(function () { return setWLegend(props.size === 'sm' ? context.SmWidth : context.LgWidth); }, [context.LgWidth, context.SmWidth, props.size]);
React.useEffect(function () { return setHLegend(props.size === 'sm' ? context.SmHeight : context.LgHeight); }, [context.SmHeight, context.LgHeight, props.size]);
// Determine the number of decimal digits to display based on the value range
React.useEffect(function () {
var delta = props.maxValue - props.minValue;
if (delta === 0)
delta = Math.abs(props.minValue);
if (delta >= 15)
setNdigits(0);
if (delta < 15 && delta >= 1.5)
setNdigits(1);
if (delta < 1.5 && delta >= 0.15)
setNdigits(2);
if (delta < 0.15)
setNdigits(3);
if (delta < 0.015)
setNdigits(4);
if (delta < 0.0015)
setNdigits(5);
if (delta === 0)
setNdigits(2);
}, [props.maxValue, props.minValue]);
// Generate a unique ID for the gradient and request space for the legend
React.useEffect(function () {
var id = (0, helper_functions_1.CreateGuid)();
setGuid(id);
context.RequestLegendWidth(50, id);
return function () { context.RequestLegendWidth(-1, id); };
}, []);
return (React.createElement("div", { style: { height: hLegend, width: wLegend } },
React.createElement("div", { style: { width: '100%', display: 'flex', alignItems: 'center', marginRight: '5px', height: '100%' } },
React.createElement("svg", { style: SvgStyle, viewBox: "0 0 ".concat(wLegend, " ").concat(hLegend) },
React.createElement("linearGradient", { id: guid, x1: "0", x2: "".concat(wLegend < hLegend ? 0 : 1), y1: "0", y2: "".concat(wLegend < hLegend ? 1 : 0) },
React.createElement("stop", { offset: "5%", stopColor: props.minColor }),
React.createElement("stop", { offset: "95%", stopColor: props.maxColor })),
React.createElement("path", { stroke: 'currentColor', fill: "url(#".concat(guid, ")"), style: { strokeWidth: 1, transition: 'd 0.5s' }, d: wLegend < hLegend ?
"M ".concat(0.05 * wLegend, " ").concat(0.1 * hLegend, " H ").concat(0.5 * wLegend, " V ").concat(0.9 * hLegend, " H ").concat(0.05 * wLegend, " V ").concat(0.1 * hLegend) :
"M ".concat(0.1 * wLegend, " ").concat(0.05 * hLegend, " H ").concat(0.9 * wLegend, " V ").concat(0.5 * hLegend, " H ").concat(0.1 * wLegend, " V ").concat(0.05 * hLegend) }),
React.createElement("text", { fill: 'currentColor', style: TextStyle, x: wLegend * (wLegend < hLegend ? 0.5 : 0.1), y: hLegend * (wLegend < hLegend ? 0.1 : 0.5), transform: "rotate(".concat(wLegend < hLegend ? 270 : 0, ",").concat(wLegend * (wLegend < hLegend ? 0.5 : 0.1), ",").concat(hLegend * (wLegend < hLegend ? 0.1 : 0.5), ")") }, "".concat(props.minValue.toFixed(nDigits)).concat(props.unitLabel !== undefined ? "".concat(props.unitLabel) : '')),
React.createElement("text", { fill: 'currentColor', style: TextStyle, x: wLegend * (wLegend < hLegend ? 0.5 : 0.9), y: hLegend * (wLegend < hLegend ? 0.9 : 0.5), transform: "rotate(".concat(wLegend < hLegend ? 270 : 0, ",").concat(wLegend * (wLegend < hLegend ? 0.5 : 0.9), ",").concat(hLegend * (wLegend < hLegend ? 0.9 : 0.5), ")") }, "".concat(props.maxValue.toFixed(nDigits)).concat(props.unitLabel !== undefined ? "".concat(props.unitLabel) : ''))))));
}
exports.default = HeatLegend;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVhdExlZ2VuZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9IZWF0TGVnZW5kLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEseUdBQXlHO0FBQ3pHLHlCQUF5QjtBQUN6QixFQUFFO0FBQ0YscUVBQXFFO0FBQ3JFLEVBQUU7QUFDRix3R0FBd0c7QUFDeEcsd0dBQXdHO0FBQ3hHLHNHQUFzRztBQUN0Ryx3RkFBd0Y7QUFDeEYsRUFBRTtBQUNGLDBDQUEwQztBQUMxQyxFQUFFO0FBQ0Ysd0dBQXdHO0FBQ3hHLHdHQUF3RztBQUN4Ryw0RUFBNEU7QUFDNUUsRUFBRTtBQUNGLDhCQUE4QjtBQUM5Qix3R0FBd0c7QUFDeEcsMEJBQTBCO0FBQzFCLG1EQUFtRDtBQUNuRCxFQUFFO0FBQ0YseUdBQXlHOzs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFHekcsNkJBQStCO0FBQy9CLGlEQUFzRTtBQUN0RSxtRUFBNEQ7QUFXNUQsSUFBTSxRQUFRLEdBQXdCO0lBQ3BDLElBQUksRUFBRSxNQUFNO0lBQ1osVUFBVSxFQUFFLE1BQU07SUFDbEIsa0JBQWtCLEVBQUUsTUFBTTtJQUMxQixnQkFBZ0IsRUFBRSxNQUFNO0lBQ3hCLGVBQWUsRUFBRSxNQUFNO0lBQ3ZCLGFBQWEsRUFBRSxNQUFNO0lBQ3JCLFlBQVksRUFBRSxNQUFNO0lBQ3BCLGFBQWEsRUFBRSxNQUFNO0NBQ3RCLENBQUM7QUFFRixJQUFNLFNBQVMsR0FBd0I7SUFDckMsUUFBUSxFQUFFLEtBQUs7SUFDZixVQUFVLEVBQUUsUUFBUTtJQUNwQixnQkFBZ0IsRUFBRSxTQUFTO0lBQzNCLFVBQVUsRUFBRSxnQkFBZ0I7Q0FDN0IsQ0FBQztBQUVGLFNBQVMsVUFBVSxDQUFDLEtBQWE7SUFDekIsSUFBQSxLQUFBLE9BQXdCLEtBQUssQ0FBQyxRQUFRLENBQVMsR0FBRyxDQUFDLElBQUEsRUFBbEQsT0FBTyxRQUFBLEVBQUUsVUFBVSxRQUErQixDQUFDO0lBQ3BELElBQUEsS0FBQSxPQUF3QixL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SyxHQUFHLEdBQUMsT0FBTyxjQUFJLElBQUksR0FBQyxPQUFPLGdCQUFNLEdBQUcsR0FBQyxPQUFPLGdCQUFNLEdBQUcsR0FBQyxPQUFPLGdCQUFNLEdBQUcsR0FBQyxPQUFPLGdCQUFNLElBQUksR0FBQyxPQUFPLENBQUUsR0FDM0c7Z0JBR0YsOEJBQU0sSUFBSSxFQUFFLGNBQWMsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxPQUFPLEdBQUMsQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsRUFBRSxPQUFPLEdBQUMsQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUNsSSxTQUFTLEVBQUUsaUJBQVUsT0FBTyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLGNBQUksT0FBTyxHQUFDLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsY0FBSSxPQUFPLEdBQUMsQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxNQUFHLElBQ3RJLFVBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLFNBQUcsS0FBSyxDQUFDLFNBQVMsS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLFVBQUcsS0FBSyxDQUFDLFNBQVMsQ0FBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUUsQ0FDNUY7Z0JBRVQsOEJBQU0sSUFBSSxFQUFFLGNBQWMsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxPQUFPLEdBQUMsQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsRUFBRSxPQUFPLEdBQUMsQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUNsSSxTQUFTLEVBQUUsaUJBQVUsT0FBTyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLGNBQUksT0FBTyxHQUFDLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsY0FBSSxPQUFPLEdBQUMsQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxNQUFHLElBQ3RJLFVBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLFNBQUcsS0FBSyxDQUFDLFNBQVMsS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLFVBQUcsS0FBSyxDQUFDLFNBQVMsQ0FBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUUsQ0FDNUYsQ0FDSCxDQUNGLENBQ0YsQ0FDUCxDQUFDO0FBQ0osQ0FBQztBQUVELGtCQUFlLFVBQVUsQ0FBQyJ9