feat: implement dependent projects breakdown

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartLegend.vue

@@ -25,7 +25,7 @@
 				class="inline-flex items-center"
 			>
 				<button
-					v-tooltip="legendEntry.projectName ?? ''"
+					v-tooltip="legendEntry.tooltip ?? legendEntry.projectName ?? ''"
 					type="button"
 					class="inline-flex items-center gap-1.5 px-2 py-0.5 text-sm !outline-0 transition-all focus-within:!outline-0 focus:!outline-0 focus-visible:!outline-0"
 					:class="[

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/use-analytics-chart-legend.ts

@@ -64,6 +64,7 @@ export function useAnalyticsChartLegend({
 				id: dataset.projectId,
 				name: dataset.label,
 				projectName: dataset.projectName,
+				tooltip: dataset.tooltip,
 				color: dataset.borderColor,
 				totalValue: getChartDatasetTotal(dataset),
 				hidden: hiddenDatasetIds.value.has(dataset.projectId),
@@ -118,6 +119,7 @@ export function useAnalyticsChartLegend({
 				id: getPreviousPeriodDatasetId(entry.id),
 				name: formatMessage(analyticsChartMessages.previousPeriodSuffix, { name: entry.name }),
 				projectName: entry.projectName,
+				tooltip: entry.tooltip,
 				color: entry.color,
 				totalValue: previousDataset ? getChartDatasetTotal(previousDataset) : 0,
 				hidden: hiddenDatasetIds.value.has(getPreviousPeriodDatasetId(entry.id)),
@@ -153,6 +155,7 @@ export function useAnalyticsChartLegend({
 					name: dataset.label,
 				}),
 				projectName: dataset.projectName,
+				tooltip: dataset.tooltip,
 				data: previousData,
 				borderColor: dataset.borderColor,
 				backgroundColor: dataset.backgroundColor,
@@ -296,7 +299,7 @@ export function useAnalyticsChartLegend({
 	}
 
 	function getLegendEntryTooltip(legendEntry: AnalyticsChartLegendEntry) {
-		return legendEntry.projectName ?? ''
+		return legendEntry.tooltip ?? legendEntry.projectName ?? ''
 	}
 
 	function isUnmonetizedLegendEntry(legendEntry: AnalyticsChartLegendEntry) {

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-plot/AnalyticsChartTooltip.vue

@@ -97,7 +97,7 @@
 						"
 					/>
 					<span
-						v-tooltip="entry.projectName ?? ''"
+						v-tooltip="entry.tooltip ?? entry.projectName ?? ''"
 						class="min-w-0 truncate"
 						:class="{
 							'line-through': entry.hidden,
@@ -145,6 +145,7 @@ export type AnalyticsChartTooltipEntry = {
 	projectId: string
 	name: string
 	projectName?: string
+	tooltip?: string
 	color: string
 	formattedValue: string
 	hidden: boolean

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-plot/index.vue

@@ -208,6 +208,7 @@ const hoverEntries = computed(() => {
 			projectId: legendEntry.id,
 			name: legendEntry.name,
 			projectName: legendEntry.projectName,
+			tooltip: legendEntry.tooltip,
 			color: legendEntry.color,
 			formattedValue: props.isRatioMode
 				? `${ratioValue.toFixed(1)}%`

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-types.ts

@@ -14,6 +14,7 @@ export type AnalyticsChartLegendEntry = {
 	id: string
 	name: string
 	projectName?: string
+	tooltip?: string
 	color: string
 	totalValue: number
 	hidden: boolean