refact: rename groupByValue to report value

src/Controllers/CreateChartController.js

@@ -11,7 +11,7 @@ class CreateTableController {
       label: chart.label,
       type: chart.type,
       table: chart.table,
-      groupByValue: chart.groupByValue,
+      reportValue: chart.reportValue,
     })
     document.dispatchEvent(this.updatedChartsEvent)
   }

src/Models/Chart/Chart.js

@@ -6,7 +6,7 @@ class Chart {
     this.label = props.label
     this.table = props.table
     this.type = props.type
-    this.groupByValue = props.groupByValue
+    this.reportValue = props.reportValue
   }
 
   get id () {
@@ -34,13 +34,13 @@ class Chart {
     return this._chartType
   }
 
-  get groupByValue () {
+  get reportValue () {
-    return this._groupByValue
+    return this._reportValue
   }
 
-  set groupByValue (value) {
+  set reportValue (value) {
-    this._groupByValue = value || this._groupByValue
+    this._reportValue = value || this._reportValue
-    return this._groupByValue
+    return this._reportValue
   } 
 
   set table (table) {

src/Models/Chart/Charts.js

@@ -30,7 +30,7 @@ class Charts {
         label: c.label,
         table: c.table.label,
         type: c.type,
-        groupByValue: c.groupByValue
+        reportValue: c.reportValue
       }
     })
     return chartProps
@@ -47,7 +47,7 @@ class Charts {
       label: chart.label,
       type: chart.type,
       table: chart.table,
-      groupByValue: chart.groupByValue
+      reportValue: chart.reportValue
     })
     return newChart
   }

src/Models/Chart/OneAxisChart.js

@@ -1,15 +1,15 @@
 import Chart from './Chart.js'
 import { GroupByNodule } from 'lovelacejs'
 
-class ChartJsDataset extends Chart {
+class OneAxisChart extends Chart {
   constructor (props) {
     super(props)
 
     this.groupByNodule = new GroupByNodule({
       id: this.id,
-      label: `${this.label} groupedBy ${this.groupByValue}`,
+      label: `${this.label} groupedBy ${this.reportValue}`,
       tables: [this.table],
-      groupByValue: this.groupByValue
+      groupByValue: this.reportValue
     }).export()
     
     this.chartLabels = Object.keys(this.groupByNodule)
@@ -35,7 +35,7 @@ class ChartJsDataset extends Chart {
     return {
       labels: this.chartLabels,
       datasets: [{
-        label: `${this.label} groupedBy ${this.groupByValue}`,
+        label: `${this.label} groupedBy ${this.reportValue}`,
         data: this.groupByCounts,
         backgroundColor: this._getbackgroundColors()
       }],
@@ -57,7 +57,7 @@ class ChartJsDataset extends Chart {
     return {
       labels: this.chartLabels,
       datasets: [{
-        label: `${this.label} groupedBy ${this.groupByValue}`,
+        label: `${this.label} groupedBy ${this.reportValue}`,
         data: this.groupByCounts,
         backgroundColor: this._getbackgroundColors()
       }],
@@ -101,4 +101,4 @@ class ChartJsDataset extends Chart {
   }
 }
 
-export default ChartJsDataset
+export default OneAxisChart

src/views/ChartList/ChartListItem.js

@@ -16,7 +16,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.groupByValue}`}</Card.Meta>
+          <Card.Meta>{`${chart.table} grouped by ${chart.reportValue}`}</Card.Meta>
         </Card.Content>
         <Card.Content extra>
           <span 

src/views/ChartViewer/ChartViewer.js

@@ -11,14 +11,14 @@ class ChartViewer extends Component {
     this.chart = React.createRef()
     this.state = {
       chart: null,
-      groupByValue: ''
+      reportValue: ''
     }
 
     document.addEventListener('setSelectedChart', this.setFocusChart)
   }
 
   handleGroupByChange = (e, value) => {
-    this.setState({ groupByValue: value.value })
+    this.setState({ reportValue: value.value })
   }
 
   saveChart = () => {
@@ -40,6 +40,8 @@ class ChartViewer extends Component {
     const { chart } = this.state
     if (!chart) return
 
+    console.log(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} />

src/views/CreateChart/CreateChartForm.js

@@ -16,7 +16,7 @@ class CreateChartForm extends Component {
       chartType: '',
       selectedTableId: '',
       tables: this.tables.getCollectionProps(),
-      groupByValue: '',
+      reportValue: '',
       headers : []
     }
 
@@ -25,7 +25,7 @@ class CreateChartForm extends Component {
     this.controller = new CreateChartController()
 
     this.chartLabelInput = React.createRef()
-    this.groupByValueInput = React.createRef()
+    this.reportValueInput = React.createRef()
 
     document.addEventListener('updateTables', this.updateTableList)
   }
@@ -46,7 +46,7 @@ class CreateChartForm extends Component {
   }
 
   handleGroupByChange = (e, value) => {
-    this.setState({ groupByValue: value.value })
+    this.setState({ reportValue: value.value })
   }
 
   handleSelectedTableChange = (e, value) => {
@@ -82,16 +82,16 @@ class CreateChartForm extends Component {
   }
 
   handleSubmit = () => {
-    const { chartType, selectedTableId, groupByValue } = this.state
+    const { chartType, selectedTableId, reportValue } = this.state
 
     const chartLabel = this.chartLabelInput.current.inputRef.current.value
-    // const groupByValue = this.groupByValueInput.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,
-      groupByValue: groupByValue
+      reportValue: reportValue
     })
 
     this.clearInput()