N°3685 - Front-end performances: Include graph lib. (D3/C3.js) only when necessary

This commit is contained in:
Molkobain
2021-09-09 17:26:18 +02:00
parent df189bd1f2
commit 15081ba82c
4 changed files with 70 additions and 3 deletions

View File

@@ -202,6 +202,24 @@ abstract class Dashlet
$this->OnUpdate();
}
/**
* @return array Rel. path to the app. root of the JS files required by the dashlet
* @since 3.0.0
*/
public function GetJSFilesRelPaths(): array
{
return [];
}
/**
* @return array Rel. path to the app. root of the CSS files required by the dashlet
* @since 3.0.0
*/
public function GetCSSFilesRelPaths(): array
{
return [];
}
/**
* @param \WebPage $oPage
* @param bool $bEditMode
@@ -224,6 +242,9 @@ abstract class Dashlet
$oDashletContainer->AddCSSClasses($this->aCSSClasses);
}
$oDashletContainer->AddMultipleJsFilesRelPaths($this->GetJSFilesRelPaths());
$oDashletContainer->AddMultipleCssFilesRelPaths($this->GetCSSFilesRelPaths());
try {
if (get_class($this->oModelReflection) == 'ModelReflectionRuntime') {
$oBlock = $this->Render($oPage, $bEditMode, $aExtraParams);
@@ -1674,6 +1695,33 @@ class DashletGroupByPie extends DashletGroupBy
);
}
/**
* @inheritDoc
*/
public function GetJSFilesRelPaths(): array
{
return array_merge(
parent::GetJSFilesRelPaths(),
[
'js/d3.js',
'js/c3.js',
]
);
}
/**
* @inheritDoc
*/
public function GetCSSFilesRelPaths(): array
{
return array_merge(
parent::GetCSSFilesRelPaths(),
[
'css/c3.min.css',
]
);
}
/**
* @inheritdoc
*/

View File

@@ -661,6 +661,12 @@ EOF
$sCreated = json_encode(Dict::Format('UI:CSVImportCreated_items', $iCreated));
$sModified = json_encode(Dict::Format('UI:CSVImportModified_items', $iModified));
$sUnchanged = json_encode(Dict::Format('UI:CSVImportUnchanged_items', $iUnchanged));
// Add graphs dependencies
$oPage->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/c3.min.css');
$oPage->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/d3.js');
$oPage->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/c3.js');
$oPage->add_script(
<<< EOF
function CSVGoBack()

View File

@@ -537,6 +537,11 @@ function DisplayRelatedClassesGraph($oPage, $sClass)
// 3) Processing data and building graph
//
// - Add graphs dependencies
$oPage->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/c3.min.css');
$oPage->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/d3.js');
$oPage->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/c3.js');
// - Add markup
$oPage->add(
<<<EOF
<div id="dataModelGraph">
@@ -545,6 +550,7 @@ function DisplayRelatedClassesGraph($oPage, $sClass)
</div>
EOF
);
// - Add scripts
$oPage->add_ready_script(
<<<JS

View File

@@ -35,6 +35,16 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
/** @var string DEFAULT_BREADCRUMB_ENTRY_ICON_TYPE */
const DEFAULT_BREADCRUMB_ENTRY_ICON_TYPE = self::ENUM_BREADCRUMB_ENTRY_ICON_TYPE_IMAGE;
/** @inheritDoc */
protected const COMPATIBILITY_LINKED_SCRIPTS_REL_PATH = [
'js/d3.js',
'js/c3.js',
];
/** @inheritDoc */
protected const COMPATIBILITY_LINKED_STYLESHEETS_REL_PATH = [
'css/c3.min.css',
];
/** @var string DEFAULT_PAGE_TEMPLATE_REL_PATH The relative path (from <ITOP>/templates/) to the default page template */
const DEFAULT_PAGE_TEMPLATE_REL_PATH = 'pages/backoffice/itopwebpage/layout';
@@ -146,8 +156,6 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/icon_select.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/raphael-min.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/selectize.min.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/d3.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/c3.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery.multiselect.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/ajaxfileupload.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery.mousewheel.js');
@@ -196,7 +204,6 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
// TODO 3.0.0: Add only what's necessary
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/jquery-ui-timepicker-addon.css');
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/magnific-popup.css');
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/c3.min.css');
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'node_modules/tippy.js/dist/tippy.css');
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'node_modules/tippy.js/animations/shift-away-subtle.css');
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/font-awesome/css/all.min.css');