Tailwind CSS Data Maps Blocks

Data Maps

Tailwind CSS geo analytics and regional data map blocks for dashboards, coverage views, and location-based reporting.

Regional Map Card with Ranking List Pro

The card combines a regional map, summary totals, and a ranked region list in one split layout.

Create a responsive UI block named "Regional Map Card with Ranking List" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/data-maps/#regional-map-card-with-ranking-list. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: data-display/data-maps
- Block ID: regional-map-card-with-ranking-list
- Source description: The card combines a regional map, summary totals, and a ranked region list in one split layout.
- Preview iframe: https://preline.co/blocks/data-display/data-maps/iframes/pro/regional-map-card-with-ranking-list.html (repo path: blocks/data-display/data-maps/iframes/pro/regional-map-card-with-ranking-list.html)
- Source markup reference:
  - partials/pro/analytics-dashboard/cards/map-analytics-by-region.html
  - partials/pro/analytics-dashboard/tables/analytics-by-region.html
  - scripts/plugins/datamap.html
  - partials/pro/analytics-dashboard/js/map-analytics-by-region.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve chart/data behavior when present: axes, scale, legends, tooltip rows, colored keys, empty states, responsive height, and the original chart library/data-binding pattern.
- Do not replace charts, maps, sparklines, or data widgets with static SVG or decorative approximations.
- Source content inventory (from the source markup):
  - Card wrapper is `p-4 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl`; inside it a single grid `xl:grid xl:grid-cols-12 xl:items-center xl:gap-x-5` places the map at `xl:col-span-7` and the ranking table at `xl:col-span-5`, stacking below the `xl` breakpoint.
  - The map region is an empty `<div id="hs-users-datamap" class="sm:min-h-107.5"></div>` populated at runtime by `new Datamap({ element, projection: 'mercator', responsive: true, ... })`, which requires d3, topojson, and `datamaps.world.js`; there is no static SVG map in the markup and the container is blank before the script runs.
  - Six countries are highlighted with `fillKey: 'MAJOR'` (BRA, CHN, DEU, GBR, IND, USA) against a default fill for everything else; the hover popup renders a circular country flag, the country name, and two rows labeled `Active:` and `New:` each with a value, a percent, and a teal up or red down trend arrow.
  - The ranking table has exactly four column headers in order: `Country`, `Visits`, `Purchases`, `Change`.
  - Exactly five body rows in this order: `United States` / `10,013` / `$5,361` / `3.2%` with a down arrow; `India` / `8,545` / `$5,361` / `45.8%` up; `China` / `6,837` / `$3,954` / `24.4%` up; `Brasil` / `4,512` / `$2,512` / `12%` down; `United Kingdom` / `2,100` / `$1,012` / `0.1%` down. Keep the `Brasil` spelling exactly.
  - Every country cell starts with an inline 512-viewBox national flag SVG sized `shrink-0 size-5 rounded-full` followed by the name at `gap-x-3`; up trend arrows are teal, down trend arrows use the destructive/red role.
  - The table sits in a horizontally scrollable wrapper with a thin custom scrollbar and `divide-y divide-line-2` row separators; rows are plain text with no links, sorting, pagination, checkboxes, or row actions.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="md:hidden flex items-center gap-x-2 mb-4">
  <span class="inline-flex items-center gap-x-1 text-lg font-medium text-foreground">
    54,382
  </span>
  <span class="inline-flex items-center gap-x-1 text-xs lg:text-sm text-muted-foreground-2">
    <svg class="size-4 text-teal-500 dark:text-teal-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
    1.2%
  </span>
</div>

<div class="xl:grid xl:grid-cols-12 xl:items-center xl:gap-x-5">
  <div class="xl:col-span-7">
    <div id="hs-users-datamap" class="sm:min-h-107.5"></div>
  </div>

<div class="xl:col-span-5">
    
    <div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
      <div class="min-w-full inline-block align-middle">
        
        <table class="min-w-full divide-y divide-line-2">
          <thead>
            <tr class="space-x-2">
              <th scope="col" class="xl:min-w-55 min-w-48">
                <div class="py-2.5 text-text-start flex items-center gap-x-1 text-sm font-normal text-muted-foreground-2">
                  Country
                </div>
              </th>

