multiple breakpoints

This commit is contained in:
Carl-Gerhard Lindesvärd
2024-06-20 23:25:18 +02:00
parent c07f0d302c
commit cf8617e809
48 changed files with 908 additions and 432 deletions

View File

@@ -1,4 +1,4 @@
import { ChartSwitchShortcut } from '@/components/report/chart';
import { ChartRootShortcut } from '@/components/report/chart';
import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
import type { IChartEvent } from '@openpanel/validation';
@@ -26,7 +26,7 @@ export function EventsPerDayChart({ projectId, filters, events }: Props) {
<span className="title">Events per day</span>
</WidgetHead>
<WidgetBody>
<ChartSwitchShortcut
<ChartRootShortcut
projectId={projectId}
range="30d"
chartType="histogram"

View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import type { Dispatch, SetStateAction } from 'react';
import { ChartSwitchShortcut } from '@/components/report/chart';
import { ChartRootShortcut } from '@/components/report/chart';
import { Button } from '@/components/ui/button';
import { KeyValue } from '@/components/ui/key-value';
import {
@@ -195,7 +195,7 @@ export function EventDetails({ event, open, setOpen }: Props) {
Show all
</button>
</div>
<ChartSwitchShortcut
<ChartRootShortcut
projectId={event.projectId}
chartType="histogram"
events={[

View File

@@ -1,7 +1,7 @@
'use client';
import { memo } from 'react';
import { ChartSwitch } from '@/components/report/chart';
import { ChartRoot } from '@/components/report/chart';
import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
import type { IChartProps } from '@openpanel/validation';
@@ -85,7 +85,7 @@ const ProfileCharts = ({ profileId, projectId }: Props) => {
<span className="title">Page views</span>
</WidgetHead>
<WidgetBody className="flex gap-2">
<ChartSwitch {...pageViewsChart} />
<ChartRoot {...pageViewsChart} />
</WidgetBody>
</Widget>
<Widget className="col-span-3 w-full">
@@ -93,7 +93,7 @@ const ProfileCharts = ({ profileId, projectId }: Props) => {
<span className="title">Events per day</span>
</WidgetHead>
<WidgetBody className="flex gap-2">
<ChartSwitch {...eventsChart} />
<ChartRoot {...eventsChart} />
</WidgetBody>
</Widget>
</>

View File

@@ -2,7 +2,7 @@
import { useEffect } from 'react';
import { StickyBelowHeader } from '@/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header';
import { ChartSwitch } from '@/components/report/chart';
import { ChartRoot } from '@/components/report/chart';
import { ReportChartType } from '@/components/report/ReportChartType';
import { ReportInterval } from '@/components/report/ReportInterval';
import { ReportLineType } from '@/components/report/ReportLineType';
@@ -99,7 +99,7 @@ export default function ReportEditor({
</StickyBelowHeader>
<div className="flex flex-col gap-4 p-4" id="report-editor">
{report.ready && (
<ChartSwitch {...report} projectId={projectId} editMode />
<ChartRoot {...report} projectId={projectId} editMode />
)}
</div>
<SheetContent className="!max-w-lg" side="left">