diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue index 575c3d3894..5e8fccd573 100644 --- a/app/components/Package/TimelineChart.vue +++ b/app/components/Package/TimelineChart.vue @@ -186,7 +186,25 @@ const seriesDependencies = computed(() => { } }) -const activeTab = shallowRef('totalSize') +const timelineChartMetrics = new Set([ + 'totalSize', + 'dependencyCount', + 'dependencySize', +]) + +const activeTab = usePermalink('metric', 'totalSize', { + permanent: true, +}) + +watch( + activeTab, + value => { + if (!timelineChartMetrics.has(value)) { + activeTab.value = 'totalSize' + } + }, + { immediate: true }, +) const shouldPauseChartAnimations = shallowRef(true) @@ -194,8 +212,8 @@ const { start: startChartAnimationPauseTimer } = useTimeoutFn( () => { shouldPauseChartAnimations.value = false }, - 1000, - { immediate: false }, + 300, + { immediate: true }, ) function pauseChartAnimations() { @@ -859,7 +877,7 @@ const timelineMetricTabs = computed(() => [
@@ -967,7 +985,7 @@ const timelineMetricTabs = computed(() => [ :markersNegative="getNegativeDatapointPlots(svg.data[0], svg.slicer.start)" :colors :gradientColors="E18E_GRADIENT_COLORS" - :pauseAnimations="shouldPauseChartAnimations" + :pauseAnimations="shouldPauseChartAnimations || loading" /> @@ -1040,6 +1058,10 @@ const timelineMetricTabs = computed(() => [ :dataset="datasets.dependencySize" :config="stackbarConfig" :selected-x-index="indexSelection" + :style="{ + opacity: shouldPauseChartAnimations || loading ? 0 : 1, + transition: 'opacity 0.15s', + }" ref="chartRef" > @@ -1058,7 +1080,7 @@ const timelineMetricTabs = computed(() => [ " :activeVersionPlot="getActiveVersionDatapointBar(svg.data, svg.barWidth)" :colors - :pauseAnimations="shouldPauseChartAnimations" + :pauseAnimations="shouldPauseChartAnimations || loading" /> @@ -1112,7 +1134,10 @@ const timelineMetricTabs = computed(() => [ @@ -1198,9 +1223,9 @@ const timelineMetricTabs = computed(() => [ animation: indeterminate 1.5s ease-in-out infinite; } -.loaded :deep(.vue-data-ui-component .serie_line_0 path), -.loaded :deep(.vdui-shape-circle), -.loaded :deep(.vue-ui-stackbar rect) { +.loading :deep(.vue-data-ui-component .serie_line_0 path), +.loading :deep(.vdui-shape-circle), +.loading :deep(.vue-ui-stackbar rect) { transition: none !important; animation: none !important; } diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue index 8e6c4a4c5a..cd31b75e87 100644 --- a/app/components/Package/Versions.vue +++ b/app/components/Package/Versions.vue @@ -1,5 +1,5 @@