From b7d20786a54b5405990c32f9e41e0b0550819acc Mon Sep 17 00:00:00 2001 From: Quentin Gruber <47059878+QuentinGruber@users.noreply.github.com> Date: Tue, 17 Sep 2024 15:02:52 +0200 Subject: [PATCH 1/8] Improve UI with navigation menu and modern design Improve the UI by adding a navigation menu, modern design elements, and interactive features to the charts. * **Add CSS Styles**: Add `public/styles.css` to include styles for the navigation menu and modern design elements. * **Update HTML Template**: Modify `template.html` to include a navigation menu, update the layout with modern design elements, and link the new `styles.css` file. * **Enhance Chart Interactivity**: Modify `charts.go` to update chart generation functions to include interactive features and tooltips. * **Update HTML Generation**: Modify `html.go` to include the navigation menu and ensure the new layout and styles are applied to the generated HTML. * **Serve CSS File**: Modify `http.go` to update the HTTP server to serve the new `styles.css` file. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/H1emu/h1emu-charts?shareId=XXXX-XXXX-XXXX-XXXX). --- charts.go | 83 +++++++++++++++------- http.go | 2 + public/styles.css | 101 +++++++++++++++++++++++++++ template.html | 174 +++++++++++++++++++++++++++++----------------- 4 files changed, 268 insertions(+), 92 deletions(-) create mode 100644 public/styles.css diff --git a/charts.go b/charts.go index 16657dc..256873e 100644 --- a/charts.go +++ b/charts.go @@ -7,9 +7,10 @@ import ( "os" "github.com/go-echarts/go-echarts/v2/charts" - "go.mongodb.org/mongo-driver/mongo" - "github.com/go-echarts/go-echarts/v2/opts" + "github.com/go-echarts/go-echarts/v2/components" + "github.com/go-echarts/go-echarts/v2/types" + "go.mongodb.org/mongo-driver/mongo" ) // generate random data for bar chart @@ -46,9 +47,14 @@ func populateMissingConnectionsData(all []ConnectionsPerMonth, current []Connect func createConnectionsChart(name string, allConnections []ConnectionsPerMonth, connectionDatas []ConnectionData) { // create a new line instance line := charts.NewLine() - line.SetGlobalOptions(charts.WithTitleOpts(opts.Title{ - Title: name, - })) + line.SetGlobalOptions( + charts.WithTitleOpts(opts.Title{ + Title: name, + }), + charts.WithTooltipOpts(opts.Tooltip{ + Show: true, + }), + ) // Put data into instance line.SetXAxis(getXaxis(allConnections)) @@ -65,19 +71,26 @@ func createConnectionsChart(name string, allConnections []ConnectionsPerMonth, c Selected: selected, Show: opts.Bool(false), })) + page := components.NewPage() + page.AddCharts(line) f, _ := os.Create("public/" + name + ".html") - line.Render(f) + page.Render(f) } func createTop10KillerChart(chartName string, topKiller []TopKiller) { // create a new bar instance bar := charts.NewBar() - bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{ - Title: chartName, - })) - bar.SetGlobalOptions(charts.WithLegendOpts(opts.Legend{ - Show: opts.Bool(false), - })) + bar.SetGlobalOptions( + charts.WithTitleOpts(opts.Title{ + Title: chartName, + }), + charts.WithTooltipOpts(opts.Tooltip{ + Show: true, + }), + charts.WithLegendOpts(opts.Legend{ + Show: opts.Bool(false), + }), + ) items := make([]opts.BarData, 0) xAxis := make([]string, 0) @@ -87,22 +100,29 @@ func createTop10KillerChart(chartName string, topKiller []TopKiller) { } bar.SetXAxis(xAxis) bar.AddSeries("Kills", items) + page := components.NewPage() + page.AddCharts(bar) // Where the magic happens f, error := os.Create("public/" + chartName + ".html") if error != nil { panic(error) } - bar.Render(f) + page.Render(f) } func createCountPerServerCharts(db *mongo.Database, mongoCtx context.Context, serverList []Server, collectionName string, chartName string) { bar := charts.NewBar() - bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{ - Title: chartName, - })) - bar.SetGlobalOptions(charts.WithLegendOpts(opts.Legend{ - Show: opts.Bool(false), - })) + bar.SetGlobalOptions( + charts.WithTitleOpts(opts.Title{ + Title: chartName, + }), + charts.WithTooltipOpts(opts.Tooltip{ + Show: true, + }), + charts.WithLegendOpts(opts.Legend{ + Show: opts.Bool(false), + }), + ) items := make([]opts.BarData, 0) xAxis := make([]string, 0) for i := 0; i < len(serverList); i++ { @@ -114,21 +134,28 @@ func createCountPerServerCharts(db *mongo.Database, mongoCtx context.Context, se } bar.SetXAxis(xAxis) bar.AddSeries(collectionName, items) + page := components.NewPage() + page.AddCharts(bar) f, error := os.Create("public/" + chartName + ".html") if error != nil { panic(error) } - bar.Render(f) + page.Render(f) } func createPlayTimePerServer(db *mongo.Database, mongoCtx context.Context, serverList []Server) { bar := charts.NewBar() - bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{ - Title: "PlayTime per server this wipe", - })) - bar.SetGlobalOptions(charts.WithLegendOpts(opts.Legend{ - Show: opts.Bool(false), - })) + bar.SetGlobalOptions( + charts.WithTitleOpts(opts.Title{ + Title: "PlayTime per server this wipe", + }), + charts.WithTooltipOpts(opts.Tooltip{ + Show: true, + }), + charts.WithLegendOpts(opts.Legend{ + Show: opts.Bool(false), + }), + ) items := make([]opts.BarData, 0) xAxis := make([]string, 0) total := 0 @@ -142,11 +169,13 @@ func createPlayTimePerServer(db *mongo.Database, mongoCtx context.Context, serve } bar.SetXAxis(xAxis) bar.AddSeries("Cumulative time in hours", items) + page := components.NewPage() + page.AddCharts(bar) f, error := os.Create("public/" + "playtime" + ".html") if error != nil { panic(error) } - bar.Render(f) + page.Render(f) } func genCharts(db *mongo.Database, mongoCtx context.Context) { diff --git a/http.go b/http.go index 18014e6..6cc92b3 100644 --- a/http.go +++ b/http.go @@ -17,6 +17,8 @@ func serveHtml() { fs := http.FileServer(http.Dir("public")) http.Handle("/", fs) + http.Handle("/styles.css", http.FileServer(http.Dir("public"))) + server_addr := os.Getenv("SERVER_ADDR") if server_addr == "" { println("Use SERVER_DEFAULT_ADDR") diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..6abe6ca --- /dev/null +++ b/public/styles.css @@ -0,0 +1,101 @@ +/* Navigation Menu Styles */ +nav { + background-color: #333; + overflow: hidden; +} + +nav a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +nav a:hover { + background-color: #ddd; + color: black; +} + +nav a.active { + background-color: #4CAF50; + color: white; +} + +/* Modern Design Elements */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} + +.container { + width: 80%; + margin: auto; + overflow: hidden; +} + +header { + background: #50b3a2; + color: #fff; + padding-top: 30px; + min-height: 70px; + border-bottom: #e8491d 3px solid; +} + +header a { + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-size: 16px; +} + +header ul { + padding: 0; + list-style: none; +} + +header li { + display: inline; + padding: 0 20px 0 20px; +} + +header #branding { + float: left; +} + +header #branding h1 { + margin: 0; +} + +header nav { + float: right; + margin-top: 10px; +} + +header .highlight, header .current a { + color: #e8491d; + font-weight: bold; +} + +header a:hover { + color: #cccccc; +} + +footer { + background: #333; + color: #fff; + text-align: center; + padding: 30px 0; + margin-top: 30px; +} + +.chart-container { + background: #fff; + padding: 20px; + margin: 20px 0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} diff --git a/template.html b/template.html index 3782c2f..7f5abac 100644 --- a/template.html +++ b/template.html @@ -4,74 +4,118 @@ H1emu Charts - + - +
+
+
+

