売上ダッシュボード（KPIカード＋期間切り替え＋折れ線・棒グラフ）

/* =====================================================
   売上ダッシュボード — スタイル
   スコープ: .stats-dashboard-screen 配下に限定
   ===================================================== */

:root {
  --sd-accent: #2B7FE8;
  --sd-positive: #1FA15C;
  --sd-negative: #E0483D;
  --sd-border: #D8DEE6;
  --sd-bg-card: #ffffff;
  --sd-text-muted: #6B7686;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Hiragino Sans, Meiryo, sans-serif;
  background: #F4F6F9;
  color: #1F2A37;
}

.stats-dashboard-screen {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ===== ヘッダー ===== */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.screen-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.last-updated {
  font-size: 13px;
  color: var(--sd-text-muted);
  margin: 0;
}

.period-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1.5px solid var(--sd-border);
  border-radius: 8px;
  padding: 4px;
}

.period-tab {
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sd-text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.period-tab:hover { background: #F0F3F8; }

.period-tab.is-active {
  background: var(--sd-accent);
  color: #fff;
}

/* ===== ローディング ===== */
.loading-message {
  text-align: center;
  color: var(--sd-text-muted);
  font-size: 14px;
  padding: 48px 0;
}

/* ===== KPIカード ===== */
.kpi-cards[hidden] { display: none; }

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--sd-bg-card);
  border: 1.5px solid var(--sd-border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-label {
  font-size: 13px;
  color: var(--sd-text-muted);
}

.kpi-value {
  font-size: 24px;
  font-weight: 700;
}

.kpi-subtext { font-size: 12px; font-weight: 600; margin: 0; }
.kpi-subtext.is-positive { color: var(--sd-positive); }
.kpi-subtext.is-negative { color: var(--sd-negative); }

/* ===== グラフ ===== */
.chart-section[hidden] { display: none; }

.chart-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.chart-block {
  background: var(--sd-bg-card);
  border: 1.5px solid var(--sd-border);
  border-radius: 10px;
  padding: 20px;
}

.chart-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}

.chart-wrap { height: 320px; }

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .kpi-cards { grid-template-columns: 1fr; }
  .dashboard-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .chart-wrap { height: 260px; }
}

/* =====================================================
   売上ダッシュボードのスクリプト

   仕組み：state.period（'week' | 'month'）を唯一の情報源にする。
   タブクリックで state.period を書き換えて render() を呼ぶだけ。
   render() が KPIカード・折れ線グラフ・棒グラフをまとめて更新する。

   JSONには week / month 両方のデータをあらかじめ持たせておき、
   render() は data[state.period] を参照するだけにする。
   Chart.js のインスタンスは破棄せず chart.data 更新 + chart.update() で切り替える。
   ===================================================== */

// ===== 設定値 =====
var DEFAULT_PERIOD = 'week';
var CATEGORY_COLORS = ['#2B7FE8', '#1FA15C', '#F2A93B', '#9C6ADE'];

// ===== 状態・データ =====
var state = { period: DEFAULT_PERIOD };
var dashboardData = null;
var trendChart = null;
var categoryChart = null;

var loadingMessage = document.getElementById('loadingMessage');
var kpiCards = document.getElementById('kpiCards');
var chartSection = document.getElementById('chartSection');
var lastUpdated = document.getElementById('lastUpdated');
var periodTabs = document.getElementById('periodTabs');

// ===== 初期化 =====
fetch('./data/data.json')
  .then(function (res) { return res.json(); })
  .then(function (json) {
    dashboardData = json;
    lastUpdated.textContent = '最終更新：' + json.lastUpdated;
    loadingMessage.hidden = true;
    kpiCards.hidden = false;
    chartSection.hidden = false;
    initCharts();
    render();
  })
  .catch(function () {
    loadingMessage.textContent = 'データを読み込めませんでした';
  });

// ===== 期間切り替えタブ =====
// タブクリック → state.period を更新して render() を呼ぶだけ
periodTabs.addEventListener('click', function (e) {
  var btn = e.target.closest('.period-tab');
  if (!btn) return;

  state.period = btn.dataset.period;

  periodTabs.querySelectorAll('.period-tab').forEach(function (tab) {
    var isActive = tab === btn;
    tab.classList.toggle('is-active', isActive);
    tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
  });

  render();
});

