diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx | 80 |
1 files changed, 40 insertions, 40 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx index 6a06ea351..fb608aac6 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx @@ -15,36 +15,36 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; - -import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { PerformanceDataType, PerformanceDatabaseDataType } from '../models/performanceDataType'; + +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createPerformanceDataActions, createPerformanceDataProperties } from '../handlers/performanceDataHandler'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; -import { createPerformanceDataProperties, createPerformanceDataActions } from '../handlers/performanceDataHandler'; +import { PerformanceDatabaseDataType, PerformanceDataType } from '../models/performanceDataType'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ performanceDataProperties: createPerformanceDataProperties(state), currentView: state.performanceHistory.subViews.performanceData.subView, isFilterVisible: state.performanceHistory.subViews.performanceData.isFilterVisible, - existingFilter: state.performanceHistory.performanceData.filter + existingFilter: state.performanceHistory.performanceData.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ performanceDataActions: createPerformanceDataActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("performanceData", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("performanceData", value)) } + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('performanceData', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('performanceData', value)); }, }); type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { - selectedTimePeriod: string + selectedTimePeriod: string; }; const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceDataType>; @@ -52,17 +52,16 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceD /** * The Component which gets the performance data from the database based on the selected time period. */ -class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{ - +class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps> { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.performanceDataActions.onFilterChanged(property, filterTerm); if (!this.props.performanceDataProperties.showFilter) this.props.performanceDataActions.onToggleFilter(false); - } + }; render(): JSX.Element { const properties = this.props.performanceDataProperties; @@ -70,12 +69,12 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP const chartPagedData = this.getChartDataValues(properties.rows); const performanceColumns: ColumnModel<PerformanceDataType>[] = [ - { property: "radioSignalId", title: "Radio signal", type: ColumnType.text }, - { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, - { property: "timeStamp", title: "End Time", type: ColumnType.text }, + { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text }, + { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text }, + { property: 'timeStamp', title: 'End Time', type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean - } + property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean, + }, ]; chartPagedData.datasets.forEach(ds => { @@ -83,67 +82,68 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP }); return ( <> - <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}> + <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} + existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}> {lineChart(chartPagedData)} - <PerformanceDataTable stickyHeader idProperty={"_id"} tableId="performance-data-table" columns={performanceColumns} {...properties} {...actions} /> + <PerformanceDataTable stickyHeader idProperty={'_id'} tableId="performance-data-table" columns={performanceColumns} {...properties} {...actions} /> </ToggleContainer> </> ); - }; + } /** * This function gets the performance values for PerformanceData according on the chartjs dataset structure * which is to be sent to the chart. */ private getChartDataValues = (rows: PerformanceDataType[]): IDataSetsObject => { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "es", - label: "es", + name: 'es', + label: 'es', borderColor: '#0e17f3de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "ES" + columnLabel: 'ES', }, { - name: "ses", - label: "ses", + name: 'ses', + label: 'ses', borderColor: '#08edb6de', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "SES" + columnLabel: 'SES', }, { - name: "unavailability", - label: "unavailability", + name: 'unavailability', + label: 'unavailability', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "Unavailability" + columnLabel: 'Unavailability', }]; - _rows.forEach(row => { + data_rows.forEach(row => { row.es = row.performanceData.es; row.ses = row.performanceData.ses; row.unavailability = row.performanceData.unavailability; datasets.forEach(ds => { ds.data.push({ - x: row["timeStamp" as keyof PerformanceDataType] as string, - y: row.performanceData[ds.name as keyof PerformanceDatabaseDataType] as string + x: row['timeStamp' as keyof PerformanceDataType] as string, + y: row.performanceData[ds.name as keyof PerformanceDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const PerformanceData = withRouter(connect(mapProps, mapDisp)(PerformanceDataComponent)); |