[web-doc] master: Replace JpGraph with inline SVG for rendering charts (#66)
| From: | Louis-Arnaud via GitHub | Date: | Tue, 30 Jun 2026 11:31:09 +0000 |
| Subject: | [web-doc] master: Replace JpGraph with inline SVG for rendering charts (#66) | ||
| Groups: | php.doc.web | ||
| Request: | Send a blank email to doc-web+get-2544@lists.php.net to get a copy of this message | ||
Author: Louis-Arnaud (lacatoire)
Committer: GitHub (web-flow)
Pusher: jordikroon
Date: 2026-06-30T13:31:05+02:00
Commit: https://github.com/php/web-doc/commit/fbdabaeb3b847c1fc4d7b9022d1c57fa68fa4661
Raw diff: https://github.com/php/web-doc/commit/fbdabaeb3b847c1fc4d7b9022d1c57fa68fa4661.diff
Replace JpGraph with inline SVG for rendering charts (#66)
Changed paths:
M www/img-status-all.php
M www/img-status-lang.php
Diff:
diff --git a/www/img-status-all.php b/www/img-status-all.php
index 37eddac..9bb02a0 100644
--- a/www/img-status-all.php
+++ b/www/img-status-all.php
@@ -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';
@@ -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>
diff --git a/www/img-status-lang.php b/www/img-status-lang.php
index ba54520..ddad490 100644
--- a/www/img-status-lang.php
+++ b/www/img-status-lang.php
@@ -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';
@@ -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>';
}