Skip to content

Instantly share code, notes, and snippets.

@levelsio
Last active June 5, 2023 03:49
Show Gist options
  • Save levelsio/fd80807d0bae046e1d4594f67548af96 to your computer and use it in GitHub Desktop.
Save levelsio/fd80807d0bae046e1d4594f67548af96 to your computer and use it in GitHub Desktop.
GitHub style graph in PHP + CSS
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment