@quillsql/react 2.8.5 → 2.8.7

package/dist/ChartBuilder.js

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.numberFormatOptions = exports.snakeCaseToTitleCase = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
-const react_1 = require("react");
-const Context_1 = require("./Context");
-const dataFetcher_1 = require("./utils/dataFetcher");
-const ReportBuilder_1 = require("./ReportBuilder");
-const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
-const PivotList_1 = require("./internals/ReportBuilder/PivotList");
-const Chart_1 = __importDefault(require("./Chart"));
-const UiComponents_1 = require("./components/UiComponents");
+import { useEffect, useRef, useState, useContext, useMemo } from 'react';
+import { ClientContext, DashboardContext, SchemaContext, ThemeContext, } from './Context';
+import { getData, getDataFromCloud } from './utils/dataFetcher';
+import { getPostgresBasicType } from './ReportBuilder';
+import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
+import { PivotCard } from './internals/ReportBuilder/PivotList';
+import Chart from './Chart';
+import { MemoizedModal, MemoizedTextInput, MemoizedSelect, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
-function snakeCaseToTitleCase(str) {
+export function snakeCaseToTitleCase(str) {
     if (!str) {
         return str;
     }
@@ -27,7 +21,6 @@ function snakeCaseToTitleCase(str) {
         : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
         .join(' ');
 }
-exports.snakeCaseToTitleCase = snakeCaseToTitleCase;
 const POSTGRES_DATE_TYPES = [
     'timestamp',
     'date',
@@ -39,7 +32,7 @@ async function getReferencedTables(client, sqlQuery, dbTables) {
     //   const parser = new Parser();
     const tables = [];
     const withAliases = [];
-    const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `astify`, { query: sqlQuery });
+    const resp = await getDataFromCloud(client, `astify`, { query: sqlQuery });
     let ast = resp.ast;
     ast = ast.length ? ast[0] : ast;
     if (ast.with && ast.with.length) {
@@ -73,7 +66,7 @@ const AGGREGATION_TYPES = [
     { label: 'count', value: 'count' },
     { label: 'average', value: 'avg' },
 ];
-exports.numberFormatOptions = [
+export const numberFormatOptions = [
     'whole_number',
     'one_decimal_place',
     'two_decimal_places',
@@ -97,30 +90,29 @@ const formatOptions = [
     { value: 'percent', label: 'percent' },
     { value: 'string', label: 'string' },
 ];
-function ChartBuilder(props) {
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.Modal ? ((0, jsx_runtime_1.jsx)(props.Modal, { isOpen: props.isOpen, setIsOpen: props.setIsOpen, title: props.title || 'Add to dashboard', onClose: () => props.setIsOpen(false), theme: theme, children: (0, jsx_runtime_1.jsx)(ChartBuilderForm, { ...props }) })) : ((0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedModal, { setIsOpen: props.setIsOpen, isOpen: props.isOpen, onClose: () => props.setIsOpen(false), title: props.title || 'Add to dashboard', theme: theme, children: (0, jsx_runtime_1.jsx)(ChartBuilderForm, { ...props }) })) }));
+export default function ChartBuilder(props) {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx(_Fragment, { children: props.Modal ? (_jsx(props.Modal, { isOpen: props.isOpen, setIsOpen: props.setIsOpen, title: props.title || 'Add to dashboard', onClose: () => props.setIsOpen(false), theme: theme, children: _jsx(ChartBuilderForm, { ...props }) })) : (_jsx(MemoizedModal, { setIsOpen: props.setIsOpen, isOpen: props.isOpen, onClose: () => props.setIsOpen(false), title: props.title || 'Add to dashboard', theme: theme, children: _jsx(ChartBuilderForm, { ...props }) })) }));
 }
-exports.default = ChartBuilder;
-function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, isOpen, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, }) {
+function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSelect, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Modal = MemoizedModal, Popover = MemoizedPopover, isOpen, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, }) {
     const dateRange = dr || [null, null, null];
-    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
-    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
-    const [divWidth, setDivWidth] = (0, react_1.useState)(0);
-    const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const [client] = useContext(ClientContext);
+    const [theme] = useContext(ThemeContext);
+    const [schema, setSchema] = useContext(SchemaContext);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [divWidth, setDivWidth] = useState(0);
+    const { dispatch } = useContext(DashboardContext);
     const fields = fieldsProp?.map((field) => ({
         field: field.name,
-        type: (0, ReportBuilder_1.getPostgresBasicType)(field),
+        type: getPostgresBasicType(field),
         format: field.format,
         label: field.name,
     })) || [];
-    const parentRef = (0, react_1.useRef)();
-    const deleteRef = (0, react_1.useRef)();
+    const parentRef = useRef();
+    const deleteRef = useRef();
     const modalPadding = 20;
     const deleteButtonMargin = -13;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const calculateWidth = () => {
             return (parentRef.current.offsetWidth -
                 (deleteRef?.current
@@ -144,11 +136,11 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
         };
     }, []);
     // get schema
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let isSubscribed = true;
         async function getSchema() {
             if (!schema || !schema.length) {
-                const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
+                const resp = await getDataFromCloud(client, `schema2/${client.publicKey}/`, null, 'GET');
                 if (isSubscribed) {
                     setSchema(resp.tables);
                 }
@@ -162,11 +154,11 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
         };
     }, [schema]);
     // get dashboards
-    const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
-    const [defaultDashboardName, setDefaultDashboardName] = (0, react_1.useState)(destinationDashboard ||
+    const [dashboardOptions, setDashboardOptions] = useState([]);
+    const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard ||
         dashboardItem?.dashboardName ||
         dashboardOptions[0]?.label);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!destinationDashboard &&
             !dashboardItem &&
             dashboardOptions &&
@@ -174,31 +166,31 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
             setDefaultDashboardName(dashboardOptions[0]?.label);
         }
     }, [dashboardOptions]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         async function getDashNames() {
-            const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `dashnames/${client.publicKey}/`, null, 'GET');
+            const resp = await getDataFromCloud(client, `dashnames/${client.publicKey}/`, null, 'GET');
             setDashboardOptions(resp.dashboardNames
                 .filter((elem) => elem !== null)
                 .map((key) => ({ label: key, value: key })));
         }
         getDashNames();
     }, []);
