https://github.com/fiedsch/vuetaocharts-ce

A Contao Content Element for SVG-Charts with Vue.js
https://github.com/fiedsch/vuetaocharts-ce

Last synced: about 8 hours ago
JSON representation

A Contao Content Element for SVG-Charts with Vue.js

• Host: GitHub
• URL: https://github.com/fiedsch/vuetaocharts-ce
• Owner: fiedsch
• Created: 2017-04-01T03:11:04.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-08T15:04:14.000Z (over 7 years ago)
• Last Synced: 2024-12-20T09:29:30.963Z (3 days ago)
• Language: PHP
• Size: 38.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vuetao Charts -- Charts with Vue.js for Contao

## Overview 

The extension consists of two parts

* Code for dynamic SVG-charts with Vue.js (see https://github.com/fiedsch/vuetaocharts for the Vue.js components.

  Also make sure to visit https://vuejs.org and read the guide).

* A Contao content element that let's you embed the chart and provide the chart's data.

## 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:

```json

{

    "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:

```json

{

    "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.

```html

 

    


        


            
 

            

        

    


    

        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;

                }

            }

        });

  

```

## 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. https://github.com/contao/core/issues/7883 

To solve the issue, use

```html

 
[{] foo [}]

```

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

```html



```

to avoid the usage of double braces in Contao templates.