Merge branch 'master' of https://github.com/brown-dash/Dash-Web into joanne-tutorialagent

3 files changed, 17 insertions, 20 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index a7c4a00b0..f51683991 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -413,6 +413,10 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         });
     };
 
+    setChartRef = (r: HTMLDivElement | null) => {
+        this._histogramRef = r;
+        r && this.drawChart(this._histogramData, this.width, this.height);
+    };
     render() {
         if (!this.selectedBins) this.layoutDoc.dataViz_histogram_selectedBins = new List<string>();
 
@@ -446,12 +450,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                             size={Size.XSMALL}
                         />
                     </div>
-                    <div
-                        ref={r => {
-                            this._histogramRef = r;
-                            r && this.drawChart(this._histogramData, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setChartRef} />
                     {selected !== 'none' ? (
                         <div className="selected-data">
                             Selected: {selected}
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 80fadf178..732681e05 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -347,6 +347,10 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             .style('pointer-events', 'none')
             .style('transform', `translate(${xScale(d0.x) - this.width}px,${yScale(d0.y)}px)`);
     }
+    setLineRef = (r: HTMLDivElement | null) => {
+        this._lineChartRef = r;
+        this.drawChart([this._lineChartData], this.rangeVals, this.width, this.height);
+    };
 
     render() {
         const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none';
@@ -378,12 +382,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                             fillWidth
                         />
                     </div>
-                    <div
-                        ref={r => {
-                            this._lineChartRef = r;
-                            this.drawChart([this._lineChartData], this.rangeVals, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setLineRef} />
                     {selectedPt !== 'none' ? (
                         <div className="selected-data">
                             {`Selected: ${selectedPt}`}
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 0ae70786f..cf476b8d0 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -373,10 +373,10 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         const sliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/%/g, '').replace(/#/g, '').replace(/</g, '') : sliceTitle;
 
         const sliceColors = Cast(this._props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null);
-        sliceColors.forEach(each => {
+        sliceColors?.forEach(each => {
             if (each.split('::')[0] === sliceName) sliceColors.splice(sliceColors.indexOf(each), 1);
         });
-        sliceColors.push(StrCast(sliceName + '::' + color));
+        sliceColors?.push(StrCast(sliceName + '::' + color));
     };
 
     @action changeHistogramCheckBox = () => {
@@ -384,6 +384,10 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         this.drawChart(this._pieChartData, this.width, this.height);
     };
 
+    setChartRef = (r: HTMLDivElement | null) => {
+        this._piechartRef = r;
+        this.drawChart(this._pieChartData, this.width, this.height);
+    };
     render() {
         let titleAccessor = 'dataViz_pie_title';
         if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
@@ -443,12 +447,7 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
                             Organize data as histogram
                         </div>
                     ) : null}
-                    <div
-                        ref={r => {
-                            this._piechartRef = r;
-                            this.drawChart(this._pieChartData, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setChartRef} />
                     {selected !== 'none' ? (
                         <div className="selected-data">
                             Selected: {selected}