ngOnInit()

in source/console/src/app/common/modules/graph-line/graph-line.component.ts [66:171]


    ngOnInit() {

        this.value.subscribe(val => {
            // called when the notifyChildren method is
            // called in the parent component
            if (this.chart.chart && val !== undefined) {
                (this.chart.chart.data.datasets[0].data as ChartPoint[]).push({
                    x: Date.now(),
                    y: val
                });
                this.chart.chart.update({
                    lazy: true
                    // preservation: true // Temporary comment and change to fix deployment, need to investigate reason why.
                });
            }
        });

        this.options = {
            elements: { point: { hitRadius: 2, hoverRadius: 2, radius: 0 } },
            tooltips: {
                enabled: true
            },
            responsive: true,
            scales: {
                // We use this empty structure as a placeholder for dynamic theming.
                xAxes: [
                    {
                        id: 'x-axis-0',
                        position: 'bottom'
                    }
                ],
                yAxes: [
                    {
                        id: 'y-axis-0',
                        position: 'left',
                        ticks: {}
                    }
                ]
            },
            annotation: {
                events: ['click'],
                annotations: []
            }
        };

        if (this.low) {
            this.options.annotation.annotations.push({
                id: 'lowLine',
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: this.low,
                borderColor: 'rgb(255, 0, 0)',
                borderWidth: 1,
                label: {
                    enabled: true,
                    backgroundColor: '#FF0000',
                    content: `Low ${this.title}`
                },
                draggable: true,
                onDragEnd: e => {
                    // console.log(e.subject.config.value);
                    this.low = e.subject.config.value;
                    this.updateThresholds();
                    // this.setYAxeMinMax(e.subject.chart);
                }
            });
        }
        if (this.high) {
            this.options.annotation.annotations.push({
                id: 'highLine',
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: this.high,
                borderColor: 'rgb(255, 0, 0)',
                borderWidth: 1,
                label: {
                    backgroundColor: '#FF0000',
                    enabled: true,
                    content: `High ${this.title}`
                },
                draggable: true,
                onDragEnd: e => {
                    // console.log(e.subject.config.value);
                    this.high = e.subject.config.value;
                    this.updateThresholds();
                    // this.setYAxeMinMax(e.subject.chart);
                }
            });
        }

        if (this.type === 'realtime') {
            this.options.scales.xAxes[0].type = this.type;
            this.options.scales.xAxes[0].realtime = {
                delay: 1000,
                duration: 300000
            };
        }

        if (this.annotations) {
            this.options.annotation.annotations.push(...this.annotations);
        }

        // this.setYAxeMinMax(null);
    }