
describe('TimeSeriesChart', () => {

    it('should be constructible with an empty sourec list and an empty options', () => {
        return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
            new TimeSeriesChart([], {});
        });
    });

    describe('computeTimeGrid', () => {
        it('should return an empty array when the start and the end times are identical', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const someTime = Date.now();
                const labels = TimeSeriesChart.computeTimeGrid(someTime, someTime, 0);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(0);
            });
        });

        const millisecondsPerHour = 3600 * 1000;
        const millisecondsPerDay = 24 * millisecondsPerHour;

        it('should return an empty array when maxLabels is 0', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = Date.now();
                const labels = TimeSeriesChart.computeTimeGrid(endTime - millisecondsPerDay, endTime, 0);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(0);
            });
        });

        it('should return an empty array when maxLabels is 0 even when the interval spans multiple months', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = Date.now();
                const labels = TimeSeriesChart.computeTimeGrid(endTime - 120 * millisecondsPerDay, endTime, 0);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(0);
            });
        });

        function checkGridItem(item, label, expectedDate)
        {
            expect(item.label).to.be(label);
            expect(item.time.__proto__.constructor.name).to.be('Date');
            expect(+item.time).to.be(+new Date(expectedDate));
        }

        it('should generate one hour label with just day for two hour interval when maxLabels is 1', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T07:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(endTime - 2 * millisecondsPerHour, +endTime, 1);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(1);
                checkGridItem(labels[0], '6AM', '2017-01-15T06:00:00Z');
            });
        });

        it('should generate two two-hour labels for four hour interval when maxLabels is 2', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T07:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(endTime - 4 * millisecondsPerHour, +endTime, 2);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(2);
                checkGridItem(labels[0], '4AM', '2017-01-15T04:00:00Z');
                checkGridItem(labels[1], '6AM', '2017-01-15T06:00:00Z');
            });
        });

        it('should generate six two-hour labels for twelve hour interval when maxLabels is 6', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T07:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(+endTime, +endTime + 12 * millisecondsPerHour, 6);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(6);
                checkGridItem(labels[0], '8AM', '2017-01-15T08:00:00Z');
                checkGridItem(labels[1], '10AM', '2017-01-15T10:00:00Z');
                checkGridItem(labels[2], '12PM', '2017-01-15T12:00:00Z');
                checkGridItem(labels[3], '2PM', '2017-01-15T14:00:00Z');
                checkGridItem(labels[4], '4PM', '2017-01-15T16:00:00Z');
                checkGridItem(labels[5], '6PM', '2017-01-15T18:00:00Z');
            });
        });

        it('should generate six two-hour labels with one date label for twelve hour interval that cross a day when maxLabels is 6', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T16:12:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(+endTime, +endTime + 12 * millisecondsPerHour, 6);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(6);
                checkGridItem(labels[0], '6PM', '2017-01-15T18:00:00Z');
                checkGridItem(labels[1], '8PM', '2017-01-15T20:00:00Z');
                checkGridItem(labels[2], '10PM', '2017-01-15T22:00:00Z');
                checkGridItem(labels[3], '1/16', '2017-01-16T00:00:00Z');
                checkGridItem(labels[4], '2AM', '2017-01-16T02:00:00Z');
                checkGridItem(labels[5], '4AM', '2017-01-16T04:00:00Z');
            });
        });

        it('should generate three two-hour labels for six hour interval that cross a year when maxLabels is 5', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2016-12-31T21:37:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(+endTime, +endTime + 6 * millisecondsPerHour, 5);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(3);
                checkGridItem(labels[0], '10PM', '2016-12-31T22:00:00Z');
                checkGridItem(labels[1], '1/1', '2017-01-01T00:00:00Z');
                checkGridItem(labels[2], '2AM', '2017-01-01T02:00:00Z');
            });
        });

        it('should generate one one-day label for one day interval when maxLabels is 1', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T07:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(endTime - millisecondsPerDay, +endTime, 1);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(1);
                checkGridItem(labels[0], '1/15', '2017-01-15T00:00:00Z');
            });
        });

        it('should generate two one-day labels for one day interval when maxLabels is 2', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T07:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(endTime - millisecondsPerDay, +endTime, 2);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(2);
                checkGridItem(labels[0], '1/14 12PM', '2017-01-14T12:00:00Z');
                checkGridItem(labels[1], '1/15', '2017-01-15T00:00:00Z');
            });
        });

        it('should generate four half-day labels for two day interval when maxLabels is 5', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T16:12:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(+endTime, +endTime + 2 * millisecondsPerDay, 5);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(4);
                checkGridItem(labels[0], '1/16', '2017-01-16T00:00:00Z');
                checkGridItem(labels[1], '12PM', '2017-01-16T12:00:00Z');
                checkGridItem(labels[2], '1/17', '2017-01-17T00:00:00Z');
                checkGridItem(labels[3], '12PM', '2017-01-17T12:00:00Z');
            });
        });

        it('should generate four half-day labels for two day interval that cross a year when maxLabels is 5', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2016-12-31T09:12:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(+endTime, +endTime + 2 * millisecondsPerDay, 5);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(4);
                checkGridItem(labels[0], '12/31 12PM', '2016-12-31T12:00:00Z');
                checkGridItem(labels[1], '1/1', '2017-01-01T00:00:00Z');
                checkGridItem(labels[2], '12PM', '2017-01-01T12:00:00Z');
                checkGridItem(labels[3], '1/2', '2017-01-02T00:00:00Z');
            });
        });

        it('should generate seven per-day labels for one week interval when maxLabels is 10', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T07:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(endTime - 7 * millisecondsPerDay, endTime, 10);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(7);
                checkGridItem(labels[0], '1/9', '2017-01-09T00:00:00Z');
                checkGridItem(labels[1], '1/10', '2017-01-10T00:00:00Z');
                checkGridItem(labels[2], '1/11', '2017-01-11T00:00:00Z');
                checkGridItem(labels[3], '1/12', '2017-01-12T00:00:00Z');
                checkGridItem(labels[4], '1/13', '2017-01-13T00:00:00Z');
                checkGridItem(labels[5], '1/14', '2017-01-14T00:00:00Z');
                checkGridItem(labels[6], '1/15', '2017-01-15T00:00:00Z');
            });
        });

        it('should generate three two-day labels for one week interval when maxLabels is 4', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T07:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(endTime - 7 * millisecondsPerDay, endTime, 4);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(3);
                checkGridItem(labels[0], '1/10', '2017-01-10T00:00:00Z');
                checkGridItem(labels[1], '1/12', '2017-01-12T00:00:00Z');
                checkGridItem(labels[2], '1/14', '2017-01-14T00:00:00Z');
            });
        });

        it('should generate seven one-day labels for two week interval when maxLabels is 8', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T18:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(+endTime, +endTime + 14 * millisecondsPerDay, 8);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(7);
                checkGridItem(labels[0], '1/17', '2017-01-17T00:00:00Z');
                checkGridItem(labels[1], '1/19', '2017-01-19T00:00:00Z');
                checkGridItem(labels[2], '1/21', '2017-01-21T00:00:00Z');
                checkGridItem(labels[3], '1/23', '2017-01-23T00:00:00Z');
                checkGridItem(labels[4], '1/25', '2017-01-25T00:00:00Z');
                checkGridItem(labels[5], '1/27', '2017-01-27T00:00:00Z');
                checkGridItem(labels[6], '1/29', '2017-01-29T00:00:00Z');
            });
        });

        it('should generate two one-week labels for two week interval when maxLabels is 3', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T18:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(+endTime, +endTime + 14 * millisecondsPerDay, 3);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(2);
                checkGridItem(labels[0], '1/22', '2017-01-22T00:00:00Z');
                checkGridItem(labels[1], '1/29', '2017-01-29T00:00:00Z');
            });
        });

        it('should generate seven one-month labels for six and half months interval starting before 15th when maxLabels is 7', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T18:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(new Date('2016-07-12T18:53:00Z'), new Date('2017-01-18T08:17:53Z'), 7);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(7);
                checkGridItem(labels[0], '7/15', '2016-07-15T00:00:00Z');
                checkGridItem(labels[1], '8/15', '2016-08-15T00:00:00Z');
                checkGridItem(labels[2], '9/15', '2016-09-15T00:00:00Z');
                checkGridItem(labels[3], '10/15', '2016-10-15T00:00:00Z');
                checkGridItem(labels[4], '11/15', '2016-11-15T00:00:00Z');
                checkGridItem(labels[5], '12/15', '2016-12-15T00:00:00Z');
                checkGridItem(labels[6], '1/15', '2017-01-15T00:00:00Z');
            });
        });

        it('should generate seven one-month labels for six months interval staring after 15th when maxLabels is 7', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T18:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(new Date('2016-07-18T18:53:00Z'), new Date('2017-01-18T08:17:53Z'), 7);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(6);
                checkGridItem(labels[0], '8/1', '2016-08-01T00:00:00Z');
                checkGridItem(labels[1], '9/1', '2016-09-01T00:00:00Z');
                checkGridItem(labels[2], '10/1', '2016-10-01T00:00:00Z');
                checkGridItem(labels[3], '11/1', '2016-11-01T00:00:00Z');
                checkGridItem(labels[4], '12/1', '2016-12-01T00:00:00Z');
            });
        });

        it('should generate six two-months labels for one year interval when maxLabels is 7', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T18:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(new Date('2016-07-11T18:53:00Z'), new Date('2017-07-27T08:17:53Z'), 7);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(6);
                checkGridItem(labels[0], '9/1', '2016-09-01T00:00:00Z');
                checkGridItem(labels[1], '11/1', '2016-11-01T00:00:00Z');
                checkGridItem(labels[2], '1/1', '2017-01-01T00:00:00Z');
                checkGridItem(labels[3], '3/1', '2017-03-01T00:00:00Z');
                checkGridItem(labels[4], '5/1', '2017-05-01T00:00:00Z');
                checkGridItem(labels[5], '7/1', '2017-07-01T00:00:00Z');
            });
        });

        it('should generate four three-months labels for one year interval when maxLabels is 5', () => {
            return ChartTest.importChartScripts(new BrowsingContext).then((TimeSeriesChart) => {
                const endTime = new Date('2017-01-15T18:53:00Z');
                const labels = TimeSeriesChart.computeTimeGrid(new Date('2016-07-11T18:53:00Z'), new Date('2017-07-27T08:17:53Z'), 5);
                expect(labels).to.be.a('array');
                expect(labels.length).to.be(4);
                checkGridItem(labels[0], '10/1', '2016-10-01T00:00:00Z');
                checkGridItem(labels[1], '1/1', '2017-01-01T00:00:00Z');
                checkGridItem(labels[2], '4/1', '2017-04-01T00:00:00Z');
                checkGridItem(labels[3], '7/1', '2017-07-01T00:00:00Z');
            });
        });
    });

    describe('computeValueGrid', () => {

        function checkValueGrid(actual, expected) {
            expect(actual).to.be.a('array');
            expect(JSON.stringify(actual)).to.be(JSON.stringify(expected));
        }

        function approximate(number)
        {
            return Math.round(number * 100000000) / 100000000;
        }

        it('should generate [0.5, 1.0, 1.5, 2.0] for [0.3, 2.3] when maxLabels is 5', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(0.3, 2.3, 5, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => approximate(item.value))).to.eql([0.5, 1.0, 1.5, 2.0]);
                expect(grid.map((item) => item.label)).to.eql(['0.5 pt', '1.0 pt', '1.5 pt', '2.0 pt']);
            });
        });

        it('should generate [0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.2] for [0.3, 2.3] when maxLabels is 10', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(0.3, 2.3, 10, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => approximate(item.value))).to.eql([0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.2]);
                expect(grid.map((item) => item.label)).to.eql(['0.4 pt', '0.6 pt', '0.8 pt', '1.0 pt', '1.2 pt', '1.4 pt', '1.6 pt', '1.8 pt', '2.0 pt', '2.2 pt']);
            });
        });

        it('should generate [1, 2] for [0.3, 2.3] when maxLabels is 2', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(0.3, 2.3, 2, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => item.value)).to.eql([1, 2]);
                expect(grid.map((item) => item.label)).to.eql(['1.0 pt', '2.0 pt']);
            });
        });

        it('should generate [0.4, 0.6, 0.8, 1.0, 1.2] for [0.3, 1.3] when maxLabels is 5', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(0.3, 1.3, 5, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => approximate(item.value))).to.eql([0.4, 0.6, 0.8, 1.0, 1.2]);
                expect(grid.map((item) => item.label)).to.eql(['0.4 pt', '0.6 pt', '0.8 pt', '1.0 pt', '1.2 pt']);
            });
        });

        it('should generate [0.2, 0.4, 0.6, 0.8, 1, 1.2] for [0.2, 1.3] when maxLabels is 10', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(0.2, 1.3, 10, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => approximate(item.value))).to.eql([0.2, 0.4, 0.6, 0.8, 1, 1.2]);
                expect(grid.map((item) => item.label)).to.eql(['0.2 pt', '0.4 pt', '0.6 pt', '0.8 pt', '1.0 pt', '1.2 pt']);
            });
        });

        it('should generate [0.5, 1.0] for [0.3, 1.3] when maxLabels is 4', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(0.3, 1.3, 4, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => approximate(item.value))).to.eql([0.5, 1.0]);
                expect(grid.map((item) => item.label)).to.eql(['0.5 pt', '1.0 pt']);
            });
        });

        it('should generate [10, 20, 30] for [4, 35] when maxLabels is 4', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(4, 35, 4, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => item.value)).to.eql([10, 20, 30]);
                expect(grid.map((item) => item.label)).to.eql(['10 pt', '20 pt', '30 pt']);
            });
        });

        it('should generate [10, 20, 30] for [4, 35] when maxLabels is 6', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(4, 35, 6, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => item.value)).to.eql([10, 20, 30]);
                expect(grid.map((item) => item.label)).to.eql(['10 pt', '20 pt', '30 pt']);
            });
        });

        it('should generate [10, 15, 20, 25, 30, 35] for [6, 35] when maxLabels is 6', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(6, 35, 6, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => item.value)).to.eql([10, 15, 20, 25, 30, 35]);
                expect(grid.map((item) => item.label)).to.eql(['10 pt', '15 pt', '20 pt', '25 pt', '30 pt', '35 pt']);
            });
        });

        it('should generate [110, 115, 120, 125, 130] for [107, 134] when maxLabels is 6', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(107, 134, 6, Metric.makeFormatter('pt', 3));
                expect(grid.map((item) => item.value)).to.eql([110, 115, 120, 125, 130]);
                expect(grid.map((item) => item.label)).to.eql(['110 pt', '115 pt', '120 pt', '125 pt', '130 pt']);
            });
        });

        it('should generate [5e7, 10e7] for [1e7, 1e8] when maxLabels is 4', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(1e7, 1e8, 4, Metric.makeFormatter('pt', 3));
                expect(grid.map((item) => item.value)).to.eql([5e7, 10e7]);
                expect(grid.map((item) => item.label)).to.eql(['50.0 Mpt', '100 Mpt']);
            });
        });

        it('should generate [2e7, 4e7, 6e7, 8e7, 10e7] for [1e7, 1e8] when maxLabels is 5', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(1e7, 1e8, 5, Metric.makeFormatter('pt', 3));
                expect(grid.map((item) => item.value)).to.eql([2e7, 4e7, 6e7, 8e7, 10e7]);
                expect(grid.map((item) => item.label)).to.eql(['20.0 Mpt', '40.0 Mpt', '60.0 Mpt', '80.0 Mpt', '100 Mpt']);
            });
        });

        it('should generate [-1.5, -1.0, -0.5, 0.0, 0.5] for [-1.8, 0.7] when maxLabels is 5', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(-1.8, 0.7, 5, Metric.makeFormatter('pt', 2));
                expect(grid.map((item) => approximate(item.value))).to.eql([-1.5, -1.0, -0.5, 0.0, 0.5]);
                expect(grid.map((item) => item.label)).to.eql(['-1.5 pt', '-1.0 pt', '-0.5 pt', '0.0 pt', '0.5 pt']);
            });
        });

        it('should generate [200ms, 400ms, 600ms, 800ms, 1.00s, 1.20s] for [0.2, 1.3] when maxLabels is 10 and unit is seconds', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const grid = TimeSeriesChart.computeValueGrid(0.2, 1.3, 10, Metric.makeFormatter('s', 3));
                expect(grid.map((item) => approximate(item.value))).to.eql([0.2, 0.4, 0.6, 0.8, 1, 1.2]);
                expect(grid.map((item) => item.label)).to.eql(['200 ms', '400 ms', '600 ms', '800 ms', '1.00 s', '1.20 s']);
            });
        });

        it('should generate [2.0GB, 4.0GB, 6.0GB] for [1.2GB, 7.2GB] when maxLabels is 4 and unit is bytes', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const gigabytes = Math.pow(1024, 3);
                const grid = TimeSeriesChart.computeValueGrid(1.2 * gigabytes, 7.2 * gigabytes, 4, Metric.makeFormatter('B', 2));
                expect(grid.map((item) => approximate(item.value))).to.eql([2 * gigabytes, 4 * gigabytes, 6 * gigabytes]);
                expect(grid.map((item) => item.label)).to.eql(['2.0 GB', '4.0 GB', '6.0 GB']);
            });
        });

        it('should generate [0.6GB, 0.8GB, 1.0GB, 1.2GB] for [0.53GB, 1.23GB] when maxLabels is 4 and unit is bytes', () => {
            const context = new BrowsingContext;
            return ChartTest.importChartScripts(context).then((TimeSeriesChart) => {
                const Metric = context.symbols.Metric;
                const gigabytes = Math.pow(1024, 3);
                const grid = TimeSeriesChart.computeValueGrid(0.53 * gigabytes, 1.23 * gigabytes, 4, Metric.makeFormatter('B', 2));
                expect(grid.map((item) => item.label)).to.eql(['0.6 GB', '0.8 GB', '1.0 GB', '1.2 GB']);
            });
        });

    });

    describe('fetchMeasurementSets', () => {

        it('should fetch the measurement set and create a canvas element upon receiving the data', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context);

                chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chart.fetchMeasurementSets();

                const requests = context.symbols.MockRemoteAPI.requests;
                expect(requests.length).to.be(1);
                ChartTest.respondWithSampleCluster(requests[0]);

                expect(chart.content().querySelector('canvas')).to.be(null);
                return waitForComponentsToRender(context).then(() => {
                    expect(chart.content().querySelector('canvas')).to.not.be(null);
                });
            });
        });

        it('should immediately enqueue to render when the measurement set had already been fetched', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context);

                let set = context.symbols.MeasurementSet.findSet(1, 1, 0);
                let promise = set.fetchBetween(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);

                const requests = context.symbols.MockRemoteAPI.requests;
                expect(requests.length).to.be(1);
                ChartTest.respondWithSampleCluster(requests[0]);

                return promise.then(() => {
                    expect(chart.content().querySelector('canvas')).to.be(null);
                    chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                    chart.fetchMeasurementSets();
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(requests.length).to.be(1);
                    expect(chart.content().querySelector('canvas')).to.not.be(null);
                });
            });
        });

        it('should dispatch "dataChange" action once the fetched data becomes available', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context);

                let dataChangeCount = 0;
                chart.listenToAction('dataChange', () => dataChangeCount++);

                chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chart.fetchMeasurementSets();

                const requests = context.symbols.MockRemoteAPI.requests;
                expect(requests.length).to.be(1);
                ChartTest.respondWithSampleCluster(requests[0]);

                expect(dataChangeCount).to.be(0);
                expect(chart.sampledTimeSeriesData('current')).to.be(null);
                expect(chart.content().querySelector('canvas')).to.be(null);
                return waitForComponentsToRender(context).then(() => {
                    expect(dataChangeCount).to.be(1);
                    expect(chart.sampledTimeSeriesData('current')).to.not.be(null);
                    expect(chart.content().querySelector('canvas')).to.not.be(null);
                });
            });
        });
    });

    describe('sampledTimeSeriesData', () => {
        it('should not contain an outlier when includeOutliers is false', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context, [{includeOutliers: false}])

                chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chart.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                return waitForComponentsToRender(context).then(() => {
                    const view = chart.sampledTimeSeriesData('current');
                    expect(view.length()).to.be(5);
                    for (let point of view)
                        expect(point.markedOutlier).to.be(false);
                });
            });
        });

        it('should contain every outlier when includeOutliers is true', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context, [{includeOutliers: true}])

                chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chart.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                return waitForComponentsToRender(context).then(() => {
                    const view = chart.sampledTimeSeriesData('current');
                    expect(view.length()).to.be(7);
                    expect(view.findPointByIndex(1).markedOutlier).to.be(true);
                    expect(view.findPointByIndex(5).markedOutlier).to.be(true);
                });
            });
        });

        it('should only contain data points in the domain and one preceding point when there are no succeeding points', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context, [{includeOutliers: true}])

                chart.setDomain(posixTime('2016-01-06T00:00:00Z'), posixTime('2016-01-07T00:00:00Z'));
                chart.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                return waitForComponentsToRender(context).then(() => {
                    const view = chart.sampledTimeSeriesData('current');
                    expect([...view].map((point) => point.id)).to.be.eql([1003, 1004, 1005, 1006]);
                });
            });
        });

        it('should only contain data points in the domain and one succeeding point when there are no preceding points', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context, [{includeOutliers: true}])

                chart.setDomain(posixTime('2016-01-05T00:00:00Z'), posixTime('2016-01-06T00:00:00Z'));
                chart.fetchMeasurementSets();
                chart.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                return waitForComponentsToRender(context).then(() => {
                    const view = chart.sampledTimeSeriesData('current');
                    expect([...view].map((point) => point.id)).to.be.eql([1000, 1001, 1002, 1003, 1004]);
                });
            });
        });

        it('should only contain data points in the domain and one preceding point and one succeeding point', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context, [{includeOutliers: true}])

                chart.setDomain(posixTime('2016-01-05T21:00:00Z'), posixTime('2016-01-06T02:00:00Z'));
                chart.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                return waitForComponentsToRender(context).then(() => {
                    const view = chart.sampledTimeSeriesData('current');
                    expect([...view].map((point) => point.id)).to.be.eql([1002, 1003, 1004, 1005]);
                });
            });
        });
    });

    describe('render', () => {
        it('should update the canvas size and its content after the window has been resized', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context, null, {width: '100%', height: '100%'});

                let dataChangeCount = 0;
                chart.listenToAction('dataChange', () => dataChangeCount++);

                chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chart.fetchMeasurementSets();

                const requests = context.symbols.MockRemoteAPI.requests;
                expect(requests.length).to.be(1);
                ChartTest.respondWithSampleCluster(requests[0]);

                expect(dataChangeCount).to.be(0);
                expect(chart.sampledTimeSeriesData('current')).to.be(null);
                expect(chart.content().querySelector('canvas')).to.be(null);
                let canvas;
                let originalWidth;
                let originalHeight;
                return waitForComponentsToRender(context).then(() => {
                    expect(dataChangeCount).to.be(1);
                    expect(chart.sampledTimeSeriesData('current')).to.not.be(null);
                    canvas = chart.content().querySelector('canvas');
                    expect(canvas).to.not.be(null);

                    originalWidth = canvas.offsetWidth;
                    originalHeight = canvas.offsetHeight;
                    expect(originalWidth).to.be(context.document.body.offsetWidth);
                    expect(originalHeight).to.be(context.document.body.offsetHeight);

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    context.iframe.style.width = context.iframe.offsetWidth * 2 + 'px';
                    context.global.dispatchEvent(new Event('resize'));

                    expect(canvas.offsetWidth).to.be(originalWidth);
                    expect(canvas.offsetHeight).to.be(originalHeight);

                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(dataChangeCount).to.be(2);
                    expect(canvas.offsetWidth).to.be.greaterThan(originalWidth);
                    expect(canvas.offsetWidth).to.be(context.document.body.offsetWidth);
                    expect(canvas.offsetHeight).to.be(originalHeight);
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
                });
            });
        });

        it('should not update update the canvas when the window has been resized but its dimensions stays the same', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createChartWithSampleCluster(context, null, {width: '100px', height: '100px'});

                let dataChangeCount = 0;
                chart.listenToAction('dataChange', () => dataChangeCount++);

                chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chart.fetchMeasurementSets();

                const requests = context.symbols.MockRemoteAPI.requests;
                expect(requests.length).to.be(1);
                ChartTest.respondWithSampleCluster(requests[0]);
                expect(dataChangeCount).to.be(0);

                let canvas;
                let data;
                return waitForComponentsToRender(context).then(() => {
                    expect(dataChangeCount).to.be(1);
                    data = chart.sampledTimeSeriesData('current');
                    expect(data).to.not.be(null);
                    canvas = chart.content().querySelector('canvas');
                    expect(canvas).to.not.be(null);

                    expect(canvas.offsetWidth).to.be(100);
                    expect(canvas.offsetHeight).to.be(100);

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    context.iframe.style.width = context.iframe.offsetWidth * 2 + 'px';
                    context.global.dispatchEvent(new Event('resize'));

                    expect(canvas.offsetWidth).to.be(100);
                    expect(canvas.offsetHeight).to.be(100);

                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(dataChangeCount).to.be(1);
                    expect(chart.sampledTimeSeriesData('current')).to.be(data);
                    expect(canvas.offsetWidth).to.be(100);
                    expect(canvas.offsetHeight).to.be(100);
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
                });
            });
        });

        it('should render Y-axis', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chartWithoutYAxis = ChartTest.createChartWithSampleCluster(context, null, {axis:
                    {
                        gridStyle: '#ccc',
                        fontSize: 1,
                        valueFormatter: context.symbols.Metric.makeFormatter('ms', 3),
                    }
                });
                const chartWithYAxis1 = ChartTest.createChartWithSampleCluster(context, null, {axis:
                    {
                        yAxisWidth: 4,
                        gridStyle: '#ccc',
                        fontSize: 1,
                        valueFormatter: context.symbols.Metric.makeFormatter('ms', 3),
                    }
                });
                const chartWithYAxis2 = ChartTest.createChartWithSampleCluster(context, null, {axis:
                    {
                        yAxisWidth: 4,
                        gridStyle: '#ccc',
                        fontSize: 1,
                        valueFormatter: context.symbols.Metric.makeFormatter('B', 3),
                    }
                });

                chartWithoutYAxis.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithoutYAxis.fetchMeasurementSets();
                chartWithYAxis1.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithYAxis1.fetchMeasurementSets();
                chartWithYAxis2.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithYAxis2.fetchMeasurementSets();

                const requests = context.symbols.MockRemoteAPI.requests;
                expect(requests.length).to.be(1);
                ChartTest.respondWithSampleCluster(requests[0]);

                return waitForComponentsToRender(context).then(() => {
                    let canvasWithoutYAxis = chartWithoutYAxis.content().querySelector('canvas');
                    let canvasWithYAxis1 = chartWithYAxis1.content().querySelector('canvas');
                    let canvasWithYAxis2 = chartWithYAxis2.content().querySelector('canvas');
                    CanvasTest.expectCanvasesMismatch(canvasWithoutYAxis, canvasWithYAxis1);
                    CanvasTest.expectCanvasesMismatch(canvasWithoutYAxis, canvasWithYAxis1);
                    CanvasTest.expectCanvasesMismatch(canvasWithYAxis1, canvasWithYAxis2);

                    expect(CanvasTest.canvasContainsColor(canvasWithYAxis1, {r: 204, g: 204, b: 204},
                        {x: canvasWithYAxis1.width - 1, width: 1, y: 0, height: canvasWithYAxis1.height})).to.be(true);
                });
            });
        });

        it('should render the sampled time series', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const lineStyle = 'rgb(0, 128, 255)';
                const lineColor = {r: 0, g: 128, b: 255};
                const chartOptions = {width: '100px', height: '100px'};
                const chartWithoutSampling = ChartTest.createChartWithSampleCluster(context, [{lineStyle, sampleData: false}], chartOptions);
                const chartWithSampling = ChartTest.createChartWithSampleCluster(context, [{lineStyle, sampleData: true}], chartOptions);

                chartWithoutSampling.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithoutSampling.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                chartWithSampling.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithSampling.fetchMeasurementSets();

                let canvasWithSampling;
                let canvasWithoutSampling;
                return waitForComponentsToRender(context).then(() => {
                    canvasWithoutSampling = chartWithoutSampling.content().querySelector('canvas');
                    canvasWithSampling = chartWithSampling.content().querySelector('canvas');

                    CanvasTest.expectCanvasesMatch(canvasWithSampling, canvasWithoutSampling);
                    expect(CanvasTest.canvasContainsColor(canvasWithoutSampling, lineColor)).to.be(true);
                    expect(CanvasTest.canvasContainsColor(canvasWithSampling, lineColor)).to.be(true);

                    const diff = ChartTest.sampleCluster.endTime - ChartTest.sampleCluster.startTime;
                    chartWithoutSampling.setDomain(ChartTest.sampleCluster.startTime - 2 * diff, ChartTest.sampleCluster.endTime);
                    chartWithSampling.setDomain(ChartTest.sampleCluster.startTime - 2 * diff, ChartTest.sampleCluster.endTime);

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithoutSampling);
                    CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithSampling);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithoutSampling)).to.be(true);
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithSampling)).to.be(true);

                    expect(CanvasTest.canvasContainsColor(canvasWithoutSampling, lineColor)).to.be(true);
                    expect(CanvasTest.canvasContainsColor(canvasWithSampling, lineColor)).to.be(true);

                    CanvasTest.expectCanvasesMismatch(canvasWithSampling, canvasWithoutSampling);
                });
            });
        });

        it('should render annotations', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const options = {annotations: { textStyle: '#000', textBackground: '#fff', minWidth: 3, barHeight: 7, barSpacing: 2, fillStyle: '#ccc'}};
                const chartWithoutAnnotations = ChartTest.createChartWithSampleCluster(context, null, options);
                const chartWithAnnotations = ChartTest.createChartWithSampleCluster(context, null, options);

                chartWithoutAnnotations.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithoutAnnotations.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                chartWithAnnotations.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithAnnotations.fetchMeasurementSets();

                let canvasWithAnnotations;
                return waitForComponentsToRender(context).then(() => {
                    const diff = ChartTest.sampleCluster.endTime - ChartTest.sampleCluster.startTime;
                    chartWithAnnotations.setAnnotations([{
                        startTime: ChartTest.sampleCluster.startTime + diff / 4,
                        endTime: ChartTest.sampleCluster.startTime + diff / 2,
                        label: 'hello, world',
                    }]);

                    canvasWithAnnotations = chartWithAnnotations.content().querySelector('canvas');
                    CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithAnnotations);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithAnnotations)).to.be(true);
                
                    const canvasWithoutAnnotations = chartWithoutAnnotations.content().querySelector('canvas');
                    CanvasTest.expectCanvasesMismatch(canvasWithAnnotations, canvasWithoutAnnotations);
                });
            });
        });
    });

});