diff --git a/src/Constants/chartTypes.js b/src/Constants/chartTypes.js
index 67ba13d..5f88ee1 100644
--- a/src/Constants/chartTypes.js
+++ b/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' */
]
\ No newline at end of file
diff --git a/src/Constants/chartjsTypes.js b/src/Constants/chartjsTypes.js
new file mode 100644
index 0000000..5f88ee1
--- /dev/null
+++ b/src/Constants/chartjsTypes.js
@@ -0,0 +1,3 @@
+export default [
+ 'line', 'bar', 'radar', 'doughnut', 'pie', 'polar', /*'bubble', 'scatter', 'area', 'mixed' */
+]
\ No newline at end of file
diff --git a/src/Models/Chart/ChartjsDataset.js b/src/Models/Chart/ChartjsDataset.js
index e47de47..ee975fa 100644
--- a/src/Models/Chart/ChartjsDataset.js
+++ b/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
}
diff --git a/src/Models/Chart/Charts.js b/src/Models/Chart/Charts.js
index e73a8da..87df6f9 100644
--- a/src/Models/Chart/Charts.js
+++ b/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)
}
diff --git a/src/views/Chart/ChartViewer.js b/src/views/Chart/ChartViewer.js
index 6121de2..aeec019 100644
--- a/src/views/Chart/ChartViewer.js
+++ b/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
+ if (chart.type === 'bar') return
+ if (chart.type === 'doughnut') return
+ if (chart.type === 'line') return
+ if (chart.type === 'pie') return
+ if (chart.type === 'polar') return
+ if (chart.type === 'radar') return
}
render = () => {