fixed CV in console mobile metaconsole #8676

This commit is contained in:
Daniel Barbero Martin 2022-03-15 18:12:01 +01:00
parent a310194f5d
commit 6c4d2f2b31
7 changed files with 172 additions and 193 deletions

View File

@ -4540,41 +4540,50 @@ function visual_map_load_client_resources()
}
function css_label_styles_visual_console($uniq, $ratio_t=1)
/**
* Labels styles visual console.
*
* @param string $uniq Uniq str.
* @param integer $ratio Ratio.
*
* @return string Css output.
*/
function css_label_styles_visual_console($uniq, $ratio=1)
{
$output = '';
// Horrible trick! due to the use of tinyMCE
// it is necessary to modify specific classes of each
// of the visual consoles.
$output .= '.c-'.$uniq.' a {color: #3f3f3f } ';
$output .= '.c-'.$uniq.' .label p strong span {display: inline-block !important;} ';
$output .= '.c-'.$uniq.' *:not(.parent_graph p table tr td span) { font-size: '.(8 * $ratio_t).'pt; line-height:'.(8 * ($ratio_t)).'pt; }';
$output .= '.c-'.$uniq.' .visual_font_size_4pt, .c-'.$uniq.' .visual_font_size_4pt * { font-size: '.(4 * $ratio_t).'pt !important; line-height:'.(4 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_6pt, .c-'.$uniq.' .visual_font_size_6pt * { font-size: '.(6 * $ratio_t).'pt !important; line-height:'.(6 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_8pt, .c-'.$uniq.' .visual_font_size_8pt * { font-size: '.(8 * $ratio_t).'pt !important; line-height:'.(8 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_10pt, .c-'.$uniq.' .visual_font_size_10pt * { font-size: '.(10 * $ratio_t).'pt !important; line-height:'.(10 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_12pt, .c-'.$uniq.' .visual_font_size_12pt * { font-size: '.(12 * $ratio_t).'pt !important; line-height:'.(12 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_14pt, .c-'.$uniq.' .visual_font_size_14pt * { font-size: '.(14 * $ratio_t).'pt !important; line-height:'.(14 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_18pt, .c-'.$uniq.' .visual_font_size_18pt * { font-size: '.(18 * $ratio_t).'pt !important; line-height:'.(18 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_24pt, .c-'.$uniq.' .visual_font_size_24pt * { font-size: '.(24 * $ratio_t).'pt !important; line-height:'.(24 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_28pt, .c-'.$uniq.' .visual_font_size_28pt * { font-size: '.(28 * $ratio_t).'pt !important; line-height:'.(28 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_36pt, .c-'.$uniq.' .visual_font_size_36pt * { font-size: '.(36 * $ratio_t).'pt !important; line-height:'.(36 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_48pt, .c-'.$uniq.' .visual_font_size_48pt * { font-size: '.(48 * $ratio_t).'pt !important; line-height:'.(48 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_60pt, .c-'.$uniq.' .visual_font_size_60pt * { font-size: '.(60 * $ratio_t).'pt !important; line-height:'.(60 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_72pt, .c-'.$uniq.' .visual_font_size_72pt * { font-size: '.(72 * $ratio_t).'pt !important; line-height:'.(72 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_84pt, .c-'.$uniq.' .visual_font_size_84pt * { font-size: '.(84 * $ratio_t).'pt !important; line-height:'.(84 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_96pt, .c-'.$uniq.' .visual_font_size_96pt * { font-size: '.(96 * $ratio_t).'pt !important; line-height:'.(96 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_116pt, .c-'.$uniq.' .visual_font_size_116pt * { font-size: '.(116 * $ratio_t).'pt !important; line-height:'.(116 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_128pt, .c-'.$uniq.' .visual_font_size_128pt * { font-size: '.(128 * $ratio_t).'pt !important; line-height:'.(128 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_140pt, .c-'.$uniq.' .visual_font_size_140pt * { font-size: '.(140 * $ratio_t).'pt !important; line-height:'.(140 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_154pt, .c-'.$uniq.' .visual_font_size_154pt * { font-size: '.(154 * $ratio_t).'pt !important; line-height:'.(154 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_196pt, .c-'.$uniq.' .visual_font_size_196pt * { font-size: '.(196 * $ratio_t).'pt !important; line-height:'.(196 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .flot-text, .c-'.$uniq.' .flot-text * { font-size: '.(8 * $ratio_t).'pt !important; line-height:'.(8 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.time {font-size: '.(50 * $ratio_t).'px !important; line-height: '.(50 * $ratio_t).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.date {font-size: '.(25 * $ratio_t).'px !important; line-height: '.(25 * $ratio_t).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.timezone {font-size: '.(25 * $ratio_t).'px !important; line-height: '.(25 * $ratio_t).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .donut-graph * {font-size: '.(8 * $ratio_t).'px !important; line-height: '.(8 * $ratio_t).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .donut-graph g rect {width:'.(25 * $ratio_t).' !important; height: '.(15 * $ratio_t).' !important;}';
$output .= '.c-'.$uniq.' .label p strong span {display: inline-block !important; line-height: normal !important} ';
$output .= '.c-'.$uniq.' *:not(.parent_graph p table tr td span) { font-size: '.(8 * $ratio).'pt; line-height:'.(8 * ($ratio)).'pt; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td { padding: 0; margin: 0; }';
$output .= '.c-'.$uniq.' .visual_font_size_4pt, .c-'.$uniq.' .visual_font_size_4pt * { font-size: '.(4 * $ratio).'pt !important; line-height:'.(4 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_6pt, .c-'.$uniq.' .visual_font_size_6pt * { font-size: '.(6 * $ratio).'pt !important; line-height:'.(6 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_8pt, .c-'.$uniq.' .visual_font_size_8pt * { font-size: '.(8 * $ratio).'pt !important; line-height:'.(8 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_10pt, .c-'.$uniq.' .visual_font_size_10pt * { font-size: '.(10 * $ratio).'pt !important; line-height:'.(10 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_12pt, .c-'.$uniq.' .visual_font_size_12pt * { font-size: '.(12 * $ratio).'pt !important; line-height:'.(12 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_14pt, .c-'.$uniq.' .visual_font_size_14pt * { font-size: '.(14 * $ratio).'pt !important; line-height:'.(14 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_18pt, .c-'.$uniq.' .visual_font_size_18pt * { font-size: '.(18 * $ratio).'pt !important; line-height:'.(18 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_24pt, .c-'.$uniq.' .visual_font_size_24pt * { font-size: '.(24 * $ratio).'pt !important; line-height:'.(24 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_28pt, .c-'.$uniq.' .visual_font_size_28pt * { font-size: '.(28 * $ratio).'pt !important; line-height:'.(28 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_36pt, .c-'.$uniq.' .visual_font_size_36pt * { font-size: '.(36 * $ratio).'pt !important; line-height:'.(36 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_48pt, .c-'.$uniq.' .visual_font_size_48pt * { font-size: '.(48 * $ratio).'pt !important; line-height:'.(48 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_60pt, .c-'.$uniq.' .visual_font_size_60pt * { font-size: '.(60 * $ratio).'pt !important; line-height:'.(60 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_72pt, .c-'.$uniq.' .visual_font_size_72pt * { font-size: '.(72 * $ratio).'pt !important; line-height:'.(72 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_84pt, .c-'.$uniq.' .visual_font_size_84pt * { font-size: '.(84 * $ratio).'pt !important; line-height:'.(84 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_96pt, .c-'.$uniq.' .visual_font_size_96pt * { font-size: '.(96 * $ratio).'pt !important; line-height:'.(96 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_116pt, .c-'.$uniq.' .visual_font_size_116pt * { font-size: '.(116 * $ratio).'pt !important; line-height:'.(116 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_128pt, .c-'.$uniq.' .visual_font_size_128pt * { font-size: '.(128 * $ratio).'pt !important; line-height:'.(128 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_140pt, .c-'.$uniq.' .visual_font_size_140pt * { font-size: '.(140 * $ratio).'pt !important; line-height:'.(140 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_154pt, .c-'.$uniq.' .visual_font_size_154pt * { font-size: '.(154 * $ratio).'pt !important; line-height:'.(154 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_196pt, .c-'.$uniq.' .visual_font_size_196pt * { font-size: '.(196 * $ratio).'pt !important; line-height:'.(196 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .flot-text, .c-'.$uniq.' .flot-text * { font-size: '.(8 * $ratio).'pt !important; line-height:'.(8 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.time {font-size: '.(50 * $ratio).'px !important; line-height: '.(50 * $ratio).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.date {font-size: '.(25 * $ratio).'px !important; line-height: '.(25 * $ratio).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.timezone {font-size: '.(25 * $ratio).'px !important; line-height: '.(25 * $ratio).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .donut-graph * {font-size: '.(8 * $ratio).'px !important; line-height: '.(8 * $ratio).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .donut-graph g rect {width:'.(25 * $ratio).' !important; height: '.(15 * $ratio).' !important;}';
return $output;
}

View File

@ -1215,56 +1215,43 @@ function dashboardLoadVC(settings) {
// Add the datetime when the item was received.
var receivedAt = new Date();
var beforeUpdate = function() {};
if (settings.mobile == undefined || settings.mobile !== true) {
beforeUpdate = function(items, visualConsole, props) {
// Add the datetime when the item was received.
items.map(function(item) {
item["receivedAt"] = receivedAt;
return item;
});
var beforeUpdate = function(items, visualConsole, props) {
var ratio_visualconsole = props.height / props.width;
var ratio_w = settings.size.width / props.width;
var ratio_h = settings.size.height / props.height;
props.width = settings.size.width;
props.height = settings.size.width * ratio_visualconsole;
var ratio = ratio_w;
if (settings.mobile != undefined && settings.mobile === true) {
if (props.height < props.width) {
if (props.height > settings.size.height) {
ratio = ratio_h;
props.height = settings.size.height;
props.width = settings.size.height / ratio_visualconsole;
}
// Update the data structure.
visualConsole.props = props;
// Update the items.
visualConsole.updateElements(items);
};
}
} else {
beforeUpdate = function(items, visualConsole, props) {
var ratio_visualconsole = props.height / props.width;
var ratio_t = settings.size.width / props.width;
var ratio_h = settings.size.height / props.height;
props.width = settings.size.width;
props.height = settings.size.width * ratio_visualconsole;
if (props.height > settings.size.height) {
ratio_t = ratio_h;
ratio = ratio_h;
props.height = settings.size.height;
props.width = settings.size.height / ratio_visualconsole;
}
}
$.ajax({
method: "post",
url: "../ajax.php",
url: settings.baseUrl + "ajax.php",
data: {
page: settings.page,
load_css_cv: 1,
uniq: settings.cellId,
ratio: ratio_t
uniq: settings.uniq,
ratio: ratio
},
dataType: "html",
success: function(css) {
$("#css_cv_" + settings.cellId)
$("#css_cv_" + settings.uniq)
.empty()
.append(css);
@ -1280,6 +1267,7 @@ function dashboardLoadVC(settings) {
// Update the items.
visualConsole.updateElements(items);
if (settings.mobile != undefined && settings.mobile === true) {
// Update Url.
var regex = /(id=|id_visual_console=|id_layout=|id_visualmap=)\d+(&?)/gi;
var replacement = "$1" + props.id + "$2";
@ -1300,13 +1288,13 @@ function dashboardLoadVC(settings) {
props.id;
});
}
}
},
error: function(error) {
console.error(error);
}
});
};
}
var handleUpdate = function() {
//Remove spinner change VC.
@ -1342,7 +1330,10 @@ function dashboardLoadVC(settings) {
beforeUpdate,
settings.size,
settings.id_user,
settings.hash
settings.hash,
settings.mobile != undefined && settings.mobile === true
? "mobile"
: "dashboard"
);
}

View File

@ -33,7 +33,8 @@ function createVisualConsole(
beforeUpdate,
size,
id_user,
hash
hash,
mode = ""
) {
if (container == null || props == null || items == null) return null;
if (baseUrl == null) baseUrl = "";
@ -53,6 +54,7 @@ function createVisualConsole(
size,
id_user,
hash,
mode,
function(error, data) {
if (error) {
//Remove spinner change VC.
@ -670,7 +672,15 @@ function createVisualConsole(
* @return {Object} Cancellable. Object which include and .abort([statusText]) function.
*/
// eslint-disable-next-line no-unused-vars
function loadVisualConsoleData(baseUrl, vcId, size, id_user, hash, callback) {
function loadVisualConsoleData(
baseUrl,
vcId,
size,
id_user,
hash,
mode,
callback
) {
// var apiPath = baseUrl + "/include/rest-api";
var apiPath = baseUrl + "/ajax.php";
var vcJqXHR = null;
@ -759,6 +769,7 @@ function loadVisualConsoleData(baseUrl, vcId, size, id_user, hash, callback) {
visualConsoleId: vcId,
id_user: typeof id_user == undefined ? id_user : null,
auth_hash: typeof hash == undefined ? hash : null,
mode: mode,
widthScreen: widthScreen
},
"json"

View File

@ -379,23 +379,8 @@ class MapsMadeByUser extends Widget
$size['width'] = ($size['width'] + 30);
$ratio = $visualConsole->adjustToViewport($size, 'dashboard');
$visualConsoleData = $visualConsole->toArray();
$ratio_visualconsole = ($visualConsoleData['height'] / $visualConsoleData['width']);
$ratio_t = ($size['width'] / $visualConsoleData['width']);
$radio_h = ($size['height'] / $visualConsoleData['height']);
$visualConsoleData['width'] = $size['width'];
$visualConsoleData['height'] = ($size['width'] * $ratio_visualconsole);
if ($visualConsoleData['height'] > $size['height']) {
$ratio_t = $radio_h;
$visualConsoleData['height'] = $size['height'];
$visualConsoleData['width'] = ($size['height'] / $ratio_visualconsole);
}
$groupId = $visualConsoleData['groupId'];
$visualConsoleName = $visualConsoleData['name'];
$uniq = uniqid();
@ -435,68 +420,16 @@ class MapsMadeByUser extends Widget
$visualConsoleItems = VisualConsole::getItemsFromDB(
$this->values['vcId'],
$aclUserGroups,
$ratio_t
$ratio
);
// Horrible trick! due to the use of tinyMCE
// it is necessary to modify specific classes of each
// of the visual consoles.
$output .= '<style type="text/css">';
// $output .= '.c-'.$uniq.', .c-'.$uniq.' *:not(.parent_graph p table tr td span) { font-size: '.(8 * $ratio_t).'pt; line-height:'.(8 * ($ratio_t) * 1.5).'pt; }';
$output .= '.c-'.$uniq.' .visual-console-item div.label > strong { font-size: '.(8 * $ratio_t).'pt; line-height:'.(8 * ($ratio_t) * 1.5).'pt;}';
$output .= '.c-'.$uniq.' .visual-console-item div.label > strong > span { font-size: '.(10 * $ratio_t).'pt;}';
$output .= '.c-'.$uniq.' .visual-console-item div.label p { overflow:initial !important; margin:0px;}';
$output .= '.c-'.$uniq.' .visual-console-item div.label img { height: 100%; width: 100%; object-fit: contain;}';
$output .= '.c-'.$uniq.' .visual_font_size_4pt, .c-'.$uniq.' .visual_font_size_4pt * { font-size: '.(4 * $ratio_t).'pt !important; line-height:'.(4 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_6pt, .c-'.$uniq.' .visual_font_size_6pt * { font-size: '.(6 * $ratio_t).'pt !important; line-height:'.(6 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_8pt, .c-'.$uniq.' .visual_font_size_8pt * { font-size: '.(8 * $ratio_t).'pt !important; line-height:'.(8 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_10pt, .c-'.$uniq.' .visual_font_size_10pt * { font-size: '.(10 * $ratio_t).'pt !important; line-height:'.(10 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_12pt, .c-'.$uniq.' .visual_font_size_12pt * { font-size: '.(12 * $ratio_t).'pt !important; line-height:'.(12 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_14pt, .c-'.$uniq.' .visual_font_size_14pt * { font-size: '.(14 * $ratio_t).'pt !important; line-height:'.(14 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_18pt, .c-'.$uniq.' .visual_font_size_18pt * { font-size: '.(18 * $ratio_t).'pt !important; line-height:'.(18 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_24pt, .c-'.$uniq.' .visual_font_size_24pt * { font-size: '.(24 * $ratio_t).'pt !important; line-height:'.(24 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_28pt, .c-'.$uniq.' .visual_font_size_28pt * { font-size: '.(28 * $ratio_t).'pt !important; line-height:'.(28 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_36pt, .c-'.$uniq.' .visual_font_size_36pt * { font-size: '.(36 * $ratio_t).'pt !important; line-height:'.(36 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_48pt, .c-'.$uniq.' .visual_font_size_48pt * { font-size: '.(48 * $ratio_t).'pt !important; line-height:'.(48 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_60pt, .c-'.$uniq.' .visual_font_size_60pt * { font-size: '.(60 * $ratio_t).'pt !important; line-height:'.(60 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_72pt, .c-'.$uniq.' .visual_font_size_72pt * { font-size: '.(72 * $ratio_t).'pt !important; line-height:'.(72 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_84pt, .c-'.$uniq.' .visual_font_size_84pt * { font-size: '.(84 * $ratio_t).'pt !important; line-height:'.(84 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_96pt, .c-'.$uniq.' .visual_font_size_96pt * { font-size: '.(96 * $ratio_t).'pt !important; line-height:'.(96 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_116pt, .c-'.$uniq.' .visual_font_size_116pt * { font-size: '.(116 * $ratio_t).'pt !important; line-height:'.(116 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_128pt, .c-'.$uniq.' .visual_font_size_128pt * { font-size: '.(128 * $ratio_t).'pt !important; line-height:'.(128 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_140pt, .c-'.$uniq.' .visual_font_size_140pt * { font-size: '.(140 * $ratio_t).'pt !important; line-height:'.(140 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_154pt, .c-'.$uniq.' .visual_font_size_154pt * { font-size: '.(154 * $ratio_t).'pt !important; line-height:'.(154 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_196pt, .c-'.$uniq.' .visual_font_size_196pt * { font-size: '.(196 * $ratio_t).'pt !important; line-height:'.(196 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td p { overflow:initial !important; margin:0px; font-size: '.(10 * $ratio_t).'pt !important; line-height:'.(10 * $ratio_t * 1.5).'pt !important;}';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span { font-size: '.(10 * $ratio_t).'pt !important; line-height:'.(10 * $ratio_t * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_4pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_4pt * { font-size: '.(4 * $ratio_t).'pt !important; line-height:'.(4 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_6pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_6pt * { font-size: '.(6 * $ratio_t).'pt !important; line-height:'.(6 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_8pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_8pt * { font-size: '.(8 * $ratio_t).'pt !important; line-height:'.(8 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_10pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_10pt * { font-size: '.(10 * $ratio_t).'pt !important; line-height:'.(10 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_12pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_12pt * { font-size: '.(12 * $ratio_t).'pt !important; line-height:'.(12 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_14pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_14pt * { font-size: '.(14 * $ratio_t).'pt !important; line-height:'.(14 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_18pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_18pt * { font-size: '.(18 * $ratio_t).'pt !important; line-height:'.(18 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_24pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_24pt * { font-size: '.(24 * $ratio_t).'pt !important; line-height:'.(24 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_28pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_28pt * { font-size: '.(28 * $ratio_t).'pt !important; line-height:'.(28 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_36pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_36pt * { font-size: '.(36 * $ratio_t).'pt !important; line-height:'.(36 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_48pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_48pt * { font-size: '.(48 * $ratio_t).'pt !important; line-height:'.(48 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_60pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_60pt * { font-size: '.(60 * $ratio_t).'pt !important; line-height:'.(60 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_72pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_72pt * { font-size: '.(72 * $ratio_t).'pt !important; line-height:'.(72 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_84pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_84pt * { font-size: '.(84 * $ratio_t).'pt !important; line-height:'.(84 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_96pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_96pt * { font-size: '.(96 * $ratio_t).'pt !important; line-height:'.(96 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_116pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_116pt * { font-size: '.(116 * $ratio_t).'pt !important; line-height:'.(116 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_128pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_128pt * { font-size: '.(128 * $ratio_t).'pt !important; line-height:'.(128 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_140pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_140pt * { font-size: '.(140 * $ratio_t).'pt !important; line-height:'.(140 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_154pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_154pt * { font-size: '.(154 * $ratio_t).'pt !important; line-height:'.(154 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_196pt, .c-'.$uniq.' .visual-console-item-label table tr td span.visual_font_size_196pt * { font-size: '.(196 * $ratio_t).'pt !important; line-height:'.(196 * ($ratio_t) * 1.5).'pt !important; }';
$output .= '.c-'.$uniq.' .flot-text, .c-'.$uniq.' .flot-text * { font-size: '.(8 * $ratio_t).'pt !important; line-height:'.(8 * ($ratio_t)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item .donut-graph * {font-size: '.(8 * $ratio_t).'px !important; line-height: '.(8 * $ratio_t).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .donut-graph g rect {width:'.(25 * $ratio_t).' !important; height: '.(15 * $ratio_t).' !important;}';
$output .= '<style id="css_cv_'.$uniq.'" type="text/css">';
$output .= css_label_styles_visual_console($uniq, $ratio);
$output .= '</style>';
$visualConsoleItems = array_reduce(
$visualConsoleItems,
function ($carry, $item) use ($ratio_t) {
function ($carry, $item) {
$carry[] = $item->toArray();
return $carry;
},
@ -508,11 +441,13 @@ class MapsMadeByUser extends Widget
'props' => $visualConsoleData,
'items' => $visualConsoleItems,
'baseUrl' => ui_get_full_url('/', false, false, false),
'ratio' => $ratio_t,
'ratio' => $ratio,
'size' => $size,
'cellId' => $this->cellId,
'hash' => User::generatePublicHash(),
'id_user' => $config['id_user'],
'page' => 'include/ajax/visual_console.ajax',
'uniq' => $uniq,
]
);

View File

@ -88,25 +88,15 @@ if ($getVisualConsole === true) {
$width = get_parameter('widthScreen', 0);
$mode = get_parameter('mode', '');
$ratio = 0;
if (isset($size) === true
&& is_array($size) === true
&& empty($size) === false
) {
$ratio = $visualConsole->adjustToViewport($size, $mode);
$visualConsoleData = $visualConsole->toArray();
$ratio_visualconsole = ($visualConsoleData['height'] / $visualConsoleData['width']);
$ratio = ($size['width'] / $visualConsoleData['width']);
$ratio_h = ($size['height'] / $visualConsoleData['height']);
$visualConsoleData['width'] = $size['width'];
$visualConsoleData['height'] = ($size['width'] * $ratio_visualconsole);
if ($visualConsoleData['height'] > $size['height']) {
$ratio = $ratio_h;
$visualConsoleData['height'] = $size['height'];
$visualConsoleData['width'] = ($size['height'] / $ratio_visualconsole);
}
}
$widthRatio = 0;

View File

@ -213,6 +213,61 @@ abstract class Model
}
/**
* Calculate ratio for mobile.
*
* @param array $size Size viewport.
* @param string $mode Mode calculate (dashboard or mobile).
*
* @return float Ratio.
*/
public function adjustToViewport($size, $mode='')
{
$ratio_visualconsole = $this->getRatio();
$ratio_w = ($size['width'] / $this->data['width']);
$ratio_h = ($size['height'] / $this->data['height']);
$this->data['width'] = $size['width'];
$this->data['height'] = ($size['width'] * $ratio_visualconsole);
$ratio = $ratio_w;
if ($mode === 'mobile') {
if ($this->data['height'] < $this->data['width']) {
if ($this->data['height'] > $size['height']) {
$ratio = $ratio_h;
$this->data['height'] = $size['height'];
$this->data['width'] = ($size['height'] / $ratio_visualconsole);
}
}
} else {
if ($this->data['height'] > $size['height']) {
$ratio = $ratio_h;
$this->data['height'] = $size['height'];
$this->data['width'] = ($size['height'] / $ratio_visualconsole);
}
}
return $ratio;
}
/**
* Calculate ratio
*
* @return float Ratio.
*/
public function getRatio()
{
if (isset($this->data['width']) === false
|| empty($this->data['width']) === true
) {
return null;
}
return ($this->data['height'] / $this->data['width']);
}
/*
* -------------
* - UTILITIES -

View File

@ -304,20 +304,8 @@ class Visualmap
'height' => $this->height,
];
$ratio_t = $visualConsole->adjustToViewport($size, 'mobile');
$visualConsoleData = $visualConsole->toArray();
$ratio_visualconsole = ($visualConsoleData['height'] / $visualConsoleData['width']);
$ratio_t = ($size['width'] / $visualConsoleData['width']);
$ratio_h = ($size['height'] / $visualConsoleData['height']);
$visualConsoleData['width'] = $size['width'];
$visualConsoleData['height'] = ($size['width'] * $ratio_visualconsole);
if ($visualConsoleData['height'] > $size['height']) {
$ratio_t = $ratio_h;
$visualConsoleData['height'] = $size['height'];
$visualConsoleData['width'] = ($size['height'] / $ratio_visualconsole);
}
$uniq = uniqid();
@ -325,7 +313,6 @@ class Visualmap
// Style.
$style = 'width:'.$visualConsoleData['width'].'px;';
$style .= 'height:'.$visualConsoleData['height'].'px;';
$style .= 'background-size: cover;';
// Class.
$class = 'visual-console-container-dashboard c-'.$uniq;
@ -369,7 +356,7 @@ class Visualmap
$visualConsoleItems = array_reduce(
$visualConsoleItems,
function ($carry, $item) use ($ratio_t) {
function ($carry, $item) {
$carry[] = $item->toArray();
return $carry;
},
@ -385,6 +372,7 @@ class Visualmap
'ratio' => $ratio_t,
'size' => $size,
'cellId' => $uniq,
'uniq' => $uniq,
'mobile' => true,
]
);