Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 27x 27x 27x 1x | import React from "react";
import clsx from "clsx";
import { formatNumber } from "../../constants";
import styles from "./DOMMetrics.module.scss";
export interface DOMMetricsProps {
/** Number of DOM nodes */
domNodes: number | null;
/** Estimated number of event listeners */
eventListeners: number | null;
/** Custom class name */
className?: string;
}
/**
* DOM tree icon
*/
function DOMIcon({ className }: { className?: string }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={className}
>
<path d="M12 3v6" />
<circle cx="12" cy="10" r="1" />
<path d="M12 11v3" />
<path d="M8 14h8" />
<path d="M8 14v4" />
<path d="M16 14v4" />
<circle cx="8" cy="19" r="1" />
<circle cx="16" cy="19" r="1" />
</svg>
);
}
/**
* Event listener icon (lightning bolt)
*/
function ListenerIcon({ className }: { className?: string }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={className}
>
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>
);
}
/**
* Display component for DOM metrics (nodes and event listeners)
*/
export function DOMMetrics({
domNodes,
eventListeners,
className,
}: DOMMetricsProps) {
return (
<div className={clsx(styles.container, className)}>
{/* DOM Nodes */}
<div className={styles.metricCard}>
<div className={clsx(styles.iconWrapper, styles.dom)}>
<DOMIcon className={clsx(styles.icon, styles.dom)} />
</div>
<div className={styles.metricContent}>
<div className={styles.metricLabel}>DOM Nodes</div>
<div className={styles.metricValue}>{formatNumber(domNodes)}</div>
</div>
</div>
{/* Event Listeners */}
<div className={styles.metricCard}>
<div className={clsx(styles.iconWrapper, styles.listener)}>
<ListenerIcon className={clsx(styles.icon, styles.listener)} />
</div>
<div className={styles.metricContent}>
<div className={styles.metricLabel}>Listeners</div>
<div className={styles.metricValue}>{formatNumber(eventListeners)}</div>
</div>
</div>
</div>
);
}
DOMMetrics.displayName = "DOMMetrics";
|