feat: added all simple chartjs tyoes

src/Constants/chartTypes.js

@@ -1,3 +1,3 @@
 export default [
-  'line', 'bar', 'radar', 'doughnut', 'pie', 'bubble', 'scatter', 'area', 'mixed'
+  'line', 'bar', 'radar', 'doughnut', 'pie', 'polar', /*'bubble', 'scatter', 'area', 'mixed' */
 ]

src/Constants/chartjsTypes.js

@@ -0,0 +1,3 @@
+export default [
+  'line', 'bar', 'radar', 'doughnut', 'pie', 'polar', /*'bubble', 'scatter', 'area', 'mixed' */
+]

src/Models/Chart/ChartjsDataset.js

@@ -2,31 +2,90 @@ import Chart from './Chart.js'
 import { GroupByNodule } from 'lovelacejs'
 
 class ChartJsDataset extends Chart {
-  get doughnut () {
-    const groupByNodule = new GroupByNodule({
+  constructor (props) {
+    super(props)
+
+    this.groupByNodule = new GroupByNodule({
       id: this.id,
       label: `${this.label} groupedBy ${this.groupByValue}`,
       tables: [this.table],
       groupByValue: this.groupByValue
     }).export()
-
-    const labels = Object.keys(groupByNodule)
-
-    let groupByCounts = []
-    for (let key in groupByNodule) {
-      groupByCounts.push(groupByNodule[key].length)
-    }
     
+    this.chartLabels = Object.keys(this.groupByNodule)
+
+    this.groupByCounts = []
+    for (let key in this.groupByNodule) {
+      this.groupByCounts.push(this.groupByNodule[key].length)
+    }
+  } 
+
+  get bar () {
     return {
-      labels: labels,
+      labels: this.chartLabels,
+      datasets: [{
+        label: this.label,
+        backgroundColor: `rgb(${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()})`,
+        data: this.groupByCounts
+      }]
+    }
+  }
+
+  get doughnut () {
+    return {
+      labels: this.chartLabels,
       datasets: [{
         label: `${this.label} groupedBy ${this.groupByValue}`,
-        data: groupByCounts,
+        data: this.groupByCounts,
         backgroundColor: this._getbackgroundColors()
       }],
     }
   }
 
+  get line () {
+    return {
+      labels: this.chartLabels,
+      datasets: [{
+        label: this.label,
+        backgroundColor: `rgb(${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()})`,
+        data: this.groupByCounts
+      }]
+    }
+  }
+
+  get pie () {
+    return {
+      labels: this.chartLabels,
+      datasets: [{
+        label: `${this.label} groupedBy ${this.groupByValue}`,
+        data: this.groupByCounts,
+        backgroundColor: this._getbackgroundColors()
+      }],
+    }
+  }
+
+  get polar () {
+    return {
+      labels: this.chartLabels,
+      datasets: [{
+        label: this.label,
+        backgroundColor: this._getbackgroundColors(),
+        data: this.groupByCounts
+      }]
+    }
+  }
+
+  get radar () {
+    return {
+      labels: this.chartLabels,
+      datasets: [{
+        label: this.label,
+        backgroundColor: `rgba(${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()}, 0.2)`,
+        data: this.groupByCounts
+      }]
+    }
+  }
+
   _generateRandomRGBNumber () {
     const max = 255
     const min = 0
@@ -36,7 +95,7 @@ class ChartJsDataset extends Chart {
   _getbackgroundColors () {
     const labels = this.labels
     const backgroundColors = labels.map(l => {
-      return `rgb(${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()})`
+      return `rgba(${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()}, ${this._generateRandomRGBNumber()}, 0.4)`
     })
     return backgroundColors
   }

src/Models/Chart/Charts.js

@@ -1,5 +1,6 @@
 import { uuid } from 'uuidv4'
 import ChartJsDataset from '../../Models/Chart/ChartjsDataset'
+import chartjsTypes from '../../Constants/chartjsTypes' 
 
 let instance = null
 
@@ -12,8 +13,7 @@ class Charts {
 
   addNewChart = chart => {
     let newChart = null
-    if (chart.type === 'bar') newChart = this._generateChartJsDataset(chart)
-    if (chart.type === 'doughnut') newChart = this._generateChartJsDataset(chart)
+    if (chartjsTypes.includes(chart.type)) newChart = this._generateChartJsDataset(chart)
 
     if (newChart) this.collection.push(newChart)
   }

src/views/Chart/ChartViewer.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import FocusChart from '../../Models/Chart/FocusChart'
-import { Doughnut } from 'react-chartjs-2'
+import { Doughnut, Bar, Line, Pie, Polar, Radar } from 'react-chartjs-2'
 import { Button } from 'semantic-ui-react'
 import download from 'downloadjs'
 
@@ -29,7 +29,6 @@ class ChartViewer extends Component {
 
   setFocusChart = () => {
     const focusChart = this.focusChart.chart
-    console.log(focusChart)
     if (focusChart) {
       this.setState({
         chart: focusChart
@@ -41,7 +40,12 @@ class ChartViewer extends Component {
     const { chart } = this.state
     if (!chart) return
 
-    return <Doughnut data={chart[chart.type]} width={600} height={600} ref={this.chart} />
+    if (chart.type === 'bar')  return <Bar data={chart[chart.type]} width={600} height={600} ref={this.chart} />
+    if (chart.type === 'doughnut')  return <Doughnut data={chart[chart.type]} width={600} height={600} ref={this.chart} />
+    if (chart.type === 'line')  return <Line data={chart[chart.type]} width={600} height={600} ref={this.chart} />
+    if (chart.type === 'pie')  return <Pie data={chart[chart.type]} width={600} height={600} ref={this.chart} />
+    if (chart.type === 'polar')  return <Polar data={chart[chart.type]} width={600} height={600} ref={this.chart} />
+    if (chart.type === 'radar')  return <Radar data={chart[chart.type]} width={600} height={600} ref={this.chart} />
   }
 
   render = () => {