Produits Entr'ouvert » Combo

Pygal.tooltip.js

  Files: combo/apps/dataviz/static/js/pygal.tooltip.js

  Copyright: 2015, Florian Mounier Kozea

  License: LGPL-3+

  Comment:

   From https://github.com/Kozea/pygal.js/

from .models import ChartCell, ChartNgCell

class ChartNgForm(forms.ModelForm):

    class Meta:

        model = ChartNgCell

        fields = ('title', 'data_reference', 'chart_type', 'height')

    def __init__(self, *args, **kwargs):

        super(ChartNgForm, self).__init__(*args, **kwargs)

        data_references = []

        bijoe_sites = settings.KNOWN_SERVICES.get('bijoe').items()

        for site_key, site_dict in bijoe_sites:

            result = requests.get('/visualization/json/',

                    remote_service=site_dict, without_user=True,

                    headers={'accept': 'application/json'}).json()

            if len(bijoe_sites) > 1:

                label_prefix = _('%s: ') % site_dict.get('title')

            else:

                label_prefix = ''

            data_references.extend([

                ('%s:%s' % (site_key, x['slug']), '%s%s' % (label_prefix, x['name']))

                for x in result])

        data_references.sort(key=lambda x: x[1])

        self.fields['data_reference'].widget = forms.Select(choices=data_references)

# -*- coding: utf-8 -*-

# Generated by Django 1.11.12 on 2019-03-28 10:11

from __future__ import unicode_literals

from django.db import migrations, models

import django.db.models.deletion

import jsonfield.fields

class Migration(migrations.Migration):

    dependencies = [

        ('data', '0036_page_sub_slug'),

        ('dataviz', '0009_auto_20190617_1214'),

    ]

    operations = [

        migrations.CreateModel(

            name='ChartNgCell',

            fields=[

                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),

                ('placeholder', models.CharField(max_length=20)),

                ('order', models.PositiveIntegerField()),

                ('slug', models.SlugField(blank=True, verbose_name='Slug')),

                ('extra_css_class', models.CharField(blank=True, max_length=100, verbose_name='Extra classes for CSS styling')),

                ('public', models.BooleanField(default=True, verbose_name='Public')),

                ('restricted_to_unlogged', models.BooleanField(default=False, verbose_name='Restrict to unlogged users')),

                ('last_update_timestamp', models.DateTimeField(auto_now=True)),

                ('data_reference', models.CharField(max_length=150, verbose_name='Data')),

                ('title', models.CharField(blank=True, max_length=150, verbose_name='Title')),

                ('cached_json', jsonfield.fields.JSONField(blank=True, default=dict)),

                ('chart_type', models.CharField(choices=[(b'bar', 'Bar'), (b'horizontal-bar', 'Horizontal Bar'), (b'stacked-bar', 'Stacked Bar'), (b'line', 'Line'), (b'pie', 'Pie'), (b'dot', 'Dot'), (b'table', 'Table')], default=b'bar', max_length=20, verbose_name='Chart Type')),

                ('height', models.CharField(choices=[(b'150', 'Short (150px)'), (b'250', 'Average (250px)'), (b'350', 'Tall (350px)')], default=b'250', max_length=20, verbose_name='Height')),

                ('groups', models.ManyToManyField(blank=True, to='auth.Group', verbose_name='Groups')),

                ('page', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='data.Page')),

            ],

            options={

                'verbose_name': 'Chart',

            },

        ),

        migrations.AlterModelOptions(

            name='chartcell',

            options={'verbose_name': 'Chart (legacy)'},

        ),

    ]

import copy

import os

from jsonfield import JSONField

import pygal

from combo.utils import get_templated_url, requests

        verbose_name = _('Chart (legacy)')

        return settings.LEGACY_CHART_CELL_ENABLED and hasattr(settings, 'KNOWN_SERVICES') and settings.KNOWN_SERVICES.get('bijoe')

@register_cell_class

