From 41db2df9c95f71e212c058858c8ddab9a90dc51d Mon Sep 17 00:00:00 2001 From: yumoqing Date: Wed, 22 Jul 2026 18:54:12 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8bricks=E5=8E=9F?= =?UTF-8?q?=E7=94=9FChartBar/ChartPie/ChartScatter=E6=9B=BF=E4=BB=A3WebWid?= =?UTF-8?q?get+Jinja2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wwwroot/sect_currency.ui | 25 +++++++------------------ wwwroot/sect_model_perf.ui | 24 +++++++----------------- wwwroot/sect_provider_roi.ui | 28 +++++++--------------------- wwwroot/sect_top_models.ui | 22 +++++++--------------- wwwroot/sect_top_providers.ui | 22 +++++++--------------- wwwroot/sect_top_users.ui | 22 +++++++--------------- 6 files changed, 42 insertions(+), 101 deletions(-) diff --git a/wwwroot/sect_currency.ui b/wwwroot/sect_currency.ui index 988b335..c824356 100644 --- a/wwwroot/sect_currency.ui +++ b/wwwroot/sect_currency.ui @@ -1,20 +1,9 @@ -{% set data = j2_currency_data(request) %} -{% if data %}{% set maxv = namespace(v=0) %}{% for r in data %}{% if r.get("call_count",0)|int > maxv.v %}{% set maxv.v = r.get("call_count",0)|int %}{% endif %}{% endfor %}{% endif %} { - "widgettype": "VBox", - "options": {"width": "100%"}, - "subwidgets": [ - {% for r in data %} - {% set name = r.get("currency","") %}{% set val = r.get("call_count",0)|int %}{% set pct = (val/maxv.v*100)|int if maxv.v else 0 %} - {"widgettype":"VBox","options":{"width":"100%","marginBottom":"4px"},"subwidgets":[ - {"widgettype":"HBox","options":{"width":"100%"},"subwidgets":[ - {"widgettype":"Text","options":{"text":{{json.dumps(name,ensure_ascii=False)}},"width":"15%","fontSize":"11px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps(val|string+'次',ensure_ascii=False)}},"width":"13%","fontSize":"11px","textAlign":"right","color":"var(--sage-text-secondary)"}}, - {"widgettype":"VBox","options":{"width":"60%","height":"14px","bgcolor":"var(--sage-bg-tertiary)","borderRadius":"3px"},"subwidgets":[ - {"widgettype":"VBox","options":{"width":"{{pct}}%","minWidth":"2px","height":"14px","bgcolor":"#f59e0b","borderRadius":"3px"}} - ]}, - {"widgettype":"Text","options":{"text":{{json.dumps(pct|string+'%',ensure_ascii=False)}},"width":"12%","fontSize":"10px","textAlign":"right","color":"var(--sage-text-tertiary)"}} - ]} - ]}{% if not loop.last %},{% endif %}{% endfor %} - ] + "widgettype": "ChartPie", + "options": { + "height": "200px", + "data_url": "{{entire_url('api/currency_stats.dspy')}}", + "nameField": "currency", + "valueFields": ["call_count"] + } } diff --git a/wwwroot/sect_model_perf.ui b/wwwroot/sect_model_perf.ui index 9f11c36..e9df701 100644 --- a/wwwroot/sect_model_perf.ui +++ b/wwwroot/sect_model_perf.ui @@ -1,19 +1,9 @@ -{% set data = j2_model_perf_data(request) %} -{% if data %}{% set maxv = namespace(v=0) %}{% for r in data %}{% if r.get("avg_latency_ms",0)|float > maxv.v %}{% set maxv.v = r.get("avg_latency_ms",0)|float %}{% endif %}{% endfor %}{% endif %} { - "widgettype": "VBox", - "options": {"width": "100%"}, - "subwidgets": [ - {% for r in data %} - {% set name = r.get("model","") %}{% set val = r.get("avg_latency_ms",0)|float %}{% set pct = (val/maxv.v*100)|int if maxv.v else 0 %} - {"widgettype":"VBox","options":{"width":"100%","marginBottom":"4px"},"subwidgets":[ - {"widgettype":"HBox","options":{"width":"100%"},"subwidgets":[ - {"widgettype":"Text","options":{"text":{{json.dumps(name,ensure_ascii=False)}},"width":"32%","fontSize":"11px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps(val|string+'ms',ensure_ascii=False)}},"width":"12%","fontSize":"11px","textAlign":"right","color":"var(--sage-text-secondary)"}}, - {"widgettype":"VBox","options":{"width":"56%","height":"14px","bgcolor":"var(--sage-bg-tertiary)","borderRadius":"3px"},"subwidgets":[ - {"widgettype":"VBox","options":{"width":"{{pct}}%","minWidth":"2px","height":"14px","bgcolor":"#3b82f6","borderRadius":"3px"}} - ]} - ]} - ]}{% if not loop.last %},{% endif %}{% endfor %} - ] + "widgettype": "ChartBar", + "options": { + "height": "180px", + "data_url": "{{entire_url('api/model_perf.dspy')}}", + "nameField": "model", + "valueFields": ["avg_latency_ms"] + } } diff --git a/wwwroot/sect_provider_roi.ui b/wwwroot/sect_provider_roi.ui index 780a2e9..0842e6b 100644 --- a/wwwroot/sect_provider_roi.ui +++ b/wwwroot/sect_provider_roi.ui @@ -1,23 +1,9 @@ -{% set data = j2_provider_roi_data(request) %} { - "widgettype": "VBox", - "options": {"width": "100%"}, - "subwidgets": [ - {"widgettype":"HBox","options":{"cheight":2,"width":"100%","bgcolor":"var(--sage-bg-secondary)","borderRadius":"4px 4px 0 0","padding":"2px 8px"},"subwidgets":[ - {"widgettype":"Text","options":{"text":"模型","width":"30%","fontSize":"11px","color":"var(--sage-text-secondary)"}}, - {"widgettype":"Text","options":{"text":"单价","width":"18%","fontSize":"11px","color":"var(--sage-text-secondary)"}}, - {"widgettype":"Text","options":{"text":"延迟","width":"18%","fontSize":"11px","color":"var(--sage-text-secondary)"}}, - {"widgettype":"Text","options":{"text":"调用","width":"18%","fontSize":"11px","color":"var(--sage-text-secondary)"}}, - {"widgettype":"Text","options":{"text":"总金额","width":"16%","fontSize":"11px","textAlign":"right","color":"var(--sage-text-secondary)"}} - ]} - {% for r in data %} - ,{"widgettype":"HBox","options":{"width":"100%","padding":"3px 8px"},"subwidgets":[ - {"widgettype":"Text","options":{"text":{{json.dumps(r.get("model",""),ensure_ascii=False)}},"width":"30%","fontSize":"12px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps(r.get("unit_price",""),ensure_ascii=False)}},"width":"18%","fontSize":"12px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps(r.get("avg_ttft_ms",""),ensure_ascii=False)}},"width":"18%","fontSize":"12px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps(r.get("total_calls",""),ensure_ascii=False)}},"width":"18%","fontSize":"12px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps('¥'+(r.get("total_amount_cny",0)|string),ensure_ascii=False)}},"width":"16%","fontSize":"12px","textAlign":"right"}} - ]} - {% endfor %} - ] + "widgettype": "ChartScatter", + "options": { + "height": "240px", + "data_url": "{{entire_url('api/provider_roi.dspy')}}", + "nameField": "model", + "valueFields": ["unit_price", "avg_ttft_ms", "total_calls"] + } } diff --git a/wwwroot/sect_top_models.ui b/wwwroot/sect_top_models.ui index b58c476..43366f6 100644 --- a/wwwroot/sect_top_models.ui +++ b/wwwroot/sect_top_models.ui @@ -1,17 +1,9 @@ -{% set data = j2_top_models_data(request) %} -{% if data %}{% set maxv = namespace(v=0) %}{% for r in data %}{% if r.get("cnt",0)|int > maxv.v %}{% set maxv.v = r.get("cnt",0)|int %}{% endif %}{% endfor %}{% endif %} { - "widgettype": "VBox", - "options": {"width": "100%"}, - "subwidgets": [ - {% for r in data %} - {% set name = r.get("model_name","") %}{% set val = r.get("cnt",0)|int %}{% set pct = (val/maxv.v*100)|int if maxv.v else 0 %} - {"widgettype":"HBox","options":{"width":"100%","marginBottom":"4px"},"subwidgets":[ - {"widgettype":"Text","options":{"text":{{json.dumps(name,ensure_ascii=False)}},"width":"32%","fontSize":"11px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps(val|string+'次',ensure_ascii=False)}},"width":"12%","fontSize":"11px","textAlign":"right","color":"var(--sage-text-secondary)"}}, - {"widgettype":"VBox","options":{"width":"56%","height":"14px","bgcolor":"var(--sage-bg-tertiary)","borderRadius":"3px"},"subwidgets":[ - {"widgettype":"VBox","options":{"width":"{{pct}}%","minWidth":"2px","height":"14px","bgcolor":"#10b981","borderRadius":"3px"}} - ]} - ]}{% if not loop.last %},{% endif %}{% endfor %} - ] + "widgettype": "ChartBar", + "options": { + "height": "180px", + "data_url": "{{entire_url('api/top_models.dspy')}}", + "nameField": "model_name", + "valueFields": ["cnt"] + } } diff --git a/wwwroot/sect_top_providers.ui b/wwwroot/sect_top_providers.ui index 01d0cd5..8e3e720 100644 --- a/wwwroot/sect_top_providers.ui +++ b/wwwroot/sect_top_providers.ui @@ -1,17 +1,9 @@ -{% set data = j2_top_providers_data(request) %} -{% if data %}{% set maxv = namespace(v=0) %}{% for r in data %}{% set amt = r.get("total_amount",0)|float %}{% if amt > maxv.v %}{% set maxv.v = amt %}{% endif %}{% endfor %}{% endif %} { - "widgettype": "VBox", - "options": {"width": "100%"}, - "subwidgets": [ - {% for r in data %} - {% set name = r.get("provider_name","") %}{% set val = r.get("total_amount",0)|float %}{% set pct = (val/maxv.v*100)|int if maxv.v else 0 %} - {"widgettype":"HBox","options":{"width":"100%","marginBottom":"4px"},"subwidgets":[ - {"widgettype":"Text","options":{"text":{{json.dumps(name,ensure_ascii=False)}},"width":"32%","fontSize":"11px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps('¥' + ('%.2f'%val),ensure_ascii=False)}},"width":"12%","fontSize":"11px","textAlign":"right","color":"var(--sage-text-secondary)"}}, - {"widgettype":"VBox","options":{"width":"56%","height":"14px","bgcolor":"var(--sage-bg-tertiary)","borderRadius":"3px"},"subwidgets":[ - {"widgettype":"VBox","options":{"width":"{{pct}}%","minWidth":"2px","height":"14px","bgcolor":"#ef4444","borderRadius":"3px"}} - ]} - ]}{% if not loop.last %},{% endif %}{% endfor %} - ] + "widgettype": "ChartBar", + "options": { + "height": "180px", + "data_url": "{{entire_url('api/top_providers.dspy')}}", + "nameField": "provider_name", + "valueFields": ["total_amount"] + } } diff --git a/wwwroot/sect_top_users.ui b/wwwroot/sect_top_users.ui index b4e94c7..000571f 100644 --- a/wwwroot/sect_top_users.ui +++ b/wwwroot/sect_top_users.ui @@ -1,17 +1,9 @@ -{% set data = j2_top_users_data(request) %} -{% if data %}{% set maxv = namespace(v=0) %}{% for r in data %}{% set amt = r.get("total_amount",0)|float %}{% if amt > maxv.v %}{% set maxv.v = amt %}{% endif %}{% endfor %}{% endif %} { - "widgettype": "VBox", - "options": {"width": "100%"}, - "subwidgets": [ - {% for r in data %} - {% set name = r.get("user_name","") %}{% set val = r.get("total_amount",0)|float %}{% set pct = (val/maxv.v*100)|int if maxv.v else 0 %} - {"widgettype":"HBox","options":{"width":"100%","marginBottom":"4px"},"subwidgets":[ - {"widgettype":"Text","options":{"text":{{json.dumps(name,ensure_ascii=False)}},"width":"32%","fontSize":"11px"}}, - {"widgettype":"Text","options":{"text":{{json.dumps('¥' + ('%.2f'%val),ensure_ascii=False)}},"width":"12%","fontSize":"11px","textAlign":"right","color":"var(--sage-text-secondary)"}}, - {"widgettype":"VBox","options":{"width":"56%","height":"14px","bgcolor":"var(--sage-bg-tertiary)","borderRadius":"3px"},"subwidgets":[ - {"widgettype":"VBox","options":{"width":"{{pct}}%","minWidth":"2px","height":"14px","bgcolor":"#8b5cf6","borderRadius":"3px"}} - ]} - ]}{% if not loop.last %},{% endif %}{% endfor %} - ] + "widgettype": "ChartBar", + "options": { + "height": "180px", + "data_url": "{{entire_url('api/top_users.dspy')}}", + "nameField": "user_name", + "valueFields": ["total_amount"] + } }