nvd3 Stacked Area chart
This commit is contained in:
parent
e64367149e
commit
bf8ce1716a
|
|
@ -219,12 +219,12 @@ def load_examples(sample):
|
|||
if not slc:
|
||||
slc = Slice(
|
||||
slice_name=slice_name,
|
||||
viz_type='line',
|
||||
viz_type='nvd3_line',
|
||||
datasource_type='table',
|
||||
table=tbl,
|
||||
params=get_slice_json(
|
||||
slice_name, viz_type="line", groupby=['name'],
|
||||
granularity='1 day'))
|
||||
slice_name, viz_type="nvd3_line", groupby=['name'],
|
||||
granularity='1 day', rich_tooltip='y', show_legend='y'))
|
||||
session.add(slc)
|
||||
slices.append(slc)
|
||||
|
||||
|
|
|
|||
|
|
@ -120,6 +120,9 @@ def form_factory(viz):
|
|||
'y_log_scale': BooleanField(
|
||||
"Y Log", default=False,
|
||||
description="Use a log scale for the Y axis"),
|
||||
'donut': BooleanField(
|
||||
"Donut", default=False,
|
||||
description="Do you want a donut or a pie?"),
|
||||
}
|
||||
field_css_classes = {k: ['form-control'] for k in px_form_fields.keys()}
|
||||
select2 = [
|
||||
|
|
@ -150,7 +153,8 @@ def form_factory(viz):
|
|||
if isinstance(ff, basestring):
|
||||
ff = [ff]
|
||||
for s in ff:
|
||||
setattr(QueryForm, s, px_form_fields[s])
|
||||
if s:
|
||||
setattr(QueryForm, s, px_form_fields[s])
|
||||
|
||||
# datasource type specific form elements
|
||||
if datasource.__class__.__name__ == 'Table':
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
{% block head_css %}
|
||||
{{super()}}
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='chaudron.png') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="panoramix.css") }}">
|
||||
<style>
|
||||
.navbar-brand a {
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -53,8 +53,6 @@
|
|||
<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
|
||||
title="{{ field.description }}"></i>
|
||||
{% endif %}:
|
||||
</div>
|
||||
<div>
|
||||
{{ field(class_=form.field_css_classes(field.name)) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,13 +61,15 @@
|
|||
<div class="form-group">
|
||||
{% for name in fieldname %}
|
||||
<div class="col-xs-{{ (12 / fieldname|length) | int }}">
|
||||
{% set field = form.get_field(name)%}
|
||||
{{ field.label }}
|
||||
{% if field.description %}
|
||||
<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
|
||||
title="{{ field.description }}"></i>
|
||||
{% endif %}:
|
||||
{{ field(class_=form.field_css_classes(field.name)) }}
|
||||
{% if name %}
|
||||
{% set field = form.get_field(name)%}
|
||||
{{ field.label }}
|
||||
{% if field.description %}
|
||||
<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
|
||||
title="{{ field.description }}"></i>
|
||||
{% endif %}:
|
||||
{{ field(class_=form.field_css_classes(field.name)) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
var url = "{{ viz.get_url(json="true")|safe }}";
|
||||
$.getJSON(url, function(data){
|
||||
nv.addGraph(function() {
|
||||
// chart_type is {{ viz.chart_type }}
|
||||
{% if viz.chart_type == 'nvd3_line' %}
|
||||
{% if viz.args.show_brush == 'y' %}
|
||||
var chart = nv.models.lineWithFocusChart()
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
.x2Axis
|
||||
.tickFormat(function (d) {return tickMultiFormat(UTC(new Date(d))); })
|
||||
.tickValues([]);
|
||||
{% elif viz.chart_type == 'nvd3_line' %}
|
||||
{% else %}
|
||||
var chart = nv.models.lineChart()
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
.showMaxMin(false)
|
||||
.tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
|
||||
chart.showLegend({{ "{}".format(viz.args.show_legend=='y')|lower }});
|
||||
chart.yAxis.tickFormat(d3.format('.3s'));
|
||||
|
||||
{% elif viz.chart_type == 'nvd3_bar' %}
|
||||
var chart = nv.models.multiBarChart()
|
||||
|
|
@ -61,8 +63,29 @@
|
|||
chart.xAxis
|
||||
.showMaxMin(false)
|
||||
.tickFormat(function (d) {return tickMultiFormat(UTC(new Date(d))); });
|
||||
chart.yAxis.tickFormat(d3.format('.3s'));
|
||||
{% elif viz.chart_type == 'pie' %}
|
||||
var chart = nv.models.pieChart()
|
||||
chart.showLegend({{ "{}".format(viz.args.show_legend=='y')|lower }});
|
||||
{% if viz.args.donut=='y' %}
|
||||
chart.donut(true);
|
||||
chart.donutLabelsOutside(true);
|
||||
{% endif %}
|
||||
chart.labelsOutside(true);
|
||||
chart.cornerRadius(true);
|
||||
{% elif viz.chart_type == 'column' %}
|
||||
var chart = nv.models.multiBarChart();
|
||||
chart.yAxis.tickFormat(d3.format('.3s'));
|
||||
{% elif viz.chart_type == 'stacked' %}
|
||||
var chart = nv.models.stackedAreaChart();
|
||||
chart.xScale(d3.time.scale());
|
||||
chart.xAxis
|
||||
.showMaxMin(false)
|
||||
.tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
|
||||
chart.showLegend({{ "{}".format(viz.args.show_legend=='y')|lower }});
|
||||
chart.yAxis.tickFormat(d3.format('.3s'));
|
||||
{% endif %}
|
||||
chart.yAxis.tickFormat(d3.format('.3s'));
|
||||
|
||||
{% if viz.chart_type == "nvd3_line" and viz.args.rich_tooltip == 'y' %}
|
||||
chart.useInteractiveGuideline(true);
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -291,6 +291,8 @@ class Panoramix(BaseView):
|
|||
datasource,
|
||||
form_data=request.args)
|
||||
if request.args.get("json") == "true":
|
||||
if config.get("DEBUG"):
|
||||
payload = obj.get_json()
|
||||
try:
|
||||
payload = obj.get_json()
|
||||
status=200
|
||||
|
|
@ -303,6 +305,8 @@ class Panoramix(BaseView):
|
|||
status=status,
|
||||
mimetype="application/json")
|
||||
else:
|
||||
if config.get("DEBUG"):
|
||||
resp = self.render_template("panoramix/viz.html", viz=obj)
|
||||
try:
|
||||
resp = self.render_template("panoramix/viz.html", viz=obj)
|
||||
except Exception as e:
|
||||
|
|
|
|||
|
|
@ -367,7 +367,7 @@ class NVD3TimeSeriesViz(NVD3Viz):
|
|||
('rolling_type', 'rolling_periods'),
|
||||
('show_brush', 'show_legend'),
|
||||
('rich_tooltip', 'y_axis_zero'),
|
||||
'y_log_scale',
|
||||
('y_log_scale', None)
|
||||
]
|
||||
|
||||
def get_df(self):
|
||||
|
|
@ -392,14 +392,12 @@ class NVD3TimeSeriesViz(NVD3Viz):
|
|||
|
||||
def get_json(self):
|
||||
df = self.get_df()
|
||||
df = df.fillna(0)
|
||||
series = df.to_dict('series')
|
||||
datas = []
|
||||
for name, ys in series.items():
|
||||
if df[name].dtype.kind not in "biufc":
|
||||
continue
|
||||
|
||||
df.tz_localize(None)
|
||||
df.index.tz_localize(None)
|
||||
df['timestamp'] = pd.to_datetime(df.index, utc=False)
|
||||
if isinstance(name, basestring):
|
||||
series_title = name
|
||||
|
|
@ -431,6 +429,18 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
|
|||
]
|
||||
|
||||
|
||||
class NVD3TimeSeriesStackedViz(NVD3TimeSeriesViz):
|
||||
verbose_name = "NVD3 - Time Series - Stacked"
|
||||
chart_type = "stacked"
|
||||
form_fields = [
|
||||
'viz_type',
|
||||
'granularity', ('since', 'until'),
|
||||
'metrics',
|
||||
'groupby', 'limit',
|
||||
('rolling_type', 'rolling_periods'),
|
||||
]
|
||||
|
||||
|
||||
class TimeSeriesCompareViz(TimeSeriesViz):
|
||||
verbose_name = "Time Series - Percent Change"
|
||||
compare = 'percent'
|
||||
|
|
@ -458,15 +468,13 @@ class TimeSeriesStackedBarViz(TimeSeriesViz):
|
|||
stacked = True
|
||||
|
||||
|
||||
|
||||
|
||||
class DistributionPieViz(HighchartsViz):
|
||||
verbose_name = "Distribution - Pie Chart"
|
||||
class DistributionPieViz(NVD3Viz):
|
||||
verbose_name = "Distribution - NVD3 - Pie Chart"
|
||||
chart_type = "pie"
|
||||
js_files = ['highstock.js']
|
||||
form_fields = [
|
||||
'viz_type', 'metrics', 'groupby',
|
||||
('since', 'until'), 'limit']
|
||||
('since', 'until'), 'limit',
|
||||
]
|
||||
|
||||
def query_obj(self):
|
||||
d = super(DistributionPieViz, self).query_obj()
|
||||
|
|
@ -484,21 +492,54 @@ class DistributionPieViz(HighchartsViz):
|
|||
|
||||
def get_json(self):
|
||||
df = self.get_df()
|
||||
chart = Highchart(
|
||||
df, chart_type=self.chart_type, **CHART_ARGS)
|
||||
self.chart_js = chart.javascript_cmd
|
||||
return chart.json
|
||||
df = df.reset_index()
|
||||
df.columns = ['x', 'y']
|
||||
df['color'] = map(utils.color, df.x)
|
||||
return df.to_json(orient="records")
|
||||
|
||||
|
||||
class DistributionBarViz(DistributionPieViz):
|
||||
verbose_name = "Distribution - Bar Chart"
|
||||
chart_type = "column"
|
||||
|
||||
def get_df(self):
|
||||
df = super(DistributionPieViz, self).get_df()
|
||||
df = df.pivot_table(
|
||||
index=self.groupby,
|
||||
values=self.metrics)
|
||||
df = df.sort(self.metrics[0], ascending=False)
|
||||
return df
|
||||
|
||||
def get_json(self):
|
||||
df = self.get_df()
|
||||
series = df.to_dict('series')
|
||||
datas = []
|
||||
for name, ys in series.items():
|
||||
if df[name].dtype.kind not in "biufc":
|
||||
continue
|
||||
df['timestamp'] = pd.to_datetime(df.index, utc=False)
|
||||
if isinstance(name, basestring):
|
||||
series_title = name
|
||||
elif len(self.metrics) > 1:
|
||||
series_title = ", ".join(name)
|
||||
else:
|
||||
series_title = ", ".join(name[1:])
|
||||
d = {
|
||||
"key": series_title,
|
||||
"color": utils.color(series_title),
|
||||
"values": [
|
||||
{'x': ds, 'y': ys[i]}
|
||||
for i, ds in enumerate(df.timestamp)]
|
||||
}
|
||||
datas.append(d)
|
||||
return dumps(datas)
|
||||
|
||||
|
||||
viz_types = OrderedDict([
|
||||
['table', TableViz],
|
||||
['nvd3_line', NVD3TimeSeriesViz],
|
||||
['nvd3_bar', NVD3TimeSeriesBarViz],
|
||||
['stacked', NVD3TimeSeriesStackedViz],
|
||||
['line', TimeSeriesViz],
|
||||
['big_number', BigNumberViz],
|
||||
['compare', TimeSeriesCompareViz],
|
||||
|
|
|
|||
Loading…
Reference in New Issue