svelte-tiny-linked-charts 1.6.1 → 1.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/LinkedChart.svelte +45 -45
- package/package.json +1 -1
package/dist/LinkedChart.svelte
CHANGED
|
@@ -108,62 +108,62 @@
|
|
|
108
108
|
|
|
109
109
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
110
110
|
<svg
|
|
111
|
-
{
|
|
112
|
-
height={
|
|
113
|
-
viewBox="0 0 {
|
|
114
|
-
preserveAspectRatio={
|
|
111
|
+
{width}
|
|
112
|
+
height={type == "line" ? height + barWidth / 2 : height}
|
|
113
|
+
viewBox="0 0 {width } {height}"
|
|
114
|
+
preserveAspectRatio={preserveAspectRatio ? "true" : "none"}
|
|
115
115
|
{...$$restProps}
|
|
116
|
-
on:mouseleave={
|
|
117
|
-
on:blur={
|
|
116
|
+
on:mouseleave={endHover}
|
|
117
|
+
on:blur={endHover}>
|
|
118
118
|
|
|
119
|
-
<g transform="translate({
|
|
120
|
-
{
|
|
121
|
-
<polyline points={
|
|
122
|
-
{
|
|
119
|
+
<g transform="translate({alignmentOffset}, 0)">
|
|
120
|
+
{#if type == "line"}
|
|
121
|
+
<polyline points={polyline.join(" ")} stroke={lineColor} fill="transparent" />
|
|
122
|
+
{/if}
|
|
123
123
|
|
|
124
|
-
{
|
|
125
|
-
{
|
|
124
|
+
{#each Object.entries(data) as [key, value], i}
|
|
125
|
+
{#if type == "bar"}
|
|
126
126
|
<rect
|
|
127
|
-
style={
|
|
128
|
-
opacity={
|
|
129
|
-
fill={
|
|
130
|
-
width={
|
|
131
|
-
height={
|
|
132
|
-
x={
|
|
133
|
-
y={
|
|
134
|
-
{
|
|
127
|
+
style={transition ? `transition: all ${transition}ms` : null}
|
|
128
|
+
opacity={hover && $hoveringKey[linkedKey] && $hoveringKey[linkedKey] != key ? fadeOpacity : 1}
|
|
129
|
+
fill={fill}
|
|
130
|
+
width={barWidth}
|
|
131
|
+
height={type == "line" ? height : getHeight(value)}
|
|
132
|
+
x={(parseInt(gap) + barWidth) * i}
|
|
133
|
+
y={(height - getHeight(value))} />
|
|
134
|
+
{:else if type == "line"}
|
|
135
135
|
<circle
|
|
136
|
-
fill={
|
|
137
|
-
r={
|
|
138
|
-
cy={
|
|
139
|
-
cx={
|
|
140
|
-
{
|
|
136
|
+
fill={hover && $hoveringKey[linkedKey] !== null && $hoveringKey[linkedKey] == key ? fill : "transparent"}
|
|
137
|
+
r={grow ? parseInt(barMinWidth) : barWidth / 2}
|
|
138
|
+
cy={height - getHeight(value)}
|
|
139
|
+
cx={((parseInt(gap) + barWidth) + (barWidth / (Object.keys(data).length))) * i} />
|
|
140
|
+
{/if}
|
|
141
141
|
|
|
142
142
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
143
143
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
144
144
|
<rect
|
|
145
|
-
on:mouseover={
|
|
146
|
-
on:focus={
|
|
147
|
-
on:touchstart={
|
|
148
|
-
on:click={
|
|
149
|
-
on:keypress={
|
|
150
|
-
width={
|
|
151
|
-
height={
|
|
145
|
+
on:mouseover={() => startHover(key, i)}
|
|
146
|
+
on:focus={() => startHover(key, i)}
|
|
147
|
+
on:touchstart={() => startHover(key, i)}
|
|
148
|
+
on:click={() => clickHandler(key, i)}
|
|
149
|
+
on:keypress={() => clickHandler(key, i)}
|
|
150
|
+
width={barWidth}
|
|
151
|
+
height={height}
|
|
152
152
|
fill="transparent"
|
|
153
|
-
x={
|
|
154
|
-
{
|
|
155
|
-
{
|
|
153
|
+
x={(parseInt(gap) + barWidth) * i}
|
|
154
|
+
{tabindex} />
|
|
155
|
+
{/each}
|
|
156
156
|
</g>
|
|
157
157
|
</svg>
|
|
158
158
|
|
|
159
|
-
{
|
|
160
|
-
<div class="tiny-linked-charts-value" style={
|
|
161
|
-
{
|
|
162
|
-
{
|
|
163
|
-
<span bind:this={valueElement}>{
|
|
164
|
-
{
|
|
165
|
-
{
|
|
166
|
-
{
|
|
167
|
-
{
|
|
159
|
+
{#if showValue && ($hoveringValue[uid] || valueDefault)}
|
|
160
|
+
<div class="tiny-linked-charts-value" style={valuePosition == "floating" ? `position: absolute; transform: translateX(${valuePositionOffset}px)` : null}>
|
|
161
|
+
{#if $hoveringValue[uid] !== null}
|
|
162
|
+
{valuePrepend}
|
|
163
|
+
<span bind:this={valueElement}>{$hoveringValue[uid] || valueUndefined}</span>
|
|
164
|
+
{valueAppend}
|
|
165
|
+
{:else}
|
|
166
|
+
{@html valueDefault}
|
|
167
|
+
{/if}
|
|
168
168
|
</div>
|
|
169
|
-
{
|
|
169
|
+
{/if}
|