// ===== 描画 =====
function render() {
  var current = dashboardData[state.period];
  renderKpiCards(current.kpi);
  updateTrendChart(current.trend);
  updateCategoryChart(current.category);
}

// KPIカード3枚を再生成する。合計売上・平均売上には前期比をサブテキストで添える
function renderKpiCards(kpi) {
  kpiCards.innerHTML = '';

  var isPositive = kpi.changeRate >= 0;
  var changeClass = isPositive ? 'is-positive' : 'is-negative';
  var changeText = '前期比 ' + (isPositive ? '▲ ' : '▼ ') + Math.abs(kpi.changeRate).toFixed(1) + '%';

  var cardDefs = [
    { label: '合計売上', value: '¥' + kpi.total.toLocaleString(), showChange: true },
    { label: '平均売上', value: '¥' + kpi.average.toLocaleString(), showChange: true },
    { label: '目標達成率', value: kpi.goalRate + '%', showChange: false }
  ];

  cardDefs.forEach(function (def) {
    var card = document.createElement('div');
    card.className = 'kpi-card';

    var label = document.createElement('p');
    label.className = 'kpi-label';
    label.textContent = def.label;

    var value = document.createElement('p');
    value.className = 'kpi-value';
    value.textContent = def.value;

    card.appendChild(label);
    card.appendChild(value);

    if (def.showChange) {
      var change = document.createElement('p');
      change.className = 'kpi-subtext ' + changeClass;
      change.textContent = changeText;
      card.appendChild(change);
    }

    kpiCards.appendChild(card);
  });
}

// ===== グラフ初期化（インスタンスは破棄せず再利用する） =====
function initCharts() {
  var initial = dashboardData[DEFAULT_PERIOD];

  trendChart = new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
      labels: initial.trend.labels,
      datasets: [{
        label: '売上',
        data: initial.trend.data,
        borderColor: '#2B7FE8',
        backgroundColor: 'rgba(43, 127, 232, 0.12)',
        tension: 0.3,
        fill: true,
        pointRadius: 4,
        pointHoverRadius: 6
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: { ticks: { callback: function (v) { return (v / 10000).toLocaleString() + '万円'; } } }
      }
    }
  });

  categoryChart = new Chart(document.getElementById('categoryChart'), {
    type: 'bar',
    data: {
      labels: initial.category.labels,
      datasets: [{
        label: 'カテゴリ別売上',
        data: initial.category.data,
        backgroundColor: CATEGORY_COLORS
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: {
        y: { ticks: { callback: function (v) { return (v / 10000).toLocaleString() + '万円'; } } }
      }
    }
  });
}

// 期間切り替え時はインスタンスを作り直さず data を差し替えて update() するだけ
function updateTrendChart(trend) {
  trendChart.data.labels = trend.labels;
  trendChart.data.datasets[0].data = trend.data;
  trendChart.update();
}

function updateCategoryChart(category) {
  categoryChart.data.labels = category.labels;
  categoryChart.data.datasets[0].data = category.data;
  categoryChart.update();
}

{
  "lastUpdated": "2026-06-19 09:00",
  "week": {
    "kpi": {
      "total": 1240000,
      "average": 177142,
      "changeRate": 8.4,
      "goalRate": 92
    },
    "trend": {
      "labels": ["6/13", "6/14", "6/15", "6/16", "6/17", "6/18", "6/19"],
      "data": [150000, 168000, 172000, 190000, 210000, 175000, 175000]
    },
    "category": {
      "labels": ["雑貨", "食品", "衣料", "家電"],
      "data": [420000, 360000, 280000, 180000]
    }
  },
  "month": {
    "kpi": {
      "total": 14800000,
      "average": 1233333,
      "changeRate": -3.2,
      "goalRate": 88
    },
    "trend": {
      "labels": ["7月", "8月", "9月", "10月", "11月", "12月", "1月", "2月", "3月", "4月", "5月", "6月"],
      "data": [1100000, 1250000, 1180000, 1320000, 1400000, 1600000, 1350000, 1150000, 1280000, 1300000, 1480000, 1390000]
    },
    "category": {
      "labels": ["雑貨", "食品", "衣料", "家電"],
      "data": [5200000, 4100000, 3300000, 2200000]
    }
  }
}