d3proposal.js

define(['d3'], function (d3) {

    const ANIMATION_DURATION = 300;

    var viz = {
        x: d3.scale.ordinal(),
        y: d3.scale.linear(),
        xAxis: function () { return d3.svg.axis().scale(viz.x).orient('bottom') },
        yAxis: function () { return d3.svg.axis().scale(viz.y).orient('left') }
    };

    return {
        initialProperties: {
            qHyperCubeDef: {
                qDimensions: [],
                qMeasures: [],
                qInitialDataFetch: [{
                    qWidth: 2,
                    qHeight: 2000
                }]
            },
            fetchAllData: true,
            margins: { top: 20, right: 20, left: 40, bottom: 30 },
        },
        definition: {
            type: "items",
            component: "accordion",
            items: {
                dimensions: {
                    uses: "dimensions",
                    min: 1,
                    max: 1
                },
                measures: {
                    uses: "measures",
                    min: 1,
                    max: 1
                }
            }
        },
        template: '<svg style="width:100%;height:100%;"><g class="stage"><g class="x axis"></g><g class="y axis"></g></g></svg>',
        controller: function ($scope, $element) {

            viz.stage = {
                data: d3.select($element.find('.stage')[0]),
                xAxis: d3.select($element.find('.x.axis')[0]),
                yAxis: d3.select($element.find('.y.axis')[0])
            };

            viz.stage.data.attr('transform', 'translate(' + $scope.layout.margins.left + ',' + $scope.layout.margins.top + ')');

            viz.width = $element.width() - $scope.layout.margins.left - $scope.layout.margins.right;
            viz.height = $element.height() - $scope.layout.margins.top - $scope.layout.margins.bottom;

            viz.x.rangeRoundBands([0, viz.width], .1);
            viz.y.range([viz.height, 0]);

            viz.stage.xAxis.attr('transform', 'translate(0,' + viz.height + ')')

        },
        paint: function ($element, layout) {

            viz.x.domain(layout.qHyperCube.qDataPages[0].qMatrix.map(d => d[0].qText));
            viz.y.domain([0, layout.qHyperCube.qMeasureInfo[0].qMax * 1.05]);

            viz.stage.xAxis.transition().duration(ANIMATION_DURATION).call(viz.xAxis());
            viz.stage.yAxis.transition().duration(ANIMATION_DURATION).call(viz.yAxis());

            var bar = viz.stage.data.selectAll('.bar').data(layout.qHyperCube.qDataPages[0].qMatrix, (d) => {
                return d[0].qElemNumber;
            });

            bar.exit()
                .transition()
                .duration(ANIMATION_DURATION)
                .attr('y', viz.y(0))
                .attr('height', viz.height - viz.y(0))
                .style('fill-opacity', 1e-6)
                .remove();

            bar.enter().append('rect')
                .attr('class', 'bar')
                .attr('y', (d) => viz.y(0))
                .attr('height', d => (viz.height - viz.y(0)))
                .style({
                    cursor: 'pointer'
                });

            bar.transition().duration(ANIMATION_DURATION)
                .attr('x', (d) => viz.x(d[0].qText))
                .attr('width', viz.x.rangeBand())
                .attr('y', (d) => viz.y(d[1].qNum))
                .attr('height', (d) => {
                    return viz.height - viz.y(d[1].qNum)
                });

        },
        resize: function ($element, layout) {

            viz.width = $element.width() - layout.margins.left - layout.margins.right;
            viz.height = $element.height() - layout.margins.top - layout.margins.bottom

            viz.x.rangeRoundBands([0, viz.width], .1);
            viz.y.range([viz.height, 0]);

            viz.stage.xAxis.attr('transform', 'translate(0,' + viz.height + ')')
                .transition().duration(ANIMATION_DURATION).call(viz.xAxis());

            viz.stage.yAxis.transition().duration(ANIMATION_DURATION).call(viz.yAxis());

            viz.stage.data.selectAll('.bar')
                .transition()
                .duration(ANIMATION_DURATION)
                .attr('x', (d) => viz.x(d[0].qText))
                .attr('width', viz.x.rangeBand())
                .attr('y', (d) => viz.y(d[1].qNum))
                .attr('height', (d) => {
                    return viz.height - viz.y(d[1].qNum)
                });

        }
    }

});