60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
|
|
import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
|
|
import type { LearningPath } from "@/services/learningPath";
|
|
import { computed } from "vue";
|
|
|
|
export type DiagramType = "horizontal" | "horizontalSmall" | "singleSmall";
|
|
|
|
export interface Props {
|
|
diagramType?: DiagramType;
|
|
learningPath: LearningPath;
|
|
// set to undefined (default) to show all circles
|
|
showCircleSlugs?: string[];
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
diagramType: "horizontal",
|
|
showCircleSlugs: undefined,
|
|
});
|
|
|
|
const circles = computed(() => {
|
|
if (props.showCircleSlugs?.length) {
|
|
return props.learningPath.circles.filter(
|
|
(c) => props.showCircleSlugs?.includes(c.slug) ?? true
|
|
);
|
|
}
|
|
return props.learningPath.circles;
|
|
});
|
|
|
|
const wrapperClasses = computed(() => {
|
|
let classes = "flex my-5";
|
|
if (props.diagramType === "horizontal") {
|
|
classes += " flex-row h-8";
|
|
} else if (props.diagramType === "horizontalSmall") {
|
|
classes += " flex-row h-5";
|
|
} else if (props.diagramType === "singleSmall") {
|
|
classes += " h-8";
|
|
}
|
|
return classes;
|
|
});
|
|
|
|
const circleClasses = computed(() => {
|
|
if (props.diagramType === "horizontal" || props.diagramType === "horizontalSmall") {
|
|
return "pl-1";
|
|
}
|
|
return "";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="wrapperClasses">
|
|
<LearningPathCircle
|
|
v-for="circle in circles"
|
|
:key="circle.id"
|
|
:class="circleClasses"
|
|
:sectors="calculateCircleSectorData(circle)"
|
|
></LearningPathCircle>
|
|
</div>
|
|
</template>
|