"use strict";
// this is necessary to make vue.common.js functional in non-Node environments (e.g. SystemJS)
//let proc = window['process'] = window['process'] || {};
//proc.env = proc.env || {};
//proc.env.NODE_ENV = proc.env.NODE_ENV || 'debug';
Object.defineProperty(exports, "__esModule", { value: true });
// Vue2
// This import will work with vue.esm.js module (in ESM format = (ES5 code + ES6 import/export statements)), 
// destined for usage with WebPack. vue.esm.js exports its stuff using a "default export".
var vue_1 = require("vue");
// This import will work with vue.js (UMD) and vue.common.js (CommonJS) module, 
// that can be used with SystemJS. These modules can also be used with WebPack as well.
// These modules don't use "default export" to export their stuff.
var VueModule = require("vue");
// To make the same code functional with any Vue module kinds, we assign (VueModuleDefault || VueModule)
// to the Vue variable (one of them will contain a module reference while the other will be undefined),
// and use the Vue variable in code as the reference to the module.
exports.Vue = vue_1.default || VueModule;
//import { Vue}  from 'vue';
// In case where you need to work with vue.esm.js module only, you can import it by just this statement:
//import Vue from 'vue';
// In case where you need to work with vue.js or vue.common.js module only, you can import it by just this statement:
//import * as Vue from 'vue';
// Wijmo
// We don't need to import any symbols from Wijmo for Vue2 interop modules, we just need to load them,
// which will allow modules to globally register Vue2 components they contain.
require("wijmo/wijmo.vue2.input");
require("wijmo/wijmo.vue2.chart.radar");
//Application
var DataSvc_1 = require("../services/DataSvc");
exports.WjRadarChartCmponents = exports.Vue.component('wj-radar-charts', {
    template: "\n       <div>\n            <h3>\n                FlexRadar Control\n                </h3>\n            <p>\n                This section shows FlexRadar Control.\n            </p>\n\n            <p />\n            <div>\n                <div >\n                    <wj-flex-radar\n                        :items-source=\"items\"\n                        binding-x=\"country\"\n                        :chart-type=\"chartType\"\n                        :total-angle=\"totalAngle\"\n                        :start-angle=\"startAngle\"\n                        :stacking=\"stacking\" >\n                        <wj-flex-radar-series name=\"Sales\" binding=\"sales\" />\n                        <wj-flex-radar-series name=\"Downloads\" binding=\"downloads\" />\n                    </wj-flex-radar>\n                </div>\n                <table class=\"table table-condensed\">\n                    <tbody>\n                        <tr>\n                            <td><label htmlFor=\"n\">Chart Types</label></td>\n                            <td>\n                               <wj-combo-box \n                                     :items-source=\"chartTypes\"\n                                     :text=\"chartType\"\n                                     :text-changed=\"chartTypeChanged\"/>\n                            </td>\n                        </tr>\n                        <tr>\n                            <td><label htmlFor=\"n\">Stacking</label></td>\n                            <td>\n                                <wj-combo-box \n                                    :items-source=\"stackingTypes\"\n                                    :text=\"stacking\"\n                                    :text-changed=\"stackingChanged\" />\n                            </td>\n                        </tr>\n                        <tr>\n                            <td><label htmlFor=\"n\">Start Angle</label></td>\n                            <td>\n                                <wj-input-number\n                                    :value=\"startAngle\"\n                                    :value-changed=\"startAngleValueChanged\"\n                                    :min=\"0\"\n                                    :max=\"360\"\n                                    :step=\"60\" />\n                                <p />\n                            </td>\n                        </tr>\n                        <tr>\n                            <td><label htmlFor=\"n\">Total Angle</label></td>\n                            <td>\n                                    <wj-input-number\n                                        :value=\"totalAngle\"\n                                        :valueChanged=\"totalAngleValueChanged\"\n                                        :min=\"90\"\n                                        :max=\"360\"\n                                        :step=\"90\" />\n                            </td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n\n        </div>\n    ",
    data: function () {
        return {
            items: DataSvc_1.DataService.default.getRadarData(),
            chartTypes: 'Line,LineSymbols,Area,Scatter,Column'.split(','),
            stackingTypes: 'None,Stacked,Stacked100pc'.split(','),
            chartType: 'Line',
            totalAngle: 360,
            startAngle: 0,
            stacking: 'None'
        };
    },
    methods: {
        // Wijmo event handlers
        chartTypeChanged: function (s, e) {
            this.chartType = s.text;
        },
        stackingChanged: function (s, e) {
            this.stacking = s.text;
        },
        startAngleValueChanged: function (s, e) {
            this.startAngle = s.value;
        },
        totalAngleValueChanged: function (s, e) {
            if (s.value <= 360 && s.value >= 90) {
                this.totalAngle = s.value;
            }
        }
    },
});
//# sourceMappingURL=WjRadarCharts.js.map