@quillsql/react 2.10.29 → 2.10.31

package/dist/esm/BarList.js

@@ -1,279 +0,0 @@
-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 './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);
-// };
-export 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})`;
-}
-const BarList = React.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 (_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: [_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 (_jsxs("div", { style: {
-                                    boxSizing: 'content-box',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    width: '100%',
-                                }, children: [_jsx("div", { title: item[xAxisField], style: {
-                                            maxWidth: 130,
-                                            boxSizing: 'content-box',
-                                            minWidth: 130,
-                                            overflow: 'hidden',
-                                            width: '100%',
-                                        }, children: _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: valueFormatter({
-                                                value: item[xAxisField],
-                                                field: xAxisField,
-                                                fields: [{ field: xAxisField, format: xAxisFormat }],
-                                            }) }) }), _jsxs("div", { style: {
-                                            width: '100%',
-                                            height: '100%',
-                                            boxSizing: 'content-box',
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                        }, children: [_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: _jsx("div", { style: {
-                                                        position: 'absolute',
-                                                        display: 'flex',
-                                                        maxWidth: '100%',
-                                                        boxSizing: 'content-box',
-                                                        marginLeft: '8px',
-                                                    }, children: _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 }) }) }), _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: _jsx("div", { style: {
-                                                        boxSizing: 'content-box',
-                                                        position: 'absolute',
-                                                        maxWidth: '100%',
-                                                        display: 'flex',
-                                                        marginLeft: '8px',
-                                                    }, children: _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 && (_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"] }))] }), _jsx("div", { style: {
-                        boxSizing: 'content-box',
-                        minWidth: 'min-content',
-                        textAlign: 'right',
-                        paddingLeft: 10,
-                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => (_jsx("div", { style: {
-                            boxSizing: 'content-box',
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            alignItems: 'center',
-                            marginBottom: idx === data.length - 1 ? 0 : '8px',
-                            height: '36px',
-                        }, children: _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: valueFormatter({
-                                value: item[yAxisFields[0].field],
-                                field: yAxisFields[0].field,
-                                fields: yAxisFields,
-                            }) }) }, item[xAxisField] + 'label' + idx))) })] }));
-    }
-    return (_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: _jsxs("div", { style: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                // paddingTop: 20,
-                // paddingLeft: 25,
-                boxSizing: 'content-box',
-                overflow: 'hidden',
-                width: '100%',
-            }, children: [_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 (_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: _jsx("div", { style: {
-                                        boxSizing: 'content-box',
-                                        position: 'absolute',
-                                        maxWidth: '100%',
-                                        display: 'flex',
-                                        marginLeft: '8px',
-                                    }, children: _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: valueFormatter({
-                                            value: item[xAxisField],
-                                            field: xAxisField,
-                                            fields: [{ field: xAxisField, format: xAxisFormat }],
-                                        }) }) }) }, item[xAxisField] + 'label' + idx));
-                        }), data.length > NUM_TO_SHOW && (_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"] }))] }), _jsx("div", { style: {
-                        boxSizing: 'content-box',
-                        textAlign: 'right',
-                        minWidth: 'min-content',
-                        paddingLeft: 10,
-                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => (_jsx("div", { style: {
-                            boxSizing: 'content-box',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-end',
-                            marginBottom: idx === data.length - 1 ? 0 : '8px',
-                            height: '36px',
-                        }, children: _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: valueFormatter({
-                                value: item[yAxisFields[0].field],
-                                field: yAxisFields[0].field,
-                                fields: yAxisFields,
-                            }) }) }, item[xAxisField] + 'value' + idx))) })] }) }));
-});
-export default BarList;

package/dist/esm/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/esm/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"}