<th scope="col" class="min-w-25">
                <div class="py-2.5 text-text-start flex items-center gap-x-1 text-sm font-normal text-muted-foreground-2">
                  Visits
                </div>
              </th>

<th scope="col" class="min-w-25">
                <div class="py-2.5 text-text-start flex items-center gap-x-1 text-sm font-normal text-muted-foreground-2">
                  Purchases
                </div>
              </th>

<th scope="col" class="min-w-25">
                <div class="py-2.5 text-text-start flex items-center gap-x-1 text-sm font-normal text-muted-foreground-2">
                  Change
                </div>
              </th>
            </tr>
          </thead>

<tbody class="divide-y divide-line-2">
            <tr>
              <td class="size-px whitespace-nowrap py-3">
                <div class="flex items-center gap-x-3">
                  <svg class="shrink-0 size-5 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-us" viewBox="0 0 512 512">
                    <g fill-rule="evenodd">
                      <g stroke-width="1pt">
                        <path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/>
                        <path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/>
                      </g>
                      <path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"/>
                      <path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"/>
                    </g>
                  </svg>
                  <span class="text-sm font-medium text-foreground">
                    United States
                  </span>
                </div>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  10,013
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  $5,361
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="inline-flex items-center gap-x-1 text-sm text-muted-foreground-2">
                  3.2%
                  <svg class="shrink-0 size-4 text-destructive" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
                </span>
              </td>
            </tr>

<tr>
              <td class="size-px whitespace-nowrap py-3">
                <div class="flex items-center gap-x-3">
                  <svg class="shrink-0 size-5 rounded-full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icon-css-in" viewBox="0 0 512 512">
                    <path fill="#f93" d="M0 0h512v170.7H0z"/>
                    <path fill="#fff" d="M0 170.7h512v170.6H0z"/>
                    <path fill="#128807" d="M0 341.3h512V512H0z"/>
                    <g transform="translate(256 256) scale(3.41333)">
                      <circle r="20" fill="#008"/>
                      <circle r="17.5" fill="#fff"/>
                      <circle r="3.5" fill="#008"/>
                      <g id="d">
                        <g id="c">
                          <g id="b">
                            <g id="a" fill="#008">
                              <circle r=".9" transform="rotate(7.5 -8.8 133.5)"/>
                              <path d="M0 17.5L.6 7 0 2l-.6 5L0 17.5z"/>
                            </g>
                            <use width="100%" height="100%" transform="rotate(15)" xlink:href="#a"/>
                          </g>
                          <use width="100%" height="100%" transform="rotate(30)" xlink:href="#b"/>
                        </g>
                        <use width="100%" height="100%" transform="rotate(60)" xlink:href="#c"/>
                      </g>
                      <use width="100%" height="100%" transform="rotate(120)" xlink:href="#d"/>
                      <use width="100%" height="100%" transform="rotate(-120)" xlink:href="#d"/>
                    </g>
                  </svg>
                  <span class="text-sm font-medium text-foreground">
                    India
                  </span>
                </div>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  8,545
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  $5,361
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="inline-flex items-center gap-x-1 text-sm text-muted-foreground-2">
                  45.8%
                  <svg class="shrink-0 size-4 text-teal-500 dark:text-teal-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
                </span>
              </td>
            </tr>

