@gpa-gemstone/react-graph
Version:
Interactive UI Components for GPA products
125 lines • 14.8 kB
JavaScript
;
// ******************************************************************************************************
// Circle.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/02/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 });
exports.ContextlessCircle = ContextlessCircle;
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
var React = require("react");
var GraphContext_1 = require("./GraphContext");
function ContextlessCircle(props) {
/*
Circle with basic styling
*/
var _a = __read(React.useState(""), 2), guid = _a[0], setGuid = _a[1];
var _b = __read(React.useState(1), 2), textSize = _b[0], setTextSize = _b[1];
// Update data series information in the graph context based on circle properties
React.useEffect(function () {
if (guid === "")
return;
props.context.UpdateData(guid, {
axis: props.circleProps.axis,
legend: undefined,
getMax: function (t) { return (t[0] < props.circleProps.data[0] && t[1] > props.circleProps.data[0] ? props.circleProps.data[1] : undefined); },
getMin: function (t) { return (t[0] < props.circleProps.data[0] && t[1] > props.circleProps.data[0] ? props.circleProps.data[1] : undefined); },
});
}, [props.circleProps]);
// Add a new data series on component mount / removing on unmount
React.useEffect(function () {
var id = props.context.AddData({
axis: props.circleProps.axis,
legend: undefined,
getMax: function (t) { return (t[0] < props.circleProps.data[0] && t[1] > props.circleProps.data[0] ? props.circleProps.data[1] : undefined); },
getMin: function (t) { return (t[0] < props.circleProps.data[0] && t[1] > props.circleProps.data[0] ? props.circleProps.data[1] : undefined); },
});
setGuid(id);
return function () { props.context.RemoveData(id); };
}, []);
// Adjust text size within the circle to ensure it fits
React.useEffect(function () {
if (props.circleProps.text === undefined)
return;
var tSize = 5;
var dX = (0, helper_functions_1.GetTextWidth)("Segoe UI", tSize + "em", props.circleProps.text);
var dY = (0, helper_functions_1.GetTextHeight)("Segoe UI", tSize + "em", props.circleProps.text);
while ((dX > 2 * props.circleProps.radius || dY > 2 * props.circleProps.radius) && tSize > 0.05) {
tSize = tSize - 0.01;
dX = (0, helper_functions_1.GetTextWidth)("Segoe UI", tSize + "em", props.circleProps.text);
dY = (0, helper_functions_1.GetTextHeight)("Segoe UI", tSize + "em", props.circleProps.text);
}
setTextSize(tSize);
}, [props.circleProps.text, props.circleProps.radius]);
// Set up a click handler if provided in props
React.useEffect(function () {
if (guid === "" || props.circleProps.onClick === undefined)
return;
props.context.UpdateSelect(guid, {
onClick: onClick
});
}, [props.circleProps.onClick, props.context.UpdateFlag]);
// Handle click events on the circle
function onClick(x, y) {
if (props.circleProps.onClick === undefined)
return;
// Calculate positions and determine if the click was within the circle bounds
var axis = GraphContext_1.AxisMap.get(props.circleProps.axis);
var xP = props.context.XTransformation(x);
var yP = props.context.YTransformation(y, axis);
var xC = props.context.XTransformation(props.circleProps.data[0]);
var yC = props.context.YTransformation(props.circleProps.data[1], axis);
if (xP <= xC + props.circleProps.radius && xP >= xC - props.circleProps.radius &&
yP <= yC + props.circleProps.radius && yP >= yC - props.circleProps.radius)
props.circleProps.onClick({
setYDomain: props.context.SetYDomain,
setTDomain: props.context.SetXDomain
});
}
// Render null if coordinates are not valid, otherwise render the circle / text
if (!isFinite(props.context.XTransformation(props.circleProps.data[0])) || !isFinite(props.context.YTransformation(props.circleProps.data[1], GraphContext_1.AxisMap.get(props.circleProps.axis))))
return null;
return (React.createElement("g", null,
React.createElement("circle", { r: props.circleProps.radius, cx: props.context.XTransformation(props.circleProps.data[0]), cy: props.context.YTransformation(props.circleProps.data[1], GraphContext_1.AxisMap.get(props.circleProps.axis)), fill: props.circleProps.color, opacity: props.circleProps.opacity, stroke: props.circleProps.borderColor, strokeWidth: props.circleProps.borderThickness }),
props.circleProps.text !== undefined ? React.createElement("text", { fill: 'currentColor', style: { fontSize: textSize + 'em', textAnchor: 'middle', dominantBaseline: 'middle' }, y: props.context.YTransformation(props.circleProps.data[1], GraphContext_1.AxisMap.get(props.circleProps.axis)), x: props.context.XTransformation(props.circleProps.data[0]) }, props.circleProps.text) : null));
}
// Higher-order component that uses GraphContext to pass down context to the ContextlessCircle
var Circle = function (props) {
var context = React.useContext(GraphContext_1.GraphContext);
return React.createElement(ContextlessCircle, { circleProps: props, context: context });
};
exports.default = Circle;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2lyY2xlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL0NpcmNsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLHlHQUF5RztBQUN6RyxxQkFBcUI7QUFDckIsRUFBRTtBQUNGLHFFQUFxRTtBQUNyRSxFQUFFO0FBQ0Ysd0dBQXdHO0FBQ3hHLHdHQUF3RztBQUN4RyxzR0FBc0c7QUFDdEcsd0ZBQXdGO0FBQ3hGLEVBQUU7QUFDRiwwQ0FBMEM7QUFDMUMsRUFBRTtBQUNGLHdHQUF3RztBQUN4Ryx3R0FBd0c7QUFDeEcsNEVBQTRFO0FBQzVFLEVBQUU7QUFDRiw4QkFBOEI7QUFDOUIsd0dBQXdHO0FBQ3hHLDBCQUEwQjtBQUMxQixtREFBbUQ7QUFDbkQsRUFBRTtBQUNGLHlHQUF5Rzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBd0J6Ryw4Q0EwR0M7QUEvSEQsbUVBQTZFO0FBQzdFLDZCQUErQjtBQUMvQiwrQ0FBOEg7QUFtQjlILFNBQWdCLGlCQUFpQixDQUFDLEtBQXdCO0lBQ3hEOztNQUVFO0lBQ0ksSUFBQSxLQUFBLE9BQWtCLEtBQUssQ0FBQyxRQUFRLENBQVMsRUFBRSxDQUFDLElBQUEsRUFBM0MsSUFBSSxRQUFBLEVBQUUsT0FBTyxRQUE4QixDQUFDO0lBQzdDLElBQUEsS0FBQSxPQUEwQixLQUFLLENBQUMsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQWxELFFBQVEsUUFBQSxFQUFFLFdBQVcsUUFBNkIsQ0FBQztJQUUxRCxpRkFBaUY7SUFDakYsS0FBSyxDQUFDLFNBQVMsQ0FBQztRQUNkLElBQUksSUFBSSxLQUFLLEVBQUU7WUFDWCxPQUFPO1FBRVgsS0FBSyxDQUFDLE9BQU8sQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFO1lBQzNCLElBQUksRUFBRSxLQUFLLENBQUMsV0FBVyxDQUFDLElBQUk7WUFDNUIsTUFBTSxFQUFFLFNBQVM7WUFDakIsTUFBTSxFQUFFLFVBQUMsQ0FBQyxJQUFLLE9BQUEsQ0FBQyxDQUFDLENB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