#196 [admin] <ChartSet/>

components/ChartSet.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="card">
+        <div class="card-header">
+            <div class="form-check form-check-inline"
+                 v-for="(desc, m) in {'': 'Hide chart', 'daily': 'Daily new chart', 'cumulative': 'Cumulative chart'}">
+                <label class="form-check-label">
+                    <input class="form-check-input" type="radio" v-model="mode" :value="m">
+                    {{desc}}
+                </label>
+            </div>
+        </div>
+        <div class="card-body" v-if="mode">
+            <Chart :name="name" :data="data" v-show="mode === 'daily'"/>
+            <Chart :name="name" :data="data" cumulative v-show="mode === 'cumulative'"/>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            name: { required: true },
+            data: { required: true },
+            init: { 'default': '' },
+        },
+        data() {
+            return {
+                mode: this.init,
+            }
+        },
+    }
+</script>

routes/admin.vue

@@ -80,8 +80,7 @@
             </details>
         </section>
 
-        <Chart name="users" :data="stats.users.chart"/>
-        <Chart name="users" :data="stats.users.chart" cumulative/>
+        <ChartSet name="users" :data="stats.users.chart" init="cumulative"/>
 
         <section v-for="(locale, k) in stats.locales" :key="k">
             <details class="border mb-3" open>
@@ -126,8 +125,7 @@
                     </div>
                 </div>
                 <div class="p-3 border-top">
-                    <Chart name="profiles" :data="locale.chart"/>
-                    <Chart name="profiles" :data="locale.chart" cumulative/>
+                    <ChartSet name="profiles" :data="locale.chart"/>
                 </div>
             </details>
         </section>