class ChartNgCell(CellBase):

    data_reference = models.CharField(_('Data'), max_length=150)

    title = models.CharField(_('Title'), max_length=150, blank=True)

    cached_json = JSONField(blank=True)

    chart_type = models.CharField(_('Chart Type'), max_length=20, default='bar',

            choices=(

                ('bar', _('Bar')),

                ('horizontal-bar', _('Horizontal Bar')),

                ('stacked-bar', _('Stacked Bar')),

                ('line', _('Line')),

                ('pie', _('Pie')),

                ('dot', _('Dot')),

                ('table', _('Table')),

            ))

    height = models.CharField(_('Height'), max_length=20, default='250',

            choices=(

                ('150', _('Short (150px)')),

                ('250', _('Average (250px)')),

                ('350', _('Tall (350px)')),

            ))

    manager_form_template = 'combo/chartngcell_form.html'

    class Meta:

        verbose_name = _('Chart')

    @classmethod

    def is_enabled(self):

        return hasattr(settings, 'KNOWN_SERVICES') and settings.KNOWN_SERVICES.get('bijoe')

    def get_default_form_class(self):

        from .forms import ChartNgForm

        return ChartNgForm

    def get_additional_label(self):

        return self.title

    def save(self, *args, **kwargs):

        if self.data_reference:

            site_key, visualization_slug = self.data_reference.split(':')

            site_dict = settings.KNOWN_SERVICES['bijoe'][site_key]

            response_json = requests.get('/visualization/json/',

                    remote_service=site_dict, without_user=True,

                    headers={'accept': 'application/json'}).json()

            if isinstance(response_json, dict):

                # forward compatibility with possible API change

                response_json = response_json.get('data')

            for visualization in response_json:

                slug = visualization.get('slug')

                if slug == visualization_slug:

                    self.cached_json = visualization

        return super(ChartNgCell, self).save(*args, **kwargs)

    def get_cell_extra_context(self, context):

        ctx = super(ChartNgCell, self).get_cell_extra_context(context)

        if self.chart_type == 'table':

            chart = self.get_chart(raise_if_not_cached=not(context.get('synchronous')))

            ctx['table'] = chart.render_table(

                transpose=bool(chart.axis_count == 2),

            )

        return ctx

    def get_chart(self, width=None, height=None, raise_if_not_cached=False):

        response = requests.get(

                self.cached_json['data-url'],

                cache_duration=300,

                raise_if_not_cached=raise_if_not_cached).json()

        style = pygal.style.DefaultStyle(

            font_family='OpenSans, sans-serif',

            background='transparent')

        chart = {

            'bar': pygal.Bar,

            'horizontal-bar': pygal.HorizontalBar,

            'stacked-bar': pygal.StackedBar,

            'line': pygal.Line,

            'pie': pygal.Pie,

            'dot': pygal.Dot,

            'table': pygal.Bar,

            }[self.chart_type](config=pygal.Config(style=copy.copy(style)))

        # normalize axis to have a fake axis when there are no dimensions and

        # always a x axis when there is a single dimension.

        x_labels = response['axis'].get('x_labels') or []

        y_labels = response['axis'].get('y_labels') or []

        data = response['data']

        if not x_labels and not y_labels:  # unidata

            x_labels = ['']

            y_labels = ['']

            data = [data]

            chart.axis_count = 0

        elif not x_labels:

            x_labels = y_labels

            y_labels = ['']

            chart.axis_count = 1

        elif not y_labels:

            y_labels = ['']

            chart.axis_count = 1

        else:

            chart.axis_count = 2

        chart.config.margin = 0

        if width:

            chart.config.width = width

        if height:

            chart.config.height = height

        if width or height:

            chart.config.explicit_size = True

        chart.config.js = [os.path.join(settings.STATIC_URL, 'js/pygal-tooltips.js')]

        chart.x_labels = x_labels

        chart.show_legend = bool(len(response['axis']) > 1)

        # matplotlib tab10 palette

        chart.config.style.colors = (

                '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728',

                '#9467bd', '#8c564b', '#e377c2', '#7f7f7f',

                '#bcbd22', '#17becf')

        if self.chart_type == 'dot':

            chart.show_legend = False

            # use a single colour for dots

            chart.config.style.colors = ('#1f77b4',) * len(x_labels)

        if self.chart_type != 'pie':

            for i, serie_label in enumerate(y_labels):

                if chart.axis_count < 2:

                    values = data

                else:

                    values = [data[i][j] for j in range(len(x_labels))]

                chart.add(serie_label, values)

        else:

            # pie, create a serie by data, to get different colours

            values = data

            for label, value in zip(x_labels, values):

                if not value:

                    continue

                chart.add(label, value)

            chart.show_legend = True

        return chart

