1 files changed, 29 insertions, 3 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 27653b847..872bf9af1 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.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 PieChartProps {
     rootDoc: Doc;
@@ -39,6 +41,8 @@ export class PieChart extends React.Component<PieChartProps> {
     private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
     @observable _currSelected: any | undefined = undefined;
+    private curSliceSelected: any = undefined;
+    private sliceColors: any = {};
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -332,7 +336,11 @@ export class PieChart extends React.Component<PieChartProps> {
             for (let i = 0; i < elements.length; i++) {
                 elements[i].classList.remove('hover');
             }
-            if (!sameAsCurrent!) selected.attr('class', 'slice hover');
+            if (sameAsCurrent!) this.curSliceSelected = undefined;
+            else {
+                selected.attr('class', 'slice hover') 
+                this.curSliceSelected = selected;
+            }
         });
 
         var arcs = g.selectAll("arc")
@@ -340,7 +348,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .enter()
             .append("g")
         arcs.append("path")
-            .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+            .attr("fill", (data, i)=>{ return this.sliceColors[data.data.valueOf()]? this.sliceColors[data.data.valueOf()] : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
             .attr("class", 'slice')
             .attr("d", arc)
             .on('click', onPointClick)
@@ -368,7 +376,13 @@ export class PieChart extends React.Component<PieChartProps> {
 
     };
 
+    @action changeSelectedColor = (color: string) => {
+        this.curSliceSelected.attr("fill", color);
+        this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
+    };
+
     render() {
+        console.log(this.sliceColors)
         var selected: string;
         if (this._currSelected){
             selected = '{ ';
@@ -383,7 +397,19 @@ export class PieChart extends React.Component<PieChartProps> {
             this.props.axes.length >= 1 ? (
             <div className="chart-container">
                 <div className="graph-title"> {this.graphTitle} </div>
-                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                {selected != 'none' ? 
+                    <div className={'selected-data'}>
+                        Selected: {selected}
+                        <ColorPicker
+                            tooltip={'Change Slice Color'} 
+                            type={Type.SEC} 
+                            icon={<FaFillDrip/>}
+                            selectedColor={this.curSliceSelected.attr("fill")}
+                            setSelectedColor={color => this.changeSelectedColor(color)}
+                            size={Size.XSMALL}
+                        />
+                    </div>
+                : null}
                 <div ref={this._piechartRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>