Feature/v20/decouple kpi and proportional widget view

packages/dashboards/examples/src/components/docs/dashboard-docs.module.ts

@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { provideHttpClient } from "@angular/common/http";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
 import { inject, NgModule, Type } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { InMemoryCache } from "@apollo/client/core";
@@ -61,7 +61,7 @@ const exampleRoutes: Routes = [
         RouterModule.forChild(exampleRoutes),
     ],
     providers: [
-        provideHttpClient(),
+        provideHttpClient(withInterceptorsFromDi()),
         provideApollo(() => {
             const httpLink = inject(HttpLink);
 

packages/dashboards/examples/src/components/docs/widget-types/view-components/kpi-tile-view-basic/kpi-tile-view-basic-example.component.html

@@ -0,0 +1,63 @@
+<div class="d-flex flex-column gap-3">
+    <!-- Playground controls: switch between all available view states -->
+    <div class="d-flex flex-wrap mb-3" style="gap: 16px 24px;">
+        <nui-form-field caption="State" style="width: 220px;">
+            <nui-select-v2 [formControl]="stateControl">
+                <nui-select-v2-option
+                    *ngFor="let opt of stateOptions"
+                    [value]="opt"
+                >
+                    {{ opt }}
+                </nui-select-v2-option>
+            </nui-select-v2>
+        </nui-form-field>
+
+        <nui-form-field caption="Interactive" style="width: 220px;">
+            <nui-switch [(value)]="interactive"></nui-switch>
+        </nui-form-field>
+    </div>
+
+    <div class="d-flex gap-3" style="height: 200px;">
+        <nui-kpi-tile-view
+            class="flex-grow-1"
+            style="flex: 1 1 0; min-width: 0;"
+            [value]="stateControl.value === 'normal' ? 42 : null"
+            label="Nodes Up"
+            units="%"
+            backgroundColor="#2cc079"
+            [loading]="stateControl.value === 'loading'"
+            [empty]="stateControl.value === 'empty'"
+            [interactive]="interactive"
+            (tileClick)="onTileClick('Nodes Up')"
+        ></nui-kpi-tile-view>
+
+        <nui-kpi-tile-view
+            class="flex-grow-1"
+            style="flex: 1 1 0; min-width: 0;"
+            [value]="stateControl.value === 'normal' ? 7 : null"
+            label="Critical Alerts"
+            backgroundColor="#f3a002"
+            [loading]="stateControl.value === 'loading'"
+            [empty]="stateControl.value === 'empty'"
+            [interactive]="interactive"
+            (tileClick)="onTileClick('Critical Alerts')"
+        ></nui-kpi-tile-view>
+
+        <nui-kpi-tile-view
+            class="flex-grow-1"
+            style="flex: 1 1 0; min-width: 0;"
+            [value]="stateControl.value === 'normal' ? 123 : null"
+            label="Throughput"
+            units="req/s"
+            backgroundColor="#3b5998"
+            [loading]="stateControl.value === 'loading'"
+            [empty]="stateControl.value === 'empty'"
+            [interactive]="interactive"
+            (tileClick)="onTileClick('Throughput')"
+        ></nui-kpi-tile-view>
+    </div>
+
+    <p *ngIf="interactive && lastClicked" class="mb-0">
+        Last clicked: <strong>{{ lastClicked }}</strong>
+    </p>
+</div>

packages/dashboards/examples/src/components/docs/widget-types/view-components/kpi-tile-view-basic/kpi-tile-view-basic-example.component.ts

@@ -0,0 +1,48 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import { FormControl } from "@angular/forms";
+
+type KpiTileState = "normal" | "loading" | "empty";
+
+/**
+ * KPI Tile View - Playground example.
+ * Switch between all visual states (normal / loading / empty) and toggle
+ * interactivity to explore every variant the standalone tile supports.
+ */
+@Component({
+    selector: "kpi-tile-view-basic-example",
+    templateUrl: "./kpi-tile-view-basic-example.component.html",
+    standalone: false,
+})
+export class KpiTileViewBasicExampleComponent {
+    public readonly stateControl = new FormControl<KpiTileState>("normal", {
+        nonNullable: true,
+    });
+    public interactive = false;
+    public lastClicked = "";
+
+    public readonly stateOptions: KpiTileState[] = ["normal", "loading", "empty"];
+
+    public onTileClick(label: string): void {
+        this.lastClicked = label;
+    }
+}

packages/dashboards/examples/src/components/docs/widget-types/view-components/kpi-tile-view-interactive/kpi-tile-view-interactive-example.component.html

@@ -0,0 +1,35 @@
+<div class="d-flex gap-3" style="height: 200px;">
+    <!-- Interactive tile that emits tileClick events -->
+    <nui-kpi-tile-view
+        class="flex-grow-1"
+        style="flex: 1 1 0; min-width: 0;"
+        [value]="currentValue"
+        label="Active Sessions"
+        units="sessions"
+        backgroundColor="#0058e9"
+        [interactive]="true"
+        [valueTemplate]="customValueTpl"
+        (tileClick)="onTileClick()"
+    ></nui-kpi-tile-view>
+
+    <nui-kpi-tile-view
+        class="flex-grow-1"
+        style="flex: 1 1 0; min-width: 0;"
+        [value]="98.7"
+        label="Uptime"
+        units="%"
+        backgroundColor="#2cc079"
+        [interactive]="true"
+        (tileClick)="onUptimeClick()"
+    ></nui-kpi-tile-view>
+</div>
+
+<p class="mt-3" *ngIf="lastClickedTile">
+    Last clicked: <strong>{{ lastClickedTile }}</strong>
+</p>
+
+<!-- Custom value template: renders value with a prefix icon -->
+<ng-template #customValueTpl let-val>
+    <nui-icon icon="status_up" class="mr-1"></nui-icon>
+    <strong>{{ val }}</strong>
+</ng-template>

packages/dashboards/examples/src/components/docs/widget-types/view-components/kpi-tile-view-interactive/kpi-tile-view-interactive-example.component.ts

@@ -0,0 +1,46 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component, TemplateRef, ViewChild } from "@angular/core";
+
+/**
+ * Interactive KPI Tile View example with custom value formatting
+ * and click event handling.
+ */
+@Component({
+    selector: "kpi-tile-view-interactive-example",
+    templateUrl: "./kpi-tile-view-interactive-example.component.html",
+    standalone: false,
+})
+export class KpiTileViewInteractiveExampleComponent {
+    public currentValue = 1_247;
+    public lastClickedTile = "";
+
+    @ViewChild("customValueTpl", { static: true })
+    public customValueTpl: TemplateRef<any>;
+
+    public onTileClick(): void {
+        this.lastClickedTile = "Active Sessions";
+    }
+
+    public onUptimeClick(): void {
+        this.lastClickedTile = "Uptime";
+    }
+}

packages/dashboards/examples/src/components/docs/widget-types/view-components/proportional-chart-view-playground/proportional-chart-view-playground-example.component.html

@@ -0,0 +1,42 @@
+<div class="d-flex flex-column gap-3">
+    <!-- Playground controls: switch between all available view options -->
+    <div class="d-flex flex-wrap mb-3" style="gap: 16px 24px;">
+        <nui-form-field caption="Chart type" style="width: 220px;">
+            <nui-select-v2 [formControl]="chartTypeControl">
+                <nui-select-v2-option
+                    *ngFor="let opt of chartTypeOptions"
+                    [value]="opt"
+                >
+                    {{ opt }}
+                </nui-select-v2-option>
+            </nui-select-v2>
+        </nui-form-field>
+
+        <nui-form-field caption="Legend placement" style="width: 220px;">
+            <nui-select-v2 [formControl]="legendPlacementControl">
+                <nui-select-v2-option
+                    *ngFor="let opt of legendPlacementOptions"
+                    [value]="opt"
+                >
+                    {{ opt }}
+                </nui-select-v2-option>
+            </nui-select-v2>
+        </nui-form-field>
+    </div>
+
+    <div style="height: 300px; width: 100%;">
+        <nui-proportional-chart-view
+            class="d-flex h-100 w-100 justify-content-center align-items-center"
+            [data]="chartData"
+            [chartType]="chartTypeControl.value"
+            [legendPlacement]="legendPlacementControl.value"
+            [colors]="colors"
+            [donutContentTemplate]="donutContentTpl"
+        ></nui-proportional-chart-view>
+    </div>
+</div>
+
+<!-- Optional: custom donut center content (shown only for chartType="donut") -->
+<ng-template #donutContentTpl let-data>
+    <div class="nui-text-page">{{ totalOf(data) }}</div>
+</ng-template>

packages/dashboards/examples/src/components/docs/widget-types/view-components/proportional-chart-view-playground/proportional-chart-view-playground-example.component.ts

@@ -0,0 +1,78 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import { FormControl } from "@angular/forms";
+
+import { IProportionalDataItem } from "@nova-ui/dashboards";
+
+type ProportionalChartType = "donut" | "pie" | "verticalBar" | "horizontalBar";
+type LegendPlacement = "right" | "bottom" | "none";
+
+/**
+ * Proportional Chart View - Playground example.
+ * Lets you switch between all supported chart types and legend placements
+ * to see every visual variant the standalone view component provides.
+ */
+@Component({
+    selector: "proportional-chart-view-playground-example",
+    templateUrl: "./proportional-chart-view-playground-example.component.html",
+    standalone: false,
+})
+export class ProportionalChartViewPlaygroundExampleComponent {
+    public readonly chartTypeControl = new FormControl<ProportionalChartType>(
+        "donut",
+        { nonNullable: true }
+    );
+    public readonly legendPlacementControl = new FormControl<LegendPlacement>(
+        "right",
+        { nonNullable: true }
+    );
+
+    public readonly chartTypeOptions: ProportionalChartType[] = [
+        "donut",
+        "pie",
+        "verticalBar",
+        "horizontalBar",
+    ];
+    public readonly legendPlacementOptions: LegendPlacement[] = [
+        "right",
+        "bottom",
+        "none",
+    ];
+
+    public colors: Record<string, string> = {
+        down: "#dc3545",
+        up: "#2cc079",
+        warning: "#f3a002",
+        unknown: "#707070",
+    };
+
+    public chartData: Array<IProportionalDataItem> = [
+        { id: "up", name: "Up", value: 78 },
+        { id: "down", name: "Down", value: 8 },
+        { id: "warning", name: "Warning", value: 12 },
+        { id: "unknown", name: "Unknown", value: 2 },
+    ];
+
+    public totalOf(data: IProportionalDataItem[] | undefined): number {
+        return (data ?? []).reduce((sum, d) => sum + (d?.value ?? 0), 0);
+    }
+}