feat: added two axis charts

scatter chart

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' */
 }

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)
   }

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

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

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

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 {
       <Card key={chart.id} id={chart.id} style={{ width: '380px' }}>
         <Card.Content>
           <Card.Header>{ chart.label }</Card.Header>
-          <Card.Meta>{`${chart.table} grouped by ${chart.reportValue}`}</Card.Meta>
+          {/* <Card.Meta>{`${chart.table} grouped by ${chart.reportValue}`}</Card.Meta> */}
         </Card.Content>
         <Card.Content extra>
           <span 

src/views/ChartViewer/ChartViewer.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import FocusChart from '../../Models/Chart/FocusChart'
-import { Doughnut, Bar, Line, Pie, Polar, Radar } from 'react-chartjs-2'
+import { Doughnut, Bar, Line, Pie, Polar, Radar, Scatter } from 'react-chartjs-2'
 import { Button } from 'semantic-ui-react'
 import download from 'downloadjs'
 
@@ -48,13 +48,15 @@ class ChartViewer extends Component {
     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} />
+    if (chart.type === 'scatter')  return <Scatter data={chart[chart.type]} width={600} height={600} ref={this.chart} />
   }
 
   render = () => {
     return (
       <div className='ChartViewer'>
         {this.renderChart()}
-        { this.state.chart ? <Button onClick={this.saveChart}>Save As Image</Button> : '' }
+        <br />
+        { this.state.chart ? <Button fluid onClick={this.saveChart}>Save As Image</Button> : '' }
       </div>
     )
   }

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(
+      <Dropdown
+        value ={this.state.reportValue}
+        placeholder='Report By'
+        options={this.getHeaderDropDownOptions()}
+        fluid
+        selection
+        style={{ width: '300px' }}
+        onChange={this.handleReportValueChange}
+      />
+    )
+    else if (twoAxisCharts.includes(chartType)) {
+      configElements.push(
+        <Dropdown
+          value ={this.state.xAxisValue}
+          placeholder='X-Axis'
+          options={this.getHeaderDropDownOptions()}
+          fluid
+          selection
+          style={{ width: '300px' }}
+          onChange={this.handleXAxisChange}
+        />
+      )
+      configElements.push(
+        <Dropdown
+          value ={this.state.yAxisValue}
+          placeholder='Y-Axis'
+          options={this.getHeaderDropDownOptions()}
+          fluid
+          selection
+          style={{ width: '300px' }}
+          onChange={this.handleYAxisChange}
+        />
+      )
+    }
+    return configElements
+  }
+
   updateTableList = () => {
     this.setState({tables: this.tables.getCollectionProps()})
   }
@@ -107,21 +161,10 @@ class CreateChartForm extends Component {
         <Header as='h3'>Create Graph</Header>
 
         <Input
-            placeholder='Chart Label'
+          placeholder='Chart Label'
-            ref={this.chartLabelInput}
+          ref={this.chartLabelInput}
-            icon='tags'
+          icon='tags'
-            style={{ width: '300px' }}
-          />
-          <br />
-
-        <Dropdown
-          value ={this.state.chartType}
-          placeholder='Select a Chart Type'
-          options={this.getChartTypeDropdownOptions()}
-          fluid
-          selection
           style={{ width: '300px' }}
-          onChange={this.handleChartTypeChange}
         />
 
         <Dropdown
@@ -133,17 +176,19 @@ class CreateChartForm extends Component {
           style={{ width: '300px' }}
           onChange={this.handleSelectedTableChange}
         />
-        
+
         <Dropdown
-          value ={this.state.selectedTable}
+          value ={this.state.chartType}
-          placeholder='Group By'
+          placeholder='Select a Chart Type'
-          options={this.getGroupByDropDownOptions()}
+          options={this.getChartTypeDropdownOptions()}
           fluid
           selection
           style={{ width: '300px' }}
-          onChange={this.handleGroupByChange}
+          onChange={this.handleChartTypeChange}
         />
 
+        { this.renderConfigOptions() }
+
         <div className='creatTableFormSubmitButtons'>
           <Button content='Cancel' secondary />
           <Button content='Confirm' primary onClick={this.handleSubmit} />