diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Histogram.tsx | 38 |
1 files changed, 17 insertions, 21 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 5fbe92563..7b9eba1cd 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -37,7 +37,6 @@ export class Histogram extends React.Component<HistogramProps> { private _disposers: { [key: string]: IReactionDisposer } = {}; private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef(); private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined; - private numericalData: boolean = false; private numericalXData: boolean = false; // whether the data is organized by numbers rather than categoreis private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency private maxBins = 15; // maximum number of bins that is readable on a normal sized doc @@ -261,19 +260,19 @@ export class Histogram extends React.Component<HistogramProps> { return valid; }); if (!this.numericalXData) { - var histStringDataSet: { frequency: any, label: any }[] = []; + var histStringDataSet: { [x: string]: unknown; }[] = []; if (this.numericalYData){ for (let i=0; i<dataSet.length; i++){ - histStringDataSet.push({frequency: dataSet[i][yAxisTitle], label: dataSet[i][xAxisTitle]}) + histStringDataSet.push({[yAxisTitle]: dataSet[i][yAxisTitle], [xAxisTitle]: dataSet[i][xAxisTitle]}) } } else{ for (let i=0; i<uniqueArr.length; i++){ - histStringDataSet.push({frequency: 0, label: uniqueArr[i]}) + histStringDataSet.push({[yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i]}) } for (let i=0; i<data.length; i++){ - let sliceData = histStringDataSet.filter(each => each.label==data[i]) - sliceData[0].frequency = sliceData[0].frequency + 1; + let sliceData = histStringDataSet.filter(each => each[xAxisTitle]==data[i]) + sliceData[0][yAxisTitle] = sliceData[0][yAxisTitle] + 1; } } histDataSet = histStringDataSet @@ -331,7 +330,7 @@ export class Histogram extends React.Component<HistogramProps> { xAxis = d3.axisBottom(x) .ticks(numBins-1) } - const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) {return d.frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')}) + const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')}) : d3.max(bins, function(d) { return d.length; }) var y = d3.scaleLinear() @@ -347,16 +346,13 @@ export class Histogram extends React.Component<HistogramProps> { const onPointClick = action((e: any) => { var pointerX = d3.pointer(e)[0]; - var index = -1; var sameAsCurrent: boolean; const selected = svg.selectAll('.histogram-bar').filter((d: any) => { - index++; - var left = this.numericalData? d.x0-1: d.x0; - var right = (this.numericalData && d.x0!=d.x1)? d.x1-1: d.x1; - if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth )){ - var showSelected = histDataSet[index] - var selectedDisplay = {[xAxisTitle]: showSelected.label, [yAxisTitle]: showSelected.frequency} - // showSelected['frequency'] = d.length; + 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 = histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0]; + var selectedDisplay = {[xAxisTitle]: showSelected[xAxisTitle], [yAxisTitle]: this.numericalXData? d.length : showSelected[yAxisTitle]} sameAsCurrent = this._currSelected? (selectedDisplay[xAxisTitle]==this._currSelected![xAxisTitle] && selectedDisplay[yAxisTitle]==this._currSelected![yAxisTitle]) @@ -366,7 +362,6 @@ export class Histogram extends React.Component<HistogramProps> { } return false; }); - // selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover') const elements = document.querySelectorAll('.histogram-bar'); for (let i = 0; i < elements.length; i++) { elements[i].classList.remove('hover'); @@ -392,17 +387,18 @@ export class Histogram extends React.Component<HistogramProps> { .append("rect") .attr("transform", this.numericalYData? function (d) { - var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) - var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''); + var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) + var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''); return "translate(" + x(d.x0!) + "," + y(length) + ")"; } : function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; }) .attr("height", this.numericalYData? function(d) { - var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) - var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''); + var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) + var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''); return height-y(length)} - : function(d) { return height - y(d.length)}) + : function(d) { + return height - y(d.length)}) .attr("width", eachRectWidth) .attr("class", 'histogram-bar') }; |