diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Histogram.tsx | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 479f6584c..fdde29c81 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -252,14 +252,14 @@ export class Histogram extends React.Component<HistogramProps> { var data = this.data(dataSet); + var xAxisTitle = Object.keys(dataSet[0])[0] + var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency'; let uniqueArr: unknown[] = [...new Set(data)] - var numBins = this.numericalXData? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length + var numBins = (this.numericalXData && Number.isInteger(data[0][xAxisTitle]))? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length var translateXAxis = !this.numericalXData || numBins<this.maxBins ? width/(numBins+1)/2 : 0; if (numBins>this.maxBins) numBins = this.maxBins; var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0; var endingPoint = this.numericalXData? this.rangeVals.xMax! : numBins; - var xAxisTitle = Object.keys(dataSet[0])[0] - var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency'; var histDataSet = dataSet.filter((d: { [x: string]: unknown; }) => { var valid = true; Object.keys(dataSet[0]).map(key => { @@ -351,15 +351,22 @@ export class Histogram extends React.Component<HistogramProps> { svg.append("g") .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) => { - var left = this.numericalXData? d.x0-1: d.x0; - var right = (this.numericalXData && d.x0!=d.x1)? d.x1-1: d.x1; - if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth)){ - var showSelected = this.numericalYData? this.props.pairs.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0] : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0]; + barCounter++; + if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){ + var showSelected = this.numericalYData? this.props.pairs.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]) |