Add commas to large numbers so that they are readable (#4231)

* Add commas to large numbers so that they are readable

* Format numbers in TrendLegend with commas for large numbers so that they are readable

frontend/src/lib/utils.tsx

@@ -840,3 +840,12 @@ export function resolveWebhookService(webhookUrl: string): string {
     }
     return 'your webhook service'
 }
+
+export function maybeAddCommasToInteger(value: any): any {
+    const isNumber = !isNaN(value)
+    if (!isNumber) {
+        return value
+    }
+    const internationalNumberFormat = new Intl.NumberFormat('en-US')
+    return internationalNumberFormat.format(value)
+}

frontend/src/scenes/insights/LineGraph/LineGraph.js

@@ -3,7 +3,7 @@ import { useActions, useValues } from 'kea'
 import Chart from 'chart.js'
 import 'chartjs-adapter-dayjs'
 import PropTypes from 'prop-types'
-import { formatLabel } from '~/lib/utils'
+import { formatLabel, maybeAddCommasToInteger } from '~/lib/utils'
 import { getBarColorFromStatus, getChartColors } from 'lib/colors'
 import { useWindowSize } from 'lib/hooks/useWindowSize'
 import { toast } from 'react-toastify'
@@ -269,10 +269,21 @@ export function LineGraph({
                 }
             },
         }
+
         if (type === 'bar') {
             options.scales = {
                 xAxes: [{ stacked: true, ticks: { fontColor: axisLabelColor } }],
-                yAxes: [{ stacked: true, ticks: { fontColor: axisLabelColor } }],
+                yAxes: [
+                    {
+                        stacked: true,
+                        ticks: {
+                            fontColor: axisLabelColor,
+                            callback: (value) => {
+                                return maybeAddCommasToInteger(value)
+                            },
+                        },
+                    },
+                ],
             }
         } else if (type === 'line') {
             options.scales = {
@@ -306,6 +317,9 @@ export function LineGraph({
                                   min: 0,
                                   fontColor: axisLabelColor,
                                   precision: 0,
+                                  callback: (value) => {
+                                      return maybeAddCommasToInteger(value)
+                                  },
                               },
                     },
                 ],
@@ -321,6 +335,9 @@ export function LineGraph({
                             min: 0,
                             fontColor: axisLabelColor,
                             precision: 0,
+                            callback: (value) => {
+                                return maybeAddCommasToInteger(value)
+                            },
                         },
                     },
                 ],

frontend/src/scenes/insights/TrendLegend/TrendLegend.tsx

@@ -8,6 +8,7 @@ import { MATHS } from 'lib/constants'
 import { cohortsModel } from '~/models'
 import { CohortType } from '~/types'
 import { ColumnsType } from 'antd/lib/table'
+import { maybeAddCommasToInteger } from 'lib/utils'
 
 function formatLabel(item: IndexedTrendResult): string {
     const name = item.action?.name || item.label
@@ -87,7 +88,7 @@ export function TrendLegend(): JSX.Element | null {
         const valueColumns = indexedResults[0].data.map(({}, index: number) => ({
             title: indexedResults[0].labels[index],
             render: function RenderPeriod({}, item: IndexedTrendResult) {
-                return item.data[index]
+                return maybeAddCommasToInteger(item.data[index])
             },
         }))
 

frontend/src/scenes/trends/viz/ActionsPie.tsx

@@ -1,7 +1,7 @@
 import './ActionsPie.scss'
 
 import React, { useState, useEffect } from 'react'
-import { Loading } from 'lib/utils'
+import { Loading, maybeAddCommasToInteger } from 'lib/utils'
 import { LineGraph } from '../../insights/LineGraph'
 import { getChartColors } from 'lib/colors'
 import { useValues, useActions } from 'kea'
@@ -76,7 +76,7 @@ export function ActionsPie({
                 </div>
                 <h1>
                     <span className="label">Total: </span>
-                    {total}
+                    {maybeAddCommasToInteger(total)}
                 </h1>
             </div>
         ) : (

frontend/src/scenes/trends/viz/ActionsTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Loading, formatLabel } from 'lib/utils'
+import { Loading, formatLabel, maybeAddCommasToInteger } from 'lib/utils'
 import { Table } from 'antd'
 import PropTypes from 'prop-types'
 import { useValues } from 'kea'
@@ -19,6 +19,14 @@ export function ActionsTable({
     if (!filters.session && data) {
         data = data.sort((a, b) => b.aggregated_value - a.aggregated_value)
     }
+
+    data = data.map((d: any) => {
+        const key: string = filters.session ? 'count' : 'aggregated_value'
+        const value: any = d[key]
+        d[key + '_formatted'] = maybeAddCommasToInteger(value)
+        return d
+    })
+
     return data && !resultsLoading ? (
         data[0] && (filters.session || data[0].labels) ? (
             <Table
@@ -37,7 +45,7 @@ export function ActionsTable({
                     },
                     {
                         title: filters.session ? 'Value' : 'Count',
-                        dataIndex: filters.session ? 'count' : 'aggregated_value',
+                        dataIndex: filters.session ? 'count_formatted' : 'aggregated_value_formatted',
                     },
                 ]}
                 rowKey="label"