H1emu Charts

+
+ +
+
- See all connections - - - - - - - +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + From 16660b7868cd236eba3463d6fab62c02b90ab781 Mon Sep 17 00:00:00 2001 From: Quentin Gruber <47059878+QuentinGruber@users.noreply.github.com> Date: Sat, 21 Sep 2024 17:12:18 +0200 Subject: [PATCH 5/8] Add CSS rules and update HTML structure for styling * **styles.css** - Add CSS rules to lower the height of the iframes - Add CSS rules to ensure the nav bar elements are on the same level * **template.html** - Remove inline styles from the body and iframe elements - Add class names to the body and iframe elements for styling --- styles.css | 9 +++++++++ template.html | 18 +++++++++--------- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/styles.css b/styles.css index 6abe6ca..92609a1 100644 --- a/styles.css +++ b/styles.css @@ -99,3 +99,12 @@ footer { margin: 20px 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } + +iframe { + height: 400px; +} + +nav ul { + display: flex; + align-items: center; +} diff --git a/template.html b/template.html index 6aa805f..948eeef 100644 --- a/template.html +++ b/template.html @@ -6,7 +6,7 @@ H1emu Charts - +
@@ -47,7 +47,7 @@

H1emu Charts

-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- +

Welcome to H1emu Charts. Please select a chart from the menu above.