Skip to content

feat(frontend): add option to unstack downloads per version #1101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
280 changes: 157 additions & 123 deletions frontend/routes/package/(_islands)/DownloadChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,99 +14,100 @@ interface Props {

export type AggregationPeriod = "daily" | "weekly" | "monthly";

export function DownloadChart(props: Props) {
const chartDivRef = useRef<HTMLDivElement>(null);
const chartRef = useRef<ApexCharts>(null);
const graphRendered = useSignal(false);

const getChartOptions = (
isDarkMode: boolean,
aggregationPeriod: AggregationPeriod = "weekly",
) => ({
chart: {
type: "area",
stacked: true,
animations: {
enabled: false,
},
height: "100%",
width: "100%",
zoom: {
allowMouseWheelZoom: false,
},
background: "transparent",
foreColor: isDarkMode ? "#a8b2bd" : "#515d6c", // jsr-gray-300 for dark mode, jsr-gray-600 for light
const getChartOptions = (
isDarkMode: boolean,
stacked: boolean,
): ApexCharts.ApexOptions => ({
chart: {
type: "area",
stacked,
animations: {
enabled: false,
},
legend: {
horizontalAlign: "center",
position: "top",
showForSingleSeries: true,
labels: {
colors: isDarkMode ? "#a8b2bd" : "#515d6c", // jsr-gray-300 for dark mode, jsr-gray-600 for light
},
height: "100%",
width: "100%",
zoom: {
allowMouseWheelZoom: false,
},
background: "transparent",
foreColor: isDarkMode ? "#a8b2bd" : "#515d6c", // jsr-gray-300 for dark mode, jsr-gray-600 for light
},
legend: {
horizontalAlign: "right",
offsetY: -1,
position: "top",
showForSingleSeries: true,
labels: {
colors: isDarkMode ? "#a8b2bd" : "#515d6c", // jsr-gray-300 for dark mode, jsr-gray-600 for light
},
},
tooltip: {
theme: isDarkMode ? "dark" : "light",
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
width: 1.7,
},
xaxis: {
type: "datetime",
tooltip: {
items: {
padding: 0,
enabled: false,
},
labels: {
style: {
colors: isDarkMode ? "#ced3da" : "#515d6c", // jsr-gray-200 for dark mode, jsr-gray-600 for light
},
theme: isDarkMode ? "dark" : "light",
},
dataLabels: {
enabled: false,
axisBorder: {
color: isDarkMode ? "#47515c" : "#ced3da", // jsr-gray-700 for dark mode, jsr-gray-200 for light
},
stroke: {
curve: "straight",
width: 1.7,
axisTicks: {
color: isDarkMode ? "#47515c" : "#ced3da", // jsr-gray-700 for dark mode, jsr-gray-200 for light
},
series: getSeries(props.downloads, aggregationPeriod),
xaxis: {
type: "datetime",
tooltip: {
enabled: false,
},
labels: {
style: {
colors: isDarkMode ? "#ced3da" : "#515d6c", // jsr-gray-200 for dark mode, jsr-gray-600 for light
},
},
axisBorder: {
color: isDarkMode ? "#47515c" : "#ced3da", // jsr-gray-700 for dark mode, jsr-gray-200 for light
},
axisTicks: {
color: isDarkMode ? "#47515c" : "#ced3da", // jsr-gray-700 for dark mode, jsr-gray-200 for light
},
yaxis: {
labels: {
style: {
colors: isDarkMode ? "#a8b2bd" : "#515d6c", // jsr-gray-300 for dark mode, jsr-gray-600 for light
},
},
yaxis: {
labels: {
style: {
colors: isDarkMode ? "#a8b2bd" : "#515d6c", // jsr-gray-300 for dark mode, jsr-gray-600 for light
},
grid: {
borderColor: isDarkMode ? "#47515c" : "#e5e8eb", // jsr-gray-700 for dark mode, jsr-gray-100 for light
strokeDashArray: 3,
},
responsive: [
{
breakpoint: 768,
options: {
horizontalAlign: "left",
legend: {
offsetY: -30,
},
},
},
grid: {
borderColor: isDarkMode ? "#47515c" : "#e5e8eb", // jsr-gray-700 for dark mode, jsr-gray-100 for light
strokeDashArray: 3,
},
responsive: [
{
breakpoint: 768,
options: {
legend: {
horizontalAlign: "left",
},
},
},
],
});
],
});

export function DownloadChart(props: Props) {
const chartDivRef = useRef<HTMLDivElement>(null);
const chartRef = useRef<ApexCharts>(null);
const stackedRef = useRef(true);
const graphRendered = useSignal(false);

useEffect(() => {
(async () => {
const { default: ApexCharts } = await import("apexcharts");
const isDarkMode = document.documentElement.classList.contains("dark");

const initialOptions = getChartOptions(isDarkMode, stackedRef.current);
initialOptions.series = getSeries(props.downloads, "weekly");
chartRef.current = new ApexCharts(
chartDivRef.current!,
getChartOptions(isDarkMode),
initialOptions,
);

chartRef.current.render();
Expand All @@ -118,7 +119,9 @@ export function DownloadChart(props: Props) {
"dark",
);
if (chartRef.current) {
chartRef.current?.updateOptions(getChartOptions(newIsDarkMode));
chartRef.current?.updateOptions(
getChartOptions(newIsDarkMode, stackedRef.current),
);
}
});

Expand All @@ -138,40 +141,72 @@ export function DownloadChart(props: Props) {
return (
<div class="relative">
{graphRendered.value && (
<div className="absolute flex items-center gap-2 pt-1 text-sm pl-5 z-20">
<label htmlFor="aggregationPeriod" className="text-secondary">
Aggregation Period:
</label>
<select
id="aggregationPeriod"
onChange={(e) => {
const isDarkMode = document.documentElement.classList.contains(
"dark",
);
const newAggregationPeriod = e.currentTarget
.value as AggregationPeriod;

// Update chart with new options including the new aggregation period
chartRef.current?.updateOptions(
getChartOptions(isDarkMode, newAggregationPeriod),
);

chartRef.current?.updateSeries(
getSeries(
props.downloads,
e.currentTarget.value as AggregationPeriod,
),
);
}}
className="input-container input select w-20"
>
<option value="daily">Daily</option>
<option value="weekly" selected>Weekly</option>
<option value="monthly">Monthly</option>
</select>
<div className="absolute flex top-2 md:-top-4 gap-2 pt-4 text-sm pl-4 z-20">
<div className="flex items-center gap-2">
<label htmlFor="aggregationPeriod" className="text-secondary">
Aggregation Period:
</label>
<select
id="aggregationPeriod"
onChange={(e) => {
chartRef.current?.updateSeries(
getSeries(
props.downloads,
e.currentTarget.value as AggregationPeriod,
),
);
}}
className="input-container input select w-20"
>
<option value="daily">Daily</option>
<option value="weekly" selected>
Weekly
</option>
<option value="monthly">Monthly</option>
</select>
</div>
<div className="flex items-center gap-2">
<label htmlFor="displayAs" className="text-secondary">
Display As
</label>
<select
id="displayAs"
onChange={(e) => {
const newDisplay = e.currentTarget.value === "stacked";
stackedRef.current = newDisplay;
// Update chart with new options including the new stacked display
chartRef.current?.updateOptions(
{ chart: { stacked: newDisplay } },
);
}}
className="input-container input select w-24"
>
<option value="stacked" selected>Stacked</option>
<option value="unstacked">
Unstacked
</option>
</select>
</div>
</div>
)}
<div className="h-[300px] md:pt-0 pt-10 text-secondary">
<style>
{`
.apexcharts-legend.apexcharts-align-right.apx-legend-position-top {
right: unset !important;
}
@media (max-width: 598px) {
.apexcharts-toolbar {
top: -28px !important;
}
}
@media (min-width: 768px) {
.apexcharts-legend.apexcharts-align-right.apx-legend-position-top {
right: 125px !important;
}
}
`}
</style>
<div className="h-[300px] md:pt-0 pt-5 text-secondary">
<div ref={chartDivRef} />
</div>
</div>
Expand All @@ -198,19 +233,17 @@ function adjustTimePeriod(
switch (aggregation) {
case "weekly":
// start of week (Sunday) in UTC
out = new Date(Date.UTC(
date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate() - date.getUTCDay(),
));
out = new Date(
Date.UTC(
date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate() - date.getUTCDay(),
),
);
break;
case "monthly":
// first day of month in UTC
out = new Date(Date.UTC(
date.getUTCFullYear(),
date.getUTCMonth(),
1,
));
out = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
break;
default: // daily
out = date;
Expand All @@ -228,8 +261,8 @@ export function collectX(
xValues.add(adjustTimePeriod(point.timeBucket, aggregationPeriod));
});

return Array.from(xValues).sort((a, b) =>
new Date(a).getTime() - new Date(b).getTime()
return Array.from(xValues).sort(
(a, b) => new Date(a).getTime() - new Date(b).getTime(),
);
}

Expand All @@ -253,17 +286,18 @@ export function normalize(
}
});

return Object.entries(normalized).map((
[key, value],
) => [new Date(key).getTime(), value]);
return Object.entries(normalized).map(([key, value]) => [
new Date(key).getTime(),
value,
]);
}

function getSeries(
recentVersions: PackageDownloadsRecentVersion[],
aggregationPeriod: AggregationPeriod,
) {
const dataPointsWithDownloads = recentVersions.filter((dataPoints) =>
dataPoints.downloads.length > 0
const dataPointsWithDownloads = recentVersions.filter(
(dataPoints) => dataPoints.downloads.length > 0,
);

const dataPointsToDisplay = dataPointsWithDownloads.slice(0, 5);
Expand Down
2 changes: 1 addition & 1 deletion frontend/routes/package/versions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export default define.page<typeof handler>(function Versions({
latestVersion={data.package.latestVersion}
/>

<div class="mt-4 md:mt-8">
<div class="mt-4 md:mt-6">
<DownloadChart downloads={data.downloads.recentVersions} />
</div>

Expand Down