(function() {

  var $, get_translation, init, init_svg, matches, padding, r_translation, sibl, svg_ns, tooltip_timeout, xlink_ns;

  svg_ns = 'http://www.w3.org/2000/svg';

  xlink_ns = 'http://www.w3.org/1999/xlink';

  $ = function(sel, ctx) {

    if (ctx == null) {

      ctx = null;

    }

    ctx = ctx || document;

    return Array.prototype.slice.call(ctx.querySelectorAll(sel), 0).filter(function(e) {

      return e !== ctx;

    });

  };

  matches = function(el, selector) {

    return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);

  };

  sibl = function(el, match) {

    if (match == null) {

      match = null;

    }

    return Array.prototype.filter.call(el.parentElement.children, function(child) {

      return child !== el && (!match || matches(child, match));

    });

  };

  Array.prototype.one = function() {

    return this.length > 0 && this[0] || {};

  };

  padding = 5;

  tooltip_timeout = null;

  r_translation = /translate\((\d+)[ ,]+(\d+)\)/;

  get_translation = function(el) {

    return (r_translation.exec(el.getAttribute('transform')) || []).slice(1).map(function(x) {

      return +x;

    });

  };

  init = function(ctx) {

    var bbox, box, config, el, graph, inner_svg, num, parent, tooltip, tooltip_el, tt, uid, untooltip, xconvert, yconvert, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3;

    if ($('svg', ctx).length) {

      inner_svg = $('svg', ctx).one();

      parent = inner_svg.parentElement;

      box = inner_svg.viewBox.baseVal;

      bbox = parent.getBBox();

      xconvert = function(x) {

        return ((x - box.x) / box.width) * bbox.width;

      };

      yconvert = function(y) {

        return ((y - box.y) / box.height) * bbox.height;

      };

    } else {

      xconvert = yconvert = function(x) {

        return x;

      };

    }

    if (((_ref = window.pygal) != null ? _ref.config : void 0) != null) {

      if (window.pygal.config.no_prefix != null) {

        config = window.pygal.config;

      } else {

        uid = ctx.id.replace('chart-', '');

        config = window.pygal.config[uid];

      }

    } else {

      config = window.config;

    }

    tooltip_el = null;

    graph = $('.graph').one();

    tt = $('.tooltip', ctx).one();

    _ref1 = $('.reactive', ctx);

    for (_i = 0, _len = _ref1.length; _i < _len; _i++) {

      el = _ref1[_i];

      el.addEventListener('mouseenter', (function(el) {

        return function() {

          return el.classList.add('active');

        };

      })(el));

      el.addEventListener('mouseleave', (function(el) {

        return function() {

          return el.classList.remove('active');

        };

      })(el));

    }

    _ref2 = $('.activate-serie', ctx);

    for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {

      el = _ref2[_j];

      num = el.id.replace('activate-serie-', '');

      el.addEventListener('mouseenter', (function(num) {

        return function() {

          var re, _k, _l, _len2, _len3, _ref3, _ref4, _results;

          _ref3 = $('.serie-' + num + ' .reactive', ctx);

          for (_k = 0, _len2 = _ref3.length; _k < _len2; _k++) {

            re = _ref3[_k];

            re.classList.add('active');

          }

          _ref4 = $('.serie-' + num + ' .showable', ctx);

          _results = [];

          for (_l = 0, _len3 = _ref4.length; _l < _len3; _l++) {

            re = _ref4[_l];

            _results.push(re.classList.add('shown'));

          }

          return _results;

        };

      })(num));

      el.addEventListener('mouseleave', (function(num) {

        return function() {

          var re, _k, _l, _len2, _len3, _ref3, _ref4, _results;

          _ref3 = $('.serie-' + num + ' .reactive', ctx);

          for (_k = 0, _len2 = _ref3.length; _k < _len2; _k++) {

            re = _ref3[_k];

            re.classList.remove('active');

          }

          _ref4 = $('.serie-' + num + ' .showable', ctx);

          _results = [];

          for (_l = 0, _len3 = _ref4.length; _l < _len3; _l++) {

            re = _ref4[_l];

            _results.push(re.classList.remove('shown'));

          }

          return _results;

        };

      })(num));

      el.addEventListener('click', (function(el, num) {

        return function() {

          var ov, re, rect, show, _k, _l, _len2, _len3, _ref3, _ref4, _results;

          rect = $('rect', el).one();

          show = rect.style.fill !== '';

          rect.style.fill = show ? '' : 'transparent';

          _ref3 = $('.serie-' + num + ' .reactive', ctx);

          for (_k = 0, _len2 = _ref3.length; _k < _len2; _k++) {

            re = _ref3[_k];

            re.style.display = show ? '' : 'none';

          }

          _ref4 = $('.text-overlay .serie-' + num, ctx);

          _results = [];

          for (_l = 0, _len3 = _ref4.length; _l < _len3; _l++) {

            ov = _ref4[_l];

            _results.push(ov.style.display = show ? '' : 'none');

          }

          return _results;

        };

      })(el, num));

    }

    _ref3 = $('.tooltip-trigger', ctx);

    for (_k = 0, _len2 = _ref3.length; _k < _len2; _k++) {

      el = _ref3[_k];

      el.addEventListener('mouseenter', (function(el) {

        return function() {

          return tooltip_el = tooltip(el);

        };

      })(el));

    }

    tt.addEventListener('mouseenter', function() {

      return tooltip_el != null ? tooltip_el.classList.add('active') : void 0;

    });

    tt.addEventListener('mouseleave', function() {

      return tooltip_el != null ? tooltip_el.classList.remove('active') : void 0;

    });

    ctx.addEventListener('mouseleave', function() {

      if (tooltip_timeout) {

        clearTimeout(tooltip_timeout);

      }

      return untooltip(0);

    });

    graph.addEventListener('mousemove', function(el) {

      if (tooltip_timeout) {

        return;

      }

      if (!matches(el.target, '.background')) {

        return;

      }

      return untooltip(1000);

    });

    tooltip = function(el) {

      var a, baseline, cls, current_x, current_y, dy, h, i, key, keys, label, legend, name, plot_x, plot_y, rect, serie_index, subval, text, text_group, texts, traversal, value, w, x, x_elt, x_label, xlink, y, y_elt, _l, _len3, _len4, _len5, _m, _n, _ref4, _ref5, _ref6, _ref7, _ref8;

      clearTimeout(tooltip_timeout);

      tooltip_timeout = null;

      tt.style.opacity = 1;

      tt.style.display = '';

      text_group = $('g.text', tt).one();

      rect = $('rect', tt).one();

      text_group.innerHTML = '';

      label = sibl(el, '.label').one().textContent;

      x_label = sibl(el, '.x_label').one().textContent;

      value = sibl(el, '.value').one().textContent;

      xlink = sibl(el, '.xlink').one().textContent;

      serie_index = null;

      parent = el;

      traversal = [];

      while (parent) {

        traversal.push(parent);

        if (parent.classList.contains('series')) {

          break;

        }

        parent = parent.parentElement;

      }

      if (parent) {

        _ref4 = parent.classList;

        for (_l = 0, _len3 = _ref4.length; _l < _len3; _l++) {

          cls = _ref4[_l];

          if (cls.indexOf('serie-') === 0) {

            serie_index = +cls.replace('serie-', '');

            break;

          }

        }

      }

      legend = null;

      if (serie_index !== null) {

        legend = config.legends[serie_index];

      }

      dy = 0;

      keys = [[label, 'label']];

      _ref5 = value.split('\n');

      for (i = _m = 0, _len4 = _ref5.length; _m < _len4; i = ++_m) {

        subval = _ref5[i];

        keys.push([subval, 'value-' + i]);

      }

      if (config.tooltip_fancy_mode) {

        keys.push([xlink, 'xlink']);

        keys.unshift([x_label, 'x_label']);

        keys.unshift([legend, 'legend']);

      }

      texts = {};

      for (_n = 0, _len5 = keys.length; _n < _len5; _n++) {

        _ref6 = keys[_n], key = _ref6[0], name = _ref6[1];

        if (key) {

          text = document.createElementNS(svg_ns, 'text');

          text.textContent = key;

          text.setAttribute('x', padding);

          text.setAttribute('dy', dy);

          text.classList.add(name.indexOf('value') === 0 ? 'value' : name);

          if (name.indexOf('value') === 0 && config.tooltip_fancy_mode) {

            text.classList.add('color-' + serie_index);

          }

          if (name === 'xlink') {

            a = document.createElementNS(svg_ns, 'a');

            a.setAttributeNS(xlink_ns, 'href', key);

            a.textContent = void 0;

            a.appendChild(text);

            text.textContent = 'Link >';

            text_group.appendChild(a);

          } else {

            text_group.appendChild(text);

          }

          dy += text.getBBox().height + padding / 2;

          baseline = padding;

          if (text.style.dominantBaseline !== void 0) {

            text.style.dominantBaseline = 'text-before-edge';

          } else {

            baseline += text.getBBox().height * .8;

          }

          text.setAttribute('y', baseline);

          texts[name] = text;

        }

      }

      w = text_group.getBBox().width + 2 * padding;

      h = text_group.getBBox().height + 2 * padding;

      rect.setAttribute('width', w);

      rect.setAttribute('height', h);

      if (texts.value) {

        texts.value.setAttribute('dx', (w - texts.value.getBBox().width) / 2 - padding);

      }

      if (texts.x_label) {

        texts.x_label.setAttribute('dx', w - texts.x_label.getBBox().width - 2 * padding);

      }

      if (texts.xlink) {

        texts.xlink.setAttribute('dx', w - texts.xlink.getBBox().width - 2 * padding);

      }

      x_elt = sibl(el, '.x').one();

      y_elt = sibl(el, '.y').one();

      x = parseInt(x_elt.textContent);

      if (x_elt.classList.contains('centered')) {

        x -= w / 2;

      } else if (x_elt.classList.contains('left')) {

        x -= w;

      } else if (x_elt.classList.contains('auto')) {

        x = xconvert(el.getBBox().x + el.getBBox().width / 2) - w / 2;

      }

      y = parseInt(y_elt.textContent);

      if (y_elt.classList.contains('centered')) {

        y -= h / 2;

      } else if (y_elt.classList.contains('top')) {

        y -= h;

      } else if (y_elt.classList.contains('auto')) {

        y = yconvert(el.getBBox().y + el.getBBox().height / 2) - h / 2;

      }

      _ref7 = get_translation(tt.parentElement), plot_x = _ref7[0], plot_y = _ref7[1];

      if (x + w + plot_x > config.width) {

        x = config.width - w - plot_x;

      }

      if (y + h + plot_y > config.height) {

        y = config.height - h - plot_y;

      }

      if (x + plot_x < 0) {

        x = -plot_x;

      }

      if (y + plot_y < 0) {

        y = -plot_y;

      }

      _ref8 = get_translation(tt), current_x = _ref8[0], current_y = _ref8[1];

      if (current_x === x && current_y === y) {

        return el;

      }

      tt.setAttribute('transform', "translate(" + x + " " + y + ")");

      return el;

    };

    return untooltip = function(ms) {

      return tooltip_timeout = setTimeout(function() {

        tt.style.display = 'none';

        tt.style.opacity = 0;

        if (tooltip_el != null) {

          tooltip_el.classList.remove('active');

        }

        return tooltip_timeout = null;

      }, ms);

    };

  };

  init_svg = function() {

    var chart, charts, _i, _len, _results;

    charts = $('.pygal-chart');

    if (charts.length) {

      _results = [];

      for (_i = 0, _len = charts.length; _i < _len; _i++) {

        chart = charts[_i];

        _results.push(init(chart));

      }

      return _results;

    }

  };

  if (document.readyState !== 'loading') {

    init_svg();

  } else {

    document.addEventListener('DOMContentLoaded', function() {

      return init_svg();

    });

  }

  window.pygal = window.pygal || {};

  window.pygal.init = init;

  window.pygal.init_svg = init_svg;

}).call(this);

