Monday, 21 June 2021

angular plotly js meterial ui

 component

==================================

import { Component, OnInit, ViewChild, Input, SimpleChanges } from '@angular/core';

import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

import { Subscription, forkJoin, Observable, of } from 'rxjs';

import { IcpsMessageService } from 'icps-message';

import { IcpsUtilsService } from 'icps-utils';

import { IcpsDataService } from 'icps-data';

import { MatDialog, DialogPosition, MatDialogRef } from '@angular/material/dialog';

import {IcpmRanKpiTimeseriesService} from './icpm-ran-kpi-timeseries.service';

import moment from 'moment';

import { IcpmRanKpiTimeseriesDialogComponent } from './icpm-ran-kpi-timeseries-dialog/icpm-ran-kpi-timeseries-dialog.component';

import { HttpClient } from '@angular/common/http';

@Component({

  selector: 'icpm-ran-kpi-timeseries',

  templateUrl: './icpm-ran-kpi-timeseries.component.html',

  styleUrls: ['./icpm-ran-kpi-timeseries.component.scss']

})

export class IcpmRanKpiTimeseriesComponent implements OnInit {


  timeSeriesForm: FormGroup;

  @Input() mConfig: any;

  @Input() config: any;

  private dialogRef: any;

  /*config:any;*/

  cConfig: any;

  cId: string = 'icpm-ran-kpi-timeseries';

  public cols: Observable<number>;

  public colspan1: Observable<number>;

  public colspan2: Observable<number>;

  public colspan3: Observable<number>;

  kpiData: any = [];

  typeList = ['Customer', 'AOTS_M Tickets', 'EIM_Tickets', 'NFSD_Tickets', 'Outage', 'Fault'];

  sectorList: any = [];

  yAxis: any = []

  colors: any = [];

  timeSeriesConfig;

  timeSeriesKeys: any;

  groupedDataBySeriesName: any;

  sectorSelection = false;

  axisList: any[];

  istimeseriesData = false;

  timeseriesData: any[];

  showTypelist = true;

  showKpi = true;

   isloading = false;

   message: string;

  selectedTypes='';

   filteredKpis: any[];


  /**

   * @param icpsDataService

   * @param icpsMessageService

   * @param icpsUtilsService

   * @param commonUtilityService

   * @param fb

   * @param dialog

   */

  constructor(private icpsDataService: IcpsDataService,

              private icpsMessageService: IcpsMessageService,

              private icpsUtilsService: IcpsUtilsService,

              private commonUtilityService: IcpmRanKpiTimeseriesService,

              private fb: FormBuilder,

              private dialog: MatDialog,

              private http: HttpClient) {

  }


  ngOnInit() {


    //Note pick config from configuration service

    this.setConfig();

    this.loadMock();

    //end


    //transaction data

    this.loadFormData();

    //subscriptions

    this.mapSubScriptions();

    //end


  }


  /**

   * pub sub

   */

  mapSubScriptions(){

    this.icpsMessageService.subscribe('populate_KPI' ,(data) => {

      console.log(data);

    });


    //open dialog pubsub

    this.icpsMessageService.subscribe('icpm-ne-details-timeseries-graph-click', undefined, (data: any) => {

      console.log(data);

      let dataCheck =  false;

      if(data.points) {

        if ((data.points[0].data.mode==="markers+text")  && (data.points[0].data.type==="scatter")){

          dataCheck = true

        }

      }

      // const dataCheck = data.points ? (data.points[0]? (data.points[0].data.mode="markers"  && (data.points[0].data.type="scatter")):''):'';

      if (dataCheck) {

        this.openDialog();

      }

    });

  }


  /**

   * timeSeries form

   */

  createForm(){

    this.timeSeriesForm = this.fb.group({

      kpis: new FormControl(''),

      sectors: new FormControl(''),

      type: new FormControl('')

    });


  }


  //while integration prepare all config data

  /**

   *

   * @param changes

   */

