PronounsPage/components/ChartSet.vue

<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>

<script>
export default {
    props: {
        name: { required: true },
        data: { required: true },
        init: { default: '' },
        header: {},
    },
    data() {
        return {
            mode: this.init,
        };
    },
};
</script>