<commit_before><!doctype html>
<html>
<head>
<title>Radial Gradient</title>
	<script src="../../dist/chart.js"></script>
	<script src="../utils.js"></script>
	<style>
		canvas {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}
	</style>
</head>

<body>
	<div style="width: 75%;">
		<canvas id="canvas"></canvas>
	</div>
	<br>
	<br>
	<button id="randomizeData">Randomize Data</button>
	<script>
		var chartColors = window.chartColors;
		var gradient = null;
		var width = null;
		var height = null;
		var config = {
			type: 'polarArea',
			data: {
				datasets: [{
					data: [
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
					],
					backgroundColor: function(context) {
						var chartArea = context.chart.chartArea;

						if (!chartArea) {
							// This case happens on initial chart load
							return null;
						}

						var chartWidth = chartArea.right - chartArea.left;
						var chartHeight = chartArea.bottom - chartArea.top;
						if (gradient === null || width !== chartWidth || height !== chartHeight) {
							// Create the gradient because this is either the first render
							// or the size of the chart has changed
							width = chartWidth;
							height = chartHeight;
							var centerX = (chartArea.left + chartArea.right) / 2;
							var centerY = (chartArea.top + chartArea.bottom) / 2;
							var r = Math.min(
								(chartArea.right - chartArea.left) / 2,
								(chartArea.bottom - chartArea.top) / 2
							);
							var ctx = context.chart.ctx;
							gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, r);
							gradient.addColorStop(0, chartColors.red);
							gradient.addColorStop(0.5, chartColors.green);
							gradient.addColorStop(1, chartColors.purple);
						}

						return gradient;
					},
					label: 'My dataset' // for legend
				}],
				labels: [
					'Red',
					'Orange',
					'Yellow',
					'Green',
					'Blue'
				]
			},
			options: {
				responsive: true,
				plugins: {
					legend: {
						position: 'right',
					},
					title: {
						display: true,<commit_msg>Improve radial gradient sample (#8383)<commit_after><!doctype html>
<html>
<head>
<title>Radial Gradient</title>
	<script src="../../dist/chart.js"></script>
	<script src="../utils.js"></script>
	<style>
		canvas {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}
	</style>
</head>

<body>
	<div style="width: 75%;">
		<canvas id="canvas"></canvas>
	</div>
	<br>
	<br>
	<button id="randomizeData">Randomize Data</button>
	<script>
		var cache = new Map();
		var width = null;
		var height = null;

		function createRadialGradient3(context, c1, c2, c3) {
			var chartArea = context.chart.chartArea;
			if (!chartArea) {
				// This case happens on initial chart load
				return null;
			}

			var chartWidth = chartArea.right - chartArea.left;
			var chartHeight = chartArea.bottom - chartArea.top;
			if (width !== chartWidth || height !== chartHeight) {
				cache.clear();
			}
			var gradient = cache.get(c1 + c2 + c3);
			if (!gradient) {
				// Create the gradient because this is either the first render
				// or the size of the chart has changed
				width = chartWidth;
				height = chartHeight;
				var centerX = (chartArea.left + chartArea.right) / 2;
				var centerY = (chartArea.top + chartArea.bottom) / 2;
				var r = Math.min(
					(chartArea.right - chartArea.left) / 2,
					(chartArea.bottom - chartArea.top) / 2
				);
				var ctx = context.chart.ctx;
				gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, r);
				gradient.addColorStop(0, c1);
				gradient.addColorStop(0.5, c2);
				gradient.addColorStop(1, c3);
				cache.set(c1 + c2 + c3, gradient);
			}

			return gradient;
		}

		var chartColors = window.chartColors;
		var colors = [chartColors.red, chartColors.orange, chartColors.yellow, chartColors.green, chartColors.blue];
		var config = {
			type: 'polarArea',
			data: {
				datasets: [{
					data: [
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
					],
					backgroundColor: function(context) {
						var c = colors[context.dataIndex];
						if (context.active) {
							c = Chart.helpers.getHoverColor(c);
						}
						var mid = Chart.helpers.color(c).desaturate(0.2).darken(0.2).rgbString();
						var start = Chart.helpers.color(c).lighten(0.2).rotate(270).rgbString();
						var end = Chart.helpers.color(c).lighten(0.1).rgbString();
						return createRadialGradient3(context, start, mid, end);
					},
					label: 'My dataset' // for legend
				}],
				labels: [
					'Red',
					'Orange',
					'Yellow',
					'Green',
					'Blue'
				]
			},
			options: {
				responsive: true,
				plugins: {
					legend: {
						position: 'right',
					},
					title: {
						display: true,
{'fraction_non_alphanumeric': 0.1457620293940004, 'fraction_numerical': 0.010267767263942018, 'mean_word_length': 2.597393193338161, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1771105', 'n_tokens_mistral': 2192, 'n_tokens_neox': 1633, 'n_words': 383}