@quillsql/react 2.13.39 → 2.13.41

package/dist/esm/SQLEditor.js

@@ -5,7 +5,7 @@ import { useState, useContext, useEffect, useRef, useMemo, useCallback, } from '
 import MonacoEditor from '@monaco-editor/react';
 import { ClientContext, DashboardFiltersContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
 import { ChartBuilderWithModal, createInitialFormData } from './ChartBuilder';
-import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedModal, MemoizedPopover, MemoizedSecondaryButton, MemoizedSubHeader, MemoizedText, OverflowContainer, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableSQLEditorComponent, } from './components/UiComponents';
+import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedModal, MemoizedPopover, MemoizedSecondaryButton, MemoizedSubHeader, MemoizedText, OverflowContainer, QuillChartBuilderCheckboxComponent, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableSQLEditorComponent, } from './components/UiComponents';
 import { QuillTextInput } from './components/UiComponents';
 import { updateFirstChildWidth } from './utils/width';
 import { TEMP_REPORT_ID, } from './models/Report';
@@ -19,6 +19,8 @@ import { EMPTY_INTERNAL_REPORT, formatRowsFromReport } from './utils/report';
 import { cleanDashboardItem } from './utils/dashboard';
 import { createDebounce } from './lib';
 import { useQuillCloud } from './utils/dataFetcher';
+import { isSimpleSelectStarQuery } from './components/ReportBuilder/convert';
+import { getSelectFromAST, getTablesHelper } from './utils/astProcessing';
 function defineEditorTheme(monaco, theme) {
     monaco.editor.defineTheme('onedark', {
         base: theme.darkMode ? 'vs-dark' : 'vs',
@@ -84,7 +86,7 @@ function setEditorTheme(_editor, monaco, schema, databaseType, clientName) {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableSQLEditorComponent, isNewQueryEnabled = false, LoadingComponent = QuillLoadingComponent, ModalComponent = MemoizedModal, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ChartBuilderFormContainer = QuillChartBuilderFormContainer, defaultQuery, destinationDashboard, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, onDiscardChanges, onSaveChanges, onCloseChartBuilder, isChartBuilderEnabled = false, isAdminEnabled = false, chartBuilderTitle, runQueryOnMount = false, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, onClickChartElement, }) {
+export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableSQLEditorComponent, isNewQueryEnabled = false, LoadingComponent = QuillLoadingComponent, ModalComponent = MemoizedModal, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ChartBuilderFormContainer = QuillChartBuilderFormContainer, CheckboxComponent = QuillChartBuilderCheckboxComponent, defaultQuery, destinationDashboard, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, onDiscardChanges, onSaveChanges, onCloseChartBuilder, isChartBuilderEnabled = false, isAdminEnabled = false, chartBuilderTitle, runQueryOnMount = false, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, onClickChartElement, }) {
     const [sqlPrompt, setSqlPrompt] = useState('');
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -211,7 +213,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
         };
     }, [currentPage, rowsPerPage, currentSort]);
     const displayedTableData = useMemo(() => {
-        return (schemaData?.schema?.filter((table) => {
+        return (schemaData?.schemaWithCustomFields?.filter((table) => {
             return (table.name
                 ?.toLowerCase()
                 ?.includes(tableSearchQuery.toLowerCase().trim()) ||
@@ -219,7 +221,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                     ?.toLowerCase()
                     ?.includes(tableSearchQuery.toLowerCase().trim())));
         }) ?? []);
-    }, [tableSearchQuery, schemaData.schema]);
+    }, [tableSearchQuery, schemaData.schemaWithCustomFields]);
     useEffect(() => {
         // Since the TextInput component takes a required numeric width parameter,
         // we dynamically calculate the width of this component here.
@@ -374,7 +376,12 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                 rows: tempRows,
                 columns: tableInfo.columns,
             };
-            const cleaned = await cleanDashboardItem(newReport, newReport.filtersApplied, client);
+            const cleaned = await cleanDashboardItem({
+                item: newReport,
+                dashboardFilters: newReport.filtersApplied,
+                client,
+                customFields: schemaData.customFields,
+            });
             setTempReport(cleaned);
             setLastSuccessfulQuery(query);
         }
