buoy-analysis/client/chart.js

'use strict';

var BuoyAnalysisChart = {
    /**
     *
     */
    bars: {
        padding: 26,
        spacing: 2,
        width: 23,

        showMonths: true,
        showYears: true,

        property: 'WTMP',
        tickValues: null,

        imperialLabel: null,
        metricLabel: null,

        smallHexValue: null,
        largeHexValue: null
    },

    axis: {
        h: 200,
        min: 100,
        max: 0,
        scale: null,
        scaleInverted: null,
        imperial: null,
        metric: null
    },

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

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

    /**
     *
     */
    appendGradient: function() {
        var chart = d3.select('#chart');
        var id = 'gradient-year';

        chart.selectAll('#' + id).remove();

        var gradient = chart.append("svg:defs")
                            .append("svg:linearGradient")
                            .attr("id", id)
                            .attr('gradientTransform', 'rotate(90)')

        gradient.append("svg:stop")
            .attr("offset", "0%")
            .attr("stop-color", BuoyAnalysisChart.bars.largeHexValue)
            .attr("stop-opacity", 1);

        gradient.append("svg:stop")
            .attr("offset", "100%")
            .attr("stop-color", BuoyAnalysisChart.bars.smallHexValue)
            .attr("stop-opacity", 1);
    },

    /**
     *
     */
    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) {
                    return d.year.toString().slice(-2);
                })
                .attr('x', BuoyAnalysisChart.barYearX)
                .attr('y', 180)

    },

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

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

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

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

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

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

    /**
     *
     */
    updateAxes: function() {
        switch(BuoyAnalysisChart.bars.property) {
            case 'ATMP':
                BuoyAnalysisChart.bars.tickValues = [8, 12, 16, 20, 24];

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

                BuoyAnalysisChart.bars.smallHexValue = '#40596F';
                BuoyAnalysisChart.bars.largeHexValue = '#6cf7ce';
                break;

            case 'WTMP':
                BuoyAnalysisChart.bars.tickValues = [10, 13, 15.5, 18.5, 21];

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

                BuoyAnalysisChart.bars.smallHexValue = '#40596F';
                BuoyAnalysisChart.bars.largeHexValue = '#6cf7ce';
                break;

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

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

                BuoyAnalysisChart.bars.smallHexValue = '#f00';
                BuoyAnalysisChart.bars.largeHexValue = '#C8EBF4';
                // BuoyAnalysisChart.bars.largeHexValue = '#ff0';
                break;

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

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

                BuoyAnalysisChart.bars.smallHexValue = '#20a';
                BuoyAnalysisChart.bars.largeHexValue = '#a02';
                break;

            case 'WSPD':
                BuoyAnalysisChart.bars.tickValues = [3, 6, 9, 12];

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

                BuoyAnalysisChart.bars.smallHexValue = '#f00';
                BuoyAnalysisChart.bars.largeHexValue = '#0f0';
                break;
        };
    },

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

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

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

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

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

        if (BuoyAnalysisChart.bars.showYears === true) {
            chart.selectAll('.bar-year').data(years).enter()
                .append('rect')
                    .classed('bar-year', true)
                    .attr('fill', 'url("#gradient-year")')
                    .attr('width', 23)
                    .attr('height', BuoyAnalysisChart.axis.h)
                    .attr('x', BuoyAnalysisChart.barYearX)
                    .attr('y', 0)

            chart.selectAll('.mask-year').data(years).enter()
                .append('rect')
                    .classed('.mask-year', true)
                    .attr('fill', '#fff')
                    .attr('width', 25)
                    .attr('height', function(d) {
                        return Math.max(0, BuoyAnalysisChart.axis.scale(d.average));
                    })
                    .attr('x', function(d, i) {
                        return BuoyAnalysisChart.barYearX(d, i) - 1;
                    })
                    .attr('y', 0)
        }

        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 Math.max(0, BuoyAnalysisChart.axis.scaleInverted(d.average));
                    })
                    .attr('x', BuoyAnalysisChart.barMonthX)
                    .attr('y', function(d) {
                        return BuoyAnalysisChart.axis.h - BuoyAnalysisChart.axis.scaleInverted(d.average);
                    })
        }
    }
};