Skip to content

Commit

Permalink
Add background and font options to pie chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@maantje
maantje committed Jan 19, 2025
1 parent e9c2d40 commit eccff3d
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 14 deletions.
11 changes: 6 additions & 5 deletions examples/output/pie-chart.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 19 additions & 1 deletion src/Pie/PieChart.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
namespace Maantje\Charts\Pie;

use Closure;
use Maantje\Charts\SVG\Rect;

class PieChart
{
Expand All @@ -14,6 +15,9 @@ class PieChart
public function __construct(
private readonly int $size = 400,
private readonly array $slices = [],
public ?string $background = 'white',
public int $fontSize = 14,
public string $fontFamily = 'arial',
?Closure $formatter = null
) {
$this->formatter = $formatter ?? fn (string $label, float $percentage) => "$label - $percentage%";
Expand All @@ -22,7 +26,8 @@ public function __construct(
public function render(): string
{
return <<<SVG
<svg width="{$this->size}" height="{$this->size}" xmlns="http://www.w3.org/2000/svg">
<svg width="$this->size" height="$this->size" xmlns="http://www.w3.org/2000/svg">
{$this->background()}
{$this->renderSlices()}
</svg>
SVG;
Expand Down Expand Up @@ -94,4 +99,17 @@ private function renderSlices(): string

return $svg;
}

protected function background(): string
{
if (is_null($this->background)) {
return '';
}

return new Rect(
width: $this->size,
height: $this->size,
fill: $this->background,
);
}
}
5 changes: 3 additions & 2 deletions src/Pie/Slice.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ public function __construct(
public float $value,
public string $color,
public string $label,
public int $labelSize = 12,
public ?int $fontSize = null,
public string $labelColor = '#000',
public float $explodeDistance = 0.0,
) {}
Expand All @@ -30,7 +30,8 @@ public function render(PieChart $chart, string $pathData, float $labelX, float $
content: $labelText,
x: $labelX,
y: $labelY,
fontSize: $this->labelSize,
fontFamily: $chart->fontFamily,
fontSize: $this->fontSize ?? $chart->fontSize,
fill: $this->labelColor,
textAnchor: 'middle',
dominantBaseline: 'middle',
Expand Down
20 changes: 14 additions & 6 deletions tests/Unit/PieChartTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,17 @@

expect(pretty($chart->render()))->toBe(<<<'SVG'
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<rect x="0" y="0" width="500" height="500" fill="white" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0">
<title/>
</rect>
<path d="M 295.2413526233,271.28896457825 L 495.2413526233,271.28896457825 A 200,200 0 0,1 422.72615057304,425.39161313341 Z" fill="#5B9BD5"/>
<text x="415.88495961877" y="328.05953678693" font-family="Arial" font-size="12" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Toys - 14%</text>
<text x="415.88495961877" y="328.05953678693" font-family="arial" font-size="14" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Toys - 14%</text>
<path d="M 250,250 L 377.48479794974,404.10264855516 A 200,200 0 0,1 69.034589506796,164.84414168699 Z" fill="#ED7D31"/>
<text x="168.27905951294" y="355.35400165009" font-family="Arial" font-size="12" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Furniture - 43%</text>
<text x="168.27905951294" y="355.35400165009" font-family="arial" font-size="14" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Furniture - 43%</text>
<path d="M 250,250 L 69.034589506796,164.84414168699 A 200,200 0 0,1 212.52373708286,53.542549854262 Z" fill="#A5A5A5"/>
<text x="168.27905951294" y="144.64599834991" font-family="Arial" font-size="12" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Home - 15%</text>
<text x="168.27905951294" y="144.64599834991" font-family="arial" font-size="14" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Home - 15%</text>
<path d="M 250,250 L 212.52373708286,53.542549854262 A 200,200 0 0,1 450,250 Z" fill="#FFC001"/>
<text x="334.98986529983" y="147.26490096323" font-family="Arial" font-size="12" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Electronics - 28%</text>
<text x="334.98986529983" y="147.26490096323" font-family="arial" font-size="14" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Electronics - 28%</text>
</svg>
SVG
);
Expand All @@ -60,8 +63,11 @@

expect(pretty($chart->render()))->toBe(<<<'SVG'
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<rect x="0" y="0" width="500" height="500" fill="white" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0">
<title/>
</rect>
<path d="M 250,250 m -250,0 a 250,250 0 1,0 500,0 a 250,250 0 1,0 -500,0 Z" fill="#ED7D31"/>
<text x="250" y="125" font-family="Arial" font-size="12" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Furniture - 100%</text>
<text x="250" y="125" font-family="arial" font-size="14" fill="#000" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="middle" alignment-baseline="auto">Furniture - 100%</text>
</svg>
SVG
);
Expand All @@ -75,7 +81,9 @@

expect(pretty($chart->render()))->toBe(<<<'SVG'
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<rect x="0" y="0" width="500" height="500" fill="white" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0">
<title/>
</rect>
</svg>
SVG
);
Expand Down

0 comments on commit eccff3d

Please sign in to comment.