1 files changed, 14 insertions, 13 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index b3bdccbbb..1eb57a323 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -107,6 +107,7 @@ export class Histogram extends React.Component<HistogramProps> {
             },
             { fireImmediately: true }
         );
+        if (!this.props.layoutDoc.dataViz_histogram) this.props.layoutDoc.dataViz_histogram = '';
     };
 
     @action
@@ -397,7 +398,7 @@ export class Histogram extends React.Component<HistogramProps> {
             )
             .attr('fill', d => {
                 var barColor;
-                var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+                var barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
                 barColors.map(each => {
                     if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1];
                     else {
@@ -405,7 +406,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         if (Number(range[0]) <= d[0] && d[0] <= Number(range[1])) barColor = each[1];
                     }
                 });
-                return barColor ? StrCast(barColor) : StrCast(this.props.layoutDoc.defaultHistogramColor);
+                return barColor ? StrCast(barColor) : StrCast(this.props.layoutDoc.dataViz_histogram_defaultColor);
             });
     };
 
@@ -413,7 +414,7 @@ export class Histogram extends React.Component<HistogramProps> {
         this.curBarSelected.attr('fill', color);
         var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
 
-        const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec('string'), null);
+        const barColors = Cast(this.props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
         barColors.map(each => {
             if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1);
         });
@@ -421,10 +422,10 @@ export class Histogram extends React.Component<HistogramProps> {
     };
 
     @action eraseSelectedColor = () => {
-        this.curBarSelected.attr('fill', this.props.layoutDoc.defaultHistogramColor);
+        this.curBarSelected.attr('fill', this.props.layoutDoc.dataViz_histogram_defaultColor);
         var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
 
-        const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec('string'), null);
+        const barColors = Cast(this.props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
         barColors.map(each => {
             if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1);
         });
@@ -434,11 +435,11 @@ export class Histogram extends React.Component<HistogramProps> {
         this._histogramData;
         var curSelectedBarName = '';
         var titleAccessor: any = '';
-        if (this.props.axes.length == 2) titleAccessor = 'dataViz_title_histogram_' + this.props.axes[0] + '-' + this.props.axes[1];
-        else if (this.props.axes.length > 0) titleAccessor = 'dataViz_title_histogram_' + this.props.axes[0];
+        if (this.props.axes.length == 2) titleAccessor = 'dataViz_histogram_title' + this.props.axes[0] + '-' + this.props.axes[1];
+        else if (this.props.axes.length > 0) titleAccessor = 'dataViz_histogram_title' + this.props.axes[0];
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
-        if (!this.props.layoutDoc.defaultHistogramColor) this.props.layoutDoc.defaultHistogramColor = '#69b3a2';
-        if (!this.props.layoutDoc.histogramBarColors) this.props.layoutDoc.histogramBarColors = new List<string>();
+        if (!this.props.layoutDoc.dataViz_histogram_defaultColor) this.props.layoutDoc.dataViz_histogram_defaultColor = '#69b3a2';
+        if (!this.props.layoutDoc.dataViz_histogram_barColors) this.props.layoutDoc.dataViz_histogram_barColors = new List<string>();
         var selected: string;
         if (this._currSelected) {
             curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
@@ -450,7 +451,7 @@ export class Histogram extends React.Component<HistogramProps> {
             selected += ' }';
         } else selected = 'none';
         var selectedBarColor;
-        var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+        var barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
         barColors.map(each => {
             if (each[0] == curSelectedBarName!) selectedBarColor = each[1];
         });
@@ -476,9 +477,9 @@ export class Histogram extends React.Component<HistogramProps> {
                             tooltip={'Change Default Bar Color'}
                             type={Type.SEC}
                             icon={<FaFillDrip />}
-                            selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
-                            setFinalColor={undoable(color => (this.props.layoutDoc.defaultHistogramColor = color), 'Change Default Bar Color')}
-                            setSelectedColor={undoable(color => (this.props.layoutDoc.defaultHistogramColor = color), 'Change Default Bar Color')}
+                            selectedColor={StrCast(this.props.layoutDoc.dataViz_histogram_defaultColor)}
+                            setFinalColor={undoable(color => (this.props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')}
+                            setSelectedColor={undoable(color => (this.props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')}
                             size={Size.XSMALL}
                         />
                     </div>