first really awesome wow effect 🤢
This commit is contained in:
Lorenz Padberg
parent
4fe4f026ee
commit
dad0942049
|
|
@ -1,58 +1,145 @@
|
|||
<script>
|
||||
import * as d3 from 'd3'
|
||||
<script setup lang="ts">
|
||||
import * as d3 from "d3";
|
||||
import {useCircleStore} from '@/stores/circle';
|
||||
import {onMounted} from "vue";
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
const data = [5, 5, 5, 5, 5]
|
||||
|
||||
const width = 500,
|
||||
height = 500,
|
||||
radius = Math.min(width, height) / 2.5
|
||||
|
||||
const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
|
||||
|
||||
const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
|
||||
|
||||
const color = '#99C7E7'
|
||||
|
||||
// Generate the pie
|
||||
const pie = d3.pie()
|
||||
|
||||
// Generate the arcs
|
||||
const arc = d3
|
||||
.arc()
|
||||
.innerRadius(radius / 2.5)
|
||||
.padAngle(12 / 360)
|
||||
.outerRadius(radius)
|
||||
|
||||
// Generate the arrows
|
||||
const arrow = d3
|
||||
.arc()
|
||||
.innerRadius(radius * 1.15)
|
||||
.padAngle(30 / 360)
|
||||
.outerRadius(radius * 1.16)
|
||||
|
||||
//Generate groups
|
||||
const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
|
||||
|
||||
//Generate groups
|
||||
const arrows = g
|
||||
.selectAll('arrow')
|
||||
.data(pie(data))
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'arrow')
|
||||
.attr('marker-start', 'url(#triangle)')
|
||||
|
||||
const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
|
||||
|
||||
//Draw arc paths
|
||||
arcs.append('path').attr('fill', color).attr('d', arc)
|
||||
|
||||
//Draw arrow paths
|
||||
arrows.append('path').attr('fill', color).attr('d', arrow)
|
||||
const props = defineProps<{
|
||||
circleData: {
|
||||
default: {
|
||||
id: 10,
|
||||
title: 'Analyse des letzten Falles',
|
||||
slug: 'analyse',
|
||||
type: 'learnpath.Circle',
|
||||
translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
|
||||
learning_sequences: [
|
||||
{
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Beobachten',
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: 'Anwenden',
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
title: 'Üben',
|
||||
done: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
type: object
|
||||
},
|
||||
width: {
|
||||
default: 500,
|
||||
type: number,
|
||||
},
|
||||
height: {
|
||||
default: 500,
|
||||
type: number,
|
||||
},
|
||||
}>()
|
||||
|
||||
onMounted(async () => {
|
||||
const data = [5, 5, 5, 5, 5]
|
||||
|
||||
const width = 500,
|
||||
height = 500,
|
||||
radius = Math.min(width, height) / 3
|
||||
|
||||
const blue900 = '#00224D',
|
||||
blue700 = '#1A5197',
|
||||
gray100 = '#EDF2F6',
|
||||
gray300 = '#E0E5EC',
|
||||
gray500 = '#B1C1CA',
|
||||
sky400 = '#72CAFF',
|
||||
sky500 = '#41B5FA'
|
||||
|
||||
|
||||
const svg = d3.select('.circle-visualization')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
|
||||
const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
|
||||
|
||||
// Generate the pie
|
||||
const pie = d3.pie()
|
||||
|
||||
// Generate the pie diagram wede
|
||||
const wedge = d3
|
||||
.arc()
|
||||
.innerRadius(radius / 2.5)
|
||||
.padAngle(12 / 360)
|
||||
.outerRadius(radius)
|
||||
|
||||
|
||||
|
||||
// Generate the arrows
|
||||
const arrow = d3
|
||||
.arc()
|
||||
.innerRadius(radius * 1.15)
|
||||
.padAngle(30 / 360)
|
||||
.outerRadius(radius * 1.16)
|
||||
|
||||
//Generate groups
|
||||
const wedgesGroup = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
|
||||
wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge)
|
||||
|
||||
|
||||
const learningSequenceText = wedgesGroup
|
||||
.append('text')
|
||||
.attr('fill', blue900)
|
||||
.style('font-size', 19)
|
||||
.text((d) => {return 'segment'})
|
||||
.attr("transform", function(d) {
|
||||
let translate = wedge.centroid(d)
|
||||
translate = [translate[0], translate[1] + 20]
|
||||
return "translate(" + translate + ")"; })
|
||||
.attr('class', 'circlesText text-xl font-bold')
|
||||
.style('text-anchor', 'middle')
|
||||
|
||||
const learningSequenceIcon = wedgesGroup.append("svg:image")
|
||||
.attr("xlink:href", "/static/icons/icon-ls-network.svg")
|
||||
.attr("width", 40)
|
||||
.attr("height", 40)
|
||||
.attr("transform", function(d) {
|
||||
let translate = wedge.centroid(d)
|
||||
translate = [translate[0]-20, translate[1] - 35]
|
||||
return "translate(" + translate + ")"; })
|
||||
|
||||
|
||||
//Generate groups
|
||||
const arrows = g
|
||||
.selectAll('arrow')
|
||||
.data(pie(data))
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'arrow')
|
||||
.attr('marker-start', 'url(#triangle)')
|
||||
|
||||
const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
|
||||
|
||||
//Draw wedge paths
|
||||
|
||||
|
||||
//Draw arrow paths
|
||||
arrows.append('path').attr('fill', gray300).attr('d', arrow)
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
function viewBox() {
|
||||
return `0 0 ${width} ${height}`
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -69,5 +156,8 @@ input {
|
|||
</style>
|
||||
|
||||
<template>
|
||||
<div class="demo-chart" width="500" heigth="500"/>
|
||||
<div class="svg-container h-full content-center">
|
||||
<svg class="circle-visualization h-full" :viewBox="viewBox">
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import LearningContent from '@/components/circle/LearningContent.vue';
|
|||
import {onMounted} from 'vue'
|
||||
import {useCircleStore} from '@/stores/circle';
|
||||
import SelfEvaluation from '@/components/circle/SelfEvaluation.vue';
|
||||
import CircleDiagram from '@/components/circle/CircleDiagram.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
circleSlug: string
|
||||
|
|
@ -45,7 +46,7 @@ onMounted(async () => {
|
|||
</h1>
|
||||
|
||||
<div class="mt-8">
|
||||
<img src="@/assets/circle-analyse.svg" alt="">
|
||||
<CircleDiagram></CircleDiagram>
|
||||
</div>
|
||||
|
||||
<div class="border-t-2 border-gray-500 mt-4 lg:hidden">
|
||||
|
|
|
|||
Loading…
Reference in New Issue