diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Histogram.tsx | 81 |
1 files changed, 52 insertions, 29 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index cb882cf4a..092718e17 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -46,6 +46,7 @@ export class Histogram extends React.Component<HistogramProps> { @observable _currSelected: any | undefined = undefined; private curBarSelected: any = undefined; private selectedData: any = undefined; + private hoverOverData: any = undefined; // 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() { @@ -214,6 +215,39 @@ export class Histogram extends React.Component<HistogramProps> { return data; } + highlightSelectedBar = (changeSelectedVariables: boolean, svg: any, eachRectWidth: any, pointerX: any, xAxisTitle: any, yAxisTitle: any, histDataSet: any) => { + var sameAsCurrent: boolean; + var barCounter = -1; + const selected = svg.selectAll('.histogram-bar').filter((d: any) => { + barCounter++; + if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){ + var showSelected = this.numericalYData? this._histogramData.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0] + : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0]; + if (this.numericalXData){ + if (d[0] && d[1] && d[0]!=d[1]){ + showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length} + } + else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length} + } + if (changeSelectedVariables){ + sameAsCurrent = this._currSelected? + (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] + && showSelected[yAxisTitle]==this._currSelected![yAxisTitle]) + : false; + this._currSelected = sameAsCurrent? undefined: showSelected; + this.selectedData = sameAsCurrent? undefined: d; + } + else this.hoverOverData = d; + return true + } + return false; + }); + if (changeSelectedVariables){ + if (sameAsCurrent!) this.curBarSelected = undefined; + else this.curBarSelected = selected; + } + } + drawChart = (dataSet: any, width: number, height: number) => { d3.select(this._histogramRef.current).select('svg').remove(); d3.select(this._histogramRef.current).select('.tooltip').remove(); @@ -320,35 +354,24 @@ export class Histogram extends React.Component<HistogramProps> { .attr("transform", "translate(" + translateXAxis + ", " + height + ")") .call(xAxis) - const onPointClick = action((e: any) => { - var pointerX = d3.pointer(e)[0]; - var sameAsCurrent: boolean; - var barCounter = -1; - const selected = svg.selectAll('.histogram-bar').filter((d: any) => { - barCounter++; - if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){ - var showSelected = this.numericalYData? this._histogramData.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0] - : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0]; - if (this.numericalXData){ - if (d[0] && d[1] && d[0]!=d[1]){ - showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length} - } - else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length} - } - sameAsCurrent = this._currSelected? - (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] - && showSelected[yAxisTitle]==this._currSelected![yAxisTitle]) - : false; - this._currSelected = sameAsCurrent? undefined: showSelected; - this.selectedData = sameAsCurrent? undefined: d; - return true - } - return false; - }); - if (sameAsCurrent!) this.curBarSelected = undefined; - else this.curBarSelected = selected; - }); - svg.on('click', onPointClick); + const onPointClick = action((e: any) => this.highlightSelectedBar(true, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet)); + const onHover = action((e: any) => { + const selected = this.highlightSelectedBar(false, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet) + updateHighlights(); + }) + const mouseOut = action((e: any) => { + this.hoverOverData = undefined; + updateHighlights(); + }) + const updateHighlights = () => { + const hoverOverBar = this.hoverOverData; + const selectedData = this.selectedData; + svg.selectAll('rect').attr("class", function(d) { return ((hoverOverBar && hoverOverBar[0]==d[0]) || selectedData && selectedData[0]==d[0])? 'histogram-bar hover' : 'histogram-bar'; }) + } + + svg.on('click', onPointClick) + .on('mouseover', onHover) + .on('mouseout', mouseOut) var selected = this.selectedData; svg.append("text") |