Skip to content

Commit ea573ee

Browse files
mProjectsCodemProjectsCode
committed
lazy load charts
1 parent 74fdbcd commit ea573ee

29 files changed

+325
-290
lines changed

‎website/src/components/Plugin.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,7 @@ function getAsideVariant(warning: PluginWarning): 'note' | 'tip' | 'caution' | '
397397
of new downloads per week. New version releases are marked with vertical lines.
398398
</p>
399399

400-
<p><DownloadChart dataPoints={pluginDownloadData} versions={versions} client:only="svelte" /></p>
400+
<DownloadChart dataPoints={pluginDownloadData} versions={versions} client:visible />
401401

402402
<h2 id="version-history">Version History</h2>
403403

‎website/src/components/svelte/ChartWrapper.svelte‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
const { children } = $props();
3+
</script>
4+
5+
{#if import.meta.env.SSR}
6+
<div class="chart-placeholder"></div>
7+
{:else}
8+
{@render children?.()}
9+
{/if}

‎website/src/components/svelte/charts/BarChart.svelte‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
2-
import { BarY, Dot, Line, Plot, Text } from 'svelteplot';
2+
import { BarY, Plot, Text } from 'svelteplot';
33
import type { NamedDataPoint } from '../../../../../data-wasm/pkg/data_wasm';
4+
import ChartWrapper from '../ChartWrapper.svelte';
45
56
interface Props {
67
dataPoints: NamedDataPoint[];
@@ -26,22 +27,24 @@
2627
}
2728
</script>
2829

29-
<Plot
30-
grid
31-
x={{ type: 'band', label: `${xLabel} →`, tickRotate: skewLabels ? 45 : 0 }}
32-
y={{ label: `↑ ${yLabel}`, domain: yDomain, tickFormat: percentages ? d => `${String(d)}%` : d => String(d) }}
33-
class="no-overflow-clip"
34-
>
35-
<BarY data={mappedDataPoints} x="label" y="value" fill="var(--sl-color-text-accent)" sort={sortData} />
36-
{#if !hideBarValues}
37-
<Text
38-
data={mappedDataPoints}
39-
x="label"
40-
y="value"
41-
fill="var(--sl-color-text-foreground)"
42-
text={d => (percentages ? `${d.value.toFixed(1)}%` : d.value.toFixed(1))}
43-
lineAnchor="bottom"
44-
dy={-2}
45-
/>
46-
{/if}
47-
</Plot>
30+
<ChartWrapper>
31+
<Plot
32+
grid
33+
x={{ type: 'band', label: `${xLabel} →`, tickRotate: skewLabels ? 45 : 0 }}
34+
y={{ label: `↑ ${yLabel}`, domain: yDomain, tickFormat: percentages ? d => `${String(d)}%` : d => String(d) }}
35+
class="no-overflow-clip"
36+
>
37+
<BarY data={mappedDataPoints} x="label" y="value" fill="var(--sl-color-text-accent)" sort={sortData} />
38+
{#if !hideBarValues}
39+
<Text
40+
data={mappedDataPoints}
41+
x="label"
42+
y="value"
43+
fill="var(--sl-color-text-foreground)"
44+
text={d => (percentages ? `${d.value.toFixed(1)}%` : d.value.toFixed(1))}
45+
lineAnchor="bottom"
46+
dy={-2}
47+
/>
48+
{/if}
49+
</Plot>
50+
</ChartWrapper>

‎website/src/components/svelte/charts/HallOfFameChart.svelte‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { Line, Plot, Pointer, Text, Dot } from 'svelteplot';
33
import type { DownloadDataPoint, HallOfFameDataPoint } from '../../../../../data-wasm/pkg/data_wasm';
4+
import ChartWrapper from '../ChartWrapper.svelte';
45
56
interface Props {
67
data: HallOfFameDataPoint[];
@@ -26,12 +27,14 @@
2627
}
2728
</script>
2829

29-
<Plot grid color={{ legend: true, scheme: 'tableau10' }} class="no-overflow-clip">
30-
<Line data={mappedData} x="date" y="downloads" stroke="id" marker={showDots ? 'dot' : undefined} />
31-
<Pointer data={mappedData} x="date" z="id" maxDistance={30}>
32-
{#snippet children({ data })}
33-
<Text {data} fill="id" x="date" y="downloads" text={d => d.downloads.toFixed()} lineAnchor="bottom" dy={-7} />
34-
<Dot {data} x="date" y="downloads" fill="id" />
35-
{/snippet}
36-
</Pointer>
37-
</Plot>
30+
<ChartWrapper>
31+
<Plot grid color={{ legend: true, scheme: 'tableau10' }} class="no-overflow-clip">
32+
<Line data={mappedData} x="date" y="downloads" stroke="id" marker={showDots ? 'dot' : undefined} />
33+
<Pointer data={mappedData} x="date" z="id" maxDistance={30}>
34+
{#snippet children({ data })}
35+
<Text {data} fill="id" x="date" y="downloads" text={d => d.downloads.toFixed()} lineAnchor="bottom" dy={-7} />
36+
<Dot {data} x="date" y="downloads" fill="id" />
37+
{/snippet}
38+
</Pointer>
39+
</Plot>
40+
</ChartWrapper>

‎website/src/components/svelte/charts/StackedBarChart.svelte‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { BarY, Plot } from 'svelteplot';
33
import type { StackedNamedDataPoint } from '../../../../../data-wasm/pkg/data_wasm';
4+
import ChartWrapper from '../ChartWrapper.svelte';
45
56
interface Props {
67
dataPoints: StackedNamedDataPoint[];
@@ -23,12 +24,14 @@
2324
});
2425
</script>
2526

26-
<Plot
27-
grid
28-
color={{ legend: true, scheme: 'tableau10' }}
29-
x={{ type: 'band', label: `${xLabel} →`, tickRotate: skewLabels ? 45 : 0 }}
30-
y={{ label: `↑ ${yLabel}`, domain: yDomain, tickFormat: percentages ? d => `${String(d)}%` : d => String(d) }}
31-
class="no-overflow-clip"
32-
>
33-
<BarY data={mappedDataPoints} x="label" y="value" fill="stack" sort={{ channel: 'index' }} />
34-
</Plot>
27+
<ChartWrapper>
28+
<Plot
29+
grid
30+
color={{ legend: true, scheme: 'tableau10' }}
31+
x={{ type: 'band', label: `${xLabel} →`, tickRotate: skewLabels ? 45 : 0 }}
32+
y={{ label: `↑ ${yLabel}`, domain: yDomain, tickFormat: percentages ? d => `${String(d)}%` : d => String(d) }}
33+
class="no-overflow-clip"
34+
>
35+
<BarY data={mappedDataPoints} x="label" y="value" fill="stack" sort={{ channel: 'index' }} />
36+
</Plot>
37+
</ChartWrapper>

‎website/src/components/svelte/charts/StackedXBarChart.svelte‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
2-
import { BarX, BarY, Plot, HTMLTooltip } from 'svelteplot';
2+
import { BarX, Plot } from 'svelteplot';
33
import type { StackedNamedDataPoint } from '../../../../../data-wasm/pkg/data_wasm';
4+
import ChartWrapper from '../ChartWrapper.svelte';
45
56
interface Props {
67
dataPoints: StackedNamedDataPoint[];
@@ -21,12 +22,14 @@
2122
});
2223
</script>
2324

24-
<Plot
25-
grid
26-
color={{ legend: true, scheme: 'tableau10' }}
27-
x={{ label: '', domain: yDomain, tickFormat: percentages ? d => `${String(d)}%` : d => String(d) }}
28-
y={{ type: 'band', label: '', tickRotate: skewLabels ? 45 : 0 }}
29-
class="no-overflow-clip"
30-
>
31-
<BarX data={mappedDataPoints} x="value" y="label" fill="stack" sort={{ channel: 'index' }} />
32-
</Plot>
25+
<ChartWrapper>
26+
<Plot
27+
grid
28+
color={{ legend: true, scheme: 'tableau10' }}
29+
x={{ label: '', domain: yDomain, tickFormat: percentages ? d => `${String(d)}%` : d => String(d) }}
30+
y={{ type: 'band', label: '', tickRotate: skewLabels ? 45 : 0 }}
31+
class="no-overflow-clip"
32+
>
33+
<BarX data={mappedDataPoints} x="value" y="label" fill="stack" sort={{ channel: 'index' }} />
34+
</Plot>
35+
</ChartWrapper>

‎website/src/components/svelte/charts/count/CountChart.svelte‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Dot, Line, Plot, Pointer, Text } from 'svelteplot';
33
import type { CountMonthlyDataPoint } from '../../../../../../data-wasm/pkg/data_wasm';
44
import { typeToString, type ItemType } from '../../../../utils/misc';
5+
import ChartWrapper from '../../ChartWrapper.svelte';
56
67
interface Props {
78
dataPoints: CountMonthlyDataPoint[];
@@ -26,16 +27,18 @@
2627
const totalWithRemovedStroke = `Including Removed ${typeToString(type, true, true)}`;
2728
</script>
2829

29-
<Plot grid color={{ legend: true, scheme: 'tableau10' }} class="no-overflow-clip" y={{ label: `↑ ${typeToString(type, false, true)} Count` }}>
30-
<Line data={mappedDataPoints} x="date" y="total" stroke={totalStroke} marker="dot" />
31-
<Line data={mappedDataPoints} x="date" y="total_with_removed" stroke={totalWithRemovedStroke} marker="dot" />
30+
<ChartWrapper>
31+
<Plot grid color={{ legend: true, scheme: 'tableau10' }} class="no-overflow-clip" y={{ label: `↑ ${typeToString(type, false, true)} Count` }}>
32+
<Line data={mappedDataPoints} x="date" y="total" stroke={totalStroke} marker="dot" />
33+
<Line data={mappedDataPoints} x="date" y="total_with_removed" stroke={totalWithRemovedStroke} marker="dot" />
3234

33-
<Pointer data={mappedDataPoints} x="date" maxDistance={5}>
34-
{#snippet children({ data })}
35-
<Dot {data} x="date" y="total" fill={totalStroke} />
36-
<Dot {data} x="date" y="total_with_removed" fill={totalWithRemovedStroke} />
37-
<Text {data} fill={totalStroke} x="date" y="total" text={d => d.total.toFixed()} lineAnchor="bottom" dy={-7} />
38-
<Text {data} fill={totalWithRemovedStroke} x="date" y="total_with_removed" text={d => d.total_with_removed.toFixed()} lineAnchor="bottom" dy={-7} />
39-
{/snippet}
40-
</Pointer>
41-
</Plot>
35+
<Pointer data={mappedDataPoints} x="date" maxDistance={5}>
36+
{#snippet children({ data })}
37+
<Dot {data} x="date" y="total" fill={totalStroke} />
38+
<Dot {data} x="date" y="total_with_removed" fill={totalWithRemovedStroke} />
39+
<Text {data} fill={totalStroke} x="date" y="total" text={d => d.total.toFixed()} lineAnchor="bottom" dy={-7} />
40+
<Text {data} fill={totalWithRemovedStroke} x="date" y="total_with_removed" text={d => d.total_with_removed.toFixed()} lineAnchor="bottom" dy={-7} />
41+
{/snippet}
42+
</Pointer>
43+
</Plot>
44+
</ChartWrapper>

‎website/src/components/svelte/charts/count/CountNewChart.svelte‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import type { CountMonthlyDataPoint } from '../../../../../../data-wasm/pkg/data_wasm';
44
import { smooth } from '../chartUtils';
55
import { typeToString, type ItemType } from '../../../../utils/misc';
6+
import ChartWrapper from '../../ChartWrapper.svelte';
67
78
interface Props {
89
dataPoints: CountMonthlyDataPoint[];
@@ -26,14 +27,16 @@
2627
const smoothedData = smooth(mappedDataPoints, 'new', 3);
2728
</script>
2829

29-
<Plot grid y={{ label: `↑ New ${typeToString(type, false, true)} Releases per Month` }}>
30-
<Line data={smoothedData} x="date" y="new" stroke="var(--sl-color-text-accent)" />
31-
<Line data={mappedDataPoints} x="date" y="new" strokeDasharray={'5'} opacity={0.3} />
32-
<Dot data={mappedDataPoints} x="date" y="new" opacity={0.3} />
33-
<Pointer data={mappedDataPoints} x="date" y="new" maxDistance={30}>
34-
{#snippet children({ data })}
35-
<Text {data} fill="var(--sl-color-text-accent)" x="date" y="new" text={d => d.new.toFixed()} lineAnchor="bottom" dy={-7} />
36-
<Dot {data} x="date" y="new" fill="var(--sl-color-text-accent)" />
37-
{/snippet}
38-
</Pointer>
39-
</Plot>
30+
<ChartWrapper>
31+
<Plot grid y={{ label: `↑ New ${typeToString(type, false, true)} Releases per Month` }}>
32+
<Line data={smoothedData} x="date" y="new" stroke="var(--sl-color-text-accent)" />
33+
<Line data={mappedDataPoints} x="date" y="new" strokeDasharray={'5'} opacity={0.3} />
34+
<Dot data={mappedDataPoints} x="date" y="new" opacity={0.3} />
35+
<Pointer data={mappedDataPoints} x="date" y="new" maxDistance={30}>
36+
{#snippet children({ data })}
37+
<Text {data} fill="var(--sl-color-text-accent)" x="date" y="new" text={d => d.new.toFixed()} lineAnchor="bottom" dy={-7} />
38+
<Dot {data} x="date" y="new" fill="var(--sl-color-text-accent)" />
39+
{/snippet}
40+
</Pointer>
41+
</Plot>
42+
</ChartWrapper>

‎website/src/components/svelte/charts/count/CountRemovedChart.svelte‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import type { CountMonthlyDataPoint } from '../../../../../../data-wasm/pkg/data_wasm';
44
import { smooth } from '../chartUtils';
55
import { typeToString, type ItemType } from '../../../../utils/misc';
6+
import ChartWrapper from '../../ChartWrapper.svelte';
67
78
interface Props {
89
dataPoints: CountMonthlyDataPoint[];
@@ -26,14 +27,16 @@
2627
const smoothedData = smooth(mappedDataPoints, 'new_removed', 3);
2728
</script>
2829

29-
<Plot grid y={{ label: `↑ ${typeToString(type, true, true)} Removed per Month` }}>
30-
<Line data={smoothedData} x="date" y="new_removed" stroke="var(--sl-color-text-accent)" />
31-
<Line data={mappedDataPoints} x="date" y="new_removed" strokeDasharray={'5'} opacity={0.3} />
32-
<Dot data={mappedDataPoints} x="date" y="new_removed" opacity={0.3} />
33-
<Pointer data={mappedDataPoints} x="date" y="new_removed" maxDistance={30}>
34-
{#snippet children({ data })}
35-
<Text {data} fill="var(--sl-color-text-accent)" x="date" y="new_removed" text={d => d.new_removed.toFixed()} lineAnchor="bottom" dy={-7} />
36-
<Dot {data} x="date" y="new_removed" fill="var(--sl-color-text-accent)" />
37-
{/snippet}
38-
</Pointer>
39-
</Plot>
30+
<ChartWrapper>
31+
<Plot grid y={{ label: `↑ ${typeToString(type, true, true)} Removed per Month` }}>
32+
<Line data={smoothedData} x="date" y="new_removed" stroke="var(--sl-color-text-accent)" />
33+
<Line data={mappedDataPoints} x="date" y="new_removed" strokeDasharray={'5'} opacity={0.3} />
34+
<Dot data={mappedDataPoints} x="date" y="new_removed" opacity={0.3} />
35+
<Pointer data={mappedDataPoints} x="date" y="new_removed" maxDistance={30}>
36+
{#snippet children({ data })}
37+
<Text {data} fill="var(--sl-color-text-accent)" x="date" y="new_removed" text={d => d.new_removed.toFixed()} lineAnchor="bottom" dy={-7} />
38+
<Dot {data} x="date" y="new_removed" fill="var(--sl-color-text-accent)" />
39+
{/snippet}
40+
</Pointer>
41+
</Plot>
42+
</ChartWrapper>

‎website/src/components/svelte/charts/count/RemovedByReleaseChart.svelte‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { BarY, Plot } from 'svelteplot';
33
import type { RemovedByReleaseDataPoint } from '../../../../../../data-wasm/pkg/data_wasm';
44
import { typeToString, type ItemType } from '../../../../utils/misc';
5+
import ChartWrapper from '../../ChartWrapper.svelte';
56
67
interface Props {
78
dataPoints: RemovedByReleaseDataPoint[];
@@ -18,11 +19,13 @@
1819
});
1920
</script>
2021

21-
<Plot
22-
grid
23-
x={{ type: 'band', label: 'Release Date →', tickRotate: 45 }}
24-
y={{ label: `↑ Percentage of Removed ${typeToString(type, true, true)}`, domain: [0, 100], tickFormat: d => `${String(d)}%` }}
25-
class="no-overflow-clip"
26-
>
27-
<BarY data={mappedDataPoints} x="date" y="percentage" fill="var(--sl-color-text-accent)" />
28-
</Plot>
22+
<ChartWrapper>
23+
<Plot
24+
grid
25+
x={{ type: 'band', label: 'Release Date →', tickRotate: 45 }}
26+
y={{ label: `↑ Percentage of Removed ${typeToString(type, true, true)}`, domain: [0, 100], tickFormat: d => `${String(d)}%` }}
27+
class="no-overflow-clip"
28+
>
29+
<BarY data={mappedDataPoints} x="date" y="percentage" fill="var(--sl-color-text-accent)" />
30+
</Plot>
31+
</ChartWrapper>

0 commit comments

Comments
 (0)