sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import React from 'react';
  19 import { RouteComponentProps, withRouter } from 'react-router-dom';
  20
  21 import { ColumnModel, ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
  22 import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
  23 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  24
  25 import { SetFilterVisibility, SetSubViewAction } from '../actions/toggleActions';
  26 import { createCrossPolarDiscriminationActions, createCrossPolarDiscriminationProperties } from '../handlers/crossPolarDiscriminationHandler';
  27 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
  28 import { CrossPolarDiscriminationDatabaseDataType, CrossPolarDiscriminationDataType } from '../models/crossPolarDiscriminationDataType';
  29 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
  30 import { addColumnLabels } from '../utils/tableUtils';
  31 import ToggleContainer from './toggleContainer';
  32
  33
  34 const mapProps = (state: IApplicationStoreState) => ({
  35   crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state),
  36   currentView: state.performanceHistory.subViews.CPD.subView,
  37   isFilterVisible: state.performanceHistory.subViews.CPD.isFilterVisible,
  38   existingFilter: state.performanceHistory.crossPolarDiscrimination.filter,
  39
  40 });
  41
  42 const mapDisp = (dispatcher: IDispatcher) => ({
  43   crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch),
  44   setSubView: (value: 'chart' | 'table') => dispatcher.dispatch(new SetSubViewAction('CPD', value)),
  45   toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility('CPD', value));},
  46 });
  47
  48 type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
  49   selectedTimePeriod: string;
  50 };
  51
  52 const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<CrossPolarDiscriminationDataType>;
  53
  54 /**
  55  * The Component which gets the crossPolarDiscrimination data from the database based on the selected time period.
  56  */
  57 class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps> {
  58   onToggleFilterButton = () => {
  59     this.props.toggleFilterButton(!this.props.isFilterVisible);
  60   };
  61
  62   onChange = (value: 'chart' | 'table') => {
  63     this.props.setSubView(value);
  64   };
  65
  66   onFilterChanged = (property: string, filterTerm: string) => {
  67     this.props.crossPolarDiscriminationActions.onFilterChanged(property, filterTerm);
  68     if (!this.props.crossPolarDiscriminationProperties.showFilter)
  69       this.props.crossPolarDiscriminationActions.onToggleFilter(false);
  70   };
  71
  72   render(): JSX.Element {
  73     const properties = this.props.crossPolarDiscriminationProperties;
  74     const actions = this.props.crossPolarDiscriminationActions;
  75
  76     const chartPagedData = this.getChartDataValues(properties.rows);
  77
  78     const cpdColumns: ColumnModel<CrossPolarDiscriminationDataType>[] = [
  79       { property: 'radioSignalId', title: 'Radio signal', type: ColumnType.text },
  80       { property: 'scannerId', title: 'Scanner ID', type: ColumnType.text },
  81       { property: 'timeStamp', title: 'End Time', type: ColumnType.text },
  82       {
  83         property: 'suspectIntervalFlag', title: 'Suspect Interval', type: ColumnType.boolean,
  84       },
  85     ];
  86
  87     chartPagedData.datasets.forEach(ds => {
  88       cpdColumns.push(addColumnLabels<CrossPolarDiscriminationDataType>(ds.name, ds.columnLabel));
  89     });
  90     return (
  91       <>
  92         <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible}
  93           existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
  94           {lineChart(chartPagedData)}
  95           <CrossPolarDiscriminationTable stickyHeader idProperty={'_id'} tableId="cross-polar-discrimination-table" columns={cpdColumns} {...properties} {...actions} />
  96         </ToggleContainer>
  97       </>
  98     );
  99   }
 100
 101   /**
 102    * This function gets the performance values for CPD according on the chartjs dataset structure
 103    * which is to be sent to the chart.
 104    */
 105   private getChartDataValues = (rows: CrossPolarDiscriminationDataType[]): IDataSetsObject => {
 106     const data_rows = [...rows];
 107     sortDataByTimeStamp(data_rows);
 108
 109     const datasets: IDataSet[] = [{
 110       name: 'xpdMin',
 111       label: 'xpd-min',
 112       borderColor: '#0e17f3de',
 113       bezierCurve: false,
 114       lineTension: 0,
 115       fill: false,
 116       data: [],
 117       columnLabel: 'CPD (min)[db]',
 118     }, {
 119       name: 'xpdAvg',
 120       label: 'xpd-avg',
 121       borderColor: '#08edb6de',
 122       bezierCurve: false,
 123       lineTension: 0,
 124       fill: false,
 125       data: [],
 126       columnLabel: 'CPD (avg)[db]',
 127     }, {
 128       name: 'xpdMax',
 129       label: 'xpd-max',
 130       borderColor: '#b308edde',
 131       bezierCurve: false,
 132       lineTension: 0,
 133       fill: false,
 134       data: [],
 135       columnLabel: 'CPD (max)[db]',
 136     }];
 137
 138     data_rows.forEach(row => {
 139       row.xpdMin = row.performanceData.xpdMin;
 140       row.xpdAvg = row.performanceData.xpdAvg;
 141       row.xpdMax = row.performanceData.xpdMax;
 142       datasets.forEach(ds => {
 143         ds.data.push({
 144           x: row['timeStamp' as keyof CrossPolarDiscriminationDataType] as string,
 145           y: row.performanceData[ds.name as keyof CrossPolarDiscriminationDatabaseDataType] as string,
 146         });
 147       });
 148     });
 149     return {
 150       datasets: datasets,
 151     };
 152   };
 153 }
 154 const CrossPolarDiscrimination = withRouter(connect(mapProps, mapDisp)(CrossPolarDiscriminationComponent));
 155 export default CrossPolarDiscrimination;