From ad6cbd1e4abf97cff81d160b3b3afa0bc9b8c204 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 27 Jul 2023 13:55:56 -0400
Subject: titles

---
 .../views/nodes/DataVizBox/components/Chart.scss       | 11 +++++++----
 .../views/nodes/DataVizBox/components/Histogram.tsx    | 14 ++++++++++++--
 .../views/nodes/DataVizBox/components/LineChart.tsx    | 11 +++++++++--
 .../views/nodes/DataVizBox/components/PieChart.tsx     | 18 ++++++++++++++----
 4 files changed, 42 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 808300c2c..5945840b5 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -8,6 +8,13 @@
     .graph{
         overflow: visible;
     }
+    .graph-title{
+        align-items: center;
+        font-size: larger;
+    }
+    .selected-data{
+        align-items: center;
+    }
     .slice {
         &.hover {
             stroke: black;
@@ -56,8 +63,4 @@
         // change the color of the circle element to be red
         fill: red;
     }
-
-    .selected-data{
-        text-align: center;
-    }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index c9cd49aa1..479f6584c 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -66,6 +66,14 @@ export class Histogram extends React.Component<HistogramProps> {
             .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))
             .sort((a, b) => (a.x < b.x ? -1 : 1));
     }
+    @computed get graphTitle(){
+        var ax0 = this.props.axes[0];
+        var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
+        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
+            return ax0 + " Histogram";
+        }
+        else return ax1 + " by " + ax0 + " Histogram";
+    }    
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
             .filter(link => {
@@ -416,8 +424,10 @@ export class Histogram extends React.Component<HistogramProps> {
         else selected = 'none';
         return (
             this.props.axes.length >= 1 ? (
-            <div ref={this._histogramRef} className="chart-container">
-                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
+            <div className="chart-container" >
+                <div className="graph-title"> {this.graphTitle} </div>
+                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                <div ref={this._histogramRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 91baf095d..da79df476 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -53,6 +53,9 @@ export class LineChart extends React.Component<LineChartProps> {
             .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))
             .sort((a, b) => (a.x < b.x ? -1 : 1));
     }
+    @computed get graphTitle(){
+        return this.props.axes[1] + " vs. " + this.props.axes[0] + " Line Chart";
+    }  
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
             .filter(link => {
@@ -338,9 +341,13 @@ export class LineChart extends React.Component<LineChartProps> {
     render() {
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
-            <div ref={this._lineChartRef} className="chart-container">
-                <span className={'selected-data'}> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span>
+            this.props.axes.length >= 2 ? (
+            <div className="chart-container" >
+                <div className="graph-title"> {this.graphTitle} </div>
+                <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
+                <div ref={this._lineChartRef} />
             </div>
+            ) : <span className="chart-container"> {'first use table view to select two axes to plot'}</span>
         );
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index cead40d92..27653b847 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -53,7 +53,7 @@ export class PieChart extends React.Component<PieChartProps> {
 
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
-        if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false;}
+        if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false; }
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -63,6 +63,14 @@ export class PieChart extends React.Component<PieChartProps> {
             .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))
             .sort((a, b) => (a.x < b.x ? -1 : 1));
     }
+    @computed get graphTitle(){
+        var ax0 = this.props.axes[0];
+        var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
+        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
+            return ax0 + " Pie Chart";
+        }
+        else return ax1 + " by " + ax0 + " Pie Chart";
+    }    
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
             .filter(link => {
@@ -333,7 +341,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .append("g")
         arcs.append("path")
             .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
-            .attr("class", `${pieDataSet[0][percentField]} slice`)
+            .attr("class", 'slice')
             .attr("d", arc)
             .on('click', onPointClick)
         arcs.append("text")
@@ -373,8 +381,10 @@ export class PieChart extends React.Component<PieChartProps> {
         else selected = 'none';
         return (
             this.props.axes.length >= 1 ? (
-            <div ref={this._piechartRef} className="chart-container">
-                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
+            <div className="chart-container">
+                <div className="graph-title"> {this.graphTitle} </div>
+                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                <div ref={this._piechartRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
-- 
cgit v1.2.3-70-g09d2