vue-chartless
Version:
100% Simplest reactive charts for the Vue.js
527 lines (456 loc) • 16.8 kB
JavaScript
import Vue from 'vue';
import VueC3 from 'vue-c3';
import $ from 'jquery';
var Colors = {
colors: [
'#bad7df', '#9de5c4', '#ffe2e2', '#e8e8e8', '#99e1e5',
'#f3e8cb', '#fdd7a1d1', '#e5c9f5b5',
'#b7ecb19e', '#f5ffcb', '#ffe3b0', '#f5c8bd',
'#dcedc2', '#ffaaa6', '#ffb5b5', '#fdfdc4',
'#ffe8cf', '#ffdede', '#ccffec', '#c3bef0',
'#cadefc', '#d4d6c8', '#dde8b9', '#e0f9b5',
'#f9ecec', '#d6f8b8', '#f4dada', '#bfcfff',
'#bad7df', '#ffe2e2', '#e8e8e8', '#99ddcc',
'#99e1e5', '#f3e8cb', '#fdd7a1d1', '#e5c9f5b5',
'#b7ecb19e', '#f5ffcb', '#ffe3b0', '#f5c8bd',
'#dcedc2', '#ffaaa6', '#ffb5b5', '#fdfdc4',
'#ffe8cf', '#ffdede', '#ccffec', '#c3bef0',
'#cadefc', '#d4d6c8', '#dde8b9', '#e0f9b5',
'#f9ecec', '#d6f8b8', '#f4dada', '#bfcfff'
]
};
//
var script = {
name: 'Pie',
components: {
'vue-c3': VueC3,
},
props: {
data: {
type: Array,
required: true
}
},
data () {
return {
handler: new Vue(),
dataMap: {},
identifiers: [],
colors: Colors.colors,
rows: [[], []]
}
},
watch: {
data: {
handler: function(newData) {
this.clear();
this.fill(newData);
},
deep: true
}
},
mounted () {
this.fill(this.data);
},
methods: {
fill(data) {
for (let i in data) {
let label = data[i].label;
let value = data[i].value;
this.rows[0].push(label);
this.rows[1].push(value);
}
let options = this.generateCharOptions();
this.handler.$emit('init', options);
let _this = this;
setTimeout(function() {
_this.renderValues();
}, 100);
},
renderValues() {
$(this.$el).find('.c3-bar-val-text').remove();
let container = this.$el;
var tspans = container.querySelectorAll('.c3-chart-arc text');
var ts = Array.prototype.slice.call(tspans);
for(var i = 0; i<ts.length; i++){
var cont = ts[i].innerHTML;
if (cont != '') {
var clone = ts[i].cloneNode(1);
let itemValue = this.rows[1][i];
clone.textContent = itemValue;
clone.setAttribute('dy', '1.5em');
clone.classList.add("c3-bar-val-text");
clone.style['font-weight'] = 'bold';
ts[i].parentNode.insertBefore(clone, ts[i].nextSibling);
}
}
},
generateCharOptions() {
const options = {
data: {
rows: this.rows,
label: {
show: true
},
type : 'pie'
},
color: {
pattern: this.colors
},
pie: {
label: {
format: function(value, ratio, id) {
var label = '';
var text = id.split(':')[0];
if (text.length > 14) { label+= text.substring(0,14); }
else { label+= text; }
return label
}
},
},
legend: {
hide: true
},
tooltip: {
format: {
name: function (name) { return name.split(':')[0] },
value: function (value) { return value; }
}
}
};
return options
},
clear() {
this.identifiers = [];
this.rows = [];
this.rows.push([]);
this.rows.push([]);
},
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('vue-c3',{attrs:{"handler":_vm.handler}})],1)};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var Pie = normalizeComponent_1(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
undefined,
undefined
);
//
var script$1 = {
name: 'C3BarStatic',
components: {
VueC3
},
props: {
data: {
type: Array,
required: true
}
},
data() {
return {
isLoading: false,
handler: new Vue(),
dataMap: {},
colors: Colors.colors,
rows: [ [], [] ],
categories: [],
barColumns: ['barId'],
}
},
computed: {
padding: function() {
if (this.categories.length > 12) { return 40 }
else if (this.categories.length > 8) { return 25 }
else if (this.categories.length > 4) { return 10 }
return 0
}
},
watch: {
data: {
handler: function(newData) {
this.clear();
this.fillStatic(newData);
},
deep: true
}
},
mounted() {
this.clear();
this.fillStatic(this.data);
},
methods: {
fillStatic(data) {
for (let i in data) {
let label = data[i].label;
let value = data[i].value;
this.categories.push(label);
this.barColumns.push(value);
this.rows[0].push(label);
this.rows[1].push(value);
}
let options = this.generateCharOptions();
this.handler.$emit('init', options);
},
generateCharOptions() {
const options = {
data: {
columns: [
this.barColumns
],
type: 'bar',
colors: {
barId: '#9de5c4' //"#4fc08d"
}
},
color: {
pattern: this.colors
},
axis: {
x: {
label: {
text: '',
position: 'outer-center',
},
type: 'category',
categories: this.categories,
tick: {
centered: true
}
},
y: {
max: Math.max(this.barColumns),
min: 0,
padding: {
top: 0,
bottom: 0
},
}
},
legend: {
show: false
},
padding: {
bottom: this.padding
}
};
return options
},
clear() {
this.rows = [];
this.rows.push([]);
this.rows.push([]);
this.categories = [];
this.barColumns = ['barId'];
}
}
};
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) {
return addStyle(id, style);
};
}
var HEAD = document.head || document.getElementsByTagName('head')[0];
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = {
ids: new Set(),
styles: []
});
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media) style.element.setAttribute('media', css.media);
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
} else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index]) style.element.removeChild(nodes[index]);
if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
}
}
}
var browser = createInjector;
/* script */
const __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"c3-bar-container"},[_c('vue-c3',{attrs:{"handler":_vm.handler}})],1)};
var __vue_staticRenderFns__$1 = [];
/* style */
const __vue_inject_styles__$1 = function (inject) {
if (!inject) return
inject("data-v-d49fe4ae_0", { source: ".c3-bar._expanded_{fill-opacity:.8}.c3-bar-container path{fill:none;stroke-width:1;stroke:#969696}.c3-event-rect{cursor:default!important}.c3-tooltip-name--barId td:first-child{display:none}.c3-tooltip-container .c3-tooltip tbody tr:first-child th{font-weight:400}.c3-tooltip-container .c3-tooltip tbody tr:first-child{display:flex!important}.c3-tooltip-name--barId .value{text-align:left!important}", map: undefined, media: undefined });
};
/* scoped */
const __vue_scope_id__$1 = undefined;
/* module identifier */
const __vue_module_identifier__$1 = undefined;
/* functional template */
const __vue_is_functional_template__$1 = false;
/* style inject SSR */
var Bar = normalizeComponent_1(
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
__vue_inject_styles__$1,
__vue_script__$1,
__vue_scope_id__$1,
__vue_is_functional_template__$1,
__vue_module_identifier__$1,
browser,
undefined
);
//
var script$2 = {
name: 'Chartless',
components: {
Pie,
Bar
},
props: {
def: {
type: Object,
required: true
},
data: {
type: Array,
required: true
}
},
data() {
return {
// def: { type:'pie' },
// data: [
// { label: 'London', value:'330' },
// { label: 'Barcelona', value:'430' },
// { label: 'Paris', value:'150' },
// { label: 'Belgrade', value:'220' },
// ]
}
},
};
/* script */
const __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.def.type == 'pie')?_c('Pie',{attrs:{"data":_vm.data}}):(_vm.def.type == 'bar')?_c('Bar',{attrs:{"data":_vm.data}}):_c('div')],1)};
var __vue_staticRenderFns__$2 = [];
/* style */
const __vue_inject_styles__$2 = function (inject) {
if (!inject) return
inject("data-v-bdef674a_0", { source: ".c3-chart-arc path{stroke:#fff;z-index:1000000000000}.c3-chart-arc rect{stroke:#fff;stroke-width:1}.c3-chart-arc text{fill:#000}.c3-chart-arc.c3-target.c3-focused g path{opacity:1;cursor:default!important}.c3-target.c3-defocused{opacity:.4!important}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:1}.c3-tooltip th{background-color:#fff;font-size:13px;padding:2px 5px;text-align:left;color:#000}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:5px}.c3-tooltip .value{text-align:right}.c3-tooltip-container .c3-tooltip tbody{display:flex!important}", map: undefined, media: undefined });
};
/* scoped */
const __vue_scope_id__$2 = undefined;
/* module identifier */
const __vue_module_identifier__$2 = undefined;
/* functional template */
const __vue_is_functional_template__$2 = false;
/* style inject SSR */
var Chartless = normalizeComponent_1(
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
__vue_inject_styles__$2,
__vue_script__$2,
__vue_scope_id__$2,
__vue_is_functional_template__$2,
__vue_module_identifier__$2,
browser,
undefined
);
export default Chartless;