@quillsql/react 2.10.4 → 2.10.6

package/dist/esm/utils/dashboard.js

@@ -0,0 +1,146 @@
+import { useContext } from 'react';
+import { valueFormatter } from './valueFormatter';
+import { generatePivotTable, generatePivotTableYAxis, } from '../internals/ReportBuilder/PivotModal';
+import { DashboardFiltersContext } from '../Context';
+/**
+ * Returns a cleaned version of the dashboard item we store in state. We clean
+ * the dashboard item so that we aren't exposing unnecessary details to the
+ * client and also so that we can give the developer using our items a stable
+ * interface to build amazing dashboards on top of.
+ * @param item
+ */
+export function cleanDashboardItem(item) {
+    if (!item)
+        return undefined;
+    const pivotTable = getPivotTable(item);
+    const { primaryAggregation, comparisonAggregation, aggregationPercentChange, } = getAggragations(pivotTable, item);
+    return {
+        id: item._id,
+        name: item.name,
+        dashboardName: item.dashboardName,
+        rows: item.rows,
+        compareRows: item.compareRows,
+        columns: item.columns,
+        chartType: item.chartType,
+        dateField: item.dateField,
+        pivot: item.pivot,
+        primaryAggregation,
+        comparisonAggregation,
+        aggregationPercentChange,
+        yAxisFields: extractPivotedYAxis(pivotTable, item),
+        xAxisLabel: item.xAxisLabel,
+        xAxisField: item.xAxisField,
+        xAxisFormat: item.xAxisFormat,
+        order: item.order,
+        filtersApplied: item.filtersApplied,
+    };
+}
+/**
+ * Extracts the aggregations from the item, if any.
+ */
+function getAggragations(pivotTable, item) {
+    const yAxisFields = extractPivotedYAxis(pivotTable, item);
+    const rows = extractPivotedData(pivotTable, item);
+    // extract the aggragation for the primary range.
+    const mainKey = yAxisFields[0]?.field ?? item.pivot?.valueField;
+    const primary = mainKey
+        ? rows.reduce((sum, row) => sum + parseFloat(row[mainKey]), 0)
+        : 0;
+    // extract the aggragation for the comparison range, if applicable.
+    const compKey = yAxisFields[1]?.field ?? item.pivot?.valueField;
+    const comparison = compKey
+        ? rows.reduce((sum, row) => sum + parseFloat(row[compKey]), 0)
+        : 0;
+    return {
+        primaryAggregation: formatAggragation(item, primary),
+        comparisonAggregation: formatAggragation(item, comparison),
+        aggregationPercentChange: formatPercentageWithSign(comparison, primary),
+    };
+}
+/**
+ * Applies a valueFormatter to the given value based on the format in the item.
+ */
+function formatAggragation(item, value) {
+    if (!value)
+        return undefined;
+    return valueFormatter({
+        value,
+        field: item.pivot?.valueField,
+        fields: item.yAxisFields,
+    });
+}
+/**
+ * Formats the percentage change from a to b with the sign included.
+ */
+function formatPercentageWithSign(a, b) {
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'percent',
+        signDisplay: 'exceptZero',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+    return formatter.format(Number(b - a));
+}
+/**
+ * Extract and transform the data from itemInfo.
+ */
+function getPivotTable(itemInfo, config = undefined) {
+    if (!itemInfo)
+        return [];
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const dateFilter = Object.values(dashboardFilters ?? {}).find((filter) => filter.filterType == 'date_range');
+    const pivot = itemInfo?.pivot || config?.pivot;
+    const data = itemInfo ? itemInfo : config;
+    return pivot && data?.rows
+        ? generatePivotTable(pivot, JSON.parse(JSON.stringify(data.rows)), // deep copy
+        dateFilter?.startDate
+            ? [dateFilter?.startDate, dateFilter?.endDate, null]
+            : [null, null, null], Boolean(dateFilter?.comparisonRange?.startDate), -1, dateFilter?.comparisonRange?.startDate
+            ? [
+                dateFilter?.comparisonRange.startDate,
+                dateFilter?.comparisonRange.endDate,
+                null,
+            ]
+            : [null, null, null])
+        : null;
+}
+/**
+ * Returns the data list based on whether the table is pivoted and if there is
+ * a config value passed into this component.
+ */
+function extractPivotedData(pivotTable, item, config = undefined) {
+    if (pivotTable)
+        return pivotTable.rows;
+    if (config) {
+        if (config.bucketedRows.length > 0)
+            return config.bucketedRows;
+        return config.rows;
+    }
+    return item.rows;
+}
+/**
+ * Extracts the yAxis from the pivot table, if one exists.
+ */
+function extractPivotedYAxis(pivotTable, itemInfo, config = undefined) {
+    if (!pivotTable)
+        return [];
+    const pivot = itemInfo?.pivot || config?.pivot;
+    const yAxisFields = config ? config.yAxisFields : itemInfo?.yAxisFields;
+    const pivotTableYAxis = yAxisFields
+        ? generatePivotTableYAxis(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
+        : null;
+    const fields = pivotTableYAxis
+        ? pivotTableYAxis
+        : config
+            ? config.yAxisFields
+            : itemInfo.yAxisFields;
+    if (fields.length == 1) {
+        const sampleField = fields[0];
+        fields[fields.length] = {
+            ...sampleField,
+            field: `comparison_${sampleField.field}`,
+            label: `comparison ${sampleField.label}`,
+        };
+    }
+    return fields;
+}

package/dist/esm/utils/styles.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+export type StyleInput = string | CSSProperties | undefined;
+export type StyleProps = {
+    className: string;
+} | {
+    style: CSSProperties;
+} | {};
+/**
+ * Converts the given styles to a props object that can be passed directly into
+ * a jsx/tsx component. Converts to className if styles is a string, otherwise
+ * treats it as CSSProperties.
+ *
+ * Example:
+ * <div {...styleToProps(containerStyle)}>...</div>
+ */
+export declare function styleToProps(styles: StyleInput): StyleProps;
+//# sourceMappingURL=styles.d.ts.map

package/dist/esm/utils/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,GAAG,EAAE,CAAC;AAE/E;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,CAO3D"}

package/dist/esm/utils/styles.js

@@ -0,0 +1,16 @@
+/**
+ * Converts the given styles to a props object that can be passed directly into
+ * a jsx/tsx component. Converts to className if styles is a string, otherwise
+ * treats it as CSSProperties.
+ *
+ * Example:
+ * <div {...styleToProps(containerStyle)}>...</div>
+ */
+export function styleToProps(styles) {
+    if (!styles)
+        return {};
+    if (typeof styles === 'string') {
+        return { className: styles };
+    }
+    return { style: styles };
+}

package/dist/esm/utils/valueFormatter.d.ts

@@ -12,6 +12,6 @@ type Props = {
 /**
  * Pretty-prints the given values to their nice-looking string form.
  */
-export declare const valueFormatter: ({ value, field, fields, }: Props) => string | number | boolean;
+export declare const valueFormatter: ({ value, field, fields, }: Props) => string;
 export {};
 //# sourceMappingURL=valueFormatter.d.ts.map

package/dist/esm/utils/valueFormatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,8BAIxB,KAAK,KAAG,MAAM,GAAG,MAAM,GAAG,OAgC5B,CAAC"}
+{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,8BAIxB,KAAK,KAAG,MA+BV,CAAC"}

package/dist/esm/utils/valueFormatter.js

@@ -19,7 +19,6 @@ export const valueFormatter = ({ value, field, fields, }) => {
         one_decimal_place: formatOneDecimalPlace,
         two_decimal_places: formatTwoDecimalPlaces,
         string: formatString,
-        interval: formatInterval,
         yyyy: format_YYYY,
         MMM_yyyy: format_MMM_yyyy,
         MMM_dd_yyyy: format_MMM_dd_yyyy,
@@ -33,7 +32,7 @@ export const valueFormatter = ({ value, field, fields, }) => {
     if (Object.keys(HANDLERS).includes(formatType)) {
         return HANDLERS[formatType](value);
     }
-    return value.toString(); // by default make this value a string
+    return formatString(value); // by default make this value a string
 };
 /**
  * HELPER FUNCTION DEFINITIONS
@@ -41,22 +40,12 @@ export const valueFormatter = ({ value, field, fields, }) => {
 /**
  * Formats the value as a string using the built-in converstion.
  */
-const formatString = (value) => value.toString();
-/**
- * Formats the value as an interval.
- */
-const INTERVALS = [
-    'years',
-    'months',
-    'days',
-    'hours',
-    'minutes',
-    'seconds',
-];
-const formatInterval = (interval) => INTERVALS.map((component) => interval[component])
-    .filter((value) => value !== undefined && value !== null)
-    .map((value, index) => `${value} ${INTERVALS[index]}`)
-    .join(', ');
+const formatString = (value) => {
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+    return value.toString();
+};
 /**
  * Formats the value as a (rounded) currency amount in dollars.
  *

package/dist/esm/utils/valueFormatterCSV.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valueFormatterCSV.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatterCSV.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,8BAI3B,KAAK,KAAG,MAAM,GAAG,MAAM,GAAG,OAgC5B,CAAC"}
+{"version":3,"file":"valueFormatterCSV.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatterCSV.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,8BAI3B,KAAK,KAAG,MAAM,GAAG,MAAM,GAAG,OA+B5B,CAAC"}

package/dist/esm/utils/valueFormatterCSV.js

@@ -19,7 +19,6 @@ export const valueFormatterCSV = ({ value, field, fields, }) => {
         one_decimal_place: formatOneDecimalPlace,
         two_decimal_places: formatTwoDecimalPlaces,
         string: formatString,
-        interval: formatInterval,
         yyyy: format_YYYY,
         MMM_yyyy: format_MMM_yyyy,
         MMM_dd_yyyy: format_MMM_dd_yyyy,
@@ -33,12 +32,17 @@ export const valueFormatterCSV = ({ value, field, fields, }) => {
     if (Object.keys(HANDLERS).includes(formatType)) {
         return HANDLERS[formatType](value);
     }
-    return value.toString(); // by default make this value a string
+    return formatString(value); // by default make this value a string
 };
 /**
  * HELPER FUNCTION DEFINITIONS
  */
-const formatString = (value) => value.toString();
+const formatString = (value) => {
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+    return value.toString();
+};
 const formatDollarAmount = (value) => Number(value ?? 0);
 const formatDollarCents = (value) => Number(value ?? 0);
 const formatWholeNumber = (value) => Math.round(Number(value));
@@ -89,15 +93,3 @@ const format_wo_yyyy = (value) => {
         return 'Invalid date';
     return `${getWeek(utcDate)},${utcDate.getFullYear()}`;
 };
-const INTERVALS = [
-    'years',
-    'months',
-    'days',
-    'hours',
-    'minutes',
-    'seconds',
-];
-const formatInterval = (interval) => INTERVALS.map((component) => interval[component])
-    .filter((value) => value !== undefined && value !== null)
-    .map((value, index) => `${value} ${INTERVALS[index]}`)
-    .join(', ');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.10.4",
+  "version": "2.10.6",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
@@ -32,11 +32,8 @@
     "@types/react-dom": "^18.2.18",
     "eslint": "^8.56.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.3.3"
   },
-  "peerDependencies": {
-    "react-dom": ">=17"
-  },
-  "`description": "Quill React components for building dashboards and reporting.",
   "access": "public"
 }