zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web: edit report and edit dashboard

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2023-12-17 13:44:45 +01:00
parent 5ae8decbc0
commit fdb9b912d7
12 changed files with 284 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/navbar/NavbarMenu.tsx
View File

@@ -27,7 +27,9 @@ export function NavbarMenu() {
return (
<div className={cn('flex gap-1 items-center text-sm', 'max-sm:flex-col')}>
{params.project && (
<Item href={`/${params.organization}/${params.project}`}>Home</Item>
<Item href={`/${params.organization}/${params.project}`}>
Dashboards
</Item>
)}
{params.project && (
<Item href={`/${params.organization}/${params.project}/events`}>

14
apps/web/src/components/report/chart/index.tsx
View File

@@ -47,7 +47,7 @@ export const Chart = memo(
if (!enabled) {
return (
<ChartAnimationContainer>
<ChartAnimation name="ballon" className="w-96 mx-auto" />
<ChartAnimation name="ballon" className="max-w-sm w-fill mx-auto" />
<p className="text-center font-medium">
Please select at least one event to see the chart.
</p>
@@ -58,7 +58,7 @@ export const Chart = memo(
if (chart.isFetching) {
return (
<ChartAnimationContainer>
<ChartAnimation name="airplane" className="w-96 mx-auto" />
<ChartAnimation name="airplane" className="max-w-sm w-fill mx-auto" />
<p className="text-center font-medium">Loading...</p>
</ChartAnimationContainer>
);
@@ -67,20 +67,22 @@ export const Chart = memo(
if (chart.isError) {
return (
<ChartAnimationContainer>
<ChartAnimation name="noData" className="w-96 mx-auto" />
<ChartAnimation name="noData" className="max-w-sm w-fill mx-auto" />
<p className="text-center font-medium">Something went wrong...</p>
</ChartAnimationContainer>
);
}
if (!chart.isSuccess) {
return <ChartAnimation name="ballon" className="w-96 mx-auto" />;
return (
<ChartAnimation name="ballon" className="max-w-sm w-fill mx-auto" />
);
}
if (!anyData) {
return (
<ChartAnimationContainer>
<ChartAnimation name="noData" className="w-96 mx-auto" />
<ChartAnimation name="noData" className="max-w-sm w-fill mx-auto" />
<p className="text-center font-medium">No data</p>
</ChartAnimationContainer>
);
@@ -96,7 +98,7 @@ export const Chart = memo(
return (
<ChartAnimationContainer>
<ChartAnimation name="ballon" className="w-96 mx-auto" />
<ChartAnimation name="ballon" className="max-w-sm w-fill mx-auto" />
<p className="text-center font-medium">
Chart type &quot;{chartType}&quot; is not supported yet.
</p>

9
apps/web/src/components/report/reportSlice.ts
View File

@@ -19,7 +19,7 @@ type InitialState = IChartInput & {
// First approach: define the initial state using that type
const initialState: InitialState = {
dirty: false,
name: 'screen_view',
name: 'Untitled',
chartType: 'linear',
interval: 'day',
breakdowns: [],
@@ -30,7 +30,7 @@ const initialState: InitialState = {
};
export const reportSlice = createSlice({
name: 'counter',
name: 'report',
initialState,
reducers: {
resetDirty(state) {
@@ -50,6 +50,10 @@ export const reportSlice = createSlice({
dirty: false,
};
},
setName(state, action: PayloadAction<string>) {
state.dirty = true;
state.name = action.payload;
},
// Events
addEvent: (state, action: PayloadAction<Omit<IChartEvent, 'id'>>) => {
state.dirty = true;
@@ -162,6 +166,7 @@ export const reportSlice = createSlice({
export const {
reset,
setReport,
setName,
addEvent,
removeEvent,
changeEvent,