Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple chart fixes #1357

Merged
merged 5 commits into from
Nov 11, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
In chart, if two charts are displayed with different unit, display on…
…ly the first + add units to legend
Pierre-Gilles committed Nov 11, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit f5f0fe4ffd7e6d0f87c1fde6bedcea87ea42e1fd
38 changes: 32 additions & 6 deletions front/src/components/boxs/chart/Chart.jsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import { Text } from 'preact-i18n';
import style from './style.css';
import { WEBSOCKET_MESSAGE_TYPES } from '../../../../../server/utils/constants';
import get from 'get-value';
import withIntlAsProp from '../../../utils/withIntlAsProp';
import ApexChartComponent from './ApexChartComponent';

const ONE_HOUR_IN_MINUTES = 60;
@@ -57,6 +58,8 @@ const calculateVariation = (firstValue, lastValue) => {
return Math.round(((lastValue - firstValue) / Math.abs(firstValue)) * 100);
};

const allEqual = arr => arr.every(val => val === arr[0]);

class Chartbox extends Component {
toggleDropdown = () => {
this.setState({
@@ -136,9 +139,12 @@ class Chartbox extends Component {

let emptySeries = true;

const series = data.map(oneFeature => {
const series = data.map((oneFeature, index) => {
const oneUnit = this.props.box.units ? this.props.box.units[index] : this.props.box.unit;
const oneUnitTranslated = oneUnit ? this.props.intl.dictionary.deviceFeatureUnitShort[oneUnit] : null;
const name = oneUnitTranslated ? `${oneFeature.device.name} (${oneUnitTranslated})` : oneFeature.device.name;
return {
name: oneFeature.device.name,
name,
data: oneFeature.values.map(value => {
emptySeries = false;
return {
@@ -155,7 +161,15 @@ class Chartbox extends Component {
emptySeries
};

if (data.length > 0) {
// Before now, there was a "unit" attribute in this box instead of "units",
// so we need to support "unit" as some users may already have the box with that param
const unit = this.props.box.units ? this.props.box.units[0] : this.props.box.unit;
// We check if all deviceFeatures selected are in the same unit
const allUnitsAreSame = this.props.box.units ? allEqual(this.props.box.units) : false;

// If all deviceFeatures selected are in the same unit
// We do a average of all values
if (data.length > 0 && allUnitsAreSame) {
const lastValuesArray = [];
const variationArray = [];
data.forEach(oneFeature => {
@@ -172,6 +186,18 @@ class Chartbox extends Component {
});
newState.variation = average(variationArray);
newState.lastValueRounded = roundWith2DecimalIfNeeded(average(lastValuesArray));
newState.unit = unit;
} else if (data.length > 0) {
// If not, we only display the first value
const oneFeature = data[0];
const { values } = oneFeature;
if (values.length > 0) {
const firstElement = values[0];
const lastElement = values[values.length - 1];
newState.variation = calculateVariation(firstElement.value, lastElement.value);
newState.lastValueRounded = roundWith2DecimalIfNeeded(lastElement.value);
newState.unit = unit;
}
}

await this.setState(newState);
@@ -228,7 +254,7 @@ class Chartbox extends Component {
this.updateDeviceStateWebsocket
);
}
render(props, { loading, series, labels, dropdown, variation, lastValueRounded, interval, emptySeries }) {
render(props, { loading, series, labels, dropdown, variation, lastValueRounded, interval, emptySeries, unit }) {
const displayVariation = props.box.display_variation;
return (
<div class="card">
@@ -308,7 +334,7 @@ class Chartbox extends Component {
{notNullNotUndefined(lastValueRounded) && !Number.isNaN(lastValueRounded) && (
<div class="h1 mb-0 mr-2">
{lastValueRounded}
{props.box.unit !== undefined && <Text id={`deviceFeatureUnitShort.${props.box.unit}`} />}
{unit !== undefined && <Text id={`deviceFeatureUnitShort.${unit}`} />}
</div>
)}
<div
@@ -434,4 +460,4 @@ class Chartbox extends Component {
}
}

export default connect('httpClient,session,user')(Chartbox);
export default withIntlAsProp(connect('httpClient,session,user')(Chartbox));
13 changes: 9 additions & 4 deletions front/src/components/boxs/chart/EditChart.jsx
Original file line number Diff line number Diff line change
@@ -67,14 +67,19 @@ class EditChart extends Component {
const deviceFeaturesSelectors = selectedDeviceFeaturesOptions.map(
selectedDeviceFeaturesOption => selectedDeviceFeaturesOption.value
);
const firstDeviceFeature = this.deviceFeatureBySelector.get(selectedDeviceFeaturesOptions[0].value);
const units = selectedDeviceFeaturesOptions.map(selectedDeviceFeaturesOption => {
const deviceFeature = this.deviceFeatureBySelector.get(selectedDeviceFeaturesOption.value);
return deviceFeature.unit;
});
this.props.updateBoxConfig(this.props.x, this.props.y, {
device_features: deviceFeaturesSelectors,
unit: firstDeviceFeature && firstDeviceFeature.unit ? firstDeviceFeature.unit : undefined
units,
unit: undefined
});
} else {
this.props.updateBoxConfig(this.props.x, this.props.y, {
device_features: [],
units: [],
unit: undefined
});
}
@@ -138,8 +143,8 @@ class EditChart extends Component {

componentDidUpdate(previousProps) {
const deviceFeatureChanged = get(previousProps, 'box.device_feature') !== get(this.props, 'box.device_feature');
const unitChanged = get(previousProps, 'box.unit') !== get(this.props, 'box.unit');
if (deviceFeatureChanged || unitChanged) {
const unitsChanged = get(previousProps, 'box.units') !== get(this.props, 'box.units');
if (deviceFeatureChanged || unitsChanged) {
this.getDeviceFeatures();
}
}
1 change: 1 addition & 0 deletions server/models/dashboard.js
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ const boxesSchema = Joi.array().items(
device_features: Joi.array().items(Joi.string()),
device_feature: Joi.string(),
unit: Joi.string(),
units: Joi.array().items(Joi.string()),
title: Joi.string(),
interval: Joi.string(),
display_axes: Joi.boolean(),