Skip to content

Summary

Basic usage

Display Skeleton during initial data loading.

Visibility
last 30 days
Estimated traffic
last 30 days
Average position
last 30 days
tsx
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>
                  &minus;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>
          &minus;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;

Last updated:

Released under the MIT License.

Released under the MIT License.