Merge branch 'feature/wincher-modal-improvements' of https://github.c…

…om/wincher-ab/wordpress-seo into wincher-modal-improvements
Yoast · Oct 10, 2023 · 5197029 · 5197029
2 parents d410ad4 + 6cbd0a9
commit 5197029
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git 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
@@ -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 ] );
 

diff --git 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