risk-ladder/src/js/progressBar.js

import { round, typeset } from './utilities';

export function createProgressBar(options) {

    // dimensions
    let width, height;
    let x, y;
    // common options
    let colours;
    let lang;  // needed for number formatting
    let controller;

    let max;

    // svg element
    let progressGroup;

    function progressBar(selection) {
        progressGroup = selection.append('g')
            .attr('class', 'progress');

        progressGroup.append('rect')
            .attr('class', 'pbbg')
            .attr('fill', colours.background);

        progressGroup.append('rect')
            .attr('class', 'pbindirect')
            .attr('opacity', 0.8)
            .attr('fill', colours.text);

        let indi = progressGroup.append('g')
            .attr('class', 'indicator');

        indi.append('path')
            .attr('stroke', colours.text);

        indi.append('text')
            .attr('x', (-width * 0.125))
            .attr('fill', colours.text)
            .attr('text-anchor', 'end');

        progressGroup.attr('transform', 'translate(' + x + ',' + y + ')');

        progressGroup.select('rect.pbbg')
            .attr('height', height)
            .attr('width', width);

        progressGroup.select('rect.pbindirect')
            .attr('width', width);

        progressGroup.select('.indicator path')
            .attr('d', 'M ' + (-width * 0.125) + ' 0 L 0 0');  // line progress indicator
    }

    progressBar.draw = function(cProgress) {
        let indi = progressGroup.select('.indicator');
        indi.attr('transform', 'translate(0,' + height * cProgress + ')');

        progressGroup.select('.pbindirect')
            .attr('height', height * cProgress);

        indi.select('text')
            .text(typeset(round(max * cProgress), lang));
    };

    progressBar.lang = function(val) {
        if(!arguments.length) {
            return lang;
        }
        lang = val;
        return progressBar;
    };

    progressBar.max = function(val) {
        if(!arguments.length) {
            return max;
        }
        max = val;
        return progressBar;
    };

    progressBar.controller = function(val) {
        if(!arguments.length) {
            return controller;
        }
        controller = val;
        return progressBar;
    };

    progressBar.width = function(val) {
        if(!arguments.length) {
            return width;
        }
        width = val;
        return progressBar;
    };

    progressBar.height = function(val) {
        if(!arguments.length) {
            return height;
        }
        height = val;
        return progressBar;
    };

    progressBar.x = function(val) {
        if(!arguments.length) {
            return x;
        }
        x = val;
        return progressBar;
    };

    progressBar.y = function(val) {
        if(!arguments.length) {
            return y;
        }
        y = val;
        return progressBar;
    };

    progressBar.colours = function(val) {
        if(!arguments.length) {
            return colours;
        }
        colours = val;
        return progressBar;
    };

    progressBar.controller(options.common.controller);
    progressBar.lang(options.common.lang);
    progressBar.width(options.width);
    progressBar.height(options.height);
    progressBar.x(options.x);
    progressBar.y(options.y);
    progressBar.colours(options.common.colours);
    progressBar.max(options.max);
    return progressBar;
}