fiedsch/vuetaocharts-ce

Charts withe Vue.js as Contao content elements

Installs: 3

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 0

Open Issues: 0

Type:contao-module

v0.1.4 2017-08-02 13:03 UTC

This package is auto-updated.

Last update: 2024-02-18 14:47:47 UTC


README

Overview

The extension consists of two parts

Usage

The extension provides a new Contao content element.

  • insert into article as usual
  • edit the "data" field and provide the chart's data as JSON. Example:
{
    "chart_data": [
        {
            "label": "Foo",
            "value": 61.1
        },
        {
            "label": "Bar",
            "value": 18.6
        },
        {
            "label": "Baz",
            "value": 20.3
        }
    ]
}

You may provide arbitrary additional data in the JSON data field which you can use to extend the chart.

An example für the donut chart:

{
    "headline": "The Headline for the Chart",
    "chart_data": [ /* as above */ ]
}

Next you create a new Contao template as usual (e.g. by cloning ce_vtcdonut). Make sure, your template's name also starts with ce_vtc, which enables you to select it in your content element.

<!-- unchanged parts like surrounding <div> and headline skipped here --> 
    <div id="app<?= $this->appid ?>">
        <div class="chart">
            <h2 v-text="headline"></h2> <!-- ADDED -->
            <vtc-donut
                :data="chartdata"
                :width="chartwidth"
                :height="chartheight"
                :chartrotation="chartrotation"
                @showinfo="showinfo"
            ></vtc-donut>
        </div>
    </div>

    <script>
        var data_from_contao = <?= $this->data; ?>;
        new Vue({
            el: '#app<?= $this->appid ?>',
            data: function () {
                return {
                    selected: 0,
                    chartdata: data_from_contao.chart_data,
                    chartwidth: <?= $this->svgwidth ?>,
                    chartheight: <?= $this->svgheight ?>,
                    chartrotation: 0, // no rotation. first segment starts at 12 o'clock
                    headline: data_from_contao.headline ? data_from_contao.headline : "" // ADDED
                }
            },
            methods: {
                showinfo: function (position) {
                    this.selected = position;
                }
            }
        });
  </script>

</div>

Tips

Moustache-Syntax vs. Contao Insert Tags

Vue's Mustache syntax (and https://vuejs.org/v2/guide/syntax.html#Text) and Contao's insert tags collide. See e.g. contao/core#7883

To solve the issue, use

 <div>[{] foo [}]</div>

where [{] and [}] will be replaced be {{ and }} respecitively by Contao, or

<div v-text="foo"></div>

to avoid the usage of double braces in Contao templates.