  ngOnChanges(changes: SimpleChanges) {

  //Note pick config from configuration service

    this.setConfig();

    this.loadMock();

    //end

    //transaction data

    this.loadFormData();

    //subscriptions hope no ned of pubsub here we can get this from ngOnInt

    this.mapSubScriptions();

    //end

  }


  /**

   * load config data

   */

  loadFormData(){

    if (this.mConfig && this.mConfig.icpcConfig) {

      this.cConfig = this.icpsUtilsService.getComponentConfig(this.mConfig, this.cId);

    }

    this.createForm();

    if (this.config && this.config.kpis) {

      this.showKpi = false;

      this.showTypelist = false;

      this.timeSeriesForm.reset();

      this.loadKPIs();

      this.loadSectors();

    }else{

      this.loadKPIs();

      this.loadSectors();

    }

    //end


  }


  /**

   * Load KPIS

   */

  loadKPIs() {


    let _that = this;

    let uri = _that.cConfig.urlForKPIConfig;

    // if no technolgy vendor take commonID

    if(this.config.technology && this.config.vendor) {

      uri = uri + `?technology=${_that.config.technology}&vendor=${_that.config.vendor}`

    } else if(this.config.commonId) {

      uri = uri + `?commonId=${this.config.commonId}`

    }

    // end

    _that.icpsDataService.get({ 'uri': uri }).subscribe(

      (res: any) => {

        _that.kpiData = res.sort((a, b) => a.KPI_Name.localeCompare(b.KPI_Name));

        if(this.config.kpis) {

          // when kpis provided in config

          this.loadKPIChart();

        }

      }, error => {

        console.log(error);

      });

    /*this.kpiData = [{KPI_Name:'Accessibility'}];

    this.loadKPIChart();*/

  }


  loadKPIChart() {

    this.selectedTypes='';

    this.finalMarksYaxis=[];

    this.finalMarks=[];



    if(this.timeSeriesForm.value.kpis){

      let kpis=this.timeSeriesForm.value.kpis;

      if(!kpis || kpis.length<4){

        this.getTimeseriesData();

      }

    }else{

      this.getTimeseriesData();

    }


   // const data = [[]]

   // yaxis -1 left side , yaxis-2 n 3 right side

    // // hide all when kpis n sectors are given in config....but load timeseries

   //  this.formTimeseriesData(data)

  }


  getTimeseriesData() {

    let _that = this;

    let kpisList = _that.timeSeriesForm.value.kpis?_that.timeSeriesForm.value.kpis: _that.config.kpis;

    let filteredKpis = [];

    if (this.config.kpis) {


      for(let kp of this.config.kpis){

          let isExist = _that.kpiData.filter(kd=>{

            if(kd.KPI_Name==kp){this.getTimeseriesData();

              return true;

            }

          })[0];


          if(isExist){

            filteredKpis.push(isExist);

          }

      }


      kpisList = filteredKpis;

      this.filteredKpis = filteredKpis;

    }

    console.log(kpisList);

    if (! kpisList|| kpisList.length == 0) {

      this.icpsMessageService.publish('showMessageBar', { 'message': 'Please select KPI', 'type': 'warning' });

      return;

    }

   this.isloading = true;

    this.message = "Loading timeseries data from Geolink Internal Source ..."

    let kpis=[];

    this.axisList = [];

    kpisList.forEach( (item) => {

      kpis.push(item?.KPI_Name);

      const obj = {};

      obj['KPI_Name'] = item?.KPI_Name;

      obj['Axis'] = item?.Axis;

      this.axisList.push(obj);

      console.log(this.axisList);

    });

    const args: any = {

      filter: {

        commonId: _that.config.commonId,

        kpiName: kpis,

        startDateTime: _that.config ? _that.config.startDate : '',

        endDateTime: _that.config ? _that.config.endDate : ''

      }

    }

    const dataservices = {

      uri: _that.cConfig.urlForTimeseries,

      params: args,

    };

    // manual checking

    const headers = { 'Access-Control-Allow-Origin':'*'};

    const body = args;

    this.http.post<any>(dataservices.uri, body, { headers }).subscribe(data => {

      setTimeout(() => {

        _that.formTimeseriesData(data);

      }, 500);

    });

    //end

  /*  _that.commonUtilityService

      .postData(dataservices)

      .subscribe((response) => {

        setTimeout(() => {

          _that.formTimeseriesData(response);

        }, 500);

      }, (err: any) => {

      });*/

  }


