@kubex/zinc 1.1.180 → 1.1.181
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/dist/custom-elements.json +691 -453
- package/dist/vscode.html-custom-data.json +102 -64
- package/dist/web-types.json +243 -163
- package/dist/zn.d.ts +108 -11
- package/dist/zn.min.js +330 -321
- package/docs/pages/components/chart.md +49 -0
- package/docs/pages/components/stat.md +74 -0
- package/docs/pages/components/tile.md +16 -0
- package/package.json +1 -1
- package/src/components/chart/builders.ts +15 -0
- package/src/components/chart/chart-live.test.ts +82 -0
- package/src/components/chart/chart.component.ts +111 -14
- package/src/components/chart/live.test.ts +96 -0
- package/src/components/chart/live.ts +164 -0
- package/src/components/cols/cols.scss +16 -0
- package/src/components/stat/stat.component.ts +81 -12
- package/src/components/stat/stat.scss +64 -0
- package/src/components/tile/tile.component.ts +3 -0
- package/src/components/tile/tile.scss +30 -0
package/dist/zn.d.ts
CHANGED
|
@@ -4607,6 +4607,8 @@ declare module "components/tile/tile.component" {
|
|
|
4607
4607
|
inline: boolean;
|
|
4608
4608
|
/** Renders the caption in the normal table-content weight instead of bold. */
|
|
4609
4609
|
plain: boolean;
|
|
4610
|
+
/** Moves the actions under the caption and description when the tile is narrower than 600px. */
|
|
4611
|
+
stackActions: boolean;
|
|
4610
4612
|
/** Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row. */
|
|
4611
4613
|
grouped: boolean;
|
|
4612
4614
|
private _isLink;
|
|
@@ -4806,11 +4808,19 @@ declare module "components/chart/builders" {
|
|
|
4806
4808
|
import type { EChartsOption } from 'echarts';
|
|
4807
4809
|
export type ChartType = 'area' | 'bar' | 'donut' | 'funnel' | 'gauge' | 'heatmap' | 'line' | 'pie' | 'radar' | 'sankey' | 'scatter' | 'sunburst' | 'treemap';
|
|
4808
4810
|
export interface SeriesItem {
|
|
4811
|
+
/** Stable identity for incremental live updates. */
|
|
4812
|
+
id?: string;
|
|
4813
|
+
animation?: boolean;
|
|
4814
|
+
animationDuration?: number;
|
|
4815
|
+
animationDurationUpdate?: number;
|
|
4816
|
+
animationEasingUpdate?: 'linear';
|
|
4817
|
+
animationThreshold?: number;
|
|
4809
4818
|
name: string;
|
|
4810
4819
|
data: any[];
|
|
4811
4820
|
color?: string;
|
|
4812
4821
|
/** Series sharing a stack ID are stacked, overriding the chart-wide `stacked` setting. */
|
|
4813
4822
|
stack?: string;
|
|
4823
|
+
stackStrategy?: 'all' | 'samesign' | 'positive' | 'negative';
|
|
4814
4824
|
/** Fill below a line, for example `{ opacity: 0.15 }`; `{ opacity: 0 }` keeps a stacked base invisible. */
|
|
4815
4825
|
areaStyle?: Record<string, unknown>;
|
|
4816
4826
|
lineStyle?: Record<string, unknown>;
|
|
@@ -4877,6 +4887,70 @@ declare module "components/chart/echarts-loader" {
|
|
|
4877
4887
|
export type EChartsModule = typeof echartsCore;
|
|
4878
4888
|
export function loadECharts(): Promise<EChartsModule>;
|
|
4879
4889
|
}
|
|
4890
|
+
declare module "components/chart/live" {
|
|
4891
|
+
import type { SeriesItem } from "components/chart/builders";
|
|
4892
|
+
export interface LivePoint {
|
|
4893
|
+
at: number;
|
|
4894
|
+
value: number | null;
|
|
4895
|
+
}
|
|
4896
|
+
export interface LivePrediction {
|
|
4897
|
+
status: string;
|
|
4898
|
+
average_rates?: boolean;
|
|
4899
|
+
points: {
|
|
4900
|
+
at: number;
|
|
4901
|
+
expected: number;
|
|
4902
|
+
lower: number;
|
|
4903
|
+
upper: number;
|
|
4904
|
+
available: boolean;
|
|
4905
|
+
}[];
|
|
4906
|
+
}
|
|
4907
|
+
export interface LiveFrame {
|
|
4908
|
+
from: number;
|
|
4909
|
+
until: number;
|
|
4910
|
+
server_time: number;
|
|
4911
|
+
expires_at: number;
|
|
4912
|
+
resolution_seconds: number;
|
|
4913
|
+
metric: string;
|
|
4914
|
+
points: LivePoint[];
|
|
4915
|
+
prediction?: LivePrediction;
|
|
4916
|
+
}
|
|
4917
|
+
export interface LiveGrant {
|
|
4918
|
+
stream_url: string;
|
|
4919
|
+
expires_at: number;
|
|
4920
|
+
server_time: number;
|
|
4921
|
+
}
|
|
4922
|
+
/** Authoritative bucket replacement, never increment counts on delivery/reconnect. */
|
|
4923
|
+
export class LiveWindow {
|
|
4924
|
+
frame?: LiveFrame;
|
|
4925
|
+
private points;
|
|
4926
|
+
private prediction?;
|
|
4927
|
+
apply(value: unknown, snapshot: boolean): LiveFrame;
|
|
4928
|
+
advance(serverTime: number): void;
|
|
4929
|
+
get predictionStatus(): string;
|
|
4930
|
+
series(hideZero?: boolean): SeriesItem[];
|
|
4931
|
+
}
|
|
4932
|
+
/** One transport per chart. Grants renew only through a same-origin login gate. */
|
|
4933
|
+
export class LiveTransport {
|
|
4934
|
+
private source?;
|
|
4935
|
+
private timer?;
|
|
4936
|
+
private expiryTimer?;
|
|
4937
|
+
private abort?;
|
|
4938
|
+
private stopped;
|
|
4939
|
+
private generation;
|
|
4940
|
+
private retry;
|
|
4941
|
+
private renewing;
|
|
4942
|
+
private readonly frame;
|
|
4943
|
+
private readonly status;
|
|
4944
|
+
private readonly heartbeat?;
|
|
4945
|
+
constructor(frame: (data: unknown, snapshot: boolean) => void, status: (status: string) => void, heartbeat?: (serverTime: number) => void);
|
|
4946
|
+
start(streamURL: string, renewURL: string): void;
|
|
4947
|
+
stop(): void;
|
|
4948
|
+
private active;
|
|
4949
|
+
private deadline;
|
|
4950
|
+
private connect;
|
|
4951
|
+
private renew;
|
|
4952
|
+
}
|
|
4953
|
+
}
|
|
4880
4954
|
declare module "components/chart/chart.component" {
|
|
4881
4955
|
import { type ChartType, type RadarIndicator, type SeriesItem } from "components/chart/builders";
|
|
4882
4956
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
@@ -4901,6 +4975,9 @@ declare module "components/chart/chart.component" {
|
|
|
4901
4975
|
stacked: boolean;
|
|
4902
4976
|
live: boolean;
|
|
4903
4977
|
dataUrl: string;
|
|
4978
|
+
streamUrl: string;
|
|
4979
|
+
liveRenewUrl: string;
|
|
4980
|
+
hideZero: boolean;
|
|
4904
4981
|
liveInterval: number;
|
|
4905
4982
|
height: number;
|
|
4906
4983
|
enableAnimations: boolean | number;
|
|
@@ -4918,6 +4995,16 @@ declare module "components/chart/chart.component" {
|
|
|
4918
4995
|
private echarts?;
|
|
4919
4996
|
private initPromise?;
|
|
4920
4997
|
private liveTimer?;
|
|
4998
|
+
private pollAbort?;
|
|
4999
|
+
private liveStatus;
|
|
5000
|
+
private liveWindow;
|
|
5001
|
+
private replaceLiveSeries;
|
|
5002
|
+
private transport;
|
|
5003
|
+
private liveTransitionDuration;
|
|
5004
|
+
private liveSeries;
|
|
5005
|
+
private updateChart;
|
|
5006
|
+
protected updated(changed: PropertyValues): void;
|
|
5007
|
+
connectedCallback(): void;
|
|
4921
5008
|
private readonly resizeObserver;
|
|
4922
5009
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
4923
5010
|
protected getUpdateComplete(): Promise<boolean>;
|
|
@@ -4926,6 +5013,7 @@ declare module "components/chart/chart.component" {
|
|
|
4926
5013
|
private getBorderColor;
|
|
4927
5014
|
private buildOption;
|
|
4928
5015
|
private initChart;
|
|
5016
|
+
private stopLive;
|
|
4929
5017
|
private startLive;
|
|
4930
5018
|
private reinit;
|
|
4931
5019
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
@@ -6206,22 +6294,14 @@ declare module "components/stepper/index" {
|
|
|
6206
6294
|
declare module "components/stat/stat.component" {
|
|
6207
6295
|
import { type CSSResultGroup } from 'lit';
|
|
6208
6296
|
import ZincElement from "internal/zinc-element";
|
|
6297
|
+
import type { IconColor } from "components/icon/index";
|
|
6209
6298
|
/**
|
|
6210
|
-
* @summary
|
|
6299
|
+
* @summary Displays a key metric, optionally compared with a previous value.
|
|
6211
6300
|
* @documentation https://zinc.style/components/stats-tile
|
|
6212
6301
|
* @status experimental
|
|
6213
6302
|
* @since 1.0
|
|
6214
6303
|
*
|
|
6215
|
-
* @dependency zn-
|
|
6216
|
-
*
|
|
6217
|
-
* @event zn-event-name - Emitted as an example.
|
|
6218
|
-
*
|
|
6219
|
-
* @slot - The default slot.
|
|
6220
|
-
* @slot example - An example slot.
|
|
6221
|
-
*
|
|
6222
|
-
* @csspart base - The component's base wrapper.
|
|
6223
|
-
*
|
|
6224
|
-
* @cssproperty --example - An example CSS custom property.
|
|
6304
|
+
* @dependency zn-icon
|
|
6225
6305
|
*/
|
|
6226
6306
|
export default class ZnStatsTile extends ZincElement {
|
|
6227
6307
|
static styles: CSSResultGroup;
|
|
@@ -6233,10 +6313,27 @@ declare module "components/stat/stat.component" {
|
|
|
6233
6313
|
currency: string;
|
|
6234
6314
|
showDelta: boolean;
|
|
6235
6315
|
color: 'primary' | 'error' | 'info' | 'warning' | 'success' | 'neutral';
|
|
6316
|
+
/** `value-first` puts the amount under the caption with the description beneath it, and tints the amount rather
|
|
6317
|
+
* than the description with `color`. */
|
|
6318
|
+
layout: 'default' | 'value-first';
|
|
6319
|
+
/** How `show-delta` compares with `previous`: the relative change, or the difference in points. */
|
|
6320
|
+
deltaFormat: 'percent' | 'points';
|
|
6321
|
+
/** An icon shown beside the amount. */
|
|
6322
|
+
icon: string;
|
|
6323
|
+
/** The icon's color; without one it takes the amount's. */
|
|
6324
|
+
iconColor: IconColor;
|
|
6325
|
+
/** `large` gives the amount more weight, for a summary row of a few headline figures. */
|
|
6326
|
+
size: 'medium' | 'large';
|
|
6327
|
+
/** Pads the stat, for stats laid edge to edge in a flush container such as `zn-cols no-gap divide`. */
|
|
6328
|
+
padded: boolean;
|
|
6236
6329
|
calcPercentageDifference(): number;
|
|
6237
6330
|
getCurrentAmount(): string;
|
|
6238
6331
|
private getDisplayAmount;
|
|
6239
6332
|
diffText(): import("lit-html").TemplateResult<1> | null;
|
|
6333
|
+
private pointsDelta;
|
|
6334
|
+
private renderAmount;
|
|
6335
|
+
private renderValueFirst;
|
|
6336
|
+
private percentDelta;
|
|
6240
6337
|
render(): import("lit-html").TemplateResult<1>;
|
|
6241
6338
|
}
|
|
6242
6339
|
}
|