diff --git a/lib/zin/func.php b/lib/zin/func.php
index 72c6aa51e1..7fe5866774 100644
--- a/lib/zin/func.php
+++ b/lib/zin/func.php
@@ -1681,3 +1681,11 @@ function stepsEditor(): stepsEditor
 {
     return createWg('stepsEditor', func_get_args());
 }
+
+/**
+ * table and chart widget.
+ */
+function tableChart(): tableChart
+{
+    return createWg('tableChart', func_get_args());
+}
diff --git a/lib/zin/wg/tablechart/v1.php b/lib/zin/wg/tablechart/v1.php
new file mode 100644
index 0000000000..842f74b609
--- /dev/null
+++ b/lib/zin/wg/tablechart/v1.php
@@ -0,0 +1,85 @@
+<?php
+declare(strict_types=1);
+namespace zin;
+
+class tableChart extends wg
+{
+    protected static array $defineProps = array(
+        'type:string',
+        'title:string',
+        'datas?:array'
+    );
+
+    protected function build(): wg
+    {
+        global $lang;
+
+        $type        = $this->prop('type');
+        $title       = $this->prop('title');
+        $datas       = $this->prop('datas');
+        $colorList   = array('#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC');
+        $chartOption = array();
+        foreach($datas as $key => $data)
+        {
+            $color = current($colorList);
+            $chartOption[] = array('name' => $data->name, 'value' => $type == 'pie' ? $data->value : array('value' => $data->value, 'itemStyle' => array('color' => $color)));
+            $tableTR[] = h::tr
+            (
+                h::td(label(set::class('label-dot mr-2'), set::style(array('background-color' => $color, '--tw-ring-color' => $color))), $data->name),
+                h::td($data->value),
+                h::td(($data->percent * 100) . '%')
+            );
+            if(!next($colorList)) reset($colorList);
+        }
+
+        return div
+        (
+            set::class('flex border'),
+            cell
+            (
+                set::width('50%'),
+                set::class('border-r chart'),
+                div(set::class('center text-base font-bold py-2'), $title),
+                echarts
+                (
+                    set::color($colorList),
+                    $type != 'pie' ? set::xAxis
+                    (
+                        array
+                        (
+                            'type' => 'category',
+                            'data' => array_column($chartOption, 'name')
+                        )
+                    ) : null,
+                    $type != 'pie' ? set::yAxis(array('type' => 'value')) : null,
+                    set::series
+                    (
+                        array
+                        (
+                            array
+                            (
+                                'data' => $type == 'pie' ? $chartOption : array_column($chartOption, 'value'),
+                                'type' => $type
+                            )
+                        )
+                    )
+                )->size('100%', 300),
+            ),
+            cell
+            (
+                set::width('50%'),
+                h::table
+                (
+                    set::class('table'),
+                    h::tr
+                    (
+                        h::th($lang->report->item),
+                        h::th(set::width('100px'), $lang->report->value),
+                        h::th(set::width('120px'), $lang->report->percent)
+                    ),
+                    $tableTR
+                )
+            )
+        );
+    }
+}
diff --git a/module/testtask/ui/report.html.php b/module/testtask/ui/report.html.php
index 146d1029d2..96100f36a2 100644
--- a/module/testtask/ui/report.html.php
+++ b/module/testtask/ui/report.html.php
@@ -26,75 +26,15 @@ detailHeader
 $reports = array();
 foreach($lang->testtask->report->charts as $key => $label) $reports[] = array('text' => $label, 'value' => $key);
 
-$colorList = array('#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC');
 $echarts   = array();
 foreach($charts as $type => $option)
 {
-    $chartData   = $datas[$type];
-    $chartOption = array();
-    $tableTR     = array();
-    $colorList   = array('#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC');
-    foreach($chartData as $key => $data)
-    {
-        $color = current($colorList);
-        $chartOption[] = array('name' => $data->name, 'value' => $option->type == 'pie' ? $data->value : array('value' => $data->value, 'itemStyle' => array('color' => $color)));
-        $tableTR[] = h::tr
-        (
-            h::td(label(set::class('label-dot mr-2'), set::style(array('background-color' => $color, '--tw-ring-color' => $color))), $data->name),
-            h::td($data->value),
-            h::td(($data->percent * 100) . '%')
-        );
-        if(!next($colorList)) reset($colorList);
-    }
-
-    $echarts[] = div
+    $chartData = $datas[$type];
+    $echarts[] = tableChart
     (
-        set::class('flex border'),
-        cell
-        (
-            set::width('50%'),
-            set::class('border-r chart'),
-            div(set::class('center text-base font-bold py-2'), $lang->testtask->report->charts[$type]),
-            echarts
-            (
-                set::color($colorList),
-                $option->type != 'pie' ? set::xAxis
-                (
-                    array
-                    (
-                        'type' => 'category',
-                        'data' => array_column($chartOption, 'name')
-                    )
-                ) : null,
-                $option->type != 'pie' ? set::yAxis(array('type' => 'value')) : null,
-                set::series
-                (
-                    array
-                    (
-                        array
-                        (
-                            'data' => $option->type == 'pie' ? $chartOption : array_column($chartOption, 'value'),
-                            'type' => $option->type
-                        )
-                    )
-                )
-            )->size('100%', 300),
-        ),
-        cell
-        (
-            set::width('50%'),
-            h::table
-            (
-                set::class('table'),
-                h::tr
-                (
-                    h::th($lang->report->item),
-                    h::th(set::width('100px'), $lang->report->value),
-                    h::th(set::width('120px'), $lang->report->percent)
-                ),
-                $tableTR
-            )
-        )
+        set::type($option->type),
+        set::title($lang->testtask->report->charts[$type]),
+        set::datas((array)$chartData)
     );
 }