#5107 Upgrade Chart.js to v.4

modules/boonex/charts/classes/BxChartsCron.php

@@ -38,9 +38,9 @@ class BxChartsCron extends BxDolCron
         $this->_oModule->_oDb->clearTopByLikes();
         foreach($aModules as $sModule){
             $oModule = BxDolModule::getInstance($sModule);
-            if(isset($oModule->_oConfig->CNF['OBJECT_VOTES'])){
-                $sSystem = $oModule->_oConfig->CNF['OBJECT_VOTES'];
-                if(empty($sSystem))
+            if(!empty($oModule->_oConfig->CNF['OBJECT_REACTIONS'])){
+                $sSystem = $oModule->_oConfig->CNF['OBJECT_REACTIONS'];
+                if(empty($sSystem) || empty($aSystems[$sSystem]['table_track']))
                     continue;
                 $this->_oModule->_oDb->saveTopByLikes($sModule, $aSystems[$sSystem]['table_track']);
             }

modules/boonex/charts/classes/BxChartsModule.php

@@ -234,7 +234,25 @@ class BxChartsModule extends BxDolModule
                 array_push($aValues['links'], $oModule->serviceGetLink($aValue['object_id']));
             }
             $aValues['colors'] = array_slice($this->aColors, 0, count($aValues['values']));
-            echo  '{"type": "doughnut", "data":{"labels":' . json_encode($aValues['labels']) . ',"datasets":[{"data":' . json_encode($aValues['values']) . ',"backgroundColor":' . json_encode($aValues['colors']) . '}]}, "options": {"legend": {"position": "bottom"}}, "links": ' . json_encode($aValues['links']) . '}';
+
+            echo json_encode([
+                "type" => "doughnut", 
+                "data" => [
+                    "labels" => $aValues['labels'],
+                    "datasets" => [[
+                        "data" => $aValues['values'],
+                        "backgroundColor" => $aValues['colors'],
+                    ]],
+                ], 
+                "options" => [
+                    "plugins" => [
+                        "legend" => [
+                            "position" => "bottom",
+                        ],
+                    ],
+                ], 
+                "links" => $aValues['links'],
+            ]);
         }
         
         if ($Id == 'MostActiveProfiles'){
@@ -247,7 +265,35 @@ class BxChartsModule extends BxDolModule
                 array_push($aValues['values2'], $aValue['views_count']);
                 array_push($aValues['links'], $oModule->serviceGetLink($aValue['object_id']));
             }
-            echo  '{"type":"horizontalBar",  "data": {"labels":' . json_encode($aValues['labels']) . ',"datasets": [{"label": "' . _t('_bx_charts_most_active_profiles_legend_posts') . '","backgroundColor": "' . $this->aColors[0] . '","borderColor": "' . $this->aColors[0] . '","borderWidth": 1,"data": ' . json_encode($aValues['values1']) . '}, {"label": "' . _t('_bx_charts_most_active_profiles_legend_views') . '","backgroundColor": "' . $this->aColors[1] . '","borderColor":"' . $this->aColors[1] . '","borderWidth": 1,"data": ' . json_encode($aValues['values2']) . '}]}, "options": {"legend": {"position": "bottom"}}, "links": ' . json_encode($aValues['links']) . '}';
+            echo json_encode([
+                "type" => "bar",
+                "data" => [
+                    "labels" => $aValues['labels'],
+                    "datasets" => [
+                        [
+                            "label" => _t('_bx_charts_most_active_profiles_legend_posts'),
+                            "backgroundColor" => $this->aColors[0],
+                            "borderColor" => $this->aColors[0],
+                            "borderWidth" => 1,
+                            "data" => $aValues['values1'],
+                        ], [
+                            "label" => _t('_bx_charts_most_active_profiles_legend_views'),
+                            "backgroundColor" => $this->aColors[1],
+                            "borderColor" => $this->aColors[1],
+                            "borderWidth" => 1,
+                            "data" => $aValues['values2'],
+                        ]
+                    ]
+                ],
+                "options" => [
+                    "plugins" => [
+                        "legend" => [
+                            "position" => "bottom",
+                        ],
+                    ],
+                ], 
+                "links" => $aValues['links'],
+            ]);
         }
         
         if ($Id == 'MostFollowedProfiles'){
@@ -259,7 +305,27 @@ class BxChartsModule extends BxDolModule
                 array_push($aValues['values'], $aValue['followers_count']);
                 array_push($aValues['links'], $oModule->serviceGetLink($aValue['object_id']));
             }
