Merge pull request #2517 from smeup/feat/g-cell-in-tbl

LS25000864: kup-data-table: Support to graphic shape LBL and graphic formatting by using markers in the contained text
smeup · Feb 18, 2025 · b87cda0 · b87cda0
2 parents 2ec3cf3 + 667ca1f
commit b87cda0
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 2 deletions.
diff --git a/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts b/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts
@@ -189,6 +189,7 @@ export enum FCellTypes {
     SWITCH = 'switch',
     TABLE = 'table',
     TIME = 'time',
+    LABEL = 'label',
 }
 export const editableTypes = [
     FCellTypes.AUTOCOMPLETE,
@@ -226,6 +227,7 @@ export const kupTypes = [
     FCellTypes.PROGRESS_BAR,
     FCellTypes.RADIO,
     FCellTypes.RATING,
+    FCellTypes.LABEL,
 ];
 /**
  * Payload of the event fired when a cell is updated.

diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
@@ -68,6 +68,7 @@ import {
     kupTypes,
 } from './f-cell-declarations';
 import { getIdOfItemByDisplayMode } from '../../components/kup-list/kup-list-helper';
+import { FLabel } from '../f-label/f-label';
 
 const dom: KupDom = document.documentElement as KupDom;
 
@@ -1243,6 +1244,8 @@ function setKupCell(
                     disabled={true}
                 ></FTextField>
             );
+        case FCellTypes.LABEL:
+            return <FLabel text={cell.value} classes="f-cell__text"></FLabel>;
     }
 }
 

diff --git a/packages/ketchup/src/f-components/f-label/f-label-declarations.ts b/packages/ketchup/src/f-components/f-label/f-label-declarations.ts
@@ -2,6 +2,7 @@ import { FComponent } from '../../types/GenericTypes';
 
 export interface FLabelProps extends FComponent {
     text: string;
+    classes?: string;
 }
 
 export interface ParsedElement {

diff --git a/packages/ketchup/src/f-components/f-label/f-label.tsx b/packages/ketchup/src/f-components/f-label/f-label.tsx
@@ -14,12 +14,12 @@ function getVNodes(parsedElements: ParsedElement[]): VNode[] {
     });
 }
 
-export const FLabel: FunctionalComponent<FLabelProps> = ({ text }) => {
+export const FLabel: FunctionalComponent<FLabelProps> = ({ text, classes }) => {
     const parsedElements = getParsedElements(text);
     // To avoid creating unnecessary span in the text
     // when there are no tags to format the content
     if (parsedElements?.length > 1) {
-        return <span>{getVNodes(parsedElements)}</span>;
+        return <span class={classes}>{getVNodes(parsedElements)}</span>;
     } else {
         return <Fragment>{text}</Fragment>;
     }

diff --git a/packages/ketchup/src/managers/kup-data/kup-data.ts b/packages/ketchup/src/managers/kup-data/kup-data.ts
@@ -138,6 +138,8 @@ export class KupData {
                         return FCellTypes.STRING;
                     case FCellShapes.TIME:
                         return FCellTypes.TIME;
+                    case FCellShapes.LABEL:
+                        return FCellTypes.LABEL;
                 }
             }
 

diff --git a/packages/ketchup/src/managers/kup-perf-tuning/kup-perf-tuning.ts b/packages/ketchup/src/managers/kup-perf-tuning/kup-perf-tuning.ts
@@ -31,4 +31,26 @@ export class KupPerfTuning {
             `perfIndex ${perfIndex}, maxCellsPerPage ${this.data.maxCellsPerPage}`
         );
     }
+
+    mark(checkpoint: string): void {
+        performance.mark(`${checkpoint} - Started`);
+    }
+
+    measure(
+        checkpoint: string,
+        track: string,
+        trackGroup = 'SmeUP Performance Tracking'
+    ): void {
+        performance.measure(`${checkpoint} - Completed`, {
+            start: `${checkpoint} - Started`,
+            detail: {
+                devtools: {
+                    dataType: 'track-entry',
+                    track: `${track} - Tasks`,
+                    trackGroup: trackGroup,
+                    color: 'tertiary-dark',
+                },
+            },
+        });
+    }
 }