GeoList

Code

import { GeoList } from "@fadymondy/nasaq/web";export function Audience() {  return (    <GeoList      valueLabel="Users"      rows={[        { code: "SA", value: 12400, previous: 11200 },        { code: "EG", value: 8100, previous: 8600 },      ]}    />  );}

Analytics · beta

Live examples and controls: GeoList in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/geo-list.json

GeoList turns ISO country codes into rows with a flag and the country's name in the active language (via Intl.DisplayNames), then hands them to BreakdownTable. Unknown codes fall back to the code and an "Unknown" label.

When to useCopy Anchor Link

• Audience by country in analytics, search and video reports.
• Any ranking of ISO 3166-1 alpha-2 regions.

When not to useCopy Anchor Link

• Cities or regions without ISO codes: use BreakdownTable.
• A map: this is a list.

ImportCopy Anchor Link

import { GeoList } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { GeoList } from "@fadymondy/nasaq/web";

export function Audience() {
  return (
    <GeoList
      valueLabel="Users"
      rows={[
        { code: "SA", value: 12400, previous: 11200 },
        { code: "EG", value: 8100, previous: 8600 },
      ]}
    />
  );
}

AnatomyCopy Anchor Link

GeoList                data-slot="breakdown-table"  (BreakdownTable underneath)
  row label            flag + country name

APICopy Anchor Link

GeoListCopy Anchor Link

ExamplesCopy Anchor Link

Arabic country names:

import { GeoList, NasaqProvider } from "@fadymondy/nasaq/web";

export const Ar = () => (
  <NasaqProvider locale="ar">
    <GeoList valueLabel="المستخدمون" rows={[{ code: "SA", value: 12400 }, { code: "AE", value: 5200 }]} />
  </NasaqProvider>
);

Unknown code:

import { GeoList } from "@fadymondy/nasaq/web";

export const Unknown = () => <GeoList valueLabel="Users" rows={[{ code: "ZZ", value: 310 }]} />;

AccessibilityCopy Anchor Link

Same as BreakdownTable. The flag is an emoji shown with the country name beside it, so the name is always readable.

RTL & i18nCopy Anchor Link

• Country names come from Intl.DisplayNames in the active locale.
• Flags never mirror.
• Every figure uses the active locale with Western digits and is bidi-isolated (Num), so +12.4% keeps its order in Arabic.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Inherits the BreakdownTable slots.

Do / Don'tCopy Anchor Link

• Do pass ISO alpha-2 codes.
• Don't pass country names; they cannot be localised.

RelatedCopy Anchor Link

• breakdown-table
• metric-tiles
• google-analytics-page

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-analytics-geo-list--docs