Skip to content

Render the translation status charts as inline SVG #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lacatoire wants to merge 1 commit into
base: master
Choose a base branch
from
+59 −79
Open

Render the translation status charts as inline SVG #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 25 additions & 44 deletions www/img-status-all.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
<?php
require_once __DIR__ . '/../include/jpgraph/src/jpgraph.php';
require_once __DIR__ . '/../include/jpgraph/src/jpgraph_bar.php';

require_once __DIR__ . '/../include/init.inc.php';
require_once __DIR__ . '/../include/lib_revcheck.inc.php';

Expand All @@ -22,44 +19,28 @@
$percent = array_values($percent_tmp);
$legend = array_values($legend_tmp);

// Create the graph. These two calls are always required
$graph = new Graph(600,262);
$graph->SetScale("textlin");

$graph->xaxis->SetLabelmargin(5);
$graph->xaxis->SetTickLabels($legend);

$graph->ygrid->SetFill(true,'#EFEFEF@0.5','#BBCCFF@0.5');

// Add a drop shadow
$graph->SetShadow();

// Adjust the margin a bit to make more room for titles
$graph->img->SetMargin(50,30,35,40);

// Create a bar pot
$bplot = new BarPlot($percent);
$graph->Add($bplot);

// Adjust fill color
$bplot->SetFillColor([ '#9999CC', '#99CC99', '#CC9999' ]);

$bplot->SetShadow();
$bplot->value->Show();
$bplot->value->SetFont(FF_FONT1,FS_NORMAL,10);
$bplot->value->SetFormat('%0.0f%%');

// Width
$bplot->SetWidth(0.6);

// Setup the titles
$graph->title->Set("PHP Translation Status");
$graph->xaxis->title->Set("Language");
$graph->yaxis->title->Set("Files up to date (%)");

$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->title->SetFont(FF_FONT1,FS_NORMAL);
$graph->xaxis->title->SetFont(FF_FONT1,FS_NORMAL);

// Display the graph
$graph->Stroke();
$colors = ['#9999CC', '#99CC99', '#CC9999'];
$bw = 44; $gap = 18; $left = 50; $right = 24;
$top = 60; $plot_h = 200; $bottom = 38;
$width = max(600, $left + count($percent) * ($bw + $gap) - $gap + $right);
$height = $top + $plot_h + $bottom;
$base = $top + $plot_h;

