fix: 使用bricks原生ChartBar/ChartPie/ChartScatter替代WebWidget+Jinja2

This commit is contained in:
yumoqing 2026-07-22 18:54:12 +08:00
parent a31d0d3bbb
commit 41db2df9c9
6 changed files with 42 additions and 101 deletions

View File

@ -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"]
}
}

View File

@ -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"]
}
}

View File

@ -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"]
}
}

View File

@ -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"]
}
}

View File

@ -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"]
}
}

View File

@ -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"]
}
}