diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-pie--firefox.png index 5240c29c403..d586e7a2e70 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png index 87f213b3503..90f8197aa7c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--firefox.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--firefox.png index 4bf367c156f..f023de0aeb1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--firefox.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--firefox.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png index 05151a3d4d2..c7a741d5bd2 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png index 5cafbbc38ba..9084e08494b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie.png b/frontend/__snapshots__/scenes-app-insights--trends-pie.png index f9687e6b26e..c440d4de111 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie.png differ diff --git a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png index 6cc53a5ddfd..4671434c830 100644 Binary files a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png and b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png differ diff --git a/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx b/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx index 15042f28029..66c8d7a47af 100644 --- a/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx +++ b/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx @@ -31,6 +31,7 @@ import { SeriesDatum } from 'scenes/insights/InsightTooltip/insightTooltipUtils' import { SeriesLetter } from 'lib/components/SeriesGlyph' import './chartjsSetup' +import ChartDataLabels from 'chartjs-plugin-datalabels' let timer: NodeJS.Timeout | null = null @@ -93,6 +94,7 @@ export function PieChart({ const onlyOneValue = processedDatasets?.[0]?.data?.length === 1 const newChart = new Chart(canvasRef.current?.getContext('2d') as ChartItem, { type: 'pie', + plugins: [ChartDataLabels], data: { labels, datasets: processedDatasets, @@ -119,6 +121,31 @@ export function PieChart({ onChartClick(event, chart, datasets, onClick) }, plugins: { + datalabels: { + color: 'white', + anchor: 'end', + backgroundColor: (context) => { + return context.dataset.backgroundColor?.[context.dataIndex] || 'black' + }, + display: (context) => { + const total = context.dataset.data.reduce( + (a, b) => (a as number) + (b as number), + 0 + ) as number + const percentage = ((context.dataset.data[context.dataIndex] as number) / total) * 100 + return context.dataset.data.length > 1 && percentage > 5 + }, + padding: (context) => { + // in order to make numbers below 10 look circular we need a little padding + const value = context.dataset.data[context.dataIndex] as number + const paddingY = value < 10 ? 2 : 4 + const paddingX = value < 10 ? 5 : 4 + return { top: paddingY, bottom: paddingY, left: paddingX, right: paddingX } + }, + borderRadius: 25, + borderWidth: 2, + borderColor: 'white', + }, legend: { display: false, }, diff --git a/package.json b/package.json index 002f665c0ca..780fc5f794c 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "chart.js": "^3.9.1", "chartjs-adapter-dayjs-3": "^1.2.3", "chartjs-plugin-crosshair": "^1.2.0", + "chartjs-plugin-datalabels": "^2.2.0", "chokidar": "^3.5.3", "clsx": "^1.1.1", "core-js": "3.15.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a97e9b37a1f..0f3cd2dd9b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -76,6 +76,7 @@ specifiers: chart.js: ^3.9.1 chartjs-adapter-dayjs-3: ^1.2.3 chartjs-plugin-crosshair: ^1.2.0 + chartjs-plugin-datalabels: ^2.2.0 chokidar: ^3.5.3 clsx: ^1.1.1 concurrently: ^5.3.0 @@ -209,6 +210,7 @@ dependencies: chart.js: 3.9.1 chartjs-adapter-dayjs-3: 1.2.3_ygcept37un3u7jsj2baqr5ze4e chartjs-plugin-crosshair: 1.2.0_chart.js@3.9.1 + chartjs-plugin-datalabels: 2.2.0_chart.js@3.9.1 chokidar: 3.5.3 clsx: 1.2.1 core-js: 3.15.2 @@ -6741,6 +6743,14 @@ packages: chart.js: 3.9.1 dev: false + /chartjs-plugin-datalabels/2.2.0_chart.js@3.9.1: + resolution: {integrity: sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==} + peerDependencies: + chart.js: '>=3.0.0' + dependencies: + chart.js: 3.9.1 + dev: false + /check-more-types/2.24.0: resolution: {integrity: sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==} engines: {node: '>= 0.8.0'}