98930749cbba4cdb77063ec9741855742f55945e

Committed 25 Nov 2024 01:32PM CUT coverage: 27.129%. First build

Build # 98930749cbba4cdb77063ec9741855742f55945e

Build Type

Pull #21860

github

Committed by

web-flow

Commit Message

Merge 51428cf2b into c5f6c46ec

Pull Request Pull Request #21860: Dashboard: UX feedback

Run Details

1706 of 7451 branches covered (22.9%)

Branch coverage included in aggregate %.

0 of 14 new or added lines in 3 files covered. (0.0%)

3862 of 13073 relevant lines covered (29.54%)

8.47 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/js/src/dashboard/scores/components/score-chart.js

import { SkeletonLoader } from "@yoast/ui-library";
import { ArcElement, Chart, Tooltip } from "chart.js";
import classNames from "classnames";
import { Doughnut } from "react-chartjs-2";
import { SCORE_META } from "../score-meta";

/**
 * @type {import("../index").Score} Score
 */

Chart.register( ArcElement, Tooltip );

/**
 * @param {Score[]} scores The scores.
 * @returns {Object} Parsed chart data.
 */
const transformScoresToGraphData = ( scores ) => ( {
        labels: scores.map( ( { name } ) => SCORE_META[ name ].label ),
        datasets: [
                {
                        cutout: "82%",
                        data: scores.map( ( { amount } ) => amount ),
                        backgroundColor: scores.map( ( { name } ) => SCORE_META[ name ].hex ),
                        borderWidth: 0,
                        offset: 0,
                        hoverOffset: 5,
                        spacing: 1,
                        weight: 1,
                        animation: {
                                animateRotate: true,
                        },
                },
        ],
} );

const chartOptions = {
        plugins: {
                legend: false,
                tooltip: {
                        displayColors: false,
                        callbacks: {
                                title: () => "",
                                label: context => `${ context.label }: ${ context?.formattedValue }`,
                        },
                },
        },
        layout: {
                padding: 5,
        },
};

/**
 * @param {string} [className] The class name.
 * @returns {JSX.Element} The element.
 */
export const ScoreChartSkeletonLoader = ( { className } ) => (
        <div className={ classNames( className, "yst-relative" ) }>
                <SkeletonLoader className="yst-w-full yst-aspect-square yst-rounded-full" />
                <div className="yst-absolute yst-inset-5 yst-aspect-square yst-bg-white yst-rounded-full" />
        </div>
);

/**
 * @param {string} [className] The class name.
 * @param {Score[]} scores The scores.
 * @returns {JSX.Element} The element.
 */
export const ScoreChart = ( { className, scores } ) => {
        return (
                <div className={ className }>
                        <Doughnut
                                options={ chartOptions }
                                data={ transformScoresToGraphData( scores ) }
                        />
                </div>
        );
};

1	import { SkeletonLoader } from "@yoast/ui-library";
2	import { ArcElement, Chart, Tooltip } from "chart.js";
3	import classNames from "classnames";
4	import { Doughnut } from "react-chartjs-2";
5	import { SCORE_META } from "../score-meta";
6
7	/**
8	* @type {import("../index").Score} Score
9	*/
10
11	Chart.register( ArcElement, Tooltip );	×
12
13	/**
14	* @param {Score[]} scores The scores.
15	* @returns {Object} Parsed chart data.
16	*/
NEW 17	const transformScoresToGraphData = ( scores ) => ( {	×
NEW 18	labels: scores.map( ( { name } ) => SCORE_META[ name ].label ),	×
19	datasets: [
20	{
21	cutout: "82%",
NEW 22	data: scores.map( ( { amount } ) => amount ),	×
NEW 23	backgroundColor: scores.map( ( { name } ) => SCORE_META[ name ].hex ),	×
24	borderWidth: 0,
25	offset: 0,
26	hoverOffset: 5,
27	spacing: 1,
28	weight: 1,
29	animation: {
30	animateRotate: true,
31	},
32	},
33	],
34	} );
35
36	const chartOptions = {	×
37	plugins: {
38	legend: false,
39	tooltip: {
40	displayColors: false,
41	callbacks: {
42	title: () => "",	×
43	label: context => `${ context.label }: ${ context?.formattedValue }`,	×
44	},
45	},
46	},
47	layout: {
48	padding: 5,
49	},
50	};
51
52	/**
53	* @param {string} [className] The class name.
54	* @returns {JSX.Element} The element.
55	*/
NEW 56	export const ScoreChartSkeletonLoader = ( { className } ) => (	×
NEW 57	<div className={ classNames( className, "yst-relative" ) }>	×
58	<SkeletonLoader className="yst-w-full yst-aspect-square yst-rounded-full" />
59	<div className="yst-absolute yst-inset-5 yst-aspect-square yst-bg-white yst-rounded-full" />
60	</div>
61	);
62
63	/**
64	* @param {string} [className] The class name.
65	* @param {Score[]} scores The scores.
66	* @returns {JSX.Element} The element.
67	*/
NEW 68	export const ScoreChart = ( { className, scores } ) => {	×
69	return (	×
70	<div className={ className }>
71	<Doughnut
72	options={ chartOptions }
73	data={ transformScoresToGraphData( scores ) }
74	/>
75	</div>
76	);
77	};

Yoast / wordpress-seo / 98930749cbba4cdb77063ec9741855742f55945e

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous