diff --git a/panoramix/forms.py b/panoramix/forms.py index bd3c3cc6474eb..df9e2ff403356 100644 --- a/panoramix/forms.py +++ b/panoramix/forms.py @@ -110,6 +110,24 @@ def __init__(self, viz): ['stack', 'stream', 'expand']), default='stack', description=""), + 'linear_color_scheme': SelectField( + 'Color Scheme', choices=self.choicify([ + 'fire', 'blue_white_yellow', 'white_black', + 'black_white']), + default='fire', + description=""), + 'xscale_interval': SelectField( + 'XScale Interval', choices=self.choicify(range(1, 50)), + default='1', + description=( + "Number of step to take between ticks when " + "printing the x scale")), + 'yscale_interval': SelectField( + 'YScale Interval', choices=self.choicify(range(1, 50)), + default='1', + description=( + "Number of step to take between ticks when " + "printing the y scale")), 'bar_stacked': BetterBooleanField( 'Stacked Bars', default=False, diff --git a/panoramix/static/panoramix.js b/panoramix/static/panoramix.js index 676cb1bea70c5..be0f71da6a787 100644 --- a/panoramix/static/panoramix.js +++ b/panoramix/static/panoramix.js @@ -1,23 +1,50 @@ -var px = (function() { - - var visualizations = {}; - var dashboard = undefined; - +var color = function(){ + // Color related utility functions go in this object var bnbColors = [ //rausch hackb kazan babu lima beach barol '#ff5a5f', '#7b0051', '#007A87', '#00d1c1', '#8ce071', '#ffb400', '#b4a76c', '#ff8083', '#cc0086', '#00a1b3', '#00ffeb', '#bbedab', '#ffd266', '#cbc29a', '#ff3339', '#ff1ab1', '#005c66', '#00b3a5', '#55d12e', '#b37e00', '#988b4e', ]; - function colorBnb() { + var spectrums = { + 'fire': ['white', 'yellow', 'red', 'black'], + 'blue_white_yellow': ['#00d1c1', 'white', '#ffb400'], + 'white_black': ['white', 'black'], + 'black_white': ['black', 'white'], + } + var colorBnb = function() { // Color factory var seen = {}; return function(s){ if(seen[s] === undefined) seen[s] = Object.keys(seen).length; - return bnbColors[seen[s] % bnbColors.length]; + return this.bnbColors[seen[s] % this.bnbColors.length]; }; + }; + colorScalerFactory = function (colors, data, accessor){ + // Returns a linear scaler our of an array of color + if(!Array.isArray(colors)) + colors = spectrums[colors]; + var ext = d3.extent(data, accessor); + var points = []; + var chunkSize = (ext[1] - ext[0]) / colors.length; + $.each(colors, function(i, c){ + points.push(i * chunkSize) + }); + return d3.scale.linear().domain(points).range(colors); } + return { + bnbColors: bnbColors, + category21: colorBnb(), + colorScalerFactory: colorScalerFactory, + } +}; + +var px = (function() { + + var visualizations = {}; + var dashboard = undefined; + function UTC(dttm){ return v = new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds()); @@ -488,8 +515,6 @@ var px = (function() { initDashboardView: initDashboardView, formatDate: formatDate, timeFormatFactory: timeFormatFactory, - colorBnb: colorBnb, - bnbColors: bnbColors, - color: colorBnb(), + color: color(), } })(); diff --git a/panoramix/static/widgets/viz_heatmap.js b/panoramix/static/widgets/viz_heatmap.js index ee06b636b853f..37d9dc3df2934 100644 --- a/panoramix/static/widgets/viz_heatmap.js +++ b/panoramix/static/widgets/viz_heatmap.js @@ -39,17 +39,8 @@ px.registerViz('heatmap', function(slice) { var X = 0, Y = 1; var heatmapDim = [xRbScale.domain().length, yRbScale.domain().length]; - ext = d3.extent(data, function(d){return d.v;}); - function colorScalerFactory(colors, data, accessor){ - var ext = d3.extent(data, accessor); - var points = []; - var chunkSize = (ext[1] - ext[0]) / colors.length; - $.each(colors, function(i, c){ - points.push(i * chunkSize) - }); - return d3.scale.linear().domain(points).range(colors); - } - var color = colorScalerFactory(['white', 'yellow', 'red', 'black'], data, function(d){return d.v}); + var color = px.color.colorScalerFactory( + fd.linear_color_scheme, data, function(d){return d.v}); var scale = [ @@ -111,12 +102,18 @@ px.registerViz('heatmap', function(slice) { } }) rect.call(tip); + var xscale_skip = 2; + var yscale_skip = 2; xAxis = d3.svg.axis() .scale(xRbScale) + .tickValues(xRbScale.domain().filter( + function(d, i) { return !(i % (parseInt(fd.xscale_interval))); })) .orient("bottom"); yAxis = d3.svg.axis() .scale(yRbScale) + .tickValues(yRbScale.domain().filter( + function(d, i) { return !(i % (parseInt(fd.yscale_interval))); })) .orient("left"); svg.append("g") diff --git a/panoramix/static/widgets/viz_nvd3.js b/panoramix/static/widgets/viz_nvd3.js index f18c57ac7cebb..c2c4af3ffbadc 100644 --- a/panoramix/static/widgets/viz_nvd3.js +++ b/panoramix/static/widgets/viz_nvd3.js @@ -147,7 +147,7 @@ function viz_nvd3(slice) { } chart.color(function(d, i){ - return px.color(d[colorKey]); + return px.color.category21(d[colorKey]); }); d3.select(slice.selector).append("svg") .datum(payload.data) diff --git a/panoramix/static/widgets/viz_wordcloud.js b/panoramix/static/widgets/viz_wordcloud.js index c772cc992b2e3..7d35b29721886 100644 --- a/panoramix/static/widgets/viz_wordcloud.js +++ b/panoramix/static/widgets/viz_wordcloud.js @@ -49,7 +49,7 @@ px.registerViz('word_cloud', function(slice) { .enter().append("text") .style("font-size", function(d) { return d.size + "px"; }) .style("font-family", "Impact") - .style("fill", function(d, i) {return px.color(d.text); }) + .style("fill", function(d, i) {return px.color.category21(d.text); }) .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")"; diff --git a/panoramix/viz.py b/panoramix/viz.py index 5adc429c23d3f..4c02bb9bdad07 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -1206,6 +1206,13 @@ class HeatmapViz(BaseViz): 'all_columns_y', 'metric', ) + }, + { + 'label': 'Heatmap Options', + 'fields': ( + 'linear_color_scheme', + ('xscale_interval', 'yscale_interval'), + ) },) def query_obj(self): d = super(HeatmapViz, self).query_obj() @@ -1216,12 +1223,15 @@ def query_obj(self): def get_json_data(self): df = self.get_df() - df = df[[ - self.form_data.get('all_columns_x'), - self.form_data.get('all_columns_y'), - self.form_data.get('metric') - ]] - df.columns = ['x', 'y', 'v'] + fd = self.form_data + x = fd.get('all_columns_x') + y = fd.get('all_columns_y') + v = fd.get('metric') + if x == y: + df.columns = ['x', 'y', 'v'] + else: + df = df[[x, y, v]] + df.columns = ['x', 'y', 'v'] return df.to_json(orient="records")