@praxisui/charts 6.0.0-beta.0 → 7.0.0-beta.0
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.
- package/fesm2022/praxisui-charts.mjs +67 -23
- package/index.d.ts +3 -0
- package/package.json +2 -2
|
@@ -1330,6 +1330,7 @@ class PraxisChartComponent {
|
|
|
1330
1330
|
mappedRuntimeConfig = signal(null, ...(ngDevMode ? [{ debugName: "mappedRuntimeConfig" }] : []));
|
|
1331
1331
|
chartDocumentMappingError = signal(null, ...(ngDevMode ? [{ debugName: "chartDocumentMappingError" }] : []));
|
|
1332
1332
|
fillContainerHeight = signal(false, ...(ngDevMode ? [{ debugName: "fillContainerHeight" }] : []));
|
|
1333
|
+
resizeFrameId = null;
|
|
1333
1334
|
previousRemoteSignature = null;
|
|
1334
1335
|
previousDocumentSignature = null;
|
|
1335
1336
|
editorSessionSubscriptions = [];
|
|
@@ -1558,6 +1559,7 @@ class PraxisChartComponent {
|
|
|
1558
1559
|
this.clearEditorSessionSubscriptions();
|
|
1559
1560
|
this.resizeObserver()?.disconnect();
|
|
1560
1561
|
this.shellObserver()?.disconnect();
|
|
1562
|
+
this.cancelScheduledResize();
|
|
1561
1563
|
this.engine.destroy();
|
|
1562
1564
|
});
|
|
1563
1565
|
}
|
|
@@ -1615,7 +1617,7 @@ class PraxisChartComponent {
|
|
|
1615
1617
|
return;
|
|
1616
1618
|
}
|
|
1617
1619
|
const observer = new ResizeObserver(() => {
|
|
1618
|
-
this.
|
|
1620
|
+
this.scheduleEngineResize();
|
|
1619
1621
|
});
|
|
1620
1622
|
observer.observe(host);
|
|
1621
1623
|
this.resizeObserver.set(observer);
|
|
@@ -1658,21 +1660,29 @@ class PraxisChartComponent {
|
|
|
1658
1660
|
this.shellObserver.set(observer);
|
|
1659
1661
|
}
|
|
1660
1662
|
scheduleResizeAfterShellModeChange() {
|
|
1661
|
-
|
|
1663
|
+
this.scheduleEngineResize();
|
|
1664
|
+
}
|
|
1665
|
+
scheduleEngineResize() {
|
|
1666
|
+
if (typeof requestAnimationFrame !== 'function') {
|
|
1662
1667
|
this.engine.resize();
|
|
1663
|
-
};
|
|
1664
|
-
if (typeof requestAnimationFrame === 'function') {
|
|
1665
|
-
requestAnimationFrame(() => {
|
|
1666
|
-
runResize();
|
|
1667
|
-
requestAnimationFrame(() => {
|
|
1668
|
-
runResize();
|
|
1669
|
-
});
|
|
1670
|
-
});
|
|
1671
1668
|
return;
|
|
1672
1669
|
}
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
}
|
|
1670
|
+
if (this.resizeFrameId !== null) {
|
|
1671
|
+
return;
|
|
1672
|
+
}
|
|
1673
|
+
this.resizeFrameId = requestAnimationFrame(() => {
|
|
1674
|
+
this.resizeFrameId = null;
|
|
1675
|
+
this.engine.resize();
|
|
1676
|
+
});
|
|
1677
|
+
}
|
|
1678
|
+
cancelScheduledResize() {
|
|
1679
|
+
if (this.resizeFrameId === null) {
|
|
1680
|
+
return;
|
|
1681
|
+
}
|
|
1682
|
+
if (typeof cancelAnimationFrame === 'function') {
|
|
1683
|
+
cancelAnimationFrame(this.resizeFrameId);
|
|
1684
|
+
}
|
|
1685
|
+
this.resizeFrameId = null;
|
|
1676
1686
|
}
|
|
1677
1687
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1678
1688
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved" }, providers: [
|
|
@@ -1698,10 +1708,27 @@ class PraxisChartComponent {
|
|
|
1698
1708
|
|
|
1699
1709
|
@if (loadState() === 'loading') {
|
|
1700
1710
|
<div class="praxis-chart-state praxis-chart-state-loading">
|
|
1701
|
-
<div class="praxis-chart-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1711
|
+
<div class="praxis-chart-loading-hero" aria-hidden="true">
|
|
1712
|
+
<div class="praxis-chart-loading-summary">
|
|
1713
|
+
<span class="praxis-chart-loading-chip"></span>
|
|
1714
|
+
<span class="praxis-chart-loading-chip praxis-chart-loading-chip--short"></span>
|
|
1715
|
+
</div>
|
|
1716
|
+
<div class="praxis-chart-loading-plot">
|
|
1717
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--1"></span>
|
|
1718
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--2"></span>
|
|
1719
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--3"></span>
|
|
1720
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--4"></span>
|
|
1721
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--5"></span>
|
|
1722
|
+
</div>
|
|
1723
|
+
</div>
|
|
1724
|
+
<div class="praxis-chart-state-copy">
|
|
1725
|
+
@if (loadingLabel()) {
|
|
1726
|
+
<div class="praxis-chart-state-title">{{ loadingLabel() }}</div>
|
|
1727
|
+
}
|
|
1728
|
+
<div class="praxis-chart-state-description">
|
|
1729
|
+
Publicando o recorte analitico e preparando os buckets visuais.
|
|
1730
|
+
</div>
|
|
1731
|
+
</div>
|
|
1705
1732
|
</div>
|
|
1706
1733
|
} @else if (loadState() === 'error') {
|
|
1707
1734
|
<div class="praxis-chart-state praxis-chart-state-error">
|
|
@@ -1725,7 +1752,7 @@ class PraxisChartComponent {
|
|
|
1725
1752
|
<div #chartHost class="praxis-chart-host"></div>
|
|
1726
1753
|
}
|
|
1727
1754
|
</section>
|
|
1728
|
-
`, isInline: true, styles: [":host{display:block;height:100%;min-width:0}:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;display:grid;
|
|
1755
|
+
`, isInline: true, styles: [":host{display:block;height:100%;min-width:0}:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:14px;background:linear-gradient(180deg,#ffffff8c,#ffffff2e),linear-gradient(0deg,#1263b40a,#1263b400);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1729
1756
|
}
|
|
1730
1757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartComponent, decorators: [{
|
|
1731
1758
|
type: Component,
|
|
@@ -1752,10 +1779,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1752
1779
|
|
|
1753
1780
|
@if (loadState() === 'loading') {
|
|
1754
1781
|
<div class="praxis-chart-state praxis-chart-state-loading">
|
|
1755
|
-
<div class="praxis-chart-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1782
|
+
<div class="praxis-chart-loading-hero" aria-hidden="true">
|
|
1783
|
+
<div class="praxis-chart-loading-summary">
|
|
1784
|
+
<span class="praxis-chart-loading-chip"></span>
|
|
1785
|
+
<span class="praxis-chart-loading-chip praxis-chart-loading-chip--short"></span>
|
|
1786
|
+
</div>
|
|
1787
|
+
<div class="praxis-chart-loading-plot">
|
|
1788
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--1"></span>
|
|
1789
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--2"></span>
|
|
1790
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--3"></span>
|
|
1791
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--4"></span>
|
|
1792
|
+
<span class="praxis-chart-loading-bar praxis-chart-loading-bar--5"></span>
|
|
1793
|
+
</div>
|
|
1794
|
+
</div>
|
|
1795
|
+
<div class="praxis-chart-state-copy">
|
|
1796
|
+
@if (loadingLabel()) {
|
|
1797
|
+
<div class="praxis-chart-state-title">{{ loadingLabel() }}</div>
|
|
1798
|
+
}
|
|
1799
|
+
<div class="praxis-chart-state-description">
|
|
1800
|
+
Publicando o recorte analitico e preparando os buckets visuais.
|
|
1801
|
+
</div>
|
|
1802
|
+
</div>
|
|
1759
1803
|
</div>
|
|
1760
1804
|
} @else if (loadState() === 'error') {
|
|
1761
1805
|
<div class="praxis-chart-state praxis-chart-state-error">
|
|
@@ -1779,7 +1823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1779
1823
|
<div #chartHost class="praxis-chart-host"></div>
|
|
1780
1824
|
}
|
|
1781
1825
|
</section>
|
|
1782
|
-
`, styles: [":host{display:block;height:100%;min-width:0}:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;display:grid;
|
|
1826
|
+
`, styles: [":host{display:block;height:100%;min-width:0}:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:14px;background:linear-gradient(180deg,#ffffff8c,#ffffff2e),linear-gradient(0deg,#1263b40a,#1263b400);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
|
|
1783
1827
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
|
|
1784
1828
|
function normalizeFilterCriteria(criteria) {
|
|
1785
1829
|
if (!criteria)
|
package/index.d.ts
CHANGED
|
@@ -403,6 +403,7 @@ declare class PraxisChartComponent {
|
|
|
403
403
|
private readonly mappedRuntimeConfig;
|
|
404
404
|
private readonly chartDocumentMappingError;
|
|
405
405
|
private readonly fillContainerHeight;
|
|
406
|
+
private resizeFrameId;
|
|
406
407
|
private previousRemoteSignature;
|
|
407
408
|
private previousDocumentSignature;
|
|
408
409
|
private editorSessionSubscriptions;
|
|
@@ -425,6 +426,8 @@ declare class PraxisChartComponent {
|
|
|
425
426
|
private clearEditorSessionSubscriptions;
|
|
426
427
|
private observeShellSizingContext;
|
|
427
428
|
private scheduleResizeAfterShellModeChange;
|
|
429
|
+
private scheduleEngineResize;
|
|
430
|
+
private cancelScheduledResize;
|
|
428
431
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PraxisChartComponent, never>;
|
|
429
432
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisChartComponent, "praxis-chart", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "chartDocument": { "alias": "chartDocument"; "required": false; "isSignal": true; }; "filterCriteria": { "alias": "filterCriteria"; "required": false; "isSignal": true; }; "queryContext": { "alias": "queryContext"; "required": false; "isSignal": true; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; "isSignal": true; }; "availableResources": { "alias": "availableResources"; "required": false; "isSignal": true; }; "availableFields": { "alias": "availableFields"; "required": false; "isSignal": true; }; "availableTargets": { "alias": "availableTargets"; "required": false; "isSignal": true; }; }, { "pointClick": "pointClick"; "queryRequest": "queryRequest"; "loadStateChange": "loadStateChange"; "chartDocumentApplied": "chartDocumentApplied"; "chartDocumentSaved": "chartDocumentSaved"; }, never, never, true, never>;
|
|
430
433
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/charts",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0-beta.0",
|
|
4
4
|
"description": "Metadata-driven charts library for Praxis UI Angular with engine adapters and Apache ECharts as the initial renderer.",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": "^20.0.0",
|
|
7
7
|
"@angular/core": "^20.0.0",
|
|
8
|
-
"@praxisui/core": "^
|
|
8
|
+
"@praxisui/core": "^7.0.0-beta.0"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"echarts": "^6.0.0",
|