can select 3 columns (+ beginning of basic 2 columns displayed on y axis in linechart)

2 files changed, 30 insertions, 7 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 47ac751cd..8d6671e65 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -272,12 +272,25 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         const data = dataSet[0];
         const lineGen = createLineGenerator(xScale, yScale);
         var validData = data.filter(d => {
-            var valid = true;
             Object.keys(data[0]).map(key => {
-                if (!d[key] || Number.isNaN(d[key])) valid = false;
+                if (!d[key] || Number.isNaN(d[key])) return false;
             });
-            return valid;
+            return true;
         });
+
+        if (this._props.axes.length>2){
+            var next = this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[2]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
+            var validNext = next.filter(d => {
+                // Object.keys(next[0]).map(key => {
+                //     if (!d[key] || Number.isNaN(d[key])) return false;
+                // });
+                if (!d.x || Number.isNaN(d.x) || !d.y || Number.isNaN(d.y)) valid = false;
+                return true;
+            });
+            drawLine(svg.append('path'), validNext, lineGen);
+            this.drawDataPoints(validNext, 0, xScale, yScale);
+        }
+
         // draw the plot line
         drawLine(svg.append('path'), validData, lineGen);
         // draw the datapoint circle
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index c20509029..1b239b5e5 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -163,7 +163,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                 else{
                     const newAxes = this._props.axes;
                     if (newAxes.includes(col)) newAxes.splice(newAxes.indexOf(col), 1);
-                    else if (newAxes.length > 1) newAxes[1] = col;
+                    else if (newAxes.length > 2) newAxes[newAxes.length-1] = col;
                     else newAxes.push(col);
                     this._props.selectAxes(newAxes);
                 }
@@ -220,8 +220,15 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                         <th
                                             key={this.columns.indexOf(col)}
                                             style={{
-                                                color: this._props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this._props.axes.lastElement() === col ? 'darkred' : undefined,
-                                                background: this._props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this._props.axes.lastElement() === col ? '#Fbdbdb' : undefined,
+                                                color: this._props.axes.slice().reverse().lastElement() === col ? 'darkgreen' 
+                                                    : (this._props.axes.length>2 && this._props.axes.lastElement() === col) ? 'darkred' 
+                                                    : (this._props.axes.lastElement()===col || (this._props.axes.length>2 && this._props.axes[1]==col))? 'darkblue' : undefined,
+                                                background: this._props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' 
+                                                    : (this._props.axes.length>2 && this._props.axes.lastElement() === col) ? '#Fbdbdb' 
+                                                    : (this._props.axes.lastElement()===col || (this._props.axes.length>2 && this._props.axes[1]==col))? '#c6ebf7' : undefined,
+                                                // blue: #ADD8E6
+                                                // green: #E3fbdb
+                                                // red: #Fbdbdb
                                                 fontWeight: 'bolder',
                                                 border: '3px solid black',
                                             }}
@@ -243,7 +250,10 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                 background: NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
                                             }}>
                                             {this.columns.map(col => {
-                                                var colSelected = this._props.axes.length > 1 ? this._props.axes[0] == col || this._props.axes[1] == col : this._props.axes.length > 0 ? this._props.axes[0] == col : false;
+                                                var colSelected = false;
+                                                if (this._props.axes.length>2) colSelected = this._props.axes[0]==col || this._props.axes[1]==col || this._props.axes[2]==col;
+                                                else if (this._props.axes.length>1) colSelected = this._props.axes[0]==col || this._props.axes[1]==col;
+                                                else if (this._props.axes.length>0) colSelected = this._props.axes[0]==col;
                                                 if (this._props.titleCol==col) colSelected = true;
                                                 return (
                                                     <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>