@foxeltech/angular-ui 0.0.7 → 0.0.8

package/index.d.ts

@@ -832,9 +832,11 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     showPieLabel: boolean;
     mobileWidth: number;
     labelFontFamily: string;
+    emptyText: string;
     chartClick: EventEmitter<any>;
     chartInit: EventEmitter<ECharts>;
     chartOptions: EChartsOption;
+    isEmpty: boolean;
     labelFontSize: number;
     private chartInstance?;
     private resizeObserver?;
@@ -852,13 +854,14 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     private updateResponsiveState;
     private forceMediaRecalc;
     private rebuildChart;
+    private checkEmpty;
     private registry;
     private calcPieLayout;
     private detectType;
     private buildOptions;
     private resolvePalette;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "fx-ui-chart", never, { "type": { "alias": "type"; "required": false; }; "data": { "alias": "data"; "required": false; }; "options": { "alias": "options"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "pieLegendAlign": { "alias": "pieLegendAlign"; "required": false; }; "pieLegendPosition": { "alias": "pieLegendPosition"; "required": false; }; "showPieLabel": { "alias": "showPieLabel"; "required": false; }; "mobileWidth": { "alias": "mobileWidth"; "required": false; }; "labelFontFamily": { "alias": "labelFontFamily"; "required": false; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "fx-ui-chart", never, { "type": { "alias": "type"; "required": false; }; "data": { "alias": "data"; "required": false; }; "options": { "alias": "options"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "pieLegendAlign": { "alias": "pieLegendAlign"; "required": false; }; "pieLegendPosition": { "alias": "pieLegendPosition"; "required": false; }; "showPieLabel": { "alias": "showPieLabel"; "required": false; }; "mobileWidth": { "alias": "mobileWidth"; "required": false; }; "labelFontFamily": { "alias": "labelFontFamily"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, false, never>;
 }
 
 declare class SliderComponent extends FxComponent<any> implements AfterViewInit {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
   "main": "bundles/ui.umd.js",
   "module": "fesm2022/foxeltech-angular-ui.mjs",

package/src/lib/ui/components/chart/chart.component.html

@@ -1,11 +1,20 @@
 <div class="chart-wrapper" [style.height]="height">
-  <div
-    echarts
-    [options]="chartOptions"
-    [loading]="loading"
-    (chartInit)="onChartInit($event)"
-    (chartClick)="onChartClick($event)"
-    class="fx-chart"
-    [style.height]="height"
-  ></div>
+  @if (isEmpty) {
+    <div class="chart-empty">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="chart-empty-icon">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
+      </svg>
+      <span class="chart-empty-text">{{ emptyText }}</span>
+    </div>
+  } @else {
+    <div
+      echarts
+      [options]="chartOptions"
+      [loading]="loading"
+      (chartInit)="onChartInit($event)"
+      (chartClick)="onChartClick($event)"
+      class="fx-chart"
+      [style.height]="height"
+    ></div>
+  }
 </div>