  formTimeseriesData(data){

    this.isloading = false;

    if (data !== '{}') {

      this.istimeseriesData = true;

    }

    const finalData = [];

    const timeSeriesAccessibilityGraph = {

      isAlreadyDataFramed: true,

      dataServices: {

        data: null

      },

      revision: null,

      layout: {

        showlegend: true,

        legend: {

          orientation: 'v',

          x: 1.1,

          xanchor: 'left',

          y: 1,

          font: {

            size: 9

          },

          // borderwidth: 1

        },

        margin: {

          r: '150'

        },

        width: '1400',

        height: '1000',

        hovermode: 'closest',

        title: 'KPI Time Series',

        xaxis: {

          autorange: true,

          rangeselector: {buttons: [

              {

                count: 1,

                label: '1d',

                step: 'day',

                stepmode: 'backward'

              },

              {

                count: 3,

                label: '3d',

                step: 'day',

                stepmode: 'backward'

              },

              {

                count: 7,

                label: '7d',

                step: 'day',

                stepmode: 'backward'

              },

              {

                count: 15,

                label: '15d',

                step: 'day',

                stepmode: 'backward'

              },

              {step: 'all'}

            ]},

          rangeslider: true,

          title: {

            text: 'x Axis'

          },

          type: 'date'

        },

        yaxis: {

          title: {

            text: 'y Axis'

          },

          autorange: true,

          fixedrange: false

        },

        yaxis2: {

          title: 'yaxis2 title',

          titlefont: {color: 'rgb(148, 103, 189)'},

          tickfont: {color: 'rgb(148, 103, 189)'},

          anchor: 'x',

          overlaying: 'y',

          side: 'right',

          autorange: true,

          fixedrange: false

        },

        yaxis3: {

          title: 'yaxis3 title',

          titlefont: {color: '#d62728'},

          tickfont: {color: '#d62728'},

          autorange: true,

          fixedrange: false,

          anchor: 'free',

          overlaying: 'y',

          side: 'right',

          position: 0.98

        },

      }

    };

    let yaxisTitle = '', yaxis2Title = '', yaxis3Title = '';

    let axisTypes=[];



    for (let i = 0; i < data.length; i++) {

      const groupedBySeriesName = this.groupBySeriesName(data[i], 'Series_Name');

      this.groupedDataBySeriesName = groupedBySeriesName;

      const keys = Object.keys(groupedBySeriesName);

      this.timeSeriesKeys = keys;

      // console.log(groupedBySeriesName);

      for (let idx = 0; idx < keys.length; idx++) {

        // console.log(groupedBySeriesName[keys[idx]]);

        if (groupedBySeriesName[keys[idx]] && groupedBySeriesName[keys[idx]].length) {

          const xAxis = [], yAxis = [], Level1 = [];

          groupedBySeriesName[keys[idx]].map(r => {

            xAxis.push(moment(r.Datetime_Ticks).format('YYYY-MM-DD HH:MM:SS')),

              yAxis.push(r.KPI_Value);

          });

          const xAxisFinal = xAxis.sort((a, b) => b - a);

          let mappedData: any;

          switch (this.axisList[i].Axis) {

            case 1:

              mappedData = {

                name: groupedBySeriesName[keys[idx]][0].Series_Name,

                type: 'scatter',

                mode: 'lines',

                marker: {

                  size: 16

                },

                x: xAxisFinal,

                y: yAxis,

                axis:1

              };

              break;

            case 2:

              if(axisTypes.length==1){

                mappedData = {

                  name: groupedBySeriesName[keys[idx]][0].Series_Name,

                  type: 'scatter',

                  mode: 'lines',

                  marker: {

                    size: 16

                  },

                  x: xAxisFinal,

                  y: yAxis,

                  axis:2

                };

              }else{

                mappedData = {

                  name: groupedBySeriesName[keys[idx]][0].Series_Name,

                  type: 'scatter',

                  mode: 'lines',

                  marker: {

                    size: 16

                  },

                  x: xAxisFinal,

                  y: yAxis,

                  yaxis: 'y2',

                  axis:2

                };

              }


              break;

            case 3:

              if(axisTypes.length==1){

                mappedData = {

                  name: groupedBySeriesName[keys[idx]][0].Series_Name,

                  type: 'scatter',

                  mode: 'lines',

                  marker: {

                    size: 16

                  },

                  x: xAxisFinal,

                  y: yAxis,

                  axis:3

                };

              }else{

                mappedData = {

                  name: groupedBySeriesName[keys[idx]][0].Series_Name,

                  type: 'scatter',

                  mode: 'lines',

                  marker: {

                    size: 16

                  },

                  x: xAxisFinal,

                  y: yAxis,

                  yaxis: 'y3',

                  axis:3

                };

              }


              break;

            default:

              break;

          }

          finalData.push(mappedData);

        }

      }

      switch (this.axisList[i].Axis) {

        case 1:

          yaxisTitle +=  ',' + this.axisList[i].KPI_Name;

          break;

        case 2:

          yaxis2Title +=   ',' + this.axisList[i].KPI_Name;

          break;

        case 3:

          yaxis3Title +=   ',' + this.axisList[i].KPI_Name;

          break;

        default:

          break;

      }

      timeSeriesAccessibilityGraph.layout.yaxis.title.text = yaxisTitle;

      timeSeriesAccessibilityGraph.layout.yaxis2.title = yaxis2Title;

      timeSeriesAccessibilityGraph.layout.yaxis3.title = yaxis3Title;

    }


    this.timeseriesData = finalData;


   let isAxis2Exist=false;

   let isAxis3Exist=false;

    for(let d of finalData){

      let isExist = axisTypes.filter(a=>{

        if(d.axis==2){

          isAxis2Exist=true;

        }

        if(d.axis==3){

          isAxis2Exist=true;

        }

        if(a==d.axis){

          return true;

        }

      })[0];


      if(!isExist){

        axisTypes.push(d.axis);

      }


    }

    let mockTempData=[];

    for(let fa of finalData){

      if(fa.axis==1){

        mockTempData.push(fa);

      }

      if(fa.axis==2){

        if(isAxis2Exist && axisTypes.length==1){

          fa.yaxis=null;

        }

        mockTempData.push(fa);

      }

      if(fa.axis==3){

        if(isAxis3Exist && axisTypes.length==1){

          fa.yaxis=null;

        }

        mockTempData.push(fa);

      }

    }


    this.timeseriesData=mockTempData;

    // when sector is provided in config

    if(this.config.sectors) {

      let sectors = this.config.sectors;

      let kpis = this.filteredKpis;

      let filteredSectorData = [];

      for (let i = 0; i <sectors.length; i++) {

        // filter sectorID data from finalTimeSeries Data

        for (let j = 0; j < kpis.length; j++) {

          let sectorData = this.getsectorDetails(sectors[i],kpis[j]);

          filteredSectorData.push(sectorData);

        }

      }

      timeSeriesAccessibilityGraph.dataServices.data = filteredSectorData;

    } else {

      timeSeriesAccessibilityGraph.dataServices.data = finalData;

    }

    this.timeSeriesConfig = Object.assign({}, timeSeriesAccessibilityGraph);

    this.sectorSelection = true;

  }


