From de4c42ed28491fb04d2b53741508892e72174e07 Mon Sep 17 00:00:00 2001 From: wangyuting Date: Wed, 28 Jun 2023 19:02:25 +0800 Subject: [PATCH] * Add charts to productstatistic block. --- module/block/css/productstatisticblock.ui.css | 14 +---- module/block/lang/de.php | 1 + module/block/lang/en.php | 1 + module/block/lang/fr.php | 1 + module/block/lang/vi.php | 1 + module/block/lang/zh-cn.php | 1 + .../block/ui/productstatisticblock.html.php | 57 ++++++++++++++++--- 7 files changed, 58 insertions(+), 18 deletions(-) diff --git a/module/block/css/productstatisticblock.ui.css b/module/block/css/productstatisticblock.ui.css index f711a6650d..fc99b5bc1e 100644 --- a/module/block/css/productstatisticblock.ui.css +++ b/module/block/css/productstatisticblock.ui.css @@ -8,17 +8,6 @@ .productstatistic-block .chart {margin: auto;} .productstatistic-block .story-num {margin: auto;} -.productstatistic-block.block-long .nav-tabs .nav-item {height:36px; line-height: 36px;} -.productstatistic-block.block-long .nav-tabs .nav-item:hover {background-color: #FCFDFE;} -.productstatistic-block.block-long .nav-tabs .nav-item > a.title {color: #5E626D;} -.productstatistic-block.block-long .nav-tabs .nav-item > a.title:before {background: transparent;} -.productstatistic-block.block-long .nav-tabs .nav-item > a.title.active {color: #0B0F18;border-left: 2px solid #2E7FFF; background-color: #FCFDFE;} -.productstatistic-block.block-long .nav-tabs .nav-item > a.title:hover {border-left: 2px solid #2E7FFF;} -.productstatistic-block.block-long .nav-tabs .nav-item:hover > a.title {color: #0B0F18;} -.productstatistic-block.block-long .nav-tabs .nav-item:hover > a.link {display: flex!important;} -.productstatistic-block.block-long .nav-tabs .nav-item.nav-prev {display: none} -.productstatistic-block.block-long .nav-tabs .nav-item.nav-next {display: none} - .productstatistic-block.block-sm .nav-tabs .nav-item.active {display: flex!important;} .productstatistic-block.block-sm .nav-tabs .nav-item > a {width: 100%;} .productstatistic-block.block-sm .nav-tabs .nav-item {display: none} @@ -26,3 +15,6 @@ .productstatistic-block.block-sm .nav-tabs .nav-item.nav-prev > a {padding: 0;} .productstatistic-block.block-sm .nav-tabs .nav-item.nav-next {display: flex} .productstatistic-block.block-sm .nav-tabs .nav-item.nav-next > a {padding: 0;} + +.productstatistic-block .pie-chart {position: relative;} +.productstatistic-block .pie-chart-title {position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -35px} diff --git a/module/block/lang/de.php b/module/block/lang/de.php index 4b0f53c8d8..c1be868066 100644 --- a/module/block/lang/de.php +++ b/module/block/lang/de.php @@ -511,6 +511,7 @@ $lang->block->productstatistic->news = 'Latest product advancements'; $lang->block->productstatistic->newPlan = 'Latest Plan'; $lang->block->productstatistic->newExecution = 'Latest Execution'; $lang->block->productstatistic->newRelease = 'Latest Release'; +$lang->block->productstatistic->deliveryRate = 'Delivery Rate'; $lang->block->projectstatistic = new stdclass(); $lang->block->projectstatistic->story = 'Story'; diff --git a/module/block/lang/en.php b/module/block/lang/en.php index a7e775c90e..5f518f927f 100644 --- a/module/block/lang/en.php +++ b/module/block/lang/en.php @@ -511,6 +511,7 @@ $lang->block->productstatistic->news = 'Latest product advancements'; $lang->block->productstatistic->newPlan = 'Latest Plan'; $lang->block->productstatistic->newExecution = 'Latest Execution'; $lang->block->productstatistic->newRelease = 'Latest Release'; +$lang->block->productstatistic->deliveryRate = 'Delivery Rate'; $lang->block->projectstatistic = new stdclass(); $lang->block->projectstatistic->story = 'Story'; diff --git a/module/block/lang/fr.php b/module/block/lang/fr.php index 1199b70401..494474e7f0 100644 --- a/module/block/lang/fr.php +++ b/module/block/lang/fr.php @@ -511,6 +511,7 @@ $lang->block->productstatistic->news = 'Latest product advancements'; $lang->block->productstatistic->newPlan = 'Latest Plan'; $lang->block->productstatistic->newExecution = 'Latest Execution'; $lang->block->productstatistic->newRelease = 'Latest Release'; +$lang->block->productstatistic->deliveryRate = 'Delivery Rate'; $lang->block->projectstatistic = new stdclass(); $lang->block->projectstatistic->story = 'Story'; diff --git a/module/block/lang/vi.php b/module/block/lang/vi.php index d7bc13caa8..f94befe321 100644 --- a/module/block/lang/vi.php +++ b/module/block/lang/vi.php @@ -569,6 +569,7 @@ $lang->block->productstatistic->news = 'Latest product advancements'; $lang->block->productstatistic->newPlan = 'Latest Plan'; $lang->block->productstatistic->newExecution = 'Latest Execution'; $lang->block->productstatistic->newRelease = 'Latest Release'; +$lang->block->productstatistic->deliveryRate = 'Delivery Rate'; $lang->block->productoverview = new stdclass(); $lang->block->productoverview->totalProductCount = 'Total Product Count'; diff --git a/module/block/lang/zh-cn.php b/module/block/lang/zh-cn.php index 20b30eb509..2dda44578f 100644 --- a/module/block/lang/zh-cn.php +++ b/module/block/lang/zh-cn.php @@ -511,6 +511,7 @@ $lang->block->productstatistic->news = '产品最新推进'; $lang->block->productstatistic->newPlan = '最新计划'; $lang->block->productstatistic->newExecution = '最新执行'; $lang->block->productstatistic->newRelease = '最新发布'; +$lang->block->productstatistic->deliveryRate = '需求交付率'; $lang->block->projectstatistic = new stdclass(); $lang->block->projectstatistic->story = '需求'; diff --git a/module/block/ui/productstatisticblock.html.php b/module/block/ui/productstatisticblock.html.php index c7c146047e..d9d20d20c4 100644 --- a/module/block/ui/productstatisticblock.html.php +++ b/module/block/ui/productstatisticblock.html.php @@ -108,8 +108,31 @@ function getProductInfo(array $products, string $blockNavID, bool $longBlock): a set('class', 'p-4'), div ( - set('class', 'py-6'), - div(set('class', 'bg-primary aspect-square w-28 chart')) + set('class', 'py-6 pie-chart'), + echarts + ( + set::color(array('#2B80FF', '#E3E4E9')), + set::series + ( + array + ( + array + ( + 'type' => 'pie', + 'radius' => array('80%', '90%'), + 'itemStyle' => array('borderRadius' => '40'), + 'label' => array('show' => false), + 'data' => array(69.9, 100-69.9) + ) + ) + ) + )->size('100%', 120), + div + ( + set::class('pie-chart-title text-center'), + div(span(set::class('text-2xl font-bold'), '69.9%')), + div(span(set::class('text-sm text-gray'), $lang->block->productstatistic->deliveryRate, icon('help', set('data-toggle', 'tooltip'), set('id', 'storyTip'), set('class', 'text-light')))) + ) ), div ( @@ -220,10 +243,31 @@ function getProductInfo(array $products, string $blockNavID, bool $longBlock): a div ( set('class', 'px-4 py-2'), - div + echarts ( - set('class', 'bg-primary h-44 w-full'), - ) + set::grid(array('left' => '10px', 'top' => '30px', 'right' => '0', 'bottom' => '0', 'containLabel' => true)), + set::legend(array('show' => true, 'right' => '0')), + set::xAxis(array('type' => 'category', 'data' => array('1月', '2月', '3月', '4月', '5月', '本月'), 'splitLine' => array('show' => false), 'axisTick' => array('alignWithLabel' => true, 'interval' => '0'))), + set::yAxis(array('type' => 'value', 'name' => '个', 'splitLine' => array('show' => false), 'axisLine' => array('show' => true, 'color' => '#DDD'))), + set::series + ( + array + ( + array + ( + 'type' => 'line', + 'name' => 'line', + 'data' => array(1, 2, 3, 4, 5, 6) + ), + array + ( + 'type' => 'line', + 'name' => 'line2', + 'data' => array(6, 5, 4, 3, 2, 1) + ) + ) + ) + )->size('100%', 170), ) ) ) @@ -329,7 +373,7 @@ panel set('class', "flex h-full overflow-hidden " . ($longBlock ? '' : 'col')), cell ( - set('width', '25%'), + set('width', '22%'), set('class', $longBlock ? 'bg-secondary-pale overflow-y-auto overflow-x-hidden' : ''), ul ( @@ -345,5 +389,4 @@ panel ) ) ); - render();