@quillsql/react 2.10.30 → 2.10.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.10.30",
+  "version": "2.10.31",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",

package/dist/cjs/BarList.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-interface YAxisField {
-    label: string;
-    field: string;
-    chartType?: string;
-}
-export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
-    data: object[];
-    valueFormatter?: any;
-    color?: string;
-    showAnimation?: boolean;
-    xAxisField: string;
-    yAxisFields: YAxisField[];
-    containerStyle: any;
-    xAxisFormat: string;
-    colors: string[];
-    theme: any;
-}
-export declare function hexToRgbaWith10PercentAlpha(hex: any): string;
-declare const BarList: React.ForwardRefExoticComponent<BarListProps & React.RefAttributes<HTMLDivElement>>;
-export default BarList;
-//# sourceMappingURL=BarList.d.ts.map

package/dist/cjs/BarList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../src/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqExC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFA6dX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/cjs/BarList.js

@@ -1,286 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hexToRgbaWith10PercentAlpha = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable react/display-name */
-// @ts-nocheck
-const react_1 = __importDefault(require("react"));
-const valueFormatter_1 = require("./utils/valueFormatter");
-const getWidthsFromValues = (dataValues) => {
-    let maxValue = -Infinity;
-    dataValues.forEach(value => {
-        maxValue = Math.max(maxValue, value);
-    });
-    return dataValues.map(value => {
-        if (value === 0)
-            return 0;
-        return Math.max((value / maxValue) * 100, 1);
-    });
-};
-function makeBarListClassName(componentName) {
-    return (className) => {
-        return `BarList-${componentName}-${className};`;
-    };
-}
-// const valueFormatter = (number: number) => {
-// return '$ ' + Intl.NumberFormat('us').format(number).toString();
-//   return number.toFixed(0);
-// };
-function hexToRgbaWith10PercentAlpha(hex) {
-    // Convert the hex color to RGB
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    // Set the alpha value to 10%
-    const alpha = 0.1;
-    // Return the color as an rgba string
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-exports.hexToRgbaWith10PercentAlpha = hexToRgbaWith10PercentAlpha;
-const BarList = react_1.default.forwardRef((props, ref) => {
-    const { data = [], yAxisFields, xAxisField, xAxisFormat, colors, 
-    // valueFormatter = (value: any) => value,valueFormatter
-    showAnimation = true, className, containerStyle, theme, ...other } = props;
-    const widths = getWidthsFromValues(data.map(item => item[yAxisFields[0].field]));
-    const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1;
-    if (yAxisFields.length > 1) {
-        const widths2 = getWidthsFromValues(data.map(item => item[yAxisFields[1].field]));
-        return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
-                ...containerStyle,
-                // width: '100%',
-                // height: '100%',
-                // marginLeft: 25,
-                // background: 'red',
-                // marginTop: 20,
-                // paddingRight: 25,
-                overflow: 'hidden',
-                boxSizing: 'content-box',
-                display: 'flex',
-                paddingTop: 20,
-                paddingLeft: 25,
-                // paddingRight: 25,
-                justifyContent: 'space-between',
-                // marginLeft: '24px',
-                // width: 'calc(100% - 24px)',
-            }, ...other, children: [(0, jsx_runtime_1.jsxs)("div", { 
-                    //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-                    // className="qq-relative-w-full"
-                    style: {
-                        // width: '100%',
-                        height: '100%',
-                        position: 'relative',
-                        boxSizing: 'content-box',
-                        width: '100%',
-                    }, children: [data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
-                            //   const Icon = item.icon;
-                            const Icon = null;
-                            return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                    boxSizing: 'content-box',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    width: '100%',
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { title: item[xAxisField], style: {
-                                            maxWidth: 130,
-                                            boxSizing: 'content-box',
-                                            minWidth: 130,
-                                            overflow: 'hidden',
-                                            width: '100%',
-                                        }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                                                color: theme?.chartLabelColor,
-                                                boxSizing: 'content-box',
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                                fontSize: theme?.fontSizeSmall || '14px',
-                                            }, children: (0, valueFormatter_1.valueFormatter)({
-                                                value: item[xAxisField],
-                                                field: xAxisField,
-                                                fields: [{ field: xAxisField, format: xAxisFormat }],
-                                            }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                            width: '100%',
-                                            height: '100%',
-                                            boxSizing: 'content-box',
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { 
-                                                // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    height: '36px',
-                                                    borderRadius: '4px',
-                                                    marginBottom: '8px',
-                                                    width: `${widths[idx]}%`,
-                                                    transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
-                                                    boxSizing: 'content-box',
-                                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                        position: 'absolute',
-                                                        display: 'flex',
-                                                        maxWidth: '100%',
-                                                        boxSizing: 'content-box',
-                                                        marginLeft: '8px',
-                                                    }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                                                            color: theme?.chartLabelColor,
-                                                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                                            boxSizing: 'content-box',
-                                                            whiteSpace: 'nowrap',
-                                                            overflow: 'hidden',
-                                                            textOverflow: 'ellipsis',
-                                                            fontSize: theme?.fontSizeSmall || '14px',
-                                                        }, children: yAxisFields[0].label }) }) }), (0, jsx_runtime_1.jsx)("div", { 
-                                                // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    height: '36px',
-                                                    borderRadius: '4px',
-                                                    marginBottom: '8px',
-                                                    width: `${widths2[idx]}%`,
-                                                    transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
-                                                    boxSizing: 'content-box',
-                                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                        boxSizing: 'content-box',
-                                                        position: 'absolute',
-                                                        maxWidth: '100%',
-                                                        display: 'flex',
-                                                        marginLeft: '8px',
-                                                    }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                                                            color: theme?.chartLabelColor,
-                                                            boxSizing: 'content-box',
-                                                            whiteSpace: 'nowrap',
-                                                            overflow: 'hidden',
-                                                            textOverflow: 'ellipsis',
-                                                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                                            fontSize: theme?.fontSizeSmall || '14px',
-                                                        }, children: yAxisFields[1].label }) }) })] })] }, item[xAxisField] + idx));
-                        }), data.length > NUM_TO_SHOW && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                color: theme?.chartLabelColor,
-                                boxSizing: 'content-box',
-                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                fontSize: theme?.fontSizeSmall || '14px',
-                            }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        boxSizing: 'content-box',
-                        minWidth: 'min-content',
-                        textAlign: 'right',
-                        paddingLeft: 10,
-                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                            boxSizing: 'content-box',
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            alignItems: 'center',
-                            marginBottom: idx === data.length - 1 ? 0 : '8px',
-                            height: '36px',
-                        }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                                color: theme?.chartLabelColor,
-                                boxSizing: 'content-box',
-                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                fontSize: theme?.fontSizeSmall || '14px',
-                            }, children: (0, valueFormatter_1.valueFormatter)({
-                                value: item[yAxisFields[0].field],
-                                field: yAxisFields[0].field,
-                                fields: yAxisFields,
-                            }) }) }, item[xAxisField] + 'label' + idx))) })] }));
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
-            ...containerStyle,
-            // width: '100%',
-            boxSizing: 'content-box',
-            // height: '100%',
-            // height: hei
-            // marginLeft: 25,
-            // background: 'red',
-            // paddingRight: 25,
-            // paddingRight: 25,
-        }, ...other, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                // paddingTop: 20,
-                // paddingLeft: 25,
-                boxSizing: 'content-box',
-                overflow: 'hidden',
-                width: '100%',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { 
-                    //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-                    // className="qq-relative-w-full"
-                    style: {
-                        width: 'calc(100%)',
-                        boxSizing: 'content-box',
-                        height: '100%',
-                        position: 'relative',
-                        paddingRight: 25,
-                    }, children: [data.slice(0, NUM_TO_SHOW).map((item, idx) => {
-                            //   const Icon = item.icon;
-                            const Icon = null;
-                            return ((0, jsx_runtime_1.jsx)("div", { 
-                                // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                                style: {
-                                    width: `${widths[idx]}%`,
-                                    transition: showAnimation ? 'all 2s' : '',
-                                    boxSizing: 'content-box',
-                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    height: '36px',
-                                    marginBottom: '8px',
-                                    borderRadius: '4px',
-                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                        boxSizing: 'content-box',
-                                        position: 'absolute',
-                                        maxWidth: '100%',
-                                        display: 'flex',
-                                        marginLeft: '8px',
-                                    }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                                            color: theme?.chartLabelColor,
-                                            boxSizing: 'content-box',
-                                            whiteSpace: 'nowrap',
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                            fontSize: theme?.fontSizeSmall || '14px',
-                                        }, children: (0, valueFormatter_1.valueFormatter)({
-                                            value: item[xAxisField],
-                                            field: xAxisField,
-                                            fields: [{ field: xAxisField, format: xAxisFormat }],
-                                        }) }) }) }, item[xAxisField] + 'label' + idx));
-                        }), data.length > NUM_TO_SHOW && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                color: theme?.chartLabelColor,
-                                boxSizing: 'content-box',
-                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                fontSize: theme?.fontSizeSmall || '14px',
-                            }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        boxSizing: 'content-box',
-                        textAlign: 'right',
-                        minWidth: 'min-content',
-                        paddingLeft: 10,
-                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                            boxSizing: 'content-box',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-end',
-                            marginBottom: idx === data.length - 1 ? 0 : '8px',
-                            height: '36px',
-                        }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                                color: theme?.chartLabelColor,
-                                boxSizing: 'content-box',
-                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                fontSize: theme?.fontSizeSmall || '14px',
-                            }, children: (0, valueFormatter_1.valueFormatter)({
-                                value: item[yAxisFields[0].field],
-                                field: yAxisFields[0].field,
-                                fields: yAxisFields,
-                            }) }) }, item[xAxisField] + 'value' + idx))) })] }) }));
-});
-exports.default = BarList;

