feat: bi chart defaults (#19042)

* Auto default the BI chart series * Added the date range filter back in
PostHog · Dec 4, 2023 · 79eebd4 · 79eebd4
1 parent 0ad4564
commit 79eebd4
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 9 deletions.
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png
diff --git a/frontend/src/queries/examples.ts b/frontend/src/queries/examples.ts
@@ -317,6 +317,22 @@ const HogQLRaw: HogQLQuery = {
     },
 }
 
+const HogQLForDataVisualization: HogQLQuery = {
+    kind: NodeKind.HogQLQuery,
+    query: `select toDate(timestamp) as timestamp, count()
+from events
+where {filters}
+group by timestamp
+order by timestamp asc
+limit 100`,
+    explain: true,
+    filters: {
+        dateRange: {
+            date_from: '-7d',
+        },
+    },
+}
+
 const HogQLTable: DataTableNode = {
     kind: NodeKind.DataTableNode,
     full: true,
@@ -325,7 +341,7 @@ const HogQLTable: DataTableNode = {
 
 const DataVisualization: DataVisualizationNode = {
     kind: NodeKind.DataVisualizationNode,
-    source: HogQLRaw,
+    source: HogQLForDataVisualization,
 }
 
 /* a subset of examples including only those we can show all users and that don't use HogQL */

diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
@@ -139,7 +139,7 @@ export const LineGraph = (): JSX.Element => {
 
     return (
         <div className="DataVisualization__LineGraph rounded bg-bg-light relative flex flex-col p-2">
-            <div className="flex w-full h-full overflow-hidden">
+            <div className="flex flex-1 w-full h-full overflow-hidden">
                 <canvas ref={canvasRef} />
             </div>
         </div>

diff --git a/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx b/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx
@@ -7,9 +7,11 @@ import { QueryContext } from '~/queries/types'
 import { ChartDisplayType } from '~/types'
 
 import { dataNodeLogic, DataNodeLogicProps } from '../DataNode/dataNodeLogic'
+import { DateRange } from '../DataNode/DateRange'
 import { ElapsedTime } from '../DataNode/ElapsedTime'
 import { Reload } from '../DataNode/Reload'
 import { DataTable } from '../DataTable/DataTable'
+import { QueryFeature } from '../DataTable/queryFeatures'
 import { HogQLQueryEditor } from '../HogQLQuery/HogQLQueryEditor'
 import { Chart } from './Components/Chart'
 import { TableDisplay } from './Components/TableDisplay'
@@ -45,7 +47,7 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX.
         cachedResults: props.cachedResults,
     }
 
-    const { query, visualizationType, showEditingUI } = useValues(builtDataVisualizationLogic)
+    const { query, visualizationType, showEditingUI, sourceFeatures } = useValues(builtDataVisualizationLogic)
 
     const setQuerySource = useCallback(
         (source: HogQLQuery) => props.setQuery?.({ ...props.query, source }),
@@ -73,7 +75,24 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX.
             <BindLogic logic={dataVisualizationLogic} props={dataVisualizationLogicProps}>
                 <div className="DataVisualization">
                     <div className="relative w-full flex flex-col gap-4 flex-1 overflow-hidden">
-                        {showEditingUI && <HogQLQueryEditor query={query.source} setQuery={setQuerySource} embedded />}
+                        {showEditingUI && (
+                            <>
+                                <HogQLQueryEditor query={query.source} setQuery={setQuerySource} embedded />
+                                {sourceFeatures.has(QueryFeature.dateRangePicker) && (
+                                    <div className="flex gap-4 items-center flex-wrap">
+                                        <DateRange
+                                            key="date-range"
+                                            query={query.source}
+                                            setQuery={(query) => {
+                                                if (query.kind === NodeKind.HogQLQuery) {
+                                                    setQuerySource(query)
+                                                }
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </>
+                        )}
                         <LemonDivider className="my-0" />
                         <div className="flex gap-4 justify-between flex-wrap">
                             <div className="flex gap-4 items-center">

diff --git a/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts b/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts
@@ -8,6 +8,7 @@ import { QueryContext } from '~/queries/types'
 import { ChartDisplayType, ItemMode } from '~/types'
 
 import { dataNodeLogic } from '../DataNode/dataNodeLogic'
+import { getQueryFeatures, QueryFeature } from '../DataTable/queryFeatures'
 import type { dataVisualizationLogicType } from './dataVisualizationLogicType'
 
 export interface DataVisualizationLogicProps {
@@ -78,6 +79,7 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
     selectors({
         query: [(_state, props) => [props.query], (query) => query],
         showEditingUI: [(state) => [state.insightMode], (insightMode) => insightMode == ItemMode.Edit],
+        sourceFeatures: [(_, props) => [props.query], (query): Set<QueryFeature> => getQueryFeatures(query.source)],
         isShowingCachedResults: [
             () => [(_, props) => props.cachedResults ?? null],
             (cachedResults: AnyResponseType | null): boolean => !!cachedResults,
@@ -165,14 +167,27 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
             }
         }
     }),
-    subscriptions(({ actions }) => ({
+    subscriptions(({ actions, values }) => ({
         columns: (value, oldValue) => {
-            if (!oldValue || !oldValue.length) {
-                return
+            if (oldValue && oldValue.length) {
+                if (JSON.stringify(value) !== JSON.stringify(oldValue)) {
+                    actions.clearAxis()
+                }
             }
 
-            if (JSON.stringify(value) !== JSON.stringify(oldValue)) {
-                actions.clearAxis()
+            // Set default axis values
+            if (values.response && values.selectedXIndex === null && values.selectedYIndex === null) {
+                const types: string[][] = values.response['types']
+                const yAxisIndex = types.findIndex((n) => n[1].indexOf('Int') !== -1)
+                const xAxisIndex = types.findIndex((n) => n[1].indexOf('Date') !== -1)
+
+                if (yAxisIndex >= 0) {
+                    actions.setYAxis(yAxisIndex)
+                }
+
+                if (xAxisIndex >= 0) {
+                    actions.setXAxis(xAxisIndex)
+                }
             }
         },
     })),