feat(bi): Added the ability to customise table columns

frontend/src/queries/nodes/DataVisualization/Components/SeriesTab.tsx

@@ -23,11 +23,23 @@ import { AxisSeries, dataVisualizationLogic } from '../dataVisualizationLogic'
 import { ySeriesLogic, YSeriesLogicProps, YSeriesSettingsTab } from './ySeriesLogic'
 
 export const SeriesTab = (): JSX.Element => {
-    const { columns, numericalColumns, xData, yData, responseLoading } = useValues(dataVisualizationLogic)
+    const { columns, numericalColumns, xData, yData, responseLoading, isTableVisualization, tabularColumns } =
+        useValues(dataVisualizationLogic)
     const { updateXSeries, addYSeries } = useActions(dataVisualizationLogic)
 
     const hideAddYSeries = yData.length >= numericalColumns.length
 
+    if (isTableVisualization) {
+        return (
+            <div className="flex flex-col w-full">
+                <LemonLabel>Columns</LemonLabel>
+                {tabularColumns.map((series, index) => (
+                    <YSeries series={series} index={index} key={`${series.column.name}-${index}`} />
+                ))}
+            </div>
+        )
+    }
+
     const options = columns.map(({ name, type }) => ({
         value: name,
         label: (
@@ -75,8 +87,9 @@ export const SeriesTab = (): JSX.Element => {
 }
 
 const YSeries = ({ series, index }: { series: AxisSeries<number>; index: number }): JSX.Element => {
-    const { columns, numericalColumns, responseLoading, dataVisualizationProps } = useValues(dataVisualizationLogic)
-    const { updateYSeries, deleteYSeries } = useActions(dataVisualizationLogic)
+    const { columns, numericalColumns, responseLoading, dataVisualizationProps, isTableVisualization } =
+        useValues(dataVisualizationLogic)
+    const { updateSeriesIndex, deleteYSeries } = useActions(dataVisualizationLogic)
 
     const seriesLogicProps: YSeriesLogicProps = { series, seriesIndex: index, dataVisualizationProps }
     const seriesLogic = ySeriesLogic(seriesLogicProps)
@@ -87,22 +100,25 @@ const YSeries = ({ series, index }: { series: AxisSeries<number>; index: number
     const { isDarkModeOn } = useValues(themeLogic)
     const seriesColor = getSeriesColor(index)
 
-    const options = numericalColumns.map(({ name, type }) => ({
+    const columnsInOptions = isTableVisualization ? columns : numericalColumns
+    const options = columnsInOptions.map(({ name, type }) => ({
         value: name,
         label: (
             <div className="items-center flex flex-1">
-                <SeriesGlyph
-                    style={{
-                        borderColor: seriesColor,
-                        color: seriesColor,
-                        backgroundColor: isDarkModeOn
-                            ? RGBToRGBA(lightenDarkenColor(seriesColor, -20), 0.3)
-                            : hexToRGBA(seriesColor, 0.2),
-                    }}
-                    className="mr-2"
-                >
-                    <></>
-                </SeriesGlyph>
+                {!isTableVisualization && (
+                    <SeriesGlyph
+                        style={{
+                            borderColor: seriesColor,
+                            color: seriesColor,
+                            backgroundColor: isDarkModeOn
+                                ? RGBToRGBA(lightenDarkenColor(seriesColor, -20), 0.3)
+                                : hexToRGBA(seriesColor, 0.2),
+                        }}
+                        className="mr-2"
+                    >
+                        <></>
+                    </SeriesGlyph>
+                )}
                 {series.settings?.display?.label && series.column.name === name ? series.settings.display.label : name}
                 <LemonTag className="ml-2" type="default">
                     {type.name}
@@ -121,7 +137,7 @@ const YSeries = ({ series, index }: { series: AxisSeries<number>; index: number
                 onChange={(value) => {
                     const column = columns.find((n) => n.name === value)
                     if (column) {
-                        updateYSeries(index, column.name)
+                        updateSeriesIndex(index, column.name)
                     }
                 }}
             />
@@ -156,94 +172,108 @@ const YSeries = ({ series, index }: { series: AxisSeries<number>; index: number
                     disabledReasonWrapperClass="flex"
                 />
             </Popover>
-            <LemonButton
-                key="delete"
-                icon={<IconTrash />}
-                status="danger"
-                title="Delete Y-series"
-                noPadding
-                onClick={() => deleteYSeries(index)}
-            />
+            {!isTableVisualization && (
+                <LemonButton
+                    key="delete"
+                    icon={<IconTrash />}
+                    status="danger"
+                    title="Delete Y-series"
+                    noPadding
+                    onClick={() => deleteYSeries(index)}
+                />
+            )}
         </div>
     )
 }
 
 const YSeriesFormattingTab = ({ ySeriesLogicProps }: { ySeriesLogicProps: YSeriesLogicProps }): JSX.Element => {
     return (
         <Form logic={ySeriesLogic} props={ySeriesLogicProps} formKey="formatting" className="space-y-4">
-            <LemonField name="style" label="Style" className="gap-1">
-                <LemonSelect
-                    options={[
-                        { value: 'none', label: 'None' },
-                        { value: 'number', label: 'Number' },
-                        { value: 'percent', label: 'Percentage' },
-                    ]}
-                />
-            </LemonField>
+            {ySeriesLogicProps.series.column.type.isNumerical && (
+                <LemonField name="style" label="Style" className="gap-1">
+                    <LemonSelect
+                        options={[
+                            { value: 'none', label: 'None' },
+                            { value: 'number', label: 'Number' },
+                            { value: 'percent', label: 'Percentage' },
+                        ]}
+                    />
+                </LemonField>
+            )}
             <LemonField name="prefix" label="Prefix">
                 <LemonInput placeholder="$" />
             </LemonField>
             <LemonField name="suffix" label="Suffix">
                 <LemonInput placeholder="USD" />
             </LemonField>
-            <LemonField name="decimalPlaces" label="Decimal places">
-                <LemonInput type="number" min={0} />
-            </LemonField>
+            {ySeriesLogicProps.series.column.type.isNumerical && (
+                <LemonField name="decimalPlaces" label="Decimal places">
+                    <LemonInput type="number" min={0} />
+                </LemonField>
+            )}
         </Form>
     )
 }
 
 const YSeriesDisplayTab = ({ ySeriesLogicProps }: { ySeriesLogicProps: YSeriesLogicProps }): JSX.Element => {
+    const { isTableVisualization } = useValues(dataVisualizationLogic)
+
     return (
         <Form logic={ySeriesLogic} props={ySeriesLogicProps} formKey="display" className="space-y-4">
             <LemonField name="label" label="Label">
                 <LemonInput />
             </LemonField>
-            <LemonField name="trendLine" label="Trend line">
-                {({ value, onChange }) => <LemonSwitch checked={value} onChange={(newValue) => onChange(newValue)} />}
-            </LemonField>
-            <LemonField name="yAxisPosition" label="Y-axis position">
-                {({ value, onChange }) => (
-                    <LemonSegmentedButton
-                        value={value}
-                        className="w-full"
-                        options={[
-                            {
-                                label: 'Left',
-                                value: 'left',
-                            },
-                            {
-                                label: 'Right',
-                                value: 'right',
-                            },
-                        ]}
-                        onChange={(newValue) => onChange(newValue)}
-                    />
-                )}
-            </LemonField>
-            <LemonField name="displayType" label="Display type">
-                {({ value, onChange }) => (
-                    <LemonSegmentedButton
-                        value={value}
-                        className="w-full"
-                        options={[
-                            {
-                                label: 'Auto',
-                                value: 'auto',
-                            },
-                            {
-                                label: 'Line',
-                                value: 'line',
-                            },
-                            {
-                                label: 'Bar',
-                                value: 'bar',
-                            },
-                        ]}
-                        onChange={(newValue) => onChange(newValue)}
-                    />
-                )}
-            </LemonField>
+            {!isTableVisualization && (
+                <>
+                    <LemonField name="trendLine" label="Trend line">
+                        {({ value, onChange }) => (
+                            <LemonSwitch checked={value} onChange={(newValue) => onChange(newValue)} />
+                        )}
+                    </LemonField>
+                    <LemonField name="yAxisPosition" label="Y-axis position">
+                        {({ value, onChange }) => (
+                            <LemonSegmentedButton
+                                value={value}
+                                className="w-full"
+                                options={[
+                                    {
+                                        label: 'Left',
+                                        value: 'left',
+                                    },
+                                    {
+                                        label: 'Right',
+                                        value: 'right',
+                                    },
+                                ]}
+                                onChange={(newValue) => onChange(newValue)}
+                            />
+                        )}
+                    </LemonField>
+                    <LemonField name="displayType" label="Display type">
+                        {({ value, onChange }) => (
+                            <LemonSegmentedButton
+                                value={value}
+                                className="w-full"
+                                options={[
+                                    {
+                                        label: 'Auto',
+                                        value: 'auto',
+                                    },
+                                    {
+                                        label: 'Line',
+                                        value: 'line',
+                                    },
+                                    {
+                                        label: 'Bar',
+                                        value: 'bar',
+                                    },
+                                ]}
+                                onChange={(newValue) => onChange(newValue)}
+                            />
+                        )}
+                    </LemonField>
+                </>
+            )}
         </Form>
     )
 }

frontend/src/queries/nodes/DataVisualization/Components/SideBar.tsx

@@ -1,20 +1,30 @@
 import './SideBar.scss'
 
-import { LemonTabs } from '@posthog/lemon-ui'
+import { LemonTab, LemonTabs } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 
+import { ChartDisplayType } from '~/types'
+
 import { dataVisualizationLogic, SideBarTab } from '../dataVisualizationLogic'
 import { DisplayTab } from './DisplayTab'
 import { SeriesTab } from './SeriesTab'
 
-const TABS_TO_CONTENT = {
+type TabContent = {
+    label: string
+    content: JSX.Element
+    shouldShow: (displayType: ChartDisplayType) => boolean
+}
+
+const TABS_TO_CONTENT: Record<SideBarTab, TabContent> = {
     [SideBarTab.Series]: {
         label: 'Series',
         content: <SeriesTab />,
+        shouldShow: (): boolean => true,
     },
     [SideBarTab.Display]: {
         label: 'Display',
         content: <DisplayTab />,
+        shouldShow: (displayType: ChartDisplayType): boolean => displayType !== ChartDisplayType.ActionsTable,
     },
 }
 
@@ -23,18 +33,16 @@ const ContentWrapper = ({ children }: { children: JSX.Element }): JSX.Element =>
 }
 
 export const SideBar = (): JSX.Element => {
-    const { activeSideBarTab } = useValues(dataVisualizationLogic)
+    const { activeSideBarTab, visualizationType } = useValues(dataVisualizationLogic)
     const { setSideBarTab } = useActions(dataVisualizationLogic)
 
-    return (
-        <LemonTabs
-            activeKey={activeSideBarTab}
-            onChange={(tab) => setSideBarTab(tab as SideBarTab)}
-            tabs={Object.values(TABS_TO_CONTENT).map((tab, index) => ({
-                label: tab.label,
-                key: Object.keys(TABS_TO_CONTENT)[index],
-                content: <ContentWrapper>{tab.content}</ContentWrapper>,
-            }))}
-        />
-    )
+    const tabs: LemonTab<string>[] = Object.values(TABS_TO_CONTENT)
+        .filter((n) => n.shouldShow(visualizationType))
+        .map((tab, index) => ({
+            label: tab.label,
+            key: Object.keys(TABS_TO_CONTENT)[index],
+            content: <ContentWrapper>{tab.content}</ContentWrapper>,
+        }))
+
+    return <LemonTabs activeKey={activeSideBarTab} onChange={(tab) => setSideBarTab(tab as SideBarTab)} tabs={tabs} />
 }

frontend/src/queries/nodes/DataVisualization/Components/Table.tsx

@@ -0,0 +1,48 @@
+import { LemonTable, LemonTableColumn } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { InsightEmptyState } from 'scenes/insights/EmptyStates'
+
+import { DataVisualizationNode, HogQLQueryResponse, NodeKind } from '~/queries/schema'
+import { QueryContext } from '~/queries/types'
+
+import { LoadNext } from '../../DataNode/LoadNext'
+import { renderColumn } from '../../DataTable/renderColumn'
+import { dataVisualizationLogic } from '../dataVisualizationLogic'
+
+interface TableProps {
+    query: DataVisualizationNode
+    uniqueKey: string | number | undefined
+    context: QueryContext | undefined
+    cachedResults: HogQLQueryResponse | undefined
+}
+
+export const Table = (props: TableProps): JSX.Element => {
+    const { tabularData, tabularColumns, responseLoading } = useValues(dataVisualizationLogic)
+
+    const tableColumns: LemonTableColumn<any[], any>[] = tabularColumns.map(({ column, settings }, index) => ({
+        title: settings?.display?.label || column.name,
+        render: (_, data, recordIndex: number) => {
+            return renderColumn(column.name, data[index], data, recordIndex, {
+                kind: NodeKind.DataTableNode,
+                source: props.query.source,
+            })
+        },
+    }))
+
+    return (
+        <div className="relative w-full flex flex-col gap-4 flex-1 h-full">
+            <LemonTable
+                dataSource={tabularData}
+                columns={tableColumns}
+                loading={responseLoading}
+                emptyState={
+                    <InsightEmptyState
+                        heading={props.context?.emptyStateHeading}
+                        detail={props.context?.emptyStateDetail}
+                    />
+                }
+                footer={<LoadNext query={props.query} />}
+            />
+        </div>
+    )
+}