Add anonymized data points to donut graph

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -56,6 +56,8 @@ class DonutGraph extends React.Component {
 						return '#87d7ef';
 					case 'social_media':
 						return '#388ee8';
+					case 'other_data_points':
+						return '#8459a5';
 					default:
 						return '#e8e8e8';
 				}
@@ -74,6 +76,7 @@ class DonutGraph extends React.Component {
 	componentDidMount() {
 		const {
 			categories,
+			antiTracking,
 			renderRedscale,
 			renderGreyscale,
 			isSmall,
@@ -87,7 +90,7 @@ class DonutGraph extends React.Component {
 			.value(d => d.value);
 
 		this.prepareDonutContainer(isSmall);
-		this.bakeDonut(categories, {
+		this.bakeDonut(categories, antiTracking, {
 			renderRedscale,
 			renderGreyscale
 		});
@@ -99,6 +102,7 @@ class DonutGraph extends React.Component {
 	componentWillReceiveProps(nextProps) {
 		const {
 			categories,
+			antiTracking,
 			renderRedscale,
 			renderGreyscale,
 			ghosteryFeatureSelect,
@@ -115,12 +119,20 @@ class DonutGraph extends React.Component {
 			return;
 		}
 
-		// componentWillReceiveProps gets called many times during page load as new trackers are found
+		// componentWillReceiveProps gets called many times during page load as new trackers or unsafe data points are found
 		// so only compare tracker totals if we don't already have to redraw anyway as a result of the cheaper checks above
 		const trackerTotal = categories.reduce((total, category) => total + category.num_total, 0);
 		const nextTrackerTotal = nextProps.categories.reduce((total, category) => total + category.num_total, 0);
 		if (trackerTotal !== nextTrackerTotal) {
 			this.nextPropsDonut(nextProps);
+			return;
+		}
+
+		if (!antiTracking && !nextProps.antiTracking) { return; }
+		const unsafeDataPoints = antiTracking ? antiTracking.totalUnsafeCount : 0;
+		const nextUnsafeDataPoints = nextProps.antiTracking ? nextProps.antiTracking.totalUnsafeCount : 0;
+		if (unsafeDataPoints !== nextUnsafeDataPoints) {
+			this.nextPropsDonut(nextProps);
 		}
 	}
 
@@ -142,7 +154,7 @@ class DonutGraph extends React.Component {
 	 *  Helper function that updates donut with nextProps values
 	 */
 	nextPropsDonut(nextProps) {
-		this.bakeDonut(nextProps.categories, {
+		this.bakeDonut(nextProps.categories, nextProps.antiTracking, {
 			renderRedscale: nextProps.renderRedscale,
 			renderGreyscale: nextProps.renderGreyscale,
 			isSmall: nextProps.isSmall,
@@ -180,7 +192,7 @@ class DonutGraph extends React.Component {
 	 */
 	bakeDonut = throttle(this._bakeDonut.bind(this), 600, { leading: true, trailing: true }) // matches panelData#updatePanelUI throttling
 
-	_bakeDonut(categories, options) {
+	_bakeDonut(categories, antiTracking, options) {
 		const {
 			renderRedscale,
 			renderGreyscale,
@@ -208,6 +220,14 @@ class DonutGraph extends React.Component {
 			graphData.sort((a, b) => a.value < b.value);
 		}
 
+		if (antiTracking && antiTracking.totalUnsafeCount) {
+			graphData.push({
+				id: 'other_data_points',
+				name: 'Data Points Anonymized',
+				value: antiTracking.totalUnsafeCount,
+			});
+		}
+
 		const trackerArc = arc()
 			.innerRadius(this.donutRadius - 13)
 			.outerRadius(this.donutRadius);
@@ -313,7 +333,7 @@ class DonutGraph extends React.Component {
 	 * @return {JSX} JSX for rendering the donut-graph portion of the Summary View
 	 */
 	render() {
-		const { isSmall, totalCount } = this.props;
+		const { isSmall, totalCount, antiTracking } = this.props;
 		const componentClasses = ClassNames('sub-component', 'donut-graph', {
 			small: isSmall,
 			big: !isSmall,
@@ -327,6 +347,11 @@ class DonutGraph extends React.Component {
 							{cat.name}
 						</span>
 					))}
+					{antiTracking && !!antiTracking.totalUnsafeCount && (
+						<span key="other_data_points" id="other_data_points_tooltip" className="tooltip top">
+							Other Data Points
+						</span>
+					)}
 				</div>
 				<div className="graph-ref" ref={(node) => { this.node = node; }} />
 				<div className="graph-text clickable" onClick={this.clickGraphText}>

app/panel/components/Summary.jsx

@@ -293,10 +293,12 @@ class Summary extends React.Component {
 			enable_anti_tracking,
 			enable_ad_block,
 			enable_smart_block,
+			categories,
 			antiTracking,
 			adBlock,
 			smartBlock,
 			paused_blocking,
+			paused_blocking_timeout,
 			sitePolicy,
 			trackerCounts,
 		} = this.props;
@@ -351,8 +353,8 @@ class Summary extends React.Component {
 				{abPause && (
 					<div className="pause-button-container">
 						<PauseButton
-							isPaused={this.props.paused_blocking}
-							isPausedTimeout={this.props.paused_blocking_timeout}
+							isPaused={paused_blocking}
+							isPausedTimeout={paused_blocking_timeout}
 							clickPause={this.clickPauseButton}
 							dropdownItems={this.pauseOptions}
 							isAbPause={abPause}
@@ -375,20 +377,21 @@ class Summary extends React.Component {
 				{!this.state.disableBlocking && !showCondensed && (
 					<div className="donut-graph-container">
 						<DonutGraph
-							categories={this.props.categories}
-							renderRedscale={this.props.sitePolicy === 1}
-							renderGreyscale={this.props.paused_blocking}
-							totalCount={this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0}
-							ghosteryFeatureSelect={this.props.sitePolicy}
+							categories={categories}
+							renderRedscale={sitePolicy === 1}
+							renderGreyscale={paused_blocking}
+							totalCount={trackerCounts.allowed + trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0}
+							ghosteryFeatureSelect={sitePolicy}
 							isSmall={is_expert}
 							clickDonut={this.clickDonut}
+							antiTracking={antiTracking}
 						/>
 					</div>
 				)}
 				{!this.state.disableBlocking && showCondensed && (
 					<div className="total-tracker-count clickable" onClick={this.clickTrackersCount}>
 						<span className="summary-total-tracker-count g-tooltip">
-							{this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0}
+							{trackerCounts.allowed + trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0}
 							<Tooltip
 								header={t('panel_tracker_total_tooltip')}
 								position="right"
@@ -427,17 +430,17 @@ class Summary extends React.Component {
 				<div className="ghostery-features-container">
 					<GhosteryFeatures
 						clickButton={this.clickSitePolicy}
-						sitePolicy={this.props.sitePolicy}
+						sitePolicy={sitePolicy}
 						isAbPause={abPause}
 						isStacked={is_expert}
-						isInactive={this.props.paused_blocking || this.state.disableBlocking}
+						isInactive={paused_blocking || this.state.disableBlocking}
 						isCondensed={showCondensed}
 					/>
 
 					{!abPause && (
 						<PauseButton
-							isPaused={this.props.paused_blocking}
-							isPausedTimeout={this.props.paused_blocking_timeout}
+							isPaused={paused_blocking}
+							isPausedTimeout={paused_blocking_timeout}
 							clickPause={this.clickPauseButton}
 							dropdownItems={this.pauseOptions}
 							isAbPause={abPause}
@@ -450,13 +453,13 @@ class Summary extends React.Component {
 				<div className="cliqz-features-container">
 					<CliqzFeatures
 						clickButton={this.clickCliqzFeature}
-						antiTrackingActive={this.props.enable_anti_tracking}
-						antiTracking={this.props.antiTracking}
-						adBlockingActive={this.props.enable_ad_block}
-						adBlocking={this.props.adBlock}
-						smartBlockingActive={this.props.enable_smart_block}
-						smartBlocking={this.props.smartBlock}
-						isInactive={this.props.paused_blocking || this.props.sitePolicy || this.state.disableBlocking || IS_CLIQZ}
+						antiTrackingActive={enable_anti_tracking}
+						antiTracking={antiTracking}
+						adBlockingActive={enable_ad_block}
+						adBlocking={adBlock}
+						smartBlockingActive={enable_smart_block}
+						smartBlocking={smartBlock}
+						isInactive={paused_blocking || sitePolicy || this.state.disableBlocking || IS_CLIQZ}
 						isSmaller={is_expert}
 						isCondensed={showCondensed}
 					/>