Summary
Basic usage
Display Skeleton during initial data loading.
Visibility
last 30 daysEstimated traffic
last 30 daysAverage position
last 30 daystsx
import React, { useEffect, useState } from 'react';
import { Flex } from '@semcore/flex-box';
import { Text } from '@semcore/typography';
import Divider from '@semcore/divider';
import { DescriptionTooltip } from '@semcore/tooltip';
import Info from '@semcore/icon/Info/m';
import Link from '@semcore/link';
import Button from '@semcore/button';
import Skeleton from '@semcore/skeleton';
const Demo = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
const timer = setTimeout(() => {
setLoading(false);
}, 3000);
return () => {
clearTimeout(timer);
};
}, [loading]);
return (
<>
<Flex gap={6}>
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Visibility
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About visibility'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About visibility'>
<Text size={200}>
The Visibility index is based on click-through rate (CTR) that shows a website's
progress in Google's top 100 for keywords from the current tracking campaign. A
zero- percent visibility means that the domain isn't ranking in Google's top 100
results for any of these keywords; and a 100-percent visibility means that the
domain keeps the first position in the SERP for all of these keywords.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex alignItems='baseline' gap={1} mt={1}>
{!loading && (
<>
<Link
size={500}
color='text-large-info'
fontWeight='bold'
href='https://semrush.com'
target='_blank'
>
42
</Link>
<Text size={100} color='text-secondary' noWrap>
no change
</Text>
</>
)}
<Skeleton hidden={!loading} h={28} w={80}>
<Skeleton.Text amount={1} h='100%' />
</Skeleton>
</Flex>
</Flex>
<Divider orientation='vertical' />
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Estimated traffic
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About estimated traffic'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About estimated traffic'>
<Text size={200}>
An estimation based on the average click-through rate of each position in Google's
results multiplied by the volume of the keyword, and divided by 30 (i.e., the
number of days in a month). It shows the probability that a user will click on a
domain's search result depending on this domain's position in the SERP.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex alignItems='baseline' gap={1} mt={1}>
{!loading && (
<>
<Link
size={500}
color='text-large-info'
fontWeight='bold'
href='https://semrush.com'
target='_blank'
>
24,765
</Link>
<Text size={100} color='text-critical' noWrap>
−4
</Text>
</>
)}
<Skeleton hidden={!loading} h={28} w={80}>
<Skeleton.Text amount={1} h='100%' />
</Skeleton>
</Flex>
</Flex>
<Divider orientation='vertical' />
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Average position
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About Average position'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About Average position'>
<Text size={200}>
The average of your rankings for all keywords in your Position Tracking campaign.
Any keyword you're not ranking for will be assigned a rank of 100.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex alignItems='baseline' gap={1} mt={1}>
{!loading && (
<>
<Link
size={500}
color='text-large-info'
fontWeight='bold'
href='https://semrush.com'
target='_blank'
>
908
</Link>
<Text size={100} color='text-success'>
+12
</Text>
</>
)}
<Skeleton hidden={!loading} h={28} w={80}>
<Skeleton.Text amount={1} h='100%' />
</Skeleton>
</Flex>
</Flex>
</Flex>
<Button onClick={() => setLoading(true)} mt={6}>
Restart loading
</Button>
</>
);
};
export default Demo;
Vertical layout with Mini chart
You have the option to arrange metrics vertically.
You can show Mini charts alongside metrics. Remember to set aria-hidden
, or add a meaningful aria-label
.
tsx
import React from 'react';
import { Flex } from '@semcore/flex-box';
import { Text } from '@semcore/typography';
import { DescriptionTooltip } from '@semcore/tooltip';
import MiniChart from '@semcore/mini-chart';
import Link from '@semcore/link';
import Divider from '@semcore/divider';
import Info from '@semcore/icon/Info/m';
const Demo = () => (
<Flex gap={6} direction='column' w='min-content'>
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Visibility
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About visibility'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About visibility'>
<Text size={200}>
The Visibility index is based on click-through rate (CTR) that shows a website's
progress in Google's top 100 for keywords from the current tracking campaign. A zero-
percent visibility means that the domain isn't ranking in Google's top 100 results for
any of these keywords; and a 100-percent visibility means that the domain keeps the
first position in the SERP for all of these keywords.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex alignItems='baseline' gap={1} mt={1}>
<Text size={500} color='text-large-secondary' bold noWrap>
n/a
</Text>
</Flex>
</Flex>
<Divider />
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Estimated traffic
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About estimated traffic'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About estimated traffic'>
<Text size={200}>
An estimation based on the average click-through rate of each position in Google's
results multiplied by the volume of the keyword, and divided by 30 (i.e., the number
of days in a month). It shows the probability that a user will click on a domain's
search result depending on this domain's position in the SERP.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex alignItems='baseline' gap={1} mt={1}>
<Link
size={500}
color='text-large-info'
fontWeight='bold'
href='https://semrush.com'
target='_blank'
>
24,765
</Link>
<Text size={100} color='text-critical' noWrap>
−4
</Text>
<MiniChart.TrendArea
aria-hidden
data={[20, 50, 33, 80, 70, 35, 10, 40, 90, 50]}
w={34}
h={20}
/>
</Flex>
</Flex>
<Divider />
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Average position
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About Average position'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About Average position'>
<Text size={200}>
The average of your rankings for all keywords in your Position Tracking campaign. Any
keyword you're not ranking for will be assigned a rank of 100.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex alignItems='baseline' gap={1} mt={1}>
<Link
size={500}
color='text-large-info'
fontWeight='bold'
href='https://semrush.com'
target='_blank'
>
908
</Link>
<Text size={100} color='text-success'>
+12
</Text>
</Flex>
</Flex>
</Flex>
);
export default Demo;
Summary with error
tsx
import React from 'react';
import { Flex } from '@semcore/flex-box';
import { Text } from '@semcore/typography';
import { Hint, DescriptionTooltip } from '@semcore/tooltip';
import Warning from '@semcore/icon/Warning/m';
import { ButtonLink } from '@semcore/button';
import Divider from '@semcore/divider';
import Info from '@semcore/icon/Info/m';
const Demo = () => (
<Flex gap={6}>
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Visibility
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About visibility'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About visibility'>
<Text size={200}>
The Visibility index is based on click-through rate (CTR) that shows a website's
progress in Google's top 100 for keywords from the current tracking campaign. A zero-
percent visibility means that the domain isn't ranking in Google's top 100 results for
any of these keywords; and a 100-percent visibility means that the domain keeps the
first position in the SERP for all of these keywords.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex gap={2} mt={1} h={28} alignItems='center'>
<Hint
tag={Warning}
title='Something went wrong'
aria-hidden={false}
color='icon-secondary-neutral'
/>
<ButtonLink>Reload</ButtonLink>
</Flex>
</Flex>
<Divider orientation='vertical' />
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Estimated traffic
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About estimated traffic'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About estimated traffic'>
<Text size={200}>
An estimation based on the average click-through rate of each position in Google's
results multiplied by the volume of the keyword, and divided by 30 (i.e., the number
of days in a month). It shows the probability that a user will click on a domain's
search result depending on this domain's position in the SERP.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex gap={2} mt={1} h={28} alignItems='center'>
<Hint
tag={Warning}
title='Something went wrong'
aria-hidden={false}
color='icon-secondary-neutral'
/>
<ButtonLink>Reload</ButtonLink>
</Flex>
</Flex>
<Divider orientation='vertical' />
<Flex direction='column'>
<Flex gap={1} alignItems='center'>
<Text size={200} noWrap>
Average position
</Text>
<DescriptionTooltip>
<DescriptionTooltip.Trigger
tag={Info}
interactive
aria-label='About Average position'
color='icon-secondary-neutral'
/>
<DescriptionTooltip.Popper aria-label='About Average position'>
<Text size={200}>
The average of your rankings for all keywords in your Position Tracking campaign. Any
keyword you're not ranking for will be assigned a rank of 100.
</Text>
</DescriptionTooltip.Popper>
</DescriptionTooltip>
</Flex>
<Text size={100} color='text-secondary'>
last 30 days
</Text>
<Flex gap={2} mt={1} h={28} alignItems='center'>
<Hint
tag={Warning}
title='Something went wrong'
aria-hidden={false}
color='icon-secondary-neutral'
/>
<ButtonLink>Reload</ButtonLink>
</Flex>
</Flex>
</Flex>
);
export default Demo;