feat(web-analytics): Add localised number formatting and right-aligne…

…d cells (#18116) * Add better table formatting * Use QueryContent to right-align table cells and headings * Just use toLocaleString
PostHog · Oct 20, 2023 · b35ea46 · b35ea46
1 parent b3c4d41
commit b35ea46
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx b/frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx
@@ -11,12 +11,14 @@ import { getQueryFeatures, QueryFeature } from '~/queries/nodes/DataTable/queryF
 export interface ColumnMeta {
     title?: JSX.Element | string
     width?: number
+    align?: 'left' | 'right' | 'center'
 }
 
 export function renderColumnMeta(key: string, query: DataTableNode, context?: QueryContext): ColumnMeta {
     let width: number | undefined
     let title: JSX.Element | string | undefined
     const queryFeatures = getQueryFeatures(query.source)
+    let align: ColumnMeta['align']
 
     if (isHogQLQuery(query.source)) {
         title = key
@@ -43,6 +45,7 @@ export function renderColumnMeta(key: string, query: DataTableNode, context?: Qu
         ) : (
             queryContextColumn?.title ?? column.replace('_', ' ')
         )
+        align = queryContextColumn?.align
     } else if (key === 'person.$delete') {
         title = ''
         width = 0
@@ -71,5 +74,6 @@ export function renderColumnMeta(key: string, query: DataTableNode, context?: Qu
     return {
         title,
         ...(typeof width !== 'undefined' ? { width } : {}),
+        ...(align ? { align } : {}),
     }
 }
diff --git a/frontend/src/queries/types.ts b/frontend/src/queries/types.ts
@@ -32,4 +32,5 @@ interface QueryContextColumn {
     title?: string
     renderTitle?: QueryContextColumnTitleComponent
     render?: QueryContextColumnComponent
+    align?: 'left' | 'right' | 'center' // default is left
 }
diff --git a/frontend/src/scenes/web-analytics/WebDashboard.tsx b/frontend/src/scenes/web-analytics/WebDashboard.tsx
@@ -12,22 +12,14 @@ import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 
 const PercentageCell: QueryContextColumnComponent = ({ value }) => {
     if (typeof value === 'number') {
-        return (
-            <div className="w-full text-right">
-                <span className="flex-1 text-right">{`${(value * 100).toFixed(1)}%`}</span>
-            </div>
-        )
+        return <span>{`${(value * 100).toFixed(1)}%`}</span>
     } else {
         return null
     }
 }
 
 const NumericCell: QueryContextColumnComponent = ({ value }) => {
-    return (
-        <div className="w-full text-right">
-            <span className="flex-1 text-right">{String(value)}</span>
-        </div>
-    )
+    return <span>{typeof value === 'number' ? value.toLocaleString() : String(value)}</span>
 }
 
 const BreakdownValueTitle: QueryContextColumnTitleComponent = (props) => {
@@ -115,14 +107,17 @@ const queryContext: QueryContext = {
         bounce_rate: {
             title: 'Bounce Rate',
             render: PercentageCell,
+            align: 'right',
         },
         views: {
             title: 'Views',
             render: NumericCell,
+            align: 'right',
         },
         visitors: {
             title: 'Visitors',
             render: NumericCell,
+            align: 'right',
         },
     },
 }