ethanhann/Diagrammatica

View on GitHub
src/js/chart-base.js

Summary

Maintainability
A
1 hr
Test Coverage
'use strict';
/* global isD3Selection: false */
var ChartBase = function (selection, chartClass) {
    this.hasRenderedOnce = false;
    this.selection = isD3Selection(selection) ? selection : d3.select(selection);
    this.update = function () {
    };
    var config = {
        margin: {
            top: 20,
            right: 20,
            bottom: 30,
            left: 40
        },
        width: 480,
        height: 250,
        transitionDuration: 500
    };
    this.config = config;
    this.config.paddedWidth = function () {
        return config.width - config.margin.left - config.margin.right;
    };
    this.config.paddedHeight = function () {
        var paddedHeight = config.height - config.margin.top - config.margin.bottom;
        if (paddedHeight <= 0) {
            throw 'Padded height (' + paddedHeight + ') of chart should be greater than 0. Increase its height or decrease its top/bottom margin.';
        }
        return paddedHeight;
    };
    this.config.tooltipHtml = function () {
        return 'tooltip content';
    };

    this.svg = this.selection.append('svg')
        .attr('class', 'diagrammatica diagrammatica-' + chartClass)
        .attr('width', config.width)
        .attr('height', config.height);
    this.renderArea = this.svg.append('g')
        .attr('transform', 'translate(' + config.margin.left + ',' + config.margin.top + ')');
    this.updateDimensions = function () {
        this.svg.attr('width', config.width).attr('height', config.height);
        this.renderArea.attr('transform', 'translate(' + this.config.margin.left + ',' + this.config.margin.top + ')');
    };
    this.xScale = function () {
    };
    this.xAxis = function () {
    };
    this.yScale = function () {
    };
    this.yAxis = function () {
    };

    var standardColors = ['#FD7C6E', '#87A96B', '#78DBE2', '#1F75FE', '#A2A2D0', '#6699CC', '#0D98BA', '#7366BD', '#CD9575', '#FFA474', '#FAE7B5', '#9F8170', '#ACE5EE', '#DE5D83', '#CB4154', '#B4674D', '#FF7F49', '#EA7E5D', '#B0B7C6', '#FFFF99', '#00CC99', '#FFAACC', '#DD4492', '#1DACD6', '#BC5D58', '#DD9475', '#9ACEEB', '#FFBCD9', '#FDDB6D', '#2B6CC4', '#EFCDB8', '#6E5160', '#CEFF1D', '#71BC78', '#6DAE81', '#C364C5', '#CC6666', '#E7C697', '#FCD975', '#A8E4A0', '#95918C', '#1CAC78', '#1164B4', '#F0E891', '#FF1DCE', '#B2EC5D', '#5D76CB', '#CA3767', '#3BB08F', '#FEFE22', '#FCB4D5', '#FFF44F', '#FFBD88', '#F664AF', '#AAF0D1', '#CD4A4C', '#EDD19C', '#979AAA', '#FF8243', '#C8385A', '#EF98AA', '#FDBCB4', '#1A4876', '#30BA8F', '#C54B8C', '#1974D2', '#FFA343', '#BAB86C', '#FF7538', '#FF2B2B', '#F8D568', '#E6A8D7', '#414A4C', '#FF6E4A', '#1CA9C9', '#FFCFAB', '#C5D0E6', '#FDDDE6', '#158078', '#FC74FD', '#F78FA7', '#8E4585', '#7442C8', '#9D81BA', '#FE4EDA', '#FF496C', '#D68A59', '#714B23', '#FF48D0', '#E3256B', '#EE204D', '#FF5349', '#C0448F', '#1FCECB', '#7851A9', '#FF9BAA', '#FC2847', '#76FF7A', '#93DFB8', '#A5694F', '#8A795D', '#45CEA2', '#FB7EFD', '#CDC5C2', '#80DAEB', '#ECEABE', '#FFCF48', '#FD5E53', '#FAA76C', '#18A7B5', '#EBC7DF', '#FC89AC', '#DBD7D2', '#17806D', '#DEAA88', '#77DDE7', '#FFFF66', '#926EAE', '#324AB2', '#F75394', '#FFA089', '#8F509D', '#FFFFFF', '#A2ADD0', '#FF43A4', '#FC6C85', '#CDA4DE', '#FCE883', '#C5E384', '#FFAE42', '#EFDECD', '#000000'];
    this.colors = d3.scale.ordinal().range(standardColors);
};

ChartBase.prototype.axisLabelText = function (axisLetter, value) {
    var label = this.selection.select('.' + axisLetter + '.axis .label');
    if (check.undefined(value)) {
        return label.empty() ? '' : label.text();
    }
    label.text(value);
    return this.update;
};

ChartBase.prototype.yAxisLabelText = function (value) {
    return this.axisLabelText('y', value);
};

ChartBase.prototype.xAxisLabelText = function (value) {
    return this.axisLabelText('x', value);
};

ChartBase.prototype.setDimension = function (value, axisUpdateCallback, property) {
    if (check.undefined(value)) {
        return this.config[property];
    }
    this.config[property] = value;
    if (!check.undefined(axisUpdateCallback)) {
        axisUpdateCallback();
    }
    this.svg.attr(property, this.config[property]);
    this.updateDimensions();
    return this.update;
};

ChartBase.prototype.width = function (value, axisUpdateCallback) {
    return this.setDimension(value, axisUpdateCallback, 'width');
};

ChartBase.prototype.height = function (value, axisUpdateCallback) {
    return this.setDimension(value, axisUpdateCallback, 'height');
};

ChartBase.prototype.tooltipHtml = function (value) {
    if (!arguments.length) {
        return this.config.tooltipHtml();
    }
    this.config.tooltipHtml = value;
    return this.update;
};