selected rows + colored bars + colored slices updating with getAnchor / restoreView

3 files changed, 26 insertions, 24 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e08c55197..a92fc1eb9 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,7 +1,7 @@
 import { action, computed, ObservableMap, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, StrListCast } from '../../../../fields/Doc';
+import { Doc, Field, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { Cast, CsvCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
@@ -71,10 +71,10 @@ 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.selected = Field.Copy(data.selected);
+        this.layoutDoc.histogramBarColors = Field.Copy(data.histogramBarColors);
         this.layoutDoc.defaultHistogramColor = data.defaultHistogramColor;
-        this.layoutDoc.pieSliceColors = data.pieSliceColors;
+        this.layoutDoc.pieSliceColors = Field.Copy(data.pieSliceColors);
         Object.keys(this.layoutDoc).map(key => {
             if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ this.layoutDoc['_'+key] = data[key]; }
         })
@@ -99,10 +99,10 @@ 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.selected = Field.Copy(this.layoutDoc.selected);
+        anchor.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
         anchor.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
-        anchor.pieSliceColors = this.layoutDoc.pieSliceColors;
+        anchor.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
         Object.keys(this.layoutDoc).map(key => {
             if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ anchor[key] = this.layoutDoc[key]; }
         })
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index b574a0062..02f1ddbbb 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -394,21 +394,11 @@ export class Histogram extends React.Component<HistogramProps> {
     @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;
 
         const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec("string"), null);
-        barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each)) });
+        barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1) });
         barColors.push(StrCast(barName + '::' + color));
     };
-    
-    @action changeDefaultColor = (color: string) => {
-        const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
-            if (this.props.layoutDoc['histogramBarColors-'+d[0]]) return false;
-            else return true;
-        })
-        defaultColorBars.attr("fill", color);
-        this.props.layoutDoc.defaultHistogramColor = color;
-    };
 
     render() {
         var curSelectedBarName;
@@ -451,7 +441,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
                         selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
-                        setSelectedColor={color => this.changeDefaultColor(color)}
+                        setSelectedColor={color => this.props.layoutDoc.defaultHistogramColor = color}
                         size={Size.XSMALL}
                     />
                     &nbsp;
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index f3a72a53b..8fdead3d7 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.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";
@@ -14,6 +14,7 @@ import { List } from "../../../../../fields/List";
 import './Chart.scss';
 import { ColorPicker, EditableText, Size, Type } from "browndash-components";
 import { FaFillDrip } from "react-icons/fa";
+import { listSpec } from "../../../../../fields/Schema";
 
 export interface PieChartProps {
     rootDoc: Doc;
@@ -180,7 +181,7 @@ export class PieChart extends React.Component<PieChartProps> {
             title: 'piechart 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;
     };
 
@@ -327,7 +328,10 @@ export class PieChart extends React.Component<PieChartProps> {
                     trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
                 }
                 var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
-                return this.props.layoutDoc['pieSliceColors-'+accessByName]? StrCast(this.props.layoutDoc['pieSliceColors-'+accessByName]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+                var sliceColor;
+                var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+                sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
+                return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
                 .attr("class", selected? 
                 function(d) {
                     return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice';
@@ -364,7 +368,10 @@ export class PieChart extends React.Component<PieChartProps> {
     @action changeSelectedColor = (color: string) => {
         this.curSliceSelected.attr("fill", color);
         var sliceName = this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')
-        this.props.layoutDoc['pieSliceColors-'+sliceName] = color;
+        
+        const sliceColors = Cast(this.props.layoutDoc.pieSliceColors, listSpec("string"), null);
+        sliceColors.map(each => { if (each.split('::')[0] == sliceName) sliceColors.splice(sliceColors.indexOf(each), 1) });
+        sliceColors.push(StrCast(sliceName + '::' + color));
     };
 
     render() {
@@ -373,6 +380,7 @@ export class PieChart extends React.Component<PieChartProps> {
         if (this.props.axes.length==2) titleAccessor = 'pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1];
         else if (this.props.axes.length>0) titleAccessor = 'pieChart-title-'+this.props.axes[0];
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
+        if (!this.props.layoutDoc.pieSliceColors) this.props.layoutDoc.pieSliceColors = new List<string>();
         var selected: string;
         var curSelectedSliceName;
         if (this._currSelected){
@@ -385,6 +393,10 @@ export class PieChart extends React.Component<PieChartProps> {
             selected += ' }';
         }
         else selected = 'none';
+        var selectedSliceColor;
+        var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+        sliceColors.map(each => {if (each[0]==curSelectedSliceName!) selectedSliceColor = each[1]});
+
         return (
             this.props.axes.length >= 1 ? (
             <div className="chart-container">
@@ -405,7 +417,7 @@ export class PieChart extends React.Component<PieChartProps> {
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName]? this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName] : this.curSliceSelected.attr("fill")}
+                            selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />