main.js

import Vue from "vue";

import { forEachNode } from "./utils";

import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
import GoogleProvider from "./components/calendar/GoogleProvider"
import MonthCalendar from "./components/full-calendar/MonthCalendar";
import YearCalendar from "./components/full-calendar/YearCalendar";
import RegionMap from "./components/RegionMap";
import ViewProvider from "./components/ViewProvider";
import Navbar from "./components/navbar/Navbar";
import FooterCollapsible from "./components/footer/FooterCollapsible";
import FlipClock from "./components/FlipClock";

import Chart from 'chart.js/auto';


Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider);
Vue.component("ui-calendar-google-provider", GoogleProvider);
Vue.component("ui-month-calendar", MonthCalendar);
Vue.component("ui-year-calendar", YearCalendar);
Vue.component("ui-region-map", RegionMap);
Vue.component("ui-view-provider", ViewProvider);
Vue.component("ui-navbar", Navbar);
Vue.component("ui-footer-collapsible", FooterCollapsible);
Vue.component("ui-flip-clock", FlipClock);


import UiApp from "./components/UiApp.vue";


const appFactory = (el, attrs) => {
  // Bootstrap Vue.js.
  new Vue({
    el,
    components: {
      UiApp
    }
  });
};


/**
 * Bootstrap Vue.js application at given Element instance.
 *
 * App properties are passed via data attributes, like:
 *
 * <div class="__vue-root" data-message="Hello" data-app="SomeApp"></div>
 *
 * @param {Element} el DOM Element
 */
function renderVueAppElement(el) {
  const attrs = Object.assign({}, el.dataset);
  return appFactory(el, attrs);
}


function renderChart(element) {
  const data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];