  groupBySeriesName = (xs, key) => {

    return xs.reduce((rv, x) =>  {

      (rv[x[key]] = rv[x[key]] || []).push(x);

      return rv;

    }, {});

  }

  loadSectors() {

    // after y-axis 2 right side -remove overlap

    // load sectors - add select all and unselect all--Done

    // on sectors selection filter data -done .

    // load mock pass commonid, kpis, sectors, start and end date and check--Done

    // load mock tech, vendor , commonid, start n end date - check--Done

    //tick no and remove trace--Done

    //decrease size of select-all (sectors)div - cant see scroll bar for dropdown

    let _that = this;

    const uri = _that.cConfig.urlForSectors;

    _that.icpsDataService.get({ 'uri': uri + '?commonId=' + _that.config.commonId }).subscribe(

      (res: any) => {

        if(!res.length){

          this.sectorList.push({

            "EUCELL":"Select All"

          });

        }else{

          _that.sectorList  =  res;

          this.sectorList.unshift({

            "EUCELL":"Select All"

          });

        }



      }, error => {

        console.log(error)

      });

  }

  isSelectAllSectorsSelected: boolean = false;

  onSectorSelection($event){

    if(this.isSelectAllSectorsSelected){

      let isAllExist = $event.value.filter(s=>{

        if(s=="Select All"){

          return true;

        }

      })[0];


      if(!isAllExist || isAllExist.length<=0){

        this.isSelectAllSectorsSelected=false;

        this.timeSeriesForm.get('sectors').setValue([]);

        $event.value=[];

      }

    }

    if(!this.isSelectAllSectorsSelected){

       let isAllExist = $event.value.filter(s=>{

         if(s=="Select All"){

           return true;

         }

       })[0];


       if(isAllExist && isAllExist.length>0){

         this.isSelectAllSectorsSelected=true;

         let selectedSectors=[];

         for(let s of this.sectorList){

            selectedSectors.push(s.EUCELL);

         }

         this.timeSeriesForm.get('sectors').setValue(selectedSectors);

         $event.value=selectedSectors;

       }

    }


    let ftrKpiData = [];

    ftrKpiData=this.timeseriesData;

    let yaxisTitle = '', yaxis2Title = '', yaxis3Title = '';

    let iterator=0;

    this.timeSeriesForm.value.sectors.map((sector) => {

      if (this.istimeseriesData && $event.value.length > 0) {

        if(iterator==0){

          ftrKpiData=[];

          iterator=iterator+1;

        }

        this.timeSeriesForm.value.kpis.map((kpi) => {

          const sectorData = this.getsectorDetails(sector, kpi.KPI_Name);

          if(sectorData)

          ftrKpiData.push(sectorData);

        });

      }

    });

    this.timeSeriesForm.value.kpis.map((kpi, i) => {

      switch (this.axisList[i].Axis) {

        case 1:

          yaxisTitle +=  ',' + this.axisList[i].KPI_Name;

          break;

        case 2:

          yaxis2Title +=   ',' + this.axisList[i].KPI_Name;

          break;

        case 3:

          yaxis3Title +=   ',' + this.axisList[i].KPI_Name;

          break;

        default:

          break;

      }

    });

    const timeSeriesAccessibilityGraph2 = {

      isAlreadyDataFramed: true,

      dataServices: {

        data: null

      },

      revision: null,

      layout: {

        showlegend: true,

        legend: {

          orientation: 'v',

          x: 1.1,

          xanchor: 'left',

          y: 1,

          font: {

            size: 9

          },

          // borderwidth: 1

        },

        margin: {

          r: '150'

        },

        width: '1450',

        height: '1000',

        hovermode: 'closest',

        title: 'KPI Time Series',

        xaxis: {

          autorange: true,

          rangeselector: {buttons: [

              {

                count: 1,

                label: '1d',

                step: 'day',

                stepmode: 'backward'

              },

              {

                count: 3,

                label: '3d',

                step: 'day',

                stepmode: 'backward'

              },

              {

                count: 7,

                label: '7d',

                step: 'day',

                stepmode: 'backward'

              },

              {

                count: 15,

                label: '15d',

                step: 'day',

                stepmode: 'backward'

              },

              {step: 'all'}

            ]},

          rangeslider: true,

          title: {

            text: 'x Axis'

          },

          type: 'date'

        },

        yaxis: {

          title: {

            text: 'y Axis'

          },

          autorange: true,

          fixedrange: false

        },

        yaxis2: {

          title: 'yaxis2 title',

          titlefont: {color: 'rgb(148, 103, 189)'},

          tickfont: {color: 'rgb(148, 103, 189)'},

          anchor: 'x',

          overlaying: 'y',

          side: 'right',

          autorange: true,

          fixedrange: false,

        },

        yaxis3: {

          title: 'yaxis3 title',

          titlefont: {color: '#d62728'},

          tickfont: {color: '#d62728'},

          autorange: true,

          fixedrange: false,

          anchor: 'free',

          overlaying: 'y',

          side: 'right',

          position: 0.98

        },

      }

    }

    timeSeriesAccessibilityGraph2.layout.yaxis.title.text = yaxisTitle;

    timeSeriesAccessibilityGraph2.layout.yaxis2.title = yaxis2Title;

    timeSeriesAccessibilityGraph2.layout.yaxis3.title = yaxis3Title;

    timeSeriesAccessibilityGraph2.dataServices.data = ftrKpiData;

    this.timeSeriesConfig = Object.assign({}, timeSeriesAccessibilityGraph2);

  }