-            echo  '{"type":"horizontalBar",  "data": {"labels":' . json_encode($aValues['labels']) . ',"datasets": [{"label": "' . _t('_bx_charts_most_followed_profiles_legend') . '","backgroundColor": "' . $this->aColors[0] . '","borderColor": "' . $this->aColors[0] . '","borderWidth": 1,"data": ' . json_encode($aValues['values']) . '}]}, "options": {"legend": {"position": "bottom"}}, "links": ' . json_encode($aValues['links']) . '}';
+            echo  json_encode([
+                "type" => "bar",
+                "data" => [
+                    "labels" => $aValues['labels'],
+                    "datasets" => [[
+                        "label" => _t('_bx_charts_most_followed_profiles_legend'),
+                        "backgroundColor" => $this->aColors[0],
+                        "borderColor" => $this->aColors[0],
+                        "borderWidth" => 1,
+                        "data" => $aValues['values'],
+                    ]], 
+                ],
+                "options" => [
+                    "plugins" => [
+                        "legend" => [
+                            "position" => "bottom",
+                        ],
+                    ],
+                ], 
+                "links" => $aValues['links'],
+            ]);
         }
         
         if ($Id == 'GrowthByModules'){
@@ -278,8 +344,6 @@ class BxChartsModule extends BxDolModule
             $aData = $this->_oDb->getGrowth($sTableName);
             $aTmp2 = $this->_oDb->getGrowthInitValue($sTableName); 
             $iValuePrev = $aTmp2[0]; 
-            $iMinTime = $aTmp2[1] * 1000; 
-            $iMaxTime = time() * 1000; 
             $sGroupBy = getParam('bx_charts_chart_growth_group_by');
             foreach ($aData as $aValue) {
                 $aValue['count1'] = $iValuePrev + $aValue['count'];
@@ -288,8 +352,42 @@ class BxChartsModule extends BxDolModule
                 array_push($aValues['values2'], array('x' => $iX, 'y' => $aValue['count']));
                 $iValuePrev = $aValue['count1'];
             }
-            
-            echo  '{"type":"line",  "data": {"datasets": [{"label": "' . $sModuleTitle . ':' . _t('_bx_charts_growth_speed_legend') . '","fill": "false","backgroundColor": "' . $this->aColors[2] . '","borderColor":"' . $this->aColors[2] . '","borderWidth": 1,"data": ' . json_encode($aValues['values2']) . '}, {"label": "' . $sModuleTitle . ':' . _t('_bx_charts_growth_legend') . '","fill": "false","backgroundColor": "' . $this->aColors[3] . '","borderColor": "' . $this->aColors[3] . '","borderWidth": 1,"data": ' . json_encode($aValues['values1']) . '}]}, "options": {"legend": {"position": "bottom"},"scales": {"xAxes": [{"type": "time", "time": {"tooltipFormat": "DD.MM.YYYY", "unit" : "' . ($sGroupBy == 'month' ? 'month' : 'day') . '"}, "ticks": {"min": "' . $iMinTime . '", "max": "' . $iMaxTime . '", "autoSkip": "true"}, "display": "true", "distribution": "linear"}]}}}';
+
+            echo json_encode([
+                "type" => "line",
+                "data" => [
+                    "datasets" => [[
+                        "label" => $sModuleTitle . ':' . _t('_bx_charts_growth_speed_legend'),
+                        "fill" => false,
+                        "backgroundColor" => $this->aColors[2],
+                        "borderColor" => $this->aColors[2],
+                        "borderWidth" => 1,
+                        "data" => $aValues['values2'],
+                    ], [
+                        "label" => $sModuleTitle . ':' . _t('_bx_charts_growth_legend'),
+                        "fill" => false,
+                        "backgroundColor" => $this->aColors[3],
+                        "borderColor" => $this->aColors[3],
+                        "borderWidth" => 1,
+                        "data" => $aValues['values1'],
+                    ]]
+                ], 
+                "options" => [
+                    "plugins" => [
+                        "legend" => [
+                            "position" => "bottom",
+                        ],
+                    ],
+                    "scales" => [
+                        "x" => [
+                            "type" => "time", 
+                            "time" => [
+                                "unit" => $sGroupBy == 'month' ? 'month' : 'day',
+                            ],
+                        ]
+                    ]
+                ]
+            ]);
         }
     }
     

