From 9dbd9efeb0080418fcb44c5c78511fffa09ad229 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Sun, 13 Aug 2023 17:37:02 -0400
Subject: just one histogram bar bug fix + message displayed when graphs have
 no incoming data rows selected

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 94 ++++++++++++----------
 .../nodes/DataVizBox/components/LineChart.tsx      | 42 ++++++----
 .../views/nodes/DataVizBox/components/PieChart.tsx | 62 +++++++-------
 3 files changed, 111 insertions(+), 87 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index df713c462..df6aac6bc 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -263,7 +263,7 @@ export class Histogram extends React.Component<HistogramProps> {
             eachRectWidth = width/(bins.length)
             bins.forEach(d => d.x0 = d.x0!)
             xAxis = d3.axisBottom(x)
-                .ticks(bins.length-1)
+                .ticks(bins.length>1? bins.length-1: 1)
                 .tickFormat( i => uniqueArr[i.valueOf()] as string)
                 .tickPadding(10)
             x.range([0, width-eachRectWidth])
@@ -428,54 +428,62 @@ export class Histogram extends React.Component<HistogramProps> {
         barColors.map(each => {if (each[0]==curSelectedBarName!) selectedBarColor = each[1]});
 
         this.componentDidMount();
-        return (
-            this.props.axes.length >= 1 ? (
-            <div className="chart-container" >
-                <div className="graph-title"> 
-                    <EditableText
-                        val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
-                        color={"black"}
-                        size={Size.LARGE}
-                        fillWidth
-                    />
-                    &nbsp; &nbsp; 
-                    <ColorPicker
-                        tooltip={'Change Default Bar Color'} 
-                        type={Type.SEC} 
-                        icon={<FaFillDrip/>}
-                        selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
-                        setSelectedColor={undoable (color => this.props.layoutDoc.defaultHistogramColor = color, "Change Default Bar Color")}
-                        size={Size.XSMALL}
-                    />
-                </div>
-                <div ref={this._histogramRef} />
-                {selected != 'none' ? 
-                    <div className={'selected-data'}>
-                        Selected: {selected}
-                        &nbsp; &nbsp;
+
+        if (this._histogramData.length>0){
+            return (
+                this.props.axes.length >= 1 ? (
+                <div className="chart-container" >
+                    <div className="graph-title"> 
+                        <EditableText
+                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
+                            color={"black"}
+                            size={Size.LARGE}
+                            fillWidth
+                        />
+                        &nbsp; &nbsp; 
                         <ColorPicker
-                            tooltip={'Change Bar Color'} 
+                            tooltip={'Change Default Bar Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
-                            setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Bar Color")}
+                            selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
+                            setSelectedColor={undoable (color => this.props.layoutDoc.defaultHistogramColor = color, "Change Default Bar Color")}
                             size={Size.XSMALL}
                         />
-                        &nbsp;
-                        <IconButton
-                            icon={<FontAwesomeIcon icon={'eraser'} />} 
-                            size={Size.XSMALL} 
-                            color={'black'} 
-                            type={Type.SEC}
-                            tooltip={'Revert to the default bar color'}
-                            onClick={undoable (action(() => this.eraseSelectedColor()), "Change Selected Bar Color")}
-                        />
                     </div>
-                : null}
+                    <div ref={this._histogramRef} />
+                    {selected != 'none' ? 
+                        <div className={'selected-data'}>
+                            Selected: {selected}
+                            &nbsp; &nbsp;
+                            <ColorPicker
+                                tooltip={'Change Bar Color'} 
+                                type={Type.SEC} 
+                                icon={<FaFillDrip/>}
+                                selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
+                                setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Bar Color")}
+                                size={Size.XSMALL}
+                            />
+                            &nbsp;
+                            <IconButton
+                                icon={<FontAwesomeIcon icon={'eraser'} />} 
+                                size={Size.XSMALL} 
+                                color={'black'} 
+                                type={Type.SEC}
+                                tooltip={'Revert to the default bar color'}
+                                onClick={undoable (action(() => this.eraseSelectedColor()), "Change Selected Bar Color")}
+                            />
+                        </div>
+                    : null}
+                </div>
+                ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
+            );
+        }
+        else return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className='chart-container'>
+                Selected rows of data from the incoming DataVizBox to display.
             </div>
-            ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
-        );
+        )
     }
-
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index d27aaafbc..8bace941f 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -358,24 +358,32 @@ export class LineChart extends React.Component<LineChartProps> {
         else if (this.props.axes.length>0) titleAccessor = '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';
-        return (
-            this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? (
-            <div className="chart-container" >
-                <div className="graph-title"> 
-                    <EditableText
-                        val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
-                        color={"black"}
-                        size={Size.LARGE}
-                        fillWidth
-                    />
+        if (this._lineChartData.length>0){
+            return (
+                this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? (
+                <div className="chart-container" >
+                    <div className="graph-title"> 
+                        <EditableText
+                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
+                            color={"black"}
+                            size={Size.LARGE}
+                            fillWidth
+                        />
+                    </div>
+                    <div ref={this._lineChartRef} />
+                    {selectedPt!='none'? 
+                        <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
+                    : null}
                 </div>
-                <div ref={this._lineChartRef} />
-                {selectedPt!='none'? 
-                    <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
-                : null}
+                ) : <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span>
+            );
+        }
+        else return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className='chart-container'>
+                Selected rows of data from the incoming DataVizBox to display.
             </div>
-            ) : <span className="chart-container"> {'first use table view to select two numerical 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 03c9efdd1..0c54d0a4e 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -337,36 +337,44 @@ export class PieChart extends React.Component<PieChartProps> {
         var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
         sliceColors.map(each => {if (each[0]==curSelectedSliceName!) selectedSliceColor = each[1]});
 
-        return (
-            this.props.axes.length >= 1 ? (
-            <div className="chart-container">
-                <div className="graph-title"> 
-                    <EditableText
-                        val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
-                        color={"black"}
-                        size={Size.LARGE}
-                        fillWidth
-                    />
-                </div>
-                <div ref={this._piechartRef} />
-                {selected != 'none' ? 
-                    <div className={'selected-data'}>
-                        Selected: {selected}
-                        &nbsp; &nbsp;
-                        <ColorPicker
-                            tooltip={'Change Slice Color'} 
-                            type={Type.SEC} 
-                            icon={<FaFillDrip/>}
-                            selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")}
-                            setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Slice Color")}
-                            size={Size.XSMALL}
+        if (this._piechartData.length>0){
+            return (
+                this.props.axes.length >= 1 ? (
+                <div className="chart-container">
+                    <div className="graph-title"> 
+                        <EditableText
+                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
+                            color={"black"}
+                            size={Size.LARGE}
+                            fillWidth
                         />
                     </div>
-                : null}
+                    <div ref={this._piechartRef} />
+                    {selected != 'none' ? 
+                        <div className={'selected-data'}>
+                            Selected: {selected}
+                            &nbsp; &nbsp;
+                            <ColorPicker
+                                tooltip={'Change Slice Color'} 
+                                type={Type.SEC} 
+                                icon={<FaFillDrip/>}
+                                selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")}
+                                setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Slice Color")}
+                                size={Size.XSMALL}
+                            />
+                        </div>
+                    : null}
+                </div>
+                ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
+            );
+        }
+        else return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className='chart-container'>
+                Selected rows of data from the incoming DataVizBox to display.
             </div>
-            ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
-        );
+        )
     }
 
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2