{% load i18n %}

{% if cell.title %}<h2>{{cell.title}}</h2>{% endif %}

{% if cell.chart_type == "table" %}

{{table|safe}}

{% else %}

<div style="min-height: {{cell.height}}px">

<embed id="chart-{{cell.id}}" type="image/svg+xml"/>

</div>

<script>

$(function() {

  var last_width = 1;

  $(window).on('load resize', function() {

    var chart_cell = $('#chart-{{cell.id}}').parent();

    var new_width = Math.floor($(chart_cell).width());

    var ratio = new_width / last_width;

    if (ratio > 1.2 || ratio < 0.8) {

      $('#chart-{{cell.id}}').attr('src',

            "{% url 'combo-dataviz-graph' cell=cell.id %}?width=" + new_width);

      last_width = new_width;

    }

  });

});

</script>

{% endif %}

<div style="position: relative">

{{ form.as_p }}

{% if cell.chart_type != "table" %}

<div style="position: absolute; right: 0; top: 0; width: 300px; height: 150px">

  <embed type="image/svg+xml" src="{% url 'combo-dataviz-graph' cell=cell.id %}?width=300&height=150"/>

</div>

{% endif %}

</div>

from .views import ajax_gauge_count, dataviz_graph

    url(r'^api/dataviz/graph/(?P<cell>[\w_-]+)/$',

        dataviz_graph, name='combo-dataviz-graph'),

