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

first viable version

This commit is contained in:
Lorenz Padberg 2022-06-30 11:02:52 +02:00
parent 20c85dc6fc
commit c9cc2c2cb6
2 changed files with 132 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/circle/CircleDiagram.vue
View File

@ -1,8 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import * as d3 from "d3"; import * as d3 from "d3";
import {computed, onMounted, reactive, ref} from "vue"; import {computed, onMounted} from "vue";
import * as _ from 'underscore' import * as _ from 'underscore'
import {useCircleStore} from "@/stores/circle";
const props = defineProps<{ const props = defineProps<{
circleStore: {}, circleStore: {},
@ -38,7 +37,6 @@ const pieData = computed(() => {
}) })
const completionDataByPageId = _.object(_.map(completionData, function (item) { const completionDataByPageId = _.object(_.map(completionData, function (item) {
console.log(item)
return [item.page_key, item] return [item.page_key, item]
})) }))
@ -53,7 +51,6 @@ const pieData = computed(() => {
pie.endAngle = pie.endAngle + Math.PI pie.endAngle = pie.endAngle + Math.PI
pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2 pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2 pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
console.log(someFinished(thisLearningSequence))
pie.done = someFinished(thisLearningSequence) pie.done = someFinished(thisLearningSequence)
}) })
angles = angles.reverse() angles = angles.reverse()
@ -72,10 +69,6 @@ const blue900 = '#00224D',
sky500 = '#41B5FA' sky500 = '#41B5FA'
const svg = computed(() => {
})
const render = computed(() => { const render = computed(() => {
const width = 450, //props.width, const width = 450, //props.width,
height = 450, //props.height, height = 450, //props.height,
@ -83,8 +76,6 @@ const render = computed( () => {
arrowStrokeWidth = 2 arrowStrokeWidth = 2
const svg = d3.select('.circle-visualization') const svg = d3.select('.circle-visualization')
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
@ -107,8 +98,6 @@ const render = computed( () => {
const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')') const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
// Generate the pie diagram wede // Generate the pie diagram wede
const wedgeGenerator = d3 const wedgeGenerator = d3
.arc() .arc()
@ -148,7 +137,7 @@ const render = computed( () => {
learningSequences learningSequences
.transition() .transition()
.duration('1000') .duration('1')
.attr('fill', (d) => { .attr('fill', (d) => {
return d.done ? sky500 : gray300 return d.done ? sky500 : gray300
}) })
@ -224,9 +213,6 @@ const render = computed( () => {
}) })
onMounted(async () => {
}
);
function viewBox() { function viewBox() {
@ -243,6 +229,8 @@ function viewBox() {
<pre hidden> {{ render }}</pre> <pre hidden> {{ render }}</pre>
<pre> </pre> <pre> </pre>
<svg class="circle-visualization h-full" :viewBox="viewBox"> <svg class="circle-visualization h-full" :viewBox="viewBox">
<circle v-if="! pieData" cx="50" cy="50" r="50"/>
</svg> </svg>
</div> </div>
</template> </template>

2
client/src/views/CircleView.vue
View File

@ -45,7 +45,7 @@ onMounted(async () => {
{{ circleStore.circleData.title }} {{ circleStore.circleData.title }}
</h1> </h1>
<div v-if="circleStore.circleData.learningSequences && circleStore.completionData" class="w-full mt-8"> <div v-if="circleStore.circleData.learningSequences && circleStore.flatChildren" class="w-full mt-8">
<CircleDiagram :circle-store="circleStore"></CircleDiagram> <CircleDiagram :circle-store="circleStore"></CircleDiagram>
</div> </div>