feat(cdp): Prettier sparkline (PostHog#24032)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
silentninja · Aug 8, 2024 · d8de129 · d8de129
1 parent c790b93
commit d8de129
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 23 deletions.
diff --git a/frontend/src/lib/components/Sparkline.tsx b/frontend/src/lib/components/Sparkline.tsx
@@ -173,7 +173,6 @@ export function Sparkline({
     const dataPointCount = adjustedData[0].values.length
     const finalClassName = clsx(
         dataPointCount > 16 ? 'w-64' : dataPointCount > 8 ? 'w-48' : dataPointCount > 4 ? 'w-32' : 'w-24',
-        'h-8',
         className
     )
 

diff --git a/frontend/src/queries/nodes/HogQLX/__snapshots__/render.test.tsx.snap b/frontend/src/queries/nodes/HogQLX/__snapshots__/render.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`HogQLX render should render Sparkline 1`] = `
 <ErrorBoundary>
   <Sparkline
+    className="h-8"
     data={
       [
         1,

diff --git a/frontend/src/queries/nodes/HogQLX/render.tsx b/frontend/src/queries/nodes/HogQLX/render.tsx
@@ -35,7 +35,7 @@ export function renderHogQLX(value: any): JSX.Element {
             const { data, type, ...props } = rest
             return (
                 <ErrorBoundary>
-                    <Sparkline {...props} data={data ?? []} type={type} />
+                    <Sparkline className="h-8" {...props} data={data ?? []} type={type} />
                 </ErrorBoundary>
             )
         } else if (tag === 'a') {

diff --git a/frontend/src/scenes/data-management/ingestion-warnings/IngestionWarningsView.tsx b/frontend/src/scenes/data-management/ingestion-warnings/IngestionWarningsView.tsx
@@ -267,7 +267,13 @@ export function IngestionWarningsView(): JSX.Element {
                             {
                                 title: 'Graph',
                                 render: function Render(_, summary: IngestionWarningSummary) {
-                                    return <Sparkline labels={dates} data={summaryDatasets[summary.type]} />
+                                    return (
+                                        <Sparkline
+                                            className="h-8"
+                                            labels={dates}
+                                            data={summaryDatasets[summary.type]}
+                                        />
+                                    )
                                 },
                             },
                             {

diff --git a/frontend/src/scenes/pipeline/AppMetricSparkLine.tsx b/frontend/src/scenes/pipeline/AppMetricSparkLine.tsx
@@ -37,7 +37,7 @@ export function AppMetricSparkLine({ pipelineNode }: { pipelineNode: PipelineNod
             loading={appMetricsResponse === null}
             labels={dates}
             data={displayData}
-            className="max-w-24"
+            className="max-w-24 h-8"
             maximumIndicator={false}
         />
     )
@@ -70,7 +70,7 @@ export function AppMetricSparkLineV2({ pipelineNode }: { pipelineNode: PipelineN
             loading={appMetricsLoading}
             labels={appMetrics?.labels}
             data={displayData}
-            className="max-w-24"
+            className="max-w-24 h-8"
             maximumIndicator={false}
         />
     )

diff --git a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
@@ -9,7 +9,6 @@ import {
     LemonSwitch,
     LemonTextArea,
     Link,
-    Spinner,
     SpinnerOverlay,
 } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
@@ -299,9 +298,9 @@ export function HogFunctionConfiguration({ templateId, id }: { templateId?: stri
                                     This destination will be triggered if <b>any of</b> the above filters match.
                                 </p>
                             </div>
-                            <div className="border bg-bg-light rounded p-3 space-y-2">
+                            <div className="relative border bg-bg-light rounded p-3 space-y-2">
                                 <LemonLabel>Expected volume</LemonLabel>
-                                {sparkline ? (
+                                {sparkline && !sparklineLoading ? (
                                     <>
                                         {sparkline.count > EVENT_THRESHOLD_ALERT_LEVEL ? (
                                             <LemonBanner type="warning">
@@ -321,21 +320,20 @@ export function HogFunctionConfiguration({ templateId, id }: { templateId?: stri
                                                 in the last 7 days.
                                             </p>
                                         )}
-                                        <div className="relative">
-                                            {sparklineLoading ? <Spinner className="absolute bottom-0 left-0" /> : null}
-                                            <Sparkline
-                                                type="bar"
-                                                className="w-full"
-                                                data={[{ name: 'Matching events', values: sparkline.data }]}
-                                                labels={sparkline.labels}
-                                            />
-                                        </div>
+                                        <Sparkline
+                                            type="bar"
+                                            className="w-full h-20"
+                                            data={sparkline.data}
+                                            labels={sparkline.labels}
+                                        />
                                     </>
                                 ) : sparklineLoading ? (
-                                    <div>
-                                        <Spinner />
+                                    <div className="min-h-20">
+                                        <SpinnerOverlay />
                                     </div>
-                                ) : null}
+                                ) : (
+                                    <p>The expected volume could not be calculated</p>
+                                )}
                             </div>
                         </div>
 

diff --git a/frontend/src/scenes/pipeline/hogfunctions/hogFunctionConfigurationLogic.tsx b/frontend/src/scenes/pipeline/hogfunctions/hogFunctionConfigurationLogic.tsx
@@ -46,6 +46,8 @@ export interface HogFunctionConfigurationLogicProps {
     id?: string
 }
 
+export const EVENT_VOLUME_DAILY_WARNING_THRESHOLD = 1000
+
 const NEW_FUNCTION_TEMPLATE: HogFunctionTemplateType = {
     id: 'new',
     name: '',
@@ -210,7 +212,11 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
         ],
 
         sparkline: [
-            null as null | { data: number[]; count: number; labels: string[] },
+            null as null | {
+                data: { name: string; values: number[]; color: string }[]
+                count: number
+                labels: string[]
+            },
             {
                 sparklineQueryChanged: async ({ sparklineQuery }, breakpoint) => {
                     if (values.sparkline === null) {
@@ -220,7 +226,30 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
                     }
                     const result = await performQuery(sparklineQuery)
                     breakpoint()
-                    const data = result?.results?.[0]?.data
+
+                    const dataValues: number[] = result?.results?.[0]?.data ?? []
+                    const [underThreshold, overThreshold] = dataValues.reduce(
+                        (acc, val: number) => {
+                            acc[0].push(Math.min(val, EVENT_VOLUME_DAILY_WARNING_THRESHOLD))
+                            acc[1].push(Math.max(0, val - EVENT_VOLUME_DAILY_WARNING_THRESHOLD))
+
+                            return acc
+                        },
+                        [[], []] as [number[], number[]]
+                    )
+
+                    const data = [
+                        {
+                            name: 'Low volume',
+                            values: underThreshold,
+                            color: 'success',
+                        },
+                        {
+                            name: 'High volume',
+                            values: overThreshold,
+                            color: 'warning',
+                        },
+                    ]
                     const count = result?.results?.[0]?.count
                     const labels = result?.results?.[0]?.labels
                     return { data, count, labels }
@@ -437,7 +466,7 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
                     if (action.id) {
                         actionProperties.push({
                             type: PropertyFilterType.HogQL,
-                            key: hogql`matchesAction(${action.id})`,
+                            key: hogql`matchesAction(${parseInt(action.id)})`,
                         })
                     }
                     properties.values.push({

diff --git a/frontend/src/scenes/session-recordings/errors/SessionRecordingErrors.tsx b/frontend/src/scenes/session-recordings/errors/SessionRecordingErrors.tsx
@@ -48,6 +48,7 @@ export function SessionRecordingErrors(): JSX.Element {
                         render: (_, cluster) => {
                             return (
                                 <Sparkline
+                                    className="h-8"
                                     labels={Object.keys(cluster.sparkline)}
                                     data={Object.values(cluster.sparkline)}
                                 />