# Copyright (C) 2015-2019  Entr'ouvert

from django.core.exceptions import PermissionDenied

from .models import Gauge, ChartNgCell

def dataviz_graph(request, *args, **kwargs):

    cell = ChartNgCell.objects.get(id=kwargs.get('cell'))

    if not cell.page.is_visible(request.user):

        raise PermissionDenied()

    if not cell.is_visible(request.user):

        raise PermissionDenied()

    chart = cell.get_chart(

            width=int(request.GET.get('width', 0)) or None,

            height=int(request.GET.get('height', 0)) or int(cell.height)

    )

    return HttpResponse(chart.render(), content_type='image/svg+xml')

LEGACY_CHART_CELL_ENABLED = False

    python-pywebpush,

    python-pygal,

    python-lxml

        'pygal',

        'lxml',

LEGACY_CHART_CELL_ENABLED = True

import json

from httmock import HTTMock

from django.contrib.auth.models import User, Group

from combo.apps.dataviz.models import Gauge, ChartNgCell

from .test_public import login, normal_user

VISUALIZATION_JSON = [

    {

        'data-url': 'https://bijoe.example.com/visualization/1/json/',

        'path': 'https://bijoe.example.com/visualization/1/iframe/?signature=123',

        'name': 'example visualization (X)',

        'slug': 'example',

    },

    {

        'data-url': 'https://bijoe.example.com/visualization/2/json/',

        'path': 'https://bijoe.example.com/visualization/2/iframe/?signature=123',

        'name': 'second visualization (Y)',

        'slug': 'second',

    },

    {

        'data-url': 'https://bijoe.example.com/visualization/3/json/',

        'path': 'https://bijoe.example.com/visualization/3/iframe/?signature=123',

        'name': 'third visualization (X/Y)',

        'slug': 'third',

    },

    {

        'data-url': 'https://bijoe.example.com/visualization/4/json/',

        'path': 'https://bijoe.example.com/visualization/4/iframe/?signature=123',

        'name': 'fourth visualization (no axis)',

        'slug': 'fourth',

    },

]

