diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/Histogram.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Histogram.tsx | 94 |
1 files changed, 51 insertions, 43 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 |