@@ -416,6 +423,17 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
         }
         await navigator.clipboard.writeText(newQuery);
     };
+    const getReferencedTables = async (client, sqlQuery, dbTables, skipStar) => {
+        const resp = await getDataFromCloud(client, `astify`, {
+            query: sqlQuery,
+            publicKey: client.publicKey,
+            useNewNodeSql: true,
+        });
+        if (resp.success === false) {
+            return getTablesHelper(getSelectFromAST({}), dbTables, skipStar);
+        }
+        return getTablesHelper(getSelectFromAST(resp.ast), dbTables, skipStar);
+    };
     useEffect(() => {
         if (onChangeQuery) {
             onChangeQuery(query || '');
@@ -480,7 +498,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                                         minHeight: 'max(210px, 20vh)',
                                                         maxHeight: '30%',
                                                         height: '20vh',
-                                                    }, children: _jsx(SQLEditorComponent, { query: query || '', schema: schemaData.schema, databaseType: client?.databaseType ?? 'postgresql', clientName: client?.publicKey || '', setQuery: setQuery, handleRunQuery: () => {
+                                                    }, children: _jsx(SQLEditorComponent, { query: query || '', schema: schemaData.schemaWithCustomFields, databaseType: client?.databaseType ?? 'postgresql', clientName: client?.publicKey || '', setQuery: setQuery, handleRunQuery: () => {
                                                             handleRunQuery(currentProcessing, true);
                                                         }, handleFixWithAI: handleFixWithAI, isNewQueryEnabled: isNewQueryEnabled, runQueryOnMount: runQueryOnMount, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, setEditorMounted: () => { }, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading && schemaData.isSchemaLoading, LoadingComponent: LoadingComponent }) }), _jsx("div", { style: {
                                                         display: 'flex',
@@ -496,17 +514,43 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                                             height: 70,
                                                         }, children: _jsxs("div", { style: { display: 'flex', gap: 12 }, children: [addToDashboardButtonLabel ===
                                                                     'Add to dashboard' ? (_jsx(SecondaryButtonComponent, { onClick: () => {
-                                                                        handleRunQuery(currentProcessing, true, false, true);
+                                                                        handleRunQuery({
+                                                                            page: pagination,
+                                                                            sort: undefined,
+                                                                        }, true, false, true);
                                                                     }, label: "Run query" })) : (_jsx(ButtonComponent, { onClick: () => {
-                                                                        handleRunQuery(currentProcessing, true, false, true);
+                                                                        handleRunQuery({
+                                                                            page: pagination,
+                                                                            sort: undefined,
+                                                                        }, true, false, true);
                                                                     }, label: "Run query" })), isNewQueryEnabled && (_jsx(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" })), addToDashboardButtonLabel ===
                                                                     'Add to dashboard' && (_jsx(ButtonComponent, { onClick: async () => {
                                                                         onSaveChanges && onSaveChanges();
+                                                                        const isSelectStar = isSimpleSelectStarQuery(query ?? '');
+                                                                        let tables = [];
+                                                                        let customFieldColumns = [];
+                                                                        if (client &&
+                                                                            isSelectStar &&
+                                                                            schemaData.customFields) {
+                                                                            const { referencedTablesAndColumns } = await getReferencedTables(client, query ?? '', schemaData.schemaWithCustomFields, isSelectStar);
+                                                                            tables = referencedTablesAndColumns.map((ref) => ref.name);
+                                                                            customFieldColumns = tables
+                                                                                .map((table) => {
+                                                                                return (schemaData.customFields?.[table] ?? []).map((field) => field.field);
+                                                                            })
+                                                                                .flat();
+                                                                        }
                                                                         setTempReport({
                                                                             ...tempReport,
                                                                             id: TEMP_REPORT_ID,
                                                                             rows,
-                                                                            columns: columns,
+                                                                            columns: isSelectStar // if SELECT *, filter out custom fields from tabular view
+                                                                                ? // so Automatic Custom Fields can be applied
+                                                                                    columns.filter((col) => {
+                                                                                        return !customFieldColumns.includes(col.field);
+                                                                                    })
+                                                                                : columns,
+                                                                            includeCustomFields: isSelectStar,
                                                                             columnInternal: columns,
                                                                             rowCount: rowCount ?? 0,
                                                                             queryString: query ?? '',
@@ -574,7 +618,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                                         // flags: flagsToAdd,
                                                     });
                                                     setIsChartBuilderOpen(true);
-                                                }, label: addToDashboardButtonLabel, disabled: !!errorMessage || !(lastSuccessfulQuery === query) }))] }))] })] }) }) })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, isAdmin: isAdminEnabled, title: chartBuilderTitle, buttonLabel: addToDashboardButtonLabel, tempReport: tempReport, reportId: report?.id, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, hideDeleteButton: true, onClickChartElement: onClickChartElement, filtersEnabled: filtersEnabled, onFiltersEnabledChanged: (enabled) => setFiltersEnabled(enabled), isEditingMode: true }))] }));
+                                                }, label: addToDashboardButtonLabel, disabled: !!errorMessage || !(lastSuccessfulQuery === query) }))] }))] })] }) }) })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, isAdmin: isAdminEnabled, title: chartBuilderTitle, buttonLabel: addToDashboardButtonLabel, tempReport: tempReport, reportId: report?.id, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, CheckboxComponent: CheckboxComponent, hideDateRangeFilter: true, hideDeleteButton: true, onClickChartElement: onClickChartElement, filtersEnabled: filtersEnabled, onFiltersEnabledChanged: (enabled) => setFiltersEnabled(enabled), isEditingMode: true }))] }));
 }
 const SQLEditorComponent = ({ query, schema, databaseType, clientName, setQuery, setEditorMounted, handleRunQuery, defineEditorTheme, setEditorTheme, runQueryOnMount = false, theme, loading, LoadingComponent = QuillLoadingComponent, }) => {
     const [editorKey, setEditorKey] = useState(0);

package/dist/esm/Table.d.ts

@@ -1,5 +1,7 @@
 import React, { ChangeEvent, ReactNode } from 'react';
 import { MultiSelectComponentProps, SelectComponentProps } from './components/UiComponents';
+import { Filter } from './models/Filter';
+import { QuillReport } from './models/Report';
 export interface TableColumn {
     label: string;
     field: string;
@@ -44,6 +46,7 @@ export interface TableProps {
     rows?: {
         [key: string]: any;
     }[];
+    autoHide?: boolean;
     /**
      * The columns of the table to show, if any.
      *
@@ -116,6 +119,21 @@ export interface TableProps {
         }) => void;
         onChangePreset: (event: ChangeEvent<HTMLSelectElement>) => void;
     }) => JSX.Element;
+    TableComponent?: ({ report, onClick, hoverActions, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }: {
+        report: QuillReport;
+        onClick?: (report: QuillReport) => void;
+        hoverActions?: (report: QuillReport) => JSX.Element;
+        isLoading?: boolean;
+        error?: string;
+        rowCount?: number;
+        rowCountIsLoading?: boolean;
+        onPageChange?: (page: number) => void;
+        onSortChange?: (sort: {
+            field: string;
+            direction: string;
+        }) => void;
+        hideName?: boolean;
+    }) => JSX.Element;
     /** A filter container component component prop for the table filters */
     FilterContainerComponent?: ({ children, }: {
         children: ReactNode;
@@ -130,6 +148,8 @@ export interface TableProps {
      * Styles the top-level container of the Table.
      */
     containerStyle?: React.CSSProperties;
+    /** An array of dashboard filters that are indicated by the frontend dev. */
+    filters?: Filter[];
 }
 /**
  * ### Quill Table
@@ -162,6 +182,6 @@ export interface TableProps {
  * ### Table API
  * @see https://docs.quillsql.com/components/table
  */
-declare const Table: (props: TableProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Table: ({ TableComponent, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Table;
 //# sourceMappingURL=Table.d.ts.map

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

@@ -1 +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;AAef,OAAO,EACL,yBAAyB,EAEzB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAyBnC,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,mDA2C/B,CAAC;AAmUF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Table.js

@@ -1,17 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState, } from 'react';
-import { ClientContext, DashboardContext, ReportFiltersContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo, useState, } from 'react';
+import { ClientContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, ReportsContext, } 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 { convertInternalReportToReport, fetchReport, formatRowsFromReport, } from './utils/report';
-import { fetchResultsByReport, } from './utils/tableProcessing';
-import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
+import { convertCustomFilter, FilterType } from './models/Filter';
+import { DEFAULT_PAGINATION, } from './utils/paginationProcessing';
+import DataLoader from './components/Dashboard/DataLoader';
+import QuillTableComponent from './components/Dashboard/TableComponent';
 /**
  * ### Quill Table
  *
@@ -43,197 +37,41 @@ import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './util
  * ### Table API
  * @see https://docs.quillsql.com/components/table
  */
-const Table = (props) => {
+const Table = ({ TableComponent = QuillTableComponent, ...props }) => {
     const data = props;
     const [dashboard] = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [client] = useContext(ClientContext);
-    const { reportFilters } = useContext(ReportFiltersContext);
+    const { reports,
+    // reportsDispatch, 
+    // fetchIndividualReport 
+     } = useContext(ReportsContext);
+    const report = useMemo(() => reports[props.reportId ?? ''], [reports, props.reportId]);
+    const { 
+    // reportFiltersDispatch, 
+    reportFilters } = useContext(ReportFiltersContext);
+    const specificReportFilters = useMemo(() => {
+        return Object.values(reportFilters[props.reportId ?? ''] ??
+            (dashboard[props.reportId ?? '']
+                ? dashboardFilters[dashboard[props.reportId ?? '']?.dashboardName ?? '']
+                : null) ??
+            {}).map((f) => f.filter);
+    }, [reportFilters[props.reportId ?? '']]);
+    // const reportDateFilter = useMemo(() => {
+    //   return specificReportFilters.find((f) => f.filterType === 'date_range');
+    // }, [specificReportFilters]);
+    const userFilters = useMemo(() => {
+        return props.filters?.filter((f) => f.filterType !== FilterType.Date);
+    }, [props.filters]);
     const [page, setPage] = useState(0);
     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, currentPage: page, onPageChange: setPage }));
     }
-    if (!client) {
+    if (!client || !report) {
         return null;
     }
-    return (_jsx(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dashboardContext: dashboard, filterContext: reportFilters, 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, filterContext, 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 [schemaData] = useContext(SchemaDataContext);
-    const { tenants, flags } = useContext(TenantContext);
-    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 [pivot, setPivot] = useState(null);
-    const [pivotQuery, setPivotQuery] = useState(undefined);
-    const [comparisonPivotQuery, setComparisonPivotQuery] = useState(undefined);
-    const [currentPage, setCurrentPage] = useState(0);
-    // const { reportFiltersDispatch, reportFilters } =
-    //   useContext(ReportFiltersContext);
-    const [currentProcessing, setCurrentProcessing] = useState({
-        page: pagination,
-    });
-    const [theme] = useContext(ThemeContext);
-    const onPageChange = (page) => {
-        setCurrentPage(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 fetchResultsByReport({
-                    reportId,
-                    client,
-                    tenants,
-                    processing: updatedProcessing,
-                    filters: tableFilters,
-                    customFields: schemaData.customFields,
-                    pivot,
-                    pivotQuery,
-                    comparisonPivotQuery,
-                });
-                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, tenants, flags, useReportTask, reportFilters ? reportFilters.filters : [], processing, undefined, schemaData.customFields);
-        if (error) {
-            setLoading(false);
-            setInitialLoad(false);
-            setRows([]);
-            return;
-        }
-        setPivotQuery(report.pivotQuery);
-        setComparisonPivotQuery(report.comparisonPivotQuery);
-        const convertedReport = convertInternalReportToReport(report, reportFilters && reportFilters.filters ? reportFilters.filters : []);
-        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,
-            //   },
-            // });
-        }
-        setPivot(convertedReport.pivot);
-        setRows(convertedReport.rows); // convertInternalReportToReport already formats rows if chartType === table
-        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 };
-        const parsedReportFilters = { 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;
-        }
-        const reportFilters = Object.values(filterContext[reportId] ?? {}).map((f) => f.filter);
-        const convertedReport = convertInternalReportToReport(report, reportFilters);
-        setRows(convertedReport.rows); // convertInternalReportToReport already formats rows if chartType === table
-        setRowCount(convertedReport.rowCount);
-        setColumns(convertedReport.columns);
-        setTableFilters(reportFilters);
-    }, []);
-    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, f.dashboardName);
-                            }
-                            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, currentPage: currentPage })] }));
+    return (_jsx(DataLoader, { item: report, filters: specificReportFilters, userFilters: userFilters?.map(convertCustomFilter), additionalProcessing: {
+            page: DEFAULT_PAGINATION,
+        }, reportMode: true, children: ({ isLoading, error, onPageChange, onSortChange, data, rowCount, rowCountIsLoading, }) => _jsx(TableComponent, { report: data, isLoading: isLoading, error: error, rowCount: rowCount ?? data?.rowCount ?? data?.rows?.length ?? 0, rowCountIsLoading: rowCountIsLoading, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort), hideName: true }) }));
 };
 export default Table;

