---
title: "MetricFlow Web Analytics Dashboard"
platform: web
slug: metricflow-web-analytics
screens: ["analytics"]
domains: ["saas", "productivity"]
style: "material"
fonts: ["Inter"]
roles: ["top-navigation-bar", "search-bar", "button", "avatar", "sidebar", "select", "navigation-menu", "date-picker", "card", "segmented-control", "table"]
score: {clean: 100, consistent: 61, accessible: 84, comprehensible: 48}
url: https://gui.farm/web/metricflow-web-analytics
raw: https://gui.farm/web/metricflow-web-analytics/design.guix
download: https://gui.farm/web/metricflow-web-analytics.gui
---

# MetricFlow Web Analytics Dashboard

Desktop web analytics dashboard with a left sidebar nav, KPI stat cards, time-series charts, and a data table in a clean Material style with an indigo accent.

- **Live preview:** https://gui.farm/web/metricflow-web-analytics
- **Raw source:** https://gui.farm/web/metricflow-web-analytics/design.guix
- **Download (.gui):** https://gui.farm/web/metricflow-web-analytics.gui

## Source (design.guix)

```xml
<gui version="0.2" name="MetricFlow Web Analytics Dashboard">
  <tokens>
    <color name="canvas" value="#F8FAFD" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-blue" value="#EDEBFF" />
    <color name="surface-blue-strong" value="#DDD8FF" />
    <color name="border" value="#DDE3EA" />
    <color name="border-strong" value="#C7D0DA" />
    <color name="ink" value="#202124" />
    <color name="body" value="#5F6368" />
    <color name="muted" value="#80868B" />
    <color name="blue" value="#6558D3" />
    <color name="blue-dark" value="#4E43B5" />
    <color name="green" value="#188038" />
    <color name="red" value="#D93025" />
    <color name="orange" value="#F9AB00" />
    <number name="r-card" value="12" />
    <number name="r-control" value="8" />
  </tokens>
  <styles>
    <text-style name="Title" font-family="Inter" font-size="24" font-weight="600" line-height="32" />
    <text-style name="Section" font-family="Inter" font-size="15" font-weight="600" line-height="22" />
    <text-style name="Body" font-family="Inter" font-size="13" font-weight="400" line-height="20" />
    <text-style name="Label" font-family="Inter" font-size="12" font-weight="500" line-height="18" />
    <text-style name="Metric" font-family="Inter" font-size="26" font-weight="500" line-height="34" />
    <text-style name="Tiny" font-family="Inter" font-size="11" font-weight="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="1440" h="1024" fill="$canvas">
    <row
      role="top-navigation-bar"
      w="1440"
      h="64"
      fill="$surface"
      border="0 0 1 0 $border"
      p="0 20"
      gap="20"
      align="middle-left"
    >
      <row w="228" gap="12" align="middle-left">
        <img src="https://api.iconify.design/lucide/chart-spline.svg?color=%236558D3" w="28" h="28" />
        <text
          value="MetricFlow"
          font-family="Inter"
          font-size="20"
          font-weight="500"
          line-height="28"
          color="$body"
        />
      </row>
      <row role="search-bar" w="540" h="42" fill="#F1F3F4" radius="22" p="0 16" gap="10" align="middle-left">
        <img
          src="https://api.iconify.design/material-symbols/search-rounded.svg?color=%235F6368"
          w="20"
          h="20"
        />
        <text value="Try searching ‘traffic from Dubai last week’" text-style="Body" color="$body" w="fill" />
        <text value="/" text-style="Tiny" color="$muted" />
      </row>
      <row w="fill" gap="10" align="middle-right">
        <row role="button" w="40" h="40" radius="20" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%235F6368"
            w="22"
            h="22"
          />
        </row>
        <row role="button" w="40" h="40" radius="20" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/apps-rounded.svg?color=%235F6368"
            w="22"
            h="22"
          />
        </row>
        <row role="avatar" w="34" h="34" radius="17" fill="#C2E7FF" align="middle-center">
          <text
            value="JJ"
            font-family="Inter"
            font-size="12"
            font-weight="600"
            line-height="16"
            color="$blue-dark"
          />
        </row>
      </row>
    </row>
    <row w="1440" h="960">
      <col role="sidebar" w="248" h="960" fill="$surface" border="0 1 0 0 $border" p="16 12" gap="18">
        <row role="select" w="224" h="hug" border="1 $border" radius="10" p="12" gap="10" align="middle-left">
          <col w="fill" gap="1">
            <text value="GUI Farm" text-style="Section" color="$ink" />
            <text value="Web analytics · Primary proper..." text-style="Tiny" color="$body" />
          </col>
          <img
            src="https://api.iconify.design/material-symbols/expand-more-rounded.svg?color=%235F6368"
            w="18"
            h="18"
          />
        </row>
        <col role="navigation-menu" w="224" gap="4">
          <row w="224" h="42" p="0 14" gap="12" align="middle-left" radius="21">
            <img
              src="https://api.iconify.design/material-symbols/home-outline-rounded.svg?color=%235F6368"
              w="20"
              h="20"
            />
            <text value="Home" text-style="Body" color="$ink" />
          </row>
          <row w="224" h="42" p="0 14" gap="12" align="middle-left" fill="$surface-blue" radius="21">
            <img
              src="https://api.iconify.design/material-symbols/insert-chart-outline-rounded.svg?color=%236558D3"
              w="20"
              h="20"
            />
            <text value="Reports" text-style="Body" font-weight="600" color="$blue-dark" />
          </row>
          <row w="224" h="42" p="0 14" gap="12" align="middle-left" radius="21">
            <img
              src="https://api.iconify.design/material-symbols/explore-outline-rounded.svg?color=%235F6368"
              w="20"
              h="20"
            />
            <text value="Explore" text-style="Body" color="$ink" />
          </row>
          <row w="224" h="42" p="0 14" gap="12" align="middle-left" radius="21">
            <img
              src="https://api.iconify.design/material-symbols/campaign-outline-rounded.svg?color=%235F6368"
              w="20"
              h="20"
            />
            <text value="Advertising" text-style="Body" color="$ink" />
          </row>
        </col>
        <line w="224" fill="$border" />
        <col w="224" gap="5">
          <text value="REPORTS" text-style="Tiny" color="$muted" p="0 14 6 14" />
          <row w="224" h="38" p="0 14" gap="10" align="middle-left">
            <img
              src="https://api.iconify.design/material-symbols/space-dashboard-outline-rounded.svg?color=%236558D3"
              w="18"
              h="18"
            />
            <text value="Reports snapshot" text-style="Body" font-weight="600" color="$blue-dark" w="fill" />
          </row>
          <row w="224" h="38" p="0 14" gap="10" align="middle-left">
            <img
              src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%235F6368"
              w="18"
              h="18"
            />
            <text value="Realtime" text-style="Body" color="$ink" w="fill" />
            <text value="38" text-style="Tiny" color="$green" />
          </row>
          <row w="224" h="38" p="0 14" gap="10" align="middle-left">
            <img
              src="https://api.iconify.design/material-symbols/track-changes-rounded.svg?color=%235F6368"
              w="18"
              h="18"
            />
            <text value="Business objectives" text-style="Body" color="$ink" w="fill" />
            <img
              src="https://api.iconify.design/material-symbols/expand-less-rounded.svg?color=%2380868B"
              w="16"
              h="16"
            />
          </row>
          <col w="224" gap="2" pl="42">
            <text value="Generate leads" text-style="Label" color="$body" p="7 0" />
            <text value="Drive online sales" text-style="Label" color="$body" p="7 0" />
            <text
              value="Understand web traffic"
              text-style="Label"
              color="$blue-dark"
              font-weight="600"
              p="7 0"
            />
            <text value="View user attributes" text-style="Label" color="$body" p="7 0" />
          </col>
        </col>
        <col w="224" h="fill" gap="auto">
          <row w="224" h="40" p="0 14" gap="10" align="middle-left">
            <img
              src="https://api.iconify.design/material-symbols/settings-outline-rounded.svg?color=%235F6368"
              w="19"
              h="19"
            />
            <text value="Admin" text-style="Body" color="$ink" />
          </row>
        </col>
      </col>
      <col w="1192" h="960" p="26 28" gap="18">
        <row w="1136" h="68" gap="16" align="middle-left">
          <col w="fill" gap="3">
            <row gap="7" align="middle-left">
              <text value="Reports snapshot" text-style="Title" color="$ink" />
              <img
                src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%23188038"
                w="17"
                h="17"
              />
            </row>
            <text
              value="A concise view of acquisition, engagement and revenue performance"
              text-style="Body"
              color="$body"
            />
          </col>
          <row gap="10" align="middle-right">
            <row
              role="button"
              h="38"
              border="1 $border-strong"
              radius="$r-control"
              p="0 12"
              gap="8"
              align="middle-center"
            >
              <img
                src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%236558D3"
                w="18"
                h="18"
              />
              <text value="Add comparison" text-style="Label" color="$blue-dark" />
            </row>
            <row
              role="date-picker"
              h="38"
              border="1 $border-strong"
              radius="$r-control"
              p="0 12"
              gap="9"
              align="middle-center"
            >
              <img
                src="https://api.iconify.design/material-symbols/calendar-today-outline-rounded.svg?color=%235F6368"
                w="17"
                h="17"
              />
              <col gap="0">
                <text value="Last 28 days" text-style="Label" color="$ink" />
                <text value="Jul 13 to Aug 9, 2026" text-style="Tiny" color="$muted" />
              </col>
              <img
                src="https://api.iconify.design/material-symbols/expand-more-rounded.svg?color=%235F6368"
                w="16"
                h="16"
              />
            </row>
          </row>
        </row>
        <row w="1136" h="112" border="1 $border" radius="$r-card" fill="$surface" p="0 4">
          <col w="222" h="110" p="17 18" gap="5" border="0 0 3 0 $blue">
            <text value="Active users" text-style="Label" color="$body" />
            <row gap="8" align="baseline">
              <text value="84,291" text-style="Metric" color="$ink" />
              <text value="+12.4%" text-style="Tiny" color="$green" />
            </row>
            <text value="vs. 74,972 previous period" text-style="Tiny" color="$muted" />
          </col>
          <line h="78" fill="$border" />
          <col w="222" h="110" p="17 18" gap="5">
            <text value="New users" text-style="Label" color="$body" />
            <row gap="8" align="baseline">
              <text value="71,608" text-style="Metric" color="$ink" />
              <text value="+8.1%" text-style="Tiny" color="$green" />
            </row>
            <text value="85.0% of active users" text-style="Tiny" color="$muted" />
          </col>
          <line h="78" fill="$border" />
          <col w="222" h="110" p="17 18" gap="5">
            <text value="Engagement rate" text-style="Label" color="$body" />
            <row gap="8" align="baseline">
              <text value="64.8%" text-style="Metric" color="$ink" />
              <text value="+3.7%" text-style="Tiny" color="$green" />
            </row>
            <text value="1m 42s average engagement" text-style="Tiny" color="$muted" />
          </col>
          <line h="78" fill="$border" />
          <col w="222" h="110" p="17 18" gap="5">
            <text value="Key events" text-style="Label" color="$body" />
            <row gap="8" align="baseline">
              <text value="6,482" text-style="Metric" color="$ink" />
              <text value="−2.3%" text-style="Tiny" color="$red" />
            </row>
            <text value="7.69% user key event rate" text-style="Tiny" color="$muted" />
          </col>
          <line h="78" fill="$border" />
          <col w="220" h="110" p="17 18" gap="5">
            <text value="Total revenue" text-style="Label" color="$body" />
            <row gap="8" align="baseline">
              <text value="$48.2K" text-style="Metric" color="$ink" />
              <text value="+18.9%" text-style="Tiny" color="$green" />
            </row>
            <text value="$0.57 revenue per user" text-style="Tiny" color="$muted" />
          </col>
        </row>
        <grid w="1136" h="342" cols="764 354" gap="18">
          <col
            role="card"
            w="764"
            h="342"
            fill="$surface"
            border="1 $border"
            radius="$r-card"
            p="18 20"
            gap="12"
          >
            <row w="722" gap="12" align="top-left">
              <col w="fill" gap="3">
                <text value="Active users over time" text-style="Section" color="$ink" />
                <row gap="10" align="baseline">
                  <text
                    value="84,291"
                    font-family="Inter"
                    font-size="30"
                    font-weight="500"
                    line-height="38"
                    color="$ink"
                  />
                  <text value="+12.4%" text-style="Label" color="$green" />
                </row>
              </col>
              <row role="segmented-control" h="34" fill="#F1F3F4" radius="17" p="3" gap="2" align="middle-left">
                <row h="28" fill="$surface" radius="14" p="0 10" align="middle-center" shadow="0 1 2 #00000018">
                  <text value="Day" text-style="Tiny" color="$blue-dark" />
                </row>
                <row h="28" p="0 10" align="middle-center">
                  <text value="Week" text-style="Tiny" color="$body" />
                </row>
                <row h="28" p="0 10" align="middle-center">
                  <text value="Month" text-style="Tiny" color="$body" />
                </row>
              </row>
            </row>
            <img
              src="https://gui.farm/tools/charts/line-chart.svg?data=Jul13:2470,Jul15:2590,Jul17:2685,Jul19:2510,Jul21:2820,Jul23:2760,Jul25:3015,Jul27:2940,Jul29:3180,Jul31:3350,Aug2:3190,Aug4:3420,Aug6:3535,Aug9:3710&amp;line=%236558D3&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;width=1444&amp;height=430"
              w="722"
              h="215"
            />
            <row w="722" gap="12" align="middle-left">
              <row w="fill" gap="7" align="middle-left">
                <ellipse w="8" h="8" fill="$blue" />
                <text value="Last 28 days" text-style="Tiny" color="$body" />
              </row>
              <text value="Peak: 3,710 users on Aug 9" text-style="Tiny" color="$muted" />
            </row>
          </col>
          <col role="card" w="354" h="342" fill="$surface" border="1 $border" radius="$r-card" p="18" gap="12">
            <row w="316" gap="12" align="middle-left">
              <col w="fill" gap="2">
                <text value="Realtime" text-style="Section" color="$ink" />
                <text value="Users in last 30 minutes" text-style="Tiny" color="$muted" />
              </col>
              <row gap="6" align="middle-right">
                <ellipse w="8" h="8" fill="$green" />
                <text value="Live" text-style="Tiny" color="$green" />
              </row>
            </row>
            <text
              value="38"
              font-family="Inter"
              font-size="36"
              font-weight="500"
              line-height="42"
              color="$ink"
            />
            <img
              src="https://gui.farm/tools/charts/bar-chart.svg?data=−29:2,−27:1,−25:3,−23:2,−21:4,−19:3,−17:6,−15:4,−13:5,−11:7,−9:5,−7:8,−5:6,−3:9,Now:7&amp;bar=%236558D3&amp;radius=4&amp;grid=hide&amp;values=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=632&amp;height=160"
              w="316"
              h="80"
            />
            <line w="316" fill="$border" />
            <text value="TOP COUNTRIES" text-style="Tiny" color="$muted" />
            <col w="316" gap="8">
              <row w="316" gap="8" align="middle-left">
                <text value="United States" text-style="Label" color="$ink" w="fill" />
                <text value="14" text-style="Label" color="$ink" />
                <rect w="84" h="6" radius="3" fill="$surface-blue-strong" />
                <rect w="58" h="6" radius="3" fill="$blue" />
              </row>
              <row w="316" gap="8" align="middle-left">
                <text value="United Arab Emirates" text-style="Label" color="$ink" w="fill" />
                <text value="9" text-style="Label" color="$ink" />
                <rect w="84" h="6" radius="3" fill="$surface-blue-strong" />
                <rect w="38" h="6" radius="3" fill="$blue" />
              </row>
              <row w="316" gap="8" align="middle-left">
                <text value="India" text-style="Label" color="$ink" w="fill" />
                <text value="6" text-style="Label" color="$ink" />
                <rect w="84" h="6" radius="3" fill="$surface-blue-strong" />
                <rect w="26" h="6" radius="3" fill="$blue" />
              </row>
            </col>
          </col>
        </grid>
        <grid w="1136" h="326" cols="742 376" gap="18">
          <col
            role="card"
            w="742"
            h="326"
            fill="$surface"
            border="1 $border"
            radius="$r-card"
            p="18 20"
            gap="12"
          >
            <row w="700" gap="12" align="middle-left">
              <col w="fill" gap="2">
                <text value="Traffic acquisition" text-style="Section" color="$ink" />
                <text
                  value="How sessions started across your primary channels"
                  text-style="Tiny"
                  color="$muted"
                />
              </col>
              <row role="button" gap="5" align="middle-right">
                <text value="View acquisition" text-style="Label" color="$blue-dark" />
                <img
                  src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%236558D3"
                  w="16"
                  h="16"
                />
              </row>
            </row>
            <col role="table" w="700" gap="0">
              <row w="700" h="34" fill="#F8F9FA" p="0 10" gap="8" align="middle-left">
                <text value="Session default channel group" text-style="Tiny" color="$body" w="300" />
                <text value="Sessions" text-style="Tiny" color="$body" w="90" align="right" />
                <text value="Engaged" text-style="Tiny" color="$body" w="90" align="right" />
                <text value="Key events" text-style="Tiny" color="$body" w="90" align="right" />
                <text value="Revenue" text-style="Tiny" color="$body" w="90" align="right" />
              </row>
              <row w="700" h="43" border="0 0 1 0 $border" p="0 10" gap="8" align="middle-left">
                <row w="300" gap="9" align="middle-left">
                  <ellipse w="8" h="8" fill="$blue" />
                  <text value="Organic Search" text-style="Label" color="$ink" />
                </row>
                <text value="31,840" text-style="Label" color="$ink" w="90" align="right" />
                <text value="69.2%" text-style="Label" color="$ink" w="90" align="right" />
                <text value="2,601" text-style="Label" color="$ink" w="90" align="right" />
                <text value="$19,840" text-style="Label" color="$ink" w="90" align="right" />
              </row>
              <row w="700" h="43" border="0 0 1 0 $border" p="0 10" gap="8" align="middle-left">
                <row w="300" gap="9" align="middle-left">
                  <ellipse w="8" h="8" fill="#34A853" />
                  <text value="Direct" text-style="Label" color="$ink" />
                </row>
                <text value="22,104" text-style="Label" color="$ink" w="90" align="right" />
                <text value="61.7%" text-style="Label" color="$ink" w="90" align="right" />
                <text value="1,742" text-style="Label" color="$ink" w="90" align="right" />
                <text value="$13,208" text-style="Label" color="$ink" w="90" align="right" />
              </row>
              <row w="700" h="43" border="0 0 1 0 $border" p="0 10" gap="8" align="middle-left">
                <row w="300" gap="9" align="middle-left">
                  <ellipse w="8" h="8" fill="$orange" />
                  <text value="Paid Search" text-style="Label" color="$ink" />
                </row>
                <text value="14,928" text-style="Label" color="$ink" w="90" align="right" />
                <text value="72.4%" text-style="Label" color="$ink" w="90" align="right" />
                <text value="1,284" text-style="Label" color="$ink" w="90" align="right" />
                <text value="$10,492" text-style="Label" color="$ink" w="90" align="right" />
              </row>
              <row w="700" h="43" p="0 10" gap="8" align="middle-left">
                <row w="300" gap="9" align="middle-left">
                  <ellipse w="8" h="8" fill="#A142F4" />
                  <text value="Referral" text-style="Label" color="$ink" />
                </row>
                <text value="7,560" text-style="Label" color="$ink" w="90" align="right" />
                <text value="58.9%" text-style="Label" color="$ink" w="90" align="right" />
                <text value="602" text-style="Label" color="$ink" w="90" align="right" />
                <text value="$4,702" text-style="Label" color="$ink" w="90" align="right" />
              </row>
            </col>
          </col>
          <col role="card" w="376" h="326" fill="$surface" border="1 $border" radius="$r-card" p="18" gap="14">
            <row w="338" gap="12" align="middle-left">
              <col w="fill" gap="2">
                <text value="Recommended insights" text-style="Section" color="$ink" />
                <text value="Signals worth investigating" text-style="Tiny" color="$muted" />
              </col>
              <img
                src="https://api.iconify.design/material-symbols/auto-awesome-rounded.svg?color=%23F9AB00"
                w="20"
                h="20"
              />
            </row>
            <col w="338" gap="10">
              <row w="338" fill="#F8F9FA" radius="10" p="12" gap="11" align="top-left">
                <row w="32" h="32" radius="16" fill="$surface-blue" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%236558D3"
                    w="18"
                    h="18"
                  />
                </row>
                <col w="271" gap="3">
                  <text
                    value="Organic traffic is accelerating"
                    text-style="Label"
                    font-weight="600"
                    color="$ink"
                  />
                  <text
                    value="Landing pages tagged “templates” brought 26% more engaged sessions this week."
                    text-style="Tiny"
                    color="$body"
                    w="271"
                  />
                </col>
              </row>
              <row w="338" fill="#F8F9FA" radius="10" p="12" gap="11" align="top-left">
                <row w="32" h="32" radius="16" fill="#FCE8E6" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/warning-rounded.svg?color=%23D93025"
                    w="18"
                    h="18"
                  />
                </row>
                <col w="271" gap="3">
                  <text value="Checkout completion dipped" text-style="Label" font-weight="600" color="$ink" />
                  <text
                    value="Mobile Safari key event rate is 11% below the 28-day baseline."
                    text-style="Tiny"
                    color="$body"
                    w="271"
                  />
                </col>
              </row>
              <row
                role="button"
                w="338"
                h="36"
                border="1 $border-strong"
                radius="18"
                gap="7"
                align="middle-center"
              >
                <text value="View all insights" text-style="Label" color="$blue-dark" />
                <img
                  src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%236558D3"
                  w="16"
                  h="16"
                />
              </row>
            </col>
          </col>
        </grid>
      </col>
    </row>
  </col>
</gui>
```