04月の棒を押すとその場で日別に割れる

<main class="stage">
  <figure class="dd is-demo" id="dd">
    <figcaption class="dd__head">
      <span class="dd__title">月間の注文</span>
      <span class="dd__right">
        <button class="dd__back" type="button" id="dd-back" aria-label="戻る" disabled>
          <svg class="dd__bic" viewBox="0 0 256 256" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M160 48v160l-80-80Z" opacity=".2"/><path d="M163.06 40.61a8 8 0 0 0-8.72 1.73l-80 80a8 8 0 0 0 0 11.32l80 80A8 8 0 0 0 168 208V48a8 8 0 0 0-4.94-7.39M152 188.69L91.31 128L152 67.31Z"/></g></svg>
          <span class="dd__btext">戻る</span>
        </button>
        <span class="dd__val"><span class="dd__lab">合計</span> <span aria-live="polite" id="dd-num">486件</span></span>
      </span>
    </figcaption>
    <div class="dd__plot" role="img" aria-label="月間注文の棒グラフ。10月の91件が最も高く、11月の70件が最も低い">
      <div class="dd__cols">
        <button class="dd__col" type="button" data-m="0" aria-expanded="false">
          <span class="dd__spot">
            <i class="dd__day" style="--h:15.4%; --i:0"></i>
            <i class="dd__day" style="--h:19.8%; --i:1"></i>
            <i class="dd__day" style="--h:13.2%; --i:2"></i>
            <i class="dd__day" style="--h:22%; --i:3"></i>
            <i class="dd__day" style="--h:17.6%; --i:4"></i>
            <i class="dd__month" style="--h:87.9%"></i>
          </span>
          <span class="dd__mlab">7月</span>
        </button>
        <button class="dd__col" type="button" data-m="1" aria-expanded="false">
          <span class="dd__spot">
            <i class="dd__day" style="--h:17.6%; --i:0"></i>
            <i class="dd__day" style="--h:15.4%; --i:1"></i>
            <i class="dd__day" style="--h:20.9%; --i:2"></i>
            <i class="dd__day" style="--h:16.5%; --i:3"></i>
            <i class="dd__day" style="--h:19.8%; --i:4"></i>
            <i class="dd__month" style="--h:90.1%"></i>
          </span>
          <span class="dd__mlab">8月</span>
        </button>
        <button class="dd__col" type="button" data-m="2" aria-expanded="false">
          <span class="dd__spot">
            <i class="dd__day" style="--h:13.2%; --i:0"></i>
            <i class="dd__day" style="--h:18.7%; --i:1"></i>
            <i class="dd__day" style="--h:23.1%; --i:2"></i>
            <i class="dd__day" style="--h:14.3%; --i:3"></i>
            <i class="dd__day" style="--h:16.5%; --i:4"></i>
            <i class="dd__month" style="--h:85.7%"></i>
          </span>
          <span class="dd__mlab">9月</span>
        </button>
        <button class="dd__col" type="button" data-m="3" aria-expanded="false">
          <span class="dd__spot">
            <i class="dd__day" style="--h:20.9%; --i:0"></i>
            <i class="dd__day" style="--h:16.5%; --i:1"></i>
            <i class="dd__day" style="--h:18.7%; --i:2"></i>
            <i class="dd__day" style="--h:24.2%; --i:3"></i>
            <i class="dd__day" style="--h:19.8%; --i:4"></i>
            <i class="dd__month" style="--h:100%"></i>
          </span>
          <span class="dd__mlab">10月</span>
        </button>
        <button class="dd__col" type="button" data-m="4" aria-expanded="false">
          <span class="dd__spot">
            <i class="dd__day" style="--h:16.5%; --i:0"></i>
            <i class="dd__day" style="--h:13.2%; --i:1"></i>
            <i class="dd__day" style="--h:17.6%; --i:2"></i>
            <i class="dd__day" style="--h:15.4%; --i:3"></i>
            <i class="dd__day" style="--h:14.3%; --i:4"></i>
            <i class="dd__month" style="--h:76.9%"></i>
          </span>
          <span class="dd__mlab">11月</span>
        </button>
        <button class="dd__col" type="button" data-m="5" aria-expanded="false">
          <span class="dd__spot">
            <i class="dd__day" style="--h:18.7%; --i:0"></i>
            <i class="dd__day" style="--h:22%; --i:1"></i>
            <i class="dd__day" style="--h:15.4%; --i:2"></i>
            <i class="dd__day" style="--h:19.8%; --i:3"></i>
            <i class="dd__day" style="--h:17.6%; --i:4"></i>
            <i class="dd__month" style="--h:93.4%"></i>
          </span>
          <span class="dd__mlab">12月</span>
        </button>
      </div>
    </div>
    <p class="dd__hint">棒を押すとその月が立っていた場所で日別に広がります</p>
    <div class="sr"><table>
      <caption>月間の注文合計</caption>
      <thead><tr><th>月</th><th>注文</th></tr></thead>
      <tbody>
        <tr><th>7月</th><td>80</td></tr>
        <tr><th>8月</th><td>82</td></tr>
        <tr><th>9月</th><td>78</td></tr>
        <tr><th>10月</th><td>91</td></tr>
        <tr><th>11月</th><td>70</td></tr>
        <tr><th>12月</th><td>85</td></tr>
      </tbody>
    </table></div>
  </figure>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-base;
