@quillsql/react 2.11.16 → 2.11.17

package/dist/esm/TableChart.js

@@ -3,17 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import React, { useMemo } 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);
-    });
-};
 export function hexToRgbaWith10PercentAlpha(hex) {
     // Convert the hex color to RGB
     const r = parseInt(hex.slice(1, 3), 16);
@@ -28,8 +17,6 @@ function Columns({ columns, data, theme }) {
     return (_jsx("div", { style: {
             display: 'flex',
             flexDirection: 'row',
-            // overflowX: 'scroll',
-            // overflowY: 'hidden',
             overflow: 'scroll',
             height: '100%',
         }, children: columns.map((elem) => (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field))) }));
@@ -38,7 +25,6 @@ function Column({ column, data, theme }) {
     return (_jsxs("div", { style: {
             paddingLeft: 20,
             paddingRight: 20,
-            // width: 'max-content',
             display: 'inline-flex',
             flexDirection: 'column',
             whiteSpace: 'nowrap',
@@ -65,9 +51,6 @@ function Cell({ item, theme }) {
 }
 const TableChart = React.forwardRef((props, ref) => {
     const { data = [], yAxisFields, containerStyle, theme, ...other } = props;
-    // const widths = getWidthsFromValues(
-    //   data.map(item => item[yAxisFields[0].field])
-    // );
     const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1 || 6;
     const memoizedData = useMemo(() => {
         return data.slice(0, NUM_TO_SHOW).map((item) => {
@@ -85,14 +68,9 @@ const TableChart = React.forwardRef((props, ref) => {
     }, [data, NUM_TO_SHOW]);
     if (!memoizedData.length) {
         return (_jsx("div", { ref: ref, style: {
-                // width: '100%',
                 boxSizing: 'content-box',
                 height: '100%',
-                // height: hei
-                // marginLeft: 25,
-                // background: 'red',
                 marginTop: 20,
-                // paddingRight: 25,
                 overflow: 'hidden',
                 display: 'flex',
                 marginLeft: '1.5rem',
@@ -103,11 +81,9 @@ const TableChart = React.forwardRef((props, ref) => {
             boxSizing: 'content-box',
             height: containerStyle?.height || '100%',
             marginTop: 20,
-            // overflow: 'hidden',
             display: 'flex',
             marginLeft: '1rem',
             flexDirection: 'column',
-            // justifyContent: 'space-between',
         }, children: [_jsx(Columns, { columns: yAxisFields, data: memoizedData, theme: theme }), data.length > NUM_TO_SHOW && (_jsxs("div", { style: {
                     color: theme?.chartLabelColor,
                     boxSizing: 'content-box',
@@ -116,175 +92,5 @@ const TableChart = React.forwardRef((props, ref) => {
                     marginLeft: 12,
                     marginTop: 8,
                 }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }));
-    // return (
-    //   <div
-    //     ref={ref}
-    //     style={{
-    //       // width: '100%',
-    //       boxSizing: 'content-box',
-    //       height: '100%',
-    //       // height: hei
-    //       // marginLeft: 25,
-    //       // background: 'red',
-    //       marginTop: 20,
-    //       // paddingRight: 25,
-    //       overflow: 'hidden',
-    //       display: 'flex',
-    //       marginLeft: '1.5rem',
-    //       justifyContent: 'space-between',
-    //     }}
-    //     // className={twMerge(
-    //     // makeBarListClassName('root'),
-    //     // 'qq-flex qq-justify-between qq-h-full qq-w-full',
-    //     // 'qq-space-x-6',
-    //     //   className
-    //     // )}
-    //     {...other}
-    //   >
-    //     <div
-    //       //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-    //       // className="qq-relative-w-full"
-    //       style={{
-    //         width: 'calc(100%)',
-    //         boxSizing: 'content-box',
-    //         height: '100%',
-    //         paddingRight: 25,
-    //         position: 'relative',
-    //       }}
-    //     >
-    //       <div
-    //         style={{
-    //           display: 'flex',
-    //           flexDirection: 'row',
-    //           alignItems: 'center',
-    //           boxSizing: 'content-box',
-    //         }}
-    //       >
-    //         {yAxisFields.map((elem, index) => (
-    //           <div
-    //             key={index}
-    //             style={{
-    //               color: theme?.primaryTextColor,
-    //               width: 98,
-    //               maxWidth: 98,
-    //               boxSizing: 'content-box',
-    //               whiteSpace: 'nowrap',
-    //               overflow: 'hidden',
-    //               textOverflow: 'ellipsis',
-    //               fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-    //               fontSize: theme?.fontSizeSmall || '0.875rem',
-    //               fontWeight: theme?.fontWeightMedium || '500',
-    //             }}
-    //             // className={twMerge(
-    //             // makeBarListClassName('barText'),
-    //             //   'qq-whitespace-nowrap truncate',
-    //             //   'qq-text-sm'
-    //             // )}
-    //           >
-    //             {elem.label}
-    //           </div>
-    //         ))}
-    //       </div>
-    //       {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
-    //         //   const Icon = item.icon;
-    //         const Icon = null;
-    //         return (
-    //           <div
-    //             key={'label' + idx}
-    //             // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-    //             style={{
-    //               //   width: `${widths[idx]}%`,
-    //               width: '100%',
-    //               transition: showAnimation ? 'all 2s' : '',
-    //               boxSizing: 'content-box',
-    //               //   backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
-    //               display: 'flex',
-    //               alignItems: 'center',
-    //               height: '2.25rem',
-    //               // marginBottom: '0.5rem',
-    //               borderRadius: '0.25rem',
-    //             }}
-    //           >
-    //             <div
-    //               style={{
-    //                 boxSizing: 'content-box',
-    //                 position: 'absolute',
-    //                 maxWidth: '100%',
-    //                 display: 'flex',
-    //                 // height: 40,
-    //                 // minHeight: 40,
-    //                 // marginLeft: '0.5rem',
-    //               }}
-    //               // className={twMerge(
-    //               //   'qq-absolute qq-max-w-full qq-flex',
-    //               //   'qq-ml-2'
-    //               // )}
-    //             >
-    //               <div
-    //                 style={{
-    //                   display: 'flex',
-    //                   flexDirection: 'row',
-    //                   alignItems: 'center',
-    //                   boxSizing: 'content-box',
-    //                   height: 40,
-    //                   minHeight: 40,
-    //                 }}
-    //               >
-    //                 {yAxisFields.map((elem, index) => (
-    //                   <div
-    //                     key={index}
-    //                     style={{
-    //                       width: 98,
-    //                       maxWidth: 98,
-    //                       color: theme?.chartLabelColor,
-    //                       boxSizing: 'content-box',
-    //                       paddingRight: 10,
-    //                       height: 40,
-    //                       minHeight: 40,
-    //                       whiteSpace: 'nowrap',
-    //                       overflow: 'hidden',
-    //                       textOverflow: 'ellipsis',
-    //                       fontFamily:
-    //                         theme?.chartLabelFontFamily || theme?.fontFamily,
-    //                       fontSize: theme?.fontSizeSmall || '0.875rem',
-    //                       borderBottomColor: theme?.borderColor,
-    //                       borderBottomWidth: 1,
-    //                       borderBottomStyle: 'solid',
-    //                     }}
-    //                     // className={twMerge(
-    //                     // makeBarListClassName('barText'),
-    //                     //   'qq-whitespace-nowrap truncate',
-    //                     //   'qq-text-sm'
-    //                     // )}
-    //                   >
-    //                     {valueFormatter({
-    //                       value: item[elem.field],
-    //                       field: elem.field,
-    //                       fields: yAxisFields,
-    //                     })}
-    //                   </div>
-    //                 ))}
-    //               </div>
-    //             </div>
-    //           </div>
-    //         );
-    //       })}
-    //       {data.length > NUM_TO_SHOW && (
-    //         <div
-    //           style={{
-    //             color: theme?.chartLabelColor,
-    //             boxSizing: 'content-box',
-    //             fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-    //             fontSize: theme?.fontSizeSmall || '0.875rem',
-    //           }}
-    //           // className="qq-text-sm"
-    //         >
-    //           ...{data.length - NUM_TO_SHOW} more
-    //         </div>
-    //       )}
-    //     </div>
-    //     {/* eslint-disable prettier/prettier */}
-    //   </div>
-    // );
 });
 export default TableChart;

package/dist/esm/{BarList.d.ts → components/Chart/BarList.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ColorMapType } from './Chart';
+import { type ColorMapType } from '../../Chart';
 interface YAxisField {
     label: string;
     field: string;

package/dist/esm/components/Chart/BarList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,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,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFAwdX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/esm/{BarList.js → components/Chart/BarList.js}

@@ -2,7 +2,7 @@ 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';
+import { valueFormatter } from '../../utils/valueFormatter';
 const getWidthsFromValues = (dataValues) => {
     let maxValue = -Infinity;
     dataValues.forEach((value) => {

package/dist/esm/components/Chart/LineChart.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type ColorMapType } from '../../Chart';
-export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, singlePointStyle, }: {
+export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, }: {
     colors?: string[];
     colorMap?: ColorMapType;
     yAxisFields: any[];
@@ -15,7 +15,6 @@ export default function LineChart({ colors, colorMap, yAxisFields, data, contain
     hideXAxis: boolean;
     hideYAxis: boolean;
     hideCartesianGrid: boolean;
-    dashedComparison: boolean;
-    singlePointStyle: 'dot' | 'line';
+    comparisonLineStyle: 'solid' | 'dashed';
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/esm/components/Chart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,gBAAwB,EACxB,gBAAwB,GACzB,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,KAAK,GAAG,MAAM,CAAC;CAClC,kDAgPA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAA6B,GAC9B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;CACzC,kDAgPA"}

package/dist/esm/components/Chart/LineChart.js

@@ -8,7 +8,7 @@ import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
 import { hashCode } from '../../utils/crypto';
-export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, dashedComparison = false, singlePointStyle = 'dot', }) {
+export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', }) {
     const [formattedData, setFormattedData] = useState([]);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
@@ -28,7 +28,7 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                 return formatted;
             });
         }
-        if (singlePointStyle === 'line' && newData.length == 1) {
+        if (newData.length == 1) {
             const point = { ...newData[0] };
             newData.push(point);
         }
@@ -123,7 +123,7 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                         const gradientStop = hashCode(getCustomColor(index, elem.field, 'stop') ?? '#00000000');
                         const uniqueId = `gradient_${gradientStart}_${gradientStop}`;
                         return (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
-                                selectColor(elem, colors, index), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && dashedComparison && index > 0
+                                selectColor(elem, colors, index), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && comparisonLineStyle === 'dashed' && index > 0
                                 ? '5 5'
                                 : undefined, isAnimationActive: isAnimationActive }, elem.field));
                     })] }) }) }));

package/dist/esm/components/Chart/PieChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/PieChart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAA+B,aAAa,EAAE,MAAM,OAAO,CAAC;AAQ1E,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,iBAAiB,6DAMb,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,QAAA,MAAM,eAAe,wFAMX,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,QAAA,MAAM,UAAU,yCAA0C,CAAC;AAE3D,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/C,QAAA,MAAM,WAAW,gNAuBP,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,QAAA,MAAM,oBAAoB,oEAOhB,CAAC;AACX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnE,QAAA,MAAM,gBAAgB,4DAMZ,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,aAAa,GAAG,aAAa,CAAC;AAE1E,eAAO,MAAM,qBAAqB,EAAE,cACN,CAAC;AAE/B,eAAO,MAAM,eAAe,QAAS,MAAM,EAAE,WACO,CAAC;AAGrD,eAAO,MAAM,SAAS,kEA2CrB,CAAC;AAKF,eAAO,MAAM,eAAe,eACd,MAAM,GAAG,SAAS,kBACd,cAAc,QACxB,GAAG,EAAE,YACD,MAAM,WAIyC,CAAC;AAE5D,eAAO,MAAM,iBAAiB;cAIlB,MAAM,SAAS;6CAgB1B,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,eAAe,mCAKzB,oBAAoB,4CA+DtB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC;IACb,cAAc,EAAE,cAAc,CAAC;IAC/B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,iBAAiB,gDAK3B,sBAAsB,mDAwBxB,CAAC;AAEF,KAAK,iBAAiB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AA+GD,QAAA,MAAM,eAAe,wFAsGpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/{PieChart.js → components/Chart/PieChart.js}

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import React from 'react';
 import { Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
-import { namedColorToHex, rgbToHsl as RGBToHSL, HSLtoRGB } from './utils/color';
+import { namedColorToHex, rgbToHsl as RGBToHSL, HSLtoRGB, } from '../../utils/color';
 const iconVariantValues = [
     'simple',
     'light',

package/dist/esm/components/Dashboard/ChartComponent.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }: any): JSX.Element;
+import { DashboardItemProps } from '../../Dashboard';
+export default function QuillChartComponent({ dashboardItem, onClick, children, }: DashboardItemProps): JSX.Element;
 //# sourceMappingURL=ChartComponent.d.ts.map

package/dist/esm/components/Dashboard/ChartComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/ChartComponent.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAkGnB"}
+{"version":3,"file":"ChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/ChartComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,OAAO,EACP,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA8FlC"}

package/dist/esm/components/Dashboard/ChartComponent.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }) {
-    return (_jsx("div", { onClick: onClickDashboardItem
-            ? () => onClickDashboardItem(dashboardItem)
-            : () => { }, style: {
+import { useTheme } from '../../hooks';
+export default function QuillChartComponent({ dashboardItem, onClick, children, }) {
+    const theme = useTheme();
+    return (_jsx("div", { onClick: () => onClick && onClick(dashboardItem), style: {
             cursor: 'pointer',
             boxSizing: 'content-box',
             minHeight: 400,
             borderRadius: 8,
-            ...style,
         }, children: _jsx("div", { style: {
                 width: '100%',
                 height: '100%',
@@ -40,7 +39,7 @@ export default function DashboardItem({ dashboardItem, onClickDashboardItem, the
                                         display: 'block',
                                         maxWidth: '100%',
                                         overflow: 'hidden',
-                                    }, children: dashboardItem?.name }), onClickDashboardItem ? (_jsx("div", { style: {
+                                    }, children: dashboardItem?.name }), onClick ? (_jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         color: theme.primaryTextColor,
                                         boxSizing: 'content-box',

package/dist/esm/components/Dashboard/DashboardFilter.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type DateRangePickerComponentProps } from '../../DateRangePicker/QuillDateRangePicker';
+type SelectComponentType = ({ label, value, options, onChange, }: {
+    value: string;
+    label?: string | undefined;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+}) => JSX.Element;
+type DateRangePickerComponentType = ({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, }: DateRangePickerComponentProps) => JSX.Element;
+interface DashboardFilterProps {
+    filter: any;
+    onChangeFilter: (...args: any[]) => void;
+    SelectComponent: SelectComponentType | React.MemoExoticComponent<SelectComponentType>;
+    DateRangePickerComponent: DateRangePickerComponentType | React.MemoExoticComponent<DateRangePickerComponentType>;
+    theme: any;
+}
+export declare function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }: DashboardFilterProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DashboardFilter.d.ts.map

package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAEhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,GACP,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDA+GtB"}

package/dist/esm/components/Dashboard/DashboardFilter.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { COMPARISON_OPTIONS } from '../../DateRangePicker/dateRangePickerUtils';
+import { useComparisonRange, useDateFilter } from '../../Context';
+export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
+    const { comparisonRange, setComparisonRange } = useComparisonRange();
+    const { setDateFilter } = useDateFilter();
+    const [filterValue, setFilterValue] = useState(null);
+    useEffect(() => {
+        if (filter.filterType === 'string') {
+            setFilterValue(filter.selectedValue);
+        }
+        if (filter.filterType == 'date_range') {
+            setDateFilter(filter.preset.label);
+            if (filter?.comparisonRange?.value) {
+                const newComparisonRange = COMPARISON_OPTIONS.find((option) => {
+                    return option.value === filter.comparisonRange.value;
+                });
+                setComparisonRange(newComparisonRange);
+            }
+            else {
+                setComparisonRange(null);
+            }
+        }
+    }, [filter]);
+    if (filter.filterType === 'string') {
+        return (_jsx(SelectComponent, { label: filter.label, value: filterValue, onChange: (e) => onChangeFilter(filter, e.target.value), options: [
+                ...filter.options.map((elem) => ({
+                    label: elem[filter.labelField],
+                    value: elem[filter.field],
+                })),
+            ] }));
+    }
+    if (filter.filterType == 'date_range') {
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'flex-end',
+            }, children: [_jsx(DateRangePickerComponent, { label: filter.label, dateRange: { startDate: filter.startDate, endDate: filter.endDate }, preset: filter.preset.label, onChangeDateRange: (value) => {
+                        onChangeFilter(filter, {
+                            startDate: value.startDate,
+                            endDate: value.endDate,
+                        });
+                    }, onChangePreset: (value) => {
+                        onChangeFilter(filter, { preset: value });
+                    }, presetOptions: filter.options.map((option) => {
+                        return { label: option.label, value: option.label };
+                    }) }), comparisonRange && (_jsx("div", { children: _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }, children: [_jsx("div", { style: {
+                                    paddingLeft: 16,
+                                    paddingRight: 12,
+                                    color: theme?.secondaryTextColor,
+                                    fontFamily: theme?.fontFamily,
+                                    fontSize: 14,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    flex: 1,
+                                    minWidth: 80,
+                                    justifyContent: 'center',
+                                }, children: "compared to" }), _jsx(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
+                                    onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
+                                }, options: COMPARISON_OPTIONS.map((compareOption) => ({
+                                    value: compareOption.value,
+                                    label: compareOption.text,
+                                })) })] }) }))] }));
+    }
+    return null;
+}

package/dist/esm/components/Dashboard/DataLoader.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export type DataLoaderChildProps = {
     isLoading: boolean;
-    error: string | null;
+    error?: string;
 };
 export default function DataLoader({ id, children, }: {
     id: string;

package/dist/esm/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAUA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACvE,GAAG,GAAG,CAAC,OAAO,CA+Ed"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAUA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACvE,GAAG,GAAG,CAAC,OAAO,CA+Ed"}

package/dist/esm/components/Dashboard/DataLoader.js

@@ -9,7 +9,7 @@ export default function DataLoader({ id, children, }) {
     const { dispatch, dashboard } = useContext(DashboardContext);
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
+    const [error, setError] = useState(undefined);
     useEffect(() => {
         async function getChartOptions() {
             setIsLoading(true);

package/dist/esm/components/Dashboard/MetricComponent.d.ts

@@ -1,14 +1,4 @@
 /// <reference types="react" />
-import { DashboardItem } from '../../Dashboard';
-interface DashboardItemProps {
-    dashboardItem: DashboardItem;
-    onClickDashboardItem?: any;
-    error?: string | null;
-    isLoading?: boolean;
-    children?: any;
-    theme?: any;
-    style?: any;
-}
-export default function QuillMetricComponent({ dashboardItem, onClickDashboardItem, error, isLoading, theme, style, }: DashboardItemProps): JSX.Element;
-export {};
+import { DashboardItemProps } from '../../Dashboard';
+export default function QuillMetricComponent({ dashboardItem, onClick, error, isLoading, }: DashboardItemProps): JSX.Element;
 //# sourceMappingURL=MetricComponent.d.ts.map

package/dist/esm/components/Dashboard/MetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,oBAAoB,CAAC,EAAE,GAAG,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkPlC"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AASrD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA6QlC"}