diff --git a/README.md b/README.md index 0a67d593b3..4dadb4875b 100644 --- a/README.md +++ b/README.md @@ -196,16 +196,6 @@ Made with ❤️ Published under [MIT License](./LICENSE). -## Star History - - - - - - Star History Chart - - - ## Sponsors diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 46a8d4cf9e..223a2be7ef 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -18,11 +18,19 @@ withDefaults( const { isConnected, npmUser } = useConnector() +const { packageName } = usePackageRoute() + +const compareTarget = computed(() => + packageName.value + ? { name: 'compare' as const, query: { packages: packageName.value } } + : { name: 'compare' as const }, +) + const desktopLinks = computed(() => [ { name: 'Compare', label: $t('nav.compare'), - to: { name: 'compare' }, + to: compareTarget.value, keyshortcut: 'c', type: 'link', external: false, @@ -209,7 +217,7 @@ function handleSearchFocus() { } useShortcuts({ - 'c': () => ({ name: 'compare' }), + 'c': () => compareTarget.value, ',': () => ({ name: 'settings' }), }) diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue index e01e0dc03b..1e0a0e813f 100644 --- a/app/components/Package/Header.vue +++ b/app/components/Package/Header.vue @@ -204,7 +204,6 @@ useShortcuts({ '.': () => codeLink.value, 'm': () => mainLink.value, 'd': () => docsLink.value, - 'c': () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } }, 'f': () => diffLink.value, '-': () => changelogLink.value, 't': () => timelineLink.value, @@ -250,14 +249,6 @@ useShortcuts({
- - {{ $t('package.links.compare_this_package') }} - { return addEvaluationFlags(entries, props.versionSubEvents).toReversed() }) -type StableVersion = { - major: number - minor: number - patch: number -} - -const orderedConvertedData = computed(() => { - if (!settings.value.timelineChart.isOrdered) { - return convertedData.value - } - - // Hide pre-releases and reorder stable versions semantically - return convertedData.value - .map(entry => ({ - entry, - parsedVersion: parseStableVersion(entry.version), - })) - .filter( - ( - item, - ): item is { entry: (typeof convertedData.value)[number]; parsedVersion: StableVersion } => { - return item.parsedVersion !== null - }, - ) - .toSorted((a, b) => { - if (a.parsedVersion.major !== b.parsedVersion.major) { - return a.parsedVersion.major - b.parsedVersion.major - } - if (a.parsedVersion.minor !== b.parsedVersion.minor) { - return a.parsedVersion.minor - b.parsedVersion.minor - } - return a.parsedVersion.patch - b.parsedVersion.patch - }) - .map(item => item.entry) -}) - watch( - orderedConvertedData, + convertedData, async () => { await nextTick() const chart = chartRef.value @@ -158,7 +121,7 @@ watch( { flush: 'post' }, ) -const versions = computed(() => orderedConvertedData.value.map(d => d.version)) +const versions = computed(() => convertedData.value.map(d => d.version)) const activeVersionIndex = computed(() => { if (!activeVersion.value) return -1 @@ -166,7 +129,7 @@ const activeVersionIndex = computed(() => { }) const seriesTotalSize = computed(() => { - const values = orderedConvertedData.value.map(d => d.totalSize) + const values = convertedData.value.map(d => d.totalSize) if (!values.length) { return { values, min: 0, max: 0 } } @@ -178,7 +141,7 @@ const seriesTotalSize = computed(() => { }) const seriesDependencies = computed(() => { - const values = orderedConvertedData.value.map(d => d.dependencyCount) + const values = convertedData.value.map(d => d.dependencyCount) if (!values.length) { return { values, min: 0, max: 0 } } @@ -250,7 +213,7 @@ interface DependencySegment { // significantly sized dependency is a segment, the package itself is a segment, // and the rest is a segment ("Other"). const dependencySegments = computed(() => { - const data = orderedConvertedData.value + const data = convertedData.value const reference = data.at(-1) if (!reference) return [] @@ -338,7 +301,7 @@ const datasets = computed<{ ? undefined : E18E_GRADIENT_COLORS, color: colors.value.fgSubtle, - source: orderedConvertedData.value, + source: convertedData.value, }, ], dependencyCount: [ @@ -351,7 +314,7 @@ const datasets = computed<{ ? undefined : E18E_GRADIENT_COLORS, color: colors.value.fgSubtle, - source: orderedConvertedData.value, + source: convertedData.value, }, ], } @@ -577,7 +540,7 @@ const config = computed(() => { svg: commonConfig.value.callbacks!.svg, altCopy: () => copyAltTextForTimelineChart({ - dataset: orderedConvertedData.value, + dataset: convertedData.value, config: { packageName: packageName.value, metric: activeTab.value, @@ -747,7 +710,7 @@ function getErrorDatapointPlots( const indexSelection = computed(() => { if (props.selectedVersion == null) return null - return orderedConvertedData.value.findIndex(v => v.version === props.selectedVersion) + return convertedData.value.findIndex(v => v.version === props.selectedVersion) }) const stackbarConfig = computed(() => ({ @@ -871,9 +834,20 @@ const stackbarConfig = computed(() => ({ function stackbarTooltipTime(datapoint: VueUiStackbarTooltipDatapoint[]): string | undefined { const absoluteIndex = datapoint[0]?.timeLabel?.absoluteIndex if (absoluteIndex == null) return undefined - return orderedConvertedData.value[absoluteIndex]?.time + return convertedData.value[absoluteIndex]?.time } +// Sort order shared with the page + list via the query string (default: publish time) +const sort = usePermalink<'time' | 'semver'>('sort', 'semver') + +// "Stable only" filter shared with the page + list via the query string. +const stableOnly = useTimelineStableOnly() + +const timelineSortOptions = computed(() => [ + { value: 'time' as const, label: $t('package.timeline.chart.sort_time') }, + { value: 'semver' as const, label: $t('package.timeline.chart.sort_semver') }, +]) + const timelineMetricTabs = computed(() => [ { value: 'totalSize' as const, @@ -900,7 +874,7 @@ const timelineMetricTabs = computed(() => [ :class="{ loading: shouldPauseChartAnimations || loading }" id="timeline-chart" > -
+
-
+
+
+ + +