feat(dashboards): add optional title and label icons

package.json

@@ -135,6 +135,8 @@
     "trigger-pipeline-build-ci": "bash scripts/trigger-pipeline-build",
     "verify-ci": "bash scripts/verify-published"
   },
-  "version": "21.0.1",
-  "workspaces": ["packages/*"]
+  "version": "21.0.2",
+  "workspaces": [
+    "packages/*"
+  ]
 }

packages/bits/package.json

@@ -104,5 +104,5 @@
     "test:dev": "ng test lib -c dev"
   },
   "typings": "public_api.d.ts",
-  "version": "21.0.1"
+  "version": "21.0.2"
 }

packages/bits/schematics/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nova-schematics",
   "license": "Apache-2.0",
-  "version": "21.0.1",
+  "version": "21.0.2",
   "scripts": {
     "assemble": "run-s build copy:json copy:data test copy:dist",
     "build": "tsc -p tsconfig.json",

packages/bits/src/lib/icon/icons.ts

@@ -158,6 +158,13 @@ export const icons: ITypedIconData[] = [
         category: IconCategory.Command,
         code: "<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'>\n    <path fill='#297994'\n          d='M10,20A10,10,0,1,1,20,10,10,10,0,0,1,10,20ZM10,1a9,9,0,1,0,9,9A9,9,0,0,0,10,1Zm0,17a8,8,0,1,1,8-8A8,8,0,0,1,10,18ZM10,4a6,6,0,1,0,6,6A6,6,0,0,0,10,4Zm2.92,4.62-.83-1.25L9.79,8.9,8.17,5.66l-1.34.67L9.21,11.1Z'/>\n</svg>\n",
     },
+    {
+        svgFile: "clock_off.svg",
+        name: "clock_off",
+        cat_namespace: IconCategoryNamespace.Command,
+        category: IconCategory.Command,
+        code: "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'>\n    <path fill='currentColor' d='M13.9005 3.84155C14.996 3.84155 16.0426 4.06123 16.9981 4.45961C17.9894 4.87275 18.8814 5.47933 19.6285 6.23182C20.374 6.98268 20.9763 7.88108 21.3865 8.88276C21.782 9.8451 22.0002 10.8992 22.0002 12.0009C22.0002 13.1043 21.782 14.1584 21.3865 15.1207C20.9763 16.1191 20.374 17.0175 19.6269 17.77C18.8814 18.5209 17.9894 19.1275 16.9949 19.5406C16.0394 19.939 14.9927 20.1587 13.8989 20.1587C12.8034 20.1587 11.7568 19.939 10.8013 19.5406C9.81004 19.1275 8.91804 18.5209 8.17253 17.77L8.1709 17.7684C7.42377 17.0159 6.82314 16.1175 6.41295 15.1207C6.28599 14.8109 6.17693 14.4928 6.0874 14.1666C6.25669 14.183 6.42923 14.1912 6.60339 14.1912C6.93383 14.1912 7.25612 14.1617 7.57027 14.1043C7.62236 14.2617 7.67933 14.4174 7.74118 14.5699C8.07812 15.3896 8.57296 16.1273 9.18824 16.747C9.80352 17.3667 10.5376 17.8651 11.3499 18.2045C12.1328 18.5307 12.9939 18.7127 13.8989 18.7127C14.8039 18.7127 15.6634 18.5324 16.4479 18.2045C17.2618 17.8651 17.9943 17.3667 18.6096 16.747C19.2249 16.1273 19.7197 15.388 20.0566 14.5699C20.3806 13.7813 20.5612 12.9141 20.5612 12.0026C20.5612 11.0911 20.3822 10.2254 20.0566 9.43524C19.7197 8.61553 19.2249 7.8778 18.6096 7.2581C17.9943 6.6384 17.2602 6.14002 16.4479 5.80066C15.665 5.47441 14.8039 5.29244 13.8989 5.29244C12.9939 5.29244 12.1344 5.47277 11.3499 5.80066C11.2799 5.83017 11.2099 5.86131 11.1415 5.89246C10.8746 5.46949 10.5523 5.08587 10.1828 4.75307C10.3846 4.64815 10.5913 4.55142 10.8013 4.46289C11.7601 4.06123 12.8051 3.84155 13.9005 3.84155ZM12.9711 8.12207C12.9711 7.92206 13.0525 7.74173 13.1811 7.61057C13.3113 7.47942 13.4903 7.39909 13.6889 7.39909C13.8875 7.39909 14.0666 7.47942 14.1968 7.61057C14.327 7.74173 14.4068 7.92206 14.4068 8.12207V11.9288L17.2309 13.6158C17.4002 13.7174 17.5141 13.8797 17.5597 14.0584C17.6053 14.2371 17.5841 14.4338 17.4832 14.6043V14.606C17.3823 14.7765 17.2211 14.8912 17.0437 14.9371C16.8663 14.983 16.6709 14.9617 16.5017 14.8601H16.5L13.3406 12.9715C13.2315 12.9108 13.142 12.8223 13.0769 12.7174C13.0102 12.6075 12.9711 12.478 12.9711 12.3403V8.12207Z'/>\n    <path fill='currentColor' fill-rule='evenodd' clip-rule='evenodd' d='M6.39163 4.27441C8.81696 4.27441 10.7833 6.25483 10.7833 8.69756C10.7833 11.1403 8.81696 13.1207 6.39163 13.1207C3.96631 13.1207 2 11.1403 2 8.69756C2 6.25483 3.96631 4.27441 6.39163 4.27441ZM7.25108 7.09257C7.44803 6.89092 7.76707 6.89092 7.96566 7.09093C8.16261 7.29094 8.16424 7.61555 7.96728 7.81719L7.10458 8.69756L7.96728 9.57957C8.16261 9.77958 8.15936 10.1025 7.96077 10.3009C7.76219 10.4993 7.44478 10.4993 7.24945 10.2993L6.39163 9.42382L5.53219 10.3009C5.33523 10.5026 5.0162 10.5026 4.81761 10.3025C4.62066 10.1025 4.61903 9.77794 4.81598 9.57629L5.67868 8.69592L4.81598 7.81391C4.62066 7.61391 4.62391 7.29094 4.8225 7.09257C5.02108 6.8942 5.33849 6.8942 5.53382 7.09421L6.39163 7.96966L7.25108 7.09257Z'/>\n</svg>\n",
+    },
     {
         svgFile: "close.svg",
         name: "close",
@@ -318,6 +325,13 @@ export const icons: ITypedIconData[] = [
         category: IconCategory.Command,
         code: "<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'>\n    <path fill='#297994'\n          d='M.29,1,7,7.71V19.5l5-3.75v-8L18.71,1ZM2.71,2H16.29l-5,5H7.71ZM11,15.25,8,17.5V9h3Z'/>\n</svg>\n",
     },
+    {
+        svgFile: "no-filter.svg",
+        name: "no-filter",
+        cat_namespace: IconCategoryNamespace.Command,
+        category: IconCategory.Command,
+        code: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n<g transform='translate(12 12) scale(1.12) translate(-12 -12)'>\n<path d='M15.291 10C17.5002 10 19.291 8.20914 19.291 6C19.291 3.79086 17.5002 2 15.291 2C13.0819 2 11.291 3.79086 11.291 6C11.291 8.20914 13.0819 10 15.291 10Z' fill='#DD2C00'/>\n<path d='M16.3999 7.33207C16.3406 7.33207 16.284 7.30762 16.2427 7.26644L15.2846 6.30912L14.3265 7.26644C14.2364 7.33979 14.1063 7.33335 14.0239 7.25229C13.9415 7.16994 13.935 7.03998 14.0097 6.94991L14.9678 5.99259L14.0097 5.03526C13.9363 4.94519 13.9428 4.81523 14.0239 4.73288C14.1063 4.65053 14.2364 4.6441 14.3265 4.71873L15.2846 5.67605L16.2427 4.71873C16.3316 4.64539 16.463 4.65182 16.5454 4.73288C16.6278 4.81523 16.6342 4.94519 16.5595 5.03526L15.6014 5.99259L16.5595 6.94991C16.6226 7.01425 16.642 7.11075 16.6072 7.19439C16.5724 7.27802 16.4913 7.33207 16.4011 7.33335L16.3999 7.33207Z' fill='white'/>\n<path d='M10.3262 5.41113C10.3036 5.6043 10.2911 5.80074 10.2911 6C10.2911 6.25257 10.3106 6.50066 10.3467 6.74316H6.33305L9.02934 10.7832H9.33989C9.44445 10.7566 9.55362 10.7422 9.66606 10.7422H10.9991C11.1113 10.7422 11.2198 10.7566 11.3243 10.7832H11.6299L12.2002 9.92871C12.5429 10.1986 12.9207 10.4258 13.3272 10.5996L12.3331 12.0771V17.541L12.3321 17.5391C12.332 18.2026 11.7935 18.7412 11.1299 18.7412C10.8358 18.7411 10.5512 18.6338 10.3321 18.4385L8.77934 17.0586C8.49525 16.8059 8.33219 16.4434 8.33208 16.0625V12.0771L5.14067 7.34082C4.81193 6.6823 5.07898 5.88168 5.73735 5.55273C5.92194 5.45994 6.12674 5.41117 6.33403 5.41113H10.3262ZM9.66606 16.0615L10.9991 17.2461V12.0762H9.66606V16.0615Z' fill='#297994'/>\n</g>\n</svg>\n",
+    },
     {
         svgFile: "fullscreen.svg",
         name: "fullscreen",

packages/charts/package.json

@@ -6,7 +6,7 @@
     }
   ],
   "dependencies": {
-    "@nova-ui/bits": "~21.0.1"
+    "@nova-ui/bits": "~21.0.2"
   },
   "devDependencies": {
     "@types/d3": "^5.7.2",
@@ -89,5 +89,5 @@
     "test": "ng test lib -c coverage",
     "test:dev": "ng test lib -c dev"
   },
-  "version": "21.0.1"
-}
+  "version": "21.0.2"
+}

