@quillsql/react 2.11.21 → 2.11.24

package/dist/esm/SQLEditor.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { DashboardItem } from './Dashboard';
 export declare function convertPostgresColumn(column: any): {
+    name: any;
     label: any;
     field: any;
     format: string;
@@ -16,6 +17,8 @@ export interface SQLEditorProps {
     ButtonComponent?: (props: {
         onClick: () => void;
         label: string;
+        disabled?: boolean;
+        icon?: ReactNode;
     }) => JSX.Element;
     /**
      * A secondary button component.
@@ -23,6 +26,12 @@ export interface SQLEditorProps {
     SecondaryButtonComponent?: (props: {
         onClick: () => void;
         label: string;
+        disabled?: boolean;
+        icon?: ReactNode;
+    }) => JSX.Element;
+    /** A small delete button used to click out of things. Usually an "X" icon. */
+    DeleteButtonComponent?: (props: {
+        onClick: () => void;
     }) => JSX.Element;
     /**
      * A input element for getting text from the user.
@@ -31,9 +40,21 @@ export interface SQLEditorProps {
         id: string;
         width: number;
         value: string;
+        label?: string;
         placeholder?: string;
         onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     }) => JSX.Element;
+    /** A select component. */
+    SelectComponent?: (props: {
+        value: string;
+        label?: string;
+        options: {
+            value: string;
+            label: string;
+        }[];
+        onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+        width: number;
+    }) => JSX.Element;
     /**
      * A table component to show the results of the SQL query.
      */
@@ -68,6 +89,66 @@ export interface SQLEditorProps {
         width?: number;
         height?: number;
     }) => JSX.Element;
+    /** A popover component. */
+    PopoverComponent?: (props: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        triggerLabel?: string;
+        popoverTitle?: string;
+        popoverChildren: ReactNode;
+    }) => JSX.Element;
+    /** A label component. */
+    LabelComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A header component. */
+    HeaderComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A sub-header component describes a group of inputs. */
+    SubHeaderComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A simple text component. */
+    TextComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /**
+     * A container for each row of inputs for the ChartBuilder form.
+     */
+    ChartBuilderInputRowContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A container for vertically-stacked rows of inputs for the ChartBuilder form.
+     */
+    ChartBuilderInputColumnContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A container for each row of inputs for the pivot form.
+     */
+    PivotRowContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A container for vertically-stacked rows of inputs for the pivot form.
+     */
+    PivotColumnContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A container for vertically-stacked sections of the chart builder form.
+     */
+    ChartBuilderFormContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A component that displays error messages.
+     */
+    ErrorMessageComponent?: (props: {
+        errorMessage: string;
+    }) => JSX.Element;
     /**
      * A callback that is fired when the query changes.
      */