modules/boonex/charts/classes/BxChartsTemplate.php

@@ -43,7 +43,7 @@ class BxChartsTemplate extends BxBaseModGeneralTemplate
     
     function getChart($sChartName, $iHeight)
     {
-        $this->addJs(array('chart.min.js', 'chart.js'));
+        $this->addJs(array('chart.umd.min.js', 'chartjs-adapter-moment.min.js', 'chart.js'));
         $this->addCss(array('chart.css'));
         return $this->getJsCode('chart', array('chartName' => $sChartName)) . $this->parseHtmlByName('chart.html', array('chart_name' => $sChartName, 'height' => $iHeight));
     }

modules/boonex/charts/js/chart.js

@@ -13,7 +13,15 @@ function BxCharts(oOptions) {
     this._sChartName = oOptions.sChartName == undefined ? '' : oOptions.sChartName;
     this._sActionsUri = oOptions.sActionUri;
     this._sKeyGraph = 'bx_chart_growth_graph_' + this._sChartName;
-    this._oChartOptionsDefault = {  };
+    this._oChartOptionsDefault = { layout: { 
+        autoPadding: true, 
+        padding: {
+            left: 40,
+            right: 40,
+            top: 40,
+            bottom: 20
+        }
+    }};
     var $this = this;
     $(document).ready(function () {
         $this.loadData();
@@ -28,7 +36,7 @@ BxCharts.prototype.loadData = function () {
     var sAdditionalParameters = "";
     if ($('.bx_chart_growth_selector_' + this._sChartName).length > 0) {
         sAdditionalParameters = '?m=' + $('.bx_chart_growth_selector_' + this._sChartName).val();
-        $('.bx_chart_growth_selector_' + this._sChartName).change(function () {
+        $('.bx_chart_growth_selector_' + this._sChartName).off().change(function () {
             $this.loadData();
         });
     }
@@ -51,27 +59,12 @@ BxCharts.prototype.loadData = function () {
     	    }
 
     	    if (oData.links) {
-    	        Chart.defaults.doughnut.legend.onClick = function (e, legendItem) {
-    	            var iIndex = $this._oChart.data.datasets[0].backgroundColor.indexOf(legendItem.fillStyle);
-    	            if (iIndex && oData.links[iIndex] && oData.links[iIndex] != "") {
-    	                location.href = oData.links[iIndex];
-    	            }
+    	        oData.options.plugins.legend.onClick = function (e, legendItem, legend) {
+                    if (legendItem.index != undefined)
+                        window.open(oData.links[legendItem.index], '_blank');
     	        };
     	    }
 
-    	    Chart.defaults.doughnut.tooltips.callbacks.label = function (tooltipItem, data) {
-    	        return data.labels[tooltipItem.index];
-    	    };
-
-    	    Chart.defaults.global.layout  = {
-    	        padding: {
-    	                left: 40,
-    	                right: 40,
-    	                top: 40,
-    	                bottom: 20
-    	        }
-    	    }
-
     	    var oDataForChart = oData.data || false;
     	    var oChartOptions = oData.options || {};
     	    if ($this._oChart)
@@ -85,18 +78,14 @@ BxCharts.prototype.loadData = function () {
 
     	    if (oData.links) {
     	        oGraph.click(function (evt) {
-    	            var activePoint = $this._oChart.getElementAtEvent(evt)[0];
-    	            if (activePoint) {
-    	                var oDataChart = activePoint._chart.data;
-    	                var iDatasetIndex = activePoint._datasetIndex;
-    	                var sLabel = oDataChart.datasets[iDatasetIndex].label;
-    	                var sValue = oDataChart.datasets[iDatasetIndex].data[activePoint._index];
-    	                var sLink = oData.links[activePoint._index];
-    	                if (sLink != "")
-    	                    location.href = sLink;
+    	            var activePoint = $this._oChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
+    	            if (activePoint && activePoint.length) {
+    	                var sLink = oData.links[activePoint[0].index];
+    	                if (sLink != undefined && sLink != "")
+    	                    window.open(sLink, '_blank');
     	            }
     	        });
-    	    }
+            }
     	},
     	'json'
     );

package.json

@@ -8,9 +8,10 @@
     "@stripe/connect-js": "^3.3.23",
     "at.js": "^1.5.4",
     "autosize": "^6.0.1",
-    "chart.js": "^3.9.1",
+    "chart.js": "^4.5.0",
+    "chartjs-adapter-moment": "^1.0.1",
     "clipboard": "^2.0.11",
-    "codemirror": "^5.65.18",
+    "codemirror": "^5.65.19",
     "croppie": "^2.6.5",
     "dashjs": "^5.0.3",
     "fancybox": "^3.0.1",
@@ -118,7 +119,7 @@
     "build:theia-sticky-sidebar": "mkdir -p plugins_public/theia-sticky-sidebar; cd plugins_public/theia-sticky-sidebar; cp -r ../../node_modules/theia-sticky-sidebar/dist/* .",
     "build:timepicker-addon": "mkdir -p plugins_public/timepicker-addon; cd plugins_public/timepicker-addon; cp -r ../../node_modules/jquery-ui-timepicker-addon/dist/* .",
     "build:autosize": "cp node_modules/autosize/dist/autosize.min.js plugins_public",
-    "build:chart.js": "cp node_modules/chart.js/dist/chart.min.js plugins_public",
+    "build:chart.js": "cp node_modules/chart.js/dist/chart.umd.min.js plugins_public; cp node_modules/chartjs-adapter-moment/dist/chartjs-adapter-moment.min.js plugins_public",
     "build:clipboard": "cp node_modules/clipboard/dist/clipboard.min.js plugins_public",
     "build:embedly-player": "cp node_modules/player.js/dist/player-0.1.0.min.js plugins_public/embedly-player.min.js",
     "build:hammerjs": "cp node_modules/@egjs/hammerjs/dist/hammer.min.js plugins_public",

yarn.lock

@@ -125,6 +125,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.4.tgz#4d4ff677e1609214fc71c580125ddddd86abcabf"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
 "@napi-rs/canvas-android-arm64@0.1.73":
   version "0.1.73"
   resolved "https://registry.yarnpkg.com/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.73.tgz#b16bea8531c865db7e5f5747070183487eedeaf6"
@@ -780,10 +785,17 @@ chalk@^5.4.1:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.4.1.tgz#1b48bf0963ec158dce2aacf69c093ae2dd2092d8"
   integrity sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==
 
-chart.js@^3.9.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
-  integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
+chart.js@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.5.0.tgz#11a1ef6c4befc514b1b0b613ebac226c4ad2740b"
+  integrity sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
+chartjs-adapter-moment@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102"
+  integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==
 
 chokidar@^3.6.0:
   version "3.6.0"
@@ -872,7 +884,7 @@ codemirror@5.63.0:
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.63.0.tgz#070a699108badd9c118b7261ac2e9793acdbb149"
   integrity sha512-KlLWRPggDg2rBD1Mx7/EqEhaBdy+ybBCVh/efgjBDsPpMeEu6MbTAJzIT4TuCzvmbTEgvKOGzVT6wdBTNusqrg==
 
-codemirror@^5.65.18:
+codemirror@^5.65.19:
   version "5.65.19"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.19.tgz#71016c701d6a4b6e1982b0f6e7186be65e49653d"
   integrity sha512-+aFkvqhaAVr1gferNMuN8vkTSrWIFvzlMV9I2KBLCWS2WpZ2+UAkZjlMZmEuT+gcXTi6RrGQCkWq1/bDtGqhIA==