npm - @solidxai/core-ui - Versions diffs - 0.1.9-beta.19 → 0.1.9-beta.20 - Mend

@solidxai/core-ui 0.1.9-beta.19 → 0.1.9-beta.20

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.

Files changed (168) hide show

package/dist/components/core/common/GroupingComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupingComponent.js","sourceRoot":"","sources":["../../../../src/components/core/common/GroupingComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport { GroupableField } from \"./SolidGlobalSearchElement\";\nimport { SolidAutocomplete } from \"../../shad-cn-ui/SolidAutocomplete\";\nimport { SolidSelect } from \"../../shad-cn-ui/SolidSelect\";\nimport { SolidButton } from \"../../shad-cn-ui/SolidButton\";\nimport { SolidIcon } from \"../../shad-cn-ui/SolidIcon\";\nimport { Plus } from \"lucide-react\";\n\nconst groupedDateOptions = [\n {\n label: \"Year\",\n items: [\n { label: \"Year (YYYY)\", value: \"YYYY\" }\n ]\n },\n {\n label: \"Month\",\n items: [\n { label: \"Month (MMM)\", value: \"MMM\" },\n { label: \"Year-Month (YYYY-MM)\", value: \"YYYY-MM\" }\n ]\n },\n {\n label: \"Day\",\n items: [\n { label: \"Full Date (YYYY-MM-DD)\", value: \"YYYY-MM-DD\" }\n ]\n }\n];\nconst aggregateOperators = [\n { label: \"Count\", value: \"count\" },\n { label: \"Sum\", value: \"sum\" },\n { label: \"Avg\", value: \"avg\" },\n { label: \"Min\", value: \"min\" },\n { label: \"Max\", value: \"max\" }\n];\n\nconst allowedGroupTypes = [\n \"shortText\",\n \"selectionStatic\",\n \"selectionDynamic\",\n \"computed\",\n \"int\",\n \"float\",\n \"boolean\",\n \"date\",\n \"datetime\",\n \"relation\"\n];\n\nconst numericTypes = [\"int\", \"float\"];\n\nexport type AggregationOperator =\n \| \"count\"\n \| \"sum\"\n \| \"avg\"\n \| \"min\"\n \| \"max\";\n\nexport interface AggregationRule {\n id: number;\n\n /*\n Aggregate operator\n /\n operator: AggregationOperator;\n\n /\n Field on which aggregation applies\n * Example:\n * \"id\"\n * \"amount\"\n * \"price\"\n /\n fieldName: string \| null;\n\n /\n If true:\n * - Cannot be edited\n * - Cannot be removed\n * Used for default: count-of-id\n /\n locked?: boolean;\n}\n\nexport type DateGroupingFormat =\n \| \"YYYY\"\n \| \"MMM\"\n \| \"YYYY-MM\"\n \| \"YYYY-MM-DD\";\n\nexport interface GroupingRule {\n id: number;\n\n /\n Actual field selected by user.\n * Example:\n * \"state\"\n * \"city\"\n * \"createdAt\"\n * \"author.name\" // many-to-one resolved key\n /\n fieldName: string \| null;\n\n /\n Only used when field type is date or datetime.\n * Null for non-date fields.\n /\n dateGrouping?: DateGroupingFormat \| null;\n}\n\nconst GroupingComponent = ({\n viewData,\n fields,\n groupingRules,\n setGroupingRules,\n aggregationRules,\n setAggregationRules,\n applyGrouping,\n closeDialog\n}: { viewData: any, fields: GroupableField[], groupingRules: GroupingRule[], setGroupingRules: any, aggregationRules: AggregationRule[], setAggregationRules: any, applyGrouping: any, closeDialog: any }) => {\n\n\n const [groupSearchValue, setGroupSearchValue] = React.useState<any>(null);\n const [aggSearchValue, setAggSearchValue] = React.useState<any>(null);\n\n const [filteredGroupingFields, setFilteredGroupingFields] = React.useState<GroupableField[]>([]);\n\n const searchGroupingFields = (event: any) => {\n const query = event.query.toLowerCase();\n const selectedFields = groupingRules.map(r => r.fieldName);\n\n const filtered = groupableFields.filter((field) =>\n field.displayName.toLowerCase().includes(query) && !selectedFields.includes(field.fieldName)\n );\n\n setFilteredGroupingFields(filtered);\n };\n\n const [filteredAggregationFields, setFilteredAggregationFields] = React.useState<GroupableField[]>([]);\n\n const searchAggregationFields = (event: any) => {\n const query = event.query.toLowerCase();\n\n const filtered = numericFields.filter((field) =>\n field.displayName.toLowerCase().includes(query)\n );\n setFilteredAggregationFields(query ? filtered : numericFields);\n };\n\n // -------------------------------\n // FILTER GROUPABLE FIELDS\n // -------------------------------\n const groupableFields: GroupableField[] = useMemo(() => {\n return fields.filter(f =>\n allowedGroupTypes.includes(f.type)\n );\n }, [fields]);\n\n const numericFields: GroupableField[] = useMemo(() => {\n return fields.filter((f: any) =>\n numericTypes.includes(f.type) \|\|\n (f.type === \"computed\" && f.computedFieldValueType === \"int\") \|\|\n (f.type === \"computed\" && f.computedFieldValueType === \"float\")\n );\n }, [fields]);\n\n const removeGroup = (id: any) => {\n setGroupingRules((prev: any) => prev.filter((r: any) => r.id !== id));\n };\n\n const updateGroup = (id: any, key: any, value: any) => {\n setGroupingRules((prev: any) =>\n prev.map((r: any) => r.id === id ? { ...r, [key]: value } : r)\n );\n };\n\n const removeAggregation = (id: any) => {\n setAggregationRules((prev: any) =>\n prev.filter((a: any) => a.id !== id \|\| a.locked)\n );\n };\n\n const updateAggregation = (id: any, key: any, value: any) => {\n setAggregationRules((prev: any) =>\n prev.map((a: any) => a.id === id ? { ...a, [key]: value } : a)\n );\n };\n\n const groupedDateFlatOptions = groupedDateOptions.flatMap((group) =>\n group.items.map((item) => ({\n label: `${group.label}: ${item.label}`,\n value: item.value,\n }))\n );\n\n const visibleGroupingRules = groupingRules.filter((rule) => rule.fieldName);\n const visibleAggregationRules = aggregationRules.filter((rule) => rule.fieldName);\n\n return (\n <div className=\"solid-grouping-builder\">\n <section className=\"solid-grouping-section-card\">\n <div className=\"solid-grouping-section-head\">\n <div>\n <p className=\"m-0 solid-filter-section-title\">Grouping Rules</p>\n <p className=\"m-0 solid-grouping-section-copy\">\n Add fields in the order you want the tree to grow. The first rule becomes the top level.\n </p>\n </div>\n </div>\n\n <div className=\"solid-grouping-search-row\">\n <SolidAutocomplete\n value={groupSearchValue}\n suggestions={filteredGroupingFields}\n completeMethod={searchGroupingFields}\n field=\"displayName\"\n placeholder=\"Search field to group by\"\n className=\"w-full solid-filter-compact-control\"\n dropdown\n onChange={(e) => setGroupSearchValue(e.value)}\n onSelect={(e) => {\n if (typeof e.value === \"object\" && e.value.fieldName) {\n const isDate = [\"date\", \"datetime\"].includes(e.value.type);\n setGroupingRules((prev: any) => [\n ...prev,\n { id: Date.now(), fieldName: e.value.fieldName, dateGrouping: isDate ? \"YYYY-MM-DD\" : null }\n ]);\n }\n setGroupSearchValue(null);\n }}\n />\n </div>\n\n <div className=\"solid-grouping-list\">\n {visibleGroupingRules.length === 0 && (\n <div className=\"solid-grouping-empty-panel\">\n <Plus size={14} />\n <span>No grouping rules applied yet.</span>\n </div>\n )}\n {visibleGroupingRules.map((rule, index) => {\n const fieldMeta = fields.find((f) => f.fieldName === rule.fieldName);\n if (!fieldMeta) return null;\n\n const isDate = [\"date\", \"datetime\"].includes(fieldMeta.type);\n\n return (\n <div key={rule.id} className=\"solid-grouping-rule-row\">\n <div className=\"solid-grouping-order-badge\">{index + 1}</div>\n <div className=\"solid-grouping-rule-main\">\n <div className=\"solid-grouping-rule-title-row\">\n <div className=\"solid-grouping-rule-title\">{fieldMeta.displayName}</div>\n <div className=\"solid-grouping-rule-caption\">\n {index === 0 ? \"Top-level grouping\" : `Then group within level ${index}`}\n </div>\n </div>\n {isDate ? (\n <div className=\"solid-grouping-rule-controls\">\n <span className=\"solid-grouping-inline-label\">Group by</span>\n <SolidSelect\n value={rule.dateGrouping \|\| \"YYYY-MM-DD\"}\n options={groupedDateFlatOptions}\n optionLabel=\"label\"\n optionValue=\"value\"\n placeholder=\"Format\"\n className=\"solid-grouping-row-select\"\n onChange={(e) => updateGroup(rule.id, \"dateGrouping\", e.value)}\n />\n </div>\n ) : (\n <div className=\"solid-grouping-rule-summary\">Groups by exact value of this field.</div>\n )}\n </div>\n <button type=\"button\" className=\"solid-grouping-row-remove\" onClick={() => removeGroup(rule.id)}>\n <SolidIcon name=\"si-times\" />\n </button>\n </div>\n );\n })}\n </div>\n </section>\n\n <section className=\"solid-grouping-section-card\">\n <div className=\"solid-grouping-section-head\">\n <div>\n <p className=\"m-0 solid-filter-section-title\">Aggregations</p>\n <p className=\"m-0 solid-grouping-section-copy\">\n Add rollups to show counts or numeric summaries for each group.\n </p>\n </div>\n </div>\n\n <div className=\"solid-grouping-search-row\">\n <SolidAutocomplete\n value={aggSearchValue}\n suggestions={filteredAggregationFields}\n completeMethod={searchAggregationFields}\n field=\"displayName\"\n placeholder=\"Search field to aggregate\"\n className=\"w-full solid-filter-compact-control\"\n dropdown\n onChange={(e) => setAggSearchValue(e.value)}\n onSelect={(e) => {\n if (typeof e.value === \"object\" && e.value.fieldName) {\n setAggregationRules((prev: any) => [\n ...prev,\n { id: Date.now(), operator: \"count\", fieldName: e.value.fieldName }\n ]);\n }\n setAggSearchValue(null);\n }}\n />\n </div>\n\n <div className=\"solid-grouping-list solid-grouping-list-compact\">\n {visibleAggregationRules.length === 0 && (\n <div className=\"solid-grouping-empty-panel\">\n <Plus size={14} />\n <span>No aggregations applied yet.</span>\n </div>\n )}\n {visibleAggregationRules.map((rule) => {\n const fieldMeta = fields.find((f) => f.fieldName === rule.fieldName);\n if (!fieldMeta) return null;\n\n return (\n <div key={rule.id} className=\"solid-aggregation-row\">\n <div className=\"solid-aggregation-row-main\">\n <div className=\"solid-aggregation-row-title\">{fieldMeta.displayName}</div>\n <div className=\"solid-aggregation-row-caption\">\n {rule.locked ? \"Default aggregation\" : \"Applied to each group\"}\n </div>\n </div>\n\n <div className=\"solid-aggregation-row-controls\">\n <span className=\"solid-grouping-inline-label\">Operation</span>\n <SolidSelect\n value={rule.operator}\n options={aggregateOperators}\n disabled={rule.locked}\n placeholder=\"Op\"\n className=\"solid-grouping-row-select solid-aggregation-row-select\"\n onChange={(e) => updateAggregation(rule.id, \"operator\", e.value)}\n />\n </div>\n {!rule.locked ? (\n <button type=\"button\" className=\"solid-grouping-row-remove solid-aggregation-row-remove\" onClick={() => removeAggregation(rule.id)}>\n <SolidIcon name=\"si-times\" />\n </button>\n ) : (\n <span className=\"solid-aggregation-row-remove-spacer\" aria-hidden=\"true\" />\n )}\n </div>\n );\n })}\n </div>\n </section>\n\n {/ FOOTER */}\n <div className=\"solid-grouping-footer\">\n <SolidButton size=\"sm\" variant=\"outline\" onClick={closeDialog}>\n <SolidIcon name=\"si-times\" />\n Cancel\n </SolidButton>\n <SolidButton size=\"sm\" variant=\"primary\" onClick={() => applyGrouping(groupingRules, aggregationRules)}>\n <SolidIcon name=\"si-check\" />\n Apply\n </SolidButton>\n </div>\n </div>\n );\n};\n\nexport default GroupingComponent;\n"]}
1	+ {"version":3,"file":"GroupingComponent.js","sourceRoot":"","sources":["../../../../src/components/core/common/GroupingComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,IAAM,kBAAkB,GAAG;IACzB;QACE,KAAK,EAAE,MAAM;QACb,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE;SACxC;KACF;IACD;QACE,KAAK,EAAE,OAAO;QACd,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE;YACtC,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,SAAS,EAAE;SACpD;KACF;IACD;QACE,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,wBAAwB,EAAE,KAAK,EAAE,YAAY,EAAE;SACzD;KACF;CACF,CAAC;AACF,IAAM,kBAAkB,GAAG;IACzB,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;CAC/B,CAAC;AAEF,IAAM,iBAAiB,GAAG;IACxB,WAAW;IACX,iBAAiB;IACjB,kBAAkB;IAClB,UAAU;IACV,KAAK;IACL,OAAO;IACP,SAAS;IACT,MAAM;IACN,UAAU;IACV,UAAU;CACX,CAAC;AAEF,IAAM,YAAY,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AA6DtC,IAAM,iBAAiB,GAAG,UAAC,EAS8K;QARvM,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,WAAW,iBAAA;IAIL,IAAA,KAA0C,KAAK,CAAC,QAAQ,CAAM,IAAI,CAAC,EAAlE,gBAAgB,QAAA,EAAE,mBAAmB,QAA6B,CAAC;IACpE,IAAA,KAAsC,KAAK,CAAC,QAAQ,CAAM,IAAI,CAAC,EAA9D,cAAc,QAAA,EAAE,iBAAiB,QAA6B,CAAC;IAEhE,IAAA,KAAsD,KAAK,CAAC,QAAQ,CAAmB,EAAE,CAAC,EAAzF,sBAAsB,QAAA,EAAE,yBAAyB,QAAwC,CAAC;IAEjG,IAAM,oBAAoB,GAAG,UAAC,KAAU;QACtC,IAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QACxC,IAAM,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,SAAS,EAAX,CAAW,CAAC,CAAC;QAE3D,IAAM,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC,UAAC,KAAK;YAC5C,OAAA,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC;QAA5F,CAA4F,CAC7F,CAAC;QAEF,yBAAyB,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,CAAC;IAEI,IAAA,KAA4D,KAAK,CAAC,QAAQ,CAAmB,EAAE,CAAC,EAA/F,yBAAyB,QAAA,EAAE,4BAA4B,QAAwC,CAAC;IAEvG,IAAM,uBAAuB,GAAG,UAAC,KAAU;QACzC,IAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAExC,IAAM,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,UAAC,KAAK;YAC1C,OAAA,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;QAA/C,CAA+C,CAChD,CAAC;QACF,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IACjE,CAAC,CAAC;IAEF,kCAAkC;IAClC,0BAA0B;IAC1B,kCAAkC;IAClC,IAAM,eAAe,GAAqB,OAAO,CAAC;QAChD,OAAO,MAAM,CAAC,MAAM,CAAC,UAAA,CAAC;YACpB,OAAA,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;QAAlC,CAAkC,CACnC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,IAAM,aAAa,GAAqB,OAAO,CAAC;QAC9C,OAAO,MAAM,CAAC,MAAM,CAAC,UAAC,CAAM;YAC1B,OAAA,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;gBAC7B,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,CAAC,sBAAsB,KAAK,KAAK,CAAC;gBAC7D,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,CAAC,sBAAsB,KAAK,OAAO,CAAC;QAF/D,CAE+D,CAChE,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,IAAM,WAAW,GAAG,UAAC,EAAO;QAC1B,gBAAgB,CAAC,UAAC,IAAS,IAAK,OAAA,IAAI,CAAC,MAAM,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,EAAE,KAAK,EAAE,EAAX,CAAW,CAAC,EAApC,CAAoC,CAAC,CAAC;IACxE,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,EAAO,EAAE,GAAQ,EAAE,KAAU;QAChD,gBAAgB,CAAC,UAAC,IAAS;YACzB,OAAA,IAAI,CAAC,GAAG,CAAC,UAAC,CAAM;;gBAAK,OAAA,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,uBAAM,CAAC,gBAAG,GAAG,IAAG,KAAK,OAAG,CAAC,CAAC,CAAC;YAAxC,CAAwC,CAAC;QAA9D,CAA8D,CAC/D,CAAC;IACJ,CAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,EAAO;QAChC,mBAAmB,CAAC,UAAC,IAAS;YAC5B,OAAA,IAAI,CAAC,MAAM,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,MAAM,EAAvB,CAAuB,CAAC;QAAhD,CAAgD,CACjD,CAAC;IACJ,CAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,EAAO,EAAE,GAAQ,EAAE,KAAU;QACtD,mBAAmB,CAAC,UAAC,IAAS;YAC5B,OAAA,IAAI,CAAC,GAAG,CAAC,UAAC,CAAM;;gBAAK,OAAA,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,uBAAM,CAAC,gBAAG,GAAG,IAAG,KAAK,OAAG,CAAC,CAAC,CAAC;YAAxC,CAAwC,CAAC;QAA9D,CAA8D,CAC/D,CAAC;IACJ,CAAC,CAAC;IAEF,IAAM,sBAAsB,GAAG,kBAAkB,CAAC,OAAO,CAAC,UAAC,KAAK;QAC9D,OAAA,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC;YACzB,KAAK,EAAE,UAAG,KAAK,CAAC,KAAK,eAAK,IAAI,CAAC,KAAK,CAAE;YACtC,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,EAHwB,CAGxB,CAAC;IAHH,CAGG,CACJ,CAAC;IAEF,IAAM,oBAAoB,GAAG,aAAa,CAAC,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,SAAS,EAAd,CAAc,CAAC,CAAC;IAC5E,IAAM,uBAAuB,GAAG,gBAAgB,CAAC,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,SAAS,EAAd,CAAc,CAAC,CAAC;IAElF,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,mBAAS,SAAS,EAAC,6BAA6B,aAC9C,cAAK,SAAS,EAAC,6BAA6B,YAC1C,0BACE,YAAG,SAAS,EAAC,gCAAgC,+BAAmB,EAChE,YAAG,SAAS,EAAC,iCAAiC,yGAE1C,IACA,GACF,EAEN,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,iBAAiB,IAChB,KAAK,EAAE,gBAAgB,EACvB,WAAW,EAAE,sBAAsB,EACnC,cAAc,EAAE,oBAAoB,EACpC,KAAK,EAAC,aAAa,EACnB,WAAW,EAAC,0BAA0B,EACtC,SAAS,EAAC,qCAAqC,EAC/C,QAAQ,QACR,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,EAA5B,CAA4B,EAC7C,QAAQ,EAAE,UAAC,CAAC;gCACV,IAAI,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE;oCACpD,IAAM,QAAM,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oCAC3D,gBAAgB,CAAC,UAAC,IAAS,IAAK,uCAC3B,IAAI;wCACP,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,QAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE;+CAF9D,CAG/B,CAAC,CAAC;iCACJ;gCACD,mBAAmB,CAAC,IAAI,CAAC,CAAC;4BAC5B,CAAC,GACD,GACE,EAEN,eAAK,SAAS,EAAC,qBAAqB,aACjC,oBAAoB,CAAC,MAAM,KAAK,CAAC,IAAI,CACpC,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,EAClB,4DAA2C,IACvC,CACP,EACA,oBAAoB,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;gCACpC,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,EAA9B,CAA8B,CAAC,CAAC;gCACrE,IAAI,CAAC,SAAS;oCAAE,OAAO,IAAI,CAAC;gCAE5B,IAAM,MAAM,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gCAE7D,OAAO,CACL,eAAmB,SAAS,EAAC,yBAAyB,aACpD,cAAK,SAAS,EAAC,4BAA4B,YAAE,KAAK,GAAG,CAAC,GAAO,EAC7D,eAAK,SAAS,EAAC,0BAA0B,aACvC,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,2BAA2B,YAAE,SAAS,CAAC,WAAW,GAAO,EACxE,cAAK,SAAS,EAAC,6BAA6B,YACzC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,kCAA2B,KAAK,CAAE,GACpE,IACF,EACL,MAAM,CAAC,CAAC,CAAC,CACR,eAAK,SAAS,EAAC,8BAA8B,aAC3C,eAAM,SAAS,EAAC,6BAA6B,yBAAgB,EAC7D,KAAC,WAAW,IACV,KAAK,EAAE,IAAI,CAAC,YAAY,IAAI,YAAY,EACxC,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,QAAQ,EACpB,SAAS,EAAC,2BAA2B,EACrC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,EAA7C,CAA6C,EAC9D,MAAM,EAAE,KAAK,GACb,IACE,CACP,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,6BAA6B,qDAA2C,CACxF,IACG,EACN,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,2BAA2B,EAAC,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAApB,CAAoB,YAC7F,KAAC,SAAS,IAAC,IAAI,EAAC,UAAU,GAAG,GACtB,KA7BD,IAAI,CAAC,EAAE,CA8BX,CACP,CAAC;4BACJ,CAAC,CAAC,IACE,IACE,EAEV,mBAAS,SAAS,EAAC,6BAA6B,aAC9C,cAAK,SAAS,EAAC,6BAA6B,YAC1C,0BACE,YAAG,SAAS,EAAC,gCAAgC,6BAAiB,EAC9D,YAAG,SAAS,EAAC,iCAAiC,gFAE1C,IACA,GACF,EAEN,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,iBAAiB,IAChB,KAAK,EAAE,cAAc,EACrB,WAAW,EAAE,yBAAyB,EACtC,cAAc,EAAE,uBAAuB,EACvC,KAAK,EAAC,aAAa,EACnB,WAAW,EAAC,2BAA2B,EACvC,SAAS,EAAC,qCAAqC,EAC/C,QAAQ,QACR,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,EAA1B,CAA0B,EAC3C,QAAQ,EAAE,UAAC,CAAC;gCACV,IAAI,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE;oCACpD,mBAAmB,CAAC,UAAC,IAAS,IAAK,uCAC9B,IAAI;wCACP,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE;+CAFlC,CAGlC,CAAC,CAAC;iCACJ;gCACD,iBAAiB,CAAC,IAAI,CAAC,CAAC;4BAC1B,CAAC,GACD,GACE,EAEN,eAAK,SAAS,EAAC,iDAAiD,aAC7D,uBAAuB,CAAC,MAAM,KAAK,CAAC,IAAI,CACvC,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,EAClB,0DAAyC,IACrC,CACP,EACA,uBAAuB,CAAC,GAAG,CAAC,UAAC,IAAI;gCAChC,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,EAA9B,CAA8B,CAAC,CAAC;gCACrE,IAAI,CAAC,SAAS;oCAAE,OAAO,IAAI,CAAC;gCAE5B,OAAO,CACL,eAAmB,SAAS,EAAC,uBAAuB,aAClD,eAAK,SAAS,EAAC,4BAA4B,aACzC,cAAK,SAAS,EAAC,6BAA6B,YAAE,SAAS,CAAC,WAAW,GAAO,EAC1E,cAAK,SAAS,EAAC,+BAA+B,YAC3C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,GAC1D,IACF,EAEN,eAAK,SAAS,EAAC,gCAAgC,aAC7C,eAAM,SAAS,EAAC,6BAA6B,0BAAiB,EAC9D,KAAC,WAAW,IACV,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,EAAE,IAAI,CAAC,MAAM,EACrB,WAAW,EAAC,IAAI,EAChB,SAAS,EAAC,wDAAwD,EAClE,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,CAAC,EAA/C,CAA+C,EAChE,MAAM,EAAE,KAAK,GACb,IACE,EACL,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACd,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,wDAAwD,EAAC,OAAO,EAAE,cAAM,OAAA,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,EAA1B,CAA0B,YAChI,KAAC,SAAS,IAAC,IAAI,EAAC,UAAU,GAAG,GACtB,CACV,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,qCAAqC,iBAAa,MAAM,GAAG,CAC5E,KA1BO,IAAI,CAAC,EAAE,CA2BX,CACP,CAAC;4BACJ,CAAC,CAAC,IACE,IACE,EAGV,eAAK,SAAS,EAAC,uBAAuB,aACpC,MAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,aAC3D,KAAC,SAAS,IAAC,IAAI,EAAC,UAAU,GAAG,cAEjB,EACd,MAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAA9C,CAA8C,aACpG,KAAC,SAAS,IAAC,IAAI,EAAC,UAAU,GAAG,aAEjB,IACV,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import React, { useMemo } from \"react\";\nimport { GroupableField } from \"./SolidGlobalSearchElement\";\nimport { SolidAutocomplete } from \"../../shad-cn-ui/SolidAutocomplete\";\nimport { SolidSelect } from \"../../shad-cn-ui/SolidSelect\";\nimport { SolidButton } from \"../../shad-cn-ui/SolidButton\";\nimport { SolidIcon } from \"../../shad-cn-ui/SolidIcon\";\nimport { Plus } from \"lucide-react\";\n\nconst groupedDateOptions = [\n {\n label: \"Year\",\n items: [\n { label: \"Year (YYYY)\", value: \"YYYY\" }\n ]\n },\n {\n label: \"Month\",\n items: [\n { label: \"Month (MMM)\", value: \"MMM\" },\n { label: \"Year-Month (YYYY-MM)\", value: \"YYYY-MM\" }\n ]\n },\n {\n label: \"Day\",\n items: [\n { label: \"Full Date (YYYY-MM-DD)\", value: \"YYYY-MM-DD\" }\n ]\n }\n];\nconst aggregateOperators = [\n { label: \"Count\", value: \"count\" },\n { label: \"Sum\", value: \"sum\" },\n { label: \"Avg\", value: \"avg\" },\n { label: \"Min\", value: \"min\" },\n { label: \"Max\", value: \"max\" }\n];\n\nconst allowedGroupTypes = [\n \"shortText\",\n \"selectionStatic\",\n \"selectionDynamic\",\n \"computed\",\n \"int\",\n \"float\",\n \"boolean\",\n \"date\",\n \"datetime\",\n \"relation\"\n];\n\nconst numericTypes = [\"int\", \"float\"];\n\nexport type AggregationOperator =\n \| \"count\"\n \| \"sum\"\n \| \"avg\"\n \| \"min\"\n \| \"max\";\n\nexport interface AggregationRule {\n id: number;\n\n /*\n Aggregate operator\n /\n operator: AggregationOperator;\n\n /\n Field on which aggregation applies\n * Example:\n * \"id\"\n * \"amount\"\n * \"price\"\n /\n fieldName: string \| null;\n\n /\n If true:\n * - Cannot be edited\n * - Cannot be removed\n * Used for default: count-of-id\n /\n locked?: boolean;\n}\n\nexport type DateGroupingFormat =\n \| \"YYYY\"\n \| \"MMM\"\n \| \"YYYY-MM\"\n \| \"YYYY-MM-DD\";\n\nexport interface GroupingRule {\n id: number;\n\n /\n Actual field selected by user.\n * Example:\n * \"state\"\n * \"city\"\n * \"createdAt\"\n * \"author.name\" // many-to-one resolved key\n /\n fieldName: string \| null;\n\n /\n Only used when field type is date or datetime.\n * Null for non-date fields.\n /\n dateGrouping?: DateGroupingFormat \| null;\n}\n\nconst GroupingComponent = ({\n viewData,\n fields,\n groupingRules,\n setGroupingRules,\n aggregationRules,\n setAggregationRules,\n applyGrouping,\n closeDialog\n}: { viewData: any, fields: GroupableField[], groupingRules: GroupingRule[], setGroupingRules: any, aggregationRules: AggregationRule[], setAggregationRules: any, applyGrouping: any, closeDialog: any }) => {\n\n\n const [groupSearchValue, setGroupSearchValue] = React.useState<any>(null);\n const [aggSearchValue, setAggSearchValue] = React.useState<any>(null);\n\n const [filteredGroupingFields, setFilteredGroupingFields] = React.useState<GroupableField[]>([]);\n\n const searchGroupingFields = (event: any) => {\n const query = event.query.toLowerCase();\n const selectedFields = groupingRules.map(r => r.fieldName);\n\n const filtered = groupableFields.filter((field) =>\n field.displayName.toLowerCase().includes(query) && !selectedFields.includes(field.fieldName)\n );\n\n setFilteredGroupingFields(filtered);\n };\n\n const [filteredAggregationFields, setFilteredAggregationFields] = React.useState<GroupableField[]>([]);\n\n const searchAggregationFields = (event: any) => {\n const query = event.query.toLowerCase();\n\n const filtered = numericFields.filter((field) =>\n field.displayName.toLowerCase().includes(query)\n );\n setFilteredAggregationFields(query ? filtered : numericFields);\n };\n\n // -------------------------------\n // FILTER GROUPABLE FIELDS\n // -------------------------------\n const groupableFields: GroupableField[] = useMemo(() => {\n return fields.filter(f =>\n allowedGroupTypes.includes(f.type)\n );\n }, [fields]);\n\n const numericFields: GroupableField[] = useMemo(() => {\n return fields.filter((f: any) =>\n numericTypes.includes(f.type) \|\|\n (f.type === \"computed\" && f.computedFieldValueType === \"int\") \|\|\n (f.type === \"computed\" && f.computedFieldValueType === \"float\")\n );\n }, [fields]);\n\n const removeGroup = (id: any) => {\n setGroupingRules((prev: any) => prev.filter((r: any) => r.id !== id));\n };\n\n const updateGroup = (id: any, key: any, value: any) => {\n setGroupingRules((prev: any) =>\n prev.map((r: any) => r.id === id ? { ...r, [key]: value } : r)\n );\n };\n\n const removeAggregation = (id: any) => {\n setAggregationRules((prev: any) =>\n prev.filter((a: any) => a.id !== id \|\| a.locked)\n );\n };\n\n const updateAggregation = (id: any, key: any, value: any) => {\n setAggregationRules((prev: any) =>\n prev.map((a: any) => a.id === id ? { ...a, [key]: value } : a)\n );\n };\n\n const groupedDateFlatOptions = groupedDateOptions.flatMap((group) =>\n group.items.map((item) => ({\n label: `${group.label}: ${item.label}`,\n value: item.value,\n }))\n );\n\n const visibleGroupingRules = groupingRules.filter((rule) => rule.fieldName);\n const visibleAggregationRules = aggregationRules.filter((rule) => rule.fieldName);\n\n return (\n <div className=\"solid-grouping-builder\">\n <section className=\"solid-grouping-section-card\">\n <div className=\"solid-grouping-section-head\">\n <div>\n <p className=\"m-0 solid-filter-section-title\">Grouping Rules</p>\n <p className=\"m-0 solid-grouping-section-copy\">\n Add fields in the order you want the tree to grow. The first rule becomes the top level.\n </p>\n </div>\n </div>\n\n <div className=\"solid-grouping-search-row\">\n <SolidAutocomplete\n value={groupSearchValue}\n suggestions={filteredGroupingFields}\n completeMethod={searchGroupingFields}\n field=\"displayName\"\n placeholder=\"Search field to group by\"\n className=\"w-full solid-filter-compact-control\"\n dropdown\n onChange={(e) => setGroupSearchValue(e.value)}\n onSelect={(e) => {\n if (typeof e.value === \"object\" && e.value.fieldName) {\n const isDate = [\"date\", \"datetime\"].includes(e.value.type);\n setGroupingRules((prev: any) => [\n ...prev,\n { id: Date.now(), fieldName: e.value.fieldName, dateGrouping: isDate ? \"YYYY-MM-DD\" : null }\n ]);\n }\n setGroupSearchValue(null);\n }}\n />\n </div>\n\n <div className=\"solid-grouping-list\">\n {visibleGroupingRules.length === 0 && (\n <div className=\"solid-grouping-empty-panel\">\n <Plus size={14} />\n <span>No grouping rules applied yet.</span>\n </div>\n )}\n {visibleGroupingRules.map((rule, index) => {\n const fieldMeta = fields.find((f) => f.fieldName === rule.fieldName);\n if (!fieldMeta) return null;\n\n const isDate = [\"date\", \"datetime\"].includes(fieldMeta.type);\n\n return (\n <div key={rule.id} className=\"solid-grouping-rule-row\">\n <div className=\"solid-grouping-order-badge\">{index + 1}</div>\n <div className=\"solid-grouping-rule-main\">\n <div className=\"solid-grouping-rule-title-row\">\n <div className=\"solid-grouping-rule-title\">{fieldMeta.displayName}</div>\n <div className=\"solid-grouping-rule-caption\">\n {index === 0 ? \"Top-level grouping\" : `Then group within level ${index}`}\n </div>\n </div>\n {isDate ? (\n <div className=\"solid-grouping-rule-controls\">\n <span className=\"solid-grouping-inline-label\">Group by</span>\n <SolidSelect\n value={rule.dateGrouping \|\| \"YYYY-MM-DD\"}\n options={groupedDateFlatOptions}\n optionLabel=\"label\"\n optionValue=\"value\"\n placeholder=\"Format\"\n className=\"solid-grouping-row-select\"\n onChange={(e) => updateGroup(rule.id, \"dateGrouping\", e.value)}\n native={false}\n />\n </div>\n ) : (\n <div className=\"solid-grouping-rule-summary\">Groups by exact value of this field.</div>\n )}\n </div>\n <button type=\"button\" className=\"solid-grouping-row-remove\" onClick={() => removeGroup(rule.id)}>\n <SolidIcon name=\"si-times\" />\n </button>\n </div>\n );\n })}\n </div>\n </section>\n\n <section className=\"solid-grouping-section-card\">\n <div className=\"solid-grouping-section-head\">\n <div>\n <p className=\"m-0 solid-filter-section-title\">Aggregations</p>\n <p className=\"m-0 solid-grouping-section-copy\">\n Add rollups to show counts or numeric summaries for each group.\n </p>\n </div>\n </div>\n\n <div className=\"solid-grouping-search-row\">\n <SolidAutocomplete\n value={aggSearchValue}\n suggestions={filteredAggregationFields}\n completeMethod={searchAggregationFields}\n field=\"displayName\"\n placeholder=\"Search field to aggregate\"\n className=\"w-full solid-filter-compact-control\"\n dropdown\n onChange={(e) => setAggSearchValue(e.value)}\n onSelect={(e) => {\n if (typeof e.value === \"object\" && e.value.fieldName) {\n setAggregationRules((prev: any) => [\n ...prev,\n { id: Date.now(), operator: \"count\", fieldName: e.value.fieldName }\n ]);\n }\n setAggSearchValue(null);\n }}\n />\n </div>\n\n <div className=\"solid-grouping-list solid-grouping-list-compact\">\n {visibleAggregationRules.length === 0 && (\n <div className=\"solid-grouping-empty-panel\">\n <Plus size={14} />\n <span>No aggregations applied yet.</span>\n </div>\n )}\n {visibleAggregationRules.map((rule) => {\n const fieldMeta = fields.find((f) => f.fieldName === rule.fieldName);\n if (!fieldMeta) return null;\n\n return (\n <div key={rule.id} className=\"solid-aggregation-row\">\n <div className=\"solid-aggregation-row-main\">\n <div className=\"solid-aggregation-row-title\">{fieldMeta.displayName}</div>\n <div className=\"solid-aggregation-row-caption\">\n {rule.locked ? \"Default aggregation\" : \"Applied to each group\"}\n </div>\n </div>\n\n <div className=\"solid-aggregation-row-controls\">\n <span className=\"solid-grouping-inline-label\">Operation</span>\n <SolidSelect\n value={rule.operator}\n options={aggregateOperators}\n disabled={rule.locked}\n placeholder=\"Op\"\n className=\"solid-grouping-row-select solid-aggregation-row-select\"\n onChange={(e) => updateAggregation(rule.id, \"operator\", e.value)}\n native={false}\n />\n </div>\n {!rule.locked ? (\n <button type=\"button\" className=\"solid-grouping-row-remove solid-aggregation-row-remove\" onClick={() => removeAggregation(rule.id)}>\n <SolidIcon name=\"si-times\" />\n </button>\n ) : (\n <span className=\"solid-aggregation-row-remove-spacer\" aria-hidden=\"true\" />\n )}\n </div>\n );\n })}\n </div>\n </section>\n\n {/ FOOTER */}\n <div className=\"solid-grouping-footer\">\n <SolidButton size=\"sm\" variant=\"outline\" onClick={closeDialog}>\n <SolidIcon name=\"si-times\" />\n Cancel\n </SolidButton>\n <SolidButton size=\"sm\" variant=\"primary\" onClick={() => applyGrouping(groupingRules, aggregationRules)}>\n <SolidIcon name=\"si-check\" />\n Apply\n </SolidButton>\n </div>\n </div>\n );\n};\n\nexport default GroupingComponent;\n"]}

package/dist/components/core/common/GroupingComponent.tsx CHANGED Viewed

@@ -266,6 +266,7 @@ const GroupingComponent = ({
                         placeholder="Format"
                         className="solid-grouping-row-select"
                         onChange={(e) => updateGroup(rule.id, "dateGrouping", e.value)}
+                        native={false}
                       />
                     </div>
                   ) : (
@@ -342,6 +343,7 @@ const GroupingComponent = ({
                     placeholder="Op"
                     className="solid-grouping-row-select solid-aggregation-row-select"
                     onChange={(e) => updateAggregation(rule.id, "operator", e.value)}
+                    native={false}
                   />
                 </div>
                 {!rule.locked ? (

package/dist/components/core/dashboard/mappers/echartsOptionMapper.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"echartsOptionMapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/mappers/echartsOptionMapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAY7C,eAAO,MAAM,gBAAgB,eAAgB,GAAG,KAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,SAM3E,CAAC;AAYF,eAAO,MAAM,eAAe,eAAgB,GAAG,eAAe,GAAG,KAAG,~~aA+CnE~~,CAAC"}
1	+ {"version":3,"file":"echartsOptionMapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/mappers/echartsOptionMapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAY7C,eAAO,MAAM,gBAAgB,eAAgB,GAAG,KAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,SAM3E,CAAC;AAYF,eAAO,MAAM,eAAe,eAAgB,GAAG,eAAe,GAAG,KAAG,aAkDnE,CAAC"}

package/dist/components/core/dashboard/mappers/echartsOptionMapper.js CHANGED Viewed

@@ -31,7 +31,7 @@ export var toEChartsOption = function (definition, runtimeData) {
         var items = Array.isArray(runtimeData === null || runtimeData === void 0 ? void 0 : runtimeData.items) ? runtimeData.items : [];
         return {
             tooltip: { trigger: "item" },
-            legend: { top: 0 },
+            legend: { top: 0, type: "scroll" },
             series: [
                 {
                     type: "pie",
@@ -53,12 +53,15 @@ export var toEChartsOption = function (definition, runtimeData) {
     if (chartType === "line" || chartType === "bar") {
         return {
             tooltip: { trigger: "axis" },
-            legend: { top: 0 },
+            legend: { top: 0, type: "scroll" },
             grid: { left: 20, right: 20, bottom: 24, top: 36, containLabel: true },
             xAxis: {
                 type: "category",
                 boundaryGap: chartType === "bar",
                 data: Array.isArray(runtimeData === null || runtimeData === void 0 ? void 0 : runtimeData.categories) ? runtimeData.categories : [],
+                axisLabel: {
+                    hideOverlap: true,
+                },
             },
             yAxis: { type: "value" },
             series: seriesFromRuntime(runtimeData, chartType),

package/dist/components/core/dashboard/mappers/echartsOptionMapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"echartsOptionMapper.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/mappers/echartsOptionMapper.ts"],"names":[],"mappings":"AAEA,IAAM,QAAQ,GAAG,UAAC,UAAe;;IAC/B,IAAM,GAAG,GACP,MAAA,MAAA,MAAA,MAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,0CAAE,IAAI,mCAC/B,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,0CAAE,SAAS,mCACpC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,mCAChB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCACtB,EAAE,CAAC;IACL,OAAO,UAAG,GAAG,CAAE,CAAC,WAAW,EAAE,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,UAAe;IAC9C,IAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,OAAO,MAAM,CAAC;IACzC,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IACvC,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;QAAE,OAAO,KAAK,CAAC;IAC9F,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,WAAgB,EAAE,UAA0B;IACrE,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,OAAO,MAAM,CAAC,GAAG,CAAC,UAAC,KAAU;;QAAK,OAAA,CAAC;YACjC,IAAI,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,EAAE;YACvB,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,UAAU,KAAK,MAAM;YAC7B,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;SACnD,CAAC,CAAA;KAAA,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,UAAe,EAAE,WAAgB;IAC/D,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAE/C,IAAI,SAAS,KAAK,KAAK,EAAE;QACvB,IAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QACzE,OAAO;YACL,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC5B,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;~~YAClB~~,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,KAAK;oBACX,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;oBACtB,iBAAiB,EAAE,IAAI;oBACvB,SAAS,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE;oBACnE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE;oBAC7C,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,UAAC,IAAS;;wBAAK,OAAA,CAAC;4BAC9B,IAAI,EAAE,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE;4BACrC,KAAK,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,CAAC;yBACxB,CAAC,CAAA;qBAAA,CAAC;iBACJ;aACF;SACF,CAAC;KACH;IAED,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,EAAE;QAC/C,OAAO;YACL,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC5B,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;~~YAClB~~,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;YACtE,KAAK,EAAE;gBACL,IAAI,EAAE,UAAU;gBAChB,WAAW,EAAE,SAAS,KAAK,KAAK;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;~~aAC3E~~;YACD,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YACxB,MAAM,EAAE,iBAAiB,CAAC,WAAW,EAAE,SAAS,CAAC;SAClD,CAAC;KACH;IAED,OAAO;QACL,KAAK,EAAE;YACL,IAAI,EAAE,wBAAwB;YAC9B,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;YACb,SAAS,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE;SACpE;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { EChartsOption } from \"echarts\";\n\nconst readType = (definition: any): string => {\n const raw =\n definition?.visualization?.type ??\n definition?.visualization?.chartType ??\n definition?.type ??\n definition?.widgetType ??\n \"\";\n return `${raw}`.toLowerCase();\n};\n\nexport const resolveChartType = (definition: any): \"line\" \| \"bar\" \| \"pie\" \| \"unknown\" => {\n const type = readType(definition);\n if (type.includes(\"line\")) return \"line\";\n if (type.includes(\"bar\")) return \"bar\";\n if (type.includes(\"pie\") \|\| type.includes(\"donut\") \|\| type.includes(\"doughnut\")) return \"pie\";\n return \"unknown\";\n};\n\nconst seriesFromRuntime = (runtimeData: any, forcedType: \"line\" \| \"bar\"): any[] => {\n const source = Array.isArray(runtimeData?.series) ? runtimeData.series : [];\n return source.map((entry: any) => ({\n name: entry?.name ?? \"\",\n type: forcedType,\n smooth: forcedType === \"line\",\n data: Array.isArray(entry?.data) ? entry.data : [],\n }));\n};\n\nexport const toEChartsOption = (definition: any, runtimeData: any): EChartsOption => {\n const chartType = resolveChartType(definition);\n\n if (chartType === \"pie\") {\n const items = Array.isArray(runtimeData?.items) ? runtimeData.items : [];\n return {\n tooltip: { trigger: \"item\" },\n legend: { top: 0 },\n series: [\n {\n type: \"pie\",\n radius: [\"42%\", \"70%\"],\n avoidLabelOverlap: true,\n itemStyle: { borderRadius: 6, borderColor: \"#fff\", borderWidth: 1 },\n label: { show: true, formatter: \"{b}: {d}%\" },\n data: items.map((item: any) => ({\n name: item?.name ?? item?.label ?? \"\",\n value: item?.value ?? 0,\n })),\n },\n ],\n };\n }\n\n if (chartType === \"line\" \|\| chartType === \"bar\") {\n return {\n tooltip: { trigger: \"axis\" },\n legend: { top: 0 },\n grid: { left: 20, right: 20, bottom: 24, top: 36, containLabel: true },\n xAxis: {\n type: \"category\",\n boundaryGap: chartType === \"bar\",\n data: Array.isArray(runtimeData?.categories) ? runtimeData.categories : [],\n },\n yAxis: { type: \"value\" },\n series: seriesFromRuntime(runtimeData, chartType),\n };\n }\n\n return {\n title: {\n text: \"Unsupported chart type\",\n left: \"center\",\n top: \"middle\",\n textStyle: { fontSize: 12, fontWeight: \"normal\", color: \"#64748b\" },\n },\n };\n};\n"]}
1	+ {"version":3,"file":"echartsOptionMapper.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/mappers/echartsOptionMapper.ts"],"names":[],"mappings":"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","sourcesContent":["import type { EChartsOption } from \"echarts\";\n\nconst readType = (definition: any): string => {\n const raw =\n definition?.visualization?.type ??\n definition?.visualization?.chartType ??\n definition?.type ??\n definition?.widgetType ??\n \"\";\n return `${raw}`.toLowerCase();\n};\n\nexport const resolveChartType = (definition: any): \"line\" \| \"bar\" \| \"pie\" \| \"unknown\" => {\n const type = readType(definition);\n if (type.includes(\"line\")) return \"line\";\n if (type.includes(\"bar\")) return \"bar\";\n if (type.includes(\"pie\") \|\| type.includes(\"donut\") \|\| type.includes(\"doughnut\")) return \"pie\";\n return \"unknown\";\n};\n\nconst seriesFromRuntime = (runtimeData: any, forcedType: \"line\" \| \"bar\"): any[] => {\n const source = Array.isArray(runtimeData?.series) ? runtimeData.series : [];\n return source.map((entry: any) => ({\n name: entry?.name ?? \"\",\n type: forcedType,\n smooth: forcedType === \"line\",\n data: Array.isArray(entry?.data) ? entry.data : [],\n }));\n};\n\nexport const toEChartsOption = (definition: any, runtimeData: any): EChartsOption => {\n const chartType = resolveChartType(definition);\n\n if (chartType === \"pie\") {\n const items = Array.isArray(runtimeData?.items) ? runtimeData.items : [];\n return {\n tooltip: { trigger: \"item\" },\n legend: { top: 0, type: \"scroll\" },\n series: [\n {\n type: \"pie\",\n radius: [\"42%\", \"70%\"],\n avoidLabelOverlap: true,\n itemStyle: { borderRadius: 6, borderColor: \"#fff\", borderWidth: 1 },\n label: { show: true, formatter: \"{b}: {d}%\" },\n data: items.map((item: any) => ({\n name: item?.name ?? item?.label ?? \"\",\n value: item?.value ?? 0,\n })),\n },\n ],\n };\n }\n\n if (chartType === \"line\" \|\| chartType === \"bar\") {\n return {\n tooltip: { trigger: \"axis\" },\n legend: { top: 0, type: \"scroll\" },\n grid: { left: 20, right: 20, bottom: 24, top: 36, containLabel: true },\n xAxis: {\n type: \"category\",\n boundaryGap: chartType === \"bar\",\n data: Array.isArray(runtimeData?.categories) ? runtimeData.categories : [],\n axisLabel: {\n hideOverlap: true,\n },\n },\n yAxis: { type: \"value\" },\n series: seriesFromRuntime(runtimeData, chartType),\n };\n }\n\n return {\n title: {\n text: \"Unsupported chart type\",\n left: \"center\",\n top: \"middle\",\n textStyle: { fontSize: 12, fontWeight: \"normal\", color: \"#64748b\" },\n },\n };\n};\n"]}

package/dist/components/core/dashboard/mappers/echartsOptionMapper.ts CHANGED Viewed

@@ -35,7 +35,7 @@ export const toEChartsOption = (definition: any, runtimeData: any): EChartsOptio
     const items = Array.isArray(runtimeData?.items) ? runtimeData.items : [];
     return {
       tooltip: { trigger: "item" },
-      legend: { top: 0 },
+      legend: { top: 0, type: "scroll" },
       series: [
         {
           type: "pie",
@@ -55,12 +55,15 @@ export const toEChartsOption = (definition: any, runtimeData: any): EChartsOptio
   if (chartType === "line" || chartType === "bar") {
     return {
       tooltip: { trigger: "axis" },
-      legend: { top: 0 },
+      legend: { top: 0, type: "scroll" },
       grid: { left: 20, right: 20, bottom: 24, top: 36, containLabel: true },
       xAxis: {
         type: "category",
         boundaryGap: chartType === "bar",
         data: Array.isArray(runtimeData?.categories) ? runtimeData.categories : [],
+        axisLabel: {
+          hideOverlap: true,
+        },
       },
       yAxis: { type: "value" },
       series: seriesFromRuntime(runtimeData, chartType),

package/dist/components/core/dashboard/widgets/DefaultDashboardKpiWidget.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DefaultDashboardKpiWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardKpiWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAEjF,wBAAgB,yBAAyB,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,~~2CAInF~~"}
1	+ {"version":3,"file":"DefaultDashboardKpiWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardKpiWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAEjF,wBAAgB,yBAAyB,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,2CAgBnF"}

package/dist/components/core/dashboard/widgets/DefaultDashboardKpiWidget.js CHANGED Viewed

@@ -4,6 +4,11 @@ export function DefaultDashboardKpiWidget(_a) {
     var runtime = _a.runtime;
     var value = (_d = (_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.data) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : runtime === null || runtime === void 0 ? void 0 : runtime.value) !== null && _d !== void 0 ? _d : "--";
     var suffix = (_f = (_e = runtime === null || runtime === void 0 ? void 0 : runtime.uiHints) === null || _e === void 0 ? void 0 : _e.suffix) !== null && _f !== void 0 ? _f : "";
-    return _jsx("div", { style: { fontSize: "1.9rem", fontWeight: 700 }, children: "".concat(value).concat(suffix) });
+    var isMobileViewport = typeof window !== "undefined" && window.innerWidth < 768;
+    return (_jsx("div", { style: {
+            fontSize: isMobileViewport ? "1.55rem" : "1.9rem",
+            fontWeight: 700,
+            lineHeight: 1.1,
+        }, children: "".concat(value).concat(suffix) }));
 }
 //# sourceMappingURL=DefaultDashboardKpiWidget.js.map

package/dist/components/core/dashboard/widgets/DefaultDashboardKpiWidget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DefaultDashboardKpiWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardKpiWidget.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,yBAAyB,CAAC,EAA0C;;QAAxC,OAAO,aAAA;IACjD,IAAM,KAAK,GAAG,MAAA,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,KAAK,mCAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,IAAI,CAAC;IAC7D,IAAM,MAAM,GAAG,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,0CAAE,MAAM,mCAAI,EAAE,CAAC;IAC9C,OAAO,~~cAAK~~,KAAK,~~EAAE~~,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,~~EAAE~~,~~YAAG,~~UAAG,KAAK,SAAG,MAAM,CAAE,~~GAAO~~,CAAC;~~AAC1F~~,CAAC","sourcesContent":["import type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\nexport function DefaultDashboardKpiWidget({ runtime }: DashboardWidgetComponentProps) {\n const value = runtime?.data?.value ?? runtime?.value ?? \"--\";\n const suffix = runtime?.uiHints?.suffix ?? \"\";\n return <div style={{ fontSize: \"1.9rem\", fontWeight: 700 }}>{`${value}${suffix}`}</div~~>;\~~n}\n"]}
1	+ {"version":3,"file":"DefaultDashboardKpiWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardKpiWidget.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,yBAAyB,CAAC,EAA0C;;QAAxC,OAAO,aAAA;IACjD,IAAM,KAAK,GAAG,MAAA,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,KAAK,mCAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,IAAI,CAAC;IAC7D,IAAM,MAAM,GAAG,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,0CAAE,MAAM,mCAAI,EAAE,CAAC;IAC9C,IAAM,gBAAgB,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;IAElF,OAAO,CACL,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;YACjD,UAAU,EAAE,GAAG;YACf,UAAU,EAAE,GAAG;SAChB,YAEA,UAAG,KAAK,SAAG,MAAM,CAAE,GAChB,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\nexport function DefaultDashboardKpiWidget({ runtime }: DashboardWidgetComponentProps) {\n const value = runtime?.data?.value ?? runtime?.value ?? \"--\";\n const suffix = runtime?.uiHints?.suffix ?? \"\";\n const isMobileViewport = typeof window !== \"undefined\" && window.innerWidth < 768;\n\n return (\n <div\n style={{\n fontSize: isMobileViewport ? \"1.55rem\" : \"1.9rem\",\n fontWeight: 700,\n lineHeight: 1.1,\n }}\n >\n {`${value}${suffix}`}\n </div>\n );\n}\n"]}

package/dist/components/core/dashboard/widgets/DefaultDashboardKpiWidget.tsx CHANGED Viewed

@@ -3,5 +3,17 @@ import type { DashboardWidgetComponentProps } from "../../../../types/dashboard"
 export function DefaultDashboardKpiWidget({ runtime }: DashboardWidgetComponentProps) {
   const value = runtime?.data?.value ?? runtime?.value ?? "--";
   const suffix = runtime?.uiHints?.suffix ?? "";
-  return <div style={{ fontSize: "1.9rem", fontWeight: 700 }}>{`${value}${suffix}`}</div>;
+  const isMobileViewport = typeof window !== "undefined" && window.innerWidth < 768;
+  return (
+    <div
+      style={{
+        fontSize: isMobileViewport ? "1.55rem" : "1.9rem",
+        fontWeight: 700,
+        lineHeight: 1.1,
+      }}
+    >
+      {`${value}${suffix}`}
+    </div>
+  );
 }

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QueueSlaHeatmapWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;~~AAwCjF~~,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,~~2CAkK~~/E"}
1	+ {"version":3,"file":"QueueSlaHeatmapWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAkDjF,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,2CAsM/E"}

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.js CHANGED Viewed

@@ -1,6 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import ReactECharts from "echarts-for-react";
+var clamp = function (value, min, max) { return Math.min(Math.max(value, min), max); };
+var escapeHtml = function (value) {
+    return "".concat(value !== null && value !== void 0 ? value : "")
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+};
 var formatBucketLabel = function (value) {
     if (!value)
         return "";
@@ -26,6 +35,8 @@ export function QueueSlaHeatmapWidget(_a) {
     var runtime = _a.runtime;
     var chartRef = useRef(null);
     var containerRef = useRef(null);
+    var viewportWidth = typeof window === "undefined" ? 1280 : window.innerWidth;
+    var isMobileViewport = viewportWidth < 768;
     var data = (_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.data) !== null && _b !== void 0 ? _b : runtime) !== null && _c !== void 0 ? _c : {};
     var xCategories = Array.isArray(data === null || data === void 0 ? void 0 : data.xCategories) ? data.xCategories : [];
     var yCategories = Array.isArray(data === null || data === void 0 ? void 0 : data.yCategories) ? data.yCategories : [];
@@ -46,6 +57,12 @@ export function QueueSlaHeatmapWidget(_a) {
             orient: "horizontal",
             left: "center",
             bottom: 0,
+            itemWidth: isMobileViewport ? 12 : 18,
+            itemHeight: isMobileViewport ? 10 : 14,
+            itemGap: isMobileViewport ? 8 : 12,
+            textStyle: {
+                fontSize: isMobileViewport ? 10 : 11,
+            },
             pieces: legendThresholds.map(function (threshold) { return ({
                 label: threshold.label,
                 color: threshold.color,
@@ -64,7 +81,24 @@ export function QueueSlaHeatmapWidget(_a) {
         };
     var option = {
         tooltip: {
-            position: "top",
+            confine: true,
+            extraCssText: "max-width:".concat(isMobileViewport ? 190 : 260, "px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;"),
+            position: function (point, _params, _dom, _rect, size) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var pointX = point[0], pointY = point[1];
+                var boxWidth = Number((_b = (_a = size === null || size === void 0 ? void 0 : size.contentSize) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 0);
+                var boxHeight = Number((_d = (_c = size === null || size === void 0 ? void 0 : size.contentSize) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0);
+                var viewWidth = Number((_f = (_e = size === null || size === void 0 ? void 0 : size.viewSize) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : 0);
+                var viewHeight = Number((_h = (_g = size === null || size === void 0 ? void 0 : size.viewSize) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : 0);
+                var offset = 12;
+                var nextLeft = clamp(pointX - (boxWidth / 2), 8, Math.max(8, viewWidth - boxWidth - 8));
+                var preferredTop = pointY - boxHeight - offset;
+                var fallbackTop = pointY + offset;
+                var nextTop = preferredTop < 8
+                    ? clamp(fallbackTop, 8, Math.max(8, viewHeight - boxHeight - 8))
+                    : preferredTop;
+                return [nextLeft, nextTop];
+            },
             formatter: function (params) {
                 var _a, _b, _c, _d, _e, _f, _g, _h;
                 var point = Array.isArray(params === null || params === void 0 ? void 0 : params.data) ? params.data : [];
@@ -72,25 +106,30 @@ export function QueueSlaHeatmapWidget(_a) {
                 var yIndex = Number((_b = point === null || point === void 0 ? void 0 : point[1]) !== null && _b !== void 0 ? _b : -1);
                 var metricValue = Number((_c = point === null || point === void 0 ? void 0 : point[2]) !== null && _c !== void 0 ? _c : 0);
                 var detail = detailMap.get("".concat(xIndex, ":").concat(yIndex));
+                var queueName = escapeHtml((_e = (_d = detail === null || detail === void 0 ? void 0 : detail.queueName) !== null && _d !== void 0 ? _d : yCategories[yIndex]) !== null && _e !== void 0 ? _e : "");
+                var bucketLabel = escapeHtml(formatBucketLabel((_g = (_f = detail === null || detail === void 0 ? void 0 : detail.bucket) !== null && _f !== void 0 ? _f : xCategories[xIndex]) !== null && _g !== void 0 ? _g : ""));
+                var averageElapsed = escapeHtml(formatMetric((_h = detail === null || detail === void 0 ? void 0 : detail.avgElapsedMillis) !== null && _h !== void 0 ? _h : metricValue));
                 var rows = [
-                    "<div style=\"font-weight:600;margin-bottom:4px;\">".concat((_e = (_d = detail === null || detail === void 0 ? void 0 : detail.queueName) !== null && _d !== void 0 ? _d : yCategories[yIndex]) !== null && _e !== void 0 ? _e : "", "</div>"),
-                    "<div>Bucket: ".concat(formatBucketLabel((_g = (_f = detail === null || detail === void 0 ? void 0 : detail.bucket) !== null && _f !== void 0 ? _f : xCategories[xIndex]) !== null && _g !== void 0 ? _g : ""), "</div>"),
-                    "<div>Average Elapsed: ".concat(formatMetric((_h = detail === null || detail === void 0 ? void 0 : detail.avgElapsedMillis) !== null && _h !== void 0 ? _h : metricValue), "</div>"),
+                    "<div style=\"max-width:".concat(isMobileViewport ? 180 : 240, "px;line-height:1.4;white-space:normal;word-break:break-word;overflow-wrap:anywhere;\">"),
+                    "<div style=\"font-weight:600;margin-bottom:4px;word-break:break-word;overflow-wrap:anywhere;\">".concat(queueName, "</div>"),
+                    "<div>Bucket: ".concat(bucketLabel, "</div>"),
+                    "<div>Average Elapsed: ".concat(averageElapsed, "</div>"),
                 ];
                 if (tooltipFields.includes("messageCount") && (detail === null || detail === void 0 ? void 0 : detail.messageCount) !== undefined) {
-                    rows.push("<div>Message Count: ".concat(new Intl.NumberFormat("en-GB").format(detail.messageCount), "</div>"));
+                    rows.push("<div>Message Count: ".concat(escapeHtml(new Intl.NumberFormat("en-GB").format(detail.messageCount)), "</div>"));
                 }
                 if (tooltipFields.includes("peakElapsedMillis") && (detail === null || detail === void 0 ? void 0 : detail.peakElapsedMillis) !== undefined) {
-                    rows.push("<div>Peak Elapsed: ".concat(formatMetric(detail.peakElapsedMillis), "</div>"));
+                    rows.push("<div>Peak Elapsed: ".concat(escapeHtml(formatMetric(detail.peakElapsedMillis)), "</div>"));
                 }
+                rows.push("</div>");
                 return rows.join("");
             },
         },
         grid: {
-            left: 110,
-            right: 20,
+            left: isMobileViewport ? 82 : 110,
+            right: isMobileViewport ? 10 : 20,
             top: 18,
-            bottom: 70,
+            bottom: isMobileViewport ? 92 : 70,
             containLabel: true,
         },
         xAxis: {
@@ -99,7 +138,9 @@ export function QueueSlaHeatmapWidget(_a) {
             splitArea: { show: true },
             axisLabel: {
                 formatter: function (value) { return formatBucketLabel(value); },
-                rotate: 30,
+                rotate: isMobileViewport ? 45 : 30,
+                fontSize: isMobileViewport ? 10 : 11,
+                hideOverlap: true,
             },
         },
         yAxis: {
@@ -108,6 +149,9 @@ export function QueueSlaHeatmapWidget(_a) {
             splitArea: { show: true },
             axisLabel: {
                 interval: 0,
+                width: isMobileViewport ? 78 : 100,
+                overflow: "truncate",
+                fontSize: isMobileViewport ? 10 : 11,
             },
         },
         visualMap: visualMap,

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QueueSlaHeatmapWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from \"react\";\nimport ReactECharts from \"echarts-for-react\";\nimport type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\ntype HeatmapPointDetail = {\n xIndex: number;\n yIndex: number;\n bucket?: string;\n queueName?: string;\n avgElapsedMillis?: number;\n messageCount?: number;\n peakElapsedMillis?: number;\n [key: string]: any;\n};\n\ntype HeatmapLegendThreshold = {\n label?: string;\n color?: string;\n lte?: number;\n gte?: number;\n gt?: number;\n};\n\nconst formatBucketLabel = (value: string): string => {\n if (!value) return \"\";\n const date = new Date(value);\n if (Number.isNaN(date.getTime())) return value;\n return new Intl.DateTimeFormat(\"en-GB\", {\n day: \"2-digit\",\n month: \"short\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n }).format(date);\n};\n\nconst formatMetric = (value: number \| undefined, unit = \"ms\"): string => {\n if (value === undefined \|\| value === null \|\| Number.isNaN(Number(value))) {\n return \"--\";\n }\n return `${new Intl.NumberFormat(\"en-GB\", { maximumFractionDigits: 2 }).format(Number(value))}${unit}`;\n};\n\nexport function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps) {\n const chartRef = useRef<any>(null);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const data = runtime?.data ?? runtime ?? {};\n const xCategories: string[] = Array.isArray(data?.xCategories) ? data.xCategories : [];\n const yCategories: string[] = Array.isArray(data?.yCategories) ? data.yCategories : [];\n const points: [number, number, number][] = Array.isArray(data?.points) ? data.points : [];\n const pointDetails: HeatmapPointDetail[] = Array.isArray(data?.pointDetails) ? data.pointDetails : [];\n const tooltipFields: string[] = Array.isArray(data?.tooltipFields) ? data.tooltipFields : [];\n const legendThresholds: HeatmapLegendThreshold[] = Array.isArray(data?.legendThresholds) ? data.legendThresholds : [];\n\n if (xCategories.length === 0 \|\| yCategories.length === 0 \|\| points.length === 0) {\n return (\n <div style={{ height: \"100%\", minHeight: 260, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: \"#64748b\", fontSize: \"0.92rem\" }}>\n No SLA heatmap data available for the current filters.\n </div>\n );\n }\n\n const detailMap = new Map(\n pointDetails.map((detail) => [`${detail.xIndex}:${detail.yIndex}`, detail] satisfies [string, HeatmapPointDetail])\n );\n\n const metricValues = points.map((entry) => Number(entry?.[2] ?? 0)).filter((entry) => Number.isFinite(entry));\n const min = metricValues.length ? Math.min(...metricValues) : 0;\n const max = metricValues.length ? Math.max(...metricValues) : 0;\n\n const visualMap = legendThresholds.length > 0\n ? {\n type: \"piecewise\",\n orient: \"horizontal\" as const,\n left: \"center\" as const,\n bottom: 0,\n pieces: legendThresholds.map((threshold) => ({\n label: threshold.label,\n color: threshold.color,\n lte: threshold.lte,\n gte: threshold.gte,\n gt: threshold.gt,\n })),\n }\n : {\n min,\n max,\n calculable: true,\n orient: \"horizontal\" as const,\n left: \"center\" as const,\n bottom: 0,\n };\n\n const option = {\n tooltip: {\n position: \"top\" as const,\n formatter: (params: any) => {\n const point = Array.isArray(params?.data) ? params.data : [];\n const xIndex = Number(point?.[0] ?? -1);\n const yIndex = Number(point?.[1] ?? -1);\n const metricValue = Number(point?.[2] ?? 0);\n const detail = detailMap.get(`${xIndex}:${yIndex}`);\n\n const rows = [\n `<div style=\"font-weight:600;margin-bottom:4px;\">${detail?.queueName ?? yCategories[yIndex] ?? \"\"}</div>`,\n `<div>Bucket: ${formatBucketLabel(detail?.bucket ?? xCategories[xIndex] ?? \"\")}</div>`,\n `<div>Average Elapsed: ${formatMetric(detail?.avgElapsedMillis ?? metricValue)}</div>`,\n ];\n\n if (tooltipFields.includes(\"messageCount\") && detail?.messageCount !== undefined) {\n rows.push(`<div>Message Count: ${new Intl.NumberFormat(\"en-GB\").format(detail.messageCount)}</div>`);\n }\n if (tooltipFields.includes(\"peakElapsedMillis\") && detail?.peakElapsedMillis !== undefined) {\n rows.push(`<div>Peak Elapsed: ${formatMetric(detail.peakElapsedMillis)}</div>`);\n }\n\n return rows.join(\"\");\n },\n },\n grid: {\n left: 110,\n right: 20,\n top: 18,\n bottom: 70,\n containLabel: true,\n },\n xAxis: {\n type: \"category\",\n data: xCategories,\n splitArea: { show: true },\n axisLabel: {\n formatter: (value: string) => formatBucketLabel(value),\n rotate: 30,\n },\n },\n yAxis: {\n type: \"category\",\n data: yCategories,\n splitArea: { show: true },\n axisLabel: {\n interval: 0,\n },\n },\n visualMap,\n series: [\n {\n name: \"Queue SLA\",\n type: \"heatmap\",\n data: points,\n label: { show: false },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: \"rgba(0,0,0,0.25)\",\n },\n },\n },\n ],\n };\n\n useEffect(() => {\n const resizeChart = () => {\n try {\n chartRef.current?.getEchartsInstance?.()?.resize?.({ width: \"auto\", height: \"auto\" });\n } catch {\n // no-op: chart may not be ready yet\n }\n };\n\n const observedElement =\n containerRef.current?.closest(\".grid-stack-item-content\") as HTMLElement \| null ??\n containerRef.current;\n\n const observer = typeof ResizeObserver !== \"undefined\" && observedElement\n ? new ResizeObserver(() => resizeChart())\n : null;\n\n if (observer && observedElement) {\n observer.observe(observedElement);\n }\n\n const rafId = window.requestAnimationFrame(resizeChart);\n const timeoutId = window.setTimeout(resizeChart, 120);\n const timeoutIdLong = window.setTimeout(resizeChart, 320);\n\n return () => {\n window.cancelAnimationFrame(rafId);\n window.clearTimeout(timeoutId);\n window.clearTimeout(timeoutIdLong);\n observer?.disconnect();\n };\n }, [option]);\n\n return (\n <div ref={containerRef} style={{ width: \"100%\", height: \"100%\", minHeight: 280, flex: 1 }}>\n <ReactECharts\n ref={chartRef}\n option={option}\n style={{ width: \"100%\", height: \"100%\", minHeight: 280 }}\n notMerge\n lazyUpdate\n autoResize\n />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"QueueSlaHeatmapWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from \"react\";\nimport ReactECharts from \"echarts-for-react\";\nimport type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\ntype HeatmapPointDetail = {\n xIndex: number;\n yIndex: number;\n bucket?: string;\n queueName?: string;\n avgElapsedMillis?: number;\n messageCount?: number;\n peakElapsedMillis?: number;\n [key: string]: any;\n};\n\ntype HeatmapLegendThreshold = {\n label?: string;\n color?: string;\n lte?: number;\n gte?: number;\n gt?: number;\n};\n\nconst clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);\n\nconst escapeHtml = (value: unknown): string =>\n `${value ?? \"\"}`\n .replaceAll(\"&\", \"&\")\n .replaceAll(\"<\", \"<\")\n .replaceAll(\">\", \">\")\n .replaceAll('\"', \""\")\n .replaceAll(\"'\", \"'\");\n\nconst formatBucketLabel = (value: string): string => {\n if (!value) return \"\";\n const date = new Date(value);\n if (Number.isNaN(date.getTime())) return value;\n return new Intl.DateTimeFormat(\"en-GB\", {\n day: \"2-digit\",\n month: \"short\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n }).format(date);\n};\n\nconst formatMetric = (value: number \| undefined, unit = \"ms\"): string => {\n if (value === undefined \|\| value === null \|\| Number.isNaN(Number(value))) {\n return \"--\";\n }\n return `${new Intl.NumberFormat(\"en-GB\", { maximumFractionDigits: 2 }).format(Number(value))}${unit}`;\n};\n\nexport function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps) {\n const chartRef = useRef<any>(null);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const viewportWidth = typeof window === \"undefined\" ? 1280 : window.innerWidth;\n const isMobileViewport = viewportWidth < 768;\n const data = runtime?.data ?? runtime ?? {};\n const xCategories: string[] = Array.isArray(data?.xCategories) ? data.xCategories : [];\n const yCategories: string[] = Array.isArray(data?.yCategories) ? data.yCategories : [];\n const points: [number, number, number][] = Array.isArray(data?.points) ? data.points : [];\n const pointDetails: HeatmapPointDetail[] = Array.isArray(data?.pointDetails) ? data.pointDetails : [];\n const tooltipFields: string[] = Array.isArray(data?.tooltipFields) ? data.tooltipFields : [];\n const legendThresholds: HeatmapLegendThreshold[] = Array.isArray(data?.legendThresholds) ? data.legendThresholds : [];\n\n if (xCategories.length === 0 \|\| yCategories.length === 0 \|\| points.length === 0) {\n return (\n <div style={{ height: \"100%\", minHeight: 260, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: \"#64748b\", fontSize: \"0.92rem\" }}>\n No SLA heatmap data available for the current filters.\n </div>\n );\n }\n\n const detailMap = new Map(\n pointDetails.map((detail) => [`${detail.xIndex}:${detail.yIndex}`, detail] satisfies [string, HeatmapPointDetail])\n );\n\n const metricValues = points.map((entry) => Number(entry?.[2] ?? 0)).filter((entry) => Number.isFinite(entry));\n const min = metricValues.length ? Math.min(...metricValues) : 0;\n const max = metricValues.length ? Math.max(...metricValues) : 0;\n\n const visualMap = legendThresholds.length > 0\n ? {\n type: \"piecewise\",\n orient: \"horizontal\" as const,\n left: \"center\" as const,\n bottom: 0,\n itemWidth: isMobileViewport ? 12 : 18,\n itemHeight: isMobileViewport ? 10 : 14,\n itemGap: isMobileViewport ? 8 : 12,\n textStyle: {\n fontSize: isMobileViewport ? 10 : 11,\n },\n pieces: legendThresholds.map((threshold) => ({\n label: threshold.label,\n color: threshold.color,\n lte: threshold.lte,\n gte: threshold.gte,\n gt: threshold.gt,\n })),\n }\n : {\n min,\n max,\n calculable: true,\n orient: \"horizontal\" as const,\n left: \"center\" as const,\n bottom: 0,\n };\n\n const option = {\n tooltip: {\n confine: true,\n extraCssText: `max-width:${isMobileViewport ? 190 : 260}px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;`,\n position: (point: number[], _params: any, _dom: HTMLElement, _rect: any, size: any) => {\n const [pointX, pointY] = point;\n const boxWidth = Number(size?.contentSize?.[0] ?? 0);\n const boxHeight = Number(size?.contentSize?.[1] ?? 0);\n const viewWidth = Number(size?.viewSize?.[0] ?? 0);\n const viewHeight = Number(size?.viewSize?.[1] ?? 0);\n const offset = 12;\n\n const nextLeft = clamp(pointX - (boxWidth / 2), 8, Math.max(8, viewWidth - boxWidth - 8));\n const preferredTop = pointY - boxHeight - offset;\n const fallbackTop = pointY + offset;\n const nextTop = preferredTop < 8\n ? clamp(fallbackTop, 8, Math.max(8, viewHeight - boxHeight - 8))\n : preferredTop;\n\n return [nextLeft, nextTop];\n },\n formatter: (params: any) => {\n const point = Array.isArray(params?.data) ? params.data : [];\n const xIndex = Number(point?.[0] ?? -1);\n const yIndex = Number(point?.[1] ?? -1);\n const metricValue = Number(point?.[2] ?? 0);\n const detail = detailMap.get(`${xIndex}:${yIndex}`);\n const queueName = escapeHtml(detail?.queueName ?? yCategories[yIndex] ?? \"\");\n const bucketLabel = escapeHtml(formatBucketLabel(detail?.bucket ?? xCategories[xIndex] ?? \"\"));\n const averageElapsed = escapeHtml(formatMetric(detail?.avgElapsedMillis ?? metricValue));\n\n const rows = [\n `<div style=\"max-width:${isMobileViewport ? 180 : 240}px;line-height:1.4;white-space:normal;word-break:break-word;overflow-wrap:anywhere;\">`,\n `<div style=\"font-weight:600;margin-bottom:4px;word-break:break-word;overflow-wrap:anywhere;\">${queueName}</div>`,\n `<div>Bucket: ${bucketLabel}</div>`,\n `<div>Average Elapsed: ${averageElapsed}</div>`,\n ];\n\n if (tooltipFields.includes(\"messageCount\") && detail?.messageCount !== undefined) {\n rows.push(`<div>Message Count: ${escapeHtml(new Intl.NumberFormat(\"en-GB\").format(detail.messageCount))}</div>`);\n }\n if (tooltipFields.includes(\"peakElapsedMillis\") && detail?.peakElapsedMillis !== undefined) {\n rows.push(`<div>Peak Elapsed: ${escapeHtml(formatMetric(detail.peakElapsedMillis))}</div>`);\n }\n\n rows.push(\"</div>\");\n return rows.join(\"\");\n },\n },\n grid: {\n left: isMobileViewport ? 82 : 110,\n right: isMobileViewport ? 10 : 20,\n top: 18,\n bottom: isMobileViewport ? 92 : 70,\n containLabel: true,\n },\n xAxis: {\n type: \"category\",\n data: xCategories,\n splitArea: { show: true },\n axisLabel: {\n formatter: (value: string) => formatBucketLabel(value),\n rotate: isMobileViewport ? 45 : 30,\n fontSize: isMobileViewport ? 10 : 11,\n hideOverlap: true,\n },\n },\n yAxis: {\n type: \"category\",\n data: yCategories,\n splitArea: { show: true },\n axisLabel: {\n interval: 0,\n width: isMobileViewport ? 78 : 100,\n overflow: \"truncate\" as const,\n fontSize: isMobileViewport ? 10 : 11,\n },\n },\n visualMap,\n series: [\n {\n name: \"Queue SLA\",\n type: \"heatmap\",\n data: points,\n label: { show: false },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: \"rgba(0,0,0,0.25)\",\n },\n },\n },\n ],\n };\n\n useEffect(() => {\n const resizeChart = () => {\n try {\n chartRef.current?.getEchartsInstance?.()?.resize?.({ width: \"auto\", height: \"auto\" });\n } catch {\n // no-op: chart may not be ready yet\n }\n };\n\n const observedElement =\n containerRef.current?.closest(\".grid-stack-item-content\") as HTMLElement \| null ??\n containerRef.current;\n\n const observer = typeof ResizeObserver !== \"undefined\" && observedElement\n ? new ResizeObserver(() => resizeChart())\n : null;\n\n if (observer && observedElement) {\n observer.observe(observedElement);\n }\n\n const rafId = window.requestAnimationFrame(resizeChart);\n const timeoutId = window.setTimeout(resizeChart, 120);\n const timeoutIdLong = window.setTimeout(resizeChart, 320);\n\n return () => {\n window.cancelAnimationFrame(rafId);\n window.clearTimeout(timeoutId);\n window.clearTimeout(timeoutIdLong);\n observer?.disconnect();\n };\n }, [option]);\n\n return (\n <div ref={containerRef} style={{ width: \"100%\", height: \"100%\", minHeight: 280, flex: 1 }}>\n <ReactECharts\n ref={chartRef}\n option={option}\n style={{ width: \"100%\", height: \"100%\", minHeight: 280 }}\n notMerge\n lazyUpdate\n autoResize\n />\n </div>\n );\n}\n"]}

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx CHANGED Viewed

@@ -21,6 +21,16 @@ type HeatmapLegendThreshold = {
   gt?: number;
 };
+const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
+const escapeHtml = (value: unknown): string =>
+  `${value ?? ""}`
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
 const formatBucketLabel = (value: string): string => {
   if (!value) return "";
   const date = new Date(value);
@@ -43,6 +53,8 @@ const formatMetric = (value: number | undefined, unit = "ms"): string => {
 export function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps) {
   const chartRef = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const viewportWidth = typeof window === "undefined" ? 1280 : window.innerWidth;
+  const isMobileViewport = viewportWidth < 768;
   const data = runtime?.data ?? runtime ?? {};
   const xCategories: string[] = Array.isArray(data?.xCategories) ? data.xCategories : [];
   const yCategories: string[] = Array.isArray(data?.yCategories) ? data.yCategories : [];
@@ -73,6 +85,12 @@ export function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps
         orient: "horizontal" as const,
         left: "center" as const,
         bottom: 0,
+        itemWidth: isMobileViewport ? 12 : 18,
+        itemHeight: isMobileViewport ? 10 : 14,
+        itemGap: isMobileViewport ? 8 : 12,
+        textStyle: {
+          fontSize: isMobileViewport ? 10 : 11,
+        },
         pieces: legendThresholds.map((threshold) => ({
           label: threshold.label,
           color: threshold.color,
@@ -92,35 +110,58 @@ export function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps
   const option = {
     tooltip: {
-      position: "top" as const,
+      confine: true,
+      extraCssText: `max-width:${isMobileViewport ? 190 : 260}px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;`,
+      position: (point: number[], _params: any, _dom: HTMLElement, _rect: any, size: any) => {
+        const [pointX, pointY] = point;
+        const boxWidth = Number(size?.contentSize?.[0] ?? 0);
+        const boxHeight = Number(size?.contentSize?.[1] ?? 0);
+        const viewWidth = Number(size?.viewSize?.[0] ?? 0);
+        const viewHeight = Number(size?.viewSize?.[1] ?? 0);
+        const offset = 12;
+        const nextLeft = clamp(pointX - (boxWidth / 2), 8, Math.max(8, viewWidth - boxWidth - 8));
+        const preferredTop = pointY - boxHeight - offset;
+        const fallbackTop = pointY + offset;
+        const nextTop = preferredTop < 8
+          ? clamp(fallbackTop, 8, Math.max(8, viewHeight - boxHeight - 8))
+          : preferredTop;
+        return [nextLeft, nextTop];
+      },
       formatter: (params: any) => {
         const point = Array.isArray(params?.data) ? params.data : [];
         const xIndex = Number(point?.[0] ?? -1);
         const yIndex = Number(point?.[1] ?? -1);
         const metricValue = Number(point?.[2] ?? 0);
         const detail = detailMap.get(`${xIndex}:${yIndex}`);
+        const queueName = escapeHtml(detail?.queueName ?? yCategories[yIndex] ?? "");
+        const bucketLabel = escapeHtml(formatBucketLabel(detail?.bucket ?? xCategories[xIndex] ?? ""));
+        const averageElapsed = escapeHtml(formatMetric(detail?.avgElapsedMillis ?? metricValue));
         const rows = [
-          `<div style="font-weight:600;margin-bottom:4px;">${detail?.queueName ?? yCategories[yIndex] ?? ""}</div>`,
-          `<div>Bucket: ${formatBucketLabel(detail?.bucket ?? xCategories[xIndex] ?? "")}</div>`,
-          `<div>Average Elapsed: ${formatMetric(detail?.avgElapsedMillis ?? metricValue)}</div>`,
+          `<div style="max-width:${isMobileViewport ? 180 : 240}px;line-height:1.4;white-space:normal;word-break:break-word;overflow-wrap:anywhere;">`,
+          `<div style="font-weight:600;margin-bottom:4px;word-break:break-word;overflow-wrap:anywhere;">${queueName}</div>`,
+          `<div>Bucket: ${bucketLabel}</div>`,
+          `<div>Average Elapsed: ${averageElapsed}</div>`,
         ];
         if (tooltipFields.includes("messageCount") && detail?.messageCount !== undefined) {
-          rows.push(`<div>Message Count: ${new Intl.NumberFormat("en-GB").format(detail.messageCount)}</div>`);
+          rows.push(`<div>Message Count: ${escapeHtml(new Intl.NumberFormat("en-GB").format(detail.messageCount))}</div>`);
         }
         if (tooltipFields.includes("peakElapsedMillis") && detail?.peakElapsedMillis !== undefined) {
-          rows.push(`<div>Peak Elapsed: ${formatMetric(detail.peakElapsedMillis)}</div>`);
+          rows.push(`<div>Peak Elapsed: ${escapeHtml(formatMetric(detail.peakElapsedMillis))}</div>`);
         }
+        rows.push("</div>");
         return rows.join("");
       },
     },
     grid: {
-      left: 110,
-      right: 20,
+      left: isMobileViewport ? 82 : 110,
+      right: isMobileViewport ? 10 : 20,
       top: 18,
-      bottom: 70,
+      bottom: isMobileViewport ? 92 : 70,
       containLabel: true,
     },
     xAxis: {
@@ -129,7 +170,9 @@ export function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps
       splitArea: { show: true },
       axisLabel: {
         formatter: (value: string) => formatBucketLabel(value),
-        rotate: 30,
+        rotate: isMobileViewport ? 45 : 30,
+        fontSize: isMobileViewport ? 10 : 11,
+        hideOverlap: true,
       },
     },
     yAxis: {
@@ -138,6 +181,9 @@ export function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps
       splitArea: { show: true },
       axisLabel: {
         interval: 0,
+        width: isMobileViewport ? 78 : 100,
+        overflow: "truncate" as const,
+        fontSize: isMobileViewport ? 10 : 11,
       },
     },
     visualMap,