diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Histogram.tsx | 18 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/PieChart.tsx | 8 |
2 files changed, 23 insertions, 3 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 46a264386..68cb768d1 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -45,6 +45,7 @@ export class Histogram extends React.Component<HistogramProps> { private maxBins = 15; // maximum number of bins that is readable on a normal sized doc @observable _currSelected: any | undefined = undefined; private curBarSelected: any = undefined; + private selectTry: 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() { @@ -376,23 +377,32 @@ export class Histogram extends React.Component<HistogramProps> { && showSelected[yAxisTitle]==this._currSelected![yAxisTitle]) : false; this._currSelected = sameAsCurrent? undefined: showSelected; + this.selectTry = sameAsCurrent? undefined: d; return true } return false; }); + // console.log(this.curBarSelected.groups[0][0].data==selected) const elements = document.querySelectorAll('.histogram-bar'); for (let i = 0; i < elements.length; i++) { elements[i].classList.remove('hover'); } if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover'); - if (sameAsCurrent!) this.curBarSelected = undefined; + if (sameAsCurrent!) { + selected.attr('class', 'histogram-bar') + this.curBarSelected = undefined; + } else { selected.attr('class', 'histogram-bar hover') + selected.attr('stroke', 'blue') this.curBarSelected = selected; } + console.log(this._currSelected) + console.log(this.selectTry) }); svg.on('click', onPointClick); + var selected = this.selectTry; svg.append("text") .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")") .style("text-anchor", "middle") @@ -423,7 +433,11 @@ export class Histogram extends React.Component<HistogramProps> { : function(d) { return height - y(d.length)}) .attr("width", eachRectWidth) - .attr("class", 'histogram-bar') + .attr("class", selected? + function(d) { + console.log(d[0]==selected[0], d) + return (selected && selected[0]==d[0])? 'histogram-bar hover' : 'histogram-bar'; + }: function(d) {return 'histogram-bar'}) .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])}) }; diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index 98c79f95a..d3d16aa4c 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> { private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios @observable _currSelected: any | undefined = undefined; private curSliceSelected: any = undefined; + private selectedTry: 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() { @@ -328,6 +329,7 @@ export class PieChart extends React.Component<PieChartProps> { : this._currSelected===showSelected; this._currSelected = sameAsCurrent? undefined: showSelected; + this.selectedTry = sameAsCurrent? undefined: d; return true; } return false; @@ -343,6 +345,7 @@ export class PieChart extends React.Component<PieChartProps> { } }); + var selected = this.selectedTry; var arcs = g.selectAll("arc") .data(pie(data)) .enter() @@ -363,7 +366,10 @@ export class PieChart extends React.Component<PieChartProps> { } var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField]; return this.props.layoutDoc['pieSliceColors-'+accessByName]? StrCast(this.props.layoutDoc['pieSliceColors-'+accessByName]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] }) - .attr("class", 'slice') + .attr("class", selected? + function(d) { + return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice'; + }: function(d) {return 'slice'}) .attr("d", arc) .on('click', onPointClick) |