diff --git a/src/Constants/chartTypes.js b/src/Constants/chartTypes.js index 06d32d4..65738ac 100644 --- a/src/Constants/chartTypes.js +++ b/src/Constants/chartTypes.js @@ -1,3 +1,4 @@ export default { - oneAxisCharts: ['line', 'bar', 'radar', 'doughnut', 'pie', 'polar'] /*'bubble', 'scatter', 'area', 'mixed' */ + oneAxisCharts: ['line', 'bar', 'radar', 'doughnut', 'pie', 'polar'], + twoAxisCharts: ['scatter'] /*'bubble', 'scatter', 'area', 'mixed' */ } diff --git a/src/Controllers/CreateChartController.js b/src/Controllers/CreateChartController.js index 0b877e4..1661f3c 100644 --- a/src/Controllers/CreateChartController.js +++ b/src/Controllers/CreateChartController.js @@ -12,6 +12,8 @@ class CreateTableController { type: chart.type, table: chart.table, reportValue: chart.reportValue, + xAxis: chart.xAxis, + yAxis: chart.yAxis }) document.dispatchEvent(this.updatedChartsEvent) } diff --git a/src/Models/Chart/Charts.js b/src/Models/Chart/Charts.js index 332b500..d126cc5 100644 --- a/src/Models/Chart/Charts.js +++ b/src/Models/Chart/Charts.js @@ -1,5 +1,6 @@ import { uuid } from 'uuidv4' import OneAxisChart from '../../Models/Chart/OneAxisChart' +import TwoAxisChart from '../../Models/Chart/TwoAxisChart' import chartTypes from '../../Constants/chartTypes' let instance = null @@ -14,6 +15,7 @@ class Charts { addNewChart = chart => { let newChart = null if (chartTypes.oneAxisCharts.includes(chart.type)) newChart = this._generateOneAxisChart(chart) + if (chartTypes.twoAxisCharts.includes(chart.type)) newChart = this._generateTwoAxisChart(chart) if (newChart) this.collection.push(newChart) } @@ -51,6 +53,19 @@ class Charts { }) return newChart } + + _generateTwoAxisChart = chart => { + const newChart = new TwoAxisChart({ + id: chart.id || uuid(), + label: chart.label, + type: chart.type, + table: chart.table, + xAxis: chart.xAxis, + yAxis: chart.yAxis + // reportValue: chart.reportValue + }) + return newChart + } } export default Charts diff --git a/src/Models/Chart/OneAxisChart.js b/src/Models/Chart/OneAxisChart.js index 82b9e79..be7c3ce 100644 --- a/src/Models/Chart/OneAxisChart.js +++ b/src/Models/Chart/OneAxisChart.js @@ -7,7 +7,7 @@ class OneAxisChart extends Chart { this.groupByNodule = new GroupByNodule({ id: this.id, - label: `${this.label} groupedBy ${this.reportValue}`, + label: `${this.label} Grouped By ${this.reportValue}`, tables: [this.table], groupByValue: this.reportValue }).export() diff --git a/src/Models/Chart/TwoAxisChart.js b/src/Models/Chart/TwoAxisChart.js new file mode 100644 index 0000000..aaf563f --- /dev/null +++ b/src/Models/Chart/TwoAxisChart.js @@ -0,0 +1,40 @@ +import Chart from './Chart' + +class TwoAxisChart extends Chart { + constructor (props) { + super(props) + this.xAxis = props.xAxis + this.yAxis = props.yAxis + this.rows = props.table.export() + } + + get scatter () { + const rows = this.table.export() + const data = rows.map(r => { + return { x: r[this.xAxis], y: r[this.yAxis] } + }) + + const pointColor = { r: this._generateRandomRGBNumber(), g: this._generateRandomRGBNumber(), b: this._generateRandomRGBNumber(), a: 0.2 } + + return { + labels: [this.label], + datasets: [ + { + data: data, + label: this.label, + pointBorderColor: `rgba(${pointColor.r}, ${pointColor.g}, ${pointColor.b}, 0.2)`, + pointBackgroundColor: `rgba(${pointColor.r}, ${pointColor.g}, ${pointColor.b}, 1)`, + backgroundColor: `rgba(${pointColor.r}, ${pointColor.g}, ${pointColor.b}, 1)`, + } + ] + } + } + + _generateRandomRGBNumber () { + const max = 255 + const min = 0 + return Math.round(Math.random() * (max - min) - min) + } +} + +export default TwoAxisChart diff --git a/src/views/ChartList/ChartListItem.js b/src/views/ChartList/ChartListItem.js index 1b42469..0e9027f 100644 --- a/src/views/ChartList/ChartListItem.js +++ b/src/views/ChartList/ChartListItem.js @@ -1,6 +1,5 @@ import React, { Component } from 'react' import { Card, Icon } from 'semantic-ui-react' -// import './TableList.css' import ChartListController from '../../Controllers/ChartListController' @@ -16,7 +15,7 @@ class ChartListItem extends Component { { chart.label } - {`${chart.table} grouped by ${chart.reportValue}`} + {/* {`${chart.table} grouped by ${chart.reportValue}`} */} if (chart.type === 'polar') return if (chart.type === 'radar') return + if (chart.type === 'scatter') return } render = () => { return (
{this.renderChart()} - { this.state.chart ? : '' } +
+ { this.state.chart ? : '' }
) } diff --git a/src/views/CreateChart/CreateChartForm.js b/src/views/CreateChart/CreateChartForm.js index a730377..8173d26 100644 --- a/src/views/CreateChart/CreateChartForm.js +++ b/src/views/CreateChart/CreateChartForm.js @@ -17,7 +17,9 @@ class CreateChartForm extends Component { selectedTableId: '', tables: this.tables.getCollectionProps(), reportValue: '', - headers : [] + headers : [], + xAxisValue: '', + yAxisValue: '' } this.tables = new Tables() @@ -45,10 +47,18 @@ class CreateChartForm extends Component { this.setState({ chartType: value.value }) } - handleGroupByChange = (e, value) => { + handleReportValueChange = (e, value) => { this.setState({ reportValue: value.value }) } + handleXAxisChange = (e, value) => { + this.setState({ xAxisValue: value.value }) + } + + handleYAxisChange = (e, value) => { + this.setState({ yAxisValue: value.value }) + } + handleSelectedTableChange = (e, value) => { const selectedTable = this.tables.getById(value.value) this.setState({ @@ -69,7 +79,7 @@ class CreateChartForm extends Component { return tableDropdownOptions } - getGroupByDropDownOptions = () => { + getHeaderDropDownOptions = () => { const { headers } = this.state const tableDropdownOptions = headers.map(h => { return { @@ -82,21 +92,65 @@ class CreateChartForm extends Component { } handleSubmit = () => { - const { chartType, selectedTableId, reportValue } = this.state + const { chartType, selectedTableId, reportValue, xAxisValue, yAxisValue } = this.state const chartLabel = this.chartLabelInput.current.inputRef.current.value - // const reportValue = this.reportValueInput.current.inputRef.current.value const table = this.tables.getById(selectedTableId) this.controller.addNewChart({ label: chartLabel, type: chartType, table: table, - reportValue: reportValue + reportValue: reportValue, + xAxis: xAxisValue, + yAxis: yAxisValue }) this.clearInput() } + renderConfigOptions = () => { + const { oneAxisCharts, twoAxisCharts } = chartTypes + const { chartType } = this.state + + let configElements = [] + if (oneAxisCharts.includes(chartType)) configElements.push( + + ) + else if (twoAxisCharts.includes(chartType)) { + configElements.push( + + ) + configElements.push( + + ) + } + return configElements + } + updateTableList = () => { this.setState({tables: this.tables.getCollectionProps()}) } @@ -107,21 +161,10 @@ class CreateChartForm extends Component {
Create Graph
-
- - - + + { this.renderConfigOptions() } +