@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/Table.d.ts

@@ -0,0 +1,167 @@
+import React, { ChangeEvent, ReactNode } from 'react';
+import { MultiSelectComponentProps, SelectComponentProps } from './components/UiComponents';
+export interface TableColumn {
+    label: string;
+    field: string;
+}
+/**
+ * Props for the Quill Table component.
+ */
+export interface TableProps {
+    /**
+     * The id of the table to render, if any.
+     *
+     * When a `reportId` is passed, the table will first fetch the data necessary
+     * to render this table, and then it will render the rows and columns that it
+     * receives from the server.
+     *
+     * NOTE: A `reportId` must be passed if `rows` and `columns` are not present.
+     */
+    reportId?: string;
+    /**
+     * The rows of the table to show, if any.
+     *
+     * When `rows` and `columns` are passed, the table will not refetch the given
+     * dashboard item and will instead simply render the rows and columns it was
+     * given.
+     *
+     * NOTE: Both `rows` and `columns` must be passed if `reportId` is not present.
+     *
+     * @example
+     * ```js
+     * let rows = {[
+     *   { x: 1, y: 1, z: 0 },
+     *   { x: 2, y: 2, z: 0 },
+     *   { x: 3, y: 3, z: 0 },
+     *   { x: 4, y: 4, z: 0 }
+     * ]};
+     * let columns = {[
+     *   { label: "My X-Axis", field: "x" },
+     *   { label: "My Y-Axis", field: "y" }
+     * ]}'
+     * ```
+     */
+    rows?: {
+        [key: string]: any;
+    }[];
+    /**
+     * The columns of the table to show, if any.
+     *
+     * When `rows` and `columns` are passed, the table will not refetch the given
+     * dashboard item and will instead simply render the rows and columns it was
+     * given.
+     *
+     * NOTE: Both `rows` and `columns` must be passed if `reportId` is not present.
+     *
+     * @example
+     * ```js
+     * let rows = {[
+     *   { x: 1, y: 1, z: 0 },
+     *   { x: 2, y: 2, z: 0 },
+     *   { x: 3, y: 3, z: 0 },
+     *   { x: 4, y: 4, z: 0 }
+     * ]};
+     * let columns = {[
+     *   { label: "My X-Axis", field: "x" },
+     *   { label: "My Y-Axis", field: "y" }
+     * ]}'
+     * ```
+     */
+    columns?: {
+        label: string;
+        field: string;
+    }[];
+    /**
+     * The placeholder filename to use when downloading this table as a csv file.
+     */
+    csvFilename?: string;
+    /**
+     * Whether to show the download csv button.
+     */
+    hideCSVDownloadButton?: boolean;
+    /** Whether to hide the table filters component, deafulted to true */
+    hideFilters?: boolean;
+    /**
+     * Whether this table component is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * A callback that is fired when the user clicks download csv.
+     */
+    downloadCSV?: () => void;
+    /**
+     * A loading component to show when the table is loading.
+     */
+    LoadingComponent?: () => JSX.Element;
+    /** A select component prop for the table filters */
+    SelectComponent?: (props: SelectComponentProps) => JSX.Element;
+    /** A multi select component prop for the table filters */
+    MultiSelectComponent?: (props: MultiSelectComponentProps) => JSX.Element;
+    /** A date range picker component prop for the table filters */
+    DateRangePickerComponent?: ({ dateRange, label, presetOptions, preset, selectWidth, onChangeDateRange, onChangePreset, }: {
+        preset: string;
+        label?: string;
+        selectWidth?: number;
+        dateRange: {
+            startDate: Date;
+            endDate: Date;
+        };
+        presetOptions: {
+            label: string;
+            value: string;
+        }[];
+        onChangeDateRange: ({ startDate, endDate, }: {
+            startDate: Date;
+            endDate: Date;
+        }) => void;
+        onChangePreset: (event: ChangeEvent<HTMLSelectElement>) => void;
+    }) => JSX.Element;
+    /** A filter container component component prop for the table filters */
+    FilterContainerComponent?: ({ children, }: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * Styles the top-level container of the Table.
+     *
+     * This can be useful for TailwindCSS-style classname strings.
+     */
+    className?: string;
+    /**
+     * Styles the top-level container of the Table.
+     */
+    containerStyle?: React.CSSProperties;
+}
+/**
+ * ### Quill Table
+ *
+ * A simple component that displays the given data as a table.
+ *
+ * @example
+ * ```js
+ * // Usage with chart id (will auto-fetch data)
+ * <Table reportId="12345" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with rows and columns (will not auto-fetch data)
+ * <Table
+ *   rows={[
+ *     { x: 1, y: 1, z: 0 },
+ *     { x: 2, y: 2, z: 0 },
+ *     { x: 3, y: 3, z: 0 },
+ *     { x: 4, y: 4, z: 0 }
+ *   ]}
+ *   columns={[
+ *     { label: "My X-Axis", field: "x" },
+ *     { label: "My Y-Axis", field: "y" }
+ *   ]}
+ * />
+ * ```
+ *
+ * ### Table API
+ * @see https://docs.quillsql.com/components/table
+ */
+declare const Table: (props: TableProps) => import("react/jsx-runtime").JSX.Element;
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

package/dist/esm/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,SAAS,EAIV,MAAM,OAAO,CAAC;AAaf,OAAO,EACL,yBAAyB,EAEzB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAuBnC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAwDD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC,oDAAoD;IACpD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAE/D,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;IAEzE,+DAA+D;IAC/D,wBAAwB,CAAC,EAAE,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,aAAa,EACb,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,cAAc,GACf,EAAE;QACD,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE;YAAE,SAAS,EAAE,IAAI,CAAC;YAAC,OAAO,EAAE,IAAI,CAAA;SAAE,CAAC;QAC9C,aAAa,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;YACD,SAAS,EAAE,IAAI,CAAC;YAChB,OAAO,EAAE,IAAI,CAAC;SACf,KAAK,IAAI,CAAC;QACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACjE,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,CAAC,EAC1B,QAAQ,GACT,EAAE;QACD,QAAQ,EAAE,SAAS,CAAC;KACrB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAmC/B,CAAC;AAmSF,eAAe,KAAK,CAAC"}

package/dist/esm/Table.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState, } from 'react';
+import { ClientContext, CustomFieldContext, DashboardContext, ReportFiltersContext, } from './Context';
+import QuillTable from './components/QuillTable';
+import { useExport } from './hooks/useExport';
+import { processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
+import { QuillFilterContainerComponent, } from './components/UiComponents';
+import { DashboardFilter } from './components/Dashboard/DashboardFilter';
+import { QuillSelectComponent } from './components/QuillSelect';
+import { QuillMultiSelectComponent } from './components/QuillMultiSelect';
+import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
+import { useTheme } from './hooks';
+import { convertInternalReportToReport, fetchReport, formatRowsFromReport, } from './utils/report';
+import { fetchTableByReport, } from './utils/tableProcessing';
+import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
+/**
+ * ### Quill Table
+ *
+ * A simple component that displays the given data as a table.
+ *
+ * @example
+ * ```js
+ * // Usage with chart id (will auto-fetch data)
+ * <Table reportId="12345" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with rows and columns (will not auto-fetch data)
+ * <Table
+ *   rows={[
+ *     { x: 1, y: 1, z: 0 },
+ *     { x: 2, y: 2, z: 0 },
+ *     { x: 3, y: 3, z: 0 },
+ *     { x: 4, y: 4, z: 0 }
+ *   ]}
+ *   columns={[
+ *     { label: "My X-Axis", field: "x" },
+ *     { label: "My Y-Axis", field: "y" }
+ *   ]}
+ * />
+ * ```
+ *
+ * ### Table API
+ * @see https://docs.quillsql.com/components/table
+ */
+const Table = (props) => {
+    const data = props;
+    const [dashboard] = useContext(DashboardContext);
+    const [client] = useContext(ClientContext);
+    if ('rows' in data && 'columns' in data) {
+        return (_jsx(QuillTable, { hideCSVDownloadButton: data.hideCSVDownloadButton, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
+    }
+    return (_jsx(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dashboardContext: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, client: client, LoadingComponent: data.LoadingComponent, SelectComponent: data.SelectComponent, MultiSelectComponent: data.MultiSelectComponent, DateRangePickerComponent: data.DateRangePickerComponent, FilterContainerComponent: data.FilterContainerComponent, hideFilters: data.hideFilters }));
+};
+const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, client, hideCSVDownloadButton = true, hideFilters = true, pagination = DEFAULT_PAGINATION, LoadingComponent, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, }) => {
+    const [loading, setLoading] = useState(false);
+    const [initialLoad, setInitialLoad] = useState(true);
+    const { downloadCSV } = useExport(reportId);
+    const [customFields] = useContext(CustomFieldContext);
+    const [rows, setRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [tableFilters, setTableFilters] = useState([]);
+    const [filterUpdateIndex, setFilterUpdateIndex] = useState(0);
+    const [previousPage, setPreviousPage] = useState(1);
+    const [rowCount, setRowCount] = useState(0);
+    const { reportFiltersDispatch, reportFilters } = useContext(ReportFiltersContext);
+    const [currentProcessing, setCurrentProcessing] = useState({
+        page: pagination,
+    });
+    const theme = useTheme();
+    const onPageChange = (page) => {
+        if (currentProcessing.page &&
+            page > previousPage &&
+            shouldFetchMore(DEFAULT_PAGINATION, page, previousPage)) {
+            const newPagination = { ...currentProcessing.page, page };
+            const updatedProcessing = { ...currentProcessing, page: newPagination };
+            setCurrentProcessing(updatedProcessing);
+            updateTableRows(updatedProcessing);
+        }
+        if (page > previousPage) {
+            setPreviousPage(page);
+        }
+    };
+    const onSortChange = (sort) => {
+        if (shouldSortInMemory(DEFAULT_PAGINATION, rowCount)) {
+            return;
+        }
+        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        updateTableRows(updatedProcessing, true);
+        setCurrentProcessing(updatedProcessing);
+        setPreviousPage(0);
+    };
+    const updateTableRows = async (processing, resetRows = false) => {
+        if (!loading) {
+            setLoading(true);
+            try {
+                const updatedProcessing = { ...currentProcessing, ...processing };
+                const paginatedRows = await fetchTableByReport(reportId, client, updatedProcessing, tableFilters, customFields);
+                if (paginatedRows.error) {
+                    throw new Error('Error fetching chart');
+                }
+                const formattedNewRows = formatRowsFromReport(paginatedRows);
+                let tempRows = [...rows, ...formattedNewRows];
+                if (resetRows) {
+                    tempRows = formattedNewRows;
+                }
+                setRows(tempRows);
+                setTimeout(() => {
+                    setLoading(false);
+                }, 200);
+            }
+            catch (e) {
+                console.log(e);
+                setLoading(false);
+            }
+        }
+    };
+    const fetchReportHelper = async (useReportTask = true, reportFilters, processing) => {
+        setLoading(true);
+        const { report, error } = await fetchReport(reportId, client, useReportTask, reportFilters ? reportFilters.filters : [], processing, undefined, customFields);
+        if (error) {
+            setLoading(false);
+            setInitialLoad(false);
+            setRows([]);
+            return;
+        }
+        const convertedReport = convertInternalReportToReport(report);
+        let filterArray = reportFilters.filters;
+        // THIS SHOULD ONLY BE UNDEFINED ON INITIAL LOAD
+        if (!filterArray) {
+            filterArray = report.filtersApplied
+                ? report.filtersApplied.map((filter) => {
+                    return processFilterFromBackend(filter);
+                })
+                : [];
+            reportFiltersDispatch({
+                type: 'UPDATE_REPORT_FILTER',
+                id: reportId,
+                data: {
+                    filters: filterArray,
+                    updateIndex: reportFilters.updateIndex,
+                },
+            });
+        }
+        setRows(formatRowsFromReport(convertedReport));
+        setTableFilters(filterArray);
+        setRowCount(convertedReport.rowCount ?? 0);
+        setColumns(convertedReport.columns);
+        setLoading(false);
+        setInitialLoad(false);
+    };
+    useEffect(() => {
+        if (!client) {
+            return;
+        }
+        const report = dashboardContext[reportId];
+        if (initialLoad && report) {
+            setInitialLoad(false);
+            return;
+        }
+        const parsedReportFilters = reportFilters[reportId]
+            ? reportFilters[reportId]
+            : { updateIndex: 0 };
+        setCurrentProcessing({ page: DEFAULT_PAGINATION });
+        fetchReportHelper(true, parsedReportFilters, currentProcessing);
+    }, [client, reportId, reportFilters[reportId]?.updateIndex]);
+    useEffect(() => {
+        const report = dashboardContext[reportId];
+        if (!report) {
+            return;
+        }
+        if (!report.rows || !report.columns) {
+            setRows([]);
+            setColumns([]);
+            return;
+        }
+        let filtersApplied = [];
+        if (report.filtersApplied && report.filtersApplied.length > 0) {
+            filtersApplied = report.filtersApplied.map((filter) => {
+                return filter;
+            });
+        }
+        const convertedReport = convertInternalReportToReport(report);
+        setRows(formatRowsFromReport(convertedReport));
+        setRowCount(convertedReport.rowCount);
+        setColumns(convertedReport.columns);
+        setTableFilters(filtersApplied);
+    }, []);
+    return (_jsxs("div", { children: [!hideFilters && (_jsx(FilterContainerComponent, { children: tableFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
+                        const updatedFilters = tableFilters.map((f) => {
+                            if (f.field === filter.field ||
+                                (f.filterType === 'date_range' &&
+                                    filter.filterType === 'date_range')) {
+                                return updateFilter(f, value, comparison);
+                            }
+                            return f;
+                        });
+                        setTableFilters(updatedFilters);
+                        fetchReportHelper(true, {
+                            filters: updatedFilters,
+                            updateIndex: filterUpdateIndex + 1,
+                        }, currentProcessing);
+                        setFilterUpdateIndex(filterUpdateIndex + 1);
+                        reportFiltersDispatch({
+                            type: 'UPDATE_REPORT_FILTER',
+                            id: reportId,
+                            data: {
+                                filters: updatedFilters,
+                                updateIndex: filterUpdateIndex + 1,
+                            },
+                        });
+                    }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) })), _jsx(QuillTable, { hideCSVDownloadButton: hideCSVDownloadButton, columns: columns ?? [], rows: rows ?? [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, sort: currentProcessing.sort, isLoading: loading || initialLoad, downloadCSV: downloadCSV, onPageChange: onPageChange, onSortChange: onSortChange, rowCount: rowCount })] }));
+};
+export default Table;

package/dist/esm/TableChart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface YAxisField {
+    label: string;
+    field: string;
+    chartType?: string;
+}
+export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
+    data: object[];
+    yAxisFields: YAxisField[];
+    colors: string[];
+}
+export declare function hexToRgbaWith10PercentAlpha(hex: any): string;
+declare const TableChart: React.ForwardRefExoticComponent<BarListProps & React.RefAttributes<HTMLDivElement>>;
+export default TableChart;
+//# sourceMappingURL=TableChart.d.ts.map

