@robotical/sensors-dashboard
Version:
A dashboard tool for depicting Marty data by Robotical
161 lines (160 loc) • 4.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Graph;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.string.includes.js");
require("core-js/modules/esnext.iterator.map.js");
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _traceName = require("../../utils/graph/trace-name");
var _react = require("react");
var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
var _colors = require("../../styles/colors");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SCROLL_THRESHOLD = 5;
function Graph(_ref) {
let {
data,
maxDataXValue,
autoScrollEnabled,
mainRef
} = _ref;
const [plotWidth, setPlotWidth] = (0, _react.useState)(undefined);
const shouldScroll = (0, _react.useMemo)(() => maxDataXValue > SCROLL_THRESHOLD && autoScrollEnabled, [maxDataXValue, autoScrollEnabled]);
const plotLayout = (0, _react.useMemo)(() => ({
showlegend: true,
xaxis: {
linecolor: _colors.MAIN_BLUE,
linewidth: 2,
mirror: true,
zeroline: false,
showgrid: true,
gridcolor: _colors.AQUA_BLUE_025,
title: {
text: "Time (seconds)",
font: {
family: 'Lato Regular',
size: 16,
color: _colors.MAIN_BLUE
}
},
tickfont: {
family: 'Lato Regular',
size: 12,
color: _colors.MAIN_BLUE
},
range: shouldScroll ? [maxDataXValue - SCROLL_THRESHOLD, maxDataXValue] : undefined
},
yaxis2: {
linecolor: _colors.MAIN_BLUE,
linewidth: 2,
mirror: true,
zeroline: false,
showgrid: true,
gridcolor: _colors.AQUA_BLUE_025,
title: {
text: "",
font: {
family: 'Lato Regular',
size: 16,
color: _colors.MAIN_BLUE
}
},
tickfont: {
family: 'Lato Regular',
size: 12,
color: _colors.MAIN_BLUE
},
side: 'right'
},
yaxis: {
linecolor: _colors.MAIN_BLUE,
linewidth: 2,
mirror: true,
zeroline: false,
showgrid: true,
gridcolor: _colors.AQUA_BLUE_025,
title: {
text: "Sensor value",
font: {
family: 'Lato Regular',
size: 16,
color: _colors.MAIN_BLUE
}
},
tickfont: {
family: 'Lato Regular',
size: 12,
color: _colors.MAIN_BLUE
}
},
margin: {
l: 60,
r: 40,
b: 60,
t: 40,
pad: 4
},
plot_bgcolor: _colors.PALE_WHITE,
// paper_bgcolor: WHITE,
legend: {
font: {
family: 'Lato Regular',
size: 12,
color: _colors.MAIN_BLUE
},
x: 1.09
},
width: plotWidth,
hovermode: 'x unified'
}), [maxDataXValue, autoScrollEnabled, plotWidth]);
(0, _react.useEffect)(() => {
if (!mainRef.current) return;
const handleResize = entries => {
for (let entry of entries) {
const {
width
} = entry.contentRect;
const hideControls = width < 500;
setPlotWidth(width * (hideControls ? 1 : 0.66));
}
};
const resizeObserver = new ResizeObserver(handleResize);
resizeObserver.observe(mainRef.current);
return () => {
resizeObserver.disconnect();
};
}, [mainRef]);
const traces = [];
for (const traceKey in data) {
try {
const traceName = (0, _traceName.motorPosDifferentiation)(traceKey);
const y0ORy2 = traceName.includes("?") ? "y2" : "y";
const trace = {
x: data[traceKey].x,
y: traceName.includes("?") ? data[traceKey].y.map(y => y) : data[traceKey].y.map(y => Math.round(y * 100) / 100),
yaxis: y0ORy2,
type: "scatter",
mode: "lines",
name: traceName,
line: {
color: (0, _traceName.rgbColorTraceName)(traceName)
},
hoverinfo: 'x+y+name',
hoveron: 'points+lines'
};
// @ts-ignore
traces.push(trace);
} catch (e) {}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
className: _stylesModule.default.graph,
data: traces
// @ts-ignore
,
layout: plotLayout
});
}