def bijoe_mock(url, request):

    if url.path == '/visualization/json/':

        return {'content': json.dumps(VISUALIZATION_JSON), 'request': request, 'status_code': 200}

    if url.path == '/visualization/1/json/':

        response = {

            'format': '1',

            'data': [222, 134, 53],

            'axis': {

                'x_labels': ['web', 'mail', 'email']

            }

        }

        return {'content': json.dumps(response), 'request': request, 'status_code': 200}

    if url.path == '/visualization/2/json/':

        response = {

            'format': '1',

            'data': [222, 134, 53],

            'axis': {

                'y_labels': ['web', 'mail', 'email']

            }

        }

        return {'content': json.dumps(response), 'request': request, 'status_code': 200}

    if url.path == '/visualization/3/json/':

        response = {

            'format': '1',

            'data': [

                [222, 134, 53],

                [122, 114, 33],

            ],

            'axis': {

                'x_labels': ['web', 'mail', 'email'],

                'y_labels': ['foo', 'bar'],

            }

        }

        return {'content': json.dumps(response), 'request': request, 'status_code': 200}

    if url.path == '/visualization/4/json/':

        response = {

            'format': '1',

            'data': 222,

            'axis': {}

        }

        return {'content': json.dumps(response), 'request': request, 'status_code': 200}

