Skip to content

Commit 8b71097

Browse files
matt-aitkenmatt-aitken
committed
Chart fullscreen
1 parent 58d0d8e commit 8b71097

File tree

3 files changed

+74
-28
lines changed

3 files changed

+74
-28
lines changed

‎apps/webapp/app/components/code/QueryResultsChart.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ interface QueryResultsChartProps {
2727
rows: Record<string, unknown>[];
2828
columns: OutputColumnMetadata[];
2929
config: ChartConfiguration;
30+
fullLegend?: boolean;
3031
}
3132

3233
interface TransformedData {
@@ -697,6 +698,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
697698
rows,
698699
columns,
699700
config,
701+
fullLegend = false,
700702
}: QueryResultsChartProps) {
701703
const {
702704
xAxisColumn,
@@ -849,7 +851,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
849851
series={series}
850852
labelFormatter={legendLabelFormatter}
851853
showLegend={showLegend}
852-
maxLegendItems={5}
854+
maxLegendItems={fullLegend ? Infinity : 5}
853855
minHeight="300px"
854856
>
855857
<Chart.Bar
@@ -871,7 +873,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
871873
series={series}
872874
labelFormatter={legendLabelFormatter}
873875
showLegend={showLegend}
874-
maxLegendItems={8}
876+
maxLegendItems={fullLegend ? Infinity : 5}
875877
minHeight="300px"
876878
>
877879
<Chart.Line

‎apps/webapp/app/components/primitives/Dialog.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,18 @@ const DialogContent = React.forwardRef<
3838
React.ElementRef<typeof DialogPrimitive.Content>,
3939
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
4040
showCloseButton?: boolean;
41+
fullscreen?: boolean;
4142
}
42-
>(({ className, children, showCloseButton = true, ...props }, ref) => (
43+
>(({ className, children, showCloseButton = true, fullscreen = false, ...props }, ref) => (
4344
<DialogPortal>
4445
<DialogOverlay />
4546
<DialogPrimitive.Content
4647
ref={ref}
4748
className={cn(
48-
"fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background-dimmed px-4 pb-4 pt-2.5 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
49+
"fixed z-50 grid gap-4 border bg-background-dimmed shadow-lg animate-in data-[state=open]:fade-in-90",
50+
fullscreen
51+
? "inset-6 rounded-lg pt-2.5 px-4 pb-4"
52+
: "w-full rounded-b-lg px-4 pb-4 pt-2.5 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
4953
className
5054
)}
5155
{...props}
@@ -117,4 +121,6 @@ export {
117121
DialogFooter,
118122
DialogTitle,
119123
DialogDescription,
124+
DialogPortal,
125+
DialogOverlay
120126
};

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx‎

Lines changed: 62 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/20/solid";
1+
import { ArrowDownTrayIcon, ArrowsPointingInIcon, ArrowsPointingOutIcon, ArrowTrendingUpIcon, ClipboardIcon } from "@heroicons/react/20/solid";
22
import type { OutputColumnMetadata, WhereClauseFallback } from "@internal/clickhouse";
33
import {
44
redirect,
@@ -68,6 +68,8 @@ import { formatQueryStats } from "./utils";
6868
import { requireUser } from "~/services/session.server";
6969
import parse from "parse-duration";
7070
import { SimpleTooltip } from "~/components/primitives/Tooltip";
71+
import { Dialog, DialogContent, DialogHeader, DialogPortal, DialogTrigger } from "~/components/primitives/Dialog";
72+
import { DialogOverlay } from "@radix-ui/react-dialog";
7173

7274
/** Convert a Date or ISO string to ISO string format */
7375
function toISOString(value: Date | string): string {
@@ -719,29 +721,12 @@ export default function Page() {
719721
className="m-0 grid min-h-0 grid-rows-[1fr] overflow-hidden"
720722
>
721723
{results?.rows && results?.columns && results.rows.length > 0 ? (
722-
<ResizablePanelGroup className="h-full overflow-hidden">
723-
<ResizablePanel id="chart-results">
724-
<div className="h-full bg-charcoal-900 p-2 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
725-
<Card>
726-
<Card.Content>
727-
<QueryResultsChart
728-
rows={results.rows}
729-
columns={results.columns}
730-
config={chartConfig}
731-
/>
732-
</Card.Content>
733-
</Card>
734-
</div>
735-
</ResizablePanel>
736-
<ResizableHandle id="chart-split" />
737-
<ResizablePanel id="chart-config" min="50px" default="200px">
738-
<ChartConfigPanel
739-
columns={results.columns}
740-
config={chartConfig}
741-
onChange={handleChartConfigChange}
742-
/>
743-
</ResizablePanel>
744-
</ResizablePanelGroup>
724+
<ResultsChart
725+
rows={results.rows}
726+
columns={results.columns}
727+
chartConfig={chartConfig}
728+
onChartConfigChange={handleChartConfigChange}
729+
/>
745730
) : (
746731
<Paragraph variant="small" className="p-4 text-text-dimmed">
747732
Run a query to visualize results.
@@ -858,3 +843,56 @@ function ScopeItem({ scope }: { scope: QueryScope }) {
858843
return scope;
859844
}
860845
}
846+
847+
function ResultsChart({
848+
rows,
849+
columns,
850+
chartConfig,
851+
onChartConfigChange,
852+
}: {
853+
rows: Record<string, unknown>[];
854+
columns: OutputColumnMetadata[];
855+
chartConfig: ChartConfiguration;
856+
onChartConfigChange: (config: ChartConfiguration) => void;
857+
}) {
858+
const [isOpen, setIsOpen] = useState(false);
859+
860+
return (
861+
<><ResizablePanelGroup className="h-full overflow-hidden">
862+
<ResizablePanel id="chart-results">
863+
<div className="h-full bg-charcoal-900 p-2 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
864+
<Card>
865+
<Card.Header>
866+
<div className="flex items-center gap-1.5">
867+
<ArrowTrendingUpIcon className="size-5 text-indigo-500" />
868+
Chart
869+
</div>
870+
<Card.Accessory>
871+
<Button variant="minimal/small" LeadingIcon={ArrowsPointingOutIcon} onClick={() => setIsOpen(true)} />
872+
</Card.Accessory>
873+
</Card.Header>
874+
<Card.Content>
875+
<QueryResultsChart rows={rows} columns={columns} config={chartConfig} />
876+
</Card.Content>
877+
</Card>
878+
879+
</div>
880+
</ResizablePanel>
881+
<ResizableHandle id="chart-split" />
882+
<ResizablePanel id="chart-config" min="50px" default="200px">
883+
<ChartConfigPanel columns={columns} config={chartConfig} onChange={onChartConfigChange} />
884+
</ResizablePanel>
885+
</ResizablePanelGroup>
886+
<Dialog open={isOpen} onOpenChange={setIsOpen}>
887+
<DialogContent fullscreen>
888+
<DialogHeader>
889+
Chart
890+
</DialogHeader>
891+
<div className="overflow-hidden w-full">
892+
<QueryResultsChart rows={rows} columns={columns} config={chartConfig} fullLegend={true} />
893+
</div>
894+
</DialogContent>
895+
</Dialog>
896+
</>
897+
);
898+
}

0 commit comments

Comments
 (0)