import './components/chart_custom.js';
import Vue from 'vue/dist/vue'

const chart = {
    init() {
        window.vueBuilderApp = new Vue({
            el: '#chart-app',

            methods: {
                getCharts: function () {
                    return this.$el.querySelectorAll(`.chart-builder`);
                }
            },
            template: `
              <div>
                  <div v-for="chart in getCharts()">
                    <h2>{{ chart.getAttribute('data-chart-title') }}</h2>
                    <ChartAA
                           :entity="chart.getAttribute('data-chart-entity')" 
                           :height="parseInt(chart.getAttribute('data-chart-height')) ?? 100"
                           :label="chart.getAttribute('data-chart-label')"
                           :color="chart.getAttribute('data-chart-color')"
                           :from="chart.getAttribute('data-chart-from')"
                           :to="chart.getAttribute('data-chart-to')"
                    >
                    </ChartAA>
                  </div>
              </div>
            `
        });
    }
}
export default chart;
