diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/PieChart.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/PieChart.tsx | 32 |
1 files changed, 25 insertions, 7 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index 0d3c74c32..6241e6221 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -38,7 +38,7 @@ export class PieChart extends React.Component<PieChartProps> { private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef(); private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined; private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios - @observable _currSelected: SelectedDataPoint | undefined = undefined; + @observable _currSelected: any | undefined = 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 _piechartData() { @@ -284,8 +284,8 @@ export class PieChart extends React.Component<PieChartProps> { const onPointClick = action((e: any) => { // check the 4 'corners' of each slice and see if the pointer is within those bounds to get the slice the user clicked on const pointer = d3.pointer(e); - var selectedSlice; var index = -1; + var sameAsCurrent: boolean; const selected = svg.selectAll('.slice').filter((d: any) => { index++; var p1 = [0,0]; @@ -305,14 +305,22 @@ export class PieChart extends React.Component<PieChartProps> { if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){ if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; } if (lineCrossCount % 2 != 0) { - selectedSlice = pieDataSet[index]; + var showSelected = this.byCategory? pieDataSet[index] : this.props.pairs[index]; + sameAsCurrent = (this.byCategory && this._currSelected)? + (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] + && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]]) + : + this._currSelected===showSelected; + this._currSelected = sameAsCurrent? undefined: showSelected; return true; } return false; }); - console.log('selectedSlice', selectedSlice) - - selected.attr('class')=='slice hover'? selected.attr('class', 'slice'): selected.attr('class', 'slice hover') + const elements = document.querySelectorAll('.slice'); + for (let i = 0; i < elements.length; i++) { + elements[i].classList.remove('hover'); + } + if (!sameAsCurrent!) selected.attr('class', 'slice hover'); }); var percentField = Object.keys(pieDataSet[0])[0] @@ -352,10 +360,20 @@ export class PieChart extends React.Component<PieChartProps> { render() { + var selected: string; + if (this._currSelected){ + selected = '{ '; + Object.keys(this._currSelected).map(key => { + key!=''? selected += key + ': ' + this._currSelected[key] + ', ': ''; + }) + selected = selected.substring(0, selected.length-2); + selected += ' }'; + } + else selected = 'none'; return ( this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? ( <div ref={this._piechartRef} className="chart-container"> - <span> {`Selected: ${Object.keys(this._piechartData[0])[0]}`}</span> + <span className={'selected-data'}> {`Selected: ${selected}`}</span> </div> ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> ); |