publik-bi/bijoe/templates/bijoe/cube.html

{% extends "bijoe/base.html" %}
{% load i18n staticfiles %}

{% block extrascripts %}
{{ form.media.css }}
<script src="{% static "xstatic/ChartNew.js" %}"></script>
<style>
form {
  float: left;
  width: 20%;
}
input[type=date] {
  width: calc(100% / 2 - 8px);
}
select {
  width: 100%;
}
table {
  padding-left: 2em;
}
input[type=submit] {
  float: right;
  z-index: 1;
  position: relative;
}
.filter { display: inline-block; }
td {
  width: 10em;
}
th {
  text-overflow: ellipsis;
  text-align: left;
  width: 30px;
}
</style>
{% endblock %}

{% block breadcrumb %}

{% url 'homepage' as homepage_url %}
<a href="{{ homepage_url }}">{% trans "Homepage" %}</a>

{% url 'warehouse' warehouse=warehouse.name as warehouse_url %}
<a href="{{ warehouse_url }}">{{ warehouse.label }}</a>

<a>{{ cube.label }}</a>
{% endblock %}

{% block content %}
  <form method="post">
    {% csrf_token %}
    <input type="submit" value="ODS" name="ods"/>
    <h2>Mesure(s)</h2>
    {% with field=form.measures %}
      <p {% if field.css_classes %}class="{{ field.css_classes }}"{% endif %}>
         {{ field }}
         {% if field.help_text %}
           <span class="helptext">{{ field.help_text }}</span>
         {% endif %}
      </p>
    {% endwith %}
    <h2>Regroupement(s)</h2>
    {% with field=form.drilldown %}
      <p {% if field.css_classes %}class="{{ field.css_classes }}"{% endif %}>
         {{ field }}
         {% if field.help_text %}
           <span class="helptext">{{ field.help_text }}</span>
         {% endif %}
      </p>
    {% endwith %}
    <h2>Filtre(s)</h2
    {% for field in form %}
      {% if not field.is_hidden and field.name != "measures" and field.name != "drilldown" %}
      <p {% if field.css_classes %}class="{{ field.css_classes }}"{% endif %}>
         {{ field.label_tag }}
         {% if field.errors %}
           <ul class="errorlist">
             {% for error in field.errors %}
               <li>{{ error }}</li>
             {% endfor %}
           </ul>
         {% endif %}
         {{ field }}
         {% if field.help_text %}
           <span class="helptext">{{ field.help_text }}</span>
         {% endif %}
      </p>
      {% endif %}
    {% endfor %}
  </form>
  {% if data %}
    <table>
      <thead>
        {% for dimension in drilldown %}
          <th>{{ dimension.label.capitalize }}</th>
        {% endfor %}
        {% for measure in measures %}
          <th>{{ measure.label.capitalize }}</th>
        {% endfor %}
      </thead>
      <tbody>
        {% for row in data %}
          <tr>
            {% for cell in row %}
              <td>{% if cell == None %}{% trans "None" %}{% else %}{{ cell }}{% endif %}</td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
    <canvas style="width: 100%"></canvas>
  {% else %}
    <div class="big-msg-info">Veuillez choisir des mesures et des regroupements</div>
  {% endif %}
{% endblock %}

{% block page-end %}
{{ form.media.js }}
<script>
$(function () {
  $('input[type="date"]').datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
  },
  $.datepicker.regional['fr']);
  $('input, select').on('change', function () {
    $('form').submit();
  });
})
var data = {{ json|safe }};
linedata = {labels: [], datasets: []};
for (var i = 0; i < data.length; i++) {
  var row = data[i];
  var label = [];
  var datasets = linedata.datasets;
  for (var j = 0; j < row.coords.length; j++) {
    label.push(row.coords[j].value)
  }
  label = label.join(' ');
  linedata.labels.push(label)
  for (var j = 0; j < row.measures.length; j++) {
    if (datasets.length < j+1) {
      datasets.push({data: []});
    }
    datasets[j].label = row.measures[j].label;
    datasets[j].axis = j+1;
    datasets[j].data.push(row.measures[j].value);
  }
}
var ctx = $('canvas')[0].getContext("2d");
   var option = {
      //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
      scaleBeginAtZero : true,

      //Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines : true,

      //String - Colour of the grid lines
      scaleGridLineColor : "rgba(0,0,0,.05)",

      //Number - Width of the grid lines
      scaleGridLineWidth : 1,

      //Boolean - Whether to show horizontal lines (except X axis)
      scaleShowHorizontalLines: true,

      //Boolean - Whether to show vertical lines (except Y axis)
      scaleShowVerticalLines: true,

      //Boolean - If there is a stroke on each bar
      barShowStroke : true,

      //Number - Pixel width of the bar stroke
      barStrokeWidth : 2,

      //Number - Spacing between each of the X value sets
      barValueSpacing : 5,

      //Number - Spacing between data sets within X values
      barDatasetSpacing : 1,

      //String - A legend template
      responsive: true,
      responsiveMinHeight: 300,
      legend: true,
      yAxisMinimumInterval: 10,
      inGraphDataShow: true,
   }
new Chart(ctx).Bar(linedata, option);
</script>
{% endblock %}