apps/store/templates/charts.html

{% extends "base.html" %}
{% block main %}

<div class="w-full">
    <h1 class="text-center font-medium text-2xl py-2">{{ _("Apps quality level from automatic tests") }}</h1>
    <div id="levelRing" class="h-80"></div>
</div>
<div class="w-full">
    <h1 class="text-center font-medium text-2xl py-2">{{ _("Apps quality level history") }}</h1>
    <div id="levelHistory" class="h-80"></div>
</div>

<div class="mx-auto w-80 py-2">
    <h1 class="text-center font-medium text-2xl pt-4">
        {{ _("History") }}
		<link rel="alternate" type="application/rss+xml" title="YunoHost apps catalog news" href="{{ url_for('news_rss')}}" />
		<a href="{{ url_for('news_rss')}}" class="btn btn-sm h-6 bg-orange-500 text-white !font-bold align-middle !px-2 !py-1"><i class="fa fa-rss-square" aria-hidden="true"></i> Suscribe via RSS</a>
    </h1>

    <div>
        {% for date, news in news_per_date.items()|reverse %}
            <h2 class="text-center font-medium text-xl py-4">{{ date }}</h2>

            <ul>
            {% for app, url in news["added"] %}
                <li>
                    <span class="text-sm text-center inline-block w-24 rounded border border-blue-600 text-blue-600 mr-1"><i class="fa fa-plus" aria-hidden="true"></i> {{ _("Added") }}</span>
                    <a href="{{url}}">{{app}}</a>
                </li>
            {% endfor %}
            {% for app, url in news["repaired"] %}
                <li>
                    <span class="text-sm text-center inline-block w-24 rounded border border-green-600 text-green-600 mr-1"><i class="fa fa-check" aria-hidden="true"></i> {{ _("Repaired") }}</span>
                    <a href="{{url}}">{{app}}</a>
                </li>
            {% endfor %}
            {% for app, url in news["broke"] %}
                <li>
                    <span class="text-sm text-center inline-block w-24 rounded border border-amber-600 text-amber-600 mr-1"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ _("Broke") }}</span>
                    <a href="{{url}}">{{app}}</a>
                </li>
            {% endfor %}
            {% for app, url in news["removed"] %}
                <li>
                    <span class="text-sm text-center inline-block w-24 rounded border border-red-600 text-red-600 mr-1"><i class="fa fa-times" aria-hidden="true"></i> {{ _("Removed") }}</span>
                    <a href="{{url}}">{{app}}</a>
                </li>
            {% endfor %}
            </ul>
            
        {% endfor %}

    </div>
</div>



<script src="{{ url_for('static', filename='canvasjs.min.js') }}"></script>
<script>
window.onload = function () {

  var theme = "light1";
  if (document.documentElement.classList.contains("dark") == true)
  {
      theme = "dark1";
  }

  var colors_per_level = [
    "#d9534f",
    "#E26D4F",
    "#E98D4E",
    "#f0ad4e",
    "#CBB052",
    "#A6B255",
    "#7AB659",
    "#5cb85c",
    "#4695d5",
    "#8960b3"
  ];

  new CanvasJS.Chart("levelRing", {
      backgroundColor: 'transparent',
      theme: theme,
      animationEnabled: false,
      data: [{
          type: "doughnut",
          startAngle: -90,
          //innerRadius: 60,
          indexLabelFontSize: 17,
          indexLabel: "{label} - {y}",
          toolTipContent: "<b>{label}:</b> {y}",
          dataPoints: [
              { y: {{ level_summary["unknown"] }},   label: "{{ _("Unknown") }}", color: "#cccccc" },
              { y: {{ level_summary[0] }}, label: "{{ _("Level 0") }}", color: colors_per_level[0] },
              { y: {{ level_summary[1] }}, label: "{{ _("Level 1") }}", color: colors_per_level[1] },
              { y: {{ level_summary[2] }}, label: "{{ _("Level 2") }}", color: colors_per_level[2] },
              { y: {{ level_summary[3] }}, label: "{{ _("Level 3") }}", color: colors_per_level[3] },
              { y: {{ level_summary[4] }}, label: "{{ _("Level 4") }}", color: colors_per_level[4] },
              { y: {{ level_summary[5] }}, label: "{{ _("Level 5") }}", color: colors_per_level[5] },
              { y: {{ level_summary[6] }}, label: "{{ _("Level 6") }}", color: colors_per_level[6] },
              { y: {{ level_summary[7] }}, label: "{{ _("Level 7") }}", color: colors_per_level[7] },
              { y: {{ level_summary[8] }}, label: "{{ _("Level 8") }}", color: colors_per_level[8] },
          ]
      }]
  }).render();


    new CanvasJS.Chart("levelHistory", {
        backgroundColor: 'transparent',
        theme: theme,
        animationEnabled: false,
        toolTip: {
            reversed: true,
            shared: true
        },
        data: [
            {% for level in range(8,-1,-1) %}
                {
                color: colors_per_level[{{ level }}],
                type: "stackedArea",
                showInLegend: true,
                toolTipContent: "<span style=\"color:"+colors_per_level[{{ level }}]+"\"><strong>{{ _("Level %(level)s:", level=level) }}</strong></span> {y}{% if loop.first %}<br><b>{{ _("Total:") }} #total</b> @ {label}{% endif %}",
                name: "{{ _("Level %(level)s", level=level) }}",
                dataPoints: [
                    {% for d in history %}
                        { label: "{{ d.date }}", y: {{ d["level-"+level|string] }} },
                    {% endfor %}
                ]
                },
            {% endfor %}
        ]
    }).render();

}

</script>



{% endblock %}