@quillsql/react 2.10.31 → 2.10.32

package/dist/esm/BarList.js

@@ -0,0 +1,279 @@
+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

@@ -0,0 +1,42 @@
+/// <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

@@ -0,0 +1 @@
+{"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"}