sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.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 * as React from 'react';
  19 import { IDataSetsObject } from '../models/chartTypes';
  20 import { Line } from 'react-chartjs-2';
  21 import * as moment from 'moment';
  22 import { ITimeStamp } from 'models/chartTypes';
  23
  24 const style: React.CSSProperties = {
  25   height: "350px"
  26 }
  27 export const lineChart = (chartPagedData: IDataSetsObject) => {
  28   return (
  29     <div style={style}>
  30       <Line ref="chart" data={chartPagedData} options={{
  31         responsive: true,
  32         maintainAspectRatio: false,
  33         scales: {
  34           xAxes: [{
  35             type: 'time',
  36             time: {
  37               displayFormats: {
  38                 'second': 'DD MMM YYYY HH:mm:ss',
  39                 'minute': 'DD MMM YYYY HH:mm:ss',
  40                 'hour': 'DD MMM YYYY HH:mm:ss',
  41                 'year': 'DD MMM YYYY HH:mm:ss',
  42               },
  43               parser: function (date: string) {
  44                 let offsetValue = new Date().getTimezoneOffset();
  45                 var utcDate = moment(date, 'YYYY-MM-DDTHH:mm:ss').utcOffset(offsetValue).utc(false);
  46                 return utcDate;
  47               }
  48             },
  49             display: true,
  50             scaleLabel: {
  51               display: true,
  52               labelString: 'Timestamp'
  53             }
  54           }],
  55           yAxes: [{
  56             ticks: {
  57               beginAtZero: true
  58             },
  59             scaleLabel: {
  60               display: true,
  61               labelString: 'Value'
  62             }
  63           }]
  64         }
  65       }} />
  66     </div>
  67   );
  68 }
  69
  70 export const sortDataByTimeStamp = <T extends ITimeStamp>(_rows: T[]): T[] => {
  71   return (_rows.sort((a, b) => {
  72     const result = Date.parse(a["utcTimeStamp"]) - Date.parse(b["utcTimeStamp"]);
  73     return isNaN(result) ? 0 : result;
  74   }));
  75 }