<tr>
              <td class="size-px whitespace-nowrap py-3">
                <div class="flex items-center gap-x-3">
                  <svg class="shrink-0 size-5 rounded-full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
                    <defs>
                      <path id="cn12da" fill="#ffde00" d="M1-.3-.7.8 0-1 .6.8-1-.3z"/>
                    </defs>
                    <path fill="#de2910" d="M0 0h512v512H0z"/>
                    <use xlink:href="#cn12da" width="30" height="20" transform="matrix(76.8 0 0 76.8 128 128)"/>
                    <use xlink:href="#cn12da" width="30" height="20" transform="rotate(-121 142.6 -47) scale(25.5827)"/>
                    <use xlink:href="#cn12da" width="30" height="20" transform="rotate(-98.1 198 -82) scale(25.6)"/>
                    <use xlink:href="#cn12da" width="30" height="20" transform="rotate(-74 272.4 -114) scale(25.6137)"/>
                    <use xlink:href="#cn12da" width="30" height="20" transform="matrix(16 -19.968 19.968 16 256 230.4)"/>
                  </svg>
                  <span class="text-sm font-medium text-foreground">
                    China
                  </span>
                </div>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  6,837
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  $3,954
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="inline-flex items-center gap-x-1 text-sm text-muted-foreground-2">
                  24.4%
                  <svg class="shrink-0 size-4 text-teal-500 dark:text-teal-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
                </span>
              </td>
            </tr>