-    const [showPivotPopover, setShowPivotPopover] = (0, react_1.useState)(false);
-    const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
-    const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
-    const [tableName, setTableName] = (0, react_1.useState)(null);
+    const [showPivotPopover, setShowPivotPopover] = useState(false);
+    const [isEdittingPivot, setIsEdittingPivot] = useState(false);
+    const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
+    const [tableName, setTableName] = useState(null);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
-    const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add Pivot');
-    const [createdPivots, setCreatedPivots] = (0, react_1.useState)(pivot ? [pivot] : dashboardItem?.pivot ? [dashboardItem.pivot] : cp);
-    const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)(rp);
-    const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
-    const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
-    const [pivotValueField, setPivotValueField] = (0, react_1.useState)(undefined);
-    const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
+    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
+    const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : dashboardItem?.pivot ? [dashboardItem.pivot] : cp);
+    const [recommendedPivots, setRecommendedPivots] = useState(rp);
+    const [pivotRowField, setPivotRowField] = useState(undefined);
+    const [pivotColumnField, setPivotColumnField] = useState(undefined);
+    const [pivotValueField, setPivotValueField] = useState(undefined);
+    const [pivotAggregation, setPivotAggregation] = useState(undefined);
     // initial state is the fields array passed in, but can eventually be changed to be the pivot fields