  getsectorDetails(sector, kpi){

    const data = this.timeseriesData.find((x) => {

      return  x.name === kpi + '_' + sector;

    });

    return data;

  }

  onTypeChange($event) {


    let timeSeries = this.timeSeriesConfig.data.filter(ts=>{

      if(!ts.isTypeList){

        return true;

      }

    });


    let timeSeriesMarkers = this.timeSeriesConfig.data.filter(ts=>{

      if(ts.isTypeList){

        return true;

      }

    });


    this.timeSeriesConfig.data=[];

    this.timeSeriesConfig.data =timeSeries;

    this.timeSeriesConfig.dataServices.data=timeSeries;


    let needToProcessMarker=[];

    for(let m of $event.value){

      let isExist = timeSeriesMarkers.filter(ts=>{

        if(ts.markerType==m){

          return true;

        }

      });

      if(isExist && isExist.length>0){

        this.timeSeriesConfig.data.push(isExist[0]);

      }else{

        needToProcessMarker.push(m)

      }

    }



    for(let ml of needToProcessMarker){


      let selectedType = ml;

      let legend = '';

      let uri ='';

      switch (selectedType) {

        case 'AOTS_M Tickets':

          legend ='AOTS'

          uri = this.cConfig.getEIMDataUrl;

          break;

        case 'EIM_Tickets':

          legend ='EIM'

          uri = this.cConfig.getEIMDataUrl;

          break;

        case 'NFSD_Tickets':

          legend ='NFSD'

          uri = this.cConfig.getEIMDataUrl;

          break;

        case "Fault":

          legend ='Fault'

          break;

        default:

          legend =''

          break;

      }

      // this.setMarkers($event, textArray, selectedType);

      console.log($event.value);

      const typeList =$event.value;

      let _that = this;

      const args: any = {

        filter: this.config

      };

      const dataservices = {

        uri: uri,

        params: args

      }

      this.commonUtilityService

        .postData(dataservices).subscribe(

        (response) => {

          console.log(response);

          this.setMarkers($event, [], selectedType,response,legend);

        },

        error => {

        }

      );

    }


  }


