# components/ManagerStats/DataVolumeManagerStats/FileCountPanel.js

## Maintainability

69.52

## Lines of code

183

## Difficulty

40.38

## Estimated Errors

1.53

## Function weight

### By Complexity

### By SLOC

import React from 'react'; import PropTypes from 'prop-types'; import { Panel, Grid, Row, Col } from 'react-bootstrap'; import { FlexibleXYPlot, GradientDefs, DiscreteColorLegend, AreaSeries, VerticalRectSeries, MarkSeriesCanvas, XYPlot, LineSeriesCanvas, VerticalBarSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis } from 'react-vis'; import ResponsiveTable from "../../Table/ResponsiveTable.js"; import moment from 'moment'; class FileCountPanel extends React.Component { getData() { var count = this.props.sum ? this.props.sum.length : this.props.max.length; var data = []; var keys = ["sum", "average", "median", "accSum", "max"] for (let i = 0; i < count; i++) { data.push({ i: i }); keys.forEach(key => { if (this.props[key]) { if (this.props[key][i]) { data[data.length - 1]["date"] = moment(this.props[key][i].x).format("YYYY/MM/DD"); data[data.length - 1][key] = this.props[key][i].y; } } }); } return data; } getColumns() { return [ { text: "i", dataField: "i", hidden : true }, { text: "Date", dataField: "date", sort : true }, { text: "Sum", dataField: "sum", hidden : !this.props.sum, sort : true }, { text: "Average", dataField: "average", hidden : !this.props.average, sort : true }, { text: "Median", dataField: "median", hidden : !this.props.median, sort : true }, { text: "AccSum", dataField: "accSum", hidden : !this.props.accSum, sort : true }, { text: "Max", dataField: "max", hidden : !this.props.max, sort : true }]; }; getLegend() { return [ { title: 'Max', color: 'red', strokeStyle: "dashed" }, { title: 'Average', color: 'green' }, { title: 'Median', color: 'blue' }, { title: 'Sum', color: 'orange' } ]; }; render() { function getLineSeriesCanvas(data, color){ return <LineSeriesCanvas colorType="literal" color={color} opacity={1} data={data} />; } if (this.props.fetching){ return null; } return <Grid fluid> <Row> <Col sm={12} md={this.props.showTable ? 6 : 12}> <FlexibleXYPlot height={400} yType="log" xType="time" margin={{ left: 100 }} > <XAxis tickLabelAngle={-45} style={{ fontSize: '9px' }} /> <YAxis tickLabelAngle={-45} tickFormat={(t, i) => { return t; }} title={this.props.yTitle} /> <HorizontalGridLines /> <VerticalGridLines /> { getLineSeriesCanvas(this.props.median, "blue") } { getLineSeriesCanvas(this.props.average, "green") } { getLineSeriesCanvas(this.props.sum, "orange") } <MarkSeriesCanvas colorType="literal" opacity={1} color="red" size="1" data={this.props.max} /> <AreaSeries colorType="literal" opacity={1} color="purple" size="1" data={this.props.sumAcc} /> </FlexibleXYPlot> <DiscreteColorLegend orientation="horizontal" width={300} items={this.getLegend()} /> </Col> <Col sm={12} md={12}> <Panel> <Panel.Heading> <Panel.Title toggle> Show statistics and raw data </Panel.Title> </Panel.Heading> <Panel.Collapse> <Panel.Body> <ResponsiveTable keyField="id" data={[{ i : 0, date : null, sum : (this.props.sum.map(function(s){ return s.y})).reduce((a,b) => a + b, 0).toFixed(0), max : (Math.max(...this.props.sum.map(function(s){ return s.y}))), median : (((this.props.median.map(function(s){ return s.y})).reduce((a,b) => a + b, 0))/this.props.median.length).toFixed(0), average : (((this.props.average.map(function(s){ return s.y})).reduce((a,b) => a + b, 0))/this.props.average.length).toFixed(0), }]} columns={this.getColumns()} /> <ResponsiveTable keyField="id" data={this.getData()} columns={this.getColumns()} /> </Panel.Body> </Panel.Collapse> </Panel> </Col> </Row> </Grid>; } } FileCountPanel.propTypes = { /** the error message itself */ message: PropTypes.string.isRequired, /* the type of the message */ type: PropTypes.string.isRequired, }; export default FileCountPanel;