@quillsql/react 2.14.6 → 2.14.8

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

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, Customized, } from 'recharts';
+import { CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, Customized, Legend, } from 'recharts';
 import { valueFormatter } from '../../utils/valueFormatter';
 import { axisFormatter } from '../../utils/axisFormatter';
 import { generateArrayFromColor, selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import CustomReferenceLine from './CustomReferenceLine';
-export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, onClickChartElement, dateFilter, referenceLines, }) {
+import { RenderLegend } from './CustomLegend';
+export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, onClickChartElement, dateFilter, referenceLines, showLegend = false, stackedMode = false, }) {
     const getCustomColor = (field) => {
         const key = field.startsWith('comparison_') ? 'comparison' : 'primary';
         field = field.replace('comparison_', '');
@@ -44,7 +45,12 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
                     ? onClickChartElement(event?.activePayload
                         ? event.activePayload[0].payload
                         : undefined)
-                    : undefined, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields, referenceLines), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
+                    : undefined, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), showLegend && (_jsx(Legend, { verticalAlign: "top", align: "left", fontSize: 11, color: theme.secondaryTextColor, wrapperStyle: {
+                            paddingLeft: 20,
+                            paddingBottom: 20,
+                        }, content: _jsx(RenderLegend, {}) })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: stackedMode
+                            ? [0, 'auto']
+                            : getDomain(data, yAxisFields, referenceLines), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
                         }, tickFormatter: (tick) => {
@@ -93,8 +99,14 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
                                         fields: yAxisFields,
                                     });
                                 }, xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, comparison: comparison, dateFilter: dateFilter }));
