@@ -37,14 +37,14 @@ def build_interactive_report(
3737 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
3838 <style>
3939 :root {{
40- --bg-deep: #0c0e12 ;
41- --bg-card: #14171e ;
42- --bg-elevated: #1a1e28 ;
43- --border: #2a303c ;
44- --text: #e8ecf2 ;
45- --text-muted: #8892a0 ;
46- --accent: #e8a838 ;
47- --accent-dim: rgba(232, 168, 56 , 0.12);
40+ --bg-deep: #f5f6f8 ;
41+ --bg-card: #ffffff ;
42+ --bg-elevated: #f0f1f3 ;
43+ --border: #e2e4e8 ;
44+ --text: #1a1d24 ;
45+ --text-muted: #6b7280 ;
46+ --accent: #b45309 ;
47+ --accent-dim: rgba(180, 83, 9 , 0.12);
4848 }}
4949 * {{ box-sizing: border-box; }}
5050 body {{
@@ -80,7 +80,7 @@ def build_interactive_report(
8080 background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
8181 overflow: hidden; padding: 1rem; transition: box-shadow 0.2s;
8282 }}
83- .chart-card:hover {{ box-shadow: 0 4px 20px rgba(0,0,0,0.25 ); }}
83+ .chart-card:hover {{ box-shadow: 0 4px 20px rgba(0,0,0,0.08 ); }}
8484 .chart-card h3 {{ font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem; }}
8585 .chart-card .sub {{ font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem; }}
8686 .chart-container {{ width: 100%; height: 320px; }}
@@ -101,21 +101,21 @@ def build_interactive_report(
101101 const tabOrder = ['basic', 'team', 'risk', 'fairness', 'advanced'];
102102 const tabLabels = {{ basic: 'Basic', team: 'Team', risk: 'Risk', fairness: 'Fairness', advanced: 'Advanced' }};
103103
104- const DARK_THEME = {{
104+ const CHART_THEME = {{
105105 backgroundColor: 'transparent',
106- textStyle: {{ color: '#8892a0 ', fontFamily: 'IBM Plex Sans' }},
107- title: {{ textStyle: {{ color: '#e8ecf2 ' }}, subtextStyle: {{ color: '#8892a0 ' }} }},
108- legend: {{ textStyle: {{ color: '#8892a0 ' }} }},
109- axisLine: {{ lineStyle: {{ color: '#2a303c ' }} }},
110- axisLabel: {{ color: '#8892a0 ' }},
111- splitLine: {{ lineStyle: {{ color: '#1a1e28 ' }} }},
106+ textStyle: {{ color: '#6b7280 ', fontFamily: 'IBM Plex Sans' }},
107+ title: {{ textStyle: {{ color: '#1a1d24 ' }}, subtextStyle: {{ color: '#6b7280 ' }} }},
108+ legend: {{ textStyle: {{ color: '#6b7280 ' }} }},
109+ axisLine: {{ lineStyle: {{ color: '#e2e4e8 ' }} }},
110+ axisLabel: {{ color: '#6b7280 ' }},
111+ splitLine: {{ lineStyle: {{ color: '#eef0f2 ' }} }},
112112 }};
113113
114- const COLORS = ['#e8a838 ', '#5cb8b2 ', '#c97dd5 ', '#6b9bd1 ', '#e89b6f ', '#8bc98a ', '#d47070 ', '#9b9b9b '];
114+ const COLORS = ['#b45309 ', '#0d9488 ', '#7c3aed ', '#2563eb ', '#ea580c ', '#16a34a ', '#dc2626 ', '#6b7280 '];
115115
116116 function renderBar(container, c) {{
117117 const opt = {{
118- ...DARK_THEME ,
118+ ...CHART_THEME ,
119119 tooltip: {{ trigger: 'axis' }},
120120 grid: {{ left: 50, right: 30, top: 40, bottom: 60 }},
121121 xAxis: {{ type: 'category', data: c.x, axisLabel: {{ rotate: 45 }} }},
@@ -130,7 +130,7 @@ def build_interactive_report(
130130
131131 function renderLine(container, c) {{
132132 const opt = {{
133- ...DARK_THEME ,
133+ ...CHART_THEME ,
134134 tooltip: {{ trigger: 'axis' }},
135135 grid: {{ left: 50, right: 30, top: 40, bottom: 60 }},
136136 xAxis: {{ type: 'category', data: c.x, axisLabel: {{ rotate: 45 }} }},
@@ -145,7 +145,7 @@ def build_interactive_report(
145145
146146 function renderDualLine(container, c) {{
147147 const opt = {{
148- ...DARK_THEME ,
148+ ...CHART_THEME ,
149149 tooltip: {{ trigger: 'axis' }},
150150 legend: {{ data: [c.y1Name, c.y2Name] }},
151151 grid: {{ left: 50, right: 50, top: 50, bottom: 60 }},
@@ -171,9 +171,22 @@ def build_interactive_report(
171171 itemStyle: {{ color: COLORS[i % COLORS.length] }},
172172 }}));
173173 const opt = {{
174- ...DARK_THEME ,
174+ ...CHART_THEME ,
175175 tooltip: {{ trigger: 'axis' }},
176- legend: {{ type: 'scroll', bottom: 0 }},
176+ legend: {{
177+ type: 'scroll',
178+ bottom: 0,
179+ selectedMode: 'single',
180+ selector: true,
181+ pageIconSize: 10,
182+ pageTextStyle: {{ fontSize: 10 }},
183+ pageFormatter: ({{ current, total }}) => `${{current}}/${{total}}`,
184+ pageButtonItemGap: 4,
185+ itemGap: 8,
186+ itemWidth: 14,
187+ itemHeight: 10,
188+ textStyle: {{ fontSize: 10 }},
189+ }},
177190 grid: {{ left: 50, right: 30, top: 40, bottom: 80 }},
178191 xAxis: {{ type: 'category', data: c.x, axisLabel: {{ rotate: 45 }} }},
179192 yAxis: {{ type: 'value', minInterval: 0 }},
@@ -192,9 +205,22 @@ def build_interactive_report(
192205 itemStyle: {{ color: COLORS[i % COLORS.length] }},
193206 }}));
194207 const opt = {{
195- ...DARK_THEME ,
208+ ...CHART_THEME ,
196209 tooltip: {{ trigger: 'axis' }},
197- legend: {{ type: 'scroll', bottom: 0 }},
210+ legend: {{
211+ type: 'scroll',
212+ bottom: 0,
213+ selectedMode: 'single',
214+ selector: true,
215+ pageIconSize: 10,
216+ pageTextStyle: {{ fontSize: 10 }},
217+ pageFormatter: ({{ current, total }}) => `${{current}}/${{total}}`,
218+ pageButtonItemGap: 4,
219+ itemGap: 8,
220+ itemWidth: 14,
221+ itemHeight: 10,
222+ textStyle: {{ fontSize: 10 }},
223+ }},
198224 grid: {{ left: 50, right: 30, top: 40, bottom: 80 }},
199225 xAxis: {{ type: 'category', data: c.x, axisLabel: {{ rotate: 45 }} }},
200226 yAxis: {{ type: 'value', minInterval: 0 }},
@@ -208,7 +234,7 @@ def build_interactive_report(
208234
209235 function renderScatter(container, c) {{
210236 const opt = {{
211- ...DARK_THEME ,
237+ ...CHART_THEME ,
212238 tooltip: {{ trigger: 'item' }},
213239 grid: {{ left: 50, right: 30, top: 40, bottom: 60 }},
214240 xAxis: {{ type: 'value', name: c.xAxisName || 'X' }},
@@ -224,7 +250,7 @@ def build_interactive_report(
224250 function renderScatterLabel(container, c) {{
225251 const data = (c.data || []).map(d => ({{ name: d.name, value: d.value }}));
226252 const opt = {{
227- ...DARK_THEME ,
253+ ...CHART_THEME ,
228254 tooltip: {{ trigger: 'item' }},
229255 grid: {{ left: 50, right: 30, top: 40, bottom: 60 }},
230256 xAxis: {{ type: 'value', name: c.xAxisName || 'PR Count' }},
@@ -243,7 +269,7 @@ def build_interactive_report(
243269
244270 function renderBoxplot(container, c) {{
245271 const opt = {{
246- ...DARK_THEME ,
272+ ...CHART_THEME ,
247273 tooltip: {{ trigger: 'item' }},
248274 grid: {{ left: 50, right: 30, top: 40, bottom: 60 }},
249275 xAxis: {{ type: 'category', data: c.x, axisLabel: {{ rotate: 45 }} }},
@@ -258,7 +284,7 @@ def build_interactive_report(
258284
259285 function renderArea(container, c) {{
260286 const opt = {{
261- ...DARK_THEME ,
287+ ...CHART_THEME ,
262288 tooltip: {{ trigger: 'axis' }},
263289 grid: {{ left: 50, right: 30, top: 40, bottom: 60 }},
264290 xAxis: {{ type: 'category', data: c.x, axisLabel: {{ rotate: 45 }} }},
0 commit comments