  pickNextIndex(input){

    let isExist= this.finalMarksYaxis.filter(d=>{

      if(d==input){

        return true;

      }

    })[0];


    if(isExist){

     return this.pickNextIndex(input+this.markersSpliter);

    }

    return input;

  }

  public finalMarks:any=[];

  public finalMarksYaxis: any=[];

  public uniqueYAxisRange=[];

  public markersSpliter=2.0;

  // setting up markers on timeseries

  setMarkers ($event, textArray, selectedType,markersListNew,legend) {

    // set textArray

    textArray=[];

    //this.setTextArray();

    let ticketNumber='';

    let markersList = [];

    if(!markersListNew || markersListNew.length<=0){

      return false;

    }

    ticketNumber = markersListNew[0].Advisory_ID;

    for(let ml of markersListNew){

      markersList.push({

        key:ml.Create_Date,

        value:ml.Ticket_Number

      });

      textArray.push(legend);

    }

    let isTimerExist=false;

    let yAxis=[];


    for(let fl of markersList){

      let isExist = this.finalMarks.filter(f=>{

        if(f==fl.key){

          return true;

        }

      })[0];


      if(isExist){

        isTimerExist=true;

        break;

      }

    }




    if(markersList.length > 0){

      let mockAxis=[1,2,3];

      let YAxisRange=[];

      for(let i of mockAxis){

        let  ySeries= this.timeSeriesConfig.data.filter(y=>{

          if(y.axis==i){

            return true;

          }

        });


        if(ySeries && ySeries.length>0 && YAxisRange.length<=0){

          for(let yr of ySeries){

            YAxisRange.push(yr.y);

          }

          break;

        }

      }

      let YAxisRangeFinal=[];

      for(let yrf of YAxisRange){

        for(let yc of yrf){

          YAxisRangeFinal.push(yc);

        }


      }


      YAxisRangeFinal=YAxisRangeFinal.filter(n=>{

        if(n>0){

          return true;

        }

      })

      this.uniqueYAxisRange = YAxisRangeFinal.filter(function(elem, index, self) {

        return index === self.indexOf(elem);

      });

      this.uniqueYAxisRange = this.uniqueYAxisRange.sort((a, b) => b - a);

      let minRange= this.uniqueYAxisRange[this.uniqueYAxisRange.length-1];

      minRange=minRange+this.markersSpliter;

      for(let xs of markersList){

        let m= this.pickNextIndex(minRange);

        minRange=m;

        yAxis.push(m);

        this.finalMarksYaxis.push(m);

      }



      const xAxis = [], Level1 = [];

      markersList.map((x,index) => {

        xAxis.push(moment(x).format('YYYY-MM-DD HH:MM:SS'))


      });

      const xAxisFinal = xAxis.sort((a, b) => b - a);


      let timeSeriesConfigMarkers  =  Object.assign({}, this.timeSeriesConfig);

      let markerData={};


      markerData= {

        x: xAxisFinal,

        y:yAxis,

        isTypeList:true,

        markerType: selectedType,

        type: 'scatter',

        mode: 'markers+text',

        showlegend: false,

        textposition: 'bottom',

        text:textArray,

        hovertemplate: 'Ticket Number:'+ ticketNumber+'<extra> </extra>',

        marker: {

          color: 'rgb(17, 157, 255)',

          size: 12,

          symbol : 'star-triangle-up'

        }

      }

      timeSeriesConfigMarkers.data.push(markerData);

      this.timeSeriesConfig = Object.assign({}, timeSeriesConfigMarkers);

      this.timeSeriesConfig = Object.assign({}, this.timeSeriesConfig);

    }

  }