header('Content-Type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 <?= $width ?> <?= $height ?>" width="<?= $width ?>" height="<?= $height ?>" role="img" aria-label="PHP Translation Status">
<style>text{font:11px sans-serif;fill:#000}.t{font:bold 14px sans-serif}.g{stroke:#efefef}.b{stroke:#bbccff}</style>
<text class="t" x="0" y="22">PHP Translation Status</text>
<text x="0" y="40">Files up to date per language</text>
<?php foreach ([0, 25, 50, 75, 100] as $tick): $y = $base - $plot_h * $tick / 100; ?>
<line class="g" x1="<?= $left ?>" y1="<?= $y ?>" x2="<?= $width - $right + 8 ?>" y2="<?= $y ?>"/>
<text x="<?= $left - 8 ?>" y="<?= $y + 4 ?>" text-anchor="end"><?= $tick ?>%</text>
<?php endforeach; ?>
<line class="b" x1="<?= $left ?>" y1="<?= $base ?>" x2="<?= $width - $right + 8 ?>" y2="<?= $base ?>"/>
<?php foreach ($percent as $i => $p): $x = $left + $i * ($bw + $gap); $h = $plot_h * $p / 100; $by = $base - $h; $cx = $x + $bw / 2; ?>
<rect x="<?= $x ?>" y="<?= $by ?>" width="<?= $bw ?>" height="<?= $h ?>" rx="3" fill="<?= $colors[$i % 3] ?>"><title><?= htmlspecialchars($legend[$i]) ?>: <?= $p ?>%</title></rect>
<text x="<?= $cx ?>" y="<?= $by - 6 ?>" text-anchor="middle"><?= $p ?>%</text>
<text x="<?= $cx ?>" y="<?= $base + 18 ?>" text-anchor="middle"><?= htmlspecialchars($legend[$i]) ?></text>
<?php endforeach; ?>
</svg>
69 changes: 34 additions & 35 deletions www/img-status-lang.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<?php

require_once __DIR__ . '/../include/jpgraph/src/jpgraph.php';
require_once __DIR__ . '/../include/jpgraph/src/jpgraph_pie.php';
require_once __DIR__ . '/../include/jpgraph/src/jpgraph_pie3d.php';

require_once __DIR__ . '/../include/init.inc.php';
require_once __DIR__ . '/../include/lib_revcheck.inc.php';
require_once __DIR__ . '/../include/lib_proj_lang.inc.php';
Expand Down Expand Up @@ -48,39 +44,42 @@ function generate_image($lang, $idx) {
$percent[] = round($value * 100 / $total);
}

$legend = array($percent[0] . '%% up to date ('.$up_to_date.')', $percent[1] . '%% outdated ('.$outdated.')', $percent[2] . '%% missing ('.$missing.')', $percent[3] . '%% without EN-Revision ('.$no_tag.')');
$legend = array($percent[0] . '% up to date ('.$up_to_date.')', $percent[1] . '% outdated ('.$outdated.')', $percent[2] . '% missing ('.$missing.')', $percent[3] . '% without EN-Revision ('.$no_tag.')');
$title = 'Details for '.$LANGUAGES[$lang].' PHP Manual';

$graph = new PieGraph(680,300);
$graph->SetShadow();

$graph->title->Set($title);
$graph->title->Align('left');
$graph->title->SetFont(FF_FONT1,FS_BOLD);

$graph->legend->Pos(0.02,0.18,"right","center");

$graph->subtitle->Set('(Total: '.$total_files_lang.' files)');
$graph->subtitle->Align('left');
$graph->subtitle->SetColor('darkred');

$t1 = new Text(date('m/d/Y'));
$t1->SetPos(522,294);
$t1->SetFont(FF_FONT1,FS_NORMAL);
$t1->Align("right", 'bottom');
$t1->SetColor("black");
$graph->AddText($t1);

$p1 = new PiePlot3D($data);
$p1->SetSliceColors(array("#68d888", "#ff6347", "#dcdcdc", "#f4a460"));
if ($total_files_lang != $up_to_date) {
$p1->ExplodeAll();
$colors = ['#61A9F3', '#F381B9', '#61E3A9', '#85ED82'];

$W = 680; $H = 300; $cx = 140; $cy = 165; $ro = 110; $ri = 64;

header('Content-Type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '.$W.' '.$H.'" width="'.$W.'" height="'.$H.'" role="img" aria-label="'.htmlspecialchars($title).'">';
echo '<style>text{font:11px sans-serif;fill:#000}.t{font:bold 14px sans-serif}.s{fill:#8b0000}path{stroke:#fff;stroke-width:2}</style>';
echo '<text class="t" x="20" y="28">'.htmlspecialchars($title).'</text>';
echo '<text class="s" x="20" y="46">(Total: '.$total_files_lang.' files)</text>';

$angle = -M_PI / 2;
foreach ($data as $i => $value) {
if ($value <= 0) continue;
$sweep = ($value / $total) * 2 * M_PI;
$end = $angle + $sweep;
$sx1 = $cx + $ro * cos($angle); $sy1 = $cy + $ro * sin($angle);
$ex1 = $cx + $ro * cos($end); $ey1 = $cy + $ro * sin($end);
$sx2 = $cx + $ri * cos($end); $sy2 = $cy + $ri * sin($end);
$ex2 = $cx + $ri * cos($angle); $ey2 = $cy + $ri * sin($angle);
$large = ($end - $angle) > M_PI ? 1 : 0;
$d = sprintf('M %.2f %.2f A %d %d 0 %d 1 %.2f %.2f L %.2f %.2f A %d %d 0 %d 0 %.2f %.2f Z',
$sx1, $sy1, $ro, $ro, $large, $ex1, $ey1, $sx2, $sy2, $ri, $ri, $large, $ex2, $ey2);
echo '<path d="'.$d.'" fill="'.$colors[$i].'"><title>'.htmlspecialchars($legend[$i]).'</title></path>';
$angle = $end;
}
$p1->SetCenter(0.35,0.55);
$p1->value->Show(false);

$p1->SetLegends($legend);
$lx = 290; $ly = 110;
foreach ($legend as $i => $line) {
$y = $ly + $i * 26;
echo '<rect x="'.$lx.'" y="'.($y - 11).'" width="14" height="14" rx="2" fill="'.$colors[$i].'"/>';
echo '<text x="'.($lx + 22).'" y="'.$y.'">'.htmlspecialchars($line).'</text>';
}

$graph->Add($p1);
$graph->Stroke();
echo '<text x="'.($W - 18).'" y="'.($H - 8).'" text-anchor="end">'.date('m/d/Y').'</text>';
echo '</svg>';
}