# components/ManagerStats/GeneralStats/GeneralStatsPanel.js

## Maintainability

68.92

## Lines of code

153

## Difficulty

24.53

## Estimated Errors

1.47

## Function weight

### By Complexity

### By SLOC

import React from 'react'; import axios from 'axios'; import { Tabs, Tab, Panel, Grid, Row, Col } from 'react-bootstrap'; import Loading from '../../Loading.js'; import ErrorUserMessage from '../../UserMessages/ErrorUserMessage.js'; import { getInstrumentStatistics } from '../../../api/icat/icatPlus.js'; import ParameterTableWidget from '../../Instrument/ParameterTableWidget.js'; import { stringifyBytesSize } from '../../Helpers.js'; import Plot from 'react-plotly.js'; class GeneralStatsPanel extends React.Component { constructor(props) { super(props); this.state = { fetching: false, fetched: false, data : [], message: { isError: false, text: null } } }; componentDidMount() { this.setState({ fetching: true, fetched: false }); axios.post(getInstrumentStatistics(this.props.user.sessionId), { ranges: [{ name: "From 2024-01-01", start: "2014-01-01", end: "2024-01-01" }] }) .then(response => { let statistics = Object.keys(response.data.startDate.buckets).map(function (key) { return { date: key, data: response.data.startDate.buckets[key] } }); this.setState({ fetching: false, fetched: true, data: statistics }); }) .catch(error => { this.setState({ statistics: { fetching: false, fetched: false, data: [] } }); }); } getParameters(record){ return [ {name : 'Datasets', value : record.data.doc_count}, {name : 'Beamlines', value : record.data.instrument.buckets.length}, {name : 'Total Volume', value : stringifyBytesSize(record.data.volume_stats.sum)}, {name : 'Total Number of files', value : record.data.fileCount_stats.sum } ]; } getStatsParameters(record){ return [ {name : 'Average file count', value : record.data.fileCount_stats.avg.toFixed(0)}, {name : 'Max files', value : record.data.fileCount_stats.max}, {name : 'Average volume', value : stringifyBytesSize(record.data.volume_stats.avg)}, {name : 'Max volume', value : stringifyBytesSize(record.data.volume_stats.max)}, {name : 'Average metadata', value : record.data.parametersCount_stats.avg.toFixed(1)} ]; } render() { var _this = this; if (this.state.message.isError) { return <ErrorUserMessage text={this.state.message.text} />; } if (this.state.fetching) { return <Loading>Loading statistics</Loading> } return this.state.data.map(function(record){ debugger return <Panel> <Panel.Body > <Grid fluid style={{margin:'20px'}}> <Row> <Col xs={12} md={4}> <h4>Summary</h4> <ParameterTableWidget striped={true} parameters={_this.getParameters(record)} ></ParameterTableWidget> </Col> <Col xs={12} md={4}> <h4>Dataset</h4> <ParameterTableWidget striped={true} parameters={_this.getStatsParameters(record)} ></ParameterTableWidget> </Col> <Col xs={12} sm={12} md={4}> </Col> </Row> <Row> <Col xs={12} sm={12} md={4}> <Plot data={[ {type: 'pie', labels: record.data.instrument.buckets.map(function(i){return i.key;}), values: record.data.instrument.buckets.map(function(i){return i.volume_stats.sum;})}, ]} layout={ { title: 'Volume per instrument'} } /> </Col> <Col xs={12} sm={12} md={4}> <Plot data={[ {name : "Datasets", type: 'bar', x: record.data.instrument.buckets.map(function(i){return i.key;}), y: record.data.instrument.buckets.map(function(i){return i.doc_count;})}, { x: record.data.instrument.buckets.map(function(i){return i.key;}), y: record.data.instrument.buckets.map(function(i){return i.fileCount_stats.sum;}), type: 'scatter', mode: 'lines+markers', marker: {color: 'red'}, yaxis:'y2', name : "File count" } ]} layout={ { title: 'Datasets', xaxis: {title: 'Instruments'}, yaxis: {title: 'Datasets'}, yaxis2 : { title: 'Number of files', overlaying: 'y', side: 'right', showgrid:false, } } } /> </Col> </Row> </Grid> </Panel.Body> <Panel.Footer> </Panel.Footer> </Panel>; }); } } export default GeneralStatsPanel;