diff --git a/package.json b/package.json index 0552d5d01..5d4f196ec 100644 --- a/package.json +++ b/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/*" + ] } diff --git a/packages/bits/package.json b/packages/bits/package.json index 526725f53..afc3789fb 100644 --- a/packages/bits/package.json +++ b/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" } diff --git a/packages/bits/schematics/package.json b/packages/bits/schematics/package.json index de32bd3f6..cce7962d7 100644 --- a/packages/bits/schematics/package.json +++ b/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", diff --git a/packages/bits/src/lib/icon/icons.ts b/packages/bits/src/lib/icon/icons.ts index 886e37d35..eef55a7e8 100644 --- a/packages/bits/src/lib/icon/icons.ts +++ b/packages/bits/src/lib/icon/icons.ts @@ -158,6 +158,13 @@ export const icons: ITypedIconData[] = [ category: IconCategory.Command, code: "\n \n\n", }, + { + svgFile: "clock_off.svg", + name: "clock_off", + cat_namespace: IconCategoryNamespace.Command, + category: IconCategory.Command, + code: "\n \n \n\n", + }, { svgFile: "close.svg", name: "close", @@ -318,6 +325,13 @@ export const icons: ITypedIconData[] = [ category: IconCategory.Command, code: "\n \n\n", }, + { + svgFile: "no-filter.svg", + name: "no-filter", + cat_namespace: IconCategoryNamespace.Command, + category: IconCategory.Command, + code: "\n\n\n\n\n\n\n", + }, { svgFile: "fullscreen.svg", name: "fullscreen", diff --git a/packages/charts/package.json b/packages/charts/package.json index ae1198c0c..6abbe6376 100644 --- a/packages/charts/package.json +++ b/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" +} \ No newline at end of file diff --git a/packages/dashboards/examples/src/components/docs/demo.files.ts b/packages/dashboards/examples/src/components/docs/demo.files.ts index 3401b0327..e3c4e68f6 100644 --- a/packages/dashboards/examples/src/components/docs/demo.files.ts +++ b/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", diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.component.html b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.component.html index 305335ea5..d31b2eed6 100644 --- a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.component.html +++ b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.component.html @@ -19,6 +19,20 @@

KPI Widget

+

Label Resizing With Icons

+

+ 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. +

+ + + + +

Interaction Handling

The example below has the diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.module.ts b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.module.ts index 1a91c0c31..3e1ec46a5 100644 --- a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-docs.module.ts +++ b/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, diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.html b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.html new file mode 100644 index 000000000..ed0a5a3ba --- /dev/null +++ b/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) { +

+ + +
+} \ No newline at end of file diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.less b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.less new file mode 100644 index 000000000..863fb58b6 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/kpi/kpi-widget-label-resize/kpi-widget-label-resize-example.component.ts new file mode 100644 index 000000000..fe30a6d35 --- /dev/null +++ b/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, + 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 = { + 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, + }, + }, + }, + }, + }; + } +} \ No newline at end of file diff --git a/packages/dashboards/package.json b/packages/dashboards/package.json index 159f95bb3..e574a8799 100644 --- a/packages/dashboards/package.json +++ b/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" +} \ No newline at end of file diff --git a/packages/dashboards/schematics/package.json b/packages/dashboards/schematics/package.json index a1bcd5d6d..2b81fa1be 100644 --- a/packages/dashboards/schematics/package.json +++ b/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", diff --git a/packages/dashboards/src/lib/components/widget/widget-header/widget-header.component.html b/packages/dashboards/src/lib/components/widget/widget-header/widget-header.component.html index 758b7f7ac..85a718536 100644 --- a/packages/dashboards/src/lib/components/widget/widget-header/widget-header.component.html +++ b/packages/dashboards/src/lib/components/widget/widget-header/widget-header.component.html @@ -35,34 +35,53 @@ withCustomElement || editMode " > - - @if (!url || editMode) { -

- {{ title }} -

- } +
+ + @if (!url || editMode) { +

+ {{ title }} +

+ } - - @if (url && !editMode) { -

- {{ title }} + @if (url && !editMode) { +

+ {{ title }} +

+ } + + @if (showTitleIcon) { + - - } @if (subtitle) { + + + } +
+ + @if (subtitle) {
{ }); }); + describe("title icon", () => { + it("shows the title icon on the right side of the title when provided", () => { + component.title = "Widget title"; + component.titleIcon = "clock_off"; + component.titleIconTooltip = + "Not affected by dashboard time filter"; + + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + const titleIcon = bannerElement.querySelector( + ".nui-widget__header__content-title-icon" + ) as HTMLElement; + + expect(titleIcon).toBeTruthy(); + expect(titleIcon.getAttribute("title")).toBe( + "Not affected by dashboard time filter" + ); + expect(titleIcon.getAttribute("aria-label")).toBe( + "Not affected by dashboard time filter" + ); + }); + + it("does not render the title icon when no icon is provided", () => { + component.title = "Widget title"; + + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + expect( + bannerElement.querySelector( + ".nui-widget__header__content-title-icon" + ) + ).toBeNull(); + }); + }); + describe("ngOnInit > ", () => { it("should not collapse the header if collapsible is false", () => { component.collapsible = false; diff --git a/packages/dashboards/src/lib/components/widget/widget-header/widget-header.component.ts b/packages/dashboards/src/lib/components/widget/widget-header/widget-header.component.ts index 9b2cc4ab2..57803c80f 100644 --- a/packages/dashboards/src/lib/components/widget/widget-header/widget-header.component.ts +++ b/packages/dashboards/src/lib/components/widget/widget-header/widget-header.component.ts @@ -92,6 +92,9 @@ export class WidgetHeaderComponent implements OnInit, OnDestroy, AfterViewInit { @Input() public collapsible = false; @Input() public reloadable = true; @Input() public title: string; + @Input() public titleIcon: string; + @Input() public titleIconSize: string = "small"; + @Input() public titleIconTooltip: string; @Input() public subtitle: string; @Input() public hideMenu: boolean = false; @Input() public url: string; @@ -114,6 +117,14 @@ export class WidgetHeaderComponent implements OnInit, OnDestroy, AfterViewInit { return this.collapsed && this.collapsible ? "collapsed" : "expanded"; } + public get hasTitleIcon(): boolean { + return !!this.titleIcon; + } + + public get showTitleIcon(): boolean { + return this.hasTitleIcon; + } + public linkTooltip = $localize`Explore this data`; constructor(