Madeorsk/PollVerlaine
1
0
Fork 0
mirror of https://git.cant.at/Madeorsk/PollVerlaine synced 2024-11-24 13:54:31 +01:00
Code Issues Releases Wiki Activity

Result view & pie chart generation

Browse Source 
+ Result view;
+ Pie chart generation (TODO: Add values for each color).

TODO: Organize JSON results.
This commit is contained in:
Madeorsk 2018-08-13 17:02:06 +02:00
parent e0b4db74c9
commit ec3a86cc33
4 changed files with 113 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.php
View File

@ -86,6 +86,23 @@ Flight::route("POST /polls/@id:[a-fA-F0-9]+/vote", function ($id) {
Flight::notFound();
});
Flight::route("GET /polls/@id:[a-fA-F0-9]+/results", function ($id) {
$poll = Poll::load_poll($id);
if ($poll)
{
if (Flight::request()->type === "application/json")
Flight::json(format_poll($poll)); //TODO Add a svg for results?
else
{
Flight::render("svg/results", ["poll" => $poll], "results_chart");
Flight::render("results", ["poll" => $poll], "body_content");
Flight::render("layout");
}
}
else
Flight::notFound();
});
Flight::route("/", function () {
global $VERLAINE;
Flight::render("home", ["app_url" => $VERLAINE["app_url"]], "body_content");

35
static/css/main.css
View File

@ -176,6 +176,41 @@ h1.poll
cursor: pointer;
}
/*
* JHFNDSJH
*/
main.results
{
display: flex;
flex-direction: row;
justify-content: center;
}
main.results > *
{ flex: 1; }
main.results .chart
{ flex: 2; max-height: 70vh; }
main.results .chart > svg
{ display: block; margin: auto; height: 100%; }
main.results .options table
{
margin: 0;
padding: 0 3em;
box-sizing: border-box;
width: 100%;
height: 100%;
font-size: 1.5em;
}
main.results .options table td
{ text-align: right; }
main.results .options .number
{
font-family: "PT Serif", serif;
font-size: 2em;
}
footer
{
display: block;

22
views/results.php Normal file
View File

@ -0,0 +1,22 @@
<?php
$total_votes = 0;
foreach ($poll->options as $option)
$total_votes += $option->votes;
?>
<h1 class="poll"><?= $poll->title ?></h1>
<main class="results">
<div class="options">
<table>
<?php foreach ($poll->options as $option): ?>
<tr>
<td class="number"><?= $option->votes ?></td>
<td><?= $option->label ?></td>
<td><?= round($option->votes / $total_votes, 3)*100 ?>%</td>
</tr>
<?php endforeach; ?>
</table>
</div>
<div class="chart">
<?= $results_chart ?>
</div>
</main>

39
views/svg/results.php Normal file
View File

@ -0,0 +1,39 @@
<?php
define("CIRCLE_R", 50);
$COLORS = [
"#FF4B44", // Red.
"#FFD149", // Yellow.
"#56B3FF", // Dark blue.
"#FF9535", // Orange.
"#7DFF59", // Green.
"#FFAFEC", // Pink.
"#82FFE8", // Light blue.
];
$total_votes = 0;
foreach ($poll->options as $option)
$total_votes += $option->votes;
$options_percentages = [];
foreach ($poll->options as $option)
$options_percentages[] = $option->votes / $total_votes;
function percentage_pos_x($r, $percentage)
{ return round($r * sin(2 * M_PI * $percentage), 2); }
function percentage_pos_y($r, $percentage)
{ return -1*round($r * cos(2 * M_PI * $percentage), 2); }
//TODO Improve by showing values in the colors.
?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-<?= CIRCLE_R ?> -<?= CIRCLE_R ?> <?= CIRCLE_R*2 ?> <?= CIRCLE_R*2 ?>">
<circle cx="0" cy="0" r="<?= CIRCLE_R ?>" fill="black" fill-opacity="0.2"></circle>
<?php
$used_percentage = 0;
foreach ($poll->options as $index => $option): ?>
<path d="M<?= percentage_pos_x(CIRCLE_R, $used_percentage) ?> <?= percentage_pos_y(CIRCLE_R, $used_percentage) ?> A<?= CIRCLE_R." ".CIRCLE_R ?> 0 <?= ($options_percentages[$index] > 0.5 ? 1 : 0) ?> 1 <?= percentage_pos_x(CIRCLE_R, $used_percentage + $options_percentages[$index]) ?> <?= percentage_pos_y(CIRCLE_R, $used_percentage + $options_percentages[$index]) ?> L0 0" fill="<?= $COLORS[$index%7] ?>"></path>
<?php $used_percentage += $options_percentages[$index]; endforeach; ?>
</svg>