aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/components/PieChart.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/PieChart.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/components/PieChart.tsx102
1 files changed, 63 insertions, 39 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index ca93a2942..913bdd9a4 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -43,6 +43,7 @@ export class PieChart extends React.Component<PieChartProps> {
@observable _currSelected: any | undefined = undefined;
private curSliceSelected: 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 _piechartData() {
@@ -219,6 +220,50 @@ export class PieChart extends React.Component<PieChartProps> {
return data;
}
+ highlightSelectedSlice = (changeSelectedVariables: boolean, svg: any, arc: any, radius: any, pointer: any, pieDataSet: any) => {
+ var index = -1;
+ var sameAsCurrent: boolean;
+ const selected = svg.selectAll('.slice').filter((d: any) => {
+ index++;
+ var p1 = [0,0];
+ var p3 = [arc.centroid(d)[0]*2, arc.centroid(d)[1]*2];
+ var p2 = [radius*Math.sin(d.startAngle), -radius*Math.cos(d.startAngle)];
+ var p4 = [radius*Math.sin(d.endAngle), -radius*Math.cos(d.endAngle)];
+
+ // draw an imaginary horizontal line from the pointer to see how many times it crosses a slice edge
+ var lineCrossCount = 0;
+ // if for all 4 lines
+ if (Math.min(p1[1], p2[1])<=pointer[1] && pointer[1]<=Math.max(p1[1], p2[1])){ // within y bounds
+ if (pointer[0] <= (pointer[1]-p1[1])*(p2[0]-p1[0])/(p2[1]-p1[1])+p1[0]) lineCrossCount++; } // intercepts x
+ if (Math.min(p2[1], p3[1])<=pointer[1] && pointer[1]<=Math.max(p2[1], p3[1])){
+ if (pointer[0] <= (pointer[1]-p2[1])*(p3[0]-p2[0])/(p3[1]-p2[1])+p2[0]) lineCrossCount++; }
+ if (Math.min(p3[1], p4[1])<=pointer[1] && pointer[1]<=Math.max(p3[1], p4[1])){
+ if (pointer[0] <= (pointer[1]-p3[1])*(p4[0]-p3[0])/(p4[1]-p3[1])+p3[0]) lineCrossCount++; }
+ 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) {
+ var showSelected = this.byCategory? pieDataSet[index] : this._piechartData[index];
+
+ if (changeSelectedVariables){
+ 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;
+ this.selectedData = sameAsCurrent? undefined: d;
+ }
+ else this.hoverOverData = d;
+ return true;
+ }
+ return false;
+ });
+ if (changeSelectedVariables){
+ if (sameAsCurrent!) this.curSliceSelected = undefined;
+ else this.curSliceSelected = selected;
+ }
+ }
+
drawChart = (dataSet: any, width: number, height: number) => {
d3.select(this._piechartRef.current).select('svg').remove();
d3.select(this._piechartRef.current).select('.tooltip').remove();
@@ -269,45 +314,22 @@ export class PieChart extends React.Component<PieChartProps> {
.innerRadius(0)
.outerRadius(radius);
- 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 index = -1;
- var sameAsCurrent: boolean;
- const selected = svg.selectAll('.slice').filter((d: any) => {
- index++;
- var p1 = [0,0];
- var p3 = [arc.centroid(d)[0]*2, arc.centroid(d)[1]*2];
- var p2 = [radius*Math.sin(d.startAngle), -radius*Math.cos(d.startAngle)];
- var p4 = [radius*Math.sin(d.endAngle), -radius*Math.cos(d.endAngle)];
-
- // draw an imaginary horizontal line from the pointer to see how many times it crosses a slice edge
- var lineCrossCount = 0;
- // if for all 4 lines
- if (Math.min(p1[1], p2[1])<=pointer[1] && pointer[1]<=Math.max(p1[1], p2[1])){ // within y bounds
- if (pointer[0] <= (pointer[1]-p1[1])*(p2[0]-p1[0])/(p2[1]-p1[1])+p1[0]) lineCrossCount++; } // intercepts x
- if (Math.min(p2[1], p3[1])<=pointer[1] && pointer[1]<=Math.max(p2[1], p3[1])){
- if (pointer[0] <= (pointer[1]-p2[1])*(p3[0]-p2[0])/(p3[1]-p2[1])+p2[0]) lineCrossCount++; }
- if (Math.min(p3[1], p4[1])<=pointer[1] && pointer[1]<=Math.max(p3[1], p4[1])){
- if (pointer[0] <= (pointer[1]-p3[1])*(p4[0]-p3[0])/(p4[1]-p3[1])+p3[0]) lineCrossCount++; }
- 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) {
- var showSelected = this.byCategory? pieDataSet[index] : this._piechartData[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;
- this.selectedData = sameAsCurrent? undefined: d;
- return true;
- }
- return false;
- });
- if (sameAsCurrent!) this.curSliceSelected = undefined;
- else this.curSliceSelected = selected;
- });
+ const onPointClick = action((e: any) => this.highlightSelectedSlice(true, svg, arc, radius, d3.pointer(e), pieDataSet));
+ const onHover = action((e: any) => {
+ const selected = this.highlightSelectedSlice(false, svg, arc, radius, d3.pointer(e), pieDataSet)
+ updateHighlights();
+ })
+ const mouseOut = action((e: any) => {
+ this.hoverOverData = undefined;
+ updateHighlights();
+ })
+ const updateHighlights = () => {
+ const hoverOverSlice = this.hoverOverData;
+ const selectedData = this.selectedData;
+ svg.selectAll('path').attr("class", function(d: any) {
+ return ((selectedData && d.startAngle==selectedData.startAngle && d.endAngle==selectedData.endAngle)
+ || ((hoverOverSlice && d.startAngle==hoverOverSlice.startAngle && d.endAngle==hoverOverSlice.endAngle)))? 'slice hover' : 'slice'; })
+ }
var selected = this.selectedData;
var arcs = g.selectAll("arc")
@@ -339,6 +361,8 @@ export class PieChart extends React.Component<PieChartProps> {
}: function(d) {return 'slice'})
.attr("d", arc)
.on('click', onPointClick)
+ .on('mouseover', onHover)
+ .on('mouseout', mouseOut);
trackDuplicates = {};
data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 03:54:16 +0000