Doesn't support multiple themes

[1ambda]

Version

v1.1.2

Test Environment

OSX, Chrome 75.0

Current Behavior

https://github.com/nhn/toast-ui.vue-chart/blob/master/src/base.js#L88-L91

    registerMapToOptions() {
      if (this.theme) {
        TuiChart.registerTheme('chartTheme', this.theme);
        this.computedOptions = Object.assign({}, this.computedOptions, {
          theme: 'chartTheme'
        });
      }
    },

Currently, seems that tui-vue-chart registers only 1 theme named chartTheme. In case of multiple charts which have their own theme, need to use raw-level TuiChart API. For instance,

<!-- register line chart without `:theme` option -->
<line-chart
            :data="..."
            :options=".."
            ref="chart-something"/>

<script lang="ts">
import TuiChart from 'tui-chart'

// need to register a dedicated chart theme
TuiChart.registerTheme(chart-something, ...)

export default class SomeComponent extends Vue {
    chart = {
      theme: 'chart-something',
</script>

Expected Behavior

Would be nice to register chart name and chart theme using the specified name such as

          <line-chart
            :data="..."
            :chartName='' <!-- chart and theme name -->
            :options=".."
            :theme=".." />

Please let me know If i missed something.

Thanks for maintaining the awesome chart library.

[1ambda]

More precisely, this doesn't matter when we don't change the :data property dynamically. But If we modify data after initial rendering, the chart theme can be ignored by the active chartTheme.

조금 더 부연설명을 덧 붙이면, 일반적인 케이스에서는 chartTheme 로 여러번 테마를 등록하는 것이 문제가 되지 않지만, :data 를 동적으로 변경할 경우엔 현재 차트의 테마가, 활성화된 chartTheme (마지막으로 등록된 차트의 테마) 로 덮어 씌워집니다.

[spevilgenius]

I have multiple charts with multiple themes working. I first changed base.js to:

registerMapToOptions() { if (this.map) { TuiChart.registerMap(this.map.name, this.map.value); this.computedOptions = Object.assign({}, this.computedOptions, { map: this.map.name || this.map }); } }, registerThemeToOptions() { if (this.theme) { TuiChart.registerTheme(this.theme.name, this.theme.data); this.computedOptions = Object.assign({}, this.computedOptions, { theme: this.theme.name || this.theme }); } },

Then in my vue files I changed code to:

chartTheme: { name: 'potbmTheme', data: { series: { column: { colors: ['#0000ff', '#42cdff', '#44ff44'] }, line: { colors: ['#ffdd00', '#ff0000'] } } } },

This is working for several charts in a tabbed view. Now I am trying to solve hover problems in Microsoft Edge with multiple charts because the dots get erased on hover after the first chart!