[READ-ONLY] Mirror of https://github.com/probablykasper/starchart. GitHub star history graph
starchart.kasper.space
chart
github
github-api
github-star
graph
history
star
star-history
stargazers
stars
Add animated star counter
+110
-45
+110
-45
src/routes/Label.svelte
+110
-45
src/routes/Label.svelte
···
1
1
<script lang="ts">
2
2
import { cubicOut } from 'svelte/easing'
3
-
import { fade, scale } from 'svelte/transition'
3
+
import { fade, fly, scale } from 'svelte/transition'
4
4
import type { Line } from './chart'
5
5
import { hex_colors } from './color'
6
6
···
10
10
export let on_delete: () => void
11
11
</script>
12
12
13
-
<span
14
-
class="serie"
15
-
class:screenshot-mode={screenshot_mode}
16
-
style:--color-1={hex}
17
-
style:--color-2={hex + '77'}
18
-
in:scale={{ duration: 200, easing: cubicOut, start: 0.75, opacity: 0 }}
13
+
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
14
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
15
+
<div
16
+
class="container"
19
17
class:hidden={line.hidden}
18
+
style:--color-1={hex}
19
+
style:--color-2="color-mix(in srgb, black, var(--color-1) 47%)"
20
20
tabindex="0"
21
21
on:keydown={(e) => {
22
22
if (e.key === ' ' || e.key === 'Enter') {
···
28
28
e.preventDefault()
29
29
}
30
30
}}
31
-
role="button"
31
+
in:scale={{ duration: 200, easing: cubicOut, start: 0.75, opacity: 0 }}
32
32
>
33
-
<button
34
-
type="button"
35
-
class="name"
36
-
tabindex="-1"
37
-
on:click={() => {
38
-
line.hidden = !line.hidden
39
-
line.instance.applyOptions({ visible: !line.hidden })
40
-
}}
41
-
>
42
-
{line.name}
43
-
</button>
44
-
<button type="button" class="x" class:loading={!line.final} on:click={on_delete} tabindex="-1">
45
-
<svg
46
-
fill="currentColor"
47
-
width="18"
48
-
height="18"
49
-
clip-rule="evenodd"
50
-
fill-rule="evenodd"
51
-
stroke-linejoin="round"
52
-
stroke-miterlimit="2"
53
-
viewBox="0 0 24 24"
54
-
xmlns="http://www.w3.org/2000/svg"
55
-
><path
56
-
d="m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"
57
-
/></svg
33
+
{#if !line.final}
34
+
<div class="counter-container">
35
+
<div class="counter-bg">
36
+
{line.data.length}
37
+
</div>
38
+
</div>
39
+
<div class="counter-container">
40
+
<div class="counter">
41
+
<span class="counter-sizing-text">{line.data.length}</span>
42
+
{#key line.data.length}
43
+
<span
44
+
class="counter-text"
45
+
in:fly={{ duration: 300, y: 10 }}
46
+
out:fly={{ duration: 300, y: -10 }}>{line.data.length}</span
47
+
>
48
+
{/key}
49
+
</div>
50
+
</div>
51
+
{/if}
52
+
<span class="serie" class:screenshot-mode={screenshot_mode}>
53
+
<button
54
+
type="button"
55
+
class="name"
56
+
tabindex="-1"
57
+
on:click={() => {
58
+
line.hidden = !line.hidden
59
+
line.instance.applyOptions({ visible: !line.hidden })
60
+
}}
58
61
>
59
-
{#if !line.final}
60
-
<div class="spinner" transition:fade={{ duration: 150 }}>
61
-
<div class="circle"></div>
62
-
</div>
63
-
{/if}
64
-
</button>
65
-
</span>
62
+
{line.name}
63
+
</button>
64
+
<button type="button" class="x" class:loading={!line.final} on:click={on_delete} tabindex="-1">
65
+
<svg
66
+
fill="currentColor"
67
+
width="18"
68
+
height="18"
69
+
clip-rule="evenodd"
70
+
fill-rule="evenodd"
71
+
stroke-linejoin="round"
72
+
stroke-miterlimit="2"
73
+
viewBox="0 0 24 24"
74
+
xmlns="http://www.w3.org/2000/svg"
75
+
><path
76
+
d="m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"
77
+
/></svg
78
+
>
79
+
{#if !line.final}
80
+
<div class="spinner" transition:fade={{ duration: 150 }}>
81
+
<div class="circle"></div>
82
+
</div>
83
+
{/if}
84
+
</button>
85
+
</span>
86
+
</div>
66
87
67
88
<style lang="sass">
89
+
.container
90
+
position: relative
91
+
outline: none
68
92
.serie
69
93
border-radius: 8px
70
94
border: 2px solid
71
95
display: inline-flex
72
96
align-items: center
73
-
font-size: 0.9rem
97
+
font-size: 0.9375rem
74
98
font-weight: 500
75
99
transition: 100ms ease-out
76
100
outline: 1px solid transparent
77
101
background-color: var(--color-2)
78
102
border-color: var(--color-1)
79
103
height: 24px
80
-
&:focus-visible
81
-
border-color: hsla(0, 0%, 100%, 1)
104
+
position: relative
82
105
svg
83
106
display: block
107
+
.container:focus-visible .serie
108
+
border-color: hsla(0, 0%, 100%, 1)
109
+
.counter-container
110
+
position: absolute
111
+
bottom: -0.9375rem
112
+
font-size: 0.75rem
113
+
width: 100%
114
+
display: flex
115
+
justify-content: center
116
+
user-select: none
117
+
overflow: hidden
118
+
.counter-bg, .counter
119
+
padding-bottom: 0.175rem
120
+
padding-right: 0.5rem
121
+
padding-left: 0.5rem
122
+
.counter-bg
123
+
border: 2px solid
124
+
background-color: var(--color-2)
125
+
border-color: var(--color-1)
126
+
border-radius: 8px
127
+
color: transparent
128
+
.container:focus-visible .counter-bg
129
+
border-color: hsla(0, 0%, 100%, 1)
130
+
.counter
131
+
z-index: 1
132
+
background-color: var(--color-2)
133
+
border-bottom-left-radius: 8px
134
+
border-bottom-right-radius: 8px
135
+
margin-bottom: 0.175rem
136
+
padding-bottom: 0rem
137
+
position: relative
138
+
span
139
+
pointer-events: none
140
+
.counter-sizing-text
141
+
color: transparent
142
+
.counter-text
143
+
position: absolute
144
+
top: 0
145
+
left: 0
146
+
width: 100%
84
147
.hidden
85
148
opacity: 0.6
86
-
text-decoration: line-through
87
-
border-style: dashed
149
+
button
150
+
text-decoration: line-through
151
+
.serie, .counter-bg
152
+
border-style: dashed
88
153
button
89
154
background: none
90
155
border: none