diff --git a/src/API.svelte b/src/API.svelte new file mode 100644 index 0000000..2587627 --- /dev/null +++ b/src/API.svelte @@ -0,0 +1,28 @@ + + +{#if loaded} + +{:else}loading{/if} diff --git a/src/App.svelte b/src/App.svelte index 00daae5..d7c80ea 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,6 +1,7 @@ - +d['年份'])} - on:change={(e) => (currentYear = e.detail.year)} /> - - + { + place = e.detail.data; + }} + api={() => fetch('https://vdata.kalan.dev/api/v1/data/sexual_assault/place')}> + {#if place.length > 0 && data} + +d['年份'])} + on:change={(e) => (currentYear = e.detail.year)} /> + + + {/if} + diff --git a/src/GenderChart.svelte b/src/GenderChart.svelte index 49f5fcd..e508767 100644 --- a/src/GenderChart.svelte +++ b/src/GenderChart.svelte @@ -1,2 +1,115 @@ + + + + (currentYear = e.detail.year)}> +
+ {#if loading} + loading + {:else if data} +
+
+

女({Math.floor($femaleCount)} 人)

+

+ 在受害者當中,每 100 人中有 + {Math.floor(currentData.probability * 100)} + 人為女性 +

+ {#each Array.from({ + length: currentData.probability * 100, + }) as item, i (i)} + + {/each} +
+
+

男({Math.floor($maleCount)} 人)

+

+ 在受害者中,每 100 人中有 + {Math.floor((1 - currentData.probability) * 100)} + 人為男性 +

+ {#each Array.from({ + length: (1 - currentData.probability) * 100, + }) as item, i (i)} + + {/each} +
+
+ {/if} +
+
diff --git a/src/RelationshipChart.svelte b/src/RelationshipChart.svelte index 3f8157a..684b8dc 100644 --- a/src/RelationshipChart.svelte +++ b/src/RelationshipChart.svelte @@ -1,7 +1,7 @@