stats styling fixes

oatear · Jul 22, 2023 · 8939a4c · 8939a4c
1 parent 6882c0c
commit 8939a4c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/cider-app/src/app/entity-table/entity-table.component.html b/cider-app/src/app/entity-table/entity-table.component.html
@@ -194,26 +194,27 @@
         <button pButton pRipple label="Import" icon="pi pi-check" class="p-button-text" (click)="confirmImport(dt)"></button>
     </ng-template>
 </p-dialog>
-<p-dialog [header]="'Token Stats (Top ' + statsTopX + ')'" [(visible)]="statsVisible" [style]="{width: '450px'}" [modal]="true">
+<p-dialog [header]="'Token Stats (Top ' + statsTopX + ')'" [(visible)]="statsVisible" [style]="{width: '50%'}" 
+    [modal]="true" class="stats-dialog">
     <ng-template pTemplate="content">
-        <div class="token-stats">
+        <div class="token-stats token-table">
             <div class="token-row token-header">
-                <div>Field</div>
+                <div class="field">Field</div>
                 <div>Token</div>
                 <div>Count</div>
                 <div>Copy Count</div>
             </div>
             <ng-container *ngFor="let stat of stats">
                 <div class="token-row">
-                    <div><h3>{{stat.header}}</h3></div>
-                    <div></div>
+                    <div class="field"><h3>{{stat.header}}</h3></div>
+                    <div class="token"></div>
                     <div></div>
                     <div></div>
                 </div>
                 <ng-container *ngFor="let token of stat.tokens">
                     <div class="token-row">
-                        <div></div>
-                        <div>{{token.token}}</div>
+                        <div class="field"></div>
+                        <div class="token"><span>{{token.token}}</span></div>
                         <div>{{token.count}}</div>
                         <div>{{token.copiesCount}}</div>
                     </div>

diff --git a/cider-app/src/app/entity-table/entity-table.component.scss b/cider-app/src/app/entity-table/entity-table.component.scss
@@ -141,16 +141,43 @@
     color: var(--text-color);
 }
 
-.token-stats {
+:host ::ng-deep .stats-dialog .p-dialog-content {
+    padding-top: 0;
+
+}
+
+.token-stats.token-table {
+    display: table;
+    width: 100%;
     .token-row {
         display: table-row;
         &.token-header {
             color: #5c7089;
+            top: 0;
+            position: sticky;
+            background-color: #2b313d;
+            & > div {
+                padding-top: 1rem;
+                padding-bottom: 1rem;
+            }
         }
         & > div {
             display: table-cell;
             padding-left: 5px;
             padding-right: 5px;
+            max-width: 200px;
+            h3 {
+                color: #5c7089;
+            }
+            span {
+                background-color: #333e4d;
+                border-radius: 10px;
+                padding: 2px;
+                padding-left: 7px;
+                padding-right: 7px;
+                margin: 1px;
+                display: inline-block;
+            }
         }
     }
 }
diff --git a/cider-app/src/app/entity-table/entity-table.component.ts b/cider-app/src/app/entity-table/entity-table.component.ts
@@ -178,7 +178,7 @@ export class EntityTableComponent<Entity, Identifier extends string | number> im
         const value = record[column.field];
         if (value) {
           const strValue = '' + value;
-          strValue.replace(/[<][^>]*[>]/g, '').split(/ |\n|\r/).filter(str => str).forEach(token => {
+          strValue.replace(/[<][^>]*[>]|["'.,]/g, '').split(/ |\n|\r/).filter(str => str).forEach(token => {
             const tokenStat = tokenStats.get(token);
             if (tokenStat) {
               tokenStats.set(token, 
@@ -192,7 +192,6 @@ export class EntityTableComponent<Entity, Identifier extends string | number> im
         }
       });
       const tokens = Array.from(tokenStats.values()).sort((a, b) => b.count - a.count);
-      console.log('tokens:', tokens);
       return {
         header: column.header,
         tokens: tokens