color ui fix + editable titles

1 files changed, 30 insertions, 11 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 998636a42..6d0a8bf75 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -14,7 +14,7 @@ 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 { ColorPicker, EditableText, Size, Type } from "browndash-components";
 import { FaFillDrip } from "react-icons/fa";
 
 export interface HistogramProps {
@@ -46,6 +46,7 @@ export class Histogram extends React.Component<HistogramProps> {
     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() {
@@ -71,7 +72,7 @@ export class Histogram extends React.Component<HistogramProps> {
             .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))
             .sort((a, b) => (a.x < b.x ? -1 : 1));
     }
-    @computed get graphTitle(){
+    @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){
@@ -432,6 +433,7 @@ export class Histogram extends React.Component<HistogramProps> {
         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;
@@ -441,6 +443,19 @@ export class Histogram extends React.Component<HistogramProps> {
         this.defaultBarColor = color;
     };
 
+    @computed get editableTitle() {
+        const title = this.graphTitle;
+        return (
+            <EditableText
+                val={title}
+                setVal={action(val => this.graphTitle = val as string)}
+                color={"black"}
+                size={Size.LARGE}
+                fillWidth
+            />
+        );
+    }
+
     render() {
         
         var selected: string;
@@ -456,18 +471,22 @@ export class Histogram extends React.Component<HistogramProps> {
         return (
             this.props.axes.length >= 1 ? (
             <div className="chart-container" >
-                <div className="graph-title"> {this.graphTitle} </div>
-                <ColorPicker
-                    tooltip={'Change Default Slice Color'} 
-                    type={Type.SEC} 
-                    icon={<FaFillDrip/>}
-                    selectedColor={this.defaultBarColor}
-                    setSelectedColor={color => this.changeDefaultColor(color)}
-                    size={Size.XSMALL}
-                />
+                <div className="graph-title"> 
+                    {this.editableTitle} 
+                    &nbsp; &nbsp; 
+                    <ColorPicker
+                        tooltip={'Change Default Bar Color'} 
+                        type={Type.SEC} 
+                        icon={<FaFillDrip/>}
+                        selectedColor={this.defaultBarColor}
+                        setSelectedColor={color => this.changeDefaultColor(color)}
+                        size={Size.XSMALL}
+                    />
+                </div>
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
                         Selected: {selected}
+                        &nbsp; &nbsp;
                         <ColorPicker
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC}