From caf70d184fa3e4ed6a185d133c870b4c1cfb1bc9 Mon Sep 17 00:00:00 2001
From: Kais Zaouali <kais.zaouali@wincher.com>
Date: Tue, 3 Oct 2023 13:13:10 +0100
Subject: [PATCH 1/2] Fix dataset color changing when deselected then selected
 in Wincher chart

---
 .../components/WincherRankingHistoryChart.js  | 33 ++++++++++++++++---
 .../src/components/WincherSEOPerformance.js   |  4 +--
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/js/src/components/WincherRankingHistoryChart.js b/packages/js/src/components/WincherRankingHistoryChart.js
index 3a4262a6614..904303061e2 100644
--- a/packages/js/src/components/WincherRankingHistoryChart.js
+++ b/packages/js/src/components/WincherRankingHistoryChart.js
@@ -1,12 +1,35 @@
 /* External dependencies */
 import { Line } from "react-chartjs-2";
-import { CategoryScale, Chart, LineController,	LineElement, LinearScale, PointElement, TimeScale, Colors, Legend, Tooltip } from "chart.js";
+import { CategoryScale, Chart, LineController,	LineElement, LinearScale, PointElement, TimeScale, Legend, Tooltip } from "chart.js";
 import "chartjs-adapter-moment";
 import PropTypes from "prop-types";
 import { noop } from "lodash";
 import moment from "moment";
 
-Chart.register( CategoryScale, LineController,	LineElement, PointElement, LinearScale, TimeScale, Colors, Legend, Tooltip );
+Chart.register( CategoryScale, LineController,	LineElement, PointElement, LinearScale, TimeScale, Legend, Tooltip );
+
+const CHART_COLORS = [
+	"#ff983b",
+	"#ffa3f7",
+	"#3798ff",
+	"#ff3b3b",
+	"#acce81",
+	"#b51751",
+	"#3949ab",
+	"#26c6da",
+	"#ccb800",
+	"#de66ff",
+	"#4db6ac",
+	"#ffab91",
+	"#45f5f1",
+	"#77f210",
+	"#90a4ae",
+	"#ffd54f",
+	"#006b5e",
+	"#8ec7d2",
+	"#b1887c",
+	"#cc9300",
+];
 
 /**
  * Renders the Wincher ranking history chart.
@@ -20,7 +43,7 @@ export default function WincherRankingHistoryChart( { datasets, isChartShown } )
 		return null;
 	}
 
-	const data = datasets.map( dataset => ( {
+	const data = datasets.map( ( dataset, index ) => ( {
 		...dataset,
 		data: dataset.data.map( ( { datetime, value } ) => ( {
 			x: datetime,
@@ -31,7 +54,8 @@ export default function WincherRankingHistoryChart( { datasets, isChartShown } )
 		pointHoverRadius: 4,
 		borderWidth: 2,
 		pointHitRadius: 6,
-	} ) );
+		backgroundColor: CHART_COLORS[ index % CHART_COLORS.length ],
+	} ) ).filter( dataset => dataset.selected !== false );
 
 	return (
 		<Line
@@ -109,6 +133,7 @@ WincherRankingHistoryChart.propTypes = {
 					value: PropTypes.number.isRequired,
 				} )
 			).isRequired,
+			selected: PropTypes.bool,
 		} )
 	).isRequired,
 	isChartShown: PropTypes.bool.isRequired,
diff --git a/packages/js/src/components/WincherSEOPerformance.js b/packages/js/src/components/WincherSEOPerformance.js
index d8dd28ce1ef..cff4351255f 100644
--- a/packages/js/src/components/WincherSEOPerformance.js
+++ b/packages/js/src/components/WincherSEOPerformance.js
@@ -381,11 +381,11 @@ const TableContent = ( props ) => {
 		if ( isEmpty( trackedKeyphrases ) ) {
 			return [];
 		}
-		return Object.values( trackedKeyphrases ).filter( keyphrase => selectedKeyphrases.includes( keyphrase.keyword ) )
-			.filter( keyphrase => ! isEmpty( keyphrase.position?.history ) )
+		return Object.values( trackedKeyphrases )
 			.map( keyphrase => ( {
 				label: keyphrase.keyword,
 				data: keyphrase.position.history,
+				selected: selectedKeyphrases.includes( keyphrase.keyword ) && ! isEmpty( keyphrase.position?.history ),
 			} ) );
 	}, [ selectedKeyphrases, trackedKeyphrases ] );
 

From 6cbd0a962ef2a2f546f1756f6b235a224bd39ecc Mon Sep 17 00:00:00 2001
From: Kais Zaouali <kais.zaouali@wincher.com>
Date: Thu, 5 Oct 2023 17:53:42 +0100
Subject: [PATCH 2/2] Do not display previous post keyphrases in Wincher table

---
 packages/js/src/redux/selectors/WincherSEOPerformance.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/js/src/redux/selectors/WincherSEOPerformance.js b/packages/js/src/redux/selectors/WincherSEOPerformance.js
index a39eff63566..26cb970788c 100644
--- a/packages/js/src/redux/selectors/WincherSEOPerformance.js
+++ b/packages/js/src/redux/selectors/WincherSEOPerformance.js
@@ -48,8 +48,7 @@ export function hasWincherTrackedKeyphrases( state ) {
 export function getWincherTrackableKeyphrases( state ) {
 	const isPremium = getL10nObject().isPremium;
 	const premiumStore = window.wp.data.select( "yoast-seo-premium/editor" );
-	const tracked = Object.keys( getWincherTrackedKeyphrases( state ) || {} ).map( k => k.trim() );
-	const keyphrases = [ state.focusKeyword.trim(), ...tracked ];
+	const keyphrases = [ state.focusKeyword.trim() ];
 
 	if ( isPremium && premiumStore ) {
 		// eslint-disable-next-line no-undefined