feat: split chart and table in charts

packages/main/plugins/Cardinality/CardinalitySeries.tsx

@@ -4,6 +4,7 @@ import { SeriesGroup } from "./SeriesGroup";
 import { getSeriesProps } from "./helpers";
 import Loader from "./Loader";
 import { resultsContainerStyles, openCardinalityStyles } from "./styles";
+import useTheme from "@ui/theme/useTheme";
 
 type CardinalitySeriesProps = {
     formattedSeries: any;
@@ -16,6 +17,7 @@ const CardinalitySeries: React.FC<CardinalitySeriesProps> = ({
     isCardinality,
     isLoading,
 }) => {
+    const theme = useTheme();
     return (
         <div
             className={cx(
@@ -25,7 +27,11 @@ const CardinalitySeries: React.FC<CardinalitySeriesProps> = ({
         >
             {!isLoading ? (
                 formattedSeries?.map((series: any, key: number) => (
-                    <SeriesGroup key={key} {...getSeriesProps(series)} />
+                    <SeriesGroup
+                        theme={theme}
+                        key={key}
+                        {...getSeriesProps(series)}
+                    />
                 ))
             ) : (
                 <Loader />

packages/main/plugins/Cardinality/CardinalityTable.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import { useSeriesGroupStyles } from "./SeriesGroupStyles";
+import { useSortedColumns } from "./useSortColumn";
+import SeriesRow, { type SeriesRowProps } from "./SeriesRow";
+import SeriesRowHeaders from "./SeriesRowHeaders";
+import { type SeriesHeaderProps } from "./SeriesHeader";
+import Loader from "./Loader";
+export type CardinalityTableProps = {
+    rows: SeriesRowProps[];
+    sectionHeader: string;
+    sectionHeaderName: string;
+    theme: any;
+} & SeriesHeaderProps;
+
+const CardinalityTable: React.FC<CardinalityTableProps> = ({
+    rows,
+    theme,
+    sectionHeader,
+    sectionHeaderName,
+}) => {
+    const { seriesGroupStyles } = useSeriesGroupStyles(theme);
+
+    const { sortedRows, handleSort } = useSortedColumns(rows);
+
+    return (
+        <div className="c-table">
+            {rows && (
+                <SeriesRowHeaders
+                    handleSort={handleSort}
+                    headerName={sectionHeaderName}
+                    name={sectionHeader}
+                    theme={seriesGroupStyles}
+                />
+            )}
+
+            {sortedRows && sortedRows?.length > 0 ? (
+                sortedRows.map((row: SeriesRowProps, key: number) => (
+                    <SeriesRow
+                        {...row}
+                        key={key}
+                        theme={seriesGroupStyles}
+                        hasShare={
+                            sectionHeaderName !== "labelValueCountByLabelName"
+                        }
+                    />
+                ))
+            ) : (
+                <Loader />
+            )}
+        </div>
+    );
+};
+
+export default CardinalityTable;

packages/main/plugins/Cardinality/ChartsGroup.tsx

@@ -31,7 +31,6 @@ export const formatValueTypesMapped = (
 };
 
 export const formatChartProps = (rows: SeriesRowProps[]) => {
-
     const xAxisData = rows?.map((row) => row.name);
     const valueData = rows?.map((row) => row.value);
     const diffData = rows?.map((row) =>
@@ -96,8 +95,7 @@ export const useChartData = (rows: SeriesRowProps[]) => {
 export const ChartsGroup: React.FC<ChartsGroupProps> = ({ rows, theme }) => {
     const chartData = useChartData(rows);
 
-
-    if(rows.length === 0) return null
+    if (rows.length === 0) return null;
 
     return (
         <CardinalityChartsContainer>

packages/main/plugins/Cardinality/SeriesGroup.tsx

@@ -1,19 +1,20 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import SeriesHeader, { type SeriesHeaderProps } from "./SeriesHeader";
-import SeriesRow, { type SeriesRowProps } from "./SeriesRow";
-import SeriesRowHeaders from "./SeriesRowHeaders";
+import { type SeriesRowProps } from "./SeriesRow";
 import useTheme from "@ui/theme/useTheme";
 import { useSeriesGroupStyles } from "./SeriesGroupStyles";
 import { useSortedColumns } from "./useSortColumn";
 
+import { ChartsGroup } from "./ChartsGroup";
+
+import CardinalityTable from "./CardinalityTable";
+
 export type SeriesGroupProps = {
     rows: SeriesRowProps[];
     sectionHeader: string;
     sectionHeaderName: string;
 } & SeriesHeaderProps;
 
-import { ChartsGroup } from "./ChartsGroup";
-
 // This components is used to display a group of series
 export const SeriesGroup: React.FC<SeriesGroupProps> = ({
     title,
@@ -23,38 +24,36 @@ export const SeriesGroup: React.FC<SeriesGroupProps> = ({
 }: SeriesGroupProps) => {
     const theme = useTheme();
 
-    const { seriesGroupContainer, seriesGroupStyles } = useSeriesGroupStyles(theme);
+    const { seriesGroupContainer } = useSeriesGroupStyles(theme);
 
-    const { sortedRows, handleSort } = useSortedColumns(rows);
+    const { sortedRows } = useSortedColumns(rows);
     const containerRef: any = useRef(null);
+    const [tabsValue, setTabsValue] = useState(0);
+
+    const onTabChange = (event: any, newValue: any) => {
+        setTabsValue(newValue);
+    };
 
     return (
         <div className={seriesGroupContainer} ref={containerRef}>
-            <SeriesHeader title={title} />
-            <div className="c-table">
-                {rows && (
-                    <SeriesRowHeaders
-                        handleSort={handleSort}
-                        headerName={sectionHeaderName}
-                        name={sectionHeader}
-                        theme={seriesGroupStyles}
-                    />
-                )}
-                {sortedRows &&
-                    sortedRows?.length > 0 &&
-                    sortedRows.map((row: SeriesRowProps, key: number) => (
-                        <SeriesRow
-                            key={key}
-                            theme={seriesGroupStyles}
-                            hasShare={
-                                sectionHeaderName !==
-                                "labelValueCountByLabelName"
-                            }
-                            {...row}
-                        />
-                    ))}
-            </div>
-            <ChartsGroup rows={sortedRows} theme={theme} />
+            <SeriesHeader
+                theme={theme}
+                title={title}
+                tabsValue={tabsValue}
+                onTabChange={onTabChange}
+            />
+
+            {tabsValue === 0 && (
+                <CardinalityTable
+                    title={title}
+                    rows={sortedRows}
+                    theme={theme}
+                    sectionHeader={sectionHeader}
+                    sectionHeaderName={sectionHeaderName}
+                />
+            )}
+
+            {tabsValue === 1 && <ChartsGroup rows={sortedRows} theme={theme} />}
         </div>
     );
 };

packages/main/plugins/Cardinality/SeriesGroupStyles.tsx

@@ -31,6 +31,10 @@ export const SeriesGroupContainer = (theme: Partial<QrynTheme>) => css`
     background: ${theme.shadow};
     gap: 4px;
     .c-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
         font-size: 14px;
         padding: 8px 6px;
         border-bottom: 1px solid ${theme.neutral};

packages/main/plugins/Cardinality/SeriesHeader.tsx

@@ -1,12 +1,44 @@
-import React from 'react'
-
+import React from "react";
+import {
+    StyledTabs,
+    StyledTab,
+} from "@ui/main/components/QueryItem/StyledTabs";
+import { css, cx } from "@emotion/css";
 export type SeriesHeaderProps = {
     title: string;
+    theme: any;
+    tabsValue?: number;
+    onTabChange?: any;
 };
 // here should be the tabs for table / chart view
+export const StyledTabsCont = (theme: any) => css`
+    background: ${theme.WidgetBg};
+    .MuiTabs-root {
+        height: 20px !important;
+        min-height: 20px;
+    }
+    .MuiButtonBase-root {
+        min-height: 0;
+    }
+`;
 
-const SeriesHeader:React.FC<SeriesHeaderProps> = ({ title }: SeriesHeaderProps) => {
-    return <div className="c-header">{title}</div>;
+const SeriesHeader: React.FC<SeriesHeaderProps> = ({
+    title,
+    tabsValue,
+    onTabChange,
+    theme,
+}: SeriesHeaderProps) => {
+    return (
+        <div className="c-header">
+            <div>{title}</div>
+            <div className={cx(StyledTabsCont(theme))}>
+                <StyledTabs value={tabsValue} onChange={onTabChange}>
+                    <StyledTab label="Table" />
+                    <StyledTab label="Chart" />
+                </StyledTabs>
+            </div>
+        </div>
+    );
 };
 
 export default SeriesHeader;

packages/main/plugins/Cardinality/api/useCardinalityData.tsx

@@ -4,7 +4,6 @@ import useCardinalityStore from "../store/CardinalityStore";
 import { CardinalityResponse } from "../types";
 import { SeriesRowProps } from "../SeriesRow";
 
-
 // This hook is used to fetch the data from the API and format it for the UI
 export const useCardinalityData = (historyManager?, setHistoryItem?) => {
     const {
@@ -13,16 +12,10 @@ export const useCardinalityData = (historyManager?, setHistoryItem?) => {
         setFocusLabel,
         setTimeSeriesSelector,
         setTotal,
-        tsdbStatus:result,
+        tsdbStatus: result,
         isLoading,
-
-      //  isUpdating,
     } = useCardinalityStore();
 
- //   const { result, isLoading } = useCardinalityRequest(true);
-
-
-
     const [data, setData] = useState<any>({
         data: defaultCardinalityStatus,
         formattedSeries: [],
@@ -81,9 +74,7 @@ export const useCardinalityData = (historyManager?, setHistoryItem?) => {
     };
 
     useEffect(() => {
-
         if (result) {
-
             setTotal({
                 amount: result.totalSeries,
                 prev: result.totalSeriesPrev,
@@ -101,6 +92,5 @@ export const useCardinalityData = (historyManager?, setHistoryItem?) => {
         totalSeries: data?.data?.totalSeries ?? 0,
         formattedSeries: data?.formattedSeries ?? [],
         isLoading,
-
     };
 };