Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)
});
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.