-                        }, position: { y: 0 } }), sortYAxisFields(yAxisFields).map((elem) => {
-                        return (_jsx(Bar, { dataKey: elem.field, stackId: isStacked ? elem.field.replace('comparison_', '') : undefined, type: "linear", fill: getCustomColor(elem.field) ??
+                        }, position: { y: 0 } }), sortYAxisFields([...yAxisFields]).map((elem, index) => {
+                        return (_jsx(Bar, { radius: stackedMode && index === yAxisFields.length - 1
+                                ? [3, 3, 0, 0]
+                                : 0, dataKey: elem.field, stackId: stackedMode
+                                ? 'same_id'
+                                : isStacked
+                                    ? elem.field.replace('comparison_', '')
+                                    : undefined, type: "linear", fill: getCustomColor(elem.field) ??
                                 selectColor(elem, colors.length >= yAxisFields.length / (comparison ? 2 : 1)
                                     ? colors
                                     : generateArrayFromColor(colors.slice(0, 2), yAxisFields.length), yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field));

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

@@ -0,0 +1,2 @@
+export declare const RenderLegend: (props: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CustomLegend.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomLegend.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/CustomLegend.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,UAAW,GAAG,4CAyCtC,CAAC"}

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from '../../Context';
+export const RenderLegend = (props) => {
+    const { payload } = props;
+    const [theme] = useContext(ThemeContext);
+    console.log('theme', theme);
+    return (_jsx("div", { style: { display: 'flex', justifyContent: 'flex-start' }, children: payload.map((entry, index) => (_jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                marginRight: '1rem',
+            }, children: [_jsx("svg", { style: { marginRight: '0.5rem' }, width: "16", height: "16", viewBox: "0 0 16 16", children: _jsx("rect", { width: "16", height: "16", rx: "3", fill: payload?.[index]?.color }) }), _jsx("span", { style: {
+                        color: theme?.secondaryTextColor,
+                        fontFamily: theme?.fontFamily,
+                        fontSize: theme?.fontSizeMedium || '14px',
+                    }, children: entry.value })] }, `legend-${index}`))) }));
+};

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

@@ -1,6 +1,6 @@
 import { type ColorMapType } from '../../Chart';
 import { AxisFormat } from '../../Dashboard';
-export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, comparisonLineStyle, cartesianGridLineColor, onClickChartElement, dateFilter, referenceLines, }: {
+export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, comparisonLineStyle, cartesianGridLineColor, onClickChartElement, dateFilter, referenceLines, showLegend, }: {
     colors: string[];
     colorMap?: ColorMapType;
     yAxisFields: any[];
@@ -28,5 +28,6 @@ export default function LineChart({ colors, colorMap, yAxisFields, data, contain
         label: string;
         query: number[];
     }[];
+    showLegend?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# 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":"AAeA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA4B7C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,EAC7B,sBAAsB,EACtB,mBAA8B,EAC9B,UAAU,EACV,cAAc,GACf,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,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,2BAA2B,EAAE,OAAO,CAAC;IACrC,yBAAyB,EAAE,OAAO,CAAC;IACnC,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,cAAc,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;CACvD,2CAgTA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA4B7C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,EAC7B,sBAAsB,EACtB,mBAA8B,EAC9B,UAAU,EACV,cAAc,EACd,UAAkB,GACnB,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,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,2BAA2B,EAAE,OAAO,CAAC;IACrC,yBAAyB,EAAE,OAAO,CAAC;IACnC,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,cAAc,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,2CA6TA"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Area, CartesianGrid, ComposedChart, Customized, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { Area, CartesianGrid, ComposedChart, Customized, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { DATE_FORMAT_TYPES, valueFormatter } from '../../utils/valueFormatter';
 import { axisFormatter } from '../../utils/axisFormatter';
 import { selectColor } from '../../utils/color';
@@ -24,7 +24,7 @@ function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisForma
     }
     return lineChartData;
 }
-export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', cartesianGridLineColor, onClickChartElement = () => { }, dateFilter, referenceLines, }) {
+export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', cartesianGridLineColor, onClickChartElement = () => { }, dateFilter, referenceLines, showLegend = false, }) {
     const formattedData = useMemo(() => {
         if (!data || data.length === 0) {
             return createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat);
@@ -76,7 +76,11 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
             return sum + 1;
         return sum;
     }, 0);
-    return (_jsx("div", { style: { ...containerStyle }, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', minWidth: 0, minHeight: 0, children: _jsxs(ComposedChart, { data: formattedData, onClick: (event) => onClickChartElement(event?.activePayload ? event.activePayload[0].payload : undefined), children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: !hideHorizontalCartesianGrid, vertical: !hideVerticalCartesianGrid, stroke: cartesianGridLineColor ?? '#e5e7eb', strokeDasharray: cartesianGridLineStyle === 'dashed' ? '5 5' : undefined })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
+    return (_jsx("div", { style: { ...containerStyle }, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', minWidth: 0, minHeight: 0, children: _jsxs(ComposedChart, { data: formattedData, onClick: (event) => onClickChartElement(event?.activePayload ? event.activePayload[0].payload : undefined), children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: !hideHorizontalCartesianGrid, vertical: !hideVerticalCartesianGrid, stroke: cartesianGridLineColor ?? '#e5e7eb', strokeDasharray: cartesianGridLineStyle === 'dashed' ? '5 5' : undefined })), showLegend && (_jsx(Legend, { verticalAlign: "top", align: "left", fontSize: 11, color: theme.secondaryTextColor, wrapperStyle: {
+                            paddingLeft: 20,
+                            paddingBottom: 20,
+                            fontFamily: theme?.fontFamily,
+                        } })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme?.chartLabelFontFamily ||
                                 theme?.fontFamily ||

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

@@ -72,6 +72,7 @@ export interface DonutChartProps extends React.HTMLAttributes<HTMLDivElement> {
         label: string;
         format: AxisFormat;
     }[];
+    showLegend?: boolean;
 }
 declare const PieChartWrapper: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;
 export default PieChartWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/PieChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/PieChart.tsx"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
 import { generateArrayFromColor } from '../../utils/color';
@@ -209,8 +209,35 @@ export const DonutChartTooltip = ({ active, payload, valueFormatter, theme, yAxi
     }
     return null;
 };
+const renderCustomizedLabel = ({ cx, cy, name, midAngle, outerRadius, percent, tooltipPayload, color, theme, }) => {
+    const RADIAN = Math.PI / 180;
+    const radius = outerRadius + 25;
+    const x = cx + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+    const category = tooltipPayload?.[0]?.dataKey;
+    const rawValue = tooltipPayload?.[0]?.payload?.[`raw_${category}`];
+    const displayValue = rawValue
+        ? `${rawValue}`
+        : `${(percent * 100).toFixed(0)}%`;
+    const isRightSide = x > cx;
+    const isTopSide = y < cy;
+    // Calculate consistent left alignment position
+    const padding = 10;
+    let textX;
+    if (isRightSide) {
+        // Right side: start text at x + padding
+        textX = x + padding;
+    }
+    else {
+        // Left side: estimate text width and position so text starts at x - padding - textWidth
+        const longestText = name.length > displayValue.length ? name : displayValue;
+        const estimatedTextWidth = longestText.length * 7; // Rough estimate, adjust as needed
+        textX = x - padding - estimatedTextWidth;
+    }
+    return (_jsx("g", { children: isTopSide ? (_jsxs(_Fragment, { children: [_jsx("text", { x: textX, y: y - 8, fill: color, textAnchor: "start", dominantBaseline: "central", fontSize: theme?.fontSize || '14px', fontWeight: "500", fontFamily: theme?.fontFamily, children: name }), _jsx("text", { x: textX, y: y + 8, fill: color, textAnchor: "start", dominantBaseline: "central", fontSize: theme?.fontSize || '14px', fontWeight: "400", fontFamily: theme?.fontFamily, children: displayValue })] })) : (_jsxs(_Fragment, { children: [_jsx("text", { x: textX, y: y + 8, fill: color, textAnchor: "start", dominantBaseline: "central", fontSize: theme?.fontSize || '14px', fontWeight: "400", fontFamily: theme?.fontFamily, children: displayValue }), _jsx("text", { x: textX, y: y - 8, fill: color, textAnchor: "start", dominantBaseline: "central", fontSize: theme?.fontSize || '14px', fontWeight: "500", fontFamily: theme?.fontFamily, children: name })] })) }));
+};
 const PieChartWrapper = React.forwardRef((props, ref) => {
-    const { category = 'pct_of_the_total', index = 'status', data, colors = [], colorMap = {}, variant = 'donut', valueFormatter = defaultValueFormatter, className, containerStyle, theme, onClickChartElement, yAxisFields, ...other } = props;
+    const { category = 'pct_of_the_total', index = 'status', data, colors = [], colorMap = {}, variant = 'donut', valueFormatter = defaultValueFormatter, className, containerStyle, theme, onClickChartElement, yAxisFields, showLegend = false, ...other } = props;
     const isDonut = variant == 'donut';
     if (!data || data.length === 0) {
         return (_jsx("div", { style: {
@@ -239,7 +266,9 @@ const PieChartWrapper = React.forwardRef((props, ref) => {
                             generateArrayFromColor(colorMap[category]['primary'], data.length)) ??
                             (colors.length >= data.length
                                 ? colors
-                                : generateArrayFromColor(colors.slice(0, 2), data.length)), index, category), cx: "50%", cy: "50%", startAngle: 90, endAngle: -270, innerRadius: isDonut ? '70%' : '0%', outerRadius: "100%", paddingAngle: 0, dataKey: category, nameKey: index, isAnimationActive: true, onClick: onClickChartElement }), _jsx(Tooltip, { wrapperStyle: {
+                                : generateArrayFromColor(colors.slice(0, 2), data.length)), index, category), cx: "50%", cy: "50%", startAngle: 90, endAngle: -270, innerRadius: isDonut ? (showLegend ? '50%' : '70%') : '0%', outerRadius: showLegend ? '70%' : '100%', paddingAngle: 0, dataKey: category, nameKey: index, isAnimationActive: true, onClick: onClickChartElement, labelLine: false, label: showLegend
+                            ? (props) => renderCustomizedLabel({ ...props, theme })
+                            : undefined }), _jsx(Tooltip, { wrapperStyle: {
                             outline: 'none',
                         }, content: ({ active, payload }) => {
                             return (_jsx(DonutChartTooltip, { active: active, payload: payload, valueFormatter: valueFormatter, theme: theme, yAxisFields: yAxisFields }));

package/package.json

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