From bdfc85517f11f175c8b0e45217f42a5a0f9e6d78 Mon Sep 17 00:00:00 2001
From: Lucas Vieira <vieiralucas4@gmail.com>
Date: Wed, 15 Jan 2025 14:33:32 -0300
Subject: [PATCH] implement number and trend into visualization v2

---
 apps/api/src/python/visualizations-v2.ts      |  19 +-
 .../visualizationV2/VisualizationView.tsx     | 176 ++++++++++--------
 .../customBlocks/visualizationV2/index.tsx    |  56 +++++-
 3 files changed, 148 insertions(+), 103 deletions(-)

diff --git a/apps/api/src/python/visualizations-v2.ts b/apps/api/src/python/visualizations-v2.ts
index f24b4560..55ab1d66 100644
--- a/apps/api/src/python/visualizations-v2.ts
+++ b/apps/api/src/python/visualizations-v2.ts
@@ -42,9 +42,9 @@ def _briefer_create_visualization(df, options):
         elif chartType == "histogram":
             raise ValueError("Histogram chart is not supported")
         elif chartType == "trend":
-            raise ValueError("Trend chart is not supported")
+            return "bar", False, False
         elif chartType == "number":
-            raise ValueError("Number chart is not supported")
+            return "bar", False, False
 
     def convert_value(column, value):
         if pd.api.types.is_numeric_dtype(column):
@@ -182,7 +182,7 @@ def _briefer_create_visualization(df, options):
                 serie = {
                   "type": chart_type,
                   "datasetIndex": dataset_index,
-                  "z": i
+                  "z": i,
                 }
 
                 if group:
