@quillsql/react 2.9.3 → 2.9.4

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

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

@@ -0,0 +1,286 @@
+"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.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAuHA,QAAA,MAAM,KAAK;aAUA,MAAM;aACN,GAAG;;;;;uBAKO,OAAO;6CAiC3B,CAAC;AA4gBF,eAAe,KAAK,CAAC"}