  // open dialog on click of markers

  openDialog() {

    const loadModuleDialogConfig = {"componentSelector": "icpm-aotsm-ticket-details","disableClose": true, "dialogArg": {"disableClose": true }}

    sessionStorage.setItem('TicketDetailsPopUp','view');

    this.icpsMessageService.publish("LoadAppModuleInDialog", loadModuleDialogConfig);

    setTimeout(() => {

      this.icpsMessageService.publish("icpm_aostsm_ticket_details_ServiceEvent", 'TT000072763054');

      // pass Ticket number : TT000072763054

    }, 1000);

   /* this.dialog.open(IcpmRanKpiTimeseriesDialogComponent, {

      width: '850px',

      height: '500px',

      data: {

        animal: 'panda'

      }

    });*/

  }

  ngOnDestroy() {

  }


  //All mock data Remove before merge code

  // local-testing configuration

  setConfig(){

    let mConfig = {

      "id" : "606f9b12a4f35ab221e0802e",

      "menuLabel" : "",

      "moduleId" : "icpm-ran-kpi-timeseries",

      "moduleName" : "IcpmRanKpiTimeseriesComponent",

      "location" : "",

      "componentSelector" : "icpm-ran-kpi-timeseries",

      "loadOnStartup" : false,

      "creator" : "cc096e",

      "hideAppModule" : true,

      "hide" : true,

      "disableClose" : true,

      "icpcConfig" : [

        {

          "cId" : "icpm-ran-kpi-timeseries",

          "Options" : {

            "urlForKPIConfig" : "http://localhost:3089/api/icpms-rtt/mobility_kpi/kpi_config",

            "urlForSectors" : "http://localhost:3089/api/icpms-rtt/mobility_kpi/sectors_by_common_id",

            "urlForTimeseries":"http://localhost:3089/api/icpms-rtt/mobility_kpi/kpi_timeseries",

            "urlForCTSTickets" : "https://ndashdev1.dev.att.com/api/icpms-rtt/ne_details/cts_tickets_for_timeseries",

            "getAOTSMDataUrl" : "https://ndashdev1.dev.att.com/api/icpms-rtt/ne_details/ticket_cts_realtime",

            "getNFSDDataUrl" : "https://ndashdev1.dev.att.com/api/icpms-rtt/ne_details/radar_nfsd_data",

            "getEIMDataUrl" : "https://ndashdev1.dev.att.com/api/icpms-rtt/ne_details/ticket_cts_eim_xref"

          }

        },

      ]

    };

    this.mConfig = Object.assign({}, mConfig);

    this.mConfig.attuid = "cc096e";

  }


