Угловой график высокой диаграммы, отображающий разрывы строк через RxJS Subject - PullRequest
Новая
       7

Угловой график высокой диаграммы, отображающий разрывы строк через RxJS Subject

0 голосов
/ 13 мая 2019

Я пытаюсь отобразить линейный график с 2 сериями. 1 серия отображается отлично, а другая - с белыми разрывами.

На странице есть 2 компонента: 

DataComponent - contains a grid
ChartComponent - Highchart
MyService - communication between the 2 above

По сути, когда пользователь щелкает строку в сетке в DataComponent, вызывается прослушиватель GraphComponent с идентификатором. Этот идентификатор отправляется на сервер и отвечает данными графиков. Пока пользовательский интерфейс работает, я имитирую данные в модуле .TS.

Проблема, как объяснено выше, я пытаюсь отобразить линейный график с 2 рядами. 1 серия отображается отлично, другая - с белыми разрывами. Я указал, что проблема заключается в потенциальном использовании Субъекта RxJS, который используется для связи между двумя компонентами через Сервис.

При использовании темы появляются разрывы строк. Без разрывов строки нет. Обратите внимание, что без Subject я просто вызываю метод в конструкторе.

DataComponent: 

export class DataComponent {
    //Constructor....

    // Triggered successfully when a user clicks on a row on the grid
    public gridClicked(e) {
        this.myService.setId(e);
    }
}

MyService: 

@Injectable
export class MyService() {
    private _listener = new Subject<any>();

    //Constructor....


    public setId(e): Observable<any> {
        this._listener.next(filter);
    }

    public listenForIdChanges(): Observable <any> {
        this._listeners.asObservable();
    }

}

ChartComponent: 

export class DataComponent {
    constructor(myService: MyService) {
        this.myService.listenForIdChanges()
            .subscribe((id: string) => {
                this.getChartData(id);
            }, (error) = > {

            });
    }

    public getChartData(id) {
        this.restService.getData()
            .subscribe((data: string) => {
                this.populateData(data);
            }, (error) = > {

            });
    }


    public populateData(data) {

        this.chartModel = [];

        data.forEach((i) => {
            this.chartModel.push({
                time: i.time,
                series1: i.fork,
                series2: i.spoons
            });
        }
    }
}

В ChartComponent, если я закомментирую, как показано ниже: 

export class DataComponent {
    constructor(myService: MyService) {
        //this.myService.listenForIdChanges()
        //    .subscribe((id: string) => {
                this.getChartData(id);
        //    }, (error) = > {

        //    });
    }

И смоделируйте данные в const, т.е.: 

const mockData = [
    {'time': '2019-05-01 01:10:14.002, 'fork': 1, 'spoons': 4},       
    {'time': '2019-05-01 01:10:14.123, 'fork': 2, 'spoons': 4},
    {'time': '2019-05-01 01:10:14.333, 'fork': 4, 'spoons': 4},        
    {'time': '2019-05-01 01:10:14.785, 'fork': 7, 'spoons': 4},        
    {'time': '2019-05-01 01:10:15.001, 'fork': 9, 'spoons': 4},         
    {'time': '2019-05-01 01:10:15.457, 'fork': 13, 'spoons': 4},        
    {'time': '2019-05-01 01:10:15.887, 'fork': 17, 'spoons': 4},
    {'time': '2019-05-01 01:10:15.994, 'fork': 21, 'spoons': 4}
]

и передать в mockData populateData из getChartData: 

    public getChartData(id) {
        this.restService.getData()
            .subscribe((data: string) => {
                this.populateData(mockData);  // <-- Changed this line
            }, (error) = > {

            });
    }


    public populateData(data) {

        this.chartModel = [];

        data.forEach((i) => {
            this.chartModel.push({
                time: i.time,
                series1: i.fork,
                series2: i.spoons
            });
        }
    }

Диаграмма отображается идеально. Пожалуйста, обратите внимание, вилка сделана хорошо. Это ложки с перерывами.

...