Refresh design, refactoring code for much easy templating and code reading #256

bouks · 2024-07-22T14:03:12Z

Enhancements :

new responsive design
replacing png bars by css bars
replacing png clocks by css clocks
choice to have countries flags displayed with image or utf8 char
replacing js tooltip system by css system
add average filesize in pages report and downloads report
code cleaning

New functionnalities :

css vertical bars growing
in-table horizontal bars integrated in each data columns (and with no extra column)
table rows hovering
new world map with hovering animation
css vars for better and easy customisation
stylesheet heritage or replacement
Dark Mode
Ratios table
some expandable tables
AWStats update notification (JSON::Parse modules needed to activate). Notification shows in the footer's page

Updating considerations :

Plugins using "ShowInfoHost" and "ShowInfoURL" MUST now return a string instead of directly printing (for reports)

CONF file changes:

new FlagsType option to choose image or utf countries flags
new ShowMap option to show or not a worldmap in countries reporting
new StylesheetMode option to choose if your stylesheet override awstats stylesheet or if awstats stylesheet is ignored
removing BarHeight option (replaced by a css var in stylesheet)

CONF visual options are migrating to css (BarWidth, colors, ShowBars etc...)

Close issues :

Still WIP but usable.

More and updated screenshots at : #233

Remove need of images for bar rendering. Using only css classes.

Remove bgcolor, replace by newly color- css class introduced by css bars.

bouks · 2024-07-22T14:52:59Z

On the second commit, title is not complete, should be : "set background TH color to css"

Set "font-size: 9px" -> same presentation as day of month

Set font to sans-serif, system-ui Remove duplicates font family Change font size unit to rem unit

Remove pngs, use of full css clean css

IGLOU-EU · 2024-07-23T22:59:49Z

Congrats, review all this old Perl is a nightmare 🤣
I like the "HtmlBar" function, much better.
Why are you keeping some embedded style like "<div style="font-size: 0.5rem;">$YearRequired" ?

bouks · 2024-07-24T00:23:13Z

@IGLOU-EU
Thanks.
I'm not a perl coder, so it's like holidays from my point of view. 😄

For the font-size, i was just converting from px to em while reading the code. But, sure, removing styles, old html attributes and set css classes is good.

We'll see. If @eldy merge the commits and is interested to move further this way (for the 8.0) i can do some rendering stuffs, opening for much easier theming and more modern design. It's not a complex work, it takes just some time.

eldy · 2024-07-24T09:12:16Z

wwwroot/css/awstats_bw.css

