1 files changed, 45 insertions, 1 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index fdde29c81..998636a42 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -14,6 +14,8 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
+import { ColorPicker, Size, Type } from "browndash-components";
+import { FaFillDrip } from "react-icons/fa";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -41,6 +43,9 @@ export class Histogram extends React.Component<HistogramProps> {
     private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
     @observable _currSelected: any | undefined = undefined;
+    private curBarSelected: any = undefined;
+    private barColors: any = {};
+    private defaultBarColor: string = '#69b3a2';
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -381,6 +386,11 @@ export class Histogram extends React.Component<HistogramProps> {
                 elements[i].classList.remove('hover');
             }
             if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover');
+            if (sameAsCurrent!) this.curBarSelected = undefined;
+            else {
+                selected.attr('class', 'histogram-bar hover')
+                this.curBarSelected = selected;
+            }
         });
         svg.on('click', onPointClick);
 
@@ -415,6 +425,20 @@ export class Histogram extends React.Component<HistogramProps> {
                         return height - y(d.length)})
               .attr("width", eachRectWidth)
               .attr("class", 'histogram-bar')
+              .attr("fill", (d)=>{ return this.barColors[d[0]]? this.barColors[d[0]] : this.defaultBarColor})
+    };
+
+    @action changeSelectedColor = (color: string) => {
+        this.curBarSelected.attr("fill", color);
+        this.barColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
+    };
+    @action changeDefaultColor = (color: string) => {
+        const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
+            if (this.barColors[d[0]]) return false;
+            else return true;
+        })
+        defaultColorBars.attr("fill", color);
+        this.defaultBarColor = color;
     };
 
     render() {
@@ -433,7 +457,27 @@ export class Histogram extends React.Component<HistogramProps> {
             this.props.axes.length >= 1 ? (
             <div className="chart-container" >
                 <div className="graph-title"> {this.graphTitle} </div>
-                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                <ColorPicker
+                    tooltip={'Change Default Slice Color'} 
+                    type={Type.SEC} 
+                    icon={<FaFillDrip/>}
+                    selectedColor={this.defaultBarColor}
+                    setSelectedColor={color => this.changeDefaultColor(color)}
+                    size={Size.XSMALL}
+                />
+                {selected != 'none' ? 
+                    <div className={'selected-data'}>
+                        Selected: {selected}
+                        <ColorPicker
+                            tooltip={'Change Slice Color'} 
+                            type={Type.SEC} 
+                            icon={<FaFillDrip/>}
+                            selectedColor={this.curBarSelected.attr("fill")}
+                            setSelectedColor={color => this.changeSelectedColor(color)}
+                            size={Size.XSMALL}
+                        />
+                    </div>
+                : null}
                 <div ref={this._histogramRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>