Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions app/charts/shared/chart-props.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,27 @@ export type DimensionsById = Record<string, Dimension>;

export type MeasuresById = Record<string, Measure>;

export type PaginationControls = {
pageIndex: number;
pageSize: number;
canNextPage: boolean;
canPreviousPage: boolean;
totalCount: number;
nextPage: () => void;
previousPage: () => void;
gotoPage: (pageIndex: number) => void;
setPageSize: (pageSize: number) => void;
setSortBy: (sortBy: Array<{ id: string; desc: boolean }>) => void;
};

export type BaseChartProps = {
observations: Observation[];
dimensions: Dimension[];
dimensionsById: DimensionsById;
measures: Measure[];
measuresById: MeasuresById;
embedParams?: EmbedQueryParams;
pagination?: PaginationControls;
};

export type ChartProps<TChartConfig extends ChartConfig> = BaseChartProps & {
Expand Down
8 changes: 4 additions & 4 deletions app/charts/table/chart-table.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { memo } from "react";

import { ChartDataWrapper } from "@/charts/chart-data-wrapper";
import { BrushTime, shouldShowBrush } from "@/charts/shared/brush";
import { ChartContainer } from "@/charts/shared/containers";
import { Table, TABLE_TIME_RANGE_HEIGHT } from "@/charts/table/table";
import { TablePaginatedDataWrapper } from "@/charts/table/table-paginated-data-wrapper";
import { TableChart } from "@/charts/table/table-state";
import { TableConfig } from "@/configurator";
import { hasChartConfigs, useConfiguratorState } from "@/configurator";
Expand All @@ -16,7 +16,7 @@ export const ChartTableVisualization = (
const { observationQueryFilters } = props;

return (
<ChartDataWrapper
<TablePaginatedDataWrapper
{...props}
observationQueryFilters={observationQueryFilters}
Component={ChartTable}
Expand All @@ -25,7 +25,7 @@ export const ChartTableVisualization = (
};

const ChartTable = memo(function ChartTable(props: ChartProps<TableConfig>) {
const { chartConfig } = props;
const { chartConfig, pagination } = props;
const { interactiveFiltersConfig } = chartConfig;
const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
const showTimeBrush = shouldShowBrush(
Expand All @@ -47,7 +47,7 @@ const ChartTable = memo(function ChartTable(props: ChartProps<TableConfig>) {
<BrushTime yOffset={10} />
</svg>
)}
<Table />
<Table pagination={pagination} />
</ChartContainer>
</TableChart>
);
Expand Down
50 changes: 43 additions & 7 deletions app/charts/table/table-content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ type TableContentProps = {
tableColumnsMeta: Record<string, ColumnMeta>;
customSortCount: number;
totalColumnsWidth: number;
handleSortClick?: (columnId: string) => void;
manualSortBy?: Array<{ id: string; desc: boolean }>;
};

const TableContentContext = createContext<TableContentProps | undefined>(
Expand All @@ -27,6 +29,8 @@ export const TableContentProvider = ({
tableColumnsMeta,
customSortCount,
totalColumnsWidth,
handleSortClick,
manualSortBy,
children,
}: TableContentProps & { children: ReactNode }) => {
const value = useMemo(() => {
Expand All @@ -35,8 +39,17 @@ export const TableContentProvider = ({
tableColumnsMeta,
customSortCount,
totalColumnsWidth,
handleSortClick,
manualSortBy,
};
}, [headerGroups, tableColumnsMeta, customSortCount, totalColumnsWidth]);
}, [
headerGroups,
tableColumnsMeta,
customSortCount,
totalColumnsWidth,
handleSortClick,
manualSortBy,
]);

return (
<TableContentContext.Provider value={value}>
Expand Down Expand Up @@ -75,8 +88,14 @@ export const TableContent = ({ children }: { children: ReactNode }) => {
throw Error("Please wrap TableContent in TableContentProvider");
}

const { headerGroups, tableColumnsMeta, customSortCount, totalColumnsWidth } =
ctx;
const {
headerGroups,
tableColumnsMeta,
customSortCount,
totalColumnsWidth,
handleSortClick,
manualSortBy,
} = ctx;

return (
<>
Expand All @@ -89,9 +108,26 @@ export const TableContent = ({ children }: { children: ReactNode }) => {
{headerGroup.headers.map((column) => {
const { dim, columnComponentType } =
tableColumnsMeta[column.id];
// We assume that the customSortCount items are at the beginning of the sorted array, so any item with a lower index must be a custom sorted one

// For manual sorting (server-side), check manualSortBy state
const manualSort = manualSortBy?.find(
(s) => s.id === column.id
);
const isManualSorted = !!manualSort;
const manualSortDirection = manualSort?.desc ? "desc" : "asc";

// For react-table sorting (client-side), use existing logic
const isCustomSorted = column.sortedIndex < customSortCount;

const isActive = handleSortClick
? isManualSorted
: isCustomSorted;
const direction = handleSortClick
? manualSortDirection
: column.isSortedDesc
? "desc"
: "asc";

return (
// eslint-disable-next-line react/jsx-key
<Flex
Expand All @@ -101,11 +137,11 @@ export const TableContent = ({ children }: { children: ReactNode }) => {
? classes.headerGroupMeasure
: undefined
)}
{...column.getHeaderProps(column.getSortByToggleProps())}
>
<TableSortLabel
active={isCustomSorted}
direction={column.isSortedDesc ? "desc" : "asc"}
active={isActive}
direction={direction}
onClick={() => handleSortClick?.(column.id)}
>
<OpenMetadataPanelWrapper component={dim}>
<span style={{ fontWeight: "bold" }}>
Expand Down
Loading