Charts

<figure aria-labelledby="reach-title" aria-describedby="reach-summary">
  <h3 id="reach-title">Reels drove the largest reach lift</h3>
  <p id="reach-summary">
    Last 28 days. Reels reached 72K accounts, posts reached 48K,
    stories reached 34K, and ads reached 64K.
  </p>
  <div role="img" aria-label="Bar chart comparing reach by format">
    <button aria-label="Reels, 72 thousand accounts reached">72K</button>
    <button aria-label="Posts, 48 thousand accounts reached">48K</button>
    <button aria-label="Stories, 34 thousand accounts reached">34K</button>
    <button aria-label="Ads, 64 thousand accounts reached">64K</button>
  </div>
</figure>

import PageContainer from "@/components/docs/PageContainer";
import Section from "@/components/docs/Section";
import ChartInspector from "./ChartInspector";
import styles from "./charts.module.css";

function ChartPage({ children }) {
  return <PageContainer>{children}</PageContainer>;
}

function ChartHero({ title, summary, children }) {
  return (
    <section className={styles.hero} aria-labelledby="chart-page-title">
      <div>
        <h1 id="chart-page-title">{title}</h1>
        <p>{summary}</p>
      </div>
      {children}
    </section>
  );
}

function ChartLegend({ items }) {
  return (
    <div className={styles.legend} aria-label="Chart legend">
      {items.map((item) => <span key={item.label}>{item.label}</span>)}
    </div>
  );
}

function ChartAccessibilityNote({ children }) {
  return <aside className={styles.accessNote}>{children}</aside>;
}

export default function CreatorReachChart({ data }) {
  const maxReach = Math.max(...data.map((datum) => datum.reach));

  return (
    <ChartPage>
      <ChartHero
        title="Reels drove the largest reach lift"
        summary="Last 28 days, accounts reached by content format."
      >
        <ChartInspector />
      </ChartHero>
      <Section title="Reach by format">
        <figure aria-labelledby="reach-title" aria-describedby="reach-summary">
          <h3 id="reach-title">Reels drove the largest reach lift</h3>
          <p id="reach-summary">
            Last 28 days, accounts reached. Reels reached 72K accounts,
            the highest value in the range.
          </p>
          <div className="chart-bars" aria-label="Reach by content format">
            {data.map((datum) => (
              <button
                key={datum.id}
                type="button"
                className="chart-mark"
                style={{ "--height": (datum.reach / maxReach) * 100 + "%" }}
                aria-label={datum.format + ", " + datum.reach.toLocaleString() + " accounts reached"}
              >
                <span>{datum.label}</span>
              </button>
            ))}
          </div>
          <ChartLegend items={[{ label: "Organic reach" }, { label: "Paid reach" }]} />
        </figure>
        <ChartAccessibilityNote>
          Keep the takeaway available as text; interaction only adds precision.
        </ChartAccessibilityNote>
      </Section>
    </ChartPage>
  );
}

.chart-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: flex-end;
  gap: 12px;
  min-height: 180px;
  border-bottom: 1px solid rgb(var(--ig-separator));
}

.chart-mark {
  height: var(--height);
  min-height: 28px;
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: rgba(var(--ig-secondary-text), 0.32);
  transition: transform 150ms cubic-bezier(0, 0, .1, 1);
}

.chart-mark[aria-current="true"],
.chart-mark:hover,
.chart-mark:focus-visible {
  background: rgb(var(--ig-primary-button));
  transform: translateY(-3px);
}