update to support multiple datasets

42mate · Jan 17, 2019 · 08658a8 · 08658a8
1 parent e54989d
commit 08658a8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "v-frappe",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "A Vue 2 integration using Frappe Charts",
   "main": "src/v-frappe.js",
   "repository": "https://github.com/42mate/v-frappe",

diff --git a/src/v-frappe.js b/src/v-frappe.js
@@ -40,41 +40,69 @@ const ChartFrappe = {
                         let datasets = this.chartData.metric ? parseInt(d[this.chartData.metric]) : parseInt(d);
                         return datasets;
                     });
-                },
+                }
             },
             methods: {
+                getDatasetMixed(field) {
+                    return this.chartData.data.map((d) => {
+                        let datasets = field ? parseInt(d[field]) : parseInt(d);
+                        return datasets;
+                    });
+                },
                 /**
                  * Generate a new Chart of type chartType
                  * @memberOf Chart
                  */
                 graph() {
+                    this.data.datasets = [];
                     this.data.labels = this.getLabel;
-                    this.data.datasets[0].values = this.getDataset;
-                    this.data.datasets[0].chartType = this.chartData.chartType;
 
+                    var chartType = this.chartData.chartType;
                     let options = {
                         regionFill: 0,
                         hideLine: 0
                     };
                     if (this.chartData.chartType === "vbar") {
-                        this.data.datasets[0].chartType = "bar";
-                    } else
-                    if (this.chartData.chartType === "area") {
-                        this.data.datasets[0].chartType = "line";
+                        chartType = "bar";
+                    }
+                    else if (this.chartData.chartType === "area") {
+                        chartType = "line";
                         options.regionFill = 1;
                     }
                     else if (this.chartData.chartType === "scatter") {
-                        this.data.datasets[0].chartType = "line";
+                        chartType = "line";
                         options.hideLine = 1;
                     }
+                    else if (this.chartData.chartType === "mixed") {
+                        chartType = "axis-mixed";
+                    }
+
+                    if (this.chartData.chartType === 'mixed') {
+                        for (let i = 0; i < this.chartData.metricMixed.length; i++) {
+                            let metric = this.chartData.metricMixed[i];
+                            let dataset = {
+                                name: metric.field,
+                                values: this.getDatasetMixed(metric.field),
+                                chartType: metric.type
+                            }
+                            this.data.datasets.push(dataset);
+                        }
+                    }
+                    else {
+                        let dataset = {
+                            values: this.getDataset,
+                            chartType: chartType,
+                        }
+                        this.data.datasets.push(dataset);
+                    }
 
                     var chart = new Chart("#" + this.chartData.selector, { // or DOM element
                         data: {
                             labels: this.data.labels,
                             datasets: this.data.datasets,
                         },
                         title: this.chartData.title,
-                        type: this.data.datasets[0].chartType, // or 'bar', 'line', 'pie', 'percentage'
+                        type: chartType, // or 'bar', 'line', 'pie', 'percentage'
                         height: this.chartData.height,
                         colors: ['orange'],
                         lineOptions: options