<tr>
              <td class="size-px whitespace-nowrap py-3">
                <div class="flex items-center gap-x-3">
                  <svg class="shrink-0 size-5 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icons-br" viewBox="0 0 512 512">
                    <g stroke-width="1pt">
                      <path fill="#229e45" fill-rule="evenodd" d="M0 0h512v512H0z"/>
                      <path fill="#f8e509" fill-rule="evenodd" d="m261.4 405.4 229.8-149.2L260 106.6l-230.7 150 232 148.8z"/>
                      <path fill="#2b49a3" fill-rule="evenodd" d="M361.5 256a97.2 97.2 0 1 1-194.3-.2 97.2 97.2 0 0 1 194.3.2z"/>
                      <path fill="#ffffef" fill-rule="evenodd" d="m232.3 314.2-3-1.8-3.1 1.6.7-3.5-2.4-2.5 3.4-.4 1.6-3.2 1.5 3.3 3.4.6-2.6 2.4m65.7 20-3-1.8-3.2 1.6.7-3.5-2.4-2.5 3.5-.4 1.6-3.2 1.4 3.3 3.4.6-2.5 2.4m-27.6-22.9-2.6-1.5-2.7 1.3.6-3-2-2.2 2.9-.3 1.4-2.7 1.2 2.8 3 .5-2.2 2m66.2-6.4-2.6-1.5-2.6 1.3.6-2.9-2-2.1 2.9-.4 1.3-2.6 1.3 2.7 2.9.5-2.2 2m-66.6-16.7-3-1.8-3.1 1.6.7-3.5-2.4-2.5 3.4-.4 1.6-3.1 1.5 3.2 3.4.6-2.6 2.4M188 245l-3-1.8-3 1.6.6-3.5-2.4-2.5 3.5-.4 1.6-3.2 1.4 3.3 3.4.6-2.5 2.4m10.1 43.5-3-1.7-3.1 1.5.7-3.4-2.4-2.6 3.4-.4 1.6-3 1.5 3.1 3.4.7-2.6 2.3m100.6-51.3-2.6-1.5-2.8 1.3.6-3-2-2.3 3-.3 1.4-2.8 1.3 2.9 3 .5-2.3 2.1m-5 29.2L290 255l-2.1 1 .4-2.4-1.6-1.7 2.4-.3 1.1-2.2 1 2.3 2.4.4-1.8 1.6m-108.4 38.5-2-1.2-2.1 1 .4-2.3-1.6-1.7 2.4-.2 1-2 1 2 2.3.5-1.7 1.6m152.6 11.5-1.7-.8-1.7.7.4-1.7-1.3-1.3 1.9-.2.9-1.5.7 1.6 1.9.3-1.4 1.2"/>
                      <path fill="#ffffef" fill-rule="evenodd" d="m183.5 292.3-2-1.2-2.1 1 .5-2.3-1.7-1.7 2.3-.2 1.1-2 1 2 2.3.5-1.7 1.6"/>
                      <path fill="#ffffef" fill-rule="evenodd" d="m183.5 292.3-2-1.2-2.1 1 .5-2.3-1.7-1.7 2.3-.2 1.1-2 1 2 2.3.5-1.7 1.6m32.2 2.3-2-1.2-2 1 .4-2.3-1.6-1.7 2.3-.2 1-2.1 1 2.1 2.3.5-1.7 1.6m-3.7 13-2-1.2-2 1 .4-2.3-1.6-1.7 2.3-.3 1-2 1 2 2.3.5-1.7 1.6m66.7-17-2-1.2-2.1 1 .4-2.3-1.6-1.7 2.3-.2 1.1-2.1 1 2.1 2.2.4-1.7 1.6m-19.1 2.4-2-1.2-2.1 1 .5-2.3-1.6-1.7 2.3-.2 1-2.1 1 2.1 2.3.4-1.7 1.6m-52.5-4.4-1.2-.7-1.3.6.2-1.5-1-1 1.5-.2.7-1.3.5 1.4 1.5.2-1 1M333.2 310l-2-1.1-2.1 1 .5-2.3-1.6-1.7 2.3-.3 1-2 1 2 2.3.5-1.7 1.6m-16 4.4-1.6-1-1.7 1 .4-2-1.4-1.4 2-.2.8-1.7.8 1.7 2 .4-1.5 1.3m8 1.8-1.6-1-1.6.9.3-1.8-1.2-1.3 1.8-.2.8-1.6.7 1.6 1.8.3-1.3 1.3m22.2-17.4-1.5-.9-1.6.8.4-1.7-1.2-1.3 1.7-.2.8-1.5.7 1.6 1.7.3-1.3 1.2M317 322.9l-2-1.1-2 1 .5-2.2-1.6-1.5 2.2-.3 1.1-1.9 1 2 2.1.4-1.6 1.4m.4 10.9-1.8-1-1.8.9.4-2.2-1.4-1.5 2-.3 1-1.9.8 2 2 .4-1.5 1.4M302.3 312l-1.5-.9-1.6.8.4-1.8-1.2-1.2 1.7-.2.8-1.6.7 1.6 1.7.3-1.3 1.2m-13.5 1.8-1.5-.9-1.6.8.4-1.8-1.2-1.2 1.7-.2.8-1.6.7 1.6 1.7.3-1.2 1.2M265 291.4l-1.5-.9-1.6.8.4-1.7-1.2-1.3 1.7-.2.8-1.5.7 1.6 1.7.3-1.3 1.1m2.9 43.5-1.3-.7-1.3.7.3-1.5-1-1 1.4-.3.7-1.3.6 1.4 1.5.2-1.1 1m-35.2-66-3-1.7-3.1 1.5.7-3.4-2.4-2.6 3.4-.4 1.6-3.1 1.5 3.2 3.4.6-2.6 2.4"/>
                      <path fill="#fff" fill-rule="evenodd" d="M355.1 291a95 95 0 0 0 4.4-15.1c-51.6-45.4-109.2-68.7-182-63.9a95 95 0 0 0-6.4 15.9 233 233 0 0 1 184 63z"/>
                      <path fill="#309e3a" d="m331.9 265.4 1.8 1a2.6 2.6 0 0 0-.2 1.8c.1.4.5.9 1 1.2.6.4 1.1.6 1.6.6.4 0 .8-.3 1-.6.1-.2.2-.4.1-.7l-.3-.8-1.2-1.3a5.9 5.9 0 0 1-1.4-2.3 2.8 2.8 0 0 1 1.6-3.3 2.9 2.9 0 0 1 1.7-.2 5.3 5.3 0 0 1 2 .9 6 6 0 0 1 2 2.4 3 3 0 0 1-.5 2.6l-1.8-1.1c.2-.5.3-1 .2-1.4-.1-.3-.5-.7-1-1-.5-.4-1-.5-1.4-.5a.8.8 0 0 0-.6.3.8.8 0 0 0-.1.7c0 .4.5 1 1.2 1.7l1.5 2a3 3 0 0 1-.2 3.2 3.1 3.1 0 0 1-1.4 1.1 3 3 0 0 1-1.9.2 6 6 0 0 1-2.1-1 4.6 4.6 0 0 1-2-2.5c-.3-.9-.2-1.9.4-3zm-8.8-5.7 2 1a2.6 2.6 0 0 0-.2 1.6c.1.5.5 1 1 1.3.6.4 1.1.5 1.6.4.4 0 .8-.2 1-.6a1 1 0 0 0 .1-.6c0-.3-.1-.5-.4-.8l-1.2-1.3a6 6 0 0 1-1.5-2.2 2.8 2.8 0 0 1 .3-2.4 2.8 2.8 0 0 1 1.2-1 3 3 0 0 1 1.7-.2c.6 0 1.2.3 2 .8 1 .7 1.8 1.4 2 2.3a3 3 0 0 1-.3 2.6l-1.9-1.1c.3-.5.3-1 .2-1.3-.2-.4-.5-.7-1-1a2.4 2.4 0 0 0-1.5-.5.8.8 0 0 0-.6.4.8.8 0 0 0 0 .7c0 .3.5.9 1.2 1.7.8.7 1.3 1.4 1.6 1.8a3 3 0 0 1-.1 3.3 3.2 3.2 0 0 1-3.2 1.4 6.1 6.1 0 0 1-2.2-.9 4.7 4.7 0 0 1-2.1-2.4 4.1 4.1 0 0 1 .3-3zm-10.8-3 5.6-9 6.7 4-1 1.6-4.8-3-1.3 2 4.6 2.8-1 1.6-4.5-2.8-1.5 2.5 5 3-.9 1.6-6.9-4.2zm-15.8-12.9.9-1.6 4 2.2-1.9 3.7a7.2 7.2 0 0 1-4.8-.6 5.8 5.8 0 0 1-2.2-2 4.5 4.5 0 0 1-.8-2.6c0-1 .3-1.9.8-2.8a6.1 6.1 0 0 1 2-2.3c.7-.6 1.7-.9 2.7-.9.7 0 1.6.3 2.5.7a5 5 0 0 1 2.3 2.2c.4.8.5 1.7.3 2.7l-2.1-.6a2.2 2.2 0 0 0-.2-1.5 2.5 2.5 0 0 0-1.2-1.1 2.9 2.9 0 0 0-2.4-.3c-.7.3-1.4 1-2 2a4.8 4.8 0 0 0-.5 3c.2.8.7 1.4 1.6 1.8l1.3.4h1.3l.6-1.2-2.2-1.2zm-68.8-17 1.6-10.6 3.2.5.8 7.5 3-7 3.1.5-1.5 10.6-2-.3 1.2-8.3-3.3 8-2-.3-.9-8.7-1.2 8.4-2-.3zm-10.7-1.3 1-10.6 7.8.7-.1 1.8-5.8-.5-.2 2.3 5.3.5-.1 1.8-5.3-.5-.3 3 5.9.5-.2 1.8-8-.8z"/>
                      <g stroke-opacity=".5">
                        <path fill="#309e3a" d="M181.4 218.8c0-1 .2-2 .5-2.7l1-1.4 1.5-1a5.8 5.8 0 0 1 2.3-.3 5 5 0 0 1 3.7 1.6c1 1 1.3 2.3 1.3 4 0 1.8-.6 3.1-1.5 4a5 5 0 0 1-3.8 1.4 5 5 0 0 1-3.7-1.5 5 5 0 0 1-1.3-4z"/>
                        <path fill="#f7ffff" d="M183.6 218.8c0 1.2.2 2.2.8 2.8.5.7 1.2 1 2 1a3 3 0 0 0 2.2-.9c.5-.6.8-1.5.9-2.7 0-1.3-.2-2.2-.8-2.8a2.7 2.7 0 0 0-2-1c-1 0-1.7.3-2.2.9-.6.6-.9 1.5-1 2.7z"/>
                      </g>
                      <g stroke-opacity=".5">
                        <path fill="#309e3a" d="m194 224.4.1-10.7h4.5c1.2 0 2 .2 2.5.4s1 .5 1.2 1 .5 1 .5 1.7c0 .8-.3 1.4-.7 2-.5.5-1.2.8-2.2 1 .5.2.9.5 1.2.8l1.2 1.8 1.3 2H201l-1.5-2.3a16 16 0 0 0-1.2-1.6 1.6 1.6 0 0 0-.6-.4 3.5 3.5 0 0 0-1-.2h-.5v4.5H194z"/>
                        <path fill="#fff" d="M196.2 218.2h1.6a8.1 8.1 0 0 0 2 0l.5-.5c.2-.2.3-.5.3-.8 0-.4-.1-.7-.3-.9a1.3 1.3 0 0 0-.8-.4h-3.2v2.6z"/>
                      </g>
                      <g stroke-opacity=".5">
                        <path fill="#309e3a" d="m206.2 214.2 3.9.2a7.6 7.6 0 0 1 2 .3 4 4 0 0 1 1.5 1 5 5 0 0 1 1 1.9c.2.7.2 1.5.2 2.5a5.3 5.3 0 0 1-1.7 4.1c-.4.3-.9.6-1.5.8h-2l-4-.1.6-10.7z"/>
                        <path fill="#fff" d="m208.2 216.1-.3 7 1.6.2h1.3l.9-.5c.3-.2.4-.5.6-1l.3-2-.1-1.8c-.2-.5-.3-.8-.6-1a2 2 0 0 0-1-.6 9.6 9.6 0 0 0-1.7-.2h-1z"/>
                      </g>
                      <g stroke-opacity=".5">
                        <path fill="#309e3a" d="m258.5 233.3 2.5-10.4 3.3.8c1.3.3 2.1.6 2.5.8.5.3 1 .7 1.2 1.3.3.7.3 1.4.1 2.2a3 3 0 0 1-1.9 2.3 3 3 0 0 1-1.1.3 12 12 0 0 1-2.2-.4l-1.4-.3-1 3.9-2-.5z"/>
                        <path fill="#fff" d="m262.6 225.2-.7 3 1.2.2c.8.2 1.4.3 1.7.2a1.4 1.4 0 0 0 1.2-1l-.1-1.1a1.5 1.5 0 0 0-.8-.7l-1.5-.4-1-.2z"/>
                      </g>
                      <g stroke-opacity=".5">
                        <path fill="#309e3a" d="m268.4 236.3 3.5-10.1 4.3 1.5a8 8 0 0 1 2.2 1c.4.4.7.9.9 1.5s0 1.1-.2 1.7c-.2.8-.7 1.3-1.3 1.6a3 3 0 0 1-2.3.3l.8 1.2.6 2 .5 2.4-2.4-.8-.7-2.7a14.5 14.5 0 0 0-.6-1.9 1.6 1.6 0 0 0-.4-.6 3.4 3.4 0 0 0-1-.5l-.4-.1-1.5 4.2-2-.7z"/>
                        <path fill="#fff" d="m272.4 231.2 1.5.5 1.9.5c.3 0 .5 0 .7-.2l.5-.7v-1a1.3 1.3 0 0 0-.6-.6l-1.5-.5-1.6-.6-.9 2.6z"/>
                      </g>
                      <g stroke-opacity=".5">
                        <path fill="#309e3a" d="M280.9 235.9a6.8 6.8 0 0 1 1.3-2.5c.3-.5.8-.8 1.3-1.1a4.2 4.2 0 0 1 1.6-.5c.7 0 1.5 0 2.3.3a5 5 0 0 1 3.2 2.5c.6 1.2.7 2.7.1 4.3a5.6 5.6 0 0 1-2.5 3.5 5 5 0 0 1-4 .2 5 5 0 0 1-3.2-2.5 5.5 5.5 0 0 1-.1-4.2z"/>
                        <path fill="#fff" d="M283 236.5c-.3 1.1-.3 2 0 2.8.4.8 1 1.3 1.8 1.6.8.2 1.5.1 2.2-.3.7-.4 1.3-1.2 1.7-2.4.3-1.2.3-2.1 0-2.9a2.7 2.7 0 0 0-1.8-1.5 2.7 2.7 0 0 0-2.3.3c-.7.4-1.2 1.2-1.6 2.4z"/>
                      </g>
                      <g stroke-opacity=".5">
                        <path fill="#309e3a" d="m301.7 250.8 4.9-9.5 4 2c1 .6 1.7 1 2 1.4.4.5.6 1 .7 1.5s0 1.2-.4 1.7c-.3.7-.8 1.2-1.5 1.5-.7.2-1.4.2-2.3-.1.3.4.5.9.6 1.3l.3 2.1.2 2.5-2.3-1.2-.3-2.8-.3-2a1.6 1.6 0 0 0-.4-.6 3.5 3.5 0 0 0-.9-.6l-.4-.2-2 4-1.9-1z"/>
                        <path fill="#fff" d="m306.4 246.3 1.4.7 1.8.8c.3 0 .5 0 .7-.2a1.5 1.5 0 0 0 .8-1.5 1.3 1.3 0 0 0-.6-.7 21 21 0 0 0-1.3-.8l-1.5-.7-1.3 2.4z"/>
                      </g>
                      <g stroke-opacity=".5">
                        <path fill="#309e3a" d="M341.2 270.3c.6-1 1.2-1.6 2-2a5 5 0 0 1 1.6-.7 4.2 4.2 0 0 1 1.6 0c.7.1 1.5.4 2.2 1a5 5 0 0 1 2.3 3.3 6 6 0 0 1-1.1 4.1 5.6 5.6 0 0 1-3.5 2.6 5 5 0 0 1-3.9-.9 5 5 0 0 1-2.3-3.3 5.5 5.5 0 0 1 1-4.1z"/>
                        <path fill="#fff" d="M343 271.4c-.6 1-.9 2-.8 2.8a3 3 0 0 0 1.3 2 2.7 2.7 0 0 0 2.2.4c.8-.2 1.6-.8 2.3-1.9.7-1 1-1.9.8-2.7 0-.8-.5-1.4-1.2-2s-1.5-.6-2.3-.4c-.8.2-1.5.8-2.2 1.8z"/>
                      </g>
                      <path fill="#309e3a" d="m246.4 229 1.7-7.6 5.6 1.3-.3 1.3-4-1-.4 1.7 3.7.9-.3 1.3-3.7-1-.5 2.1 4.2 1-.3 1.3-5.7-1.3z"/>
                    </g>
                  </svg>
                  <span class="text-sm font-medium text-foreground">
                    Brasil
                  </span>
                </div>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  4,512
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  $2,512
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="inline-flex items-center gap-x-1 text-sm text-muted-foreground-2">
                  12%
                  <svg class="shrink-0 size-4 text-destructive" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
                </span>
              </td>
            </tr>