package/dist/esm/components/Chart/BarChart.d.ts

@@ -1,6 +1,6 @@
 import { type ColorMapType } from '../../Chart';
 import { AxisFormat } from '../../Dashboard';
-export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, onClickChartElement, dateFilter, }: {
+export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, onClickChartElement, dateFilter, referenceLines, }: {
     colors: string[];
     colorMap?: ColorMapType;
     yAxisFields: any[];
@@ -19,5 +19,9 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
     hideCartesianGrid: boolean;
     onClickChartElement?: (e: any) => void;
     dateFilter?: any;
+    referenceLines?: {
+        label: string;
+        query: number[];
+    }[];
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BarChart.d.ts.map

package/dist/esm/components/Chart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAAmB,EACnB,UAAU,GACX,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,2CA6MA"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAAmB,EACnB,UAAU,EACV,cAAc,GACf,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,cAAc,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAC,EAAE,CAAC;CACrD,2CAkNA"}

package/dist/esm/components/Chart/BarChart.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, } from 'recharts';
+import { CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, Customized, } from 'recharts';
 import { valueFormatter } from '../../utils/valueFormatter';
 import { axisFormatter } from '../../utils/axisFormatter';
 import { generateArrayFromColor, selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
-export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, onClickChartElement, dateFilter, }) {
+import CustomReferenceLine from './CustomReferenceLine';
+export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, onClickChartElement, dateFilter, referenceLines, }) {
     const getCustomColor = (field) => {
         const key = field.startsWith('comparison_') ? 'comparison' : 'primary';
         field = field.replace('comparison_', '');
@@ -43,7 +44,7 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
                     ? onClickChartElement(event?.activePayload
                         ? event.activePayload[0].payload
                         : undefined)
-                    : undefined, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
+                    : undefined, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields, referenceLines), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
                         }, tickFormatter: (tick) => {
@@ -96,5 +97,5 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
                                 selectColor(elem, colors.length >= yAxisFields.length / (comparison ? 2 : 1)
                                     ? colors
                                     : generateArrayFromColor(colors.slice(0, 2), yAxisFields.length), yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field));
