Una guida Intergalactic con token semantici e per grafici aggiornati, controlli nativi per i filtri, confronto a scala fissa, dettagli dell’elemento selezionato e un fixture completo e riproducibile.
Controlli Intergalactic nativi di @semcore/ui 17.6.0 con @semcore/theme 2.3.1; confronto originale a barre di HTML. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di design Semrush Intergalactic
Controlli Intergalactic nativi di @semcore/ui 17.6.0 con @semcore/theme 2.3.1; confronto originale a barre di HTML.
Layout analitico dell’area di lavoro del sistema di design Semrush Intergalactic
Definisci una domanda per il confronto
L’esempio confronta sei parole chiave fittizie usando una metrica selezionata. Sopra i risultati si trovano un filtro, un’opzione per mostrare solo gli elementi monitorati e i pulsanti delle metriche. Un pannello di dettaglio separato mostra entrambe le metriche per il termine selezionato, consentendo di confrontare una vista ordinata in base alla posizione con i valori sottostanti.
Distingui i dati creati da quelli misurati
Ogni numero fa parte di un insieme di dati fisso ed è indicato come illustrativo. La pagina non presenta il volume di ricerca o la difficoltà come misurazioni attuali di Semrush. Le barre non si basano su query di rete, account di analisi o set di dati dei clienti scaricati.
Generazione del tema e dei token del sistema di design Semrush Intergalactic
Usa con criterio il pacchetto del tema corrente
Il runtime usa le versioni fissate di @semcore/ui 17.6.0 e @semcore/theme 2.3.1. I componenti nativi richiedono il pacchetto del tema corrente e il punto d’ingresso importa il suo light.css. La tabella conserva i valori OKLCH del foglio di stile, anziché sostituirli con valori esadecimali predefiniti meno recenti e non pertinenti.
Tieni separati i ruoli dei componenti e quelli del grafico
I controlli nativi ricavano il proprio aspetto dallo stile Intergalactic, mentre il confronto originale a barre usa il primo ruolo della palette del grafico per la serie. La selezione è indicata da uno sfondo riga discreto e dallo stato premuto. Il colore della serie non va riutilizzato indiscriminatamente per tutte le azioni o per gli errori.
Tipografia per risultati densi nel sistema di design Semrush Intergalactic
Mantieni uniti etichette, unità e valori
Ogni riga delle barre contiene il termine e il relativo valore numerico scritto. La nota sull’asse specifica se la scala rappresenta ricerche campione o un punteggio su 100. Il pannello di dettaglio ripete entrambe le unità, evitando che lunghezze delle barre simili facciano pensare che le metriche siano intercambiabili.
Usa testo compatto senza nascondere il contesto
Il campo nativo usa la dimensione grande, così da offrire un’area di filtro comoda da selezionare. Le etichette dei risultati restano compatte, mentre il titolo dell’area di lavoro e le intestazioni delle sezioni sono più grandi. Sugli schermi stretti, la parola chiave viene spostata sopra la barra e il valore, anziché essere troncata fino a diventare illeggibile.
Scala e ordinamento dei grafici nel sistema di design Semrush Intergalactic
Mantieni stabile la scala durante il filtraggio
Il grafico del volume usa sempre un massimo di 8,100 e quello della difficoltà un massimo di 100. Il filtraggio non allunga la barra più lunga tra quelle rimanenti fino a occupare tutta la larghezza. Questa scelta progettuale preserva il significato del confronto quando l’utente restringe l’insieme.
Ordina in base alla metrica attiva
Campo di input e casella di controllo nativi del sistema di design Semrush Intergalactic
Usa la struttura composta del campo di input
Input fornisce il componente esterno e Input.Value il controllo modificabile vero e proprio. La callback onChange riceve per primo il valore stringa, diversamente da un normale evento change del DOM. L’etichetta visibile fa riferimento all’id di Value.
Mantieni indipendenti i filtri booleani e testuali
L’onChange della Checkbox nativa riceve il valore booleano checked. Il filtro testuale e lo stato dei soli elementi monitorati vengono combinati per ricavare le righe, quindi entrambi possono legittimamente produrre un risultato vuoto. Reimposta filtri ripristina entrambi i controlli mantenendo il contesto del dettaglio selezionato.
Dettaglio selezionato e stato vuoto nel sistema di design Semrush Intergalactic
Mantieni la selezione associata all’identità
Il termine selezionato viene memorizzato indipendentemente dall’ordine dell’array. Facendo clic su una barra si aggiornano il termine e il relativo stato premuto, mentre il pannello di dettaglio recupera il record completo dell’insieme di dati. Ordinando in base a un’altra metrica, il pannello non punta silenziosamente a un indice di riga diverso.
Spiega perché una selezione resta attiva fuori dal filtro
Se il termine selezionato non è più visibile, il pannello di dettaglio resta disponibile e mostra una spiegazione. È utile per confrontare un elemento prima e dopo il filtraggio. Invece di mostrare un pannello del grafico vuoto, l’area dei risultati vuoti propone un’azione esplicita per reimpostare i filtri.
Confronto dati accessibile del sistema di design Semrush Intergalactic
Rendi il grafico comprensibile anche senza colori
Le barre sono elementi span decorativi all’interno di pulsanti reali. Il termine e il valore costituiscono il testo accessibile e aria-pressed indica la selezione. I dati restano comprensibili anche senza visualizzare la lunghezza delle barre o la tonalità della serie. L’indicatore di focus da tastiera è distinto visivamente dallo stile della riga selezionata.
Seleziona Difficulty e controlla le barre riordinate e l’unità del punteggio.
Filtra cercando un termine senza corrispondenze e usa Reimposta filtri.
Seleziona un termine, escludilo con un filtro e leggi la spiegazione che chiarisce perché la selezione resta attiva.
Verifica il ripristino dopo il filtraggio
Il campo di input e la casella di controllo nativi espongono i rispettivi controlli reali. I selettori delle metriche sono pulsanti con stato premuto e l’azione originale di ripristino cancella entrambi i filtri. Il layout mantiene visibili il titolo dei risultati e la nota sulle unità, così gli stati vuoti e non vuoti conservano lo stesso contesto.
Importazione dei componenti e configurazione del tema nel sistema di design Semrush Intergalactic
Importa i punti d’ingresso dei componenti
La radice di @semcore/ui genera intenzionalmente un errore invece di esportare tutti i componenti. Questo codice importa button, input e checkbox dai rispettivi punti d’ingresso dedicati e importa @semcore/theme/light.css. Il punto d’ingresso completo include l’insieme di dati e tutta la logica di derivazione.
Importazioni dedicate di @semcore/ui/button, input e checkbox.
@semcore/theme/light.css fissato.
Logica originale delle barre a scala fissa e dell’insieme di dati nel JSX completo.
Non definire i grafici a barre personalizzati come un grafico D3 nativo
Esempi di componenti del sistema di design Semrush Intergalactic
main.jsx — esempio completo funzionante
Confronta un insieme fittizio di parole chiave. Il codice seguente è il punto d’ingresso completo di React, con tutto lo stato e la logica di validazione.
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 />);
Crea un confronto analitico compatto con controlli Intergalactic nativi, importazioni dedicate e token del tema corrente. Mantieni coerenti unità, scale fisse, ordinamento e identità selezionata. Fornisci valori testuali e una procedura di recupero per lo stato vuoto. Indica con chiarezza che le metriche dell’insieme di dati sono fittizie e che il codice del grafico è originale, senza dichiarare che si tratti di dati Semrush misurati.
05
Fonti e ambito del sistema di design Semrush Intergalactic
Guida all’applicazione di OpenDesign. I sei record delle parole chiave e tutte le metriche sono fittizi. I controlli Intergalactic nativi circondano un grafico HTML originale; non si tratta di un report Semrush né di un’implementazione nativa di un grafico D3.
