274 lines
8.3 KiB
Vue
274 lines
8.3 KiB
Vue
<template>
|
|
<Drawer
|
|
:visible="sidebarView"
|
|
:closeIcon="'pi pi-chevron-left'"
|
|
:modal="false"
|
|
position="left"
|
|
:dismissable="false"
|
|
>
|
|
<template #header>
|
|
<p class="h1">Visualization Setting</p>
|
|
</template>
|
|
<div>
|
|
<!-- View -->
|
|
<div class="my-4 border-b border-neutral-200">
|
|
<p class="h2">View</p>
|
|
<ul class="space-y-3 mb-4">
|
|
<!-- Select bpmn / processmap button -->
|
|
<li class="btn-toggle-content">
|
|
<span
|
|
class="btn-toggle-item"
|
|
:class="mapType === 'processMap' ? 'btn-toggle-show ' : ''"
|
|
@click="onProcessMapClick()"
|
|
>
|
|
Process Map
|
|
</span>
|
|
<span
|
|
class="btn-toggle-item"
|
|
:class="mapType === 'bpmn' ? 'btn-toggle-show' : ''"
|
|
@click="onBPMNClick()"
|
|
>
|
|
BPMN Model
|
|
</span>
|
|
</li>
|
|
<!-- Select drawing style: bezier / unbundled-bezier button -->
|
|
<li class="btn-toggle-content">
|
|
<span
|
|
class="btn-toggle-item"
|
|
:class="
|
|
curveStyle === 'unbundled-bezier' ? 'btn-toggle-show ' : ''
|
|
"
|
|
@click="switchCurveStyles('unbundled-bezier')"
|
|
>
|
|
Curved
|
|
</span>
|
|
<span
|
|
class="btn-toggle-item"
|
|
:class="curveStyle === 'taxi' ? 'btn-toggle-show' : ''"
|
|
@click="switchCurveStyles('taxi')"
|
|
>
|
|
Elbow
|
|
</span>
|
|
</li>
|
|
<!-- Vertical TB | Horizontal LR -->
|
|
<li class="btn-toggle-content">
|
|
<span
|
|
class="btn-toggle-item"
|
|
:class="rank === 'LR' ? 'btn-toggle-show ' : ''"
|
|
@click="switchRank('LR')"
|
|
>
|
|
Horizontal
|
|
</span>
|
|
<span
|
|
class="btn-toggle-item"
|
|
:class="rank === 'TB' ? 'btn-toggle-show' : ''"
|
|
@click="switchRank('TB')"
|
|
>
|
|
Vertical
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Data Layer -->
|
|
<div>
|
|
<p class="h2">Data Layer</p>
|
|
<ul class="space-y-2">
|
|
<li
|
|
class="flex justify-between mb-3"
|
|
@change="switchDataLayerType($event, 'freq')"
|
|
>
|
|
<div class="flex items-center w-1/2">
|
|
<RadioButton
|
|
v-model="dataLayerType"
|
|
inputId="freq"
|
|
name="dataLayer"
|
|
value="freq"
|
|
class="mr-2"
|
|
@click.prevent="switchDataLayerType($event, 'freq')"
|
|
/>
|
|
<label for="freq">Frequency</label>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<select
|
|
class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary"
|
|
:disabled="dataLayerType === 'duration'"
|
|
>
|
|
<option
|
|
v-for="(freq, index) in selectFrequency"
|
|
:key="index"
|
|
:value="freq.value"
|
|
:disabled="freq.disabled"
|
|
:selected="freq.value === selectedFreq"
|
|
>
|
|
{{ freq.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</li>
|
|
<li
|
|
class="flex justify-between mb-3"
|
|
@change="switchDataLayerType($event, 'duration')"
|
|
>
|
|
<div class="flex items-center w-1/2">
|
|
<RadioButton
|
|
v-model="dataLayerType"
|
|
inputId="duration"
|
|
name="dataLayer"
|
|
value="duration"
|
|
class="mr-2"
|
|
@click.prevent="switchDataLayerType($event, 'duration')"
|
|
/>
|
|
<label for="duration">Duration</label>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<select
|
|
class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary"
|
|
:disabled="dataLayerType === 'freq'"
|
|
>
|
|
<option
|
|
v-for="(duration, index) in selectDuration"
|
|
:key="index"
|
|
:value="duration.value"
|
|
:disabled="duration.disabled"
|
|
:selected="duration.value === selectedDuration"
|
|
>
|
|
{{ duration.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2023-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// chiayin.kuo@dsp.im (chiayin), 2023/1/31
|
|
/**
|
|
* @module components/Discover/Map/SidebarView Visualization
|
|
* settings sidebar for map view type (process/BPMN), curve
|
|
* style, direction, and data layer selection.
|
|
*/
|
|
|
|
import { ref, onMounted } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { useMapPathStore } from "@/stores/mapPathStore";
|
|
|
|
defineProps({
|
|
sidebarView: {
|
|
type: Boolean,
|
|
require: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits([
|
|
"switch-map-type",
|
|
"switch-curve-styles",
|
|
"switch-rank",
|
|
"switch-data-layer-type",
|
|
]);
|
|
|
|
const mapPathStore = useMapPathStore();
|
|
const { isBPMNOn } = storeToRefs(mapPathStore);
|
|
|
|
const selectFrequency = ref([
|
|
{ value: "total", label: "Total", disabled: false },
|
|
{ value: "rel_freq", label: "Relative", disabled: false },
|
|
{ value: "average", label: "Average", disabled: false },
|
|
{ value: "median", label: "Median", disabled: false },
|
|
{ value: "max", label: "Max", disabled: false },
|
|
{ value: "min", label: "Min", disabled: false },
|
|
{ value: "cases", label: "Number of cases", disabled: false },
|
|
]);
|
|
const selectDuration = ref([
|
|
{ value: "total", label: "Total", disabled: false },
|
|
{ value: "rel_duration", label: "Relative", disabled: false },
|
|
{ value: "average", label: "Average", disabled: false },
|
|
{ value: "median", label: "Median", disabled: false },
|
|
{ value: "max", label: "Max", disabled: false },
|
|
{ value: "min", label: "Min", disabled: false },
|
|
]);
|
|
const curveStyle = ref("unbundled-bezier"); // unbundled-bezier | taxi
|
|
const mapType = ref("processMap"); // processMap | bpmn
|
|
const dataLayerType = ref(null); // freq | duration
|
|
const dataLayerOption = ref(null);
|
|
const selectedFreq = ref("");
|
|
const selectedDuration = ref("");
|
|
const rank = ref("LR"); // Vertical TB | Horizontal LR
|
|
|
|
/**
|
|
* Switches the map type and emits the change event.
|
|
* @param {string} type - 'processMap' or 'bpmn'.
|
|
*/
|
|
function switchMapType(type) {
|
|
mapType.value = type;
|
|
emit("switch-map-type", mapType.value);
|
|
}
|
|
|
|
/**
|
|
* Switches the curve style and emits the change event.
|
|
* @param {string} style - 'unbundled-bezier' (curved) or 'taxi' (elbow).
|
|
*/
|
|
function switchCurveStyles(style) {
|
|
curveStyle.value = style;
|
|
emit("switch-curve-styles", curveStyle.value);
|
|
}
|
|
|
|
/**
|
|
* Switches the graph layout direction and emits the change event.
|
|
* @param {string} rankValue - 'TB' (vertical) or 'LR' (horizontal).
|
|
*/
|
|
function switchRank(rankValue) {
|
|
rank.value = rankValue;
|
|
emit("switch-rank", rank.value);
|
|
}
|
|
|
|
/**
|
|
* Switches the data layer type (frequency or duration) and option.
|
|
* @param {Event} e - The change event from the radio or select.
|
|
* @param {string} type - 'freq' or 'duration'.
|
|
*/
|
|
function switchDataLayerType(e, type) {
|
|
let value = "";
|
|
|
|
if (e.target.value !== "freq" && e.target.value !== "duration")
|
|
value = e.target.value;
|
|
switch (type) {
|
|
case "freq":
|
|
value = value || selectedFreq.value || "total";
|
|
dataLayerType.value = type;
|
|
dataLayerOption.value = value;
|
|
selectedFreq.value = value;
|
|
break;
|
|
case "duration":
|
|
value = value || selectedDuration.value || "total";
|
|
dataLayerType.value = type;
|
|
dataLayerOption.value = value;
|
|
selectedDuration.value = value;
|
|
break;
|
|
}
|
|
emit("switch-data-layer-type", dataLayerType.value, dataLayerOption.value);
|
|
}
|
|
|
|
/** Switches to Process Map view. */
|
|
function onProcessMapClick() {
|
|
mapPathStore.setIsBPMNOn(false);
|
|
switchMapType("processMap");
|
|
}
|
|
|
|
/** Switches to BPMN Model view. */
|
|
function onBPMNClick() {
|
|
mapPathStore.setIsBPMNOn(true);
|
|
switchMapType("bpmn");
|
|
}
|
|
|
|
onMounted(() => {
|
|
dataLayerType.value = "freq";
|
|
dataLayerOption.value = "total";
|
|
});
|
|
</script>
|