buoy-analysis/js/chart.js

'use strict';

var BuoyAnalysisChart = {
    /**
     *
     */
    bars: {
        padding: 15,
        spacing: 2,
        height: 200,
        width: 23,
        color: '#f00',

        showMonths: true,
        showYears: true,

        tickValues: null,

        imperialLabel: null,
        metricLabel: null,
    },

    axis: {
        scale: null,
        scaleInverted: null,
        imperial: null,
        metric: null
    },

    /**
     *
     */
    barYearX: function(d, i) {
        return i * BuoyAnalysisChart.bars.width + i * BuoyAnalysisChart.bars.spacing + 30;
    },

    /**
     *
     */
    barMonthX: function(d, i) {
        var year = Math.floor(i / 12);
        return year * BuoyAnalysisChart.bars.width + year * BuoyAnalysisChart.bars.spacing + (i % 12) * 2 + 30;
    },

    /**
     * DOM init.
     */
    appendYearLabels: function() {
        var years = BuoyAnalysisData.calculateYearlyAverages(BuoyAnalysisMap.reticle.stations);

        d3.select('#year-labels').selectAll('div').data(years).enter()
            .append('div')
                .classed('label', true)
                .text(function(d) {
                    if (d.year % 5) {
                        return '';
                    }

                    return d.year.toString()//.slice(-2);
                })
    },

    /**
     * DOM init.
     */
    appendAxes: function() {
        var chart = d3.select('#chart svg');

        chart.selectAll('.axis').remove();
        chart.selectAll('.label-axis-x').remove();

        chart.append("g")
            .classed('axis', true)
            .classed('axis-imperial', true)
            .attr('transform', 'translate(0, 0)')
            .attr('fill', '#000')
            .call(BuoyAnalysisChart.axis.imperial);

        chart.append("g")
            .classed('axis', true)
            .classed('axis-metric', true)
            .attr('transform', 'translate(875, 0)')
            .call(BuoyAnalysisChart.axis.metric);

        chart.append('text')
            .classed('label-axis-x', true)
            .attr('text-anchor', 'middle')
            .text(BuoyAnalysisChart.bars.imperialLabel)
            .attr('x', 20)
            .attr('y', 10)

        chart.append('text')
            .classed('label-axis-x', true)
            .attr('text-anchor', 'middle')
            .text(BuoyAnalysisChart.bars.metricLabel)
            .attr('x', 890)
            .attr('y', 10)
    },

    /**
     * Updates the color of the bars to an average of current station colors.
     */
    updateColor: function() {
        var r, g, b, station, tmp;
        r = g = b = 0;

        function avg(val) {
            return Math.round(val / BuoyAnalysisMap.reticle.stations.length);
        }

        BuoyAnalysisMap.reticle.stations.forEach(function(s) {
            station = BuoyAnalysisData.stationJson[s];
            tmp = BuoyAnalysisMap.stationColorScale(station.lat).substr(1).match(/.{1,2}/g);
            r += parseInt(tmp[0], 16);
            g += parseInt(tmp[1], 16);
            b += parseInt(tmp[2], 16);
        });

        BuoyAnalysisChart.bars.color = 'rgba(' + avg(r) + ',' + avg(g) + ',' + avg(b) + ', 0.5)';
    },

    /**
     * Handles unit and scale changes.
     */
    updateAxes: function() {
        switch(BuoyAnalysisData.property) {
            case 'at':
                BuoyAnalysisChart.bars.tickValues = [4, 8, 12, 16, 20];

                BuoyAnalysisChart.bars.imperialLabel = '°F';
                BuoyAnalysisChart.bars.metricLabel = '°C';

                BuoyAnalysisChart.bars.leftHexValue = '#a7dde6';
                BuoyAnalysisChart.bars.rightHexValue = '#f75c5c';
                break;

            case 'wt':
                BuoyAnalysisChart.bars.tickValues = [4, 8, 12, 16, 20];

                BuoyAnalysisChart.bars.imperialLabel = '°F';
                BuoyAnalysisChart.bars.metricLabel = '°C';

                BuoyAnalysisChart.bars.leftHexValue = '#e8e8e8';
                BuoyAnalysisChart.bars.rightHexValue = '#e8e8e8';
                break;

            case 'wh':
                BuoyAnalysisChart.bars.tickValues = [1, 2, 3, 4];

                BuoyAnalysisChart.bars.imperialLabel = 'FT';
                BuoyAnalysisChart.bars.metricLabel = 'M';

                BuoyAnalysisChart.bars.leftHexValue = '#c3fd98';
                BuoyAnalysisChart.bars.rightHexValue = '#f00';
                break;

            case 'wp':
                BuoyAnalysisChart.bars.tickValues = [3, 5, 7, 9, 11, 13];

                BuoyAnalysisChart.bars.imperialLabel = 'SEC';
                BuoyAnalysisChart.bars.metricLabel = 'SEC';

                BuoyAnalysisChart.bars.leftHexValue = '#9c90ca';
                BuoyAnalysisChart.bars.rightHexValue = '#a8747e';
                break;

            case 'ws':
                BuoyAnalysisChart.bars.tickValues = [3.05, 6.1, 9.15];

                BuoyAnalysisChart.bars.imperialLabel = 'FT/S';
                BuoyAnalysisChart.bars.metricLabel = 'M/S';

                BuoyAnalysisChart.bars.leftHexValue = '#f3cab8';
                BuoyAnalysisChart.bars.rightHexValue = '#e6dea5';
                break;
        };
    },

    /**
     *
     */
    draw: function() {
        var years = BuoyAnalysisData.calculateYearlyAverages(BuoyAnalysisMap.reticle.stations);

        var months = BuoyAnalysisData.calculateMonthlyAverages(BuoyAnalysisMap.reticle.stations);

        var chart = d3.select('#chart svg');

        var len = BuoyAnalysisData.years.end - BuoyAnalysisData.years.start + 1;
        var h = (BuoyAnalysisChart.bars.height + BuoyAnalysisChart.bars.spacing) * len + BuoyAnalysisChart.bars.padding;

        BuoyAnalysisData.setAxisProperties();
        BuoyAnalysisChart.appendAxes();
        BuoyAnalysisChart.appendYearLabels();

        chart.selectAll('.bar-year').remove();
        chart.selectAll('.mask-year').remove();
        chart.selectAll('.bar-month').remove();
        chart.selectAll('.tick-line').remove();

        // chart.append('line')
        //     .classed('tick-line', true)
        //     .attr('x1', 1)
        //     .attr('x2', 1)
        //     .attr('y1', 15)
        //     .attr('y2', h)
        //
        // chart.append('line')
        //     .classed('tick-line', true)
        //     .attr('x1', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[0]))
        //     .attr('x2', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[0]))
        //     .attr('y1', 15)
        //     .attr('y2', h)
        //
        // chart.append('line')
        //     .classed('tick-line', true)
        //     .attr('x1', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[BuoyAnalysisChart.bars.tickValues.length - 1]))
        //     .attr('x2', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[BuoyAnalysisChart.bars.tickValues.length - 1]))
        //     .attr('y1', 15)
        //     .attr('y2', h)

        if (BuoyAnalysisChart.bars.showYears === true) {
            chart.selectAll('.bar-year').data(years).enter()
                .append('rect')
                    .classed('bar-year', true)
                    .attr('fill', BuoyAnalysisChart.bars.color)
                    .attr('width', BuoyAnalysisChart.bars.width)
                    .attr('height', function(d) {
                        return BuoyAnalysisChart.axis.scale(d.average);
                    })
                    .attr('x', BuoyAnalysisChart.barYearX)
                    .attr('y', function(d) {
                        return BuoyAnalysisChart.bars.height - BuoyAnalysisChart.axis.scale(d.average);
                    })
        }

        if (BuoyAnalysisChart.bars.showMonths === true) {
            chart.selectAll('.bar-month').data(months).enter()
                .append('rect')
                    .classed('bar-month', true)
                    .attr('fill', 'rgba(0, 0, 0, 0.2)')
                    .attr('width', 1)
                    .attr('height', function(d) {
                        return BuoyAnalysisChart.axis.scale(d.average);
                    })
                    .attr('x', BuoyAnalysisChart.barMonthX)
                    .attr('y', function(d) {
                        return BuoyAnalysisChart.bars.height - BuoyAnalysisChart.axis.scale(d.average);
                    })
        }
    }
};