-    const [fieldOptions, setFieldOptions] = (0, react_1.useState)(fields);
-    const [dateFieldOptions, setDateFieldOptions] = (0, react_1.useState)([]);
-    (0, react_1.useEffect)(() => {
+    const [fieldOptions, setFieldOptions] = useState(fields);
+    const [dateFieldOptions, setDateFieldOptions] = useState([]);
+    useEffect(() => {
         const fetchReferencedTables = async () => {
             if (!query) {
                 return;
@@ -223,7 +215,7 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
         table: dateFieldOptions[0]?.name,
         field: dateFieldOptions[0]?.columns[0]?.name,
     };
-    const firstNumberColumn = columns?.find((col) => exports.numberFormatOptions.includes(col.format));
+    const firstNumberColumn = columns?.find((col) => numberFormatOptions.includes(col.format));
     const formEmptyState = {
         name: '',
         dashboardName: dashboardOptions?.[0]?.label,
@@ -250,13 +242,13 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
         // date labels for pivots should be treated like strings since they are
         // formatted in generatePivotTable
         const yAxisIsDate = pivot.columnField
-            ? (0, PivotModal_1.isDateField)(pivot.columnFieldType)
+            ? isDateField(pivot.columnFieldType)
             : false;
         return {
             pivot,
             chartType: 'column',
             xAxisField: pivot.rowField,
-            xAxisFormat: (0, PivotModal_1.isDateField)(pivot.rowFieldType)
+            xAxisFormat: isDateField(pivot.rowFieldType)
                 ? 'string'
                 : columns.find((col) => col.field === pivot.rowField)?.format ||
                     'whole_number',
@@ -273,12 +265,12 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
             ],
         };
     };
-    const [formData, setFormData] = (0, react_1.useState)(pivot
+    const [formData, setFormData] = useState(pivot
         ? { ...formEmptyState, ...pivotFormData(pivot) }
         : dashboardItem || formEmptyState);
-    const selectedPivotTable = (0, react_1.useMemo)(() => {
+    const selectedPivotTable = useMemo(() => {
         if (formData.pivot && rows) {
-            return (0, PivotModal_1.generatePivotTable)(formData.pivot, rows, dateRange);
+            return generatePivotTable(formData.pivot, rows, dateRange);
         }
         else {
             return {};
@@ -412,7 +404,7 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                 customerId: customerId,
             }
             : { clientId: publicKey }).toString();
-        const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `deletedash/${publicKey}/${customerId}/?${searchParams}`, cloudBody);
+        const resp = await getDataFromCloud(client, `deletedash/${publicKey}/${customerId}/?${searchParams}`, cloudBody);
         if (resp) {
             if (onDelete) {
                 onDelete();
@@ -460,7 +452,7 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                 customerId: customerId,
             }
             : { clientId: publicKey }).toString();
-        const resp = await (0, dataFetcher_1.getData)(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
+        const resp = await getData(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
         console.log(`RESP: ${resp}`);
         if (resp) {
             dispatch({
@@ -482,13 +474,13 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
     if (!schema) {
         return;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { id: "quill-chart-modal", style: { padding: modalPadding }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Chart_1.default, { config: { ...formData, rows }, colors: theme.chartColors, containerStyle: {
+    return (_jsxs("div", { id: "quill-chart-modal", style: { padding: modalPadding }, children: [_jsx("div", { children: _jsx(Chart, { config: { ...formData, rows }, colors: theme.chartColors, containerStyle: {
                         width: formData.chartType === 'table' ? 640 : 'calc(100% - 24px)',
                         height: 300,
-                    } }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsxs)("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(Label, { children: "Name" }), (0, jsx_runtime_1.jsx)(TextInput, { value: formData.name, onChange: (e) => handleChange(e, 'name'), placeholder: "Name" })] }), showDashboardDropdown && !destinationDashboard && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(Label, { children: "Dashboard" }), (0, jsx_runtime_1.jsx)(Select, { label: 'Dashboard', value: formData.dashboardName, onChange: (e) => handleChange(e, 'dashboardName'), options: dashboardOptions.map((elem) => ({
+                    } }) }), _jsx("div", { style: { height: 20 } }), _jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Name" }), _jsx(TextInput, { value: formData.name, onChange: (e) => handleChange(e, 'name'), placeholder: "Name" })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Dashboard" }), _jsx(Select, { label: 'Dashboard', value: formData.dashboardName, onChange: (e) => handleChange(e, 'dashboardName'), options: dashboardOptions.map((elem) => ({
                                             label: elem.label,
                                             value: elem.label,
-                                        })) })] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(Label, { children: "Chart type" }), (0, jsx_runtime_1.jsx)(Select, { label: 'Chart Type', value: formData.chartType, onChange: (e) => handleChange(e, 'chartType'), 
+                                        })) })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Chart type" }), _jsx(Select, { label: 'Chart Type', value: formData.chartType, onChange: (e) => handleChange(e, 'chartType'), 
                                         // filter out metric for all pivots
                                         // filter out bar and pie for row and column pivot
                                         options: CHART_TYPES.filter((elem) => !firstNumberColumn
@@ -496,21 +488,21 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                                             : !((formData.pivot && elem === 'metric') ||
                                                 (formData.pivot &&
                                                     formData.pivot.columnField &&
-                                                    (elem === 'bar' || elem === 'pie')))).map((elem) => ({ label: elem, value: elem })) })] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    (elem === 'bar' || elem === 'pie')))).map((elem) => ({ label: elem, value: elem })) })] })] }), _jsx("br", {}), _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 12,
                             marginTop: 6,