-                    })] }) }) }));
+                    }), referenceLines && (referenceLines.map(({ label, query }) => (_jsx(Customized, { component: (props) => _jsx(CustomReferenceLine, { ...props, referenceLine: query, label: label }) }, label))))] }) }) }));
 }

package/dist/esm/components/Chart/CustomReferenceLine.d.ts

@@ -0,0 +1,2 @@
+export default function CustomReferenceLine({ xAxisMap, yAxisMap, referenceLine, label, color }: any): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=CustomReferenceLine.d.ts.map

package/dist/esm/components/Chart/CustomReferenceLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomReferenceLine.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/CustomReferenceLine.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,kDAwEnG"}

package/dist/esm/components/Chart/CustomReferenceLine.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { REFERENCE_LINE } from "../../utils/constants";
+export default function CustomReferenceLine({ xAxisMap, yAxisMap, referenceLine, label, color }) {
+    const xAxisKey = Object.keys(xAxisMap)[0];
+    const yAxisKey = Object.keys(yAxisMap)[0];
+    if (!xAxisKey || !yAxisKey)
+        return null;
+    const xMin = xAxisMap[xAxisKey].scale.range()[0];
+    const xMax = xAxisMap[xAxisKey].scale.range()[1];
+    const yScale = yAxisMap[yAxisKey].scale;
+    const y1 = yScale(referenceLine[0]);
+    const y2 = yScale(referenceLine[1]);
+    const textY = yScale(referenceLine[referenceLine.length - 1] + 30);
+    return (_jsxs(_Fragment, { children: [referenceLine.length === 2 &&
+                _jsx("line", { x1: xMin, y1: y1, x2: xMax, y2: y2, stroke: color || "gray", strokeDasharray: "5 5", strokeWidth: 1, pointerEvents: "none" }), referenceLine.length > 2 &&
+                referenceLine.slice(1).map((point, index) => {
+                    const x1 = xMin + (xMax - xMin) * (index / (referenceLine.length - 1));
+                    const x2 = xMin + (xMax - xMin) * ((index + 1) / (referenceLine.length - 1));
+                    return (_jsx("line", { x1: x1, y1: yScale(referenceLine[index]), x2: x2, y2: yScale(point), stroke: color || "gray", strokeDasharray: "5 5", strokeWidth: 1, pointerEvents: "none" }, index));
+                }), _jsxs("text", { x: xMax - 5, y: textY, fontSize: "12", fill: color || "gray", 
+                // stroke="white"
+                strokeWidth: 0.4, strokeLinejoin: "round", paintOrder: "stroke fill", fontWeight: "light", textAnchor: "end", z: 10000, children: [label === REFERENCE_LINE ? '' : label, " ", referenceLine.length > 2 ? '' : `(${referenceLine[0] === referenceLine[1] ? referenceLine[0] : referenceLine.join(", ")})`] })] }));
+}

package/dist/esm/components/Chart/GaugeChart.d.ts

@@ -0,0 +1,11 @@
+import 'd3-transition';
+import { AxisFormat } from "../../Dashboard";
+export default function GaugeChart({ data, xAxisField, xAxisFormat, containerStyle, colors, isAnimationActive, }: {
+    data: any[];
+    xAxisField: string;
+    xAxisFormat: AxisFormat;
+    containerStyle?: React.CSSProperties;
+    colors: string[];
+    isAnimationActive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GaugeChart.d.ts.map

package/dist/esm/components/Chart/GaugeChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/GaugeChart.tsx"],"names":[],"mappings":"AAIA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAwB,GACzB,EAAE;IACD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,2CAeA"}