diff --git a/src/components/partials/Visualization.vue b/src/components/partials/Visualization.vue index 4d663a9d4ef2bdd4fb17ed6cad994abb61b683ff..3b72a59500474864fcc6fb3b904543d4e85ff973 100644 --- a/src/components/partials/Visualization.vue +++ b/src/components/partials/Visualization.vue @@ -9,22 +9,36 @@ Memuat data </h3> <div id="options" v-else> - <b class="mr-3">Tata letak</b> - <b-form-group class="mb-0 mr-5"> - <b-form-radio-group v-model="selected" name="position-options"> - <b-form-radio value="normal">Normal</b-form-radio> - <b-form-radio value="sorted">Terurut</b-form-radio> - <b-form-radio value="separated">Pisah</b-form-radio> - <b-form-input v-if="selected == 'separated'" v-model="separator" type="range" :min="minRadius" :max="maxRadius"></b-form-input> - </b-form-radio-group> - </b-form-group> - <b class="mr-3">Warna</b> - <b-form-group class="mb-0"> - <b-form-radio-group v-model="selectedColor" name="color-options"> - <b-form-radio value="random">Random</b-form-radio> - <b-form-radio value="valueDependent">Sesuai nilai</b-form-radio> - </b-form-radio-group> - </b-form-group> + <transition name="fade" mode="out-in"> + <div v-if="optionHidden"> + <b-button class="option-toggle" @click="optionHidden = !optionHidden"> + â–¼ + </b-button> + </div> + <div v-else> + <div> + <b-button class="option-toggle" @click="optionHidden = !optionHidden"> + â–² + </b-button> + </div> + <b class="mr-3">Tata letak</b> + <b-form-group class="mb-0 mr-5"> + <b-form-radio-group v-model="selected" name="position-options"> + <b-form-radio value="normal">Normal</b-form-radio> + <b-form-radio value="sorted">Terurut</b-form-radio> + <b-form-radio value="separated">Pisah</b-form-radio> + <b-form-input v-if="selected == 'separated'" v-model="separator" type="range" :min="minRadius" :max="maxRadius"></b-form-input> + </b-form-radio-group> + </b-form-group> + <b class="mr-3">Warna</b> + <b-form-group class="mb-0"> + <b-form-radio-group v-model="selectedColor" name="color-options"> + <b-form-radio value="random">Random</b-form-radio> + <b-form-radio value="valueDependent">Sesuai nilai</b-form-radio> + </b-form-radio-group> + </b-form-group> + </div> + </transition> </div> </div> <svg id="chart"/> @@ -61,6 +75,7 @@ export default { columnPercentage: "percentage", columnSubdata: "subdata", ticked: null, + optionHidden: true, } }, mounted() { @@ -308,7 +323,10 @@ export default { background-color: #ffffff88; #options { - display: flex; + .option-toggle { + color: white; + margin-bottom: 5px; + } } } }