@@ -306,19 +306,6 @@ export async function createVisualizationV2(
                   if (parsed.success) {
                     switch (parsed.data.type) {
                       case 'log':
-                        console.log(
-                          JSON.stringify(
-                            {
-                              workspaceId,
-                              sessionId,
-                              message: parsed.data.message,
-                              input,
-                            },
-                            null,
-                            2
-                          ),
-                          'createVisualizationV2 log'
-                        )
                         logger().info(
                           {
                             workspaceId,
diff --git a/apps/web/src/components/v2Editor/customBlocks/visualizationV2/VisualizationView.tsx b/apps/web/src/components/v2Editor/customBlocks/visualizationV2/VisualizationView.tsx
index 0865187d..7d211a33 100644
--- a/apps/web/src/components/v2Editor/customBlocks/visualizationV2/VisualizationView.tsx
+++ b/apps/web/src/components/v2Editor/customBlocks/visualizationV2/VisualizationView.tsx
@@ -21,13 +21,17 @@ import useResettableState from '@/hooks/useResettableState'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import debounce from 'lodash.debounce'
 import { findMaxFontSize, measureText } from '@/measureText'
-import { VisualizationV2BlockOutputResult } from '@briefer/editor'
+import {
+  VisualizationV2BlockInput,
+  VisualizationV2BlockOutputResult,
+} from '@briefer/editor'
+import { head, last } from 'ramda'
 
 const FONT_FAMILY = ['Inter', ...twFontFamiliy.sans].join(', ')
 
 interface Props {
   title: string
-  chartType: ChartType
+  input: VisualizationV2BlockInput
   result: VisualizationV2BlockOutputResult | null
   tooManyDataPointsHidden: boolean
   onHideTooManyDataPointsWarning: () => void
@@ -68,7 +72,7 @@ function VisualizationViewV2(props: Props) {
             title={props.title}
             result={props.result}
             renderer={props.renderer}
-            chartType={props.chartType}
+            input={props.input}
             isDashboard={props.isDashboard}
           />
           {props.loading && (
@@ -161,8 +165,8 @@ function VisualizationViewV2(props: Props) {
         </button>
       )}
       {!props.isDashboard &&
-        props.chartType !== 'number' &&
-        props.chartType !== 'trend' && (
+        props.input.chartType !== 'number' &&
+        props.input.chartType !== 'trend' && (
           <button
             className="absolute bottom-0 bg-white rounded-tl-md rounded-br-md border-t border-l border-gray-200 p-1 hover:bg-gray-50 z-10 right-0 text-xs text-gray-400"
             onClick={props.onExportToPNG}
@@ -176,7 +180,7 @@ function VisualizationViewV2(props: Props) {
 
 function BrieferResult(props: {
   title: string
-  chartType: ChartType
+  input: VisualizationV2BlockInput
   isDashboard: boolean
   result: VisualizationV2BlockOutputResult
   renderer?: 'canvas' | 'svg'
@@ -233,17 +237,17 @@ function BrieferResult(props: {
     return <div className="w-full h-full" ref={measureDiv} />
   }
 
-  if (props.chartType === 'trend' || props.chartType === 'number') {
+  if (props.input.chartType === 'trend' || props.input.chartType === 'number') {
     return (
       <div ref={container} className="ph-no-capture h-full">
-        {/* TODO */}
-        {/* <BigNumberVisualization */}
-        {/*   chartType={props.chartType} */}
-        {/*   title={props.title} */}
-        {/*   spec={spec} */}
-        {/*   size={size} */}
-        {/*   isDashboard={props.isDashboard} */}
-        {/* /> */}
+        <BigNumberVisualization
+          title={props.title}
+          chartType={props.input.chartType}
+          input={props.input}
+          result={props.result}
+          size={size}
+          isDashboard={props.isDashboard}
+        />
       </div>
     )
   }
@@ -298,83 +302,93 @@ function extractXYFromSpec(spec: any) {
 
 function BigNumberVisualization(props: {
   title: string
-  chartType: 'trend' | 'number'
-  spec: any
+  input: VisualizationV2BlockInput
+  chartType: 'number' | 'trend'
+  result: VisualizationV2BlockOutputResult
   size: { width: number; height: number }
   isDashboard: boolean
 }) {
-  const { spec, size } = props
+  const { size } = props
 
   try {
-    // @ts-ignore
-    const dataset = spec.datasets[spec.data.name]
-    // @ts-ignore
-    const { x, y } = extractXYFromSpec(spec)
-    const latests = dataset.slice(-2)
+    const x = props.input.xAxis?.name?.toString()
+    const y = head(
+      head(props.input.yAxes)?.series ?? []
+    )?.column?.name.toString()
+    if (!x || !y) {
+      throw new Error('Invalid input')
+    }
+
+    const latests = props.result.dataset[0]?.source.slice(-2)
     const latest = latests.pop()
     const prev = latests.pop()
 
+    if (!latest) {
+      throw new Error('Invalid result')
+    }
+
     const lastValue = {
-      x: latest[x.field],
-      displayX: latest[x.field],
-      y: latest[y.field],
-      displayY: latest[y.field],
+      x: latest[x],
+      displayX: latest[x].toString(),
+      y: Number(latest[y]),
+      displayY: latest[y].toString(),
     }
     const prevValue = {
-      x: prev?.[x.field] ?? 0,
-      displayX: prev?.[x.field] ?? 0,
-      y: prev?.[y.field],
-      displayY: prev?.[y.field] ?? 0,
-    }
-    const yFormat = y.axis.format
-    if (yFormat) {
-      lastValue.displayY = d3Format(yFormat)(lastValue.y)
-      prevValue.displayY = d3Format(yFormat)(prevValue.y)
-    }
-
-    const xFormat = x.axis.format
-    if (xFormat) {
-      lastValue.displayX = d3Format(xFormat)(lastValue.x)
-      prevValue.displayX = d3Format(xFormat)(prevValue.x)
-    } else {
-      const xType = x.type
-      switch (xType) {
-        case 'temporal': {
-          const timeUnit = x.timeUnit
-
-          if (!timeUnit) {
-            lastValue.displayX = new Date(lastValue.x).toLocaleDateString()
-            prevValue.displayX = new Date(prevValue.x).toLocaleDateString()
-          } else {
-            const timeFormats: Record<string, string> = {
-              year: '%b %d, %Y %I:00 %p',
-              yearmonth: '%b %d, %Y %I:00 %p',
-              yearquarter: '%b %d, %Y %I:00 %p',
-              yearweek: '%b %d, %Y %I:00 %p',
-              yearmonthdate: '%b %d, %Y %I:00 %p',
-              yearmonthdatehours: '%b %d, %Y %I:00 %p',
-              yearmonthdatehoursminutes: '%b %d, %Y %I:%M %p',
-              yearmonthdatehoursminutesseconds: '%b %d, %Y %I:%M:%S %p',
-            }
-            const format = timeFormats[timeUnit]
-            if (format) {
-              const formatter = timeFormat(format)
-              lastValue.displayX = formatter(new Date(lastValue.x))
-              prevValue.displayX = formatter(new Date(prevValue.x))
-            }
-          }
-          break
-        }
-        case 'quantitative':
-          lastValue.displayX = d3Format('.2f')(lastValue.x)
-          prevValue.displayX = d3Format('.2f')(prevValue.x)
-          break
-        case 'ordinal':
-          lastValue.displayX = lastValue.x
-          prevValue.displayX = prevValue.x
-          break
-      }
+      x: prev?.[x] ?? 0,
+      displayX: (prev?.[x] ?? 0).toString(),
+      y: Number(prev?.[y] ?? 0),
+      displayY: (prev?.[y] ?? 0).toString(),
     }
+    // const yFormat = y.axis.format
+    // if (yFormat) {
+    //   lastValue.displayY = d3Format(yFormat)(lastValue.y)
+    //   prevValue.displayY = d3Format(yFormat)(prevValue.y)
+    // }
+
+    // TODO: formatting
+    // const xFormat = x.axis.format
+    // if (false) { // xFormat) {
+    //   lastValue.displayX = d3Format(xFormat)(lastValue.x)
+    //   prevValue.displayX = d3Format(xFormat)(prevValue.x)
+    // } else {
+    //   const xType = x.type
+    //   switch (xType) {
+    //     case 'temporal': {
+    //       const timeUnit = x.timeUnit
+
+    //       if (!timeUnit) {
+    //         lastValue.displayX = new Date(lastValue.x).toLocaleDateString()
+    //         prevValue.displayX = new Date(prevValue.x).toLocaleDateString()
+    //       } else {
+    //         const timeFormats: Record<string, string> = {
+    //           year: '%b %d, %Y %I:00 %p',
+    //           yearmonth: '%b %d, %Y %I:00 %p',
+    //           yearquarter: '%b %d, %Y %I:00 %p',
+    //           yearweek: '%b %d, %Y %I:00 %p',
+    //           yearmonthdate: '%b %d, %Y %I:00 %p',
+    //           yearmonthdatehours: '%b %d, %Y %I:00 %p',
+    //           yearmonthdatehoursminutes: '%b %d, %Y %I:%M %p',
+    //           yearmonthdatehoursminutesseconds: '%b %d, %Y %I:%M:%S %p',
+    //         }
+    //         const format = timeFormats[timeUnit]
+    //         if (format) {
+    //           const formatter = timeFormat(format)
+    //           lastValue.displayX = formatter(new Date(lastValue.x))
+    //           prevValue.displayX = formatter(new Date(prevValue.x))
+    //         }
+    //       }
+    //       break
+    //     }
+    //     case 'quantitative':
+    //       lastValue.displayX = d3Format('.2f')(lastValue.x)
+    //       prevValue.displayX = d3Format('.2f')(prevValue.x)
+    //       break
+    //     case 'ordinal':
+    //       lastValue.displayX = lastValue.x
+    //       prevValue.displayX = prevValue.x
+    //       break
+    //   }
+    // }
 
     const minDimension = Math.min(size.width, size.height)
     const fontSize = Math.min(
@@ -382,7 +396,7 @@ function BigNumberVisualization(props: {
         8,
         Math.min(
           findMaxFontSize(
-            lastValue.displayY,
+            lastValue.displayY.toString(),
             minDimension / 3,
             size.width - 32,
             'bold',
diff --git a/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx b/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx
index 6a351dad..8eb610b4 100644
--- a/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx
+++ b/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx
@@ -12,6 +12,7 @@ import {
   getDataframeFromVisualizationV2,
   getVisualizationV2Attributes,
   isVisualizationV2Block,
+  VisualizationV2BlockInput,
 } from '@briefer/editor'
 import { ApiDocument } from '@briefer/database'
 import { FunnelIcon } from '@heroicons/react/24/outline'
@@ -271,10 +272,53 @@ function VisualizationBlockV2(props: Props) {
 
   const onChangeChartType = useCallback(
     (chartType: ChartType) => {
-      props.block.setAttribute('input', {
-        ...attrs.input,
-        chartType,
-      })
+      let nextInput: VisualizationV2BlockInput
+      switch (chartType) {
+        case 'trend':
+        case 'number':
+          const series = attrs.input.yAxes[0]?.series[0] ?? null
+          nextInput = {
+            dataframeName: attrs.input.dataframeName,
+            chartType,
+            xAxis: attrs.input.xAxis,
+            xAxisName: attrs.input.xAxisName,
+            xAxisSort: attrs.input.xAxisSort,
+            xAxisGroupFunction: attrs.input.xAxisGroupFunction,
+            yAxes: series
+              ? [
+                  {
+                    series: [
+                      {
+                        axisName: series.axisName,
+                        chartType: null,
+                        column: series.column,
+                        aggregateFunction: series.aggregateFunction,
+                        groupBy: null,
+                      },
+                    ],
+                  },
+                ]
+              : [],
+            filters: attrs.input.filters,
+          }
+          break
+        case 'groupedColumn':
+        case 'line':
+        case 'area':
+        case 'scatterPlot':
+        case 'stackedColumn':
+        case 'hundredPercentStackedArea':
+        case 'hundredPercentStackedColumn':
+        case 'pie':
+        case 'histogram':
+          nextInput = {
+            ...attrs.input,
+            chartType,
+          }
+          break
+      }
+
+      props.block.setAttribute('input', nextInput)
     },
     [props.block, attrs.input]
   )
@@ -455,7 +499,7 @@ function VisualizationBlockV2(props: Props) {
     return (
       <VisualizationViewV2
         title={attrs.title}
-        chartType={attrs.input.chartType}
+        input={attrs.input}
         tooManyDataPointsHidden={tooManyDataPointsHidden}
         onHideTooManyDataPointsWarning={onHideTooManyDataPointsWarning}
         loading={viewLoading}
@@ -591,7 +635,7 @@ function VisualizationBlockV2(props: Props) {
           />
           <VisualizationViewV2
             title={attrs.title}
-            chartType={attrs.input.chartType}
+            input={attrs.input}
             tooManyDataPointsHidden={tooManyDataPointsHidden}
             onHideTooManyDataPointsWarning={onHideTooManyDataPointsWarning}
             loading={viewLoading}