diff options
3 files changed, 111 insertions, 87 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index df713c462..df6aac6bc 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -263,7 +263,7 @@ export class Histogram extends React.Component<HistogramProps> { eachRectWidth = width/(bins.length) bins.forEach(d => d.x0 = d.x0!) xAxis = d3.axisBottom(x) - .ticks(bins.length-1) + .ticks(bins.length>1? bins.length-1: 1) .tickFormat( i => uniqueArr[i.valueOf()] as string) .tickPadding(10) x.range([0, width-eachRectWidth]) @@ -428,54 +428,62 @@ export class Histogram extends React.Component<HistogramProps> { barColors.map(each => {if (each[0]==curSelectedBarName!) selectedBarColor = each[1]}); this.componentDidMount(); - return ( - this.props.axes.length >= 1 ? ( - <div className="chart-container" > - <div className="graph-title"> - <EditableText - val={StrCast(this.props.layoutDoc[titleAccessor])} - setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")} - color={"black"} - size={Size.LARGE} - fillWidth - /> - - <ColorPicker - tooltip={'Change Default Bar Color'} - type={Type.SEC} - icon={<FaFillDrip/>} - selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)} - setSelectedColor={undoable (color => this.props.layoutDoc.defaultHistogramColor = color, "Change Default Bar Color")} - size={Size.XSMALL} - /> - </div> - <div ref={this._histogramRef} /> - {selected != 'none' ? - <div className={'selected-data'}> - Selected: {selected} - + + if (this._histogramData.length>0){ + return ( + this.props.axes.length >= 1 ? ( + <div className="chart-container" > + <div className="graph-title"> + <EditableText + val={StrCast(this.props.layoutDoc[titleAccessor])} + setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")} + color={"black"} + size={Size.LARGE} + fillWidth + /> + <ColorPicker - tooltip={'Change Bar Color'} + tooltip={'Change Default Bar Color'} type={Type.SEC} icon={<FaFillDrip/>} - selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")} - setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Bar Color")} + selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)} + setSelectedColor={undoable (color => this.props.layoutDoc.defaultHistogramColor = color, "Change Default Bar Color")} size={Size.XSMALL} /> - - <IconButton - icon={<FontAwesomeIcon icon={'eraser'} />} - size={Size.XSMALL} - color={'black'} - type={Type.SEC} - tooltip={'Revert to the default bar color'} - onClick={undoable (action(() => this.eraseSelectedColor()), "Change Selected Bar Color")} - /> </div> - : null} + <div ref={this._histogramRef} /> + {selected != 'none' ? + <div className={'selected-data'}> + Selected: {selected} + + <ColorPicker + tooltip={'Change Bar Color'} + type={Type.SEC} + icon={<FaFillDrip/>} + selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")} + setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Bar Color")} + size={Size.XSMALL} + /> + + <IconButton + icon={<FontAwesomeIcon icon={'eraser'} />} + size={Size.XSMALL} + color={'black'} + type={Type.SEC} + tooltip={'Revert to the default bar color'} + onClick={undoable (action(() => this.eraseSelectedColor()), "Change Selected Bar Color")} + /> + </div> + : null} + </div> + ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> + ); + } + else return ( + // when it is a brushed table and the incoming table doesn't have any rows selected + <div className='chart-container'> + Selected rows of data from the incoming DataVizBox to display. </div> - ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> - ); + ) } - }
\ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index d27aaafbc..8bace941f 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -358,24 +358,32 @@ export class LineChart extends React.Component<LineChartProps> { else if (this.props.axes.length>0) titleAccessor = 'lineChart-title-'+this.props.axes[0]; if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle; const selectedPt = this._currSelected ? `{ ${this.props.axes[0]}: ${this._currSelected.x} ${this.props.axes[1]}: ${this._currSelected.y} }` : 'none'; - return ( - this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? ( - <div className="chart-container" > - <div className="graph-title"> - <EditableText - val={StrCast(this.props.layoutDoc[titleAccessor])} - setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")} - color={"black"} - size={Size.LARGE} - fillWidth - /> + if (this._lineChartData.length>0){ + return ( + this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? ( + <div className="chart-container" > + <div className="graph-title"> + <EditableText + val={StrCast(this.props.layoutDoc[titleAccessor])} + setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")} + color={"black"} + size={Size.LARGE} + fillWidth + /> + </div> + <div ref={this._lineChartRef} /> + {selectedPt!='none'? + <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div> + : null} </div> - <div ref={this._lineChartRef} /> - {selectedPt!='none'? - <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div> - : null} + ) : <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span> + ); + } + else return ( + // when it is a brushed table and the incoming table doesn't have any rows selected + <div className='chart-container'> + Selected rows of data from the incoming DataVizBox to display. </div> - ) : <span className="chart-container"> {'first use table view to select two numerical 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 03c9efdd1..0c54d0a4e 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -337,36 +337,44 @@ export class PieChart extends React.Component<PieChartProps> { 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"> - <div className="graph-title"> - <EditableText - val={StrCast(this.props.layoutDoc[titleAccessor])} - setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")} - color={"black"} - size={Size.LARGE} - fillWidth - /> - </div> - <div ref={this._piechartRef} /> - {selected != 'none' ? - <div className={'selected-data'}> - Selected: {selected} - - <ColorPicker - tooltip={'Change Slice Color'} - type={Type.SEC} - icon={<FaFillDrip/>} - selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")} - setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Slice Color")} - size={Size.XSMALL} + if (this._piechartData.length>0){ + return ( + this.props.axes.length >= 1 ? ( + <div className="chart-container"> + <div className="graph-title"> + <EditableText + val={StrCast(this.props.layoutDoc[titleAccessor])} + setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")} + color={"black"} + size={Size.LARGE} + fillWidth /> </div> - : null} + <div ref={this._piechartRef} /> + {selected != 'none' ? + <div className={'selected-data'}> + Selected: {selected} + + <ColorPicker + tooltip={'Change Slice Color'} + type={Type.SEC} + icon={<FaFillDrip/>} + selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")} + setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Slice Color")} + size={Size.XSMALL} + /> + </div> + : null} + </div> + ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> + ); + } + else return ( + // when it is a brushed table and the incoming table doesn't have any rows selected + <div className='chart-container'> + Selected rows of data from the incoming DataVizBox to display. </div> - ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> - ); + ) } }
\ No newline at end of file |