ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/VBV-331-inhaltstyp-statischer-text

This commit is contained in:
Daniel Egger 2023-05-17 19:11:37 +02:00
parent 9e3124160a 2c8a81a941
commit 518b8c2ad0
1 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/pages/learningPath/circlePage/CircleDiagram.vue
View File

@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { showIcon } from "@/pages/learningPath/circlePage/learningSequenceUtils";
import { useCircleStore } from "@/stores/circle"; import { useCircleStore } from "@/stores/circle";
import type { DefaultArcObject } from "d3";
import * as d3 from "d3"; import * as d3 from "d3";
import pick from "lodash/pick"; import pick from "lodash/pick";
import * as log from "loglevel"; import * as log from "loglevel";
@ -144,6 +146,7 @@ function render() {
// Generate the arrows // Generate the arrows
const arrowRadius = radius * 1.1; const arrowRadius = radius * 1.1;
/* eslint-disable */
const learningSequences = g const learningSequences = g
.selectAll(".learningSegmentArc") .selectAll(".learningSegmentArc")
.data(pieData.value) .data(pieData.value)
@ -153,7 +156,6 @@ function render() {
.attr("role", "button") .attr("role", "button")
.attr("fill", colors.gray[300]); .attr("fill", colors.gray[300]);
/* eslint-disable */
learningSequences learningSequences
.on("mouseover", function (d, i) { .on("mouseover", function (d, i) {
d3.select(this) d3.select(this)
@ -189,6 +191,40 @@ function render() {
learningSequences.append("path").attr("d", wedgeGenerator); learningSequences.append("path").attr("d", wedgeGenerator);
/* eslint-enable */ /* eslint-enable */
learningSequences
.append("text")
.attr("fill", colors.blue[900])
.style("font-size", "15px")
.text((d) => {
return d.title;
})
.attr("transform", function (d) {
let translate = wedgeGenerator.centroid(d as unknown as DefaultArcObject);
translate = [translate[0], translate[1] + 20];
return "translate(" + translate + ")";
})
.attr("class", "circlesText text-large font-bold")
.style("text-anchor", "middle");
const iconWidth = 25;
learningSequences
.append("svg:image")
.attr("xlink:href", (d) => {
if (showIcon(d.icon)) {
return "/static/icons/" + d.icon.replace("it-", "") + ".svg";
}
return "";
})
.attr("width", iconWidth)
.attr("height", iconWidth)
.attr("transform", function (d) {
let translate = wedgeGenerator.centroid(d as unknown as DefaultArcObject);
translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth];
return "translate(" + translate + ")";
})
.attr("class", "filter-blue-900");
// Create Arrows // Create Arrows
const arrow = d3 const arrow = d3
.arc() .arc()