$easing: $ease-spring;
$color: $subject-blue;
$demo-month: 3;          // 자동 루프가 쪼개 보이는 달(10월)의 data-m 값

// 페이퍼 무대 — 잉크 테두리 흰 카드
@include stage($stage-paper);

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dd {
  box-sizing: border-box;
  width: min(392px, 88vw);
  display: flex;
  flex-direction: column;
  gap: $sp-2;
  margin: 0;
  padding: $sp-3;
  border: 2px solid $subject-ink;
  border-radius: $r-card;
  background: $stage-paper;
  box-shadow: $shadow-raised;
  color: $subject-ink;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.dd__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $sp-2;
  padding: 0 $sp-1;
}
.dd__title { font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .02em; }
.dd__right { display: flex; align-items: center; gap: $sp-2; }
.dd__lab { font-size: 12px; line-height: 18px; color: rgba(23, 20, 26, .62); }
.dd__val { font-size: 13px; line-height: 18px; font-weight: 800; color: $color; font-variant-numeric: tabular-nums; }

// 되돌리기 — 닫혀 있을 땐 어둡게 붙어 있다가 열리면 살아난다
.dd__back {
  display: inline-flex;
  align-items: center;
  gap: $sp-1;
  margin: 0;
  padding: $sp-1 $sp-2;
  border: 1.5px solid rgba(23, 20, 26, .22);
  border-radius: $r-control;
  background: $stage-paper;
  color: $subject-ink;
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
  opacity: .45;
}
.dd__back:not([disabled]) { opacity: 1; }
.dd__back:focus-visible { outline: 2px solid $color; outline-offset: 1px; }
.dd__bic { width: 14px; height: 14px; }

