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 = () => {