  loadMock(){

    this.config = {

      technology:'LTE',

      vendor:'Ericsson', // with axl //nokia with azl

       commonId:'AXL00001',

      //showTypelist:false,

      endDate: "01/01/2021",

      startDate: "05/19/2021"

      //,kpis: ["Accessibility", "RSSI_PUCCH_AVG"]

      //,sectors:['AZL00001_2A_1', 'AZL00001_3A_1']

    }

  }

}


UI
=============================================

<div>
  <form fxLayout="column" novalidate [formGroup]="timeSeriesForm" #fform="ngForm">
    <div fxLayout="column">
      <div fxLayout="row" fxLayoutGap="40px">

        <div fxLayout="column" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutGap.lt-md="0px"
             fxFlex="40" *ngIf="showKpi">
          <mat-form-field class="full-width">
            <mat-select placeholder="Select KPI" formControlName="kpis" multiple>
              <mat-option *ngFor="let item of kpiData" [value]="item"  >
                {{item.KPI_Name}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div fxLayout="column" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutGap.lt-md="0px"
             fxFlex="20" *ngIf="showKpi">
          <button type="submit" id="search" mat-flat-button title="Search" color="accent" (click)="loadKPIChart()"
                  style="margin-left: 12px;margin-top: 1px; ">Show Time Series</button>
        </div>
        <div fxLayout="column" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutGap.lt-md="0px"
             fxFlex="40" *ngIf="showTypelist">
          <mat-form-field class="full-width">
            <mat-select placeholder="Select Type" [(ngModel)]="selectedTypes" formControlName="type" multiple  (selectionChange)="onTypeChange($event)">
              <mat-option *ngFor="let item of typeList" [value]="item"  [disabled]="!istimeseriesData">
                {{item}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>

        <div fxLayout="column" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutGap.lt-md="0px"
             fxFlex="40" *ngIf="showKpi">
          <mat-form-field class="full-width">
            <mat-select placeholder="Select Sector"  formControlName="sectors" multiple (selectionChange)="onSectorSelection($event)">
              <mat-option *ngFor="let item of sectorList" [value]="item.EUCELL"
                          [disabled]="!istimeseriesData">
                {{item.EUCELL}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </div>
  </form>
  <icpm-ran-kpi-timeseries-loading-bar [isloading]="isloading" [message]="message"></icpm-ran-kpi-timeseries-loading-bar>
  <div *ngIf="timeSeriesConfig?.dataServices?.data">
    <icpl-gr-plotly-chart [graphOptions] = "timeSeriesConfig" cId = "icpm-ne-details-timeseries">
    </icpl-gr-plotly-chart>
  </div>
</div>


No comments:

Post a Comment