<tr>
              <td class="size-px whitespace-nowrap py-3">
                <div class="flex items-center gap-x-3">
                  <svg class="shrink-0 size-5 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icons-de" viewBox="0 0 512 512">
                    <path fill="#ffce00" d="M0 341.3h512V512H0z"/>
                    <path d="M0 0h512v170.7H0z"/>
                    <path fill="#d00" d="M0 170.7h512v170.6H0z"/>
                  </svg>
                  <span class="text-sm font-medium text-foreground">
                    Germany
                  </span>
                </div>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  3,795
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  $1,173
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="inline-flex items-center gap-x-1 text-sm text-muted-foreground-2">
                  0.9%
                  <svg class="shrink-0 size-4 text-teal-500 dark:text-teal-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
                </span>
              </td>
            </tr>

<tr>
              <td class="size-px whitespace-nowrap py-3">
                <div class="flex items-center gap-x-3">
                  <svg class="shrink-0 size-5 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 512 512">
                    <path fill="#012169" d="M0 0h512v512H0z"/>
                    <path fill="#FFF" d="M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z"/>
                    <path fill="#C8102E" d="m184 324 11 34L42 512H0v-3l184-185zm124-12 54 8 150 147v45L308 312zM512 0 320 196l-4-44L466 0h46zM0 1l193 189-59-8L0 49V1z"/>
                    <path fill="#FFF" d="M176 0v512h160V0H176zM0 176v160h512V176H0z"/>
                    <path fill="#C8102E" d="M0 208v96h512v-96H0zM208 0v512h96V0h-96z"/>
                  </svg>
                  <span class="text-sm font-medium text-foreground">
                    United Kingdom
                  </span>
                </div>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  2,100
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="text-sm text-muted-foreground-2">
                  $1,012
                </span>
              </td>
              <td class="size-px whitespace-nowrap py-3">
                <span class="inline-flex items-center gap-x-1 text-sm text-muted-foreground-2">
                  0.1%
                  <svg class="shrink-0 size-4 text-destructive" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
                </span>
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    </div>
    
  </div>
  
