Method constructor

src/grapher/timeseriesgraph.ts:64–159

(protected configuration: TimeseriesGraphConfiguration, private datasource: GraphDataSource)

    private start: number;

    constructor(protected configuration: TimeseriesGraphConfiguration, private datasource: GraphDataSource) {
        this.start = new Date().getTime();

        const now = this.start;

        this.span = configuration.timespan * 1000;

        this.x = d3.scaleTime().range([0, this.width]).domain([now - this.span, now]);
        this.y = d3.scaleLinear().range([this.height, 0]).domain([configuration.minimum, configuration.maximum]);

        this.line = d3.line<GraphPoint>().x((d) => this.x(d.timestamp)).y((d) => this.y(d.value));

        const wrapper = d3.select('.graph-container').append('div').attr('class', 'graph-wrapper');
        wrapper.append('h3').text(configuration.label);

        // Setup Main Graph
        const twidth = this.width + this.margins.left + this.margins.right;
        const theight = this.height + this.margins.top + this.margins.bottom + this.sheight + 50;
        this.svg = wrapper.append('svg')
            .attr('viewBox', `0 0 ${twidth} ${theight}`)
            .attr('preserveAspectRatio', 'xMidYMid meet');
        this.g = this.svg.append('g')
            .attr('transform', `translate(${this.margins.left}, ${this.margins.top})`);
        this.ag = this.g.append('g');

        this.xAxis = this.g.append('g').attr('class', 'axis x-axis')
            .attr('transform', `translate(0,${this.height})`)
            .call(d3.axisBottom(this.x));
        this.yAxis = this.g.append('g').attr('class', 'axis y-axis')
            .call(d3.axisLeft(this.y));

        // Setup Legend
        const legend = this.svg.append('g')
            .attr('class', 'legend')
            .attr('transform', `translate(${this.margins.left + 10}, ${this.margins.top + this.height + 30})`)
            .attr('stroke-width', 1)
            .attr('stroke', 'black')
            .attr('fill', 'none');

        let offset = 10;

        // Setup Summary Graph
        this.sx = d3.scaleTime().range([0, this.width]).domain([now, now + 1000]);
        this.sy = d3.scaleLinear().range([this.sheight, 0]).domain([configuration.minimum, configuration.maximum]);
        this.sg = this.svg.append('g')
            .attr('transform', `translate(${this.margins.left}, ${this.margins.top + this.height + this.margins.bottom + 25})`);
        this.sxAxis = this.sg.append('g').attr('class', 'axis x-axis')
            .attr('transform', `translate(0,${this.sheight})`)
            .call(d3.axisBottom(this.sx));
        this.syAxis = this.sg.append('g').attr('class', 'axis x-axis')
            .call(d3.axisLeft(this.sy).ticks(4));
        this.sline = d3.line<GraphPoint>().x((d) => this.sx(d.timestamp)).y((d) => this.sy(d.value));
        this.hrect = this.sg.append('rect')
            .attr('class', 'highlight-area')
            .attr('x', 0)
            .attr('y', 0)
            .attr('height', this.sheight)
            .attr('width', this.width);