<script setup lang="ts">
import ActivityChart from './ActivityChart.vue';
</script>

<template>
    <Story title="Charts / ActivityChart" :layout="{ type: 'single', iframe: true }">
        <Variant title="default (mock 7 точек)">
            <v-app>
                <v-main class="story-pane">
                    <v-container>
                        <ActivityChart />
                    </v-container>
                </v-main>
            </v-app>
        </Variant>

        <Variant title="ровный рост">
            <v-app>
                <v-main class="story-pane">
                    <v-container>
                        <ActivityChart :points="[10, 20, 30, 40, 50, 55, 60]" :max="60" />
                    </v-container>
                </v-main>
            </v-app>
        </Variant>

        <Variant title="спад">
            <v-app>
                <v-main class="story-pane">
                    <v-container>
                        <ActivityChart :points="[55, 45, 38, 30, 20, 12, 8]" :max="60" />
                    </v-container>
                </v-main>
            </v-app>
        </Variant>
    </Story>
</template>

<style scoped>
.story-pane {
    background: #f6f3ec;
    min-height: 100vh;
    padding: 24px;
}
</style>
