Как использовать диаграмму с Wagtail CMS

Question

Мне нужно включить пользовательские диаграммы в функцию потокового поля, как вы можете найти с Tauchart.

Но как пользователь может изменить данные от администратора трясогузки? Я понятия не имею, как я могу это сделать.

Я размышляю о форме, но можно ли добавить форму в поле потока? Я думаю, что да, я могу сделать это с помощью ссылки на существующую форму. Но это кажется трудным сделать и не очень хорошая идея.

О чем вы думаете? Какова лучшая практика для вас?

У вас есть примеры интеграции Taucharts в CMS?

Answer 1

Вы можете создать собственный блок внутри blocks.py, например LineChartBlock(), который ссылается на шаблон с именем line_chart.html. Вам нужно будет импортировать свой пользовательский блок в файл models.py, чтобы добавить его в свой StreamField. Затем пользователь на стороне администратора CMS может вводить значения и сохранять их в качестве параметров. Который вы можете затем передать в шаблон как динамические переменные JavaScript, которые вы можете использовать для создания своей пользовательской диаграммы. Вот супер грубая идея...

Так что blocks.py будет выглядеть так:

from wagtail.core import blocks

class LineChartBlock(blocks.StructBlock):
    title = blocks.CharBlock()
    x = blocks.DecimalBlock()
    y = blocks.DecimalBlock()
    data = JSONField()

    class Meta:
        template = 'blocks/line_chart.html'

Ваши models.py:

class BlogPage(Page):
    body = StreamField([
        ('paragraph', RichTextBlock()),
        ('line_chart', LineChartBlock()),
    ])

Ваш шаблон:

<script>
    const title = "{{ title }}";
    const x = "{{ x }}";
    const y = "{{ y }}";
    const data = "{{ data }}";

    makeChartWizardry = () => {
       doStuff;
    }

</script>

<section>
    <div id="chart"></div>
</section>