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

Fix some details in d3 diagrams

This commit is contained in:
Daniel Egger 2022-10-11 15:08:51 +02:00
parent e5cdd35e95
commit d80b3ba3ef
4 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/learningPath/CircleDiagram.vue
View File

@ -194,7 +194,8 @@ function render() {
let translate = wedgeGenerator.centroid(d); let translate = wedgeGenerator.centroid(d);
translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth]; translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth];
return "translate(" + translate + ")"; return "translate(" + translate + ")";
}); })
.attr("class", "filter-blue-900");
// Create Arrows // Create Arrows
const arrow = d3 const arrow = d3

14
client/src/components/learningPath/LearningPathDiagram.vue
View File

@ -89,14 +89,16 @@ export default {
mounted() { mounted() {
log.debug("LearningPathDiagram mounted"); log.debug("LearningPathDiagram mounted");
const circleWidth = this.vertical ? 60 : 200;
const radius = (circleWidth * 0.8) / 2;
if (this.vertical) { if (this.vertical) {
this.width = Math.min(960, window.innerWidth - 32); this.width = Math.min(960, window.innerWidth - 32);
this.height = 860; this.height = 860;
} else {
this.width = circleWidth * this.circles.length;
} }
const circleWidth = this.vertical ? 60 : 200;
const radius = (circleWidth * 0.8) / 2;
function getColor(d) { function getColor(d) {
let color = colors.gray[300]; let color = colors.gray[300];
if (d.someFinished) { if (d.someFinished) {
@ -208,7 +210,7 @@ export default {
for (let index = 0; index < i; index++) { for (let index = 0; index < i; index++) {
x += circleWidth * topics[index].circles.length; x += circleWidth * topics[index].circles.length;
} }
return x + 30; return x + 10;
} }
function getTopicVerticalPosition(i, d, topics) { function getTopicVerticalPosition(i, d, topics) {
@ -266,7 +268,7 @@ export default {
if (this.vertical) { if (this.vertical) {
const Circles_X = radius; const Circles_X = radius;
const Topics_X = Circles_X - radius; const Topics_X = Circles_X - circleWidth;
circle_groups.attr("transform", (d, i) => { circle_groups.attr("transform", (d, i) => {
return ( return (
@ -302,7 +304,7 @@ export default {
topicTitles.attr("y", 30); topicTitles.attr("y", 30);
} else { } else {
circle_groups.attr("transform", (d, i) => { circle_groups.attr("transform", (d, i) => {
const x_coord = (i + 1) * circleWidth - radius; const x_coord = (i + 1) * circleWidth - circleWidth / 2;
return "translate(" + x_coord + ", 200)"; return "translate(" + x_coord + ", 200)";
}); });

2
client/src/pages/learningPath/LearningPathPage.vue
View File

@ -68,7 +68,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
</button> </button>
</div> </div>
<LearningPathDiagram <LearningPathDiagram
class="max-w-[1680px] w-full" class="mx-auto max-w-[1920px] w-full"
identifier="mainVisualization" identifier="mainVisualization"
:vertical="false" :vertical="false"
></LearningPathDiagram> ></LearningPathDiagram>

4
client/tailwind.css
View File

@ -66,6 +66,10 @@ svg {
.container-large { .container-large {
@apply mx-auto max-w-6xl w-full px-4 lg:px-8 py-4; @apply mx-auto max-w-6xl w-full px-4 lg:px-8 py-4;
} }
.filter-blue-900 {
filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%) contrast(105%);
}
} }
@layer components { @layer components {