Um guia do Intergalactic com tokens semânticos e de gráficos atuais, controles nativos de filtragem, comparação em escala fixa, detalhes do item selecionado e um conjunto de dados completo e reproduzível.
Semrush Intergalactic Layout de Espaço de Trabalho Analítico do Sistema de Design
Defina uma pergunta para a comparação
O exemplo compara seis palavras-chave fictícias usando uma métrica selecionada. Um filtro, uma opção para mostrar apenas itens acompanhados e botões de métrica ficam acima dos resultados. Um painel de inspeção separado mostra as duas métricas do termo selecionado, permitindo comparar uma visão de classificação com os valores subjacentes.
Diferencie dados criados de dados medidos
Todos os números fazem parte de um conjunto de dados fixo e estão identificados como ilustrativos. A página não apresenta volume de buscas nem dificuldade como medições atuais do Semrush. Não há consulta à rede, conta de analytics ou conjunto de dados de clientes baixado por trás das barras.
Semrush Intergalactic Geração de Temas e Tokens do Sistema de Design
Use o pacote do tema atual de forma intencional
O ambiente de execução fixa @semcore/ui 17.6.0 e @semcore/theme 2.3.1. Os componentes nativos precisam do pacote de tema atual, e o ponto de entrada importa seu light.css. A tabela mantém os valores OKLCH dessa folha de estilos, em vez de substituí-los por valores hexadecimais padrão antigos e sem relação.
Mantenha separados os papéis dos componentes e do gráfico
Os controles nativos obtêm sua aparência dos estilos do Intergalactic, enquanto a comparação original em barras usa o primeiro papel da paleta de cores do gráfico para séries. A seleção é indicada por um fundo discreto na linha e pelo estado pressionado. Não reutilize indiscriminadamente a cor de uma série como cor de todas as ações ou erros.
Semrush Intergalactic Tipografia para Resultados Densos do Sistema de Design
Mantenha rótulos, unidades e valores juntos
Cada linha de barra contém o termo e seu valor numérico por escrito. A nota pequena do eixo especifica se a escala representa buscas de amostra ou uma pontuação de 0 a 100. O painel de inspeção repete as duas unidades, evitando que comprimentos de barra visualmente semelhantes sugiram que as métricas são intercambiáveis.
Use texto compacto sem ocultar o contexto
O campo nativo usa o tamanho grande para oferecer uma área de filtro confortável. Os rótulos dos resultados permanecem compactos, enquanto o título do espaço de trabalho e os cabeçalhos das seções têm mais destaque. Em telas estreitas, a palavra-chave aparece acima da barra e do valor, em vez de ser truncada até ficar ilegível.
Semrush Intergalactic Escala e Ordenação de Gráficos do Sistema de Design
Mantenha a escala estável durante a filtragem
O gráfico de volume sempre usa o máximo de 8,100, e o gráfico de dificuldade, o máximo de 100. A filtragem não estende a barra restante mais longa até a largura total. Essa escolha deliberada preserva o sentido da comparação quando o usuário restringe o conjunto.
Ordene pela métrica ativa
Semrush Intergalactic Campo de Entrada e Caixa de Seleção Nativos do Sistema de Design
Use a estrutura composta do campo de entrada
Input fornece o componente externo, e Input.Value, o controle editável propriamente dito. O callback onChange recebe primeiro o valor em formato de string, ao contrário de um evento padrão de alteração do DOM. O rótulo visível aponta para o id de Value.
Mantenha os filtros booleanos e de texto independentes
O onChange do Checkbox nativo recebe o valor booleano checked. O filtro de texto e o estado de exibição apenas dos itens acompanhados são combinados ao derivar as linhas; portanto, qualquer um deles pode gerar legitimamente um resultado vazio. Redefinir os filtros restaura os dois controles e preserva o contexto do painel de inspeção selecionado.
Semrush Intergalactic Detalhes do Item Selecionado e Estado Vazio do Sistema de Design
Mantenha a seleção vinculada à identidade
O termo selecionado é armazenado independentemente da ordem do array. Clicar em uma barra atualiza esse termo e seu estado pressionado, enquanto o painel de inspeção consulta o registro completo no conjunto de dados. Ordenar por outra métrica não faz o painel de inspeção apontar silenciosamente para o índice de outra linha.
Explique quando a seleção continua ativa fora do filtro
Se o termo selecionado deixar de aparecer, o painel de inspeção continua disponível e apresenta uma explicação por escrito. Isso é útil para comparar um item antes e depois da filtragem. A área de resultados vazios oferece uma ação explícita para redefinir os filtros, em vez de exibir um painel de gráfico em branco.
Sistema de design Semrush Intergalactic Acessível para Comparação de Dados
Torne o gráfico compreensível sem depender de cores
As barras são elementos span decorativos dentro de botões reais. O termo e o valor compõem o texto acessível, e aria-pressed identifica a seleção. Os dados continuam compreensíveis sem visualizar o comprimento das barras ou a tonalidade da série. O foco do teclado tem um destaque visual distinto do tratamento da linha selecionada.
Escolha Dificuldade e inspecione as barras reordenadas e a unidade da pontuação.
Filtre um termo sem correspondências e use Redefinir filtros.
Selecione um termo, filtre-o e leia a explicação que informa que a seleção continua ativa.
Teste o fluxo de recuperação do filtro
O campo de entrada e a caixa de seleção nativos expõem seus controles reais. As opções de métrica usam botões com estado pressionado, e a ação original de redefinição limpa os dois filtros. O layout mantém visíveis o título dos resultados e a nota de unidade, para que os estados vazios e não vazios mantenham o mesmo contexto.
Semrush Intergalactic Importações de Componentes e Configuração do Tema do Sistema de Design
Importe os pontos de entrada dos componentes
A raiz de @semcore/ui lança uma exceção intencionalmente, em vez de exportar todos os componentes. Este código-fonte importa button, input e checkbox de seus pontos de entrada dedicados e importa @semcore/theme/light.css. O ponto de entrada completo inclui o conjunto de dados de exemplo e toda a lógica de derivação.
Importações dedicadas de @semcore/ui/button, input e checkbox.
@semcore/theme/light.css fixado.
Lógica original do gráfico de barras com escala fixa e conjunto de dados no JSX completo.
Não identifique as barras personalizadas como um gráfico D3 nativo
Semrush Intergalactic Exemplos de Componentes do Sistema de Design
main.jsx — exemplo funcional completo
Compare um conjunto fictício de palavras-chave. O código-fonte abaixo é o ponto de entrada React completo, com todos os estados e validações.
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 />);
Crie uma comparação analítica compacta com controles nativos do Intergalactic, importações dedicadas e tokens do tema atual. Mantenha consistentes as unidades, as escalas fixas, a ordenação e a identidade selecionada. Apresente valores textuais e recuperação do estado vazio. Identifique honestamente as métricas de exemplo e o código original do gráfico, sem alegar que são dados medidos do Semrush.
05
Semrush Intergalactic Fontes e Escopo do Sistema de Design
OpenDesign Guia da aplicação. Os seis registros de palavras-chave e todas as métricas são fictícios. Controles nativos do Intergalactic envolvem um gráfico original HTML; ele não é um relatório do Semrush nem uma implementação de gráfico D3 nativo.
