GrChartArea

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GR_TONES, GrButton, type GrTone } from '@feugene/granularity'

// `GrChartArea` подставляется авто-импортом (`unplugin-vue-components`).

/**
 * Площадь вместо линии берут тогда, когда важен не только уровень, но и объём:
 * «сколько всего набежало». Заливка гаснет к базовой линии — сплошная плашка
 * утяжелила бы низ графика, где смотреть не на что.
 */
const traffic = Array.from({ length: 14 }, (_, day) => ({
  x: new Date(2026, 6, day + 1),
  y: Math.round(1800 + Math.sin(day / 2.2) * 420 + day * 55),
}))

/**
 * Линия и заливка красятся **ролями темы**, а не готовыми цветами: при
 * переключении light/dark ничего не пересоздаётся — значение роли меняет себя
 * само. Отсюда `var(--gr-…)`, а не hex.
 */
const toneColor: Record<GrTone, string> = {
  primary: 'var(--gr-primary)',
  neutral: 'var(--gr-secondary)',
  success: 'var(--gr-success)',
  warning: 'var(--gr-warning)',
  danger: 'var(--gr-danger)',
  info: 'var(--gr-info)',
  slate: 'var(--gr-slate)',
  azure: 'var(--gr-azure)',
}

const lineTone = ref<GrTone>('primary')
const fillTone = ref<GrTone>('primary')

const series = computed(() => [{
  id: 'sessions',
  label: 'Сессии',
  data: traffic,
  color: toneColor[lineTone.value],
  // Заливка — своя роль: линия обязана читаться на фоне, а площадь под ней —
  // не спорить с сеткой. Совпадение цветов частый случай, но не закон.
  fillColor: toneColor[fillTone.value],
}])
</script>

<template>
  <div class="grid gap-3">
    <span class="text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]">
      Сессии, две недели
    </span>

    <GrChartArea
      :series="series"
      :height="220"
      curve="smooth"
      include-zero
      aria-label="Сессии за две недели"
    />

    <div class="flex flex-wrap items-center gap-2">
      <span class="w-16 shrink-0 text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]">
        Линия
      </span>
      <GrButton
        v-for="tone in GR_TONES"
        :key="tone"
        size="sm"
        :variant="lineTone === tone ? 'primary' : 'outline'"
        :tone="tone"
        @click="lineTone = tone"
      >
        {{ tone }}
      </GrButton>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <span class="w-16 shrink-0 text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]">
        Заливка
      </span>
      <GrButton
        v-for="tone in GR_TONES"
        :key="tone"
        size="sm"
        :variant="fillTone === tone ? 'primary' : 'outline'"
        :tone="tone"
        @click="fillTone = tone"
      >
        {{ tone }}
      </GrButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

/**
 * Доля во времени — типичная задача именно для площадей: лента показывает, как
 * менялось распределение, когда абсолютные числа растут у всех сразу.
 */
const months = ['Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт']

const series = [
  { id: 'free', label: 'Free', x: months, y: [820, 910, 1040, 1180, 1240, 1310] },
  { id: 'pro', label: 'Pro', x: months, y: [210, 246, 268, 331, 402, 486] },
  { id: 'team', label: 'Team', x: months, y: [42, 51, 58, 74, 96, 128] },
]

const normalized = ref(true)
</script>

<template>
  <div class="grid gap-3">
    <div class="flex flex-wrap items-baseline justify-between gap-4">
      <span class="text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]">
        Активные подписки по планам
      </span>

      <GrSwitch v-model="normalized" size="sm">
          Сто процентов
        </GrSwitch>
    </div>

    <GrChartArea
      :series="series"
      :stacked="normalized ? '100%' : true"
      :height="280"
      show-legend
      data-table="visible"
      aria-label="Активные подписки по планам"
    />

    <p class="text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]">
      Обычный стек показывает величины и их сумму, <code>stacked: '100%'</code> — только
      распределение. Нормируется <strong>рисунок</strong>, а не данные: в таблице под графиком
      по-прежнему стоят абсолютные числа подписок, а не доли.
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

/**
 * Стек и наложение отвечают на разные вопросы, и переключатель ниже — самый
 * быстрый способ это увидеть.
 *
 * Стек показывает **целое и вклад каждого канала** в него: верхний край полос
 * это выручка компании. Наложение показывает **каналы сами по себе**: сравнить
 * два ряда между собой на стеке нельзя — второй ряд едет по горбам первого.
 */
const weeks = ['W27', 'W28', 'W29', 'W30', 'W31', 'W32', 'W33', 'W34']

const series = [
  { id: 'retail', label: 'Розница', x: weeks, y: [420, 460, 445, 510, 495, 540, 560, 585] },
  { id: 'partners', label: 'Партнёры', x: weeks, y: [180, 190, 230, 210, 245, 260, 250, 290] },
  { id: 'api', label: 'API', x: weeks, y: [60, 75, 90, 120, 140, 165, 190, 230] },
]

const mode = ref<'stacked' | 'overlay'>('stacked')

const hint = computed(() => (mode.value === 'stacked'
  ? 'Верхний край полос — выручка целиком. Высота полосы — вклад канала.'
  : 'Ряды сравниваются между собой: заливка просвечивает там, где они пересекаются.'))
</script>

<template>
  <div class="grid gap-3">
    <div class="flex flex-wrap items-baseline justify-between gap-4">
      <span class="text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]">
        Выручка по каналам, тыс. ₽
      </span>

      <GrSegmented
        v-model="mode"
        size="sm"
        :options="[{ value: 'stacked', label: 'Стек' }, { value: 'overlay', label: 'Наложение' }]"
        aria-label="Режим площадей"
      />
    </div>

    <GrChartArea
      :series="series"
      :stacked="mode === 'stacked'"
      :height="240"
      show-legend
      aria-label="Выручка по каналам за восемь недель"
    />

    <p class="text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]">
      {{ hint }} Тултип и скрытая таблица в обоих режимах показывают
      <strong>своё значение канала</strong>, а не сумму под ним.
    </p>
  </div>
</template>

<script setup lang="ts">
/**
 * Базовая линия площади — ноль, а не низ холста.
 *
 * Заливай мы всегда до нижнего края, убыток в минус десять нарисовался бы той
 * же высотой, что и прибыль в плюс десять, — только чуть ниже. Здесь минус
 * уходит под ось и читается как минус.
 */
const months = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен']

const series = [{
  id: 'profit',
  label: 'Прибыль',
  x: months,
  y: [-140, -95, -30, 25, 60, 40, 110, 165, 210],
}]
</script>

<template>
  <div class="grid gap-3">
    <span class="text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]">
      Операционная прибыль, тыс. ₽
    </span>

    <GrChartArea
      :series="series"
      :height="220"
      curve="smooth"
      aria-label="Операционная прибыль по месяцам"
    />
  </div>
</template>