-                        }, children: [(0, jsx_runtime_1.jsx)(Header, { children: "Pivot" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontFamily: theme?.fontFamily }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: [_jsx(Header, { children: "Pivot" }), _jsxs("div", { style: { fontFamily: theme?.fontFamily }, children: [_jsx("div", { style: {
                                             maxWidth: 200,
                                             // marginTop: 6,
                                             display: 'flex',
                                             flexDirection: 'column',
-                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: Select, ButtonComponent: Button, PopoverComponent: Popover, LabelComponent: Label, TextComponent: Text, HeaderComponent: Header, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: Select, ButtonComponent: Button, PopoverComponent: Popover, LabelComponent: Label, TextComponent: Text, HeaderComponent: Header, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && (_jsx("div", { style: {
                                             // width: 592,
                                             paddingRight: deleteRef?.current ? 42 : 0,
                                             maxWidth: 750,
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { width: divWidth }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                        }, children: _jsx("div", { style: { width: divWidth }, children: _jsx(PivotCard, { pivotTable: {
                                                     pivot: formData.pivot,
                                                     rows: selectedPivotTable?.rows,
                                                     columns: selectedPivotTable?.columns,
@@ -522,23 +514,23 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                                                     setPivotValueField(formData.pivot?.valueField);
                                                     setPivotAggregation(formData.pivot?.aggregationType);
                                                     setPivotPopUpTitle('Edit Pivot');
-                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: Label, TextComponent: Text }) }) }))] })] }), (0, jsx_runtime_1.jsx)("br", {}), (formData.pivot || formData.chartType !== 'table') && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: Label, TextComponent: Text }) }) }))] })] }), _jsx("br", {}), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: 6,
                                     marginTop: 6,
-                                }, children: [(0, jsx_runtime_1.jsx)(Header, { children: "Chart" }), (0, jsx_runtime_1.jsx)(Label, { children: "X-axis" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsx)(Select, { label: 'X-axis Field', value: formData.xAxisField, onChange: (e) => handleChange(e, 'xAxisField'), disabled: formData.pivot !== null, options: fieldOptions.map((elem) => ({
+                                }, children: [_jsx(Header, { children: "Chart" }), _jsx(Label, { children: "X-axis" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'X-axis Field', value: formData.xAxisField, onChange: (e) => handleChange(e, 'xAxisField'), disabled: formData.pivot !== null, options: fieldOptions.map((elem) => ({
                                             label: formData.pivot
                                                 ? `pivot row (${elem.field})`
                                                 : elem.field,
                                             value: elem.field,
-                                        })) }), (0, jsx_runtime_1.jsx)(TextInput, { value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e, 'xAxisLabel') }), (0, jsx_runtime_1.jsx)(Select, { label: 'X-axis Format', value: formData.xAxisFormat, onChange: (e) => handleChange(e, 'xAxisFormat'), options: formatOptions })] }, 'xAxisField0'), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Label, { children: "Y-axis" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsx)(Select, { label: 'Y-axis Field', value: yAxisField.field, onChange: (e) => handleChange(e, 'yAxisFields.field', index), disabled: formData.pivot !== null, options: [
+                                        })) }), _jsx(TextInput, { value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e, 'xAxisLabel') }), _jsx(Select, { label: 'X-axis Format', value: formData.xAxisFormat, onChange: (e) => handleChange(e, 'xAxisFormat'), options: formatOptions })] }, 'xAxisField0'), _jsx("br", {}), _jsx(Label, { children: "Y-axis" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.yAxisFields.map((yAxisField, index) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'Y-axis Field', value: yAxisField.field, onChange: (e) => handleChange(e, 'yAxisFields.field', index), disabled: formData.pivot !== null, options: [
                                                 { label: 'Select', value: '' },
                                                 ...fieldOptions
                                                     .filter((elem) => {
                                                     return (formData.chartType === 'table' ||
                                                         formData.pivot ||
-                                                        exports.numberFormatOptions.includes(columns.find((col) => col.field === elem.field)
+                                                        numberFormatOptions.includes(columns.find((col) => col.field === elem.field)
                                                             ?.format));
                                                 })
                                                     .map((elem) => ({
@@ -547,28 +539,28 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                                                         : elem.field,
                                                     value: elem.field,
                                                 })),
-                                            ] }), (0, jsx_runtime_1.jsx)(TextInput, { value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'yAxisFields.label', index) }), (0, jsx_runtime_1.jsx)(Select, { label: 'Y-axis Format', value: yAxisField.format, onChange: (e) => handleChange(e, 'yAxisFields.format', index), options: [{ label: 'Select', value: '' }, ...formatOptions] }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, children: (0, jsx_runtime_1.jsx)(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), (showTableFormatOptions || formData.chartType === 'table') && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            ] }), _jsx(TextInput, { value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'yAxisFields.label', index) }), _jsx(Select, { label: 'Y-axis Format', value: yAxisField.format, onChange: (e) => handleChange(e, 'yAxisFields.format', index), options: [{ label: 'Select', value: '' }, ...formatOptions] }), formData.pivot === null && (_jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] })), _jsx("br", {}), _jsx("br", {})] })), (showTableFormatOptions || formData.chartType === 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: 6,
                                     marginTop: 6,
-                                }, children: [(0, jsx_runtime_1.jsx)(Header, { children: "Table" }), (0, jsx_runtime_1.jsx)(Label, { children: "Columns" })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsx)(Select, { label: 'Column Field', value: column.field, onChange: (e) => handleChange(e, 'columns.field', index), options: [
+                                }, children: [_jsx(Header, { children: "Table" }), _jsx(Label, { children: "Columns" })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.columns.map((column, index) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'Column Field', value: column.field, onChange: (e) => handleChange(e, 'columns.field', index), options: [
                                                 { label: 'Select', value: '' },
                                                 ...fields.map((elem) => ({
                                                     label: elem.field,
                                                     value: elem.field,
                                                 })),
-                                            ] }), (0, jsx_runtime_1.jsx)(TextInput, { name: "label", value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(Select, { label: 'Column Format', value: column.format, onChange: (e) => handleChange(e, 'columns.format', index), options: [{ label: 'Select', value: '' }, ...formatOptions] }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, children: (0, jsx_runtime_1.jsx)(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => handleAddField('columns'), label: "Add column +" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), showDateFieldOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            ] }), _jsx(TextInput, { name: "label", value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index) }), _jsx(Select, { label: 'Column Format', value: column.format, onChange: (e) => handleChange(e, 'columns.format', index), options: [{ label: 'Select', value: '' }, ...formatOptions] }), _jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), _jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('columns'), label: "Add column +" }), _jsx("br", {}), _jsx("br", {})] })), showDateFieldOptions && (_jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 6,
                             marginTop: 6,
-                        }, children: [(0, jsx_runtime_1.jsx)(Header, { children: "Date field" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, children: [_jsx(Header, { children: "Date field" }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     gap: 12,
                                     // lmao part 2
-                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(Label, { children: "Table" }), (0, jsx_runtime_1.jsx)(Select, { label: 'Date Table', value: formData.dateField.table, onChange: (e) => handleChange(e, 'dateField.table'), options: [
+                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Table" }), _jsx(Select, { label: 'Date Table', value: formData.dateField.table, onChange: (e) => handleChange(e, 'dateField.table'), options: [
                                                     {
                                                         label: 'Select',
                                                         value: '',
@@ -577,29 +569,29 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                                                         label: elem.name,
                                                         value: elem.name,
                                                     })),
-                                                ] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(Label, { children: "Field" }), (0, jsx_runtime_1.jsx)(Select, { label: 'Date Field', value: formData.dateField.field, onChange: (e) => handleChange(e, 'dateField.field'), options: dateFieldOptions
+                                                ] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Field" }), _jsx(Select, { label: 'Date Field', value: formData.dateField.field, onChange: (e) => handleChange(e, 'dateField.field'), options: dateFieldOptions
                                                     ?.find((elem) => elem.name === formData.dateField.table)
                                                     ?.columns?.map((elem) => ({
                                                     label: elem.name,
                                                     value: elem.name,
-                                                })) || [] })] })] }), (0, jsx_runtime_1.jsx)("br", {})] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                })) || [] })] })] }), _jsx("br", {})] })), showAccessControlOptions && (_jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 12,
                             marginTop: 6,
-                        }, children: [(0, jsx_runtime_1.jsx)(Header, { children: "Organization access" }), (0, jsx_runtime_1.jsx)(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, children: [_jsx(Header, { children: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme }), _jsx("br", {}), _jsx("br", {})] })), _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             justifyContent: 'flex-end',
                             gap: 10,
-                        }, children: [dashboardItem && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: deleteChart, label: 'Delete' })), (0, jsx_runtime_1.jsx)(Button, { onClick: editChart, label: buttonLabel
+                        }, children: [dashboardItem && (_jsx(SecondaryButton, { onClick: deleteChart, label: 'Delete' })), _jsx(Button, { onClick: editChart, label: buttonLabel
                                     ? buttonLabel
                                     : dashboardItem
                                         ? 'Save changes'
                                         : 'Add to dashboard' })] })] })] }));
 }
 function SegmentedControl({ onChange, value, theme }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -607,7 +599,7 @@ function SegmentedControl({ onChange, value, theme }) {
             maxWidth: 418,
             padding: 4,
             borderRadius: 6,
-        }, children: [(0, jsx_runtime_1.jsxs)("button", { className: "quill-tab", onClick: () => onChange(true), style: {
+        }, children: [_jsxs("button", { className: "quill-tab", onClick: () => onChange(true), style: {
                     border: value === true ? '1px solid #E7E7E7' : '1px solid transparent',
                     outline: 'none',
                     width: '100%',
@@ -620,7 +612,7 @@ function SegmentedControl({ onChange, value, theme }) {
                     fontWeight: value === true ? 600 : 500,
                     fontSize: 14,
                     fontFamily: theme?.fontFamily,
-                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                }, children: [_jsx("style", { children: `
     .quill-tab {
         background-color: ${value === true ? 'white' : 'transparent'};
     }
@@ -630,7 +622,7 @@ function SegmentedControl({ onChange, value, theme }) {
     .quill-tab:active {
       background-color: "rgba(56, 65, 81, 0.15)";
     }
-` }), 'All Organizations'] }), (0, jsx_runtime_1.jsxs)("button", { className: "quill-tab2", onClick: () => onChange(false), style: {
+` }), 'All Organizations'] }), _jsxs("button", { className: "quill-tab2", onClick: () => onChange(false), style: {
                     border: value === false ? '1px solid #E7E7E7' : '1px solid transparent',
                     boxShadow: value === false
                         ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
@@ -643,7 +635,7 @@ function SegmentedControl({ onChange, value, theme }) {
                     fontWeight: value === false ? 600 : 500,
                     fontSize: 14,
                     fontFamily: theme?.fontFamily,
-                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                }, children: [_jsx("style", { children: `
     .quill-tab2 {
         background-color: ${value === false ? 'white' : 'transparent'};
     }

package/dist/ChartEditor.js

@@ -1,25 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-nocheck
-const react_1 = require("react");
-const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
-const Context_1 = require("./Context");
-const dataFetcher_1 = require("./utils/dataFetcher");
-function ChartEditor({ isOpen, chartId, admin = false, destinationDashboard, chartBuilderTitle = 'Edit chart', chartBuilderButtonLabel, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }) {
-    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [dashboardItem, setDashboardItem] = (0, react_1.useState)(dashboard?.[chartId]);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+import { useContext, useEffect, useState } from 'react';
+import ChartBuilder from './ChartBuilder';
+import { DashboardContext, DashboardFiltersContext, ClientContext, } from './Context';
+import { getData } from './utils/dataFetcher';
+export default function ChartEditor({ isOpen, chartId, admin = false, destinationDashboard, chartBuilderTitle = 'Edit chart', chartBuilderButtonLabel, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }) {
+    const { dispatch, dashboard } = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [client, _] = useContext(ClientContext);
+    const [dashboardItem, setDashboardItem] = useState(dashboard?.[chartId]);
+    const [isLoading, setIsLoading] = useState(false);
     const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
     const dateRange = dateFilter?.startDate
         ? [dateFilter?.startDate, dateFilter?.endDate, null]
         : [null, null, null];
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let isSubscribed = true;
         async function getChartOptions() {
             if (isSubscribed && !isLoading) {
@@ -45,7 +40,7 @@ function ChartEditor({ isOpen, chartId, admin = false, destinationDashboard, cha
                         id: chartId,
                         filters: [],
                     };
-                    const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+                    const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
                     if (resp) {
                         setDashboardItem(resp);
                         dispatch({
@@ -71,6 +66,5 @@ function ChartEditor({ isOpen, chartId, admin = false, destinationDashboard, cha
             isSubscribed = false;
         };
     }, [client, chartId]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: dashboardItem && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { dashboardItem: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, fields: dashboardItem.fields, query: dashboardItem.queryString, isOpen: isOpen, setIsOpen: setIsOpen, showTableFormatOptions: admin, showDateFieldOptions: admin, showAccessControlOptions: admin, showDashboardDropdown: admin, destinationDashboard: destinationDashboard, dateRange: dateRange, Select: Select, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, Header: Header, Label: Label, Text: Text, DeleteButton: DeleteButton, Modal: Modal, Popover: Popover, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel })) }));
+    return (_jsx("div", { children: dashboardItem && (_jsx(ChartBuilder, { dashboardItem: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, fields: dashboardItem.fields, query: dashboardItem.queryString, isOpen: isOpen, setIsOpen: setIsOpen, showTableFormatOptions: admin, showDateFieldOptions: admin, showAccessControlOptions: admin, showDashboardDropdown: admin, destinationDashboard: destinationDashboard, dateRange: dateRange, Select: Select, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, Header: Header, Label: Label, Text: Text, DeleteButton: DeleteButton, Modal: Modal, Popover: Popover, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel })) }));
 }
-exports.default = ChartEditor;