def test_chartng_cell(app):

    page = Page(title='One', slug='index')

    page.save()

    with override_settings(KNOWN_SERVICES={

            'bijoe': {'plop': {'title': 'test', 'url': 'https://bijoe.example.com',

                      'secret': 'combo', 'orig': 'combo'}}}):

        with HTTMock(bijoe_mock):

            cell = ChartNgCell(page=page, order=1)

            cell.data_reference = 'plop:example'

            cell.save()

            assert cell.cached_json == VISUALIZATION_JSON[0]

            # bar

            chart = cell.get_chart()

            assert chart.__class__.__name__ == 'Bar'

            assert chart.x_labels == ['web', 'mail', 'email']

            assert chart.raw_series == [([222, 134, 53], {'title': ''})]

            # horizontal bar

            cell.chart_type = 'horizontal-bar'

            chart = cell.get_chart()

            assert chart.__class__.__name__ == 'HorizontalBar'

            assert chart.x_labels == ['web', 'mail', 'email']

            assert chart.raw_series == [([222, 134, 53], {'title': ''})]

            # pie

            cell.chart_type = 'pie'

            chart = cell.get_chart()

            assert chart.__class__.__name__ == 'Pie'

            assert chart.x_labels == ['web', 'mail', 'email']

            assert chart.raw_series == [

                ([222], {'title': u'web'}),

                ([134], {'title': u'mail'}),

                ([53], {'title': u'email'})

            ]

            # data in Y

            cell.chart_type = 'bar'

            cell.data_reference = 'plop:second'

            cell.save()

            assert cell.cached_json == VISUALIZATION_JSON[1]

            chart = cell.get_chart()

            assert chart.x_labels == ['web', 'mail', 'email']

            assert chart.raw_series == [([222, 134, 53], {'title': ''})]

            # data in X/Y

            cell.chart_type = 'bar'

            cell.data_reference = 'plop:third'

            cell.save()

            assert cell.cached_json == VISUALIZATION_JSON[2]

            chart = cell.get_chart()

            assert chart.x_labels == ['web', 'mail', 'email']

            assert chart.raw_series == [

                ([222, 134, 53], {'title': u'foo'}),

                ([122, 114, 33], {'title': u'bar'}),

            ]

            # single data point

            cell.chart_type = 'bar'

            cell.data_reference = 'plop:fourth'

            cell.save()

            assert cell.cached_json == VISUALIZATION_JSON[3]

            chart = cell.get_chart()

            assert chart.x_labels == ['']

            assert chart.raw_series == [([222], {'title': ''})]

def test_chartng_cell_view(app, normal_user):

    page = Page(title='One', slug='index')

    page.save()

    with override_settings(KNOWN_SERVICES={

            'bijoe': {'plop': {'title': 'test', 'url': 'https://bijoe.example.com',

                      'secret': 'combo', 'orig': 'combo'}}}):

        with HTTMock(bijoe_mock):

            cell = ChartNgCell(page=page, order=1, placeholder='content')

            cell.data_reference = 'plop:example'

            cell.save()

            resp = app.get('/')

            assert 'min-height: 250px' in resp.text

            assert '/api/dataviz/graph/1/' in resp.text

            resp = app.get('/api/dataviz/graph/1/?width=400')

            assert resp.content_type == 'image/svg+xml'

            page.public = False

            page.save()

            resp = app.get('/api/dataviz/graph/1/?width=400', status=403)

            page.public = True

            page.save()

            group = Group(name='plop')

            group.save()

            cell.public = False

            cell.groups = [group]

            cell.save()

            resp = app.get('/api/dataviz/graph/1/?width=400', status=403)

            app = login(app, username='normal-user', password='normal-user')

            resp = app.get('/api/dataviz/graph/1/?width=400', status=403)

            normal_user.groups = [group]

            normal_user.save()

            resp = app.get('/api/dataviz/graph/1/?width=400', status=200)

            # table visualization

            cell.chart_type = 'table'

            cell.save()

            resp = app.get('/')

            assert '<td>222</td>' in resp.body

def test_chartng_cell_manager(app, admin_user):

    page = Page(title='One', slug='index')

    page.save()

    app = login(app)

    with override_settings(KNOWN_SERVICES={

            'bijoe': {'plop': {'title': 'test', 'url': 'https://bijoe.example.com',

                      'secret': 'combo', 'orig': 'combo'}}}):

        with HTTMock(bijoe_mock):

            cell = ChartNgCell(page=page, order=1, placeholder='content')

            cell.data_reference = 'plop:example'

            cell.save()

            resp = app.get('/manage/pages/%s/' % page.id)

            assert resp.form['cdataviz_chartngcell-%s-data_reference' % cell.id].options == [

                (u'plop:example', True, u'example visualization (X)'),

                (u'plop:fourth', False, u'fourth visualization (no axis)'),

                (u'plop:second', False, u'second visualization (Y)'),

                (u'plop:third', False, u'third visualization (X/Y)'),

            ]