diff --git a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx index 0d1101e3efd..9424b39c1cc 100644 --- a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx +++ b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx @@ -1,6 +1,6 @@ import { Code, Play } from 'lucide-react' import { DragEvent, ReactNode, useEffect, useMemo, useState } from 'react' -import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts' +import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts' import { toast } from 'sonner' import { useParams } from 'common' @@ -9,6 +9,7 @@ import { ChartConfig } from 'components/interfaces/SQLEditor/UtilityPanel/ChartC import Results from 'components/interfaces/SQLEditor/UtilityPanel/Results' import { usePrimaryDatabase } from 'data/read-replicas/replicas-query' import { QueryResponseError, useExecuteSqlMutation } from 'data/sql/execute-sql-mutation' +import dayjs from 'dayjs' import { Parameter, parseParameters } from 'lib/sql-parameters' import { Dashboards } from 'types' import { ChartContainer, ChartTooltip, ChartTooltipContent, cn, CodeBlock, SQL_ICON } from 'ui' @@ -133,9 +134,14 @@ export const QueryBlock = ({ const formattedQueryResult = useMemo(() => { // Make sure Y axis values are numbers return queryResult?.map((row) => { - return Object.fromEntries(Object.entries(row).map(([key, value]) => [key, Number(value)])) + return Object.fromEntries( + Object.entries(row).map(([key, value]) => { + if (key === yKey) return [key, Number(value)] + else return [key, value] + }) + ) }) - }, [queryResult]) + }, [queryResult, yKey]) const [parameterValues, setParameterValues] = useState>({}) const [showWarning, setShowWarning] = useState<'hasWriteOperation' | 'hasUnknownFunctions'>() @@ -151,6 +157,10 @@ export const QueryBlock = ({ const postgresConnectionString = primaryDatabase?.connectionString const readOnlyConnectionString = primaryDatabase?.connection_string_read_only + const chartData = chartSettings.cumulative + ? getCumulativeResults({ rows: formattedQueryResult ?? [] }, chartSettings) + : formattedQueryResult + const { mutate: execute, isLoading: isExecuting } = useExecuteSqlMutation({ onSuccess: (data) => { onResults?.(data.result) @@ -166,6 +176,14 @@ export const QueryBlock = ({ }, }) + const getDateFormat = (key: any) => { + const value = chartData?.[0]?.[key] || '' + if (typeof value === 'number') return 'number' + if (dayjs(value).isValid()) return 'date' + return 'string' + } + const xKeyDateFormat = getDateFormat(xKey) + const handleExecute = () => { if (!sql || isLoading) return @@ -372,21 +390,22 @@ export const QueryBlock = ({ > + xKeyDateFormat === 'date' ? dayjs(value).format('MMM D YYYY HH:mm') : value + } /> + } /> diff --git a/apps/studio/package.json b/apps/studio/package.json index 8e51d3c8ec7..393216104e5 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -107,6 +107,7 @@ "react-inlinesvg": "^4.0.4", "react-intersection-observer": "^9.5.3", "react-markdown": "^8.0.3", + "react-resizable": "3.0.5", "react-simple-maps": "4.0.0-beta.6", "react-use": "^17.5.0", "react-virtualized-auto-sizer": "^1.0.20", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8a87b8add2e..ae1312c5e06 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -796,6 +796,9 @@ importers: react-markdown: specifier: ^8.0.3 version: 8.0.7(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1) + react-resizable: + specifier: 3.0.5 + version: 3.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-simple-maps: specifier: 4.0.0-beta.6 version: 4.0.0-beta.6(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1616,7 +1619,7 @@ importers: dependencies: '@mertasan/tailwindcss-variables': specifier: ^2.2.3 - version: 2.7.0(autoprefixer@10.4.16(postcss@8.4.38))(postcss@8.4.38) + version: 2.7.0(autoprefixer@10.4.16(postcss@8.5.3))(postcss@8.5.3) '@radix-ui/colors': specifier: ^0.1.8 version: 0.1.9 @@ -16598,11 +16601,11 @@ snapshots: '@types/react': 18.3.3 react: 18.3.1 - '@mertasan/tailwindcss-variables@2.7.0(autoprefixer@10.4.16(postcss@8.4.38))(postcss@8.4.38)': + '@mertasan/tailwindcss-variables@2.7.0(autoprefixer@10.4.16(postcss@8.5.3))(postcss@8.5.3)': dependencies: - autoprefixer: 10.4.16(postcss@8.4.38) + autoprefixer: 10.4.16(postcss@8.5.3) lodash: 4.17.21 - postcss: 8.4.38 + postcss: 8.5.3 '@mjackson/node-fetch-server@0.2.0': {} @@ -22895,7 +22898,7 @@ snapshots: debug: 4.4.0(supports-color@8.1.1) enhanced-resolve: 5.17.1 eslint: 8.57.0(supports-color@8.1.1) - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) fast-glob: 3.3.2 get-tsconfig: 4.7.2 @@ -22907,7 +22910,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1): dependencies: debug: 3.2.7(supports-color@8.1.1) optionalDependencies: @@ -22934,7 +22937,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0(supports-color@8.1.1) eslint-import-resolver-node: 0.3.9(supports-color@8.1.1) - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3