From db51496360e8eac55b5e83283370c4aeec7a11d8 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 17 Jan 2024 15:01:30 -0500
Subject: cleaner

---
 src/client/views/nodes/DataVizBox/components/TableBox.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/components/TableBox.tsx')

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index ed44d9269..c5fda18ae 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -83,14 +83,12 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         return this._props.docView?.()?.screenToViewTransform().Scale || 1;
     }
     @computed get rowHeight() {
-        console.log('scale = ' + this.viewScale + '  table = ' + this._tableHeight + ' ids = ' + this._tableDataIds.length);
         return (this.viewScale * this._tableHeight) / this._tableDataIds.length;
     }
     @computed get startID() {
         return this.rowHeight ? Math.max(Math.floor(this._scrollTop / this.rowHeight) - 1, 0) : 0;
     }
     @computed get endID() {
-        console.log('start = ' + this.startID + '  container = ' + this._tableContainerHeight + ' scale = ' + this.viewScale + ' row = ' + this.rowHeight);
         return Math.ceil(this.startID + (this._tableContainerHeight * this.viewScale) / (this.rowHeight || 1));
     }
     @action handleScroll = () => {
-- 
cgit v1.2.3-70-g09d2


From aa3c70399ac2b6a337a9c85fb30f57f82ee44063 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 23 Jan 2024 13:22:13 -0500
Subject: data has a title column

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  8 ++++++--
 .../nodes/DataVizBox/components/Histogram.tsx      |  1 +
 .../nodes/DataVizBox/components/LineChart.tsx      |  1 +
 .../views/nodes/DataVizBox/components/PieChart.tsx |  1 +
 .../views/nodes/DataVizBox/components/TableBox.tsx | 22 ++++++++++++++++------
 5 files changed, 25 insertions(+), 8 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/components/TableBox.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 981ec0aa1..ea053b09d 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -104,8 +104,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @computed.struct get axes() {
         return StrListCast(this.layoutDoc._dataViz_axes);
     }
-
     selectAxes = (axes: string[]) => (this.layoutDoc._dataViz_axes = new List<string>(axes));
+    @computed.struct get titleCol() {
+        return StrCast(this.layoutDoc._dataViz_titleCol);
+    }
+    selectTitleCol = (titleCol: string) => (this.layoutDoc._dataViz_titleCol = titleCol);
 
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
@@ -271,6 +274,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             layoutDoc: this.layoutDoc,
             records: this.records,
             axes: this.axes,
+            titleCol: this.titleCol,
             //width: this.SidebarShown? this._props.PanelWidth()*.9/1.2: this._props.PanelWidth() * 0.9,
             height: (this._props.PanelHeight() / scale - 32) /* height of 'change view' button */ * 0.9,
             width: (this._props.PanelWidth() / scale) * 0.9,
@@ -278,7 +282,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         };
         if (!this.records.length) return 'no data/visualization';
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox  {...sharedProps} docView={this._props.DocumentView} selectAxes={this.selectAxes} />;
+            case DataVizView.TABLE:     return <TableBox  {...sharedProps} docView={this._props.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
             case DataVizView.LINECHART: return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} vizBox={this} />;
             case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />;
             case DataVizView.PIECHART:  return <PieChart  {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} 
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 412957fb1..44e8b97c6 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -20,6 +20,7 @@ export interface HistogramProps {
     Document: Doc;
     layoutDoc: Doc;
     axes: string[];
+    titleCol: string;
     records: { [key: string]: any }[];
     width: number;
     height: number;
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 2a9a8b354..f23ab94a2 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -28,6 +28,7 @@ export interface LineChartProps {
     Document: Doc;
     layoutDoc: Doc;
     axes: string[];
+    titleCol: string;
     records: { [key: string]: any }[];
     width: number;
     height: number;
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 1259a13ff..55c2208a3 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -19,6 +19,7 @@ export interface PieChartProps {
     Document: Doc;
     layoutDoc: Doc;
     axes: string[];
+    titleCol: string;
     records: { [key: string]: any }[];
     width: number;
     height: number;
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index c5fda18ae..c20509029 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -18,7 +18,9 @@ interface TableBoxProps {
     layoutDoc: Doc;
     records: { [key: string]: any }[];
     selectAxes: (axes: string[]) => void;
+    selectTitleCol: (titleCol: string) => void;
     axes: string[];
+    titleCol: string;
     width: number;
     height: number;
     margin: {
@@ -153,11 +155,18 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
             },
             emptyFunction,
             action(e => {
-                const newAxes = this._props.axes;
-                if (newAxes.includes(col)) newAxes.splice(newAxes.indexOf(col), 1);
-                else if (newAxes.length > 1) newAxes[1] = col;
-                else newAxes.push(col);
-                this._props.selectAxes(newAxes);
+                if (e.shiftKey){
+                    if (this._props.titleCol == col) this._props.titleCol = "";
+                    else this._props.titleCol = col;
+                    this._props.selectTitleCol(this._props.titleCol);
+                }
+                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 newAxes.push(col);
+                    this._props.selectAxes(newAxes);
+                }
             })
         );
     };
@@ -234,7 +243,8 @@ 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 => {
-                                                const 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 = 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;
+                                                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' }}>
                                                         <div className="tableBox-cell">{this._props.records[rowId][col]}</div>
-- 
cgit v1.2.3-70-g09d2


From 6d5a43b114b54820e3578862a5429eb096c71058 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 31 Jan 2024 17:36:41 -0500
Subject: can select 3 columns (+ beginning of basic 2 columns displayed on y
 axis in linechart)

---
 .../views/nodes/DataVizBox/components/LineChart.tsx   | 19 ++++++++++++++++---
 .../views/nodes/DataVizBox/components/TableBox.tsx    | 18 ++++++++++++++----
 2 files changed, 30 insertions(+), 7 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/components/TableBox.tsx')

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' }}>
-- 
cgit v1.2.3-70-g09d2

