things save: editable title for all 3 + color for histogram

1 files changed, 21 insertions, 16 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 64e61fca8..740ee6e3a 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -1,10 +1,10 @@
 import { observer } from "mobx-react";
-import { Doc, DocListCast } from "../../../../../fields/Doc";
+import { Doc, DocListCast, FieldResult } from "../../../../../fields/Doc";
 import * as React from 'react';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
 import { LinkManager } from "../../../../util/LinkManager";
-import { Cast, DocCast} from "../../../../../fields/Types";
+import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
 import { DataPoint, SelectedDataPoint } from "./LineChart";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
@@ -19,6 +19,7 @@ import { FaFillDrip } from "react-icons/fa";
 
 export interface HistogramProps {
     rootDoc: Doc;
+    layoutDoc: Doc;
     axes: string[];
     pairs: { [key: string]: any }[];
     width: number;
@@ -44,9 +45,6 @@ export class Histogram extends React.Component<HistogramProps> {
     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';
-    @observable graphTitle: string = this.defaultGraphTitle;
     // 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() {
@@ -75,7 +73,7 @@ export class Histogram extends React.Component<HistogramProps> {
     @computed get defaultGraphTitle(){
         var ax0 = this.props.axes[0];
         var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
-        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
+        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1 || !this.numericalYData){
             return ax0 + " Histogram";
         }
         else return ax1 + " by " + ax0 + " Histogram";
@@ -285,8 +283,8 @@ export class Histogram extends React.Component<HistogramProps> {
                     histStringDataSet.push({[yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i]})
                 }
                 for (let i=0; i<data.length; i++){
-                    let sliceData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
-                    sliceData[0][yAxisTitle] = sliceData[0][yAxisTitle] + 1;
+                    let barData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
+                    barData[0][yAxisTitle] = barData[0][yAxisTitle] + 1;
                 }
             }
             histDataSet = histStringDataSet
@@ -426,27 +424,33 @@ 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})
+              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : this.props.layoutDoc.defaultHistogramColor? StrCast(this.props.layoutDoc.defaultHistogramColor): '#69b3a2'})
     };
 
     @action changeSelectedColor = (color: string) => {
         this.curBarSelected.attr("fill", color);
-        this.barColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
+        var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
+        this.props.layoutDoc['histogramBarColors-'+barName] = color;
     };
     
     @action changeDefaultColor = (color: string) => {
         const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
-            if (this.barColors[d[0]]) return false;
+            if (this.props.layoutDoc['histogramBarColors-'+d[0]]) return false;
             else return true;
         })
         defaultColorBars.attr("fill", color);
-        this.defaultBarColor = color;
+        this.props.layoutDoc.defaultHistogramColor = color;
     };
 
     render() {
-        const title = this.graphTitle;
+        var curSelectedBarName;
+        var titleAccessor: any='';
+        if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
+        else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]]);
+        const title = titleAccessor? titleAccessor : this.defaultGraphTitle;
         var selected: string;
         if (this._currSelected){
+            curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
             selected = '{ ';
             Object.keys(this._currSelected).map(key => {
                 key!=''? selected += key + ': ' + this._currSelected[key] + ', ': '';
@@ -461,7 +465,8 @@ export class Histogram extends React.Component<HistogramProps> {
                 <div className="graph-title"> 
                     <EditableText
                         val={title}
-                        setVal={action(val => this.graphTitle = val as string)}
+                        setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['histogram-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string
+                            : this.props.layoutDoc['histogram-title-'+this.props.axes[0]] = val as string})}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
@@ -471,7 +476,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         tooltip={'Change Default Bar Color'} 
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
-                        selectedColor={this.defaultBarColor}
+                        selectedColor={this.props.layoutDoc.defaultHistogramColor? StrCast(this.props.layoutDoc.defaultHistogramColor): '#69b3a2'}
                         setSelectedColor={color => this.changeDefaultColor(color)}
                         size={Size.XSMALL}
                     />
@@ -484,7 +489,7 @@ export class Histogram extends React.Component<HistogramProps> {
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={this.curBarSelected.attr("fill")}
+                            selectedColor={this.props.layoutDoc['histogramBarColors-'+curSelectedBarName]? this.props.layoutDoc['histogramBarColors-'+curSelectedBarName] : this.curBarSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />