dp-widgets-framework 1.3.7 → 1.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +34 -27
- package/dist/index.js +34 -27
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -15139,7 +15139,7 @@ function BarChart({ orientation, title, data, options, className, units, content
|
|
|
15139
15139
|
}
|
|
15140
15140
|
|
|
15141
15141
|
Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
15142
|
-
function SeriesChart({ orientation, title, data, options, className, units, content }) {
|
|
15142
|
+
function SeriesChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
|
|
15143
15143
|
var _a, _b;
|
|
15144
15144
|
const formatValue = (value) => {
|
|
15145
15145
|
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
|
@@ -15226,12 +15226,16 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
|
|
|
15226
15226
|
},
|
|
15227
15227
|
scales: {
|
|
15228
15228
|
x: {
|
|
15229
|
+
title: {
|
|
15230
|
+
display: !!x_axis_title,
|
|
15231
|
+
text: x_axis_title,
|
|
15232
|
+
},
|
|
15229
15233
|
ticks: { autoSkip: false, maxRotation: 45, minRotation: 0 },
|
|
15230
15234
|
},
|
|
15231
15235
|
y: {
|
|
15232
15236
|
title: {
|
|
15233
15237
|
display: true,
|
|
15234
|
-
text: (data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : ""),
|
|
15238
|
+
text: y_axis_title || ((data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : "")),
|
|
15235
15239
|
},
|
|
15236
15240
|
beginAtZero: true,
|
|
15237
15241
|
ticks: {
|
|
@@ -16597,8 +16601,9 @@ var plugin$1 = {
|
|
|
16597
16601
|
};
|
|
16598
16602
|
|
|
16599
16603
|
Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
16600
|
-
function SeriesLineChart({ orientation, title, data, options, className, units, content }) {
|
|
16604
|
+
function SeriesLineChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
|
|
16601
16605
|
var _a, _b;
|
|
16606
|
+
console.log('x_axis_title==>', x_axis_title);
|
|
16602
16607
|
const formatValue = (value) => {
|
|
16603
16608
|
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
|
16604
16609
|
if (!isNaN(numValue)) {
|
|
@@ -16673,12 +16678,16 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
|
|
|
16673
16678
|
},
|
|
16674
16679
|
scales: {
|
|
16675
16680
|
x: {
|
|
16681
|
+
title: {
|
|
16682
|
+
display: !!x_axis_title,
|
|
16683
|
+
text: x_axis_title,
|
|
16684
|
+
},
|
|
16676
16685
|
ticks: { autoSkip: true, maxTicksLimit: 8, maxRotation: 45, minRotation: 0 },
|
|
16677
16686
|
},
|
|
16678
16687
|
y: {
|
|
16679
16688
|
title: {
|
|
16680
16689
|
display: true,
|
|
16681
|
-
text: (data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : ""),
|
|
16690
|
+
text: y_axis_title || ((data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : "")),
|
|
16682
16691
|
},
|
|
16683
16692
|
beginAtZero: true,
|
|
16684
16693
|
ticks: {
|
|
@@ -17643,7 +17652,6 @@ function DataGrid({ title, data, className }) {
|
|
|
17643
17652
|
var _a;
|
|
17644
17653
|
const { columns, rows, units, grouped = false, grouping } = data;
|
|
17645
17654
|
const [expandedGroups, setExpandedGroups] = useState(new Set(((_a = grouping === null || grouping === void 0 ? void 0 : grouping.sections) === null || _a === void 0 ? void 0 : _a.filter(s => s.expanded).map(s => s.group_value)) || []));
|
|
17646
|
-
console.log('units==>', units);
|
|
17647
17655
|
const toggleGroup = (groupValue) => {
|
|
17648
17656
|
const newExpanded = new Set(expandedGroups);
|
|
17649
17657
|
if (newExpanded.has(groupValue)) {
|
|
@@ -17658,14 +17666,14 @@ function DataGrid({ title, data, className }) {
|
|
|
17658
17666
|
if (value === null || value === undefined)
|
|
17659
17667
|
return "—";
|
|
17660
17668
|
const unit = units === null || units === void 0 ? void 0 : units[columnIndex];
|
|
17669
|
+
console.log('value==>', value, unit);
|
|
17661
17670
|
// Format the value with commas if it's a number or numeric string
|
|
17662
17671
|
let valueStr;
|
|
17663
17672
|
if (typeof value === 'number') {
|
|
17664
17673
|
valueStr = value.toLocaleString();
|
|
17665
17674
|
}
|
|
17666
17675
|
else {
|
|
17667
|
-
|
|
17668
|
-
valueStr = !isNaN(numValue) ? numValue.toLocaleString() : String(value);
|
|
17676
|
+
valueStr = String(value);
|
|
17669
17677
|
}
|
|
17670
17678
|
// If no unit or unit length > 3, return value only
|
|
17671
17679
|
if (!unit || unit.length > 3) {
|
|
@@ -17714,12 +17722,12 @@ function DataGrid({ title, data, className }) {
|
|
|
17714
17722
|
return jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "\u2014" });
|
|
17715
17723
|
})() })) }, columnIndex)))] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
|
|
17716
17724
|
? "bg-white"
|
|
17717
|
-
: "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
|
|
17725
|
+
: "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 whitespace-nowrap", children: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
|
|
17718
17726
|
}) })] }));
|
|
17719
17727
|
};
|
|
17720
17728
|
const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200", children: columns.map((column, index) => (jsxRuntimeExports.jsxs("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: [column, (units === null || units === void 0 ? void 0 : units[index]) ? ` (${units[index]})` : ''] }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
|
|
17721
17729
|
? "bg-white"
|
|
17722
|
-
: "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
|
|
17730
|
+
: "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 whitespace-nowrap", children: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
|
|
17723
17731
|
return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
|
|
17724
17732
|
color: "#0F172A"
|
|
17725
17733
|
}, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping && grouping.section_statistics ? (jsxRuntimeExports.jsxs("div", { className: "flex gap-6", children: [jsxRuntimeExports.jsxs("span", { children: [grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] }), jsxRuntimeExports.jsx("div", { className: "flex gap-4", children: (() => {
|
|
@@ -38625,12 +38633,14 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
|
|
|
38625
38633
|
return (jsxRuntimeExports.jsx(BarChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
|
|
38626
38634
|
}
|
|
38627
38635
|
function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
|
|
38628
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
38636
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
38629
38637
|
const hasCalledRef = useRef(false);
|
|
38630
38638
|
const labels = ((_b = (_a = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _c === void 0 ? void 0 : _c.series_bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
38631
|
-
const
|
|
38632
|
-
const
|
|
38633
|
-
const
|
|
38639
|
+
const x_axis_title = ((_f = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _f === void 0 ? void 0 : _f.x_axis_title) || ((_h = (_g = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _g === void 0 ? void 0 : _g.series_bar_chart_data) === null || _h === void 0 ? void 0 : _h.x_axis_title) || "";
|
|
38640
|
+
const y_axis_title = ((_j = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _j === void 0 ? void 0 : _j.y_axis_title) || ((_l = (_k = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _k === void 0 ? void 0 : _k.series_bar_chart_data) === null || _l === void 0 ? void 0 : _l.y_axis_title) || "";
|
|
38641
|
+
const series = ((_o = (_m = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.series) || ((_r = (_q = (_p = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _p === void 0 ? void 0 : _p.series_bar_chart_data) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.series) || [];
|
|
38642
|
+
const chartTitle = ((_s = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _s === void 0 ? void 0 : _s.title) || ((_u = (_t = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _t === void 0 ? void 0 : _t.series_bar_chart_data) === null || _u === void 0 ? void 0 : _u.title) || "";
|
|
38643
|
+
const units = ((_v = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _v === void 0 ? void 0 : _v.units) || ((_x = (_w = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _w === void 0 ? void 0 : _w.series_bar_chart_data) === null || _x === void 0 ? void 0 : _x.units) || "";
|
|
38634
38644
|
const isEmpty = labels.length === 0 || series.length === 0;
|
|
38635
38645
|
const handleRefresh = async () => {
|
|
38636
38646
|
if (query) {
|
|
@@ -38673,15 +38683,17 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
|
|
|
38673
38683
|
backgroundColor: (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.colors) || (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.color) || finalColors[index % finalColors.length],
|
|
38674
38684
|
})),
|
|
38675
38685
|
};
|
|
38676
|
-
return (jsxRuntimeExports.jsx(SeriesChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
|
|
38686
|
+
return (jsxRuntimeExports.jsx(SeriesChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content, x_axis_title: x_axis_title, y_axis_title: y_axis_title }));
|
|
38677
38687
|
}
|
|
38678
38688
|
function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, appendMessage, content, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
38679
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
38689
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
38680
38690
|
const hasCalledRef = useRef(false);
|
|
38681
38691
|
const labels = ((_b = (_a = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _c === void 0 ? void 0 : _c.series_bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
38682
38692
|
const series = ((_g = (_f = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.series) || ((_k = (_j = (_h = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _h === void 0 ? void 0 : _h.series_bar_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.series) || [];
|
|
38683
|
-
const
|
|
38684
|
-
const
|
|
38693
|
+
const x_axis_title = ((_l = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _l === void 0 ? void 0 : _l.x_axis_title) || ((_o = (_m = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _m === void 0 ? void 0 : _m.series_bar_chart_data) === null || _o === void 0 ? void 0 : _o.x_axis_title) || "";
|
|
38694
|
+
const y_axis_title = ((_p = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _p === void 0 ? void 0 : _p.y_axis_title) || ((_r = (_q = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _q === void 0 ? void 0 : _q.series_bar_chart_data) === null || _r === void 0 ? void 0 : _r.y_axis_title) || "";
|
|
38695
|
+
const chartTitle = ((_s = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _s === void 0 ? void 0 : _s.title) || ((_u = (_t = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _t === void 0 ? void 0 : _t.series_bar_chart_data) === null || _u === void 0 ? void 0 : _u.title) || "";
|
|
38696
|
+
const units = ((_v = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _v === void 0 ? void 0 : _v.units) || ((_x = (_w = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _w === void 0 ? void 0 : _w.series_bar_chart_data) === null || _x === void 0 ? void 0 : _x.units) || "";
|
|
38685
38697
|
const isEmpty = labels.length === 0 || series.length === 0;
|
|
38686
38698
|
const handleRefresh = async () => {
|
|
38687
38699
|
if (query) {
|
|
@@ -38731,7 +38743,7 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
|
|
|
38731
38743
|
tension: 0.1,
|
|
38732
38744
|
})),
|
|
38733
38745
|
};
|
|
38734
|
-
return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
|
|
38746
|
+
return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content, x_axis_title: x_axis_title, y_axis_title: y_axis_title }));
|
|
38735
38747
|
}
|
|
38736
38748
|
function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
|
|
38737
38749
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
|
|
@@ -39986,22 +39998,17 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
39986
39998
|
return true;
|
|
39987
39999
|
})
|
|
39988
40000
|
.map((widget) => {
|
|
39989
|
-
|
|
40001
|
+
widget.type === "text";
|
|
39990
40002
|
return {
|
|
39991
40003
|
i: widget.id,
|
|
39992
40004
|
x: widget.position_x,
|
|
39993
40005
|
y: widget.position_y,
|
|
39994
40006
|
w: widget.width,
|
|
39995
|
-
h:
|
|
39996
|
-
? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
|
|
39997
|
-
: widget.height,
|
|
40007
|
+
h: widget.height,
|
|
39998
40008
|
minW: 0,
|
|
39999
|
-
minH:
|
|
40000
|
-
maxH: isText ? widget.height : undefined,
|
|
40009
|
+
minH: 1,
|
|
40001
40010
|
isResizable: isEditing,
|
|
40002
|
-
resizeHandles:
|
|
40003
|
-
? ["w", "e"] // only horizontal
|
|
40004
|
-
: ["sw", "nw", "se", "ne"],
|
|
40011
|
+
resizeHandles: ["sw", "nw", "se", "ne"],
|
|
40005
40012
|
};
|
|
40006
40013
|
});
|
|
40007
40014
|
};
|
package/dist/index.js
CHANGED
|
@@ -15166,7 +15166,7 @@ function BarChart({ orientation, title, data, options, className, units, content
|
|
|
15166
15166
|
}
|
|
15167
15167
|
|
|
15168
15168
|
Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
15169
|
-
function SeriesChart({ orientation, title, data, options, className, units, content }) {
|
|
15169
|
+
function SeriesChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
|
|
15170
15170
|
var _a, _b;
|
|
15171
15171
|
const formatValue = (value) => {
|
|
15172
15172
|
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
|
@@ -15253,12 +15253,16 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
|
|
|
15253
15253
|
},
|
|
15254
15254
|
scales: {
|
|
15255
15255
|
x: {
|
|
15256
|
+
title: {
|
|
15257
|
+
display: !!x_axis_title,
|
|
15258
|
+
text: x_axis_title,
|
|
15259
|
+
},
|
|
15256
15260
|
ticks: { autoSkip: false, maxRotation: 45, minRotation: 0 },
|
|
15257
15261
|
},
|
|
15258
15262
|
y: {
|
|
15259
15263
|
title: {
|
|
15260
15264
|
display: true,
|
|
15261
|
-
text: (data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : ""),
|
|
15265
|
+
text: y_axis_title || ((data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : "")),
|
|
15262
15266
|
},
|
|
15263
15267
|
beginAtZero: true,
|
|
15264
15268
|
ticks: {
|
|
@@ -16624,8 +16628,9 @@ var plugin$1 = {
|
|
|
16624
16628
|
};
|
|
16625
16629
|
|
|
16626
16630
|
Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
16627
|
-
function SeriesLineChart({ orientation, title, data, options, className, units, content }) {
|
|
16631
|
+
function SeriesLineChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
|
|
16628
16632
|
var _a, _b;
|
|
16633
|
+
console.log('x_axis_title==>', x_axis_title);
|
|
16629
16634
|
const formatValue = (value) => {
|
|
16630
16635
|
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
|
16631
16636
|
if (!isNaN(numValue)) {
|
|
@@ -16700,12 +16705,16 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
|
|
|
16700
16705
|
},
|
|
16701
16706
|
scales: {
|
|
16702
16707
|
x: {
|
|
16708
|
+
title: {
|
|
16709
|
+
display: !!x_axis_title,
|
|
16710
|
+
text: x_axis_title,
|
|
16711
|
+
},
|
|
16703
16712
|
ticks: { autoSkip: true, maxTicksLimit: 8, maxRotation: 45, minRotation: 0 },
|
|
16704
16713
|
},
|
|
16705
16714
|
y: {
|
|
16706
16715
|
title: {
|
|
16707
16716
|
display: true,
|
|
16708
|
-
text: (data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : ""),
|
|
16717
|
+
text: y_axis_title || ((data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : "")),
|
|
16709
16718
|
},
|
|
16710
16719
|
beginAtZero: true,
|
|
16711
16720
|
ticks: {
|
|
@@ -17670,7 +17679,6 @@ function DataGrid({ title, data, className }) {
|
|
|
17670
17679
|
var _a;
|
|
17671
17680
|
const { columns, rows, units, grouped = false, grouping } = data;
|
|
17672
17681
|
const [expandedGroups, setExpandedGroups] = React.useState(new Set(((_a = grouping === null || grouping === void 0 ? void 0 : grouping.sections) === null || _a === void 0 ? void 0 : _a.filter(s => s.expanded).map(s => s.group_value)) || []));
|
|
17673
|
-
console.log('units==>', units);
|
|
17674
17682
|
const toggleGroup = (groupValue) => {
|
|
17675
17683
|
const newExpanded = new Set(expandedGroups);
|
|
17676
17684
|
if (newExpanded.has(groupValue)) {
|
|
@@ -17685,14 +17693,14 @@ function DataGrid({ title, data, className }) {
|
|
|
17685
17693
|
if (value === null || value === undefined)
|
|
17686
17694
|
return "—";
|
|
17687
17695
|
const unit = units === null || units === void 0 ? void 0 : units[columnIndex];
|
|
17696
|
+
console.log('value==>', value, unit);
|
|
17688
17697
|
// Format the value with commas if it's a number or numeric string
|
|
17689
17698
|
let valueStr;
|
|
17690
17699
|
if (typeof value === 'number') {
|
|
17691
17700
|
valueStr = value.toLocaleString();
|
|
17692
17701
|
}
|
|
17693
17702
|
else {
|
|
17694
|
-
|
|
17695
|
-
valueStr = !isNaN(numValue) ? numValue.toLocaleString() : String(value);
|
|
17703
|
+
valueStr = String(value);
|
|
17696
17704
|
}
|
|
17697
17705
|
// If no unit or unit length > 3, return value only
|
|
17698
17706
|
if (!unit || unit.length > 3) {
|
|
@@ -17741,12 +17749,12 @@ function DataGrid({ title, data, className }) {
|
|
|
17741
17749
|
return jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "\u2014" });
|
|
17742
17750
|
})() })) }, columnIndex)))] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
|
|
17743
17751
|
? "bg-white"
|
|
17744
|
-
: "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
|
|
17752
|
+
: "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 whitespace-nowrap", children: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
|
|
17745
17753
|
}) })] }));
|
|
17746
17754
|
};
|
|
17747
17755
|
const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200", children: columns.map((column, index) => (jsxRuntimeExports.jsxs("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: [column, (units === null || units === void 0 ? void 0 : units[index]) ? ` (${units[index]})` : ''] }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
|
|
17748
17756
|
? "bg-white"
|
|
17749
|
-
: "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
|
|
17757
|
+
: "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 whitespace-nowrap", children: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
|
|
17750
17758
|
return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
|
|
17751
17759
|
color: "#0F172A"
|
|
17752
17760
|
}, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping && grouping.section_statistics ? (jsxRuntimeExports.jsxs("div", { className: "flex gap-6", children: [jsxRuntimeExports.jsxs("span", { children: [grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] }), jsxRuntimeExports.jsx("div", { className: "flex gap-4", children: (() => {
|
|
@@ -38652,12 +38660,14 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
|
|
|
38652
38660
|
return (jsxRuntimeExports.jsx(BarChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
|
|
38653
38661
|
}
|
|
38654
38662
|
function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
|
|
38655
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
38663
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
38656
38664
|
const hasCalledRef = React.useRef(false);
|
|
38657
38665
|
const labels = ((_b = (_a = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _c === void 0 ? void 0 : _c.series_bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
38658
|
-
const
|
|
38659
|
-
const
|
|
38660
|
-
const
|
|
38666
|
+
const x_axis_title = ((_f = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _f === void 0 ? void 0 : _f.x_axis_title) || ((_h = (_g = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _g === void 0 ? void 0 : _g.series_bar_chart_data) === null || _h === void 0 ? void 0 : _h.x_axis_title) || "";
|
|
38667
|
+
const y_axis_title = ((_j = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _j === void 0 ? void 0 : _j.y_axis_title) || ((_l = (_k = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _k === void 0 ? void 0 : _k.series_bar_chart_data) === null || _l === void 0 ? void 0 : _l.y_axis_title) || "";
|
|
38668
|
+
const series = ((_o = (_m = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.series) || ((_r = (_q = (_p = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _p === void 0 ? void 0 : _p.series_bar_chart_data) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.series) || [];
|
|
38669
|
+
const chartTitle = ((_s = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _s === void 0 ? void 0 : _s.title) || ((_u = (_t = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _t === void 0 ? void 0 : _t.series_bar_chart_data) === null || _u === void 0 ? void 0 : _u.title) || "";
|
|
38670
|
+
const units = ((_v = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _v === void 0 ? void 0 : _v.units) || ((_x = (_w = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _w === void 0 ? void 0 : _w.series_bar_chart_data) === null || _x === void 0 ? void 0 : _x.units) || "";
|
|
38661
38671
|
const isEmpty = labels.length === 0 || series.length === 0;
|
|
38662
38672
|
const handleRefresh = async () => {
|
|
38663
38673
|
if (query) {
|
|
@@ -38700,15 +38710,17 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
|
|
|
38700
38710
|
backgroundColor: (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.colors) || (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.color) || finalColors[index % finalColors.length],
|
|
38701
38711
|
})),
|
|
38702
38712
|
};
|
|
38703
|
-
return (jsxRuntimeExports.jsx(SeriesChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
|
|
38713
|
+
return (jsxRuntimeExports.jsx(SeriesChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content, x_axis_title: x_axis_title, y_axis_title: y_axis_title }));
|
|
38704
38714
|
}
|
|
38705
38715
|
function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, appendMessage, content, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
38706
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
38716
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
38707
38717
|
const hasCalledRef = React.useRef(false);
|
|
38708
38718
|
const labels = ((_b = (_a = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _c === void 0 ? void 0 : _c.series_bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
38709
38719
|
const series = ((_g = (_f = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.series) || ((_k = (_j = (_h = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _h === void 0 ? void 0 : _h.series_bar_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.series) || [];
|
|
38710
|
-
const
|
|
38711
|
-
const
|
|
38720
|
+
const x_axis_title = ((_l = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _l === void 0 ? void 0 : _l.x_axis_title) || ((_o = (_m = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _m === void 0 ? void 0 : _m.series_bar_chart_data) === null || _o === void 0 ? void 0 : _o.x_axis_title) || "";
|
|
38721
|
+
const y_axis_title = ((_p = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _p === void 0 ? void 0 : _p.y_axis_title) || ((_r = (_q = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _q === void 0 ? void 0 : _q.series_bar_chart_data) === null || _r === void 0 ? void 0 : _r.y_axis_title) || "";
|
|
38722
|
+
const chartTitle = ((_s = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _s === void 0 ? void 0 : _s.title) || ((_u = (_t = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _t === void 0 ? void 0 : _t.series_bar_chart_data) === null || _u === void 0 ? void 0 : _u.title) || "";
|
|
38723
|
+
const units = ((_v = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _v === void 0 ? void 0 : _v.units) || ((_x = (_w = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _w === void 0 ? void 0 : _w.series_bar_chart_data) === null || _x === void 0 ? void 0 : _x.units) || "";
|
|
38712
38724
|
const isEmpty = labels.length === 0 || series.length === 0;
|
|
38713
38725
|
const handleRefresh = async () => {
|
|
38714
38726
|
if (query) {
|
|
@@ -38758,7 +38770,7 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
|
|
|
38758
38770
|
tension: 0.1,
|
|
38759
38771
|
})),
|
|
38760
38772
|
};
|
|
38761
|
-
return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
|
|
38773
|
+
return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content, x_axis_title: x_axis_title, y_axis_title: y_axis_title }));
|
|
38762
38774
|
}
|
|
38763
38775
|
function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
|
|
38764
38776
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
|
|
@@ -40013,22 +40025,17 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
40013
40025
|
return true;
|
|
40014
40026
|
})
|
|
40015
40027
|
.map((widget) => {
|
|
40016
|
-
|
|
40028
|
+
widget.type === "text";
|
|
40017
40029
|
return {
|
|
40018
40030
|
i: widget.id,
|
|
40019
40031
|
x: widget.position_x,
|
|
40020
40032
|
y: widget.position_y,
|
|
40021
40033
|
w: widget.width,
|
|
40022
|
-
h:
|
|
40023
|
-
? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
|
|
40024
|
-
: widget.height,
|
|
40034
|
+
h: widget.height,
|
|
40025
40035
|
minW: 0,
|
|
40026
|
-
minH:
|
|
40027
|
-
maxH: isText ? widget.height : undefined,
|
|
40036
|
+
minH: 1,
|
|
40028
40037
|
isResizable: isEditing,
|
|
40029
|
-
resizeHandles:
|
|
40030
|
-
? ["w", "e"] // only horizontal
|
|
40031
|
-
: ["sw", "nw", "se", "ne"],
|
|
40038
|
+
resizeHandles: ["sw", "nw", "se", "ne"],
|
|
40032
40039
|
};
|
|
40033
40040
|
});
|
|
40034
40041
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dp-widgets-framework",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.9",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org"
|
|
@@ -136,4 +136,4 @@
|
|
|
136
136
|
"tailwindcss": "^3.3.0",
|
|
137
137
|
"typescript": "^5"
|
|
138
138
|
}
|
|
139
|
-
}
|
|
139
|
+
}
|