diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx | 285 |
1 files changed, 142 insertions, 143 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx index 17b1374b8..5dac0bc14 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx @@ -15,37 +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 { AdaptiveModulationDataType, AdaptiveModulationDatabaseDataType } from '../models/adaptiveModulationDataType'; +import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions'; +import { createAdaptiveModulationActions, createAdaptiveModulationProperties } from '../handlers/adaptiveModulationHandler'; +import { AdaptiveModulationDatabaseDataType, AdaptiveModulationDataType } from '../models/adaptiveModulationDataType'; import { IDataSet, IDataSetsObject } from '../models/chartTypes'; -import { createAdaptiveModulationProperties, createAdaptiveModulationActions } from '../handlers/adaptiveModulationHandler'; 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) => ({ adaptiveModulationProperties: createAdaptiveModulationProperties(state), currentView: state.performanceHistory.subViews.adaptiveModulation.subView, isFilterVisible: state.performanceHistory.subViews.adaptiveModulation.isFilterVisible, - existingFilter: state.performanceHistory.adaptiveModulation.filter + existingFilter: state.performanceHistory.adaptiveModulation.filter, }); const mapDisp = (dispatcher: IDispatcher) => ({ adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch), - setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)), - toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("adaptiveModulation", value)) }, + setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('adaptiveModulation', value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('adaptiveModulation', value)); }, }); type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { - selectedTimePeriod: string + selectedTimePeriod: string; }; const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveModulationDataType>; @@ -53,21 +52,20 @@ const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveM /** * The Component which gets the adaptiveModulation data from the database based on the selected time period. */ -class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps>{ - +class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps> { onToggleFilterButton = () => { this.props.toggleFilterButton(!this.props.isFilterVisible); - } + }; - onChange = (value: "chart" | "table") => { + onChange = (value: 'chart' | 'table') => { this.props.setSubView(value); - } + }; onFilterChanged = (property: string, filterTerm: string) => { this.props.adaptiveModulationActions.onFilterChanged(property, filterTerm); if (!this.props.adaptiveModulationProperties.showFilter) this.props.adaptiveModulationActions.onToggleFilter(false); - } + }; render(): JSX.Element { const properties = this.props.adaptiveModulationProperties; @@ -75,11 +73,11 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp const chartPagedData = this.getChartDataValues(properties.rows); const adaptiveModulationColumns: ColumnModel<AdaptiveModulationDataType>[] = [ - { 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 => { @@ -88,13 +86,14 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp return ( <> - <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} + existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <AdaptiveModulationTable stickyHeader idProperty={"_id"} tableId="adaptive-modulation-table" columns={adaptiveModulationColumns} {...properties} {...actions} /> + <AdaptiveModulationTable stickyHeader idProperty={'_id'} tableId="adaptive-modulation-table" columns={adaptiveModulationColumns} {...properties} {...actions} /> </ToggleContainer> </> ); - }; + } /** * This function gets the performance values for Adaptive modulation according on the chartjs dataset structure @@ -102,345 +101,345 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp */ private getChartDataValues = (rows: AdaptiveModulationDataType[]): IDataSetsObject => { - const _rows = [...rows]; - sortDataByTimeStamp(_rows); + const data_rows = [...rows]; + sortDataByTimeStamp(data_rows); const datasets: IDataSet[] = [{ - name: "time2StatesS", - label: "QAM2S", + name: 'time2StatesS', + label: 'QAM2S', borderColor: '#62a309fc', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2S", + columnLabel: 'QAM2S', }, { - name: "time2States", - label: "QAM2", + name: 'time2States', + label: 'QAM2', borderColor: '#62a309fc', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2", + columnLabel: 'QAM2', }, { - name: "time2StatesL", - label: "QAM2L", + name: 'time2StatesL', + label: 'QAM2L', borderColor: '#62a309fc', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2L", + columnLabel: 'QAM2L', }, { - name: "time4StatesS", - label: "QAM4S", + name: 'time4StatesS', + label: 'QAM4S', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4S", + columnLabel: 'QAM4S', }, { - name: "time4States", - label: "QAM4", + name: 'time4States', + label: 'QAM4', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4", + columnLabel: 'QAM4', }, { - name: "time4StatesL", - label: "QAM4L", + name: 'time4StatesL', + label: 'QAM4L', borderColor: '#b308edde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4L", + columnLabel: 'QAM4L', }, { - name: "time16StatesS", - label: "QAM16S", + name: 'time16StatesS', + label: 'QAM16S', borderColor: '#9b15e2', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM16S", + columnLabel: 'QAM16S', }, { - name: "time16States", - label: "QAM16", + name: 'time16States', + label: 'QAM16', borderColor: '#9b15e2', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM16", + columnLabel: 'QAM16', }, { - name: "time16StatesL", - label: "QAM16L", + name: 'time16StatesL', + label: 'QAM16L', borderColor: '#9b15e2', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM16L", + columnLabel: 'QAM16L', }, { - name: "time32StatesS", - label: "QAM32S", + name: 'time32StatesS', + label: 'QAM32S', borderColor: '#2704f5f0', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM32S", + columnLabel: 'QAM32S', }, { - name: "time32States", - label: "QAM32", + name: 'time32States', + label: 'QAM32', borderColor: '#2704f5f0', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM32", + columnLabel: 'QAM32', }, { - name: "time32StatesL", - label: "QAM32L", + name: 'time32StatesL', + label: 'QAM32L', borderColor: '#2704f5f0', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM32L", + columnLabel: 'QAM32L', }, { - name: "time64StatesS", - label: "QAM64S", + name: 'time64StatesS', + label: 'QAM64S', borderColor: '#347692', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM64S", + columnLabel: 'QAM64S', }, { - name: "time64States", - label: "QAM64", + name: 'time64States', + label: 'QAM64', borderColor: '#347692', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM64", + columnLabel: 'QAM64', }, { - name: "time64StatesL", - label: "QAM64L", + name: 'time64StatesL', + label: 'QAM64L', borderColor: '#347692', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM64L", + columnLabel: 'QAM64L', }, { - name: "time128StatesS", - label: "QAM128S", + name: 'time128StatesS', + label: 'QAM128S', borderColor: '#885e22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM128S", + columnLabel: 'QAM128S', }, { - name: "time128States", - label: "QAM128", + name: 'time128States', + label: 'QAM128', borderColor: '#885e22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM128", + columnLabel: 'QAM128', }, { - name: "time128StatesL", - label: "QAM128L", + name: 'time128StatesL', + label: 'QAM128L', borderColor: '#885e22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM128L", + columnLabel: 'QAM128L', }, { - name: "time256StatesS", - label: "QAM256S", + name: 'time256StatesS', + label: 'QAM256S', borderColor: '#de07807a', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM256S", + columnLabel: 'QAM256S', }, { - name: "time256States", - label: "QAM256", + name: 'time256States', + label: 'QAM256', borderColor: '#de07807a', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM256", + columnLabel: 'QAM256', }, { - name: "time256StatesL", - label: "QAM256L", + name: 'time256StatesL', + label: 'QAM256L', borderColor: '#de07807a', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM256L", + columnLabel: 'QAM256L', }, { - name: "time512StatesS", - label: "QAM512S", + name: 'time512StatesS', + label: 'QAM512S', borderColor: '#8fdaacde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM512S", + columnLabel: 'QAM512S', }, { - name: "time512States", - label: "QAM512", + name: 'time512States', + label: 'QAM512', borderColor: '#8fdaacde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM512", + columnLabel: 'QAM512', }, { - name: "time512StatesL", - label: "QAM512L", + name: 'time512StatesL', + label: 'QAM512L', borderColor: '#8fdaacde', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM512L", + columnLabel: 'QAM512L', }, { - name: "time1024StatesS", - label: "QAM1024S", + name: 'time1024StatesS', + label: 'QAM1024S', borderColor: '#435b22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM1024S", + columnLabel: 'QAM1024S', }, { - name: "time1024States", - label: "QAM1024", + name: 'time1024States', + label: 'QAM1024', borderColor: '#435b22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM1024", + columnLabel: 'QAM1024', }, { - name: "time1024StatesL", - label: "QAM1024L", + name: 'time1024StatesL', + label: 'QAM1024L', borderColor: '#435b22', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM1024L", + columnLabel: 'QAM1024L', }, { - name: "time2048StatesS", - label: "QAM2048S", + name: 'time2048StatesS', + label: 'QAM2048S', borderColor: '#e87a5b', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2048S", + columnLabel: 'QAM2048S', }, { - name: "time2048States", - label: "QAM2048", + name: 'time2048States', + label: 'QAM2048', borderColor: '#e87a5b', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2048", + columnLabel: 'QAM2048', }, { - name: "time2048StatesL", - label: "QAM2048L", + name: 'time2048StatesL', + label: 'QAM2048L', borderColor: '#e87a5b', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM2048L", + columnLabel: 'QAM2048L', }, { - name: "time4096StatesS", - label: "QAM4096S", + name: 'time4096StatesS', + label: 'QAM4096S', borderColor: '#5be878', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4096S", + columnLabel: 'QAM4096S', }, { - name: "time4096States", - label: "QAM4096", + name: 'time4096States', + label: 'QAM4096', borderColor: '#5be878', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4096", + columnLabel: 'QAM4096', }, { - name: "time4096StatesL", - label: "QAM4096L", + name: 'time4096StatesL', + label: 'QAM4096L', borderColor: '#5be878', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM4096L", + columnLabel: 'QAM4096L', }, { - name: "time8192StatesS", - label: "QAM8192s", + name: 'time8192StatesS', + label: 'QAM8192s', borderColor: '#cb5be8', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM8192S", + columnLabel: 'QAM8192S', }, { - name: "time8192States", - label: "QAM8192", + name: 'time8192States', + label: 'QAM8192', borderColor: '#cb5be8', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM8192", + columnLabel: 'QAM8192', }, { - name: "time8192StatesL", - label: "QAM8192L", + name: 'time8192StatesL', + label: 'QAM8192L', borderColor: '#cb5be8', bezierCurve: false, lineTension: 0, fill: false, data: [], - columnLabel: "QAM8192L", - } + columnLabel: 'QAM8192L', + }, ]; - _rows.forEach(row => { - row.time2StatesS = row.performanceData.time2StatesS + data_rows.forEach(row => { + row.time2StatesS = row.performanceData.time2StatesS; row.time2States = row.performanceData.time2States; row.time2StatesL = row.performanceData.time2StatesL; - row.time4StatesS = row.performanceData.time4StatesS + row.time4StatesS = row.performanceData.time4StatesS; row.time4States = row.performanceData.time4States; row.time4StatesL = row.performanceData.time4StatesL; row.time16StatesS = row.performanceData.time16StatesS; @@ -475,16 +474,16 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp row.time8192StatesL = row.performanceData.time8192StatesL; datasets.forEach(ds => { ds.data.push({ - x: row["timeStamp" as keyof AdaptiveModulationDataType] as string, - y: row.performanceData[ds.name as keyof AdaptiveModulationDatabaseDataType] as string + x: row['timeStamp' as keyof AdaptiveModulationDataType] as string, + y: row.performanceData[ds.name as keyof AdaptiveModulationDatabaseDataType] as string, }); }); }); return { - datasets: datasets + datasets: datasets, }; - } + }; } const AdaptiveModulation = withRouter(connect(mapProps, mapDisp)(AdaptiveModulationComponent)); export default AdaptiveModulation; |