</div>

<script src="../../../assets/vendor/d3/d3.min.js"></script>
                    <script src="../../../assets/vendor/topojson/build/topojson.min.js"></script>
                    <script src="../../../assets/vendor/datamaps/dist/datamaps.world.js"></script>
                    <script src="../../../assets/vendor/preline/dist/helper-shared.js"></script>
                    <script src="../../../assets/vendor/preline/dist/helper-shared.js"></script>

return `<div class="bg-white rounded-xl shadow-xl w-37.5 p-3">
                    	            <div class="flex mb-1">
                    	              <div class="me-2">
                    	                <div class="size-4 rounded-full bg-no-repeat bg-center bg-cover" style="background-image: url('../../../assets/vendor/svg-country-flags/svg/${data.short}.svg')"></div>
                    	              </div>
                    	              <span class="text-sm font-medium">${data.customName || geo.properties.name}</span>
                    	            </div>
                    	            <div class="flex items-center">
                    	              <span class="text-sm text-muted-foreground-1">Active:</span>
                    	               <span class="text-sm font-medium ${data.active.value}</span>
                    	               <span class="text-sm ${data.active.isGrown ? 'text-teal-500 dark:text-teal-400' : 'text-red-500 dark:text-red-400'}">${data.active.percent}</span>
                    	               ${data.active.isGrown ? growUp : growDown}
                    	            </div>
                    	            <div class="flex items-center">
                    	              <span class="text-sm text-muted-foreground-1">New:</span>
                    	               <span class="text-sm font-medium ${data.new.value}</span>
                    	               <span class="text-sm ${data.active.isGrown ? 'text-teal-500 dark:text-teal-400' : 'text-red-500 dark:text-red-400'}">${data.new.percent}</span>
                    	               ${data.new.isGrown ? growUp : growDown}
                    	            </div>
                    	          </div>`;
                            }
                          }
                        });
                        dataMap.addPlugin('update', function (_, mode) {
                          this.options.fills = (mode === 'dark') ? {
                            defaultFill: varToColor('--map-colors-default-inverse'),
                            MAJOR: varToColor('--map-colors-primary-inverse'),
                          } : {
                            defaultFill: varToColor('--map-colors-default'),
                            MAJOR: varToColor('--map-colors-primary'),
                          };

this.svg.selectAll('.datamaps-subunit').style('stroke', () => (mode === 'dark') ? varToColor('--map-colors-border-inverse') : varToColor('--map-colors-border'));

this.updateChoropleth(dataSet, { reset: true });
                        });

dataMap.update(localStorage.getItem('hs_theme'));

window.addEventListener('on-hs-appearance-change', (evt) => {
                          tabTheme = evt.detail;

dataMap.update(evt.detail);
                        });

const getCurrentMapMode = (eventDetail) => {
                          if (tabTheme) return tabTheme;
                          if (typeof eventDetail === 'string') return eventDetail;

return localStorage.getItem('hs_theme');
                        };

window.addEventListener('on-hs-color-theme-change', (evt) => {
                          dataMap.update(getCurrentMapMode(evt.detail));
                        });

window.addEventListener('on-hs-brand-change', (evt) => {
                          dataMap.update(getCurrentMapMode(evt.detail));
                        });

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => {
                          tabTheme = evt.detail;
      
                          dataMap.update(tabTheme);
                        });

window.addEventListener('resize', function () {
                          dataMap.resize();
                        });
                      })();
                    </script>

Open related analytics dashboard page