package/dist/esm/TableChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../src/TableChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAoED,QAAA,MAAM,UAAU,qFAsEf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/esm/TableChart.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import { valueFormatter } from './utils/valueFormatter';
+export function hexToRgbaWith10PercentAlpha(hex) {
+    // Convert the hex color to RGB
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    // Set the alpha value to 10%
+    const alpha = 0.1;
+    // Return the color as an rgba string
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function Columns({ columns, data, theme }) {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            overflow: 'scroll',
+            height: '100%',
+        }, children: columns.map((elem) => (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field))) }));
+}
+function Column({ column, data, theme }) {
+    return (_jsxs("div", { style: {
+            paddingLeft: 20,
+            paddingRight: 20,
+            display: 'inline-flex',
+            flexDirection: 'column',
+            whiteSpace: 'nowrap',
+        }, children: [_jsx("div", { style: {
+                    height: 40,
+                    minHeight: 40,
+                    color: theme?.primaryTextColor,
+                    boxSizing: 'content-box',
+                    fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                    fontSize: theme?.fontSizeSmall || '0.875rem',
+                    fontWeight: theme?.fontWeightMedium || '500',
+                }, children: column.label }), data.map((elem) => (_jsx(Cell, { item: elem[column.field], theme: theme })))] }));
+}
+function Cell({ item, theme }) {
+    return (_jsx("div", { style: {
+            height: 40,
+            minHeight: 40,
+            whiteSpace: 'nowrap',
+            width: '100%',
+            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+            fontSize: theme?.fontSizeSmall || '0.875rem',
+            color: theme?.chartLabelColor,
+        }, children: item }));
+}
+const TableChart = React.forwardRef((props, ref) => {
+    const { data = [], yAxisFields, containerStyle, theme, ...other } = props;
+    const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1 || 6;
+    const memoizedData = useMemo(() => {
+        return data.slice(0, NUM_TO_SHOW).map((item) => {
+            const fieldsWithFormattedValues = {};
+            for (const field of yAxisFields) {
+                const value = item[field.field];
+                fieldsWithFormattedValues[field.field] = valueFormatter({
+                    value,
+                    field: field.field,
+                    fields: yAxisFields,
+                });
+            }
+            return fieldsWithFormattedValues;
+        });
+    }, [data, NUM_TO_SHOW]);
+    if (!memoizedData.length) {
+        return (_jsx("div", { ref: ref, style: {
+                boxSizing: 'content-box',
+                height: '100%',
+                marginTop: 20,
+                overflow: 'hidden',
+                display: 'flex',
+                marginLeft: '1.5rem',
+                justifyContent: 'space-between',
+            }, ...other }));
+    }
+    return (_jsxs("div", { style: {
+            boxSizing: 'content-box',
+            height: containerStyle?.height || '100%',
+            marginTop: 20,
+            display: 'flex',
+            marginLeft: '1rem',
+            flexDirection: 'column',
+        }, children: [_jsx(Columns, { columns: yAxisFields, data: memoizedData, theme: theme }), data.length > NUM_TO_SHOW && (_jsxs("div", { style: {
+                    color: theme?.chartLabelColor,
+                    boxSizing: 'content-box',
+                    fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                    fontSize: theme?.fontSizeSmall || '0.875rem',
+                    marginLeft: 12,
+                    marginTop: 8,
+                }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }));
+});
+export default TableChart;

package/dist/esm/assets/ArrowDownHeadIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowDownHeadIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowDownHeadIcon;
+//# sourceMappingURL=ArrowDownHeadIcon.d.ts.map

package/dist/esm/assets/ArrowDownHeadIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CActB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/assets/ArrowDownHeadIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ArrowDownHeadIcon = ({ ...props }) => (_jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: _jsx("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" }) }));
+export default ArrowDownHeadIcon;

package/dist/esm/assets/ArrowDownIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowDownIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowDownIcon;
+//# sourceMappingURL=ArrowDownIcon.d.ts.map

package/dist/esm/assets/ArrowDownIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowDownIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,aAAa;;6CAclB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/esm/assets/ArrowDownIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowDownIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z" })] }));
+export default ArrowDownIcon;

package/dist/esm/assets/ArrowDownRightIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowDownRightIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowDownRightIcon;
+//# sourceMappingURL=ArrowDownRightIcon.d.ts.map

package/dist/esm/assets/ArrowDownRightIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowDownRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,kBAAkB;;6CAcvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/assets/ArrowDownRightIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowDownRightIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M14.59 16.004L5.982 7.397l1.414-1.414 8.607 8.606V7.004h2v11h-11v-2z" })] }));
+export default ArrowDownRightIcon;

package/dist/esm/assets/ArrowLeftHeadIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowLeftHeadIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowLeftHeadIcon;
+//# sourceMappingURL=ArrowLeftHeadIcon.d.ts.map

package/dist/esm/assets/ArrowLeftHeadIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowLeftHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowLeftHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CAUtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/assets/ArrowLeftHeadIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowLeftHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z" })] }));
+export default ArrowLeftHeadIcon;

package/dist/esm/assets/ArrowRightHeadIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowRightHeadIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowRightHeadIcon;
+//# sourceMappingURL=ArrowRightHeadIcon.d.ts.map

package/dist/esm/assets/ArrowRightHeadIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowRightHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowRightHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,kBAAkB;;6CAUvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/assets/ArrowRightHeadIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowRightHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" })] }));
+export default ArrowRightHeadIcon;

package/dist/esm/assets/ArrowRightIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowRightIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowRightIcon;
+//# sourceMappingURL=ArrowRightIcon.d.ts.map

package/dist/esm/assets/ArrowRightIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc;;6CAcnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/esm/assets/ArrowRightIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowRightIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" })] }));
+export default ArrowRightIcon;

package/dist/esm/assets/ArrowUpHeadIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowUpHeadIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowUpHeadIcon;
+//# sourceMappingURL=ArrowUpHeadIcon.d.ts.map

package/dist/esm/assets/ArrowUpHeadIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowUpHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,eAAe;;6CAcpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/assets/ArrowUpHeadIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowUpHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" })] }));
+export default ArrowUpHeadIcon;

package/dist/esm/assets/ArrowUpIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowUpIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowUpIcon;
+//# sourceMappingURL=ArrowUpIcon.d.ts.map

package/dist/esm/assets/ArrowUpIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowUpIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW;;6CAchB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/assets/ArrowUpIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowUpIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z" })] }));
+export default ArrowUpIcon;

package/dist/esm/assets/ArrowUpRightIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowUpRightIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowUpRightIcon;
+//# sourceMappingURL=ArrowUpRightIcon.d.ts.map

package/dist/esm/assets/ArrowUpRightIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowUpRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;6CAcrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/assets/ArrowUpRightIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowUpRightIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M16.004 9.414l-8.607 8.607-1.414-1.414L14.589 8H7.004V6h11v11h-2V9.414z" })] }));
+export default ArrowUpRightIcon;