m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-06 01:15:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update event property styles.

Browse Source
This commit is contained in:
Mike Cao 2024-08-09 01:41:21 -07:00
parent 8ee37d1246
commit 67874a6282
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/(main)/websites/[websiteId]/events/EventProperties.module.css
View File

@ -1,7 +1,8 @@
.container { .container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 30px; gap: 60px;
margin-bottom: 40px;
} }
.table { .table {
@ -12,3 +13,13 @@
cursor: pointer; cursor: pointer;
color: var(--primary400); color: var(--primary400);
} }
.title {
text-align: center;
font-weight: bold;
margin: 20px 0;
}
.chart {
min-height: 620px;
}

8
src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
View File

@ -1,10 +1,10 @@
import { GridColumn, GridTable } from 'react-basics'; import { GridColumn, GridTable } from 'react-basics';
import { useEventDataProperties, useEventDataValues, useMessages } from 'components/hooks'; import { useEventDataProperties, useEventDataValues, useMessages } from 'components/hooks';
import { LoadingPanel } from 'components/common/LoadingPanel'; import { LoadingPanel } from 'components/common/LoadingPanel';
import styles from './EventProperties.module.css';
import PieChart from 'components/charts/PieChart'; import PieChart from 'components/charts/PieChart';
import { useState } from 'react'; import { useState } from 'react';
import { CHART_COLORS } from 'lib/constants'; import { CHART_COLORS } from 'lib/constants';
import styles from './EventProperties.module.css';
export function EventProperties({ websiteId }: { websiteId: string }) { export function EventProperties({ websiteId }: { websiteId: string }) {
const [propertyName, setPropertyName] = useState(''); const [propertyName, setPropertyName] = useState('');
@ -36,11 +36,11 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
</div> </div>
)} )}
</GridColumn> </GridColumn>
<GridColumn name="total" label={formatMessage(labels.count)} /> <GridColumn name="total" label={formatMessage(labels.count)} alignment="end" />
</GridTable> </GridTable>
{propertyName && ( {propertyName && (
<div> <div className={styles.chart}>
<strong>{propertyName}</strong> <div className={styles.title}>{propertyName}</div>
<PieChart key={propertyName} type="doughnut" data={chartData} /> <PieChart key={propertyName} type="doughnut" data={chartData} />
</div> </div>
)} )}