Using Vue | Smartchart开发手册

Introduction #

SmartChart has built-in Vue 2.x support, allowing Vue data binding, directives, and component capabilities in chart editors and templates. Compared to plain JS, Vue mode is better for scenarios with heavy dynamic interactions (filters, tables, conditional display).

Note: SmartChart’s Vue templates use {[ ]} instead of standard Vue {{ }} to avoid Django template syntax conflicts.

Use Cases #

Reports with many interaction scenarios, need data-page binding
Developers familiar with Vue

Common Bindings #

<!--Display variable message-->
<p>{[ message ]}</p>
<!--Loop generate li, variable sites-->
<ol>
    <li v-for="site in sites">
      {[ site.name ]}
    </li>
</ol>
<!--Bind input value variable use-->
<input type="checkbox" v-model="use">
<!--Display control-->
<p v-if="seen">Now you see me</p>
<p v-show="seen">Now you see me</p>
<!--Bind attributes-->
<a :href="url"></a>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :class="[errorClass ,isActive ? activeClass : '']"></div>
<!--Bind click method-->
<a @click="doSomething"></a>

Enabling Vue #

Enable Vue mode in Settings -> Advanced Settings

Simple Assignment #

System defaults to initializing Vue with 17 built-in data variables (d0, d1… d16) Assign values to Vue variables in chart editor:

vapp.d0 = xxxx

Screenshot

Assign d0 as a dictionary:

vapp.d0 = { 'index1': 100, 'index2': 300}

Note: We modified Vue’s default variable reference in templates, use: {[d0.index1]}

Using Templates for Easier Vue #

Use Vue in template development
Enable template feature in Advanced Settings first
Then access the template menu and enter editor

Override system defaults with custom code in template script:

<script>
    var vapp = new Vue({el: '#vue_app', delimiters: ['{[', ']}'], 
      data: {
              tableData:''
        },
      methods: {
          formatter(row, column) {
            return row.address;
        }
    }
    });
</script>

Vue Built-in Variables #

Variable	Type	Description
`vapp`	Vue instance	Global Vue application object, directly referenceable in chart JS
`vapp.d0` ~ `vapp.d16`	any	17 system-preset data variables, assignable to any type
`{[ var_name ]}`	Template syntax	Display variable values in HTML templates (non-standard `{{ }}`)

Common Usage #

// In chart editor: convert dataset to dict and assign to Vue variable
let dataset = __dataset__;
let tableData = ds_createMap_all(dataset);
vapp.d0 = { tableData: tableData };

// Assign as object
vapp.d0 = { 'index1': 100, 'index2': 300 };

// Reference in template
// {[ d0.index1 ]}   -> 100
// {[ d0.tableData ]} -> table data