jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - oss review and fixes

Browse source
This commit is contained in:
Shekar Siri 2022-03-08 20:23:12 +01:00
parent 9399a7343f
commit bfd1d05e07
5 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage/CustomMetricPercentage.tsx
View file

@ -1,4 +1,5 @@
import React from 'react'
import { numberWithCommas } from 'App/utils';
interface Props {
data: any;
@ -10,7 +11,7 @@ function CustomMetriPercentage(props: Props) {
const { data = {} } = props;
return (
<div className="flex flex-col items-center justify-center" style={{ height: '240px'}}>
<div className="text-6xl">{data.count}</div>
<div className="text-6xl">{numberWithCommas(data.count)}</div>
<div className="text-lg mt-6">{`${data.previousCount} ( ${data.countProgress}% )`}</div>
<div className="color-gray-medium">from previous period.</div>
</div>

3
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
View file

@ -4,6 +4,7 @@ import { PieChart, Pie, Cell } from 'recharts';
import { Styles } from '../../common';
import { NoContent } from 'UI';
import { filtersMap } from 'Types/filter/newFilter';
import { numberWithCommas } from 'App/utils';
interface Props {
metric: any,
data: any;
@ -107,7 +108,7 @@ function CustomMetricPieChart(props: Props) {
dominantBaseline="central"
fill='#666'
>
{name || 'Unidentified'} {value}
{name || 'Unidentified'} {numberWithCommas(value)}
</text>
);
}}

3
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
View file

@ -4,6 +4,7 @@ import { List } from 'immutable';
import { filtersMap } from 'Types/filter/newFilter';
import { NoContent } from 'UI';
import { tableColumnName } from 'App/constants/filterOptions';
import { numberWithCommas } from 'App/utils';
const getColumns = (metric) => {
return [
@ -16,7 +17,7 @@ const getColumns = (metric) => {
{
key: 'sessionCount',
title: 'Sessions',
toText: sessions => sessions,
toText: sessions => numberWithCommas(sessions),
width: '30%',
},
]

2
frontend/app/components/Dashboard/Widgets/common/Table.js
View file

@ -33,7 +33,7 @@ export default class Table extends React.PureComponent {
}
</div>
<div className={ cn(stl.content, "thin-scrollbar") } style={{ maxHeight: maxHeight + 'px'}}>
{ rows.take(showAll ? 10 : (small ? 3 : 5)).map(row => (
{ rows.take(showAll ? rows.size : (small ? 3 : 5)).map(row => (
<div
className={ cn(rowClass, stl.row, { [stl.small]: small, 'cursor-pointer' : !!onRowClick}) }
key={ row.key }

2
frontend/app/utils.js
View file

@ -33,7 +33,7 @@ export const getUniqueFilter = keys =>
!list.some((item2, j) => j < i &&
keys.every(key => item[ key ] === item2[ key ] && item[ key ] !== undefined));
export const numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
export const numberWithCommas = (x) => x ? x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : 0;
export const numberCompact = (x) => x >= 1000 ? x / 1000 + 'k': x;