PronounsPage/components/ChartSet.vue

<script setup lang="ts">
import type { Dataset } from '~/components/Chart.vue';

const props = defineProps<{
    name: string;
    data: Dataset[] | Dataset;
    init?: 'daily' | 'cumulative';
    header?: string;
}>();

const mode = ref(props.init);
</script>

<template>
    <div class="card">
        <div class="card-header">
            <p v-if="header" class="h6 d-inline-block me-3">
                <strong>{{ header }}</strong>
            </p>
            <div
                v-for="(desc, m) in { '': 'Hide chart', 'daily': 'Daily change chart', 'cumulative': 'Cumulative chart' }"
                class="form-check form-check-inline"
            >
                <label class="form-check-label">
                    <input v-model="mode" class="form-check-input" type="radio" :value="m">
                    {{ desc }}
                </label>
            </div>
        </div>
        <div v-if="mode" class="card-body">
            <Chart v-show="mode === 'daily'" :data="data" :label="`new ${name} per day`" />
            <Chart v-show="mode === 'cumulative'" :data="data" :label="`cumulative ${name}`" cumulative />
        </div>
    </div>
</template>