Revert "feat: color-code rank badges in backlinks tables (#73)"
This reverts commit 7334a83cbd5aa367bbbaa406671eb74589bf73b8.
This commit is contained in:
parent
c1190550b0
commit
26f433caf8
@ -10,7 +10,6 @@ import {
|
|||||||
BacklinksSourceLink,
|
BacklinksSourceLink,
|
||||||
} from "./BacklinksPageLinks";
|
} from "./BacklinksPageLinks";
|
||||||
import type { BacklinksOverviewData } from "./backlinksPageTypes";
|
import type { BacklinksOverviewData } from "./backlinksPageTypes";
|
||||||
import { scoreTierClass } from "../keywords/utils";
|
|
||||||
import {
|
import {
|
||||||
DEFAULT_BACKLINKS_SORT,
|
DEFAULT_BACKLINKS_SORT,
|
||||||
DEFAULT_REFERRING_DOMAINS_SORT,
|
DEFAULT_REFERRING_DOMAINS_SORT,
|
||||||
@ -79,9 +78,7 @@ export function ReferringDomainsTable({
|
|||||||
<td className="font-medium break-all">{row.domain ?? "-"}</td>
|
<td className="font-medium break-all">{row.domain ?? "-"}</td>
|
||||||
<td>{formatNumber(row.backlinks)}</td>
|
<td>{formatNumber(row.backlinks)}</td>
|
||||||
<td>{formatNumber(row.referringPages)}</td>
|
<td>{formatNumber(row.referringPages)}</td>
|
||||||
<td>
|
<td>{formatNumber(row.rank)}</td>
|
||||||
<RankBadge value={row.rank} />
|
|
||||||
</td>
|
|
||||||
<td>{formatDecimal(row.spamScore)}</td>
|
<td>{formatDecimal(row.spamScore)}</td>
|
||||||
<td>{formatCompactDate(row.firstSeen)}</td>
|
<td>{formatCompactDate(row.firstSeen)}</td>
|
||||||
<td>
|
<td>
|
||||||
@ -132,9 +129,7 @@ export function TopPagesTable({
|
|||||||
</td>
|
</td>
|
||||||
<td>{formatNumber(row.backlinks)}</td>
|
<td>{formatNumber(row.backlinks)}</td>
|
||||||
<td>{formatNumber(row.referringDomains)}</td>
|
<td>{formatNumber(row.referringDomains)}</td>
|
||||||
<td>
|
<td>{formatNumber(row.rank)}</td>
|
||||||
<RankBadge value={row.rank} />
|
|
||||||
</td>
|
|
||||||
<td>{formatNumber(row.brokenBacklinks)}</td>
|
<td>{formatNumber(row.brokenBacklinks)}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
@ -183,18 +178,19 @@ function BacklinksTableRow({
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>{hasNotableFlags ? <BacklinkFlags row={row} /> : null}</td>
|
<td>{hasNotableFlags ? <BacklinkFlags row={row} /> : null}</td>
|
||||||
<td
|
<td className="text-right tabular-nums text-sm">
|
||||||
className="text-center"
|
<span
|
||||||
title={
|
title={
|
||||||
row.spamScore != null
|
row.spamScore != null
|
||||||
? `Spam score: ${formatDecimal(row.spamScore)}`
|
? `Spam score: ${formatDecimal(row.spamScore)}`
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<RankBadge value={row.rank} />
|
{formatNumber(row.rank)}
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="text-center">
|
<td className="text-right tabular-nums text-sm">
|
||||||
<RankBadge value={row.domainFromRank} />
|
{formatNumber(row.domainFromRank)}
|
||||||
</td>
|
</td>
|
||||||
<td className="whitespace-nowrap text-sm">
|
<td className="whitespace-nowrap text-sm">
|
||||||
<div>{formatCompactDate(row.firstSeen)}</div>
|
<div>{formatCompactDate(row.firstSeen)}</div>
|
||||||
@ -208,18 +204,6 @@ function BacklinksTableRow({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function RankBadge({ value }: { value: number | null }) {
|
|
||||||
if (value == null) return <span>-</span>;
|
|
||||||
const tierClass = scoreTierClass(value, /* higherIsBetter */ true);
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={`score-badge ${tierClass} inline-flex items-center justify-center rounded-full size-6 text-[10px] font-semibold`}
|
|
||||||
>
|
|
||||||
{value}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function BacklinkFlags({
|
function BacklinkFlags({
|
||||||
row,
|
row,
|
||||||
}: {
|
}: {
|
||||||
|
|||||||
@ -1,16 +1,12 @@
|
|||||||
export { LOCATIONS, getLanguageCode } from "./locations";
|
export { LOCATIONS, getLanguageCode } from "./locations";
|
||||||
|
|
||||||
export function scoreTierClass(
|
export function scoreTierClass(value: number | null): string {
|
||||||
value: number | null,
|
|
||||||
higherIsBetter?: boolean,
|
|
||||||
): string {
|
|
||||||
if (value == null) return "score-tier-na";
|
if (value == null) return "score-tier-na";
|
||||||
const v = higherIsBetter ? 100 - value : value;
|
if (value <= 20) return "score-tier-1";
|
||||||
if (v <= 20) return "score-tier-1";
|
if (value <= 35) return "score-tier-2";
|
||||||
if (v <= 35) return "score-tier-2";
|
if (value <= 50) return "score-tier-3";
|
||||||
if (v <= 50) return "score-tier-3";
|
if (value <= 65) return "score-tier-4";
|
||||||
if (v <= 65) return "score-tier-4";
|
if (value <= 80) return "score-tier-5";
|
||||||
if (v <= 80) return "score-tier-5";
|
|
||||||
return "score-tier-6";
|
return "score-tier-6";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user