@@ -87,7 +168,7 @@ export interface SQLEditorProps {
     /**
      * A callback that is fired when a dashboard item has been added to a dashboard.
      */
-    onAddToDashboardComplete?: () => void;
+    onAddToDashboardComplete?: (dashboardItem: DashboardItem) => void;
     /**
      * Whether the chart builder is in horizontal view mode.
      *
@@ -182,7 +263,7 @@ export interface SQLEditorProps {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-export default function SQLEditor({ ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, isNewQueryEnabled, LoadingComponent, ModalComponent, CardComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, isChartBuilderHorizontalView, containerStyle, className, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function SQLEditor({ ButtonComponent, SecondaryButtonComponent, DeleteButtonComponent, TextInputComponent, SelectComponent, TableComponent, isNewQueryEnabled, LoadingComponent, ModalComponent, PopoverComponent, CardComponent, LabelComponent, HeaderComponent, SubHeaderComponent, TextComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ChartBuilderFormContainer, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, isChartBuilderHorizontalView, containerStyle, className, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
 export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, onClick, }: {
     schema: any;
     theme: any;

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

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"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"}

package/dist/esm/SQLEditor.js

@@ -7,14 +7,18 @@ import MonacoEditor from '@monaco-editor/react';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
 import { ChartBuilderWithModal } from './ChartBuilder';
-import { MemoizedButton, MemoizedModal, MemoizedSecondaryButton, QuillTableComponent, } from './components/UiComponents';
+import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedModal, MemoizedPopover, MemoizedSecondaryButton, MemoizedSubHeader, MemoizedText, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableComponent, } from './components/UiComponents';
 import { QuillTextInput } from './components/UiComponents';
 import { updateFirstChildWidth } from './utils/width';
 import { QuillCard } from './components/QuillCard';
+import { QuillSelectComponent } from './components/QuillSelect';
 export function convertPostgresColumn(column) {
     let format;
     let fieldType;
     switch (column.dataTypeID) {
+        case 16: // bool
+            format = 'string';
+            break;
         case 20: // int8
         case 21: // int2
         case 23: // int4
@@ -37,6 +41,9 @@ export function convertPostgresColumn(column) {
             format = 'string';
     }
     switch (column.dataTypeID) {
+        case 16: // boolean
+            fieldType = 'bool';
+            break;
         case 20: // int8
             fieldType = 'int8';
             break;
@@ -75,6 +82,7 @@ export function convertPostgresColumn(column) {
             fieldType = 'varchar';
     }
     return {
+        name: column.name,
         label: column.name,
         field: column.name,
         format,
@@ -131,7 +139,7 @@ function setEditorTheme(editor, monaco) {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, TextInputComponent = QuillTextInput, TableComponent = QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, ModalComponent = MemoizedModal, CardComponent = QuillCard, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, }) {
+export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, 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, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, }) {
     const [sqlPrompt, setSqlPrompt] = useState('');
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -350,7 +358,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                             justifyContent: 'flex-end',
                                             width: '100%',
                                             height: '70px',
-                                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), _jsx(ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent })] }));
+                                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), _jsx(ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, 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, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true })] }));
 }
 const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, isNewQueryEnabled, theme, loading, LoadingComponent, }) => {
     return (_jsxs("div", { style: {

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":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,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,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,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,MAAM,CAAC;IACpB,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;CAC5B,2CAuLA"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,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,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,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,MAAM,CAAC;IACpB,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;CAC5B,2CA0LA"}

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

@@ -49,11 +49,13 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
         }, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: formattedData, layout: 'horizontal', 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: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
-                        }, tickFormatter: (tick) => axisFormatter({
-                            value: tick,
-                            field: yAxisFields[0]?.field,
-                            fields: yAxisFields,
-                        }) }), _jsx(XAxis, { hide: hideXAxis, dataKey: xAxisField, tick: { transform: 'translate(0, 6)' }, style: {
+                        }, tickFormatter: (tick) => {
+                            return (axisFormatter({
+                                value: tick,
+                                field: yAxisFields[0]?.field,
+                                fields: yAxisFields,
+                            }) || tick);
+                        } }), _jsx(XAxis, { hide: hideXAxis, dataKey: xAxisField, tick: { transform: 'translate(0, 6)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
                             marginTop: '20px',
@@ -76,7 +78,7 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
                                     value,
                                     field: payload[0].dataKey,
                                     fields: yAxisFields,
-                                }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors }));
+                                }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, comparison: comparison }));
                         }, position: { y: 0 } }), yAxisFields.map((elem) => {
                         return (_jsx(Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked &&
                                 (elem.field?.replace('comparison_', '') ??

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

@@ -1 +1 @@
-{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAcvD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,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,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFA2dX,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAcvD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,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,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFAyLX,CAAC;AAEH,eAAe,OAAO,CAAC"}

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

@@ -52,159 +52,6 @@ const BarList = React.forwardRef((props, ref) => {
                 ...containerStyle,
             }, className: className, children: "No results found for specified time period." }));
     }
-    if (yAxisFields.length > 1) {
-        const widths2 = getWidthsFromValues(data.map((item) => item[yAxisFields[1].field]));
-        return (_jsxs("div", { ref: ref, className: className, style: {
-                ...containerStyle,
-                // width: '100%',
-                // height: '100%',
-                // marginLeft: 25,
-                // background: 'red',
-                // marginTop: 20,
-                // paddingRight: 25,
-                overflow: 'hidden',
-                boxSizing: 'content-box',
-                display: 'flex',
-                paddingTop: 20,
-                paddingLeft: 25,
-                // paddingRight: 25,
-                justifyContent: 'space-between',
-                // marginLeft: '24px',
-                // width: 'calc(100% - 24px)',
-            }, ...other, children: [_jsxs("div", { 
-                    //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-                    // className="qq-relative-w-full"
-                    style: {
-                        // width: '100%',
-                        height: '100%',
-                        position: 'relative',
-                        boxSizing: 'content-box',
-                        width: '100%',
-                    }, children: [data.slice(0, NUM_TO_SHOW).map((item, idx) => {
-                            //   const Icon = item.icon;
-                            const Icon = null;
-                            return (_jsxs("div", { style: {
-                                    boxSizing: 'content-box',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    width: '100%',
-                                }, children: [_jsx("div", { title: item[xAxisField], style: {
-                                            maxWidth: 130,
-                                            boxSizing: 'content-box',
-                                            minWidth: 130,
-                                            overflow: 'hidden',
-                                            width: '100%',
-                                        }, children: _jsx("p", { style: {
-                                                color: theme?.chartLabelColor,
-                                                boxSizing: 'content-box',
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                                fontSize: theme?.fontSizeSmall || '14px',
-                                            }, children: valueFormatter({
-                                                value: item[xAxisField],
-                                                field: xAxisField,
-                                                fields: [{ field: xAxisField, format: xAxisFormat }],
-                                            }) }) }), _jsxs("div", { style: {
-                                            width: '100%',
-                                            height: '100%',
-                                            boxSizing: 'content-box',
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                        }, children: [_jsx("div", { 
-                                                // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    height: '36px',
-                                                    borderRadius: '4px',
-                                                    marginBottom: '8px',
-                                                    width: `${widths[idx]}%`,
-                                                    transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: (colorMap &&
-                                                        colorMap[xAxisField] &&
-                                                        colorMap[xAxisField]['primary']) ??
-                                                        hexToRgbaWith10PercentAlpha(colors[0]),
-                                                    boxSizing: 'content-box',
-                                                }, children: _jsx("div", { style: {
-                                                        position: 'absolute',
-                                                        display: 'flex',
-                                                        maxWidth: '100%',
-                                                        boxSizing: 'content-box',
-                                                        marginLeft: '8px',
-                                                    }, children: _jsx("p", { style: {
-                                                            color: theme?.chartLabelColor,
-                                                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                                            boxSizing: 'content-box',
-                                                            whiteSpace: 'nowrap',
-                                                            overflow: 'hidden',
-                                                            textOverflow: 'ellipsis',
-                                                            fontSize: theme?.fontSizeSmall || '14px',
-                                                        }, children: yAxisFields[0].label }) }) }), _jsx("div", { 
-                                                // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    height: '36px',
-                                                    borderRadius: '4px',
-                                                    marginBottom: '8px',
-                                                    width: `${widths2[idx]}%`,
-                                                    transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: (colorMap &&
-                                                        colorMap[xAxisField] &&
-                                                        colorMap[xAxisField]['primary']) ??
-                                                        hexToRgbaWith10PercentAlpha(colors[1]),
-                                                    boxSizing: 'content-box',
-                                                }, children: _jsx("div", { style: {
-                                                        boxSizing: 'content-box',
-                                                        position: 'absolute',
-                                                        maxWidth: '100%',
-                                                        display: 'flex',
-                                                        marginLeft: '8px',
-                                                    }, children: _jsx("p", { style: {
-                                                            color: theme?.chartLabelColor,
-                                                            boxSizing: 'content-box',
-                                                            whiteSpace: 'nowrap',
-                                                            overflow: 'hidden',
-                                                            textOverflow: 'ellipsis',
-                                                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                                            fontSize: theme?.fontSizeSmall || '14px',
-                                                        }, children: yAxisFields[1].label }) }) })] })] }, item[xAxisField] + idx));
-                        }), data.length > NUM_TO_SHOW && (_jsxs("div", { style: {
-                                color: theme?.chartLabelColor,
-                                boxSizing: 'content-box',
-                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                fontSize: theme?.fontSizeSmall || '14px',
-                            }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }), _jsx("div", { style: {
-                        boxSizing: 'content-box',
-                        minWidth: 'min-content',
-                        textAlign: 'right',
-                        paddingLeft: 10,
-                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => {
-                        return (_jsx("div", { style: {
-                                boxSizing: 'content-box',
-                                display: 'flex',
-                                justifyContent: 'flex-end',
-                                alignItems: 'center',
-                                marginBottom: idx === data.length - 1 ? 0 : '8px',
-                                height: '36px',
-                            }, children: _jsx("p", { style: {
-                                    color: theme?.chartLabelColor,
-                                    boxSizing: 'content-box',
-                                    fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    fontSize: theme?.fontSizeSmall || '14px',
-                                }, children: valueFormatter({
-                                    value: item[yAxisFields[0].field],
-                                    field: yAxisFields[0].field,
-                                    fields: yAxisFields,
-                                }) }) }, item[xAxisField] + 'label' + idx));
-                    }) })] }));
-    }
     return (_jsx("div", { ref: ref, className: className, style: {
             // width: '100%',
             boxSizing: 'content-box',

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export default function ChartError({ className, containerStyle }: any): JSX.Element;
+export default function ChartError({ className, containerStyle, label, }: any): JSX.Element;
 //# sourceMappingURL=ChartError.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAqClF"}
+{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,SAAS,EACT,cAAc,EACd,KAA+B,GAChC,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA4CnB"}

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

@@ -1,26 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from '../../Context';
-export default function ChartError({ className, containerStyle }) {
-    const [theme] = useContext(ThemeContext);
+import { useTheme } from '../../hooks';
+export default function ChartError({ className, containerStyle, label = 'Failed to fetch data.', }) {
+    const theme = useTheme();
     return (_jsx("div", { style: {
             boxSizing: 'content-box',
             height: '100%',
             ...containerStyle,
         }, className: className, children: _jsx("div", { style: {
-                height: containerStyle?.height,
+                height: containerStyle?.height || '100%',
                 width: '100%',
                 boxSizing: 'content-box',
                 borderRadius: 8,
                 overflow: 'hidden',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
             }, children: _jsx("div", { style: {
-                    paddingTop: '60px',
+                    width: '100%',
+                    paddingLeft: 12,
+                    paddingRight: 12,
                     display: 'flex',
                     flex: '1 0 auto',
                     margin: 'auto',
                     justifyContent: 'center',
                     alignItems: 'center',
+                    textAlign: 'center',
                     fontSize: 13,
                     color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                }, children: "Failed to fetch data." }) }) }));
+                    fontFamily: theme.fontFamily,
+                }, children: label }) }) }));
 }

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

@@ -9,6 +9,7 @@ export interface ChartTooltipProps {
     xAxisFormat: string;
     xAxisField: string;
     theme: any;
+    comparison?: boolean;
 }
 type PayloadItem = {
     chartType: string | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAoUF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAM5D"}
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAoUF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAK5D"}

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

@@ -122,7 +122,7 @@ function reformatComparisonPayload(props, primaryLabel, comparisonLabel) {
     // name of each colored tag is the date if the xAxis is a date format.
     if (props.payload.length <= 2 && isDateXAxis) {
         for (const item of props.payload) {
-            const isComparison = item.dataKey.includes('comparison_');
+            const isComparison = item.name.includes('comparison ');
             const nameKey = isComparison
                 ? `comparison_${props.xAxisField}`
                 : props.xAxisField;
@@ -141,10 +141,10 @@ function reformatComparisonPayload(props, primaryLabel, comparisonLabel) {
         return columnsByKey;
     }
     // When there are more than one pair of entries in payload, we group them
-    // by the dataKey and use that key as the key in our map.
+    // by the name and use that key as the key in our map.
     for (const item of props.payload) {
-        const key = item.dataKey.replace('comparison_', '');
-        const isComparison = item.dataKey.includes('comparison_');
+        const key = item.name.replace('comparison ', '');
+        const isComparison = item.name.includes('comparison ');
         const name = isComparison ? comparisonLabel : primaryLabel;
         const color = item.color;
         const value = props.valueFormatter(item.value);
@@ -207,7 +207,7 @@ function ChartTooltipComparison(props) {
                         textTransform: 'capitalize',
                         paddingTop: 2,
                         paddingBottom: 2,
-                    }, children: getTooltipLabel(props, altTooltipLabel ?? "", isDateXAxis) }) }), _jsx("div", { style: {
+                    }, children: getTooltipLabel(props, altTooltipLabel ?? '', isDateXAxis) }) }), _jsx("div", { style: {
                     paddingRight: '16px',
                     paddingLeft: '16px',
                     paddingTop: '8px',
@@ -218,10 +218,9 @@ function ChartTooltipComparison(props) {
                 }, children: Object.entries(newRows).map(([key, value], index) => (_jsx(ChartTooltipGroup, { name: key, items: value, theme: props.theme }, `id_${index}`))) })] }));
 }
 export default function ChartTooltip(props) {
-    const { comparisonRange } = useComparisonRange();
     if (!props.active || !props.payload)
         return null;
-    if (comparisonRange)
+    if (props.comparison)
         return _jsx(ChartTooltipComparison, { ...props });
     if (props.label2)
         return _jsx(ChartTooltipSecondary, { ...props });

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

@@ -17,5 +17,5 @@ export default function LineChart({ colors, colorMap, yAxisFields, data, contain
     hideYAxis: boolean;
     hideCartesianGrid: boolean;
     comparisonLineStyle: 'solid' | 'dashed';
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAA6B,GAC9B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,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,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;CACzC,kDAiPA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAA6B,GAC9B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,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,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;CACzC,2CAsPA"}