add pie and donut chart

farshidrezaei · Oct 9, 2021 · 4a3bc4f · 4a3bc4f
1 parent 4eb38e3
commit 4a3bc4f
Show file tree

Hide file tree

Showing 6 changed files with 296 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -120,6 +120,33 @@ export example:
 ![exported chart image](https://s4.uupload.ir/files/line_y6mz.png)
 
 
+
+### pie:
+```php
+   $data = [
+            ['title'=>'foo','count'=>1234],
+            ['title'=>'bar','count'=>125],
+            ['title'=>'baz','count'=>564],
+        ];
+```
+export example:
+
+![exported chart image](https://s4.uupload.ir/files/pie_qrst.png)
+
+### donut:
+```php
+   $data = [
+            ['title'=>'foo','count'=>1234],
+            ['title'=>'bar','count'=>125],
+            ['title'=>'baz','count'=>564],
+        ];
+```
+export example:
+
+![exported chart image](https://s4.uupload.ir/files/donut_m42h.png)
+
+
+
 ### cloud:
 ```php
 $data = [  

diff --git a/src/Resources/views/charts/donut.blade.php b/src/Resources/views/charts/donut.blade.php
@@ -0,0 +1,77 @@
+@extends('chartio::layout')
+
+@section('chart')
+    <figure id="chart-wrapper" class="highcharts-figure management-chart-item-box">
+        <div class="chart-item-title">
+            <h2>{{$title}}</h2>
+        </div>
+        <div id="chart"></div>
+
+        <p class="description">
+           * {{$description}}
+        </p>
+    </figure>
+    @push('scripts')
+        <script>
+            let jsonData = @json($data);
+            jsonData = jsonData.map(item => {
+                return {name: item['{{$xAxis}}'], y: item['{{$yAxis}}']}
+            });
+            Highcharts.chart('chart', {
+                backgroundColor: 'transparent',
+                colors: ["#009299", "#1AD7DB", "#589DFB", "#5EDFFF", "#B7E778"],
+                credits: {
+                    enabled: false
+                },
+
+                exporting: {
+                    enabled: false,
+                },
+                chart: {
+                    height: "250",
+                    backgroundColor: 'transparent',
+                    plotBackgroundColor: 'transparent',
+                    plotBorderWidth: 0,
+                    plotShadow: false,
+                    type: 'pie',
+                    style: {
+                        fontFamily: 'BNazanin'
+                    }
+                },
+                title: {
+                    style: {
+                        display: 'none'
+                    },
+                },
+                tooltip: {
+                    formatter: function () {
+                        return '<span style="font-size: 10px;text-align: left">' + Highcharts.localizationNumber(this.key) + ' - %' + Highcharts.localizationNumber(this.y) + '</span>';
+                    },
+                    // pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+                },
+                accessibility: {
+                    point: {
+                        valueSuffix: '%'
+                    }
+                },
+                plotOptions: {
+                    pie: {
+                        // allowPointSelect: true,
+                        allowPointSelect: true,
+                        cursor: 'pointer',
+                        dataLabels: {
+                            enabled: false
+                        },
+                        showInLegend: true,
+                    }
+                },
+                series: [{
+                    name: 'Brands',
+                    colorByPoint: true,
+                    innerSize:'45%',
+                    data: jsonData
+                }]
+            });
+        </script>
+    @endpush
+@stop
diff --git a/src/Resources/views/charts/pie.blade.php b/src/Resources/views/charts/pie.blade.php
@@ -0,0 +1,76 @@
+@extends('chartio::layout')
+
+@section('chart')
+    <figure id="chart-wrapper" class="highcharts-figure management-chart-item-box">
+        <div class="chart-item-title">
+            <h2>{{$title}}</h2>
+        </div>
+        <div id="chart"></div>
+
+        <p class="description">
+           * {{$description}}
+        </p>
+    </figure>
+    @push('scripts')
+        <script>
+            let jsonData = @json($data);
+            jsonData = jsonData.map(item => {
+                return {name: item['{{$xAxis}}'], y: item['{{$yAxis}}']}
+            });
+            Highcharts.chart('chart', {
+                backgroundColor: 'transparent',
+                colors: ["#009299", "#1AD7DB", "#589DFB", "#5EDFFF", "#B7E778"],
+                credits: {
+                    enabled: false
+                },
+
+                exporting: {
+                    enabled: false,
+                },
+                chart: {
+                    height: "250",
+                    backgroundColor: 'transparent',
+                    plotBackgroundColor: 'transparent',
+                    plotBorderWidth: 0,
+                    plotShadow: false,
+                    type: 'pie',
+                    style: {
+                        fontFamily: 'BNazanin'
+                    }
+                },
+                title: {
+                    style: {
+                        display: 'none'
+                    },
+                },
+                tooltip: {
+                    formatter: function () {
+                        return '<span style="font-size: 10px;text-align: left">' + Highcharts.localizationNumber(this.key) + ' - %' + Highcharts.localizationNumber(this.y) + '</span>';
+                    },
+                    // pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+                },
+                accessibility: {
+                    point: {
+                        valueSuffix: '%'
+                    }
+                },
+                plotOptions: {
+                    pie: {
+                        // allowPointSelect: true,
+                        allowPointSelect: true,
+                        cursor: 'pointer',
+                        dataLabels: {
+                            enabled: false
+                        },
+                        showInLegend: true,
+                    }
+                },
+                series: [{
+                    name: 'Brands',
+                    colorByPoint: true,
+                    data: jsonData
+                }]
+            });
+        </script>
+    @endpush
+@stop
diff --git a/src/Services/Chartio.php b/src/Services/Chartio.php
@@ -7,8 +7,10 @@
 use FarshidRezaei\Chartio\Services\Charts\AbstractChart;
 use FarshidRezaei\Chartio\Services\Charts\CloudChart;
 use FarshidRezaei\Chartio\Services\Charts\ColumnChart;
+use FarshidRezaei\Chartio\Services\Charts\DonutChart;
 use FarshidRezaei\Chartio\Services\Charts\LineChart;
 use FarshidRezaei\Chartio\Services\Charts\BarChart;
+use FarshidRezaei\Chartio\Services\Charts\PieChart;
 use Intervention\Image\Exception\NotFoundException;
 
 class Chartio
@@ -24,6 +26,8 @@ class Chartio
             'line'  => LineChart::class,
             'column'   =>ColumnChart::class,
             'bar'   =>BarChart::class,
+            'donut'   =>DonutChart::class,
+            'pie'   =>PieChart::class,
         ];
 
 

diff --git a/src/Services/Charts/DonutChart.php b/src/Services/Charts/DonutChart.php
@@ -0,0 +1,56 @@
+<?php
+
+
+namespace FarshidRezaei\Chartio\Services\Charts;
+
+
+use JetBrains\PhpStorm\Pure;
+use FarshidRezaei\Chartio\Services\ChartExporter;
+use Spatie\Browsershot\Browsershot;
+
+
+class DonutChart extends AbstractChart
+{
+
+    protected string $type = 'donut';
+
+    protected string $bladeTemplate = 'chartio::charts.donut';
+
+    #[Pure]
+    public static function new(): self
+    {
+        return new self();
+    }
+
+
+    /**
+     *
+     * @return ChartExporter
+     */
+    public function generate(): ChartExporter
+    {
+        $template = trim(
+            view( $this->bladeTemplate )
+                ->with(
+                    [
+                        'xAxis'       => $this->xAxisField,
+                        'yAxis'       => $this->yAxisField,
+                        'title'       => $this->title,
+                        'description' => $this->description,
+                        'data'        => $this->data,
+                    ]
+                )
+                ->render()
+        );
+        $tempDir = sys_get_temp_dir();
+        $tempName = time().'_'.\Str::random( 6 ).'.html';
+        $this->htmlPath = "$tempDir/$tempName";
+
+        file_put_contents( $this->htmlPath, $template );
+        return new ChartExporter($this->htmlPath);
+    }
+
+
+
+
+}
diff --git a/src/Services/Charts/PieChart.php b/src/Services/Charts/PieChart.php
@@ -0,0 +1,56 @@
+<?php
+
+
+namespace FarshidRezaei\Chartio\Services\Charts;
+
+
+use JetBrains\PhpStorm\Pure;
+use FarshidRezaei\Chartio\Services\ChartExporter;
+use Spatie\Browsershot\Browsershot;
+
+
+class PieChart extends AbstractChart
+{
+
+    protected string $type = 'pie';
+
+    protected string $bladeTemplate = 'chartio::charts.pie';
+
+    #[Pure]
+    public static function new(): self
+    {
+        return new self();
+    }
+
+
+    /**
+     *
+     * @return ChartExporter
+     */
+    public function generate(): ChartExporter
+    {
+        $template = trim(
+            view( $this->bladeTemplate )
+                ->with(
+                    [
+                        'xAxis'       => $this->xAxisField,
+                        'yAxis'       => $this->yAxisField,
+                        'title'       => $this->title,
+                        'description' => $this->description,
+                        'data'        => $this->data,
+                    ]
+                )
+                ->render()
+        );
+        $tempDir = sys_get_temp_dir();
+        $tempName = time().'_'.\Str::random( 6 ).'.html';
+        $this->htmlPath = "$tempDir/$tempName";
+
+        file_put_contents( $this->htmlPath, $template );
+        return new ChartExporter($this->htmlPath);
+    }
+
+
+
+
+}