-.aws_title  { font: 13px verdana, arial, helvetica, sans-serif; font-weight: bold; background-color: #BBBBBB; text-align: center; margin-bottom: 0; padding: 1px 1px 1px 1px; }
-.aws_blank { font: 13px verdana, arial, helvetica, sans-serif; background-color: #FFFFFF; text-align: center; margin-bottom: 0; padding: 1px 1px 1px 1px; }
+body { body { font: 0.75rem sans-serif, system-ui; background-color: #FFFFFF; margin-top: 0; margin-bottom: 0; } }
+.aws_bodyl { background-image: url(/awstatsicons/other/backleft.png); background-repeat: repeat-y; }


May be we should use $DirIcons here ?

Hi @eldy
It's a copypaste from awstats_default. I don't know the difference between awstats_default.css and awstats_bw.css, and their use except for example, because css is hardcoded in awstats.pl. Maybe we can keep only one.
By the way, did you hardcoded the css for a special purpose ? Or maybe we can include a default "$StyleSheet" from css folder and remove the hardcoded one ?

For the backleft image, maybe we just could remove this image. And the button.gif also.

Another consider i have is to refactor all the calculations for tables. For example, in HTMLMainMonthly, these are written 3 times, and calculated 2 times (or more if there are multiples plugins). We could just use the ShowGraph plugin calculated vars and then dispatch them for graph plugins and rendering bars table and data table.

Refactoring rendering of header, cells and footer (usable for other tables). Add some css classes to the html tags. Bars are integrated to the table (based on $BarWidth, =>100 is cool).

Using refactoring made with month table. Set average footer. Fix averages to calculate only with not empty days. Set averages for Month table.

See previous commit.

Like previous commits. + set flexible

In domain tables. Using UTF8 characters instead.

add options to ShowDomainsStats and defaulted to "UVPHB''. Already Coded by Josep Ruano here : https://github.com/eldy/AWStats/blob/269e9736ce02e65c25a2a4ad3e5be921ea92b878/wwwroot/cgi-bin/awstats.pl#L13217-L13243

- "différents" > "uniques" (plus court, évite les sauts de lignes) - "Heures" > "Heure"

- global update of redesigning, refactoring tasks - reintroducing a world map

- Add folder in installation setup - Update documentation

- rearrange code : declarations => datas manipulations => rendering - avoid loops : days are now parsed only once

resolve the width problems. set flexible, new design.

the 'bk' problem :)

…s" line

+ th not bg background + "remove" some tooltip (old system) waiting to refactor

The cell itself is build by awstats in sub HTMLShowHostInfo Set background to plugins columns Arrange paddings

"top 10" smaller misc table at bottom full width tables on portrait mode style adjustments

returning only content cleaning code

eldy · 2024-08-08T22:54:35Z

I tested your PR,but this is what i got with the unit test

Graph are no more visible.
The summary part does not show any more difference between human and not human traffic
Also it is difficult to see separation between each array.
I have also some html error in some html part.
It is difficult to me to report what's wrong on each change because all changes are cumulated into the same PR making not possible for me to analyse each change and validate them one by one.

bouks · 2024-08-08T23:28:42Z

Hi @eldy

I didn't work on the graph for the moment because i don't use it and it is noted as experimental in the conf file. I though it is "on development", and i saw in issues that google one doesn't work anymore.

Sorry. It seems i don't understand very well the pr system from a fork. I did a pr for the bars and the clock, and after all my commits added to the PR.

PS: i managed to find the problem with the graphapplet plugin (printing directly, and format_byte function i included html in). I fixed it, but i can't test since i have not java in all my browsers (but all is well written in the html code with the fix). I think remember java applets in browser have been discontinued for some years.

ShaiMagal · 2024-08-13T22:17:14Z

"Ofttopic" - problem with charts is already discussed here #249 (not solved, there is necessary to change "chart library")

dannybeckett · 2025-01-02T16:29:08Z

UTF8 country flags is a great idea. They don't display on Windows very well, but it is very easy to fix using https://github.com/talkjs/country-flag-emoji-polyfill

bouks added 2 commits July 22, 2024 15:56

Remove images bars, replace by css only

775a36b

Remove need of images for bar rendering. Using only css classes.

set background color to css

7311f13

Remove bgcolor, replace by newly color- css class introduced by css bars.

bouks added 6 commits July 22, 2024 17:37

Add color vars to default css, saving lines

ddaf8ed

Reduce year size in month bars stats

2c4baee

Set "font-size: 9px" -> same presentation as day of month

Change font definitions

f384725

Set font to sans-serif, system-ui Remove duplicates font family Change font size unit to rem unit

Remove use of png for clock

7e78e50

Remove pngs, use of full css clean css

Fix clock centering

b4f127f

Fix perl var in css files (removing)

216129b

bouks mentioned this pull request Jul 23, 2024

Modernizing the AWStats Interface #233

Open

eldy reviewed Jul 24, 2024

View reviewed changes

bouks added 8 commits July 25, 2024 05:21

Refactoring & redesigning month stats data table

b9191bc

Refactoring rendering of header, cells and footer (usable for other tables). Add some css classes to the html tags. Bars are integrated to the table (based on $BarWidth, =>100 is cool).

Update Days of month table (and month)

c690909

Using refactoring made with month table. Set average footer. Fix averages to calculate only with not empty days. Set averages for Month table.

Update Days of week table

79af55a

See previous commit.

Update hours table

4bd18e3

Like previous commits. + set flexible

Fix Byte Format

982f36a

Remove the need of country flag pngs

cf36f85

In domain tables. Using UTF8 characters instead.

clocks night and day

6a28b2b

Adding effects on lines hovering

d8b822a

bouks changed the title ~~Remove images bars, replace by css only~~ Refresh design, refactoring code for much easy templating and code reading Jul 25, 2024

bouks added 8 commits July 25, 2024 23:38

activate U and V stats to domains/country table

fd62ccb

add options to ShowDomainsStats and defaulted to "UVPHB''. Already Coded by Josep Ruano here : https://github.com/eldy/AWStats/blob/269e9736ce02e65c25a2a4ad3e5be921ea92b878/wwwroot/cgi-bin/awstats.pl#L13217-L13243

change translations

1650400

- "différents" > "uniques" (plus court, évite les sauts de lignes) - "Heures" > "Heure"

Update Countries table

ad83407

- global update of redesigning, refactoring tasks - reintroducing a world map

Introduce img folder (worldmap)

1202bb5

- Add folder in installation setup - Update documentation

Cleaning Days of Month process

a4d5dd6

- rearrange code : declarations => datas manipulations => rendering - avoid loops : days are now parsed only once

Fix countries

bcc9e1b

resolve the width problems. set flexible, new design.

Fix bars

9c74eab

the 'bk' problem :)

Fix space/maj

d1d5a5d

bouks added 26 commits August 6, 2024 05:48

Mainhost + ShowHostInfo -> return instead of print

3d839fe

Fix clock icon retarding 1 hour

2a167d2

(css) Fix data was uppercase on countries

c1f0719

(css) Dark mode more darker

f01bf8f

section help button (tooltip)

07ceef0

styling section links

62d7a54

shorten "Taille moyenne" > "Poids moyen"

751713a

pages-url table - add data (bandwidth) column and set bars for "other…

e581b26

…s" line

plugins geoip/geoip_city_maxmind returning html string

7b48ab2

+ th not bg background + "remove" some tooltip (old system) waiting to refactor

Add links to free geoip databases

3f7aa7b

Add option for flags ( image | utf8). default : 'image"

6b10841

Add conf option to show worldmap or not

31e4827

(js) Don't change worldmap's top in detail page if showmap = 0

7f9b6fd

"Add" Message[56] -> '-' for "no result" (geoip_city_maxmind, geoip)

fa88154

geoip_city_maxmind, geoip, return only content

1d9b27b

The cell itself is build by awstats in sub HTMLShowHostInfo Set background to plugins columns Arrange paddings

(geo) change functions doc , remove span

cbea00f

css gui

6d3b940

"top 10" smaller misc table at bottom full width tables on portrait mode style adjustments

Update Geo plugins ShowInfoHost subroutine

17a7c2c

returning only content cleaning code

Conform hosts detail pages + some general colors and css

eb94291

Fix title url details and remove sub HTMLShowURLDetail

5c280c5

Remove sub HTMLShowDownloads

3c6b2df

Remove sub HTMLShowDomains

c6288cc

Conform robots details pages and remove sub HTMLShowRobots

2202b50

Change Format_Byte font size depending B, KB, MB...

40752f5

(css) mod bytes sizes + mod hover anim

8ae32a9

Set html5 doctype and utf-8 charset + some css

8a4114f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refresh design, refactoring code for much easy templating and code reading #256

Refresh design, refactoring code for much easy templating and code reading #256

bouks commented Jul 22, 2024 •

edited

Loading

bouks commented Jul 22, 2024

IGLOU-EU commented Jul 23, 2024

bouks commented Jul 24, 2024

eldy Jul 24, 2024

bouks Jul 24, 2024

eldy commented Aug 8, 2024 •

edited

Loading

bouks commented Aug 8, 2024 •

edited

Loading

ShaiMagal commented Aug 13, 2024 •

edited

Loading

dannybeckett commented Jan 2, 2025

Refresh design, refactoring code for much easy templating and code reading #256

Are you sure you want to change the base?

Refresh design, refactoring code for much easy templating and code reading #256

Conversation

bouks commented Jul 22, 2024 • edited Loading

bouks commented Jul 22, 2024

IGLOU-EU commented Jul 23, 2024

bouks commented Jul 24, 2024

eldy Jul 24, 2024

Choose a reason for hiding this comment

bouks Jul 24, 2024

Choose a reason for hiding this comment

eldy commented Aug 8, 2024 • edited Loading

bouks commented Aug 8, 2024 • edited Loading

ShaiMagal commented Aug 13, 2024 • edited Loading

dannybeckett commented Jan 2, 2025

bouks commented Jul 22, 2024 •

edited

Loading

eldy commented Aug 8, 2024 •

edited

Loading

bouks commented Aug 8, 2024 •

edited

Loading

ShaiMagal commented Aug 13, 2024 •

edited

Loading