add charts

uniweb/models.py

+import json
+
 from captcha.fields import CaptchaField
 from django import forms
 from django.core.paginator import Paginator
@@ -235,6 +237,79 @@ class CalendarAgendaBlock(blocks.StructBlock):
         return context
 
 
+class ChartDataset(blocks.StructBlock):
+    label = blocks.CharBlock(
+        label="Označení zdroje dat",
+        max_length=120,
+    )
+
+    data = blocks.ListBlock(
+        blocks.IntegerBlock(),
+        label="Data",
+        default=[0],
+    )
+
+    class Meta:
+        label = "Zdroj dat"
+
+
+class ChartBlock(blocks.StructBlock):
+    title = blocks.CharBlock(
+        label="Název",
+        max_length=120,
+    )
+    chart_type = blocks.ChoiceBlock(
+        label="Typ",
+        choices=[
+            ("bar", "Graf se sloupci"),
+            ("horizontalBar", "Graf s vodorovnými sloupci"),
+            ("pie", "Koláčový graf"),
+            ("doughnut", "Donutový graf"),
+            ("polarArea", "Graf polární oblasti"),
+            ("radar", "Radarový graf"),
+            ("line", "Graf s liniemi"),
+        ],
+        default="bar",
+    )
+    labels = blocks.ListBlock(
+        blocks.CharBlock(
+            max_length=40,
+            label="Popis",
+        ),
+        label="Popisy grafu",
+    )
+    datasets = blocks.ListBlock(
+        ChartDataset(),
+        label="Zdroje dat",
+    )
+
+    def get_context(self, value, parent_context=None):
+        context = super().get_context(value, parent_context=parent_context)
+
+        datasets = []
+
+        for dataset in value["datasets"]:
+            dataset = dict(dataset)
+
+            datasets.append({
+                "label": dataset["label"],
+                "data": [
+                    item for item in dataset["data"]
+                ]
+            })
+
+        value["datasets"] = json.dumps(datasets)
+        value["labels"] = json.dumps([label for label in value["labels"]])
+
+        return context
+
+    class Meta:
+        template = "uniweb/blocks/chart.html"
+        label = "graf"
+        icon = "form"
+        group = "ostatní"
+
+
 CONTENT_STREAM_BLOCKS = [
     (
         "title",
@@ -280,6 +355,7 @@ CONTENT_STREAM_BLOCKS = [
     ),
     ("articles", ArticlesBlock()),
     ("calendar_agenda", CalendarAgendaBlock()),
+    ("chart", ChartBlock())
 ]
 
 

uniweb/templates/uniweb/blocks/chart.html

+{% load wagtailimages_tags %}
+{% load wagtailcore_tags %}
+{% load static %}
+
+<script src="{% static "uniweb/vendor/chart.umd.4.2.0.js" %}"></script>
+
+<div>
+    <canvas
+        class="h-96"
+        id="{{ block_id }}"
+    ></canvas>
+</div>
+
+<script>
+    window.addEventListener(
+        "load",
+        () => {
+            const getRandomInt = (max) => {
+                return Math.floor(Math.random() * Math.floor(max));
+            }
+
+            const chartType = "{{ value.chart_type }}";
+            let colorOrder = getRandomInt(6);
+            const colors = [
+                "rgba(255, 99, 132, 0.6)",
+                "rgba(54, 162, 235, 0.6)",
+                "rgba(255, 206, 86, 0.6)",
+                "rgba(75, 192, 192, 0.6)",
+                "rgba(153, 102, 255, 0.6)",
+                "rgba(255, 159, 64, 0.6)",
+                "rgba(75, 192, 192, 0.6)",
+                "rgba(153, 102, 255, 0.6)",
+            ];
+
+            const getColor = () => {
+                if (colorOrder === colors.length) {
+                    colorOrder = 0;
+                }
+
+                return colors[colorOrder++];
+            }
+
+            const getDatasets = () => {
+                const datasets = {{ value.datasets|safe }};
+                let finalDatasets = [];
+
+                for (let i = 0; i < datasets.length; i++) {
+                    let tempDataset = {};
+
+                    tempDataset["label"] = datasets[i]["label"];
+                    tempDataset["data"] = datasets[i]["data"];
+
+                    if (chartType == "pie" || chartType == "doughnut" || datasets.length == 1) {
+                        let backgroundColor = [];
+
+                        for (let j = 0; j < tempDataset["data"].length; j++)
+                            backgroundColor.push(getColor());
+
+                        tempDataset["backgroundColor"] = backgroundColor;
+                    } else {
+                        tempDataset["backgroundColor"] = getColor();
+                    }
+
+                    tempDataset["borderColor"] = getColor();
+                    tempDataset["borderWidth"] = 1;
+
+                    finalDatasets.push(tempDataset);
+                }
+
+                return finalDatasets;
+            };
+
+            const ctx = document.getElementById("{{ block_id }}").getContext("2d");
+
+            const blockChart = new Chart(
+                ctx,
+                {
+                    type: "{% if value.chart_type != "horizontalBar" %}{{ value.chart_type }}{% else %}bar{% endif %}",
+                    data: {
+                        labels: {{ value.labels|safe }},
+                        datasets: getDatasets(),
+                    },
+                    options: {
+                        {% if value.chart_type == "horizontalBar" %}
+                            indexAxis: "y",
+                        {% endif %}
+                        plugins: {
+                            title: {
+                                display: true,
+                                text: "{{ value.title|escapejs }}",
+                            },
+                        },
+                        scales: {
+                            y: {
+                                ticks: {
+                                    beginAtZero: true,
+                                },
+                            },
+                        },
+                    }
+                }
+            );
+        }
+    );
+</script>

uniweb/templates/uniweb/snippet_sections.html

@@ -2,6 +2,6 @@
 
 {% for block in page.content %}
 
-  {% include_block block with first=forloop.first %}
+  {% include_block block with first=forloop.first block_id=block.id %}
 
 {% endfor %}

uniweb/templates/uniweb/uniweb_article_page.html

@@ -41,7 +41,7 @@
   <div class="lg:flex mt-8 lg:space-x-16">
     <div itemprop="description" class="w-full space-y-8">
       {% for block in page.content %}
-          {% include_block block %}
+          {% include_block block with block_id=block.id %}
       {% endfor %}
     </div>
   </div>

uniweb/templates/uniweb/uniweb_form_page.html

@@ -5,7 +5,7 @@
 <main>
 
   {% for block in page.content_before %}
-    {% include_block block with first=forloop.first %}
+    {% include_block block with first=forloop.first block_id=block.id %}
   {% endfor %}
 
   <div class="content-block px-4 py-2 clearfix">
@@ -89,7 +89,7 @@
   </div>
 
   {% for block in page.content_after %}
-    {% include_block block %}
+    {% include_block block with block_id=block.id %}
   {% endfor %}
 
 </main>

uniweb/templates/uniweb/uniweb_form_page_landing.html

@@ -5,7 +5,7 @@
 <main>
 
   {% for block in page.content_landing %}
-    {% include_block block with first=forloop.first %}
+    {% include_block block with first=forloop.first block_id=block.id %}
   {% endfor %}
 
 </main>