From b5aabadf8b704756c52c1006972f014f7f37c65e Mon Sep 17 00:00:00 2001 From: qixinzhi Date: Wed, 12 Apr 2023 15:41:47 +0800 Subject: [PATCH 1/2] * Change chart ajax to async. --- module/chart/js/common.js | 12 ++++++++++ module/chart/js/preview.js | 45 ++++++++++++++++++++++++-------------- 2 files changed, 41 insertions(+), 16 deletions(-) diff --git a/module/chart/js/common.js b/module/chart/js/common.js index 9e727b3bcb..c3e89be352 100644 --- a/module/chart/js/common.js +++ b/module/chart/js/common.js @@ -17,6 +17,7 @@ function ajaxGetChart(check = true, chart = DataStorage.chart, echart = window.e var data = JSON.parse(resp); if(echart) { + echart.resize(); echart.clear(); echart.setOption(data, true); $('.btn-export').removeClass('hidden'); @@ -24,6 +25,17 @@ function ajaxGetChart(check = true, chart = DataStorage.chart, echart = window.e }); } +function resizeChart() +{ + var filterHeight = $('.main-col .cell #filterContent').height(); + $('.main-col .cell #draw').css('height', 'calc(100% - ' + (filterHeight + 16) + 'px)') + + if(echart) + { + echart.resize(); + } +} + /** * Init picker. * diff --git a/module/chart/js/preview.js b/module/chart/js/preview.js index 44eb412c0e..d9560637cb 100644 --- a/module/chart/js/preview.js +++ b/module/chart/js/preview.js @@ -7,19 +7,24 @@ $(function() chartMap = new Map(); if(charts.length > 0) { - charts.forEach(function(chart) + var chartPros = charts.map(function(chart) { var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0); var echart = echarts.init(echartDom); ajaxGetChart(false, chart, echart); - renderFilters(chart); - - chartMap.set(chart.currentGroup + chart.id, chart); + chartMap.set(chart.cudrrentGroup + chart.id, chart); + return renderFilters(chart); }); + + Promise.all(chartPros).then(function() + { + console.log(11); + calcPreviewGrowFilter(); + $('body').resize(() => {calcPreviewGrowFilter(true);}); + }); + } - calcPreviewGrowFilter(); - $('body').resize(() => {calcPreviewGrowFilter(true);}); $('[data-toggle="tooltip"]').tooltip(); }) @@ -184,19 +189,27 @@ function calcPreviewGrowFilter(resize = false) function renderFilters(chart) { - if(chart.filters.length == 0) return; - - var fieldNames = {}; - Object.keys(chart.fieldSettings).forEach(function(key){fieldNames[key] = chart.fieldSettings[key].name;}); - $.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs}, function(resp) + return new Promise(function(resolve, reject) { - resp = JSON.parse(resp); - chart.filters.forEach(function(filter, index) + if(chart.filters.length == 0) { - var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items'); - $filterItems.append(renderFilterItem(filter, resp, index)); + resolve(); + return; + } + + var fieldNames = {}; + Object.keys(chart.fieldSettings).forEach(function(key){fieldNames[key] = chart.fieldSettings[key].name;}); + $.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs}, function(resp) + { + resp = JSON.parse(resp); + chart.filters.forEach(function(filter, index) + { + var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items'); + $filterItems.append(renderFilterItem(filter, resp, index)); + }); + resolve(); }); - }); + }) } function renderFilterItem(filter, resp, index, step) From f8f4c3363e4fb8d17e491120b9bdd12e7b53be0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E8=BE=B0=E8=BD=A9?= Date: Wed, 12 Apr 2023 16:21:52 +0800 Subject: [PATCH 2/2] * Add inside and outside query button. --- module/chart/css/preview.css | 2 +- module/chart/js/preview.js | 20 ++++++++++++++------ module/chart/view/preview.html.php | 8 +++++--- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/module/chart/css/preview.css b/module/chart/css/preview.css index bcb34a8496..6d0a146010 100644 --- a/module/chart/css/preview.css +++ b/module/chart/css/preview.css @@ -48,6 +48,6 @@ .filter-items{display: flex; flex: 1; flex-wrap: wrap;} .filter-item{padding: 0 16px 5px 0;} .filter-item-grow{flex-grow: 1;} -.queryBtn{display: flex; align-items: center; padding-bottom: 5px;} +.queryBtn{display: flex; align-items: center; padding-bottom: 5px; flex-basis: 60px;} .filterBox .picker-selections{width: 128px; height: 32px; overflow: hidden; text-overflow: clip; white-space: nowrap;} diff --git a/module/chart/js/preview.js b/module/chart/js/preview.js index d9560637cb..c4f4682008 100644 --- a/module/chart/js/preview.js +++ b/module/chart/js/preview.js @@ -9,7 +9,7 @@ $(function() { var chartPros = charts.map(function(chart) { - var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0); + var echartDom = $('#chartDraw' + chart.currentGroup + '_' + chart.id).get(0); var echart = echarts.init(echartDom); ajaxGetChart(false, chart, echart); chartMap.set(chart.cudrrentGroup + chart.id, chart); @@ -18,14 +18,12 @@ $(function() Promise.all(chartPros).then(function() { - console.log(11); calcPreviewGrowFilter(); $('body').resize(() => {calcPreviewGrowFilter(true);}); }); } - $('[data-toggle="tooltip"]').tooltip(); }) @@ -132,12 +130,13 @@ function calcPreviewGrowFilter(resize = false) /* When body resize, resize echarts. */ if(resize) { - var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0); + var echartDom = $('#chartDraw' + chart.currentGroup + '_' + chart.id).get(0); var echart = echarts.init(echartDom); echart.resize(); } - var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items'); + var $filterBox = $('#filterItems' + chart.currentGroup + '_' + chart.id); + var $filterItems = $filterBox.find('.filter-items'); /* When refreshing this page, ZenTao load this page twice, when the first load isn't complete, jump back to index and load the second time, the first load can't calc filter width, can't get the element using jQuery at first load. */ var hasInit = true; @@ -151,8 +150,12 @@ function calcPreviewGrowFilter(resize = false) var domWidth = $filterItems[0].getBoundingClientRect().width; var nowWidth = domWidth; + var lineWrap = false; var nowCount = 0; var canGrowTotal = 0; + + $filterBox.find('.query-inside').addClass('hidden'); + $filterBox.find('.query-outside').addClass('hidden'); chart.filters.forEach(function(filter, index) { var nowItem = '.filter-item-' + index; @@ -174,6 +177,7 @@ function calcPreviewGrowFilter(resize = false) canGrowTotal += nowCount; nowWidth = domWidth - filterWidth; nowCount = 1; + lineWrap = true; } }); @@ -184,6 +188,9 @@ function calcPreviewGrowFilter(resize = false) var nowItem = '.filter-item-' + index; if(canGrowTotal >= index + 1) $filterItems.find(nowItem).addClass('filter-item-grow'); }); + + var queryType =(!lineWrap && nowWidth >= 60) ? '.query-inside' : '.query-outside'; + $filterBox.find(queryType).removeClass('hidden'); }); } @@ -202,11 +209,12 @@ function renderFilters(chart) $.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs}, function(resp) { resp = JSON.parse(resp); + var $filterItems = $('#filterItems' + chart.currentGroup + '_' + chart.id + ' .filter-items'); chart.filters.forEach(function(filter, index) { - var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items'); $filterItems.append(renderFilterItem(filter, resp, index)); }); + $filterItems.append(queryDom); resolve(); }); }) diff --git a/module/chart/view/preview.html.php b/module/chart/view/preview.html.php index e1fc3d1fb1..758931353d 100644 --- a/module/chart/view/preview.html.php +++ b/module/chart/view/preview.html.php @@ -20,6 +20,8 @@ chart->widthInput);?> chart->widthDate);?> bi->pickerHeight);?> + ";?> +
-
+
filters)):?> -
chart->query, "data-chart={$chart->currentGroup}{$chart->id}", 'btn btn-primary btn-query');?>
+
chart->query, "data-chart={$chart->currentGroup}{$chart->id}", 'btn btn-primary btn-query');?>
-
+