ability to revert histogram bar colors

2 files changed, 44 insertions, 18 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 80586d7c7..e08c55197 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -71,12 +71,14 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     restoreView = (data: Doc) => {
         const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
         const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
+        // this.layoutDoc.selected = data.selected;
+        // this.layoutDoc.histogramBarColors = data.histogramBarColors;
+        this.layoutDoc.defaultHistogramColor = data.defaultHistogramColor;
+        this.layoutDoc.pieSliceColors = data.pieSliceColors;
         Object.keys(this.layoutDoc).map(key => {
-            if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
-                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){
-                    this.layoutDoc['_'+key] = data[key];
-                }
+            if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ this.layoutDoc['_'+key] = data[key]; }
         })
+
         const func = () => this._chartRenderer?.restoreView(data);
         if (changedView || changedAxes) {
             setTimeout(func, 100);
@@ -97,11 +99,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         anchor.presDataVizView = this.dataVizView;
         anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
+        // anchor.selected = this.layoutDoc.selected;
+        // anchor.histogramBarColors = this.layoutDoc.histogramBarColors;
+        anchor.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
+        anchor.pieSliceColors = this.layoutDoc.pieSliceColors;
         Object.keys(this.layoutDoc).map(key => {
-            if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
-                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){
-                    anchor[key] = this.layoutDoc[key];
-                }
+            if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ anchor[key] = this.layoutDoc[key]; }
         })
 
         this.addDocument(anchor);
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 1077df844..b574a0062 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
 import { LinkManager } from "../../../../util/LinkManager";
-import { DocCast, StrCast} from "../../../../../fields/Types";
+import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
 import { DataVizBox } from "../DataVizBox";
@@ -12,8 +12,10 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import { ColorPicker, EditableText, Size, Type } from "browndash-components";
+import { ColorPicker, EditableText, IconButton, Size, Type } from "browndash-components";
 import { FaFillDrip } from "react-icons/fa";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { listSpec } from "../../../../../fields/Schema";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -183,7 +185,7 @@ export class Histogram extends React.Component<HistogramProps> {
             title: 'histogram doc selection' + this._currSelected,
         });
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc);
-        anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined;
+        // anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined;
         return anchor;
     };
 
@@ -303,7 +305,7 @@ export class Histogram extends React.Component<HistogramProps> {
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
                     : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
@@ -382,13 +384,21 @@ export class Histogram extends React.Component<HistogramProps> {
                     function(d) {
                         return (selected && selected[0]==d[0])? 'histogram-bar hover' : 'histogram-bar';
                     }: function(d) {return 'histogram-bar'})
-              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
+              .attr("fill", (d)=>{ 
+                var barColor;
+                var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+                barColors.map(each => {if (each[0]==StrCast(d[0])) barColor = each[1]});
+                return barColor? StrCast(barColor) : StrCast(this.props.layoutDoc.defaultHistogramColor)})
     };
 
     @action changeSelectedColor = (color: string) => {
         this.curBarSelected.attr("fill", color);
         var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
-        this.props.layoutDoc['histogramBarColors-'+barName] = color;
+        // this.props.layoutDoc['histogramBarColors-'+barName] = color;
+
+        const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec("string"), null);
+        barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each)) });
+        barColors.push(StrCast(barName + '::' + color));
     };
     
     @action changeDefaultColor = (color: string) => {
@@ -397,7 +407,7 @@ export class Histogram extends React.Component<HistogramProps> {
             else return true;
         })
         defaultColorBars.attr("fill", color);
-        this.props.layoutDoc['defaultHistogramColor'] = color;
+        this.props.layoutDoc.defaultHistogramColor = color;
     };
 
     render() {
@@ -406,7 +416,8 @@ export class Histogram extends React.Component<HistogramProps> {
         if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1];
         else if (this.props.axes.length>0) titleAccessor = '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.defaultHistogramColor) this.props.layoutDoc.defaultHistogramColor = '#69b3a2';
+        if (!this.props.layoutDoc.histogramBarColors) this.props.layoutDoc.histogramBarColors = new List<string>();
         var selected: string;
         if (this._currSelected){
             curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
@@ -418,6 +429,9 @@ export class Histogram extends React.Component<HistogramProps> {
             selected += ' }';
         }
         else selected = 'none';
+        var selectedBarColor;
+        var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+        barColors.map(each => {if (each[0]==curSelectedBarName!) selectedBarColor = each[1]});
 
         this.componentDidMount();
         return (
@@ -436,10 +450,19 @@ export class Histogram extends React.Component<HistogramProps> {
                         tooltip={'Change Default Bar Color'} 
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
-                        selectedColor={StrCast(this.props.layoutDoc['defaultHistogramColor'])}
+                        selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
                         setSelectedColor={color => this.changeDefaultColor(color)}
                         size={Size.XSMALL}
                     />
+                    &nbsp;
+                    <IconButton
+                        icon={<FontAwesomeIcon icon={'eraser'} />} 
+                        size={Size.XSMALL} 
+                        color={'black'} 
+                        type={Type.SEC}
+                        tooltip={'Revert all bars to the default color'}
+                        onClick={action(() => {this.props.layoutDoc.histogramBarColors = new List<string>()})}
+                    />
                 </div>
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
@@ -449,7 +472,7 @@ export class Histogram extends React.Component<HistogramProps> {
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={this.props.layoutDoc['histogramBarColors-'+curSelectedBarName]? this.props.layoutDoc['histogramBarColors-'+curSelectedBarName] : this.curBarSelected.attr("fill")}
+                            selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />