IBX-7411: Implemented data labels for doughnut charts (#1093)

ibexa · Jan 23, 2024 · 55d71a2 · 55d71a2
1 parent e518224
commit 55d71a2
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 3 deletions.
diff --git a/src/bundle/Resources/public/img/ibexa-empty-graph.svg b/src/bundle/Resources/public/img/ibexa-empty-graph.svg
diff --git a/src/bundle/Resources/public/js/scripts/core/doughnut.chart.js b/src/bundle/Resources/public/js/scripts/core/doughnut.chart.js
@@ -1,15 +1,56 @@
-(function (global, doc, ibexa) {
+(function (global, doc, ibexa, ChartDataLabels) {
+    const doughnutOptions = {
+        plugins: {
+            datalabels: {
+                color: '#FFFFFF',
+                font: {
+                    weight: 'bold',
+                    size: 18,
+                },
+                formatter: (value, context) => {
+                    const sum = context.dataset.data.reduce((acc, curValue) => acc + curValue, 0);
+                    const percentage = (value / sum) * 100;
+
+                    return `${Math.floor(percentage)}%`;
+                },
+            },
+        },
+    };
+    const doughnutPlugins = [ChartDataLabels];
+
     class DoughnutChart extends ibexa.core.BaseChart {
         constructor(data, options = {}, plugins = []) {
             super(data, options, plugins);
 
+            this.setOptions(options);
             this.type = 'doughnut';
+
+            this.initialize(data.ref);
+        }
+
+        initialize(ref) {
+            ref.classList.add('ibexa-chart--doughnut');
         }
 
         getType() {
             return this.type;
         }
+
+        setOptions(options) {
+            super.setOptions(options);
+
+            this.options.plugins = {
+                ...this.options.plugins,
+                ...doughnutOptions.plugins,
+            };
+        }
+
+        setPlugins(plugins) {
+            super.setPlugins(plugins);
+
+            this.plugins = [...doughnutPlugins, ...this.plugins];
+        }
     }
 
     ibexa.addConfig('core.chart.DoughnutChart', DoughnutChart);
-})(window, window.document, window.ibexa);
+})(window, window.document, window.ibexa, window.ChartDataLabels);
diff --git a/src/bundle/Resources/public/scss/_chart.scss b/src/bundle/Resources/public/scss/_chart.scss
@@ -1,4 +1,6 @@
 .ibexa-chart {
+    $self: &;
+
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -8,6 +10,14 @@
     padding: calculateRem(16px) calculateRem(32px);
     box-shadow: $ibexa-edit-header-box-shadow;
 
+    &--doughnut {
+        padding: calculateRem(24px) calculateRem(32px) calculateRem(32px);
+
+        #{$self}__body {
+            padding: calculateRem(36px) 0;
+        }
+    }
+
     &--no-data {
         .ibexa-chart {
             &__canvas,

diff --git a/src/bundle/Resources/views/themes/admin/ui/empty_chart.html.twig b/src/bundle/Resources/views/themes/admin/ui/empty_chart.html.twig
@@ -2,7 +2,7 @@
     <div class="ibexa-chart-no-data__wrapper">
         <img
             class="ibexa-chart-no-data__img"
-            src="{{ asset('/bundles/ibexaadminui/img/ibexa-empty-table.svg') }}"
+            src="{{ asset('/bundles/ibexaadminui/img/ibexa-empty-graph.svg') }}"
             alt="{{ 'dashboard.charts.no_results'|trans|desc('No results found') }}"
         />
         <span class="ibexa-chart-no-data__label">{{ 'dashboard.charts.no_results'|trans|desc('No results found') }}</span>

diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig
@@ -114,6 +114,7 @@
         <script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
         <script src="{{ asset('assets/translations/config.js') }}"></script>
         <script src="{{ asset('bundles/ibexaadminuiassets/vendors/chart-js/dist/chart.umd.js') }}"></script>
+        <script src="{{ asset('bundles/ibexaadminuiassets/vendors/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js') }}"></script>
         <script src="{{ asset('bundles/ibexaadminuiassets/vendors/js-md5/build/md5.min.js') }}"></script>
     </head>
     <body class="{% block body_class %}ibexa-theme {% if ibexa_is_focus_mode_on() %}ibexa-theme--dark{% endif %}{% endblock %}">