diff options
4 files changed, 42 insertions, 12 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index 808300c2c..5945840b5 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -8,6 +8,13 @@ .graph{ overflow: visible; } + .graph-title{ + align-items: center; + font-size: larger; + } + .selected-data{ + align-items: center; + } .slice { &.hover { stroke: black; @@ -56,8 +63,4 @@ // change the color of the circle element to be red fill: red; } - - .selected-data{ - text-align: center; - } } diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index c9cd49aa1..479f6584c 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -66,6 +66,14 @@ 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(){ + 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 + " Histogram"; + } + else return ax1 + " by " + ax0 + " Histogram"; + } @computed get incomingLinks() { return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links .filter(link => { @@ -416,8 +424,10 @@ export class Histogram extends React.Component<HistogramProps> { else selected = 'none'; return ( this.props.axes.length >= 1 ? ( - <div ref={this._histogramRef} className="chart-container"> - <span className={'selected-data'}> {`Selected: ${selected}`}</span> + <div className="chart-container" > + <div className="graph-title"> {this.graphTitle} </div> + <div className={'selected-data'}> {`Selected: ${selected}`}</div> + <div ref={this._histogramRef} /> </div> ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> ); diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index 91baf095d..da79df476 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -53,6 +53,9 @@ export class LineChart extends React.Component<LineChartProps> { .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(){ + return this.props.axes[1] + " vs. " + this.props.axes[0] + " Line Chart"; + } @computed get incomingLinks() { return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links .filter(link => { @@ -338,9 +341,13 @@ export class LineChart extends React.Component<LineChartProps> { render() { const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none'; return ( - <div ref={this._lineChartRef} className="chart-container"> - <span className={'selected-data'}> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span> + this.props.axes.length >= 2 ? ( + <div className="chart-container" > + <div className="graph-title"> {this.graphTitle} </div> + <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div> + <div ref={this._lineChartRef} /> </div> + ) : <span className="chart-container"> {'first use table view to select two axes to plot'}</span> ); } } diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index cead40d92..27653b847 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -53,7 +53,7 @@ export class PieChart extends React.Component<PieChartProps> { var ax0 = this.props.axes[0]; var ax1 = this.props.axes[1]; - if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false;} + if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false; } return this.props.pairs ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select')))) .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) })) @@ -63,6 +63,14 @@ export class PieChart extends React.Component<PieChartProps> { .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(){ + 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 + " Pie Chart"; + } + else return ax1 + " by " + ax0 + " Pie Chart"; + } @computed get incomingLinks() { return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links .filter(link => { @@ -333,7 +341,7 @@ export class PieChart extends React.Component<PieChartProps> { .append("g") arcs.append("path") .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] }) - .attr("class", `${pieDataSet[0][percentField]} slice`) + .attr("class", 'slice') .attr("d", arc) .on('click', onPointClick) arcs.append("text") @@ -373,8 +381,10 @@ export class PieChart extends React.Component<PieChartProps> { else selected = 'none'; return ( this.props.axes.length >= 1 ? ( - <div ref={this._piechartRef} className="chart-container"> - <span className={'selected-data'}> {`Selected: ${selected}`}</span> + <div className="chart-container"> + <div className="graph-title"> {this.graphTitle} </div> + <div className={'selected-data'}> {`Selected: ${selected}`}</div> + <div ref={this._piechartRef} /> </div> ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> ); |