@quillsql/react 2.8.7 → 2.8.9

package/dist/BarList.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/display-name */
 // @ts-nocheck
 import React from 'react';
-import { valueFormatter } from './Chart';
+import { valueFormatter } from './utils/valueFormatter';
 const getWidthsFromValues = (dataValues) => {
     let maxValue = -Infinity;
     dataValues.forEach(value => {

package/dist/Chart.d.ts

@@ -1,11 +1,6 @@
 import React from 'react';
 declare const colorValues: readonly ["slate", "silver", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
 export type Color = (typeof colorValues)[number];
-export declare const valueFormatter: ({ value, field, fields }: {
-    value: any;
-    field: any;
-    fields: any;
-}) => any;
 export declare const ChartTooltipFrame: ({ children, theme, }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../src/Chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA4CxE,QAAA,MAAM,WAAW,kNAuBP,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AA2GjD,eAAO,MAAM,cAAc;;;;SAgK1B,CAAC;AAYF,eAAO,MAAM,iBAAiB;cAIlB,MAAM,SAAS;6CAgB1B,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,GAAG,CAAC;CACX;AAED,eAAO,MAAM,eAAe,mCAKzB,oBAAoB,4CA0FtB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;CACZ;AA+SD,QAAA,MAAM,KAAK;aAUA,MAAM;aACN,GAAG;;;;;6CAyDb,CAAC;AA0uCF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../src/Chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA8CxE,QAAA,MAAM,WAAW,kNAuBP,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAqHjD,eAAO,MAAM,iBAAiB;cAIlB,MAAM,SAAS;6CAgB1B,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,GAAG,CAAC;CACX;AAED,eAAO,MAAM,eAAe,mCAKzB,oBAAoB,4CA0FtB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;CACZ;AA+SD,QAAA,MAAM,KAAK;aAUA,MAAM;aACN,GAAG;;;;;6CAyDb,CAAC;AA2uCF,eAAe,KAAK,CAAC"}

package/dist/Chart.js

@@ -5,8 +5,7 @@ import { useState, useEffect, useContext, useMemo } from 'react';
 import { aggregate } from './utils/aggregate';
 import { getPostgresBasicType } from './ReportBuilder';
 import { Area, CartesianGrid, ComposedChart as ReChartsAreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, } from 'recharts';
-import { differenceInHours, endOfWeek, format, isValid, startOfWeek, } from 'date-fns';
-import { utcToZonedTime } from 'date-fns-tz';
+import { differenceInHours, format, } from 'date-fns';
 import BarList from './BarList';
 import PieChart, { findComplementaryAndAnalogousColors } from './PieChart';
 import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, } from './Context';
@@ -14,6 +13,8 @@ import { SpecialTable } from './Table';
 import { getData } from './utils/dataFetcher';
 import { generatePivotTable, generatePivotTableYAxis, } from './internals/ReportBuilder/PivotModal';
 import { COLOR_TO_HEX } from './utils/colorToHex';
+import { valueFormatter } from './utils/valueFormatter';
+import { axisFormatter } from './utils/axisFormatter';
 const colorValues = [
     'slate',
     'silver',
@@ -130,156 +131,6 @@ function toGrayscale(rgba) {
 //     'The Pragmatic Engineer': 1726,
 //   },
 // ];
-export const valueFormatter = ({ value, field, fields }) => {
-    if (value === undefined ||
-        value === null ||
-        field === undefined ||
-        field === null) {
-        return '';
-    }
-    const fieldInfo = fields.find(f => f.field === field);
-    if (!fieldInfo) {
-        return '';
-    }
-    const formatType = fieldInfo.format;
-    const numValue = Number(value);
-    const absNumber = isNaN(numValue) ? 0 : Math.abs(numValue);
-    if (formatType === 'percent') {
-        if (absNumber < 1) {
-            return (absNumber * 100).toFixed(0) + '%';
-        }
-        else {
-            return absNumber.toFixed(0) + '%';
-        }
-    }
-    if (formatType === 'dollar_amount') {
-        const formatter = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 0,
-        });
-        if (absNumber >= 1000000) {
-            return formatter.format(numValue / 1000000) + 'M';
-        }
-        else if (absNumber >= 1000) {
-            return formatter.format(numValue / 1000) + 'K';
-        }
-        else {
-            return formatter.format(numValue);
-        }
-    }
-    if (formatType === 'dollar_cents') {
-        const formatter = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        });
-        if (absNumber >= 1000000) {
-            return formatter.format(numValue / 1000000) + 'M';
-        }
-        else if (absNumber >= 1000) {
-            return formatter.format(numValue / 1000) + 'K';
-        }
-        else {
-            return formatter.format(numValue);
-        }
-    }
-    if (formatType === 'whole_number') {
-        if (absNumber >= 1000000) {
-            return (numValue / 1e6).toFixed(1) + 'M';
-        }
-        else if (absNumber >= 1000) {
-            return (numValue / 1000).toFixed(1) + 'K';
-        }
-        else {
-            return Math.round(numValue).toString();
-        }
-    }
-    if (formatType === 'one_decimal_place') {
-        return numValue.toFixed(1);
-    }
-    if (formatType === 'two_decimal_places') {
-        return numValue.toFixed(2);
-    }
-    if (formatType === 'MMM_yyyy' ||
-        formatType === 'MMM_dd_yyyy' ||
-        formatType === 'MMM_dd_yyyy' ||
-        formatType === 'hh_ap_pm' ||
-        formatType === 'MMM_dd-MMM_dd' ||
-        formatType === 'MMM_dd_hh:mm_ap_pm' ||
-        formatType === 'yyyy' ||
-        formatType === 'wo, yyyy') {
-        const dateValue = new Date(value);
-        const utcDate = utcToZonedTime(dateValue, 'UTC');
-        if (!isValid(utcDate)) {
-            return 'Invalid date';
-        }
-        if (formatType === 'yyyy') {
-            return format(utcDate, 'yyyy');
-        }
-        if (formatType === 'MMM_yyyy') {
-            return format(utcDate, 'MMM yyyy');
-        }
-        if (formatType === 'MMM_dd_yyyy') {
-            return format(utcDate, 'dd MMM yyyy');
-        }
-        if (formatType === 'hh_ap_pm') {
-            return format(utcDate, 'hh:mm aa');
-        }
-        if (formatType === 'MMM_dd-MMM_dd') {
-            const start = startOfWeek(utcDate, { weekStartsOn: 1 }); // Monday
-            const end = endOfWeek(utcDate, { weekStartsOn: 1 }); // Sunday
-            let formattedDate = '';
-            // Check if start and end are in the same month
-            if (format(start, 'MMM') === format(end, 'MMM')) {
-                formattedDate = `${format(start, 'MMM dd')} - ${format(end, 'dd')}`;
-            }
-            else {
-                formattedDate = `${format(start, 'MMM dd')} - ${format(end, 'MMM dd')}`;
-            }
-            return formattedDate;
-        }
-        if (formatType === 'MMM_dd_yyyy') {
-            const year = utcDate.getFullYear();
-            const monthNames = [
-                'Jan',
-                'Feb',
-                'Mar',
-                'Apr',
-                'May',
-                'Jun',
-                'Jul',
-                'Aug',
-                'Sep',
-                'Oct',
-                'Nov',
-                'Dec',
-            ];
-            const month = monthNames[utcDate.getMonth()];
-            const day = utcDate.getDate();
-            return `${month} ${day}, ${year}`;
-        }
-        if (formatType === 'MMM_dd_hh:mm_ap_pm') {
-            const formatStr = utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
-            let formattedTime = format(utcDate, formatStr);
-            formattedTime =
-                formattedTime.slice(0, -2) + formattedTime.slice(-2).toLowerCase();
-            return formattedTime;
-        }
-        if (formatType === 'wo, yyyy') {
-            // Using the `getWeek` function to get the week number
-            const weekNumber = getWeek(utcDate);
-            const year = utcDate.getFullYear();
-            return `${weekNumber},${year}`;
-        }
-    }
-    if (formatType === 'string') {
-        return value.toString();
-    }
-    return value.toString();
-};
 const yAxisFields = [
     { field: 'avg_days', label: 'average days' },
     { field: 'median_days', label: 'median days' },
@@ -616,7 +467,7 @@ query, SelectComponent, DatePickerComponent, }) => {
             !dashboard[chartId].buckets.length) {
             return;
         }
-        const dateFilter = Object.values(dashboardFilters).find(filter => filter.filterType == 'date_range');
+        const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
         if (dateFilter && dashboard[chartId].rows.length) {
             const aggregatedObj = aggregate(dashboard[chartId], dashboard[chartId].buckets, dateFilter);
             setBucketData({
@@ -627,8 +478,8 @@ query, SelectComponent, DatePickerComponent, }) => {
                 rows: aggregatedObj.bucketedRows,
             });
         }
