Un guide Intergalactic avec les tokens sémantiques et de graphiques actuels, des contrôles de filtrage natifs, une comparaison à échelle fixe, des détails sur l’élément sélectionné et un jeu de données complet et reproductible.
Guide OpenDesign8 chapitres38 entrées de référenceGuide de l’application d’origine
01
Aperçu de l’interface du système de design Semrush Intergalactic
Filtrez les termes, limitez les résultats aux éléments suivis, changez de métrique et consultez les valeurs sélectionnées sans perdre le contexte de l’échelle.
Mise en page d’un espace de travail analytique du système de design Semrush Intergalactic
Définissez une question précise pour la comparaison
L’exemple compare six mots-clés fictifs selon une métrique sélectionnée. Un filtre, une option pour afficher uniquement les éléments suivis et des boutons de sélection de métrique se trouvent au-dessus des résultats. Un inspecteur distinct affiche les deux métriques du terme sélectionné, afin que l’utilisateur puisse comparer le classement aux valeurs sous-jacentes.
Distinguez les données saisies des données mesurées
Chaque nombre provient d’un jeu de données fixe et est présenté comme une valeur illustrative. La page ne présente ni le volume de recherche ni la difficulté comme une mesure actuelle de Semrush. Les barres ne reposent sur aucune requête réseau, aucun compte d’analyse ni aucun jeu de données client téléchargé.
Génération du thème et des jetons du système de design Semrush Intergalactic
Utilisez délibérément la version actuelle du package de thème
L’environnement d’exécution épingle @semcore/ui 17.6.0 et @semcore/theme 2.3.1. Les composants natifs nécessitent le package de thème actuel, et le point d’entrée importe son fichier light.css. Le tableau conserve les valeurs OKLCH de cette feuille de style au lieu de les remplacer par d’anciens codes hexadécimaux sans rapport.
Distinguez les rôles des composants de ceux des graphiques
Les commandes natives tirent leur apparence du style Intergalactic, tandis que la comparaison originale en barres utilise le premier rôle de série de la palette des graphiques. La sélection est indiquée par un arrière-plan de ligne discret et un état activé. Évitez de réutiliser systématiquement une couleur de série pour toutes les actions ou les erreurs.
Typographie pour des résultats denses du système de design Semrush Intergalactic
Associez les libellés, les unités et les valeurs
Chaque ligne de barre comprend le terme et une valeur numérique écrite. La note sous l’axe précise si l’échelle représente des recherches échantillonnées ou un score sur 100. L’inspecteur rappelle les deux unités, pour éviter qu’une longueur de barre visuellement similaire ne laisse croire que les métriques sont interchangeables.
Utilisez un texte compact sans masquer le contexte
Le champ natif utilise la grande taille pour offrir une zone de filtre confortable. Les libellés des résultats restent compacts, tandis que le titre de l’espace de travail et les titres de section sont plus grands. Sur un écran étroit, le mot-clé passe au-dessus de la barre et de la valeur au lieu d’être tronqué au point de devenir illisible.
Échelle et tri des graphiques du système de design Semrush Intergalactic
Conservez une échelle stable lors du filtrage
Le graphique du volume utilise toujours un maximum de 8,100 et celui de la difficulté un maximum de 100. Le filtrage n’étire pas la barre restante la plus longue jusqu’à la largeur maximale. Ce choix délibéré préserve le sens de la comparaison lorsque l’utilisateur réduit l’ensemble de résultats.
Effectuez le tri selon la métrique active
Champ de saisie et case à cocher natifs du système de design Semrush Intergalactic
Utilisez la structure composée du champ de saisie
Input fournit le composant externe et Input.Value le contrôle réellement modifiable. Son rappel onChange reçoit d’abord la valeur sous forme de chaîne, contrairement à un événement DOM standard de changement. Le libellé visible fait référence à l’id de Value.
Gérez indépendamment les filtres booléens et textuels
Le rappel onChange de la case à cocher native reçoit la valeur booléenne checked. Le filtrage textuel et l’état « uniquement les éléments suivis » sont combinés lors de la sélection des lignes ; chacun peut donc légitimement produire un résultat vide. La réinitialisation des filtres rétablit les deux contrôles tout en préservant le contexte de l’inspecteur sélectionné.
Détail de l’élément sélectionné et état vide du système de design Semrush Intergalactic
Conserver la sélection associée à son élément
Le terme sélectionné est stocké indépendamment de l’ordre du tableau. Cliquer sur une barre met à jour ce terme et son état activé, tandis que l’inspecteur recherche l’enregistrement complet dans le jeu de données. Le tri selon une autre métrique ne peut pas faire pointer silencieusement l’inspecteur vers l’index d’une autre ligne.
Expliquez pourquoi une sélection exclue par le filtre est conservée
Si le terme sélectionné n’est plus visible, l’inspecteur reste affiché avec une explication écrite. Cette fonction est utile pour comparer un élément avant et après le filtrage. La zone de résultats vides propose une action explicite de réinitialisation au lieu d’afficher un panneau de graphique vierge.
Système de design Semrush Intergalactic accessible pour comparer des données
Rendez le graphique compréhensible sans la couleur
Les barres sont des éléments span décoratifs intégrés à de vrais boutons. Le terme et la valeur constituent le texte accessible, et aria-pressed indique la sélection. Les données restent compréhensibles même sans voir la longueur des barres ni la teinte de la série. La mise en évidence du focus clavier est visuellement distincte du traitement de la ligne sélectionnée.
Choisissez Difficulté et examinez les barres réordonnées et l’unité du score.
Filtrez sur un terme sans correspondance, puis utilisez Réinitialiser les filtres.
Sélectionnez un terme, excluez-le avec un filtre, puis lisez l’explication sur la sélection conservée.
Testez le parcours de rétablissement des filtres
Le champ de saisie natif et la case à cocher exposent leurs véritables contrôles. Les sélecteurs de métrique utilisent des boutons avec un état activé, et l’action de réinitialisation d’origine efface les deux filtres. La mise en page laisse visibles le titre des résultats et la note sur les unités, afin que les états vides et non vides présentent le même contexte.
Semrush Intergalactic Imports de composants et configuration du thème du système de conception
Importer les points d’entrée des composants
La racine de @semcore/ui renvoie volontairement une erreur au lieu d’exporter tous les composants. Ce fichier source importe button, input et checkbox depuis leurs points d’entrée dédiés, ainsi que @semcore/theme/light.css. L’entrée complète comprend la fixture et toute la logique de dérivation.
Imports dédiés de @semcore/ui/button, input et checkbox.
@semcore/theme/light.css épinglé.
Logique d’origine de la barre à échelle fixe et de la fixture dans le JSX complet.
Ne présentez pas les barres personnalisées comme un graphique D3 natif
Semrush Intergalactic Exemples de composants du système de conception
main.jsx — exemple complet fonctionnel
Comparez un ensemble fictif de mots-clés. Le code source ci-dessous est l’entrée React complète, avec l’ensemble de l’état et de la validation.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Button from "@semcore/ui/button";
import Input from "@semcore/ui/input";
import Checkbox from "@semcore/ui/checkbox";
import "@semcore/theme/light.css";
import "./intergalactic.css";
const data = [
{ term: "design tokens", volume: 8100, difficulty: 42, tracked: true },
{ term: "component library", volume: 6600, difficulty: 58, tracked: false },
{ term: "accessible forms", volume: 2900, difficulty: 31, tracked: true },
{
term: "responsive typography",
volume: 1900,
difficulty: 24,
tracked: false,
},
{ term: "semantic colors", volume: 1300, difficulty: 18, tracked: false },
{ term: "design system audit", volume: 720, difficulty: 36, tracked: true },
];
function App() {
const [q, setQ] = useState(""),
[tracked, setTracked] = useState(false),
[metric, setMetric] = useState("volume"),
[selected, setSelected] = useState("design tokens");
const rows = data
.filter((d) => d.term.includes(q.toLowerCase()) && (!tracked || d.tracked))
.sort((a, b) => b[metric] - a[metric]);
const max = metric === "volume" ? 8100 : 100;
const item = data.find((d) => d.term === selected);
return (
<main className="research">
<header>
<p>RESEARCH WORKSPACE / FICTIONAL DATA</p>
<h1>Compare a keyword set</h1>
<span>
Six authored sample records · figures are illustrative, not Semrush
measurements
</span>
</header>
<div className="research-toolbar">
<div className="research-search">
<label htmlFor="term-search">Filter keywords</label>
<Input size="l">
<Input.Value
id="term-search"
placeholder="Find a sample term"
value={q}
onChange={setQ}
/>
</Input>
</div>
<Checkbox
label="Tracked only"
checked={tracked}
onChange={setTracked}
/>
<div
className="metric-options"
role="group"
aria-label="Comparison metric"
>
<Button
use={metric === "volume" ? "primary" : "secondary"}
aria-pressed={metric === "volume"}
onClick={() => setMetric("volume")}
>
Volume
</Button>
<Button
use={metric === "difficulty" ? "primary" : "secondary"}
aria-pressed={metric === "difficulty"}
onClick={() => setMetric("difficulty")}
>
Difficulty
</Button>
</div>
</div>
<div className="research-grid">
<section className="chart-panel">
<div className="chart-heading">
<h2>
{metric === "volume"
? "Illustrative monthly volume"
: "Illustrative difficulty score"}
</h2>
<span>{rows.length} terms</span>
</div>
<p className="axis-note">
{metric === "volume"
? "Fixed scale: 0–8,100 sample searches"
: "Fixed scale: 0–100 sample score"}
</p>
{rows.length ? (
<div className="bars">
{rows.map((r) => (
<button
className={
"bar-row " + (r.term === selected ? "selected" : "")
}
key={r.term}
onClick={() => setSelected(r.term)}
aria-pressed={r.term === selected}
>
<span className="bar-name">{r.term}</span>
<span className="bar-track" aria-hidden="true">
<i style={{ width: (r[metric] / max) * 100 + "%" }} />
</span>
<strong>{r[metric].toLocaleString("en-US")}</strong>
</button>
))}
</div>
) : (
<div className="no-results">
<h3>No matching terms</h3>
<p>
Clear the text and tracked filter to restore the full
comparison.
</p>
<Button
onClick={() => {
setQ("");
setTracked(false);
}}
>
Reset filters
</Button>
</div>
)}
<p className="chart-note">
Values are written beside every bar. Click a term to inspect both
metrics.
</p>
</section>
<aside>
<h2>{item.term}</h2>
<dl>
<dt>Sample volume</dt>
<dd>{item.volume.toLocaleString("en-US")}</dd>
<dt>Sample difficulty</dt>
<dd>{item.difficulty} / 100</dd>
<dt>Tracking</dt>
<dd>{item.tracked ? "Tracked" : "Not tracked"}</dd>
</dl>
<div className="inspector-note">
<h3>Comparison context</h3>
<p>
The bar scale stays fixed when filters change. Difficulty and
volume have separate units and are not added together.
</p>
</div>
{!rows.some((r) => r.term === selected) && (
<p className="retained">
Selected term is outside the current filter; details are retained.
</p>
)}
</aside>
</div>
<footer>
Native Intergalactic Input, Checkbox and Button from @semcore/ui 17.6.0.
Original accessible HTML bar comparison; no analytics service request.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
Créez une comparaison analytique compacte avec des contrôles Intergalactic natifs, des imports dédiés et les jetons du thème actuel. Veillez à la cohérence des unités, des échelles fixes, du tri et de l’identité sélectionnée. Fournissez les valeurs sous forme textuelle et un moyen de sortir de l’état vide. Présentez honnêtement les métriques de la fixture et le code de graphique d’origine, sans les faire passer pour des données Semrush mesurées.
05
Semrush Intergalactic Sources et périmètre du système de conception
OpenDesign Guide de l’application. Les six fiches de mots-clés et toutes les métriques sont fictives. Des contrôles Intergalactic natifs encadrent un graphique HTML d’origine ; il ne s’agit ni d’un rapport Semrush ni d’une implémentation de graphique D3 natif.
