From 16c4a0ad4f9c33e6e52241bef8e6b250237226ae Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 29 Jan 2024 13:00:31 -0500
Subject: show selected names for pie charts + line charts

---
 .../views/nodes/DataVizBox/components/LineChart.tsx      | 15 +++++++++++++--
 .../views/nodes/DataVizBox/components/PieChart.tsx       | 16 +++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index f23ab94a2..47ac751cd 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -47,7 +47,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _lineChartRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _lineChartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
-    @observable _currSelected: SelectedDataPoint | undefined = undefined;
+    @observable _currSelected: any | undefined = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
     constructor(props: any) {
         super(props);
@@ -357,6 +357,17 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         else if (this._props.axes.length > 0) titleAccessor = 'dataViz_lineChart_title' + this._props.axes[0];
         if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none';
+        var selectedTitle = "";
+        if (this._currSelected && this._props.titleCol){
+            selectedTitle+= "\n" + this._props.titleCol + ": "
+            this._tableData.forEach(each => {
+                 var mapThisEntry = false;
+                if (this._currSelected.x==each[this._props.axes[0]] && this._currSelected.y==each[this._props.axes[1]]) mapThisEntry = true;
+                else if (this._currSelected.y==each[this._props.axes[0]] && this._currSelected.x==each[this._props.axes[1]]) mapThisEntry = true;
+                if (mapThisEntry) selectedTitle += each[this._props.titleCol] + ", ";
+            })
+            selectedTitle = selectedTitle.slice(0,-1).slice(0,-1);
+        }
         if (this._lineChartData.length > 0 || !this.parentViz || this.parentViz.length == 0) {
             return this._props.axes.length >= 2 && /\d/.test(this._props.records[0][this._props.axes[0]]) && /\d/.test(this._props.records[0][this._props.axes[1]]) ? (
                 <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}>
@@ -376,9 +387,9 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                     {selectedPt != 'none' ? (
                         <div className={'selected-data'}>
                             {`Selected: ${selectedPt}`}
+                            {`${selectedTitle}`}
                             <Button
                                 onClick={e => {
-                                    console.log('test plzz');
                                     this._props.vizBox.sidebarBtnDown;
                                     this._props.vizBox.sidebarAddDocument;
                                 }}></Button>
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 55c2208a3..f98d51123 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -340,14 +340,28 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         var selected: string;
         var curSelectedSliceName = '';
         if (this._currSelected) {
+            selected = '{ ';
             const sliceTitle = this._currSelected[this._props.axes[0]];
             curSelectedSliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle;
-            selected = '{ ';
             Object.keys(this._currSelected).map(key => {
                 key != '' ? (selected += key + ': ' + this._currSelected[key] + ', ') : '';
             });
             selected = selected.substring(0, selected.length - 2);
             selected += ' }';
+            if (this._props.titleCol!="" && (!this._currSelected["frequency"] || this._currSelected["frequency"]<10) && this._pieChartData){
+                var percentField = Object.keys(this._pieChartData[0])[0];
+                var descriptionField = Object.keys(this._pieChartData[0])[1]!;
+                selected+= "\n" + this._props.titleCol + ": "
+                this._tableData.forEach(each => {
+                    if (this._currSelected[percentField]==each[percentField]) {
+                        if (descriptionField){
+                            if (this._currSelected[descriptionField]==each[descriptionField]) selected+= each[this._props.titleCol] + ", ";
+                        }
+                        else selected+= each[this._props.titleCol] + ", ";
+                    }
+                })
+                selected = selected.slice(0,-1).slice(0,-1);
+            }
         } else selected = 'none';
         var selectedSliceColor;
         var sliceColors = StrListCast(this._props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
-- 
cgit v1.2.3-70-g09d2