GitHub style graph in PHP + CSS

git_graph.php

<style>
	.git-graph {
		text-align: left;
		line-height: 1;
	}
	.git-graph-row {
		clear: both;
		text-align: left;
	}
	.git-graph-cell {
		margin: 2px;
		cursor: pointer;
		width: calc(calc(100% / 52) - 2px - 2px);
		padding-bottom: calc(calc(100% / 52) - 2px - 2px);
		height: 0;
		/*outline: 2px solid var(--global-background-color);*/
		display: inline-block;
		background-color:var(--global-background-color);
		vertical-align: top;
		text-align: left;
	}
	@media (max-width: 800px) {
		.git-graph-cell {
			margin: 1px;
			width: calc(calc(100% / 52) - 1px - 1px);
			padding-bottom: calc(calc(100% / 52) - 1px - 1px);
		}
		.git-graph-cell-month {
			width: calc(calc(100% / 12) - 1px - 1px);
		}
	}
	.git-graph-supercell-months {
		display: inline-block;
		vertical-align: top;
		width: calc(100% - 50px);
	}
	.git-graph-supercell-days {
		display: inline-block;
		vertical-align: top;
		width: calc(100% - 50px);
	}
	.git-graph-cell-month {
		padding: 7px;
		width: calc(calc(100% / 12) - 2px - 2px);
		display: inline-block;
		color: var(--input-placeholder-color);
		vertical-align: top;
		text-align: left;
	}
	.git-graph-cell-weekday {
		color: var(--input-placeholder-color);
		width: 50px;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}
	.git-graph-cell.active {
		background-color:var(--brand-color)
	}
</style>


<div class="chart">
	<h2>
		Daily revenue
	</h2>
	<p>
		Target is $1,000 revenue per day. If target hit, it's solid red.
	</p>
	<?
		
		$revenueByWeekday=array();
		$revenueByDate=$revenuePerYYYYMMDD;
		foreach($revenuePerYYYYMMDD as $YYYYMMDD => $revenue) {
			if(!is_array($revenueByWeekday[date('N',strtotime($YYYYMMDD))])) {
				$revenueByWeekday[date('N',strtotime($YYYYMMDD))]=array();
			}
			array_push(
				$revenueByWeekday[date('N',strtotime($YYYYMMDD))],
				date('Y-m-d',strtotime($YYYYMMDD))
			);
		}
		ksort($revenueByWeekday);

		// <get offset so we land on sunday 365 days ago>
			$weekdayOffset=date('N',strtotime("-365 days"));
		// </get offset so we land on sunday 365 days ago>



		?>

		<div class="git-graph">

			<?/* <months on top>*/?>
				<div class="git-graph-row">
					<div class="git-graph-cell-weekday">
						&nbsp;
					</div>
					<div class="git-graph-supercell-months">
						<?
						$month=0;
						while($month<12) {
							$monthY=$month+date('m')+1;
							if($monthY>12) {
								$monthY=$monthY-12;
							}
							?>
							<div class="git-graph-cell-month">
								<?=date('M',strtotime(date('Y-'.$monthY.'-01')));?>
							</div>
							<?
							$month++;
						}
						?>
					</div>
				</div>
			<?/* </months on top>*/?>
			<?
			foreach($revenueByWeekday as $weekday => $revenue) {
				$dayCounter=$weekday-$weekdayOffset-1;
				?><div class="git-graph-row">
					<div class="git-graph-cell-weekday">
						<?
							$weekdayOffsetted=date('N',strtotime("-".(365-$dayCounter)." days"));
							if($weekdayOffsetted==1 || $weekdayOffsetted==3 || $weekdayOffsetted==5) {
								echo date('D',strtotime("-".(365-$dayCounter)." days"));
							}
						?>
					</div>
					<div class="git-graph-supercell-days">
						<?
						$week=1;
						while($week<=52 /*weeks*/) {
							$dayCounter=$dayCounter+7;
							$date=date('Y-m-d',strtotime("-".(365-$dayCounter)." days"));
							if($revenueByDate[$date]) {
								$opacity=round(($revenueByDate[$date]/1000),2);
								if($opacity>1) $opacity=1;
								if($opacity<1) $opacity=$opacity/2;
								?><div class="git-graph-cell active tooltip" title="<?=date('D jS M',strtotime($date))?>: $<?=number_format($revenueByDate[$date]);?>" style="opacity:<?
									echo $opacity;
								?>"></div><?
							}
							else {
								?><div class="git-graph-cell"></div><?
							}
							$week++;
						}
						?>
					</div>
				</div><?
			}
		?></div><?

	?>
</div>