Merge pull request 'merge dev to master' (#27) from dev into master
Reviewed-on: WillaEngine-Project/WillaEngine#27BE.fix-database
commit
a30afd948d
@ -0,0 +1,19 @@
|
|||||||
|
import Pie from "./apexhart/type/pie";
|
||||||
|
import Bar from "./apexhart/type/bar";
|
||||||
|
import Linear from "./apexhart/type/linear";
|
||||||
|
|
||||||
|
export default class {
|
||||||
|
|
||||||
|
constructor(typeChart, options) {
|
||||||
|
switch (typeChart) {
|
||||||
|
case 'pie':
|
||||||
|
return new Pie(options);
|
||||||
|
case 'bar':
|
||||||
|
return new Bar(options);
|
||||||
|
case 'linear':
|
||||||
|
return new Linear(options);
|
||||||
|
default:
|
||||||
|
throw new Error("The Type Chart is Not Support!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,23 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export default class {
|
||||||
|
|
||||||
|
constructor({url, params}) {
|
||||||
|
this.url = url;
|
||||||
|
this.params = params;
|
||||||
|
this.isLoadRequest = false;
|
||||||
|
this.responseChart = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async request() {
|
||||||
|
if (!this.isLoadRequest) {
|
||||||
|
let response = await axios.get(this.url, {params: this.params});
|
||||||
|
if (response && response.status === 200) {
|
||||||
|
this.responseChart = response.data;
|
||||||
|
this.isLoadRequest = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.responseChart;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,68 @@
|
|||||||
|
import chart from "../chart";
|
||||||
|
|
||||||
|
export default class extends chart {
|
||||||
|
|
||||||
|
constructor(options) {
|
||||||
|
super(options);
|
||||||
|
this.type = options.type ? options.type : 'daily';
|
||||||
|
|
||||||
|
this.options = {
|
||||||
|
fill: {
|
||||||
|
colors: ["#e6e6e6"]
|
||||||
|
},
|
||||||
|
chart: {
|
||||||
|
id: "lineChart",
|
||||||
|
fontFamily: '"iranyekan-regular-en-num", "Montserrat-Regular"'
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: []
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
style: {
|
||||||
|
colors: ["#000", "#000", "#000"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "bar chart",
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async getOptions() {
|
||||||
|
await this.request();
|
||||||
|
this.setOptions();
|
||||||
|
return this.options;
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions() {
|
||||||
|
switch (this.type) {
|
||||||
|
case 'weekly':
|
||||||
|
return this.setWeekly();
|
||||||
|
case 'monthly':
|
||||||
|
return this.setMonthly();
|
||||||
|
case 'daily':
|
||||||
|
return this.setDaily();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setWeekly() {
|
||||||
|
this.options.series[0].data = this.responseChart.map(x => x.count);
|
||||||
|
this.options.xaxis.categories = this.responseChart.map(x => x.week);
|
||||||
|
}
|
||||||
|
|
||||||
|
setMonthly() {
|
||||||
|
this.options.series[0].data = this.responseChart.map(x => x.count);
|
||||||
|
this.options.xaxis.categories = this.responseChart.map(x => x.month + ' ' + x.year.substring(2) );
|
||||||
|
}
|
||||||
|
|
||||||
|
setDaily() {
|
||||||
|
this.options.series[0].data = this.responseChart.map(x => x.count);
|
||||||
|
this.options.xaxis.categories = this.responseChart.map(x => x.date);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,20 @@
|
|||||||
|
import chart from "../chart";
|
||||||
|
|
||||||
|
export default class extends chart {
|
||||||
|
|
||||||
|
constructor(options) {
|
||||||
|
super(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async getOptions() {
|
||||||
|
await this.request(this.setOptions);
|
||||||
|
return this.options;
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions(self) {
|
||||||
|
self.options.series[0].data = self.responseChart.map(x => x.user_count);
|
||||||
|
self.options.xaxis.categories = self.responseChart.map(x => x.week);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,45 @@
|
|||||||
|
import chart from "../chart";
|
||||||
|
|
||||||
|
export default class extends chart {
|
||||||
|
|
||||||
|
constructor(options) {
|
||||||
|
super(options);
|
||||||
|
this.options = {
|
||||||
|
chart: {
|
||||||
|
type: "donut",
|
||||||
|
id: "pieChart",
|
||||||
|
fontFamily: '"iranyekan-regular-en-num", "Montserrat-Regular"'
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
label: [],
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
formatter: function (val, opt) {
|
||||||
|
return Math.round(val * 10) / 10 + '% ' + opt.w.globals.labels[opt.seriesIndex]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [],
|
||||||
|
labels: [],
|
||||||
|
legend: {
|
||||||
|
fontSize: "16px"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async getOptions() {
|
||||||
|
await this.request();
|
||||||
|
this.setOptions();
|
||||||
|
return this.options;
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions() {
|
||||||
|
this.options.series = this.responseChart.map(x => x.count);
|
||||||
|
this.options.labels = this.responseChart.map(x => x.category);
|
||||||
|
this.options.fill.labels = this.responseChart.map(x => x.category);
|
||||||
|
// this.options.labels = this.responseChart.map(x => x.category.name);
|
||||||
|
// this.options.fill.label = this.responseChart.map(x => x.category.name);
|
||||||
|
// this.options['colors'] = this.responseChart.map( x => x.category.color ? x.category.color : "#fff");
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue