@quillsql/react 2.6.1 → 2.6.3

package/lib/ChartBuilder.js

@@ -0,0 +1,612 @@
+"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");
+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 dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
+const PivotList_1 = require("./internals/ReportBuilder/PivotList");
+const Chart_1 = __importDefault(require("./Chart"));
+const UiComponents_1 = require("./components/UiComponents");
+const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
+function snakeCaseToTitleCase(str) {
+    if (!str) {
+        return str;
+    }
+    return str
+        .toString()
+        .split(/_| /)
+        .map(word => word === 'id'
+        ? 'ID'
+        : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+}
+exports.snakeCaseToTitleCase = snakeCaseToTitleCase;
+const POSTGRES_DATE_TYPES = [
+    'timestamp',
+    'date',
+    'timestamptz',
+    'time',
+    'timetz',
+];
+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 });
+    let ast = resp.ast;
+    ast = ast.length ? ast[0] : ast;
+    if (ast.with && ast.with.length) {
+        for (let i = 0; i < ast.with.length; i++) {
+            withAliases.push(ast.with[i].name.value);
+            for (let j = 0; j < ast.with[i].stmt.from.length; j++)
+                tables.push(ast.with[i].stmt.from[j].table);
+        }
+    }
+    const tablesInQuery = [...tables, ...ast.from.map(elem => elem.table)].filter(elem => !withAliases.includes(elem));
+    return dbTables
+        .filter(table => tablesInQuery.includes(table.displayName))
+        .map(table => {
+        return {
+            name: table.displayName,
+            columns: table.columns.filter(column => POSTGRES_DATE_TYPES.includes(column.fieldType)),
+        };
+    })
+        .filter(table => table.columns.length > 0);
+}
+const AGGREGATION_TYPES = [
+    { label: 'sum', value: 'sum' },
+    { label: 'count', value: 'count' },
+    { label: 'average', value: 'avg' },
+];
+exports.numberFormatOptions = [
+    'whole_number',
+    'one_decimal_place',
+    'two_decimal_places',
+    'dollar_amount',
+    'dollar_cents',
+];
+const NUMBER_FORMAT_OPTIONS = [
+    { value: 'whole_number', label: 'whole number' },
+    { value: 'one_decimal_place', label: 'one decimal place' },
+    { value: 'two_decimal_places', label: 'two decimal places' },
+    { value: 'dollar_amount', label: 'dollar amount' },
+    { value: 'dollar_cents', label: 'dollar and cent amount' },
+];
+const formatOptions = [
+    ...NUMBER_FORMAT_OPTIONS,
+    { value: 'MMM_yyyy', label: 'month' },
+    { value: 'MMM_dd-MMM_dd', label: 'week' },
+    { value: 'MMM_dd_yyyy', label: 'day' },
+    { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
+    { value: 'hh_ap_pm', label: 'hour' },
+    { 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: '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: 'Add to dashboard', theme: theme, children: (0, jsx_runtime_1.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, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, onAddToDashboardComplete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], }) {
+    const dateRange = dr || (0, dateRangePickerUtils_1.getRangeFromPreset)('90d');
+    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 fields = fieldsProp?.map(field => ({
+        field: field.name,
+        type: (0, ReportBuilder_1.getPostgresBasicType)(field),
+        format: field.format,
+        label: field.name,
+    })) || [];
+    const parentRef = (0, react_1.useRef)();
+    const deleteRef = (0, react_1.useRef)();
+    const modalPadding = 20;
+    const deleteButtonMargin = -13;
+    (0, react_1.useEffect)(() => {
+        const calculateWidth = () => {
+            return (parentRef.current.offsetWidth -
+                (deleteRef?.current
+                    ? deleteRef?.current.offsetWidth - deleteButtonMargin
+                    : 0));
+        };
+        // Measure the width of the div and update state
+        if (parentRef.current) {
+            setDivWidth(calculateWidth());
+        }
+        // Optional: Handle window resize
+        const handleResize = () => {
+            if (parentRef.current) {
+                setDivWidth(calculateWidth());
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        // Cleanup listener
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    // get schema
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getSchema() {
+            if (!schema || !schema.length) {
+                const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
+                if (isSubscribed) {
+                    setSchema(resp.tables);
+                }
+            }
+        }
+        if (isSubscribed) {
+            getSchema();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [schema]);
+    // get dashboards
+    const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
+    const [defaultDashboardName, setDefaultDashboardName] = (0, react_1.useState)(dashboardItem?.dashboardName || dashboardOptions[0]?.label);
+    (0, react_1.useEffect)(() => {
+        if (!dashboardItem && dashboardOptions && dashboardOptions.length) {
+            setDefaultDashboardName(dashboardOptions[0]?.label);
+        }
+    }, [dashboardOptions]);
+    (0, react_1.useEffect)(() => {
+        async function getDashNames() {
+            const resp = await (0, dataFetcher_1.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 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);
+    // 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 fetchReferencedTables = async () => {
+            if (!query) {
+                return;
+            }
+            const result = await getReferencedTables(client, query, schema);
+            setDateFieldOptions(result);
+            setTableName(result[0]?.name);
+            if (!formData.dateField.table) {
+                setFormData({
+                    ...formData,
+                    dateField: {
+                        table: result[0]?.name,
+                        field: result[0]?.columns[0]?.name,
+                    },
+                });
+            }
+        };
+        fetchReferencedTables();
+    }, [query, schema]);
+    const defaultDateField = {
+        table: dateFieldOptions[0]?.name,
+        field: dateFieldOptions[0]?.columns[0]?.name,
+    };
+    const firstNumberColumn = columns?.find(col => exports.numberFormatOptions.includes(col.format));
+    const formEmptyState = {
+        name: '',
+        dashboardName: dashboardOptions?.[0]?.label,
+        columns: columns.map(col => {
+            return { ...col, label: snakeCaseToTitleCase(col.label) };
+        }),
+        xAxisField: columns?.[0]?.field || '',
+        xAxisFormat: columns?.[0]?.format || '',
+        yAxisFields: [
+            {
+                field: firstNumberColumn?.field || columns?.[0]?.field || '',
+                label: '',
+                format: firstNumberColumn?.format || columns?.[0]?.field || '',
+            },
+        ],
+        xAxisLabel: '',
+        chartType: firstNumberColumn ? 'line' : 'table',
+        pivot: null,
+        dateField: defaultDateField,
+        template: false,
+    };
+    const pivotFormData = pivot => {
+        const yAxisField = pivot.columnField || pivot.valueField;
+        // 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)
+            : false;
+        return {
+            pivot,
+            chartType: 'column',
+            xAxisField: pivot.rowField,
+            xAxisFormat: (0, PivotModal_1.isDateField)(pivot.rowFieldType)
+                ? 'string'
+                : columns.find(col => col.field === pivot.rowField)?.format ||
+                    'whole_number',
+            xAxisLabel: '',
+            yAxisFields: [
+                {
+                    field: yAxisField,
+                    label: '',
+                    format: yAxisIsDate
+                        ? 'string'
+                        : columns.find(col => col.field === yAxisField)?.format ||
+                            'whole_number',
+                },
+            ],
+        };
+    };
+    const [formData, setFormData] = (0, react_1.useState)(pivot
+        ? { ...formEmptyState, ...pivotFormData(pivot) }
+        : dashboardItem || formEmptyState);
+    const selectedPivotTable = (0, react_1.useMemo)(() => {
+        if (formData.pivot && rows) {
+            return (0, PivotModal_1.generatePivotTable)(formData.pivot, rows, dateRange);
+        }
+        else {
+            return {};
+        }
+    }, [formData.pivot, rows]);
+    const handleChange = (value, fieldName, index) => {
+        if (index !== undefined) {
+            // For dynamic array fields
+            const [field, subfield] = fieldName.split('.');
+            const updatedArray = formData[field].map((item, i) => i === index ? { ...item, [subfield]: value } : item);
+            setFormData({ ...formData, [field]: updatedArray });
+        }
+        else if (fieldName.includes('.')) {
+            // For nested fields
+            const [field, subfield] = fieldName.split('.');
+            if (field === 'pivot' && subfield !== '') {
+                const subfieldTypeFieldName = subfield + 'Type';
+                if (value.length) {
+                    const subfieldType = fields.find(field => field.field === value).type;
+                    setFormData({
+                        ...formData,
+                        [field]: {
+                            ...formData[field],
+                            [subfield]: value,
+                            [subfieldTypeFieldName]: subfieldType,
+                        },
+                    });
+                    return;
+                }
+                else {
+                    setFormData({
+                        ...formData,
+                        [field]: {
+                            ...formData[field],
+                            [subfield]: '',
+                            [subfieldTypeFieldName]: '',
+                        },
+                    });
+                    return;
+                }
+            }
+            if (field === 'dateField' &&
+                subfield === 'table' &&
+                !formData.dateField.field) {
+                const field = schema?.find(elem => elem.name === value)?.columns?.[0]
+                    ?.name;
+                setFormData({
+                    ...formData,
+                    dateField: { ...formData[field], [subfield]: value, field: field },
+                });
+                return;
+            }
+            setFormData({
+                ...formData,
+                [field]: { ...formData[field], [subfield]: value },
+            });
+        }
+        else {
+            // For simple fields
+            setFormData({ ...formData, [fieldName]: value });
+        }
+    };
+    const handleAddPivot = (pivot, index) => {
+        setFormData(formData => ({
+            ...formData,
+            ...pivotFormData(pivot),
+        }));
+    };
+    const handleDeletePivot = () => {
+        if (!formData.pivot) {
+            return;
+        }
+        setFormData({ ...formEmptyState, pivot: null });
+    };
+    const handleAddField = fieldName => {
+        if (fieldName === 'columns') {
+            setFormData({
+                ...formData,
+                columns: [...formData.columns, { label: '', field: '', format: '' }],
+            });
+        }
+        else if (fieldName === 'yAxisFields') {
+            setFormData({
+                ...formData,
+                yAxisFields: [
+                    ...formData.yAxisFields,
+                    { label: '', field: '', chartType: '', format: '' },
+                ],
+            });
+        }
+        else if (fieldName === 'pivot') {
+            setFormData({
+                ...formData,
+                pivot: {
+                    rowField: '',
+                    rowFieldType: '',
+                    columnField: '',
+                    columnFieldType: '',
+                    valueField: '',
+                    aggregationType: '',
+                },
+            });
+        }
+    };
+    const handleRemoveField = (fieldName, index) => {
+        if (fieldName === 'pivot') {
+            setFormData({
+                ...formData,
+                pivot: null,
+            });
+            return;
+        }
+        const updatedArray = formData[fieldName].filter((_, i) => i !== index);
+        setFormData({ ...formData, [fieldName]: updatedArray });
+    };
+    const handleSubmit = e => {
+        e.preventDefault();
+        console.log(formData);
+    };
+    const editChart = async ({}) => {
+        if (isSubmitting) {
+            return;
+        }
+        setIsSubmitting(true);
+        const { publicKey, customerId } = client;
+        if (!client) {
+            return;
+        }
+        const cloudBody = {
+            ...formData,
+            ...(formData.dateField?.table
+                ? {}
+                : { dateField: { ...defaultDateField } }),
+            ...(formData.dashboardName
+                ? {}
+                : { dashboardName: defaultDashboardName }),
+            ...(dashboardItem ? { dashboardItemId: dashboardItem._id } : {}),
+            query,
+            pivot: formData.pivot,
+        };
+        // add orgId: customerId if present for hostedBody
+        // set defaultDateField if date field not present
+        const hostedBody = {
+            metadata: {
+                ...cloudBody,
+                ...(customerId ? { orgId: customerId } : {}),
+            },
+        };
+        const searchParams = new URLSearchParams(customerId
+            ? {
+                clientId: publicKey,
+                customerId: customerId,
+            }
+            : { clientId: publicKey }).toString();
+        const resp = await (0, dataFetcher_1.getData)(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
+        if (resp) {
+            dispatch({
+                type: 'UPDATE_DASHBOARD_ITEM',
+                id: resp._id,
+                data: {
+                    ...resp,
+                    rows,
+                    fields,
+                },
+            });
+        }
+        setIsOpen(false);
+        setIsSubmitting(false);
+        if (onAddToDashboardComplete) {
+            onAddToDashboardComplete();
+        }
+    };
+    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: {
+                        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" })] }), (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 => ({
+                                            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'), 
+                                        // filter out metric for all pivots
+                                        // filter out bar and pie for row and column pivot
+                                        options: CHART_TYPES.filter(elem => !firstNumberColumn
+                                            ? elem === 'table'
+                                            : !((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: {
+                            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: {
+                                            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: {
+                                            // 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: {
+                                                    pivot: formData.pivot,
+                                                    rows: selectedPivotTable?.rows,
+                                                    columns: selectedPivotTable?.columns,
+                                                }, theme: theme, index: 0, onSelectPivot: () => {
+                                                    setIsEdittingPivot(true);
+                                                    setShowPivotPopover(true);
+                                                    setPivotRowField(formData.pivot?.rowField);
+                                                    setPivotColumnField(formData.pivot?.columnField);
+                                                    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.chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.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 => ({
+                                            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: [
+                                                { label: 'Select', value: '' },
+                                                ...fieldOptions
+                                                    .filter(elem => {
+                                                    return (formData.chartType === 'table' ||
+                                                        formData.pivot ||
+                                                        exports.numberFormatOptions.includes(columns.find(col => col.field === elem.field)
+                                                            ?.format));
+                                                })
+                                                    .map(elem => ({
+                                                    label: formData.pivot
+                                                        ? `pivot columns (${elem.field})`
+                                                        : 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: {
+                                    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: [
+                                                { 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: {
+                            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: {
+                                    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: [
+                                                    {
+                                                        label: 'Select',
+                                                        value: '',
+                                                    },
+                                                    ...dateFieldOptions.map(elem => ({
+                                                        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: schema
+                                                    ?.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: {
+                            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 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                        }, children: (0, jsx_runtime_1.jsx)(Button, { onClick: editChart, label: dashboardItem ? 'Edit' : 'Add to dashboard' }) })] })] }));
+}
+function SegmentedControl({ onChange, value }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            background: '#F5F5F6',
+            maxWidth: 418,
+            padding: 4,
+            borderRadius: 6,
+        }, children: [(0, jsx_runtime_1.jsxs)("button", { className: "quill-tab", onClick: () => onChange(true), style: {
+                    border: value === true ? '1px solid #E7E7E7' : '1px solid transparent',
+                    outline: 'none',
+                    width: '100%',
+                    borderRadius: 4,
+                    padding: 10,
+                    boxShadow: value === true
+                        ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
+                        : undefined,
+                    color: value === true ? 'rgba(56, 65, 81, 1)' : 'rgba(56, 65, 81, 0.85)',
+                    fontWeight: value === true ? 600 : 500,
+                    fontSize: 14,
+                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    .quill-tab {
+        background-color: ${value === true ? 'white' : 'transparent'};
+    }
+    .quill-tab:hover {
+      background-color:  ${value === false ? 'rgba(56, 65, 81, 0.05)' : undefined};
+    }
+    .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: {
+                    border: value === false ? '1px solid #E7E7E7' : '1px solid transparent',
+                    boxShadow: value === false
+                        ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
+                        : undefined,
+                    outline: 'none',
+                    width: '100%',
+                    borderRadius: 4,
+                    color: value === false ? 'rgba(56, 65, 81, 1)' : 'rgba(56, 65, 81, 0.85)',
+                    padding: 10,
+                    fontWeight: value === false ? 600 : 500,
+                    fontSize: 14,
+                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    .quill-tab2 {
+        background-color: ${value === false ? 'white' : 'transparent'};
+    }
+    .quill-tab2:hover {
+      background-color:  ${value === true ? 'rgba(56, 65, 81, 0.05)' : undefined};
+    }
+    .quill-tab2:focused {
+      background-color: blue;
+    }
+    .quill-tab2:active {
+      background-color: "rgba(56, 65, 81, 0.15)";
+    }
+` }), 'This organization'] })] }));
+}
+//# sourceMappingURL=ChartBuilder.js.map