package/dist/cjs/Chart.d.ts

@@ -1,42 +0,0 @@
-/// <reference types="react" />
-interface BaseChartProps {
-    colors?: string[];
-    containerStyle?: React.CSSProperties;
-    dateFilter?: any;
-    theme?: any;
-    isDateFilter?: boolean;
-    isAnimationActive?: boolean;
-    hideXAxis?: boolean;
-    hideYAxis?: boolean;
-    hideCartesianGrid?: boolean;
-}
-interface WithChartId extends BaseChartProps {
-    chartId: string;
-}
-export type FieldFormat = 'whole_number' | 'one_decimal_place' | 'two_decimal_places' | 'dollar_amount' | 'dollar_cents' | 'MMM_yyyy' | 'MMM_dd_yyyy' | 'MMM_dd-MMM_dd' | 'MMM_dd_hh:mm_ap_pm' | 'hh_ap_pm' | 'percent' | 'string';
-interface YAxisField {
-    label: string;
-    field: string;
-    chartType: string;
-    format: FieldFormat;
-}
-export interface DashboardItem {
-    id: string;
-    name: string;
-    chartType: string;
-    xAxisField: string;
-    xAxisLabel: string;
-    xAxisFormat: FieldFormat;
-    yAxisFields: YAxisField[];
-    rows: any[];
-    columns: any[];
-    pivot: any;
-}
-interface WithConfig extends BaseChartProps {
-    config: DashboardItem | any;
-}
-type ChartProps = WithChartId | WithConfig;
-export declare function didFiltersChange(dashboardItem: any, filters: any): boolean;
-declare const Chart: ({ chartId, config, colors, containerStyle, query, SelectComponent, dateRangeFilterDisabled, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: ChartProps) => import("react/jsx-runtime").JSX.Element;
-export default Chart;
-//# sourceMappingURL=Chart.d.ts.map

package/dist/cjs/Chart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA4BA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA4D3C,wBAAgB,gBAAgB,CAAC,aAAa,KAAA,EAAE,OAAO,KAAA,WAQtD;AAKD,QAAA,MAAM,KAAK,8JAYR,UAAU,4CAkCZ,CAAC;AAicF,eAAe,KAAK,CAAC"}