-        const stringFilters = dashboard[chartId].buckets.filter(bucket => {
-            return (getPostgresBasicType(dashboard[chartId].fields.find(field => field.name === bucket.field)) === 'string');
+        const stringFilters = dashboard[chartId].buckets.filter((bucket) => {
+            return (getPostgresBasicType(dashboard[chartId].fields.find((field) => field.name === bucket.field)) === 'string');
         });
         if (stringFilters.length && dashboard[chartId].rows.length) {
             const aggregatedObj = aggregate(dashboard[chartId], dashboard[chartId].buckets, null);
@@ -665,7 +516,7 @@ query, SelectComponent, DatePickerComponent, }) => {
     //     return;
     //   }
     // };
-    const dateFilter = Object.values(dashboardFilters).find(filter => filter.filterType == 'date_range');
+    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
     const pivotTable = useMemo(() => {
         const pivot = dashboard[chartId]?.pivot || config?.pivot;
         const data = dashboard[chartId] ? dashboard[chartId] : config;
@@ -725,7 +576,7 @@ query, SelectComponent, DatePickerComponent, }) => {
             // @ts-ignore
             , { 
                 // @ts-ignore
-                containerStyle: containerStyle, data: rows.map(row => {
+                containerStyle: containerStyle, data: rows.map((row) => {
                     return {
                         ...row,
                         count: parseInt(row[yAxisFields[0].field]) /
@@ -895,10 +746,10 @@ function formatNumber(num, label) {
 //   return [adjustedMin, adjustedMax];
 // }
 function getDomain(data, fields) {
-    const fieldsArray = fields.map(elem => elem.field);
+    const fieldsArray = fields.map((elem) => elem.field);
     const numericValues = [];
-    data.forEach(item => {
-        fieldsArray.forEach(field => {
+    data.forEach((item) => {
+        fieldsArray.forEach((field) => {
             let value = item[field];
             // Try to cast the value to a number
             const numericValue = parseFloat(value);
@@ -954,7 +805,7 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                         tick: { transform: 'translate(-3, 0)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
-                        }, tickFormatter: tick => valueFormatter({
+                        }, tickFormatter: (tick) => axisFormatter({
                             value: tick,
                             field: yAxisFields[0].field || 'what',
                             fields: yAxisFields,
@@ -967,7 +818,7 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                             // TODO: generalize
                             fontFamily: theme.chartLabelFontFamily,
                             marginTop: '20px',
-                        }, tickLine: false, axisLine: false, tickFormatter: tick => valueFormatter({
+                        }, tickLine: false, axisLine: false, tickFormatter: (tick) => axisFormatter({
                             value: tick,
                             field: xAxisField,
                             fields: [{ field: xAxisField, format: xAxisFormat }],
@@ -978,11 +829,11 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                                 payload[0].payload[xAxisField + '2']) {
                                 label2 = payload[0].payload[xAxisField + '2'];
                             }
-                            return (_jsx(ChartTooltip, { theme: theme, active: active, payload: payload, label: label, label2: label2, dateFormatter: value => valueFormatter({
+                            return (_jsx(ChartTooltip, { theme: theme, active: active, payload: payload, label: label, label2: label2, dateFormatter: (value) => valueFormatter({
                                     value,
                                     field: xAxisField,
                                     fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: value => valueFormatter({
+                                }), valueFormatter: (value) => valueFormatter({
                                     value,
                                     field: payload[0].dataKey,
                                     fields: yAxisFields,
@@ -1037,7 +888,7 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                         // interval="preserveStartEnd"
                         interval: "preserveStartEnd", 
                         // interval={0}
-                        tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: tick => valueFormatter({
+                        tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: (tick) => axisFormatter({
                             value: tick,
                             field: xAxisField,
                             fields: [{ field: xAxisField, format: xAxisFormat }],
@@ -1058,7 +909,7 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                                 theme?.fontFamily ||
                                 'Inter; Helvetica',
                             color: theme?.chartLabelColor || '#666666',
-                        }, tickFormatter: value => valueFormatter({
+                        }, tickFormatter: (value) => axisFormatter({
                             value,
                             field: yAxisFields[0].field,
                             fields: [
@@ -1072,11 +923,11 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                                 payload[0].payload[xAxisField + '2']) {
                                 label2 = payload[0].payload[xAxisField + '2'];
                             }
-                            return (_jsx(ChartTooltip, { active: active, payload: payload, label: label, label2: label2, dateFormatter: value => valueFormatter({
+                            return (_jsx(ChartTooltip, { active: active, payload: payload, label: label, label2: label2, dateFormatter: (value) => valueFormatter({
                                     value,
                                     field: xAxisField,
                                     fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: value => valueFormatter({
+                                }), valueFormatter: (value) => valueFormatter({
                                     value,
                                     field: payload[0].dataKey,
                                     fields: [

package/dist/ChartBuilder.d.ts

@@ -19,6 +19,7 @@ interface ChartBuilderProps {
     rows: object[];
     columns: object[];
     query?: string;
+    isEditMode?: boolean;
     formHeaderStyle?: React.CSSProperties;
     formLabelStyle?: React.CSSProperties;
     showTableFormatOptions?: boolean;

package/dist/ChartBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../src/ChartBuilder.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,OAAO,EACL,KAAK,EAIN,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EAUjB,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;AAcnC,wBAAgB,oBAAoB,CAAC,GAAG,KAAA,OAavC;AA0DD,eAAO,MAAM,mBAAmB,UAM/B,CAAC;AAoBF,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,KAAK,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4B5D"}
+{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../src/ChartBuilder.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,OAAO,EACL,KAAK,EAIN,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EAUjB,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;AAenC,wBAAgB,oBAAoB,CAAC,GAAG,KAAA,OAavC;AA0DD,eAAO,MAAM,mBAAmB,UAM/B,CAAC;AAoBF,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,KAAK,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4B5D"}

package/dist/ChartBuilder.js

@@ -8,6 +8,7 @@ import { PivotModal, generatePivotTable, isDateField, } from './internals/Report
 import { PivotCard } from './internals/ReportBuilder/PivotList';
 import Chart from './Chart';
 import { MemoizedModal, MemoizedTextInput, MemoizedSelect, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
+import Banner from './components/Banner';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 export function snakeCaseToTitleCase(str) {
     if (!str) {
@@ -94,7 +95,7 @@ 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 }) })) }));
 }
-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, }) {
+function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSelect, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Modal = MemoizedModal, Popover = MemoizedPopover, isOpen, isEditMode, 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] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -388,7 +389,6 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
     };
     const handleSubmit = (e) => {
         e.preventDefault();
-        console.log(formData);
     };
     const deleteChart = async () => {
         if (!dashboardItem._id || !client) {
@@ -414,13 +414,11 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
         setIsSubmitting(false);
     };
     const editChart = async ({}) => {
-        console.log(isSubmitting);
         if (isSubmitting) {
             return;
         }
         setIsSubmitting(true);
         const { publicKey, customerId } = client;
-        console.log(client);
         if (!client) {
             return;
         }
@@ -436,6 +434,9 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
             query: queryNoDateColumn || query,
             pivot: formData.pivot,
         };
+        if (cloudBody['rows']) {
+            delete cloudBody['rows'];
+        }
         // add orgId: customerId if present for hostedBody
         // set defaultDateField if date field not present
         const hostedBody = {
@@ -453,7 +454,6 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
             }
             : { clientId: publicKey }).toString();
         const resp = await getData(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
-        console.log(`RESP: ${resp}`);
         if (resp) {
             dispatch({
                 type: 'UPDATE_DASHBOARD_ITEM',
@@ -474,7 +474,19 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
     if (!schema) {
         return;
     }
-    return (_jsxs("div", { id: "quill-chart-modal", style: { padding: modalPadding }, children: [_jsx("div", { children: _jsx(Chart, { config: { ...formData, rows }, colors: theme.chartColors, containerStyle: {
+    return (_jsxs("div", { id: "quill-chart-modal", style: { padding: modalPadding }, children: [isEditMode && (_jsxs(_Fragment, { children: [_jsx(Banner, { dashboardItemName: dashboardItem.name, dashboardName: dashboardItem.dashboardName, style: {
+                            position: 'fixed',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            margin: 0,
+                        }, onExit: () => {
+                            const msg = 'Are you sure you want to exit edit mode? Your changes will not be saved.';
+                            if (!confirm(msg))
+                                return;
+                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                        } }), _jsxs("style", { children: [" ", `#quill-modal-header { padding-top: 41px; }`, " "] })] })), _jsx("div", { children: _jsx(Chart, { config: { ...formData, rows }, colors: theme.chartColors, containerStyle: {
                         width: formData.chartType === 'table' ? 640 : 'calc(100% - 24px)',
                         height: 300,
                     } }) }), _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) => ({

package/dist/ChartEditor.d.ts

@@ -4,6 +4,7 @@ interface ChartEditorProps {
     isOpen: boolean;
     chartId: string;
     admin?: boolean;
+    isEditMode?: boolean;
     chartBuilderTitle?: string;
     chartBuilderButtonLabel?: string;
     onDelete?: () => void;
@@ -20,6 +21,6 @@ interface ChartEditorProps {
     Popover?: (props: PopoverComponentProps) => JSX.Element;
     destinationDashboard?: string;
 }
-export default function ChartEditor({ isOpen, chartId, admin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartEditor({ isOpen, chartId, isEditMode, admin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ChartEditor.d.ts.map

package/dist/ChartEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../src/ChartEditor.tsx"],"names":[],"mappings":";AASA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,2BAA2B,CAAC;AAGnC,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,OAAO,EACP,KAAa,EACb,oBAAoB,EACpB,iBAAgC,EAChC,uBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,MAAM,EACN,eAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,2CA4GlB"}
+{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../src/ChartEditor.tsx"],"names":[],"mappings":";AASA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,2BAA2B,CAAC;AAGnC,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAa,EACb,oBAAoB,EACpB,iBAAgC,EAChC,uBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,MAAM,EACN,eAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,2CA6GlB"}

package/dist/ChartEditor.js

@@ -4,7 +4,7 @@ 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, }) {
+export default function ChartEditor({ isOpen, chartId, isEditMode, 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);
@@ -66,5 +66,5 @@ export default function ChartEditor({ isOpen, chartId, admin = false, destinatio
             isSubscribed = false;
         };
     }, [client, chartId]);
-    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 })) }));
+    return (_jsx("div", { children: dashboardItem && (_jsx(ChartBuilder, { dashboardItem: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, fields: dashboardItem.fields, query: dashboardItem.queryString, isOpen: isOpen, isEditMode: isEditMode, 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 })) }));
 }

package/dist/Dashboard.d.ts.map

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

package/dist/Dashboard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useContext, useEffect, useState, useRef, useCallback, } from 'react';
@@ -519,7 +519,7 @@ const areEqual = (prevProps, nextProps) => {
 };
 const MemoizedDateRangePicker = React.memo(QuillDateRangePicker, areEqual);
 export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, FilterDropdownComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent, }) {
-    const { isLoading: isDataLoading, data, error, reload } = useDashboard(name);
+    const { isLoading: isDataLoading, data, reload } = useDashboard(name);
     const [dashboardSections, setDashboardSections] = useState(null);
     const { dashboard } = useContext(DashboardContext);
     const [client] = useContext(ClientContext);
@@ -745,9 +745,8 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
             onChangeLoading(isLoading);
         }
     }, [isLoading, onChangeLoading]);
-    if (!dashboardSections) {
+    if (!dashboardSections)
         return null;
-    }
     return (_jsxs("div", { style: containerStyle, children: [!hideFilters ? (_jsx("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
@@ -1032,7 +1031,9 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
                                                             ? theme.chartColors
                                                             : undefined }) }) }) }, elem.name + '' + index));
                                     }
-                                    return (_jsxs(_Fragment, { children: [_jsx("div", { onClick: onClickDashboardItem
+                                    return (_jsxs("div", { onClick: onClickDashboardItem
+                                            ? () => handleOnClickDashboardItem(elem)
+                                            : undefined, children: [_jsx("div", { onClick: onClickDashboardItem
                                                     ? () => handleOnClickDashboardItem(elem)
                                                     : undefined, style: {
                                                     // background: theme.elevatedCardColor,
@@ -1118,7 +1119,7 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
                                                                                 // paddingLeft: 25,
                                                                             }, isDateFilter: true, 
                                                                             //   chartFilters={elem.chartFilters}
-                                                                            chartId: elem._id })] })] }) }) }) }, elem.name + '' + index), _jsx("div", { style: { height: 40 } })] }));
+                                                                            chartId: elem._id })] })] }) }) }) }, elem.name + '' + index), _jsx("div", { style: { height: 40 } })] }, elem.name + '' + index));
                                 })] })) : null, _jsx("div", { style: { height: 40 } })] }, section + '' + sectionIndex));
             })] }));
 }