@foxeltech/angular-ui 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -313,8 +313,30 @@ class FxUtils {
|
|
|
313
313
|
return _.isEqual(model, compareModel);
|
|
314
314
|
}
|
|
315
315
|
static parseError(err) {
|
|
316
|
-
|
|
317
|
-
|
|
316
|
+
const status = _.get(err, 'status');
|
|
317
|
+
switch (status) {
|
|
318
|
+
case 401:
|
|
319
|
+
return 'Session timeout. Please login again.';
|
|
320
|
+
case 403:
|
|
321
|
+
return 'You do not have permission to perform this action.';
|
|
322
|
+
case 404:
|
|
323
|
+
return 'The requested resource was not found.';
|
|
324
|
+
case 408:
|
|
325
|
+
return 'The request timed out. Please try again.';
|
|
326
|
+
case 409:
|
|
327
|
+
return 'A conflict occurred. Please refresh and try again.';
|
|
328
|
+
case 413:
|
|
329
|
+
return 'The uploaded data is too large.';
|
|
330
|
+
case 429:
|
|
331
|
+
return 'Too many requests. Please wait a moment and try again.';
|
|
332
|
+
case 500:
|
|
333
|
+
return 'An internal server error occurred. Please try again later.';
|
|
334
|
+
case 502:
|
|
335
|
+
return 'The server is temporarily unavailable. Please try again later.';
|
|
336
|
+
case 503:
|
|
337
|
+
return 'The service is currently unavailable. Please try again later.';
|
|
338
|
+
case 504:
|
|
339
|
+
return 'The server took too long to respond. Please try again later.';
|
|
318
340
|
}
|
|
319
341
|
if (this.isStringEmpty(_.get(err, 'error.code'))) {
|
|
320
342
|
return _.get(err, 'error.errors', 'Unknown Error');
|
|
@@ -1626,11 +1648,13 @@ class ChartComponent {
|
|
|
1626
1648
|
showPieLabel = true;
|
|
1627
1649
|
mobileWidth = 350;
|
|
1628
1650
|
labelFontFamily = 'DMSans';
|
|
1651
|
+
emptyText = 'No data available';
|
|
1629
1652
|
/* ================= OUTPUTS ================= */
|
|
1630
1653
|
chartClick = new EventEmitter();
|
|
1631
1654
|
chartInit = new EventEmitter();
|
|
1632
1655
|
/* ================= INTERNAL ================= */
|
|
1633
1656
|
chartOptions = {};
|
|
1657
|
+
isEmpty = false;
|
|
1634
1658
|
labelFontSize = 12;
|
|
1635
1659
|
chartInstance;
|
|
1636
1660
|
resizeObserver;
|
|
@@ -1707,12 +1731,34 @@ class ChartComponent {
|
|
|
1707
1731
|
this.chartInstance.resize();
|
|
1708
1732
|
}
|
|
1709
1733
|
rebuildChart() {
|
|
1734
|
+
this.isEmpty = this.checkEmpty();
|
|
1735
|
+
if (this.isEmpty) {
|
|
1736
|
+
if (this.chartInstance) {
|
|
1737
|
+
this.chartInstance.clear();
|
|
1738
|
+
}
|
|
1739
|
+
return;
|
|
1740
|
+
}
|
|
1710
1741
|
this.chartOptions = this.buildOptions();
|
|
1711
1742
|
if (this.chartInstance) {
|
|
1712
1743
|
this.chartInstance.clear();
|
|
1713
1744
|
this.chartInstance.setOption(this.chartOptions, true);
|
|
1714
1745
|
}
|
|
1715
1746
|
}
|
|
1747
|
+
checkEmpty() {
|
|
1748
|
+
const type = this.detectType();
|
|
1749
|
+
if (type === 'bar') {
|
|
1750
|
+
const categories = this.data?.categories;
|
|
1751
|
+
const values = this.data?.values;
|
|
1752
|
+
return !categories?.length || !values?.length;
|
|
1753
|
+
}
|
|
1754
|
+
if (type === 'pie') {
|
|
1755
|
+
if (!Array.isArray(this.data) || this.data.length === 0)
|
|
1756
|
+
return true;
|
|
1757
|
+
const total = this.data.reduce((sum, d) => sum + (d.value || 0), 0);
|
|
1758
|
+
return total === 0;
|
|
1759
|
+
}
|
|
1760
|
+
return false;
|
|
1761
|
+
}
|
|
1716
1762
|
/* ================= REGISTRY ================= */
|
|
1717
1763
|
registry = {
|
|
1718
1764
|
bar: (data, colors) => ({
|
|
@@ -1952,11 +1998,11 @@ class ChartComponent {
|
|
|
1952
1998
|
});
|
|
1953
1999
|
}
|
|
1954
2000
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1955
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2001
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChartComponent, isStandalone: false, selector: "fx-ui-chart", inputs: { type: "type", data: "data", options: "options", palette: "palette", height: "height", loading: "loading", pieLegendAlign: "pieLegendAlign", pieLegendPosition: "pieLegendPosition", showPieLabel: "showPieLabel", mobileWidth: "mobileWidth", labelFontFamily: "labelFontFamily", emptyText: "emptyText" }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n @if (isEmpty) {\n <div class=\"chart-empty\">\n <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\">\n <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\" />\n </svg>\n <span class=\"chart-empty-text\">{{ emptyText }}</span>\n </div>\n } @else {\n <div\n echarts\n [options]=\"chartOptions\"\n [loading]=\"loading\"\n (chartInit)=\"onChartInit($event)\"\n (chartClick)=\"onChartClick($event)\"\n class=\"fx-chart\"\n [style.height]=\"height\"\n ></div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$5.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
|
|
1956
2002
|
}
|
|
1957
2003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, decorators: [{
|
|
1958
2004
|
type: Component,
|
|
1959
|
-
args: [{ selector: 'fx-ui-chart', standalone: false, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n <div\n echarts\n
|
|
2005
|
+
args: [{ selector: 'fx-ui-chart', standalone: false, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n @if (isEmpty) {\n <div class=\"chart-empty\">\n <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\">\n <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\" />\n </svg>\n <span class=\"chart-empty-text\">{{ emptyText }}</span>\n </div>\n } @else {\n <div\n echarts\n [options]=\"chartOptions\"\n [loading]=\"loading\"\n (chartInit)=\"onChartInit($event)\"\n (chartClick)=\"onChartClick($event)\"\n class=\"fx-chart\"\n [style.height]=\"height\"\n ></div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"] }]
|
|
1960
2006
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
|
|
1961
2007
|
type: Input
|
|
1962
2008
|
}], data: [{
|
|
@@ -1979,6 +2025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
1979
2025
|
type: Input
|
|
1980
2026
|
}], labelFontFamily: [{
|
|
1981
2027
|
type: Input
|
|
2028
|
+
}], emptyText: [{
|
|
2029
|
+
type: Input
|
|
1982
2030
|
}], chartClick: [{
|
|
1983
2031
|
type: Output
|
|
1984
2032
|
}], chartInit: [{
|