1 files changed, 26 insertions, 2 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index da79df476..0142e96ad 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -6,7 +6,7 @@ import { Doc, DocListCast } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
 import { List } from '../../../../../fields/List';
 import { listSpec } from '../../../../../fields/Schema';
-import { Cast, DocCast } from '../../../../../fields/Types';
+import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
 import { DocumentManager } from '../../../../util/DocumentManager';
 import { LinkManager } from '../../../../util/LinkManager';
@@ -14,6 +14,7 @@ import { PinProps, PresBox } from '../../trails';
 import { DataVizBox } from '../DataVizBox';
 import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils';
 import './Chart.scss';
+import { EditableText, Size } from 'browndash-components';
 
 export interface DataPoint {
     x: number;
@@ -24,6 +25,7 @@ export interface SelectedDataPoint extends DataPoint {
 }
 export interface LineChartProps {
     rootDoc: Doc;
+    layoutDoc: Doc;
     axes: string[];
     pairs: { [key: string]: any }[];
     width: number;
@@ -185,6 +187,15 @@ export class LineChart extends React.Component<LineChartProps> {
         return this.props.width - this.props.margin.left - this.props.margin.right;
     }
 
+    @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){
+            return ax0 + " Line Chart";
+        }
+        else return ax1 + " by " + ax0 + " Line Chart";
+    } 
+
     setupTooltip() {
         return d3
             .select(this._lineChartRef.current)
@@ -339,11 +350,24 @@ export class LineChart extends React.Component<LineChartProps> {
     }
 
     render() {
+        var titleAccessor:any = '';
+        if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['lineChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
+        else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['lineChart-title-'+this.props.axes[0]]);
+        const title = titleAccessor? titleAccessor : this.defaultGraphTitle;
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
             this.props.axes.length >= 2 ? (
             <div className="chart-container" >
-                <div className="graph-title"> {this.graphTitle} </div>
+                <div className="graph-title"> 
+                    <EditableText
+                        val={title}
+                        setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['lineChart-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string
+                            : this.props.layoutDoc['lineChart-title-'+this.props.axes[0]] = val as string})}
+                        color={"black"}
+                        size={Size.LARGE}
+                        fillWidth
+                    />
+                </div>
                 <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
                 <div ref={this._lineChartRef} />
             </div>