packages/dashboards/examples/src/components/docs/demo.files.ts

@@ -130,6 +130,9 @@ export const DEMO_PATHS = [
     "widget-types/kpi/kpi-widget/kpi-widget-example.component.html",
     "widget-types/kpi/kpi-widget/kpi-widget-example.component.less",
     "widget-types/kpi/kpi-widget/kpi-widget-example.component.ts",
+    "widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.html",
+    "widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.less",
+    "widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.ts",
     "widget-types/kpi/kpi-widget-background-color/kpi-widget-background-color-example.component.html",
     "widget-types/kpi/kpi-widget-background-color/kpi-widget-background-color-example.component.less",
     "widget-types/kpi/kpi-widget-background-color/kpi-widget-background-color-example.component.ts",

packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.component.html

@@ -19,6 +19,20 @@ <h1>KPI Widget</h1>
     <kpi-widget-example></kpi-widget-example>
 </nui-example-wrapper>
 
+<h3>Label Resizing With Icons</h3>
+<p>
+    Compare short, medium, and long KPI labels with and without a label icon.
+    This example is useful for checking that long labels still shrink the same
+    way as the original KPI label rendering.
+</p>
+
+<nui-example-wrapper
+    filenamePrefix="kpi-widget-label-resize"
+    exampleTitle="KPI label resizing"
+>
+    <kpi-widget-label-resize-example></kpi-widget-label-resize-example>
+</nui-example-wrapper>
+
 <h3>Interaction Handling</h3>
 <p>
     The example below has the

packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.module.ts

@@ -38,6 +38,7 @@ import { KpiSyncBrokerExampleComponent } from "./kpi-sync-broker/kpi-sync-broker
 import { KpiSyncBrokerDocsComponent } from "./kpi-sync-broker-docs.component";
 import { KpiSyncBrokerForAllTilesExampleComponent } from "./kpi-sync-broker-for-all-tiles/kpi-sync-broker-for-all-tiles-example.component";
 import { KpiWidgetExampleComponent } from "./kpi-widget/kpi-widget-example.component";
+import { KpiWidgetLabelResizeExampleComponent } from "./kpi-widget-label-resize/kpi-widget-label-resize-example.component";
 import { KpiWidgetBackgroundColorExampleComponent } from "./kpi-widget-background-color/kpi-widget-background-color-example.component";
 import { KpiWidgetBackgroundColorDocsComponent } from "./kpi-widget-background-color-docs.component";
 import { KpiWidgetInteractiveExampleComponent } from "./kpi-widget-interactive/kpi-widget-interactive-example.component";
@@ -95,6 +96,7 @@ const routes: Routes = [
     declarations: [
         KpiDocsComponent,
         KpiWidgetExampleComponent,
+        KpiWidgetLabelResizeExampleComponent,
         KpiWidgetInteractiveExampleComponent,
         KpiWidgetBackgroundColorDocsComponent,
         KpiWidgetBackgroundColorExampleComponent,

packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.html

@@ -0,0 +1,10 @@
+@if (dashboard) {
+<div class="dashboard">
+    <nui-dashboard
+        [(dashboard)]="dashboard"
+        [editMode]="false"
+        [(gridsterConfig)]="gridsterConfig"
+    >
+    </nui-dashboard>
+</div>
+}

packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.less

@@ -0,0 +1,9 @@
+.dashboard {
+    height: 460px;
+}
+
+@media (max-width: 1024px) {
+    .dashboard {
+        height: 560px;
+    }
+}

packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.ts

@@ -0,0 +1,179 @@
+import { Component, OnInit } from "@angular/core";
+import { GridsterConfig, GridsterItemConfig } from "angular-gridster2";
+
+import {
+    IDashboard,
+    IKpiData,
+    IWidget,
+    IWidgets,
+    KpiComponent,
+    PizzagnaLayer,
+    WidgetTypesService,
+} from "@nova-ui/dashboards";
+
+interface IKpiLabelComparisonWidget {
+    id: string;
+    title: string;
+    label: string;
+    value: number;
+    units: string;
+    x: number;
+    y: number;
+    titleIcon?: string;
+    titleIconTooltip?: string;
+}
+
+const comparisonWidgets: IKpiLabelComparisonWidget[] = [
+    {
+        id: "kpiShortLabel",
+        title: "Short label",
+        label: "CPU",
+        value: 18,
+        units: "%",
+        x: 0,
+        y: 0,
+    },
+    {
+        id: "kpiShortLabelWithIcon",
+        title: "Short label + icon",
+        label: "CPU",
+        titleIcon: "clock_off",
+        titleIconTooltip: "Not affected by dashboard time filter",
+        value: 18,
+        units: "%",
+        x: 4,
+        y: 0,
+    },
+    {
+        id: "kpiMediumLabel",
+        title: "Medium label",
+        label: "Average response time",
+        value: 128,
+        units: "ms",
+        x: 8,
+        y: 0,
+    },
+    {
+        id: "kpiMediumLabelWithIcon",
+        title: "Medium label + icon",
+        label: "Average response time",
+        titleIcon: "clock_off",
+        titleIconTooltip: "Not affected by dashboard time filter",
+        value: 128,
+        units: "ms",
+        x: 0,
+        y: 3,
+    },
+    {
+        id: "kpiLongLabel",
+        title: "Long label",
+        label: "Average response time for background synchronization jobs",
+        value: 256,
+        units: "ms",
+        x: 4,
+        y: 3,
+    },
+    {
+        id: "kpiLongLabelWithIcon",
+        title: "Long label + icon",
+        label: "Average response time for background synchronization jobs",
+        titleIcon: "clock_off",
+        titleIconTooltip: "Not affected by dashboard time filter",
+        value: 256,
+        units: "ms",
+        x: 8,
+        y: 3,
+    },
+];
+
+@Component({
+    selector: "kpi-widget-label-resize-example",
+    templateUrl: "./kpi-widget-label-resize-example.component.html",
+    styleUrls: ["./kpi-widget-label-resize-example.component.less"],
+    standalone: false,
+})
+export class KpiWidgetLabelResizeExampleComponent implements OnInit {
+    public dashboard!: IDashboard;
+    public gridsterConfig: GridsterConfig = {};
+
+    constructor(private widgetTypesService: WidgetTypesService) {}
+
+    public ngOnInit(): void {
+        const positions = comparisonWidgets.reduce(
+            (
+                accumulator: Record<string, GridsterItemConfig>,
+                widget: IKpiLabelComparisonWidget
+            ) => {
+                accumulator[widget.id] = {
+                    cols: 4,
+                    rows: 3,
+                    x: widget.x,
+                    y: widget.y,
+                };
+
+                return accumulator;
+            },
+            {}
+        );
+
+        const widgets = comparisonWidgets.reduce(
+            (accumulator: IWidgets, widget: IKpiLabelComparisonWidget) => {
+                const widgetConfig = this.createWidgetConfig(widget);
+
+                accumulator[widgetConfig.id] =
+                    this.widgetTypesService.mergeWithWidgetType(widgetConfig);
+
+                return accumulator;
+            },
+            {} as IWidgets
+        );
+
+        this.dashboard = {
+            positions,
+            widgets,
+        };
+    }
+
+    private createWidgetConfig(
+        widget: IKpiLabelComparisonWidget
+    ): IWidget {
+        const componentId = `${widget.id}-tile`;
+        const widgetData: IKpiData = {
+            label: widget.label,
+            value: widget.value,
+            units: widget.units,
+        };
+        const headerProperties: Record<string, string | undefined> = {
+            title: widget.title,
+        };
+
+        if (widget.titleIcon) {
+            headerProperties.titleIcon = widget.titleIcon;
+            headerProperties.titleIconTooltip = widget.titleIconTooltip;
+        }
+
+        return {
+            id: widget.id,
+            type: "kpi",
+            pizzagna: {
+                [PizzagnaLayer.Configuration]: {
+                    header: {
+                        properties: headerProperties,
+                    },
+                    tiles: {
+                        properties: {
+                            nodes: [componentId],
+                        },
+                    },
+                    [componentId]: {
+                        id: componentId,
+                        componentType: KpiComponent.lateLoadKey,
+                        properties: {
+                            widgetData,
+                        },
+                    },
+                },
+            },
+        };
+    }
+}

packages/dashboards/package.json

@@ -6,8 +6,8 @@
     }
   ],
   "dependencies": {
-    "@nova-ui/bits": "~21.0.1",
-    "@nova-ui/charts": "~21.0.1"
+    "@nova-ui/bits": "~21.0.2",
+    "@nova-ui/charts": "~21.0.2"
   },
   "devDependencies": {
     "@apollo/client": "4.1.7",
@@ -91,5 +91,5 @@
     "test": "ng t lib -c coverage",
     "test:dev": "ng t lib -c dev"
   },
-  "version": "21.0.1"
-}
+  "version": "21.0.2"
+}

packages/dashboards/schematics/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dashboards-schematics",
   "license": "Apache-2.0",
-  "version": "21.0.1",
+  "version": "21.0.2",
   "scripts": {
     "assemble": "run-s build copy:json copy:data test copy:dist",
     "build": "tsc -p tsconfig.json",