@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
840 lines • 37 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useRef, useEffect, useState } from "react";
import { HUDUniversalHUDUtilityManager } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import { useIdleDetection } from "../HUDManagers/HUDUniversalHUDEventEffectsManager.js";
var renderTooltip = function renderTooltip(_ref) {
var x = _ref.x,
y = _ref.y,
label = _ref.label,
value = _ref.value,
xValue = _ref.xValue,
yValue = _ref.yValue,
_ref$toolTipConfigura = _ref.toolTipConfigurationSettings,
toolTipConfigurationSettings = _ref$toolTipConfigura === void 0 ? {} : _ref$toolTipConfigura,
_ref$labelConfigurati = _ref.labelConfigurationSettings,
labelConfigurationSettings = _ref$labelConfigurati === void 0 ? {} : _ref$labelConfigurati,
_ref$valueConfigurati = _ref.valueConfigurationSettings,
valueConfigurationSettings = _ref$valueConfigurati === void 0 ? {} : _ref$valueConfigurati;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
fontSize: toolTipConfigurationSettings.fontSize || "12px",
boxShadow: toolTipConfigurationSettings.boxShadow || "0px 4px 8px rgba(0, 227, 255, 0.269)",
border: toolTipConfigurationSettings.border || "1px solid #00FFDD",
borderRadius: toolTipConfigurationSettings.borderRadius || "8px",
background: toolTipConfigurationSettings.backgroundColor || "linear-gradient(90deg, rgba(0, 255, 255, 0.169), rgba(0, 255, 255, 0.069))",
color: toolTipConfigurationSettings.color || "rgba(0, 255, 255, 1)",
zIndex: "1000",
padding: toolTipConfigurationSettings.padding || "10px",
left: "".concat(x, "px"),
top: "".concat(y, "px")
}, toolTipConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
fontWeight: "869",
marginBottom: "4px"
}, labelConfigurationSettings)
}, label), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
fontWeight: "569",
marginBottom: "4px"
}, valueConfigurationSettings)
}, value), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({}, valueConfigurationSettings)
}, "X: ", xValue, " | Y: ", yValue));
};
function HUDLineChart(_ref2) {
var _ref2$dataPointToolti = _ref2.dataPointTooltipLabelConfigurationSettings,
dataPointTooltipLabelConfigurationSettings = _ref2$dataPointToolti === void 0 ? {} : _ref2$dataPointToolti,
_ref2$dataPointToolti2 = _ref2.dataPointTooltipValueConfigurationSettings,
dataPointTooltipValueConfigurationSettings = _ref2$dataPointToolti2 === void 0 ? {} : _ref2$dataPointToolti2,
_ref2$dataPointToolti3 = _ref2.dataPointTooltipConfigurationSettings,
dataPointTooltipConfigurationSettings = _ref2$dataPointToolti3 === void 0 ? {} : _ref2$dataPointToolti3,
_ref2$xAxisTitleConfi = _ref2.xAxisTitleConfigurationSettings,
xAxisTitleConfigurationSettings = _ref2$xAxisTitleConfi === void 0 ? {} : _ref2$xAxisTitleConfi,
_ref2$yAxisTitleConfi = _ref2.yAxisTitleConfigurationSettings,
yAxisTitleConfigurationSettings = _ref2$yAxisTitleConfi === void 0 ? {} : _ref2$yAxisTitleConfi,
_ref2$xAxisLabelConfi = _ref2.xAxisLabelConfigurationSettings,
xAxisLabelConfigurationSettings = _ref2$xAxisLabelConfi === void 0 ? {} : _ref2$xAxisLabelConfi,
_ref2$yAxisLabelConfi = _ref2.yAxisLabelConfigurationSettings,
yAxisLabelConfigurationSettings = _ref2$yAxisLabelConfi === void 0 ? {} : _ref2$yAxisLabelConfi,
_ref2$toolTipConfigur = _ref2.toolTipConfigurationSettings,
toolTipConfigurationSettings = _ref2$toolTipConfigur === void 0 ? {} : _ref2$toolTipConfigur,
_ref2$canvasConfigura = _ref2.canvasConfigurationSettings,
canvasConfigurationSettings = _ref2$canvasConfigura === void 0 ? {} : _ref2$canvasConfigura,
_ref2$titleConfigurat = _ref2.titleConfigurationSettings,
titleConfigurationSettings = _ref2$titleConfigurat === void 0 ? {} : _ref2$titleConfigurat,
_ref2$pointConfigurat = _ref2.pointConfigurationSettings,
pointConfigurationSettings = _ref2$pointConfigurat === void 0 ? {} : _ref2$pointConfigurat,
_ref2$yThreshold = _ref2.yThreshold,
yThreshold = _ref2$yThreshold === void 0 ? {
mode: "above",
value: null,
min: null,
max: null,
color: "cyan",
lineWidth: 1,
dash: [5, 5]
} : _ref2$yThreshold,
_ref2$xThreshold = _ref2.xThreshold,
xThreshold = _ref2$xThreshold === void 0 ? {
mode: null,
value: null,
min: null,
max: null,
color: "cyan",
lineWidth: 1,
dash: [5, 5]
} : _ref2$xThreshold,
_ref2$dataPointDataID = _ref2.dataPointDataID,
dataPointDataID = _ref2$dataPointDataID === void 0 ? "" : _ref2$dataPointDataID,
data = _ref2.data,
series = _ref2.series,
title = _ref2.title,
xAxisTitle = _ref2.xAxisTitle,
yAxisTitle = _ref2.yAxisTitle,
_ref2$color = _ref2.color,
color = _ref2$color === void 0 ? "#00FFDD" : _ref2$color,
_ref2$showDataPointTo = _ref2.showDataPointToolTips,
showDataPointToolTips = _ref2$showDataPointTo === void 0 ? true : _ref2$showDataPointTo,
_ref2$showDataCurve = _ref2.showDataCurve,
showDataCurve = _ref2$showDataCurve === void 0 ? true : _ref2$showDataCurve,
_ref2$showCallouts = _ref2.showCallouts,
showCallouts = _ref2$showCallouts === void 0 ? true : _ref2$showCallouts,
_ref2$showPoints = _ref2.showPoints,
showPoints = _ref2$showPoints === void 0 ? true : _ref2$showPoints,
_ref2$dataPointSize = _ref2.dataPointSize,
dataPointSize = _ref2$dataPointSize === void 0 ? 3 : _ref2$dataPointSize,
_ref2$chartToolTip = _ref2.chartToolTip,
chartToolTip = _ref2$chartToolTip === void 0 ? null : _ref2$chartToolTip,
_ref2$chartCallout = _ref2.chartCallout,
chartCallout = _ref2$chartCallout === void 0 ? null : _ref2$chartCallout,
_ref2$threeDDisplay = _ref2.threeDDisplay,
threeDDisplay = _ref2$threeDDisplay === void 0 ? false : _ref2$threeDDisplay,
_ref2$maxTilt = _ref2.maxTilt,
maxTilt = _ref2$maxTilt === void 0 ? 20 : _ref2$maxTilt,
_ref2$predefinedTilt = _ref2.predefinedTilt,
predefinedTilt = _ref2$predefinedTilt === void 0 ? {
x: 0,
y: 0,
z: 0
} : _ref2$predefinedTilt,
_ref2$dataCurveOpacit = _ref2.dataCurveOpacityStartStop,
dataCurveOpacityStartStop = _ref2$dataCurveOpacit === void 0 ? 0.0269 : _ref2$dataCurveOpacit,
_ref2$dataCurveOpacit2 = _ref2.dataCurveOpacityFinishStop,
dataCurveOpacityFinishStop = _ref2$dataCurveOpacit2 === void 0 ? 0.869 : _ref2$dataCurveOpacit2,
_ref2$dataCurveFinish = _ref2.dataCurveFinishColor,
dataCurveFinishColor = _ref2$dataCurveFinish === void 0 ? "#00ffff" : _ref2$dataCurveFinish,
_ref2$dataCurveStartC = _ref2.dataCurveStartColor,
dataCurveStartColor = _ref2$dataCurveStartC === void 0 ? "#00ffff" : _ref2$dataCurveStartC,
_ref2$dataCurveShadow = _ref2.dataCurveShadowMode,
dataCurveShadowMode = _ref2$dataCurveShadow === void 0 ? "linear" : _ref2$dataCurveShadow,
_ref2$dataCurveDropOf = _ref2.dataCurveDropOffOpacity,
dataCurveDropOffOpacity = _ref2$dataCurveDropOf === void 0 ? 0 : _ref2$dataCurveDropOf,
_ref2$dataCurveTopOpa = _ref2.dataCurveTopOpacity,
dataCurveTopOpacity = _ref2$dataCurveTopOpa === void 0 ? 0.369 : _ref2$dataCurveTopOpa,
_ref2$chartWidth = _ref2.chartWidth,
chartWidth = _ref2$chartWidth === void 0 ? 1269 : _ref2$chartWidth,
_ref2$chartHeight = _ref2.chartHeight,
chartHeight = _ref2$chartHeight === void 0 ? 800 : _ref2$chartHeight,
_ref2$lineType = _ref2.lineType,
lineType = _ref2$lineType === void 0 ? "auto" : _ref2$lineType,
_ref2$yAxisMin = _ref2.yAxisMin,
yAxisMin = _ref2$yAxisMin === void 0 ? null : _ref2$yAxisMin,
_ref2$yAxisMax = _ref2.yAxisMax,
yAxisMax = _ref2$yAxisMax === void 0 ? null : _ref2$yAxisMax,
_ref2$initialZoom = _ref2.initialZoom,
initialZoom = _ref2$initialZoom === void 0 ? 1 : _ref2$initialZoom,
_ref2$customSidePanel = _ref2.customSidePanel,
customSidePanel = _ref2$customSidePanel === void 0 ? null : _ref2$customSidePanel;
var _useState = useState({
width: chartWidth,
height: chartHeight
}),
_useState2 = _slicedToArray(_useState, 2),
canvasSize = _useState2[0],
setCanvasSize = _useState2[1];
var _useState3 = useState({
display: false,
x: 0,
y: 0,
value: null,
label: null
}),
_useState4 = _slicedToArray(_useState3, 2),
tooltip = _useState4[0],
setTooltip = _useState4[1];
var _useState5 = useState(predefinedTilt),
_useState6 = _slicedToArray(_useState5, 2),
hoverTilt = _useState6[0],
setHoverTilt = _useState6[1];
var _useState7 = useState(initialZoom),
_useState8 = _slicedToArray(_useState7, 2),
zoom = _useState8[0],
setZoom = _useState8[1];
var _useState9 = useState([0, Math.min(Math.floor(data.length / initialZoom), data.length - 1)]),
_useState10 = _slicedToArray(_useState9, 2),
dataRange = _useState10[0],
setDataRange = _useState10[1];
var _useState11 = useState(0),
_useState12 = _slicedToArray(_useState11, 2),
panOffset = _useState12[0],
setPanOffset = _useState12[1];
var _useState13 = useState(false),
_useState14 = _slicedToArray(_useState13, 2),
mouseMoving = _useState14[0],
setMouseMoving = _useState14[1];
var _useState15 = useState(false),
_useState16 = _slicedToArray(_useState15, 2),
isPanning = _useState16[0],
setIsPanning = _useState16[1];
var animatingLineRef = useRef(false);
var canvasRef = useRef(null);
var mouseMoveTimeout = useIdleDetection(function () {
setMouseMoving(false);
}, 469);
var updateDataRange = function updateDataRange(newZoom, offset) {
var rangeSize = Math.min(Math.max(1, Math.floor(data.length / newZoom)), data.length);
var newRangeStart = Math.max(0, Math.min(offset, data.length - rangeSize));
var newRangeEnd = Math.min(data.length - 1, newRangeStart + rangeSize - 1);
setDataRange([newRangeStart, newRangeEnd]);
};
var handlePanStart = function handlePanStart(event) {
setIsPanning(true);
event.preventDefault();
};
var handlePanMove = function handlePanMove(event) {
if (!isPanning) return;
var movement = Math.floor(event.movementX / 5);
var newPanOffset = Math.max(0, Math.min(panOffset - movement, data.length - (dataRange[1] - dataRange[0] + 1)));
setPanOffset(newPanOffset);
};
var handlePanEnd = function handlePanEnd() {
return setIsPanning(false);
};
var handleMouseLeave = function handleMouseLeave(e) {
setTooltip({
display: false,
x: 0,
y: 0,
value: null,
label: null
});
};
var shouldShowValue = function shouldShowValue(value, axisThreshold, axisMode) {
if (axisThreshold.value === null) {
return true;
}
switch (axisMode) {
case "above":
return value > axisThreshold.value;
case "below":
return value < axisThreshold.value;
case "between":
if (axisThreshold.min !== null && axisThreshold.max !== null) {
return value > axisThreshold.min && value < axisThreshold.max;
}
return true;
default:
return true;
}
};
var adjustColorSaturationAndOpacity = function adjustColorSaturationAndOpacity(color, factor, opacity) {
var _color$match$map = color.match(/\w\w/g).map(function (c) {
return parseInt(c, 16);
}),
_color$match$map2 = _slicedToArray(_color$match$map, 3),
r = _color$match$map2[0],
g = _color$match$map2[1],
b = _color$match$map2[2];
r = Math.min(255, Math.floor(r * factor));
g = Math.min(255, Math.floor(g * factor));
b = Math.min(255, Math.floor(b * factor));
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
};
useEffect(function () {
var updateCanvasSize = function updateCanvasSize() {
if (canvasRef.current && canvasRef.current.parentNode) {
var width = canvasRef.current.parentNode.offsetWidth || chartWidth;
var height = canvasRef.current.parentNode.offsetHeight || chartHeight;
setCanvasSize({
width: width,
height: height
});
}
};
updateCanvasSize();
window.addEventListener("resize", updateCanvasSize);
var canvas = canvasRef.current;
var handleZoom = function handleZoom(event) {
event.preventDefault();
var scale = event.deltaY < 0 ? 1.2 : 0.8;
setZoom(function (prevZoom) {
return Math.max(0.1, Math.min(prevZoom * scale, 50));
});
};
canvas.addEventListener("wheel", handleZoom, {
passive: false
});
return function () {
window.removeEventListener("resize", updateCanvasSize);
canvas.removeEventListener("wheel", handleZoom);
};
}, []);
useEffect(function () {
updateDataRange(zoom, panOffset);
}, [zoom, panOffset, data.length]);
useEffect(function () {
if (!canvasRef.current || !series || series.length === 0) {
console.error("Canvas reference or series invalid.");
return;
}
var canvas = canvasRef.current;
var context = canvas.getContext("2d");
var width = canvasSize.width,
height = canvasSize.height;
if (!context) {
console.error("Did not get 2D context.");
return;
}
context.clearRect(0, 0, width, height);
var visibleData = data.slice(dataRange[0], dataRange[1] + 1);
var allValues = visibleData.reduce(function (acc, d) {
series.forEach(function (serie) {
return acc.push(d[serie.key]);
});
return acc;
}, []);
if (allValues.length === 0) {
console.warn("No values to plot.");
return;
}
var maxValue = yAxisMax !== null ? yAxisMax : Math.max.apply(Math, _toConsumableArray(allValues));
var minValue = yAxisMin !== null ? yAxisMin : Math.min.apply(Math, _toConsumableArray(allValues));
var valueRange = maxValue - minValue;
var padding = 80;
var innerWidth = width - padding * 2;
var innerHeight = height - padding * 2;
context.fillStyle = "#1A1B1E";
context.fillRect(0, 0, width, height);
context.strokeStyle = "#00FFDD";
context.lineWidth = 2;
context.shadowColor = "#00FFDD";
context.shadowBlur = 20;
context.beginPath();
context.moveTo(padding, padding);
context.lineTo(padding, height - padding);
context.lineTo(width - padding, height - padding);
context.stroke();
context.strokeStyle = "rgba(255, 255, 255, 0.1)";
context.lineWidth = 1;
context.setLineDash([5, 5]);
for (var i = 0; i <= 5; i++) {
var y = height - padding - i / 5 * innerHeight;
context.beginPath();
context.moveTo(padding, y);
context.lineTo(width - padding, y);
context.stroke();
}
context.setLineDash([]);
var determineLineType = function determineLineType() {
if (lineType !== "auto") {
return lineType;
}
return visibleData.length < 3 ? "linear" : "curve";
};
var selectedLineType = determineLineType();
var drawLine = function drawLine(context, data, x, y, colorFactor, opacity) {
context.beginPath();
context.moveTo(x[0], y[0]);
switch (selectedLineType) {
case "curve":
for (var _i = 1; _i < data.length - 1; _i++) {
var xc = (x[_i] + x[_i + 1]) / 2;
var yc = (y[_i] + y[_i + 1]) / 2;
context.quadraticCurveTo(x[_i], y[_i], xc, yc);
}
context.quadraticCurveTo(x[x.length - 2], y[y.length - 2], x[x.length - 1], y[y.length - 1]);
break;
case "step":
for (var _i2 = 0; _i2 < data.length; _i2++) {
context.lineTo(x[_i2], y[_i2]);
if (_i2 < data.length - 1) {
context.lineTo(x[_i2 + 1], y[_i2]);
}
}
break;
default:
for (var _i3 = 0; _i3 < data.length; _i3++) {
context.lineTo(x[_i3], y[_i3]);
}
break;
}
context.strokeStyle = adjustColorSaturationAndOpacity(color, colorFactor, opacity);
context.lineWidth = 3;
context.stroke();
};
var drawThresholdLines = function drawThresholdLines() {
if (yThreshold.value !== null) {
var yPos = height - padding - (yThreshold.value - minValue) / valueRange * innerHeight;
context.strokeStyle = yThreshold.color;
context.lineWidth = yThreshold.lineWidth;
context.setLineDash(yThreshold.dash || []);
context.beginPath();
context.moveTo(padding, yPos);
context.lineTo(width - padding, yPos);
context.stroke();
}
if (xThreshold.value !== null) {
var xPos = padding + (xThreshold.value - dataRange[0]) / (dataRange[1] - dataRange[0]) * innerWidth;
context.strokeStyle = xThreshold.color;
context.lineWidth = xThreshold.lineWidth;
context.setLineDash(xThreshold.dash || []);
context.beginPath();
context.moveTo(xPos, padding);
context.lineTo(xPos, height - padding);
context.stroke();
}
if (xThreshold.min !== null && xThreshold.max !== null) {
var xPosMin = padding + (xThreshold.min - dataRange[0]) / (dataRange[1] - dataRange[0]) * innerWidth;
var xPosMax = padding + (xThreshold.max - dataRange[0]) / (dataRange[1] - dataRange[0]) * innerWidth;
context.strokeStyle = xThreshold.color;
context.lineWidth = xThreshold.lineWidth;
context.setLineDash(xThreshold.dash || []);
context.beginPath();
context.moveTo(xPosMin, padding);
context.lineTo(xPosMin, height - padding);
context.stroke();
context.beginPath();
context.moveTo(xPosMax, padding);
context.lineTo(xPosMax, height - padding);
context.stroke();
}
if (yThreshold.min !== null && yThreshold.max !== null) {
var yPosMin = height - padding - (yThreshold.min - minValue) / valueRange * innerHeight;
var yPosMax = height - padding - (yThreshold.max - minValue) / valueRange * innerHeight;
context.strokeStyle = yThreshold.color;
context.lineWidth = yThreshold.lineWidth;
context.setLineDash(yThreshold.dash || []);
context.beginPath();
context.moveTo(padding, yPosMin);
context.lineTo(width - padding, yPosMin);
context.stroke();
context.beginPath();
context.moveTo(padding, yPosMax);
context.lineTo(width - padding, yPosMax);
context.stroke();
}
};
series.forEach(function (serie) {
var seriesColor = serie.color || color;
var xPoints = [];
var yPoints = [];
var endIndex = data.length - 1;
var animationRequest;
var progress = 0;
visibleData.forEach(function (d, index) {
var value = d[serie.key];
var xPoint = padding + index / (visibleData.length - 1) * innerWidth;
var yPoint = height - padding - (value - minValue) / valueRange * innerHeight;
var passesXThreshold = shouldShowValue(index, xThreshold, xThreshold.mode);
var passesYThreshold = shouldShowValue(value, yThreshold, yThreshold.mode);
if (passesXThreshold && passesYThreshold) {
xPoints.push(xPoint);
yPoints.push(yPoint);
}
});
var drawGradientUnderLine = function drawGradientUnderLine(context, xPoints, yPoints, chartHeight, chartWidth, gradientStartColor, gradientEndColor) {
var gradientMode = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : "linear";
var opacityStartStop = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 0.5;
var opacityEndStop = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 1;
var dropOffOpacity = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : 0.1;
var topOpacity = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : 1;
var gradient;
switch (gradientMode) {
case "radial":
var centerX = (xPoints[0] + xPoints[xPoints.length - 1]) / 2;
var centerY = Math.min.apply(Math, _toConsumableArray(yPoints));
var radius = Math.max(chartWidth, chartHeight);
gradient = context.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
break;
case "horizontal":
gradient = context.createLinearGradient(0, 0, chartWidth, 0);
break;
case "diagonal":
gradient = context.createLinearGradient(0, 0, chartWidth, chartHeight);
break;
default:
gradient = context.createLinearGradient(0, 0, 0, chartHeight);
break;
}
gradient.addColorStop(0, adjustOpacity(gradientStartColor, topOpacity));
gradient.addColorStop(opacityStartStop, adjustOpacity(gradientStartColor, topOpacity));
gradient.addColorStop(opacityEndStop, adjustOpacity(gradientEndColor, dropOffOpacity));
gradient.addColorStop(1, adjustOpacity(gradientEndColor, dropOffOpacity));
context.beginPath();
context.moveTo(xPoints[0], yPoints[0]);
for (var _i4 = 1; _i4 < xPoints.length; _i4++) {
context.lineTo(xPoints[_i4], yPoints[_i4]);
}
context.lineTo(xPoints[xPoints.length - 1], chartHeight);
context.lineTo(xPoints[0], chartHeight);
context.closePath();
context.fillStyle = gradient;
context.fill();
};
var adjustOpacity = function adjustOpacity(color, opacity) {
var r, g, b;
if (color.startsWith("#")) {
if (color.length === 4) {
r = parseInt(color[1] + color[1], 16);
g = parseInt(color[2] + color[2], 16);
b = parseInt(color[3] + color[3], 16);
} else if (color.length === 7) {
r = parseInt(color.slice(1, 3), 16);
g = parseInt(color.slice(3, 5), 16);
b = parseInt(color.slice(5, 7), 16);
}
} else if (color.startsWith("rgb")) {
var rgbValues = color.match(/\d+/g).map(Number);
var _rgbValues = _slicedToArray(rgbValues, 3);
r = _rgbValues[0];
g = _rgbValues[1];
b = _rgbValues[2];
}
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
};
if (showDataCurve) {
drawGradientUnderLine(context, xPoints, yPoints, height, width, dataCurveStartColor, dataCurveFinishColor, dataCurveShadowMode, dataCurveOpacityStartStop, dataCurveOpacityFinishStop, dataCurveDropOffOpacity, dataCurveTopOpacity);
}
xPoints.forEach(function (xPoint, i) {
var colorFactor = 0.5 + i / xPoints.length * 0.5;
var opacity = 0.69 + i / xPoints.length * 0.5;
var gradient = context.createLinearGradient(xPoints[0], yPoints[0], xPoints[xPoints.length - 1], yPoints[yPoints.length - 1]);
gradient.addColorStop(0, adjustColorSaturationAndOpacity(seriesColor, 0.5, opacity));
gradient.addColorStop(1, adjustColorSaturationAndOpacity(seriesColor, 1, opacity));
context.strokeStyle = gradient;
context.lineWidth = 3;
if (i < xPoints.length - 1 && xPoints.length - 1 === endIndex) {
if (i > 0) {
context.beginPath();
context.moveTo(xPoints[i - 1], yPoints[i - 1]);
context.lineTo(xPoint, yPoints[i]);
context.stroke();
}
} else if (xPoints.length - 1 !== endIndex && i > 0) {
context.beginPath();
context.moveTo(xPoints[i - 1], yPoints[i - 1]);
context.lineTo(xPoint, yPoints[i]);
context.stroke();
}
});
var animateLastSegment = function animateLastSegment(xPoints, yPoints, seriesColor, lastIndex) {
var lastColorFactor = 0.5 + lastIndex / xPoints.length * 0.5;
var lastOpacity = 0.69 + lastIndex / xPoints.length * 0.5;
var progress = 0;
var easing = function easing(t) {
return t * t * (3 - 2 * t);
};
var step = function step() {
var xStart = xPoints[lastIndex - 1];
var yStart = yPoints[lastIndex - 1];
var xEnd = xPoints[lastIndex];
var yEnd = yPoints[lastIndex];
progress += 0.02;
if (progress <= 1) {
var easedProgress = easing(progress);
var currentX = xStart + (xEnd - xStart) * easedProgress;
var currentY = yStart + (yEnd - yStart) * easedProgress;
context.strokeStyle = adjustColorSaturationAndOpacity(seriesColor, lastColorFactor, lastOpacity);
context.lineWidth = 3;
context.beginPath();
context.moveTo(xStart, yStart);
context.lineTo(currentX, currentY);
context.stroke();
animationRequest = requestAnimationFrame(step);
} else {
context.shadowBlur = 0;
context.beginPath();
context.moveTo(xPoints[lastIndex - 1], yPoints[lastIndex - 1]);
context.lineTo(xPoints[lastIndex], yPoints[lastIndex]);
context.stroke();
animatingLineRef.current = false;
cancelAnimationFrame(animationRequest);
}
};
animationRequest = requestAnimationFrame(step);
};
var lastIndex = xPoints.length - 1;
if (!mouseMoving && lastIndex === endIndex && lastIndex > 0 && !animatingLineRef.current) {
animatingLineRef.current = true;
animateLastSegment(xPoints, yPoints, seriesColor, lastIndex);
} else if (mouseMoving && lastIndex === endIndex && lastIndex > 0) {
var colorFactor = 0.5 + lastIndex / xPoints.length * 0.5;
var opacity = 0.69 + lastIndex / xPoints.length * 0.5;
var gradient = context.createLinearGradient(xPoints[0], yPoints[0], xPoints[lastIndex], yPoints[lastIndex]);
gradient.addColorStop(0, adjustColorSaturationAndOpacity(seriesColor, 0.5, opacity));
gradient.addColorStop(1, adjustColorSaturationAndOpacity(seriesColor, 1, opacity));
context.strokeStyle = gradient;
context.lineWidth = 3;
context.beginPath();
context.moveTo(xPoints[lastIndex - 1], yPoints[lastIndex - 1]);
context.lineTo(xPoints[lastIndex], yPoints[lastIndex]);
context.stroke();
}
if (showPoints) {
xPoints.forEach(function (x, i) {
var colorFactor = 0.5 + i / xPoints.length * 0.5;
var opacity = 0.69 + i / xPoints.length * 0.5;
context.fillStyle = adjustColorSaturationAndOpacity(seriesColor, colorFactor, opacity);
context.shadowBlur = 3;
context.shadowColor = adjustColorSaturationAndOpacity(seriesColor, colorFactor, opacity);
var pointSize = i === lastIndex ? dataPointSize + 3 * progress : dataPointSize;
context.beginPath();
context.arc(x, yPoints[i], pointSize, 0, 2 * Math.PI);
context.fill();
});
context.shadowBlur = 0;
}
visibleData.forEach(function (d, index) {
var value = d[serie.key];
var xPoint = padding + index / (visibleData.length - 1) * innerWidth;
var yPoint = height - padding - (value - minValue) / valueRange * innerHeight;
var passesXThreshold = shouldShowValue(index, xThreshold, xThreshold.mode);
var passesYThreshold = shouldShowValue(value, yThreshold, yThreshold.mode);
if (passesXThreshold && passesYThreshold) {
if (showCallouts) {
var calloutY = yPoint - 20;
var calloutLabel = chartCallout ? chartCallout(d, serie) : value;
context.fillStyle = "#FFF";
context.font = "12px Arial";
context.textAlign = "center";
context.fillText(calloutLabel, xPoint, calloutY);
}
}
});
});
drawThresholdLines();
var xLabels = visibleData.map(function (d) {
return d.label || "";
});
var labelInterval = Math.ceil(xLabels.length / 10);
xLabels.forEach(function (label, index) {
if (index % labelInterval === 0 || index === xLabels.length - 1) {
var xPos = padding + index / (xLabels.length - 1) * innerWidth;
context.fillStyle = "#00FFDD";
context.font = "14px Arial";
context.textAlign = "center";
context.fillText(label, xPos, height - padding / 1.69);
}
});
context.fillStyle = "#00FFDD";
context.font = "16px Arial";
context.textAlign = "right";
for (var _i5 = 0; _i5 <= 5; _i5++) {
var _y = height - padding - _i5 / 5 * innerHeight;
var value = Math.round(minValue + _i5 / 5 * valueRange);
context.fillText(value, padding / 1.469, _y);
}
if (title) {
context.fillStyle = titleConfigurationSettings.color || "#00FFDD";
context.font = titleConfigurationSettings.fontSize || "24px Arial";
context.textAlign = "center";
context.fillText(title, width / 2, padding / 2);
}
var handleMouseMove = function handleMouseMove(event) {
mouseMoveTimeout();
setMouseMoving(true);
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
if (data.length === 0) return;
var xRatio = (x - padding) / (canvasSize.width - padding * 2);
var dataPointIndex = Math.round(xRatio * (dataRange[1] - dataRange[0]));
if (dataPointIndex < dataRange[0] || dataPointIndex > dataRange[1]) {
return;
}
var dataPoint = data[dataRange[0] + dataPointIndex];
if (dataPoint && showDataPointToolTips) {
series.forEach(function (serie) {
var value = dataPoint[serie.key];
var label = serie.label || serie.key;
if (value !== undefined) {
setTooltip(_objectSpread({
dataPointData: dataPoint,
display: true,
yValue: Math.round((canvasSize.height - y - padding) / (canvasSize.height - padding * 2) * valueRange + minValue),
xValue: dataPoint.label,
value: dataPoint[dataPointDataID] !== undefined && dataPoint[dataPointDataID] !== null ? dataPoint[dataPointDataID] : value,
label: label,
zIndex: "869",
x: x + 27,
y: y
}, toolTipConfigurationSettings));
}
});
}
};
var handleMouseMoveCombined = function handleMouseMoveCombined(event) {
HUDUniversalHUDUtilityManager.CheckMouseNearEdge(event, 100, "bottom", canvasRef, function () {
setTooltip({
display: false,
x: 0,
y: 0,
value: null,
label: null
});
});
HUDUniversalHUDUtilityManager.CheckMouseNearEdge(event, 50, "right", canvasRef, function () {
setTooltip({
display: false,
x: 0,
y: 0,
value: null,
label: null
});
});
HUDUniversalHUDUtilityManager.CheckMouseNearEdge(event, 50, "left", canvasRef, function () {
setTooltip({
display: false,
x: 0,
y: 0,
value: null,
label: null
});
});
HUDUniversalHUDUtilityManager.CheckMouseNearEdge(event, 100, "top", canvasRef, function () {
setTooltip({
display: false,
x: 0,
y: 0,
value: null,
label: null
});
});
handleMouseMove(event);
if (isPanning) {
handlePanMove(event);
}
};
canvas.addEventListener("mousemove", handleMouseMoveCombined);
canvas.addEventListener("mouseleave", handleMouseLeave);
return function () {
canvas.removeEventListener("mousemove", handleMouseMoveCombined);
canvas.removeEventListener("mouseleave", handleMouseLeave);
};
}, [data, series, canvasSize, tooltip, zoom, panOffset, yAxisMin, yAxisMax, lineType, titleConfigurationSettings, xAxisTitleConfigurationSettings, yAxisTitleConfigurationSettings, showCallouts, chartCallout, xThreshold, yThreshold]);
useEffect(function () {
var handleTilt = function handleTilt(event) {
if (threeDDisplay && canvasRef.current) {
var rect = canvasRef.current.getBoundingClientRect();
var x = event.clientX - rect.left - rect.width / 2;
var y = event.clientY - rect.top - rect.height / 2;
var tiltX = Math.min(Math.max(-y / rect.height * maxTilt, -maxTilt), maxTilt);
var tiltY = Math.min(Math.max(x / rect.width * maxTilt, -maxTilt), maxTilt);
setHoverTilt({
x: tiltX,
y: tiltY,
z: predefinedTilt.z
});
}
};
var resetTilt = function resetTilt() {
setHoverTilt(predefinedTilt);
};
if (canvasRef.current) {
canvasRef.current.addEventListener("mousemove", handleTilt);
canvasRef.current.addEventListener("mouseout", resetTilt);
}
return function () {
if (canvasRef.current) {
canvasRef.current.removeEventListener("mousemove", handleTilt);
canvasRef.current.removeEventListener("mouseout", resetTilt);
}
};
}, [threeDDisplay, maxTilt, predefinedTilt]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "grid",
gridTemplateColumns: "auto 1fr auto",
gridTemplateRows: "auto 1fr auto",
height: canvasSize.height,
width: canvasSize.width,
transform: "rotateX(".concat(hoverTilt.x, "deg) rotateY(").concat(hoverTilt.y, "deg) rotateZ(").concat(hoverTilt.z, "deg)"),
transformStyle: threeDDisplay ? "preserve-3d" : "flat",
transition: "transform 0.1s ease"
}, canvasConfigurationSettings),
onMouseDown: handlePanStart,
onMouseUp: handlePanEnd,
onMouseLeave: function onMouseLeave() {
return setIsPanning(false);
}
}, /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
gridRow: "2",
alignItems: "center",
justifyContent: "center",
writingMode: "vertical-rl",
transform: "rotate(-180deg)",
textAlign: "center",
fontSize: yAxisTitleConfigurationSettings.fontSize || "16px",
borderRadius: "0rem 0.69rem 0.69rem 0rem",
background: "rgba(15, 15, 15, 1)",
color: yAxisTitleConfigurationSettings.color || "#00FFDD",
padding: "0.269rem 0.569rem",
marginRight: "0px"
}
}, yAxisTitle), /*#__PURE__*/React.createElement("div", {
style: {
gridColumn: "2",
gridRow: "2",
width: "100%",
height: "100%"
}
}, /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
width: canvasSize.width,
height: canvasSize.height,
style: {
width: "100%",
height: "100%"
}
})), /*#__PURE__*/React.createElement("div", {
style: {
gridColumn: "3",
gridRow: "2",
paddingLeft: "10px",
display: "flex",
justifyContent: "center",
alignItems: "center"
}
}, customSidePanel && customSidePanel), /*#__PURE__*/React.createElement("div", {
style: {
gridColumn: "2",
gridRow: "3",
textAlign: "center",
borderRadius: "0 0 0.69rem 0.69rem",
background: "rgba(15, 15, 15, 1)",
color: xAxisTitleConfigurationSettings.color || "#00FFDD",
fontSize: xAxisTitleConfigurationSettings.fontSize || "16px",
padding: "0.269rem 0.569rem"
}
}, xAxisTitle), tooltip.display && chartToolTip ? chartToolTip(tooltip) : tooltip.display && renderTooltip({
toolTipConfigurationSettings: dataPointTooltipConfigurationSettings,
labelConfigurationSettings: dataPointTooltipLabelConfigurationSettings,
valueConfigurationSettings: dataPointTooltipValueConfigurationSettings,
label: tooltip.label,
value: tooltip.value,
yValue: tooltip.yValue,
xValue: tooltip.xValue,
x: tooltip.x,
y: tooltip.y
}));
}
export default HUDLineChart;