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

<template>
    <Story title="Charts / FunnelChart" :layout="{ type: 'single', iframe: true }">
        <Variant title="default (mock 247 лидов)">
            <v-app>
                <v-main class="story-pane">
                    <v-container>
                        <FunnelChart />
                    </v-container>
                </v-main>
            </v-app>
        </Variant>

        <Variant title="пустая воронка">
            <v-app>
                <v-main class="story-pane">
                    <v-container>
                        <FunnelChart :counts="{}" />
                    </v-container>
                </v-main>
            </v-app>
        </Variant>

        <Variant title="концентрация на 'Сделка'">
            <v-app>
                <v-main class="story-pane">
                    <v-container>
                        <FunnelChart :counts="{ won: 100, new: 5, viewed: 5, in_progress: 5 }" />
                    </v-container>
                </v-main>
            </v-app>
        </Variant>
    </Story>
</template>

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