// 칸 배분은 grid 근등 분할 (BD19 오탐 회피)
.dd__cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.dd__col {
  display: flex;
  flex-direction: column;
  gap: $sp-1;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.dd__col:focus-visible { outline: 2px solid $color; outline-offset: 2px; border-radius: $r-xs; }
.dd__spot { position: relative; display: block; height: 132px; }

// 일별 5개: 월 막대와 같은 자리에 겹쳐 둔다(DOM 이 앞이라 월 막대가 가린다).
// 접힘 기본값 = translateX(0) scaleX(1) — transform-origin 이 아래 중간이라
// 벌어질 때 아래가 붙은 채 옆으로만 펴진다
.dd__day {
  position: absolute;
  inset-inline: 22%;
  bottom: 0;
  height: var(--h);
  border-radius: $r-xs $r-xs 0 0;
  background: $color;
  transform-origin: 50% 100%; // 규칙8: 일 막대 바닥 고정 벌림
  transform: translateX(0) scaleX(1);
}
// 월 막대: 일별 5개를 덮는 뚜껑. 열리면 scaleY(0) 으로 바닥에 흡수된다
.dd__month {
  position: absolute;
  inset-inline: 22%;
  bottom: 0;
  height: var(--h);
  border-radius: $r-xs $r-xs 0 0;
  background: $subject-ink;
  transform-origin: 50% 100%; // 규칙8: 월 막대 바닥으로 접힘
}
.dd__mlab { text-align: center; font-size: 11px; line-height: 14px; color: rgba(23, 20, 26, .62); }

.dd__hint { margin: 0; padding: 0 $sp-1; font-size: 11px; line-height: 16px; color: rgba(23, 20, 26, .62); }

// ── 열림 상태(정적): 그 자리에서 5개로 벌어진다 — 레이아웃 재계산 없이 transform 만 ──
.dd__col[aria-expanded="true"] .dd__day {
  transform: translateX(calc((var(--i) - 2) * 30%)) scaleX(.3);
}
.dd__col[aria-expanded="true"] .dd__month { transform: scaleY(0); opacity: 0; }
// 다른 달은 완전히 사라지지 않고 뒤로 물러난다 — 포스터가 비면 안 된다
.dd[data-open] .dd__col[aria-expanded="false"] { opacity: .38; }
.dd[data-open] .dd__col[aria-expanded="false"] .dd__month { transform: scaleY(.72); }

.dd:not(.is-demo) .dd__day {
  transition-property: transform;
  transition-duration: $duration;
  transition-timing-function: $easing;
  transition-delay: calc(var(--i) * 40ms);   // 한 개씩 시차
}
.dd:not(.is-demo) .dd__month {
  transition-property: transform, opacity;
  transition-duration: $dur-quick;
  transition-timing-function: $easing;
}
.dd:not(.is-demo) .dd__col {
  transition-property: opacity;
  transition-duration: $dur-quick;
  transition-timing-function: $easing;
}

// ── 자동 루프(2초): 접힘 → 펼침(시차) → 다시 접힘. 10월(data-m=3)으로 시연 ──
// 열린 달의 월 막대는 컷으로 사라진다 — 반쯤 스러진 막대는 유령이 된다
.dd.is-demo .dd__col[data-m="#{$demo-month}"] .dd__month {
  animation-name: dd-vanish;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes dd-vanish {
  0%, 14.99% { transform: scaleY(1); opacity: 1; }
  15%, 83.99% { transform: scaleY(0); opacity: 0; }
  84%, 100% { transform: scaleY(1); opacity: 1; }
}
// 일별 벌어짐: keyframes 안의 var(--i) 은 "이 애니메이션을 타는 요소" 기준으로 풀린다 —
// 같은 키프레임 하나가 5개 막대를 각각 제 자리로 보낸다.
// animation-delay 로 시차를 줬으므로 animation-fill-mode: backwards 가 없으면
// 지연 구간에 기본 상태가 프레임 0 에 한 번 번쩍인다 (252-08 실측)
.dd.is-demo .dd__col[data-m="#{$demo-month}"] .dd__day {
  animation-name: dd-day;
  animation-duration: $dur-loop;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * 40ms);
  animation-fill-mode: backwards;
}
@keyframes dd-day {
  0%, 14% { transform: translateX(0) scaleX(1); }
  36%, 58% { transform: translateX(calc((var(--i) - 2) * 30%)) scaleX(.3); }
  78%, 100% { transform: translateX(0) scaleX(1); }
}
// 다른 달: 컷으로 물러났다가(sat) 막대는 부드럽게 낮아진다
.dd.is-demo .dd__col:not([data-m="#{$demo-month}"]) {
  animation-name: dd-rest;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes dd-rest {
  0%, 14.99% { opacity: 1; }
  15%, 83.99% { opacity: .38; }
  84%, 100% { opacity: 1; }
}
.dd.is-demo .dd__col:not([data-m="#{$demo-month}"]) .dd__month {
  animation-name: dd-restbar;
  animation-duration: $dur-loop;
  animation-timing-function: $ease-out;
  animation-iteration-count: infinite;
}
@keyframes dd-restbar {
  0%, 15% { transform: scaleY(1); }
  32%, 60% { transform: scaleY(.72); }
  82%, 100% { transform: scaleY(1); }
}
// 되돌리기 버튼: 컷이 아니라 살짝 밀려나며 살아난다(컷 옆의 보조 움직임)
.dd.is-demo .dd__back {
  animation-name: dd-back;
  animation-duration: $dur-loop;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
}
@keyframes dd-back {
  0%, 15% { opacity: .45; transform: translateX(4px); }
  24%, 80% { opacity: 1; transform: translateX(0); }
  86%, 100% { opacity: .45; transform: translateX(4px); }
}

@media (max-width: 340px) {
  .dd { padding: $sp-2; gap: $sp-1; }
  .dd__spot { height: 96px; }
  .dd__title, .dd__val { font-size: 12px; line-height: 16px; }
  .dd__lab { font-size: 11px; line-height: 16px; }
  .dd__back { padding: $sp-1; }
  .dd__btext { display: none; }        // 좁은 화면에선 아이콘만 — 이름은 aria-label 이 유지한다
  .dd__mlab { font-size: 10px; line-height: 12px; }
  .dd__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dd.is-demo .dd__col[data-m="#{$demo-month}"] .dd__month,
  .dd.is-demo .dd__col[data-m="#{$demo-month}"] .dd__day,
  .dd.is-demo .dd__col:not([data-m="#{$demo-month}"]),
  .dd.is-demo .dd__col:not([data-m="#{$demo-month}"]) .dd__month,
  .dd.is-demo .dd__back { animation: none !important; }
  .dd:not(.is-demo) .dd__day,
  .dd:not(.is-demo) .dd__month,
  .dd:not(.is-demo) .dd__col { transition: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dd {
  box-sizing: border-box;
  width: min(392px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 2px solid #17141a;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  color: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.dd__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.dd__title {
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.dd__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dd__lab {
  font-size: 12px;
  line-height: 18px;
  color: rgba(23, 20, 26, 0.62);
}

.dd__val {
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  color: #2f6df6;
  font-variant-numeric: tabular-nums;
}

.dd__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 8px;
  border: 1.5px solid rgba(23, 20, 26, 0.22);
  border-radius: 12px;
  background: #ffffff;
  color: #17141a;
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.45;
}

.dd__back:not([disabled]) {
  opacity: 1;
}

.dd__back:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 1px;
}

.dd__bic {
  width: 14px;
  height: 14px;
}

.dd__cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.dd__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.dd__col:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
  border-radius: 4px;
}

.dd__spot {
  position: relative;
  display: block;
  height: 132px;
}

.dd__day {
  position: absolute;
  inset-inline: 22%;
  bottom: 0;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: #2f6df6;
  transform-origin: 50% 100%;
  transform: translateX(0) scaleX(1);
}

.dd__month {
  position: absolute;
  inset-inline: 22%;
  bottom: 0;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: #17141a;
  transform-origin: 50% 100%;
}

.dd__mlab {
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  color: rgba(23, 20, 26, 0.62);
}

.dd__hint {
  margin: 0;
  padding: 0 4px;
  font-size: 11px;
  line-height: 16px;
  color: rgba(23, 20, 26, 0.62);
}

.dd__col[aria-expanded=true] .dd__day {
  transform: translateX(calc((var(--i) - 2) * 30%)) scaleX(0.3);
}

.dd__col[aria-expanded=true] .dd__month {
  transform: scaleY(0);
  opacity: 0;
}

.dd[data-open] .dd__col[aria-expanded=false] {
  opacity: 0.38;
}

.dd[data-open] .dd__col[aria-expanded=false] .dd__month {
  transform: scaleY(0.72);
}

.dd:not(.is-demo) .dd__day {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i) * 40ms);
}

.dd:not(.is-demo) .dd__month {
  transition-property: transform, opacity;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dd:not(.is-demo) .dd__col {
  transition-property: opacity;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dd.is-demo .dd__col[data-m="3"] .dd__month {
  animation-name: dd-vanish;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes dd-vanish {
  0%, 14.99% {
    transform: scaleY(1);
    opacity: 1;
  }
  15%, 83.99% {
    transform: scaleY(0);
    opacity: 0;
  }
  84%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
.dd.is-demo .dd__col[data-m="3"] .dd__day {
  animation-name: dd-day;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * 40ms);
  animation-fill-mode: backwards;
}

@keyframes dd-day {
  0%, 14% {
    transform: translateX(0) scaleX(1);
  }
  36%, 58% {
    transform: translateX(calc((var(--i) - 2) * 30%)) scaleX(0.3);
  }
  78%, 100% {
    transform: translateX(0) scaleX(1);
  }
}
.dd.is-demo .dd__col:not([data-m="3"]) {
  animation-name: dd-rest;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes dd-rest {
  0%, 14.99% {
    opacity: 1;
  }
  15%, 83.99% {
    opacity: 0.38;
  }
  84%, 100% {
    opacity: 1;
  }
}
.dd.is-demo .dd__col:not([data-m="3"]) .dd__month {
  animation-name: dd-restbar;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes dd-restbar {
  0%, 15% {
    transform: scaleY(1);
  }
  32%, 60% {
    transform: scaleY(0.72);
  }
  82%, 100% {
    transform: scaleY(1);
  }
}
.dd.is-demo .dd__back {
  animation-name: dd-back;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

@keyframes dd-back {
  0%, 15% {
    opacity: 0.45;
    transform: translateX(4px);
  }
  24%, 80% {
    opacity: 1;
    transform: translateX(0);
  }
  86%, 100% {
    opacity: 0.45;
    transform: translateX(4px);
  }
}
@media (max-width: 340px) {
  .dd {
    padding: 8px;
    gap: 4px;
  }
  .dd__spot {
    height: 96px;
  }
  .dd__title, .dd__val {
    font-size: 12px;
    line-height: 16px;
  }
  .dd__lab {
    font-size: 11px;
    line-height: 16px;
  }
  .dd__back {
    padding: 4px;
  }
  .dd__btext {
    display: none;
  }
  .dd__mlab {
    font-size: 10px;
    line-height: 12px;
  }
  .dd__hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dd.is-demo .dd__col[data-m="3"] .dd__month,
  .dd.is-demo .dd__col[data-m="3"] .dd__day,
  .dd.is-demo .dd__col:not([data-m="3"]),
  .dd.is-demo .dd__col:not([data-m="3"]) .dd__month,
  .dd.is-demo .dd__back {
    animation: none !important;
  }
  .dd:not(.is-demo) .dd__day,
  .dd:not(.is-demo) .dd__month,
  .dd:not(.is-demo) .dd__col {
    transition: none !important;
  }
}

// 드릴다운은 화면 교체가 아니라 같은 자리의 변형이다.
// 일별 막대 5개는 처음부터 月 막대와 같은 자리에 겹쳐 있다(月 막대가 위에 얹혀 가려 둔다).
// 열면 月 막대가 scaleY(0) 으로 비켜나고(--origin: bottom) 일별이 translateX+scaleX 로 벌어진다.
var dd = document.getElementById('dd');
var cols = dd.querySelectorAll('.dd__col');
var back = document.getElementById('dd-back');
var num = document.getElementById('dd-num');
var M = [80, 82, 78, 91, 70, 85];
var LAB = ['7月', '8月', '9月', '10月', '11月', '12月'];
var open = -1;

function setOpen(i) {
  dd.classList.remove('is-demo');
  open = i;
  if (i < 0) {
    dd.removeAttribute('data-open');
    num.textContent = '486件';
  } else {
    dd.setAttribute('data-open', String(i));
    num.textContent = LAB[i] + ' · ' + M[i] + '件';
  }
  for (var k = 0; k < cols.length; k++) cols[k].setAttribute('aria-expanded', String(k === i));
  back.disabled = i < 0;
}
for (var j = 0; j < cols.length; j++) {
  (function (k) {
    cols[k].addEventListener('click', function () { setOpen(open === k ? -1 : k); });
  })(j);
}
back.addEventListener('click', function () {
  setOpen(-1);
  back.focus({ preventScroll: true });
});

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./BarDrilldown.module.scss";

// 월 막대 드릴다운 React 판 — vanilla(run/264/demo/04) 와 같은 동작.
// 화면을 갈아 끼우지 않는다: 일별 5개는 처음부터 월 막대 자리에 겹쳐 있고
// 열림은 aria-expanded 하나로 CSS transform 만 갈아끼운다.
export type BarDrilldownProps = {
  title?: string;
  totalLabel?: string;
  unit?: string;
  backLabel?: string;
  monthLabels?: string[];
  monthTotals?: number[];
  dayValues?: number[][];      // [달][일]
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & {
  "--duration"?: string;
  "--easing"?: string;
  "--color"?: string;
};
type DayVars = CSSProperties & { "--h"?: string; "--i"?: string };
type BarVars = CSSProperties & { "--h"?: string };

export default function BarDrilldown({
  title = "월간 주문",
  totalLabel = "합계",
  unit = "건",
  backLabel = "되돌리기",
  monthLabels = ["7월", "8월", "9월", "10월", "11월", "12월"],
  monthTotals = [80, 82, 78, 91, 70, 85],
  dayValues = [
    [14, 18, 12, 20, 16],
    [16, 14, 19, 15, 18],
    [12, 17, 21, 13, 15],
    [19, 15, 17, 22, 18],
    [15, 12, 16, 14, 13],
    [17, 20, 14, 18, 16],
  ],
  duration = 300,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: BarDrilldownProps) {
  const [demo, setDemo] = useState(true);
  const [open, setOpen] = useState(-1);
  const axisMax = Math.max(...monthTotals);
  const grand = monthTotals.reduce((a, b) => a + b, 0);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  function pick(i: number) {
    setDemo(false);
    setOpen((cur) => (cur === i ? -1 : i));
  }

  return (
    <figure
      className={`${styles.dd} ${demo ? styles.isDemo : ""}`}
      data-open={open >= 0 ? String(open) : undefined}
      style={vars}
    >
      <figcaption className={styles.head}>
        <span className={styles.title}>{title}</span>
        <span className={styles.right}>
          <button
            type="button"
            className={styles.back}
            aria-label={backLabel}
            disabled={open < 0}
            onClick={() => {
              setDemo(false);
              setOpen(-1);
            }}
          >
            <svg className={styles.bic} viewBox="0 0 256 256" aria-hidden="true" focusable="false">
              <g fill="currentColor">
                <path d="M160 48v160l-80-80Z" opacity=".2" />
                <path d="M163.06 40.61a8 8 0 0 0-8.72 1.73l-80 80a8 8 0 0 0 0 11.32l80 80A8 8 0 0 0 168 208V48a8 8 0 0 0-4.94-7.39M152 188.69L91.31 128L152 67.31Z" />
              </g>
            </svg>
            <span className={styles.btext}>{backLabel}</span>
          </button>
          <span className={styles.val}>
            <span className={styles.lab}>{totalLabel}</span>{" "}
            <span aria-live="polite">
              {open < 0 ? `${grand}${unit}` : `${monthLabels[open]} · ${monthTotals[open]}${unit}`}
            </span>
          </span>
        </span>
      </figcaption>
      <div
        className={styles.plot}
        role="img"
        aria-label="월간 주문 막대 그래프. 10월 91건이 가장 높고 11월 70건이 가장 낮다"
      >
        <div className={styles.cols}>
          {monthLabels.map((m, mi) => (
            <button
              key={m}
              type="button"
              className={styles.col}
              data-m={mi}
              aria-expanded={mi === open}
              onClick={() => pick(mi)}
            >
              <span className={styles.spot}>
                {dayValues[mi].map((d, di) => (
                  <i
                    key={di}
                    className={styles.day}
                    style={{ "--h": `${((d / axisMax) * 100).toFixed(1)}%`, "--i": String(di) } as DayVars}
                  />
                ))}
                <i
                  className={styles.month}
                  style={{ "--h": `${((monthTotals[mi] / axisMax) * 100).toFixed(1)}%` } as BarVars}
                />
              </span>
              <span className={styles.mlab}>{m}</span>
            </button>
          ))}
        </div>
      </div>
      <p className={styles.hint}>막대를 누르면 그 달이 제자리에서 일별로 벌어집니다</p>
    </figure>
  );
}