ednl-liftstatus-web-components 1.61.0 → 1.61.2
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/cjs/{init-DOfvfPK3.js → init-DTU-5DzQ.js} +9 -0
- package/dist/cjs/ls-3d-scene_14.cjs.entry.js +30 -25
- package/dist/cjs/ls-energy-usage.cjs.entry.js +11 -11
- package/dist/collection/components/ls-counters/ls-counters.css +10 -0
- package/dist/collection/components/ls-counters/ls-counters.js +12 -9
- package/dist/collection/components/ls-energy-usage/ls-energy-usage.js +11 -11
- package/dist/collection/components/ls-history-swimlane/ls-history-swimlane.css +8 -0
- package/dist/collection/components/ls-history-swimlane/ls-history-swimlane.js +5 -3
- package/dist/collection/components/ls-history-swimlane/swimlane-chart.js +2 -1
- package/dist/collection/components/ls-status-history/ls-status-history.css +48 -7
- package/dist/collection/components/ls-status-history/ls-status-history.js +8 -7
- package/dist/collection/utils/component-error-state.js +5 -4
- package/dist/collection/utils/store-error.js +8 -0
- package/dist/components/ls-counters.js +1 -1
- package/dist/components/ls-energy-usage.js +1 -1
- package/dist/components/ls-history-swimlane.js +1 -1
- package/dist/components/ls-status-history.js +1 -1
- package/dist/components/store-error.js +1 -1
- package/dist/components/swimlane-constants.js +1 -1
- package/dist/ednl-liftstatus-web-components/ednl-liftstatus-web-components.esm.js +1 -1
- package/dist/ednl-liftstatus-web-components/p-85e27496.entry.js +1 -0
- package/dist/ednl-liftstatus-web-components/{p-BVRXnIb6.js → p-BIAdTj7v.js} +2 -2
- package/dist/ednl-liftstatus-web-components/{p-4fc50cc9.entry.js → p-c1ca83a1.entry.js} +3 -3
- package/dist/esm/{init-BvXbKA-p.js → init-LFKAglbp.js} +9 -1
- package/dist/esm/ls-3d-scene_14.entry.js +30 -25
- package/dist/esm/ls-energy-usage.entry.js +11 -11
- package/dist/types/components/ls-counters/ls-counters.d.ts +1 -0
- package/dist/types/components/ls-status-history/ls-status-history.d.ts +1 -1
- package/dist/types/utils/component-error-state.d.ts +2 -0
- package/dist/types/utils/store-error.d.ts +6 -0
- package/package.json +1 -1
- package/dist/ednl-liftstatus-web-components/p-c3b1ecd4.entry.js +0 -1
|
@@ -5040,6 +5040,14 @@ const getStoreUnavailableError = (locale) => {
|
|
|
5040
5040
|
type: ErrorType.None,
|
|
5041
5041
|
};
|
|
5042
5042
|
};
|
|
5043
|
+
/** Errors about the live connection. The API keeps serving historic data while one is active. */
|
|
5044
|
+
const LIVE_CONNECTION_ERROR_TYPES = [ErrorType.Controller, ErrorType.Sensecloud];
|
|
5045
|
+
/**
|
|
5046
|
+
* The store error as a component that only shows historic data sees it. A
|
|
5047
|
+
* lost controller or sensecloud connection only stops the live data, so it
|
|
5048
|
+
* doesn't block the history.
|
|
5049
|
+
*/
|
|
5050
|
+
const getHistoricStoreError = (error) => LIVE_CONNECTION_ERROR_TYPES.includes(error.type) ? { hasError: false, messageKey: undefined, type: ErrorType.None } : error;
|
|
5043
5051
|
|
|
5044
5052
|
class HTTPError extends Error {
|
|
5045
5053
|
response;
|
|
@@ -5948,6 +5956,7 @@ exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
|
|
|
5948
5956
|
exports.getDisplaySensorValue = getDisplaySensorValue;
|
|
5949
5957
|
exports.getErrorMessageForDisplay = getErrorMessageForDisplay;
|
|
5950
5958
|
exports.getHealthStatus = getHealthStatus;
|
|
5959
|
+
exports.getHistoricStoreError = getHistoricStoreError;
|
|
5951
5960
|
exports.getHistorySwimlaneSensorIds = getHistorySwimlaneSensorIds;
|
|
5952
5961
|
exports.getLocale = getLocale;
|
|
5953
5962
|
exports.getNative = getNative;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BRUAq2EB.js');
|
|
4
|
-
var init$1 = require('./init-
|
|
4
|
+
var init$1 = require('./init-DTU-5DzQ.js');
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* @license
|
|
@@ -59297,7 +59297,7 @@ const getRatio = (cycles, stops) => {
|
|
|
59297
59297
|
return Number.isFinite(ratio) ? ratio : null;
|
|
59298
59298
|
};
|
|
59299
59299
|
|
|
59300
|
-
const lsCountersCss = () => `.error-message{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;padding:0.5rem 0;position:absolute;top:50%;left:0;right:0;width:100%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;color:var(--ls-font-primary-color);background-color:var(--ls-default-background);border-radius:2px;opacity:1;animation:append-animate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);will-change:transform, opacity;z-index:10;user-select:none;-webkit-user-select:none}.blur{filter:blur(10px);-webkit-filter:blur(10px);user-select:none;-webkit-user-select:none}@keyframes append-animate{from{transform:translateY(-50%) scale(0.96);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}:host{display:block;font-family:var(--ls-font-family);color:var(--ls-font-primary-color)}.ls-counters{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--ls-counters-gap, 0.75rem)}.ls-counters .title{font-size:var(--ls-counters-title-font-size, var(--ls-text-2xl));line-height:var(--ls-counters-title-line-height, var(--ls-line-2xl));font-weight:var(--ls-counters-title-font-weight, 600)}.ls-counters .period{font-size:var(--ls-counters-period-font-size, var(--ls-text-sm));line-height:var(--ls-counters-period-line-height, var(--ls-line-sm));color:var(--ls-counters-period-color, var(--ls-gray-600))}.ls-counters .content{display:flex;flex-direction:column;gap:var(--ls-counters-gap, 0.75rem)}.ls-counters .loading,.ls-counters .empty{font-size:var(--ls-counters-message-font-size, var(--ls-text-base));line-height:var(--ls-counters-message-line-height, var(--ls-line-base))}.ls-counters .loading{color:var(--ls-counters-loading-color, var(--ls-gray-500))}.ls-counters .empty{color:var(--ls-counters-empty-color, var(--ls-gray-500))}.ls-counters table{width:100%;border-collapse:collapse;font-size:var(--ls-counters-table-font-size, var(--ls-text-sm));line-height:var(--ls-counters-table-line-height, var(--ls-line-sm))}.ls-counters th,.ls-counters td{padding:var(--ls-counters-cell-padding, 0.375rem 0.5rem);text-align:left;font-weight:normal}.ls-counters thead th{font-weight:var(--ls-counters-header-font-weight, 600);color:var(--ls-counters-header-color, var(--ls-gray-600));border-bottom:var(--ls-counters-header-border, var(--ls-counters-row-border, 1px solid var(--ls-gray-100)));white-space:nowrap}.ls-counters tbody tr{border-bottom:var(--ls-counters-row-border, 1px solid var(--ls-gray-100))}.ls-counters tbody tr:last-child{border-bottom:none}.ls-counters .numeric{text-align:right;font-variant-numeric:tabular-nums}.ls-counters [part~='empty-value']{color:var(--ls-counters-empty-value-color, var(--ls-gray-400))}.ls-counters .totals{display:grid;grid-template-columns:var(--ls-counters-totals-columns, repeat(auto-fit, minmax(9rem, 1fr)));gap:var(--ls-counters-totals-gap, 0.5rem);margin:0}.ls-counters .total{display:flex;flex-direction:column;gap:var(--ls-counters-total-gap, 0.125rem);padding:var(--ls-counters-total-padding, 0.5rem 0.75rem);border-radius:var(--ls-counters-total-border-radius, 0.375rem);background-color:var(--ls-counters-total-bg, var(--ls-default-background));color:var(--ls-counters-total-color, var(--ls-default-text))}.ls-counters .total-label{margin:0;font-size:var(--ls-counters-total-label-font-size, var(--ls-text-xs));line-height:var(--ls-counters-total-label-line-height, var(--ls-line-xs));opacity:var(--ls-counters-total-label-opacity, 0.8)}.ls-counters .total-value{margin:0;font-size:var(--ls-counters-total-value-font-size, var(--ls-text-lg));line-height:var(--ls-counters-total-value-line-height, var(--ls-line-lg));font-weight:var(--ls-counters-total-value-font-weight, 600);font-variant-numeric:tabular-nums}.ls-counters.refreshing .content{opacity:var(--ls-counters-refreshing-opacity, 0.6)}.ls-counters .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ls-counters .error-message{font-size:var(--ls-counters-error-font-size, var(--ls-text-base));line-height:var(--ls-counters-error-line-height, var(--ls-line-base));padding:0.375rem 0.5rem;box-sizing:border-box;text-align:center;border-radius:0.25rem;white-space:normal;overflow-wrap:anywhere}`;
|
|
59300
|
+
const lsCountersCss = () => `.error-message{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;padding:0.5rem 0;position:absolute;top:50%;left:0;right:0;width:100%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;color:var(--ls-font-primary-color);background-color:var(--ls-default-background);border-radius:2px;opacity:1;animation:append-animate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);will-change:transform, opacity;z-index:10;user-select:none;-webkit-user-select:none}.blur{filter:blur(10px);-webkit-filter:blur(10px);user-select:none;-webkit-user-select:none}@keyframes append-animate{from{transform:translateY(-50%) scale(0.96);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}:host{display:block;font-family:var(--ls-font-family);color:var(--ls-font-primary-color)}.ls-counters{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--ls-counters-gap, 0.75rem)}.ls-counters .title{font-size:var(--ls-counters-title-font-size, var(--ls-text-2xl));line-height:var(--ls-counters-title-line-height, var(--ls-line-2xl));font-weight:var(--ls-counters-title-font-weight, 600)}.ls-counters .period{font-size:var(--ls-counters-period-font-size, var(--ls-text-sm));line-height:var(--ls-counters-period-line-height, var(--ls-line-sm));color:var(--ls-counters-period-color, var(--ls-gray-600))}.ls-counters .content{display:flex;flex-direction:column;gap:var(--ls-counters-gap, 0.75rem)}.ls-counters .loading,.ls-counters .empty{font-size:var(--ls-counters-message-font-size, var(--ls-text-base));line-height:var(--ls-counters-message-line-height, var(--ls-line-base))}.ls-counters .loading{color:var(--ls-counters-loading-color, var(--ls-gray-500))}.ls-counters .empty{color:var(--ls-counters-empty-color, var(--ls-gray-500))}.ls-counters .table-container{overflow-x:auto}.ls-counters .table-container:focus-visible{outline:2px solid var(--ls-secondary-color);outline-offset:2px}.ls-counters table{width:100%;border-collapse:collapse;font-size:var(--ls-counters-table-font-size, var(--ls-text-sm));line-height:var(--ls-counters-table-line-height, var(--ls-line-sm))}.ls-counters th,.ls-counters td{padding:var(--ls-counters-cell-padding, 0.375rem 0.5rem);text-align:left;font-weight:normal}.ls-counters thead th{font-weight:var(--ls-counters-header-font-weight, 600);color:var(--ls-counters-header-color, var(--ls-gray-600));border-bottom:var(--ls-counters-header-border, var(--ls-counters-row-border, 1px solid var(--ls-gray-100)));white-space:nowrap}.ls-counters tbody tr{border-bottom:var(--ls-counters-row-border, 1px solid var(--ls-gray-100))}.ls-counters tbody tr:last-child{border-bottom:none}.ls-counters .numeric{text-align:right;font-variant-numeric:tabular-nums}.ls-counters [part~='empty-value']{color:var(--ls-counters-empty-value-color, var(--ls-gray-400))}.ls-counters .totals{display:grid;grid-template-columns:var(--ls-counters-totals-columns, repeat(auto-fit, minmax(9rem, 1fr)));gap:var(--ls-counters-totals-gap, 0.5rem);margin:0}.ls-counters .total{display:flex;flex-direction:column;gap:var(--ls-counters-total-gap, 0.125rem);padding:var(--ls-counters-total-padding, 0.5rem 0.75rem);border-radius:var(--ls-counters-total-border-radius, 0.375rem);background-color:var(--ls-counters-total-bg, var(--ls-default-background));color:var(--ls-counters-total-color, var(--ls-default-text))}.ls-counters .total-label{margin:0;font-size:var(--ls-counters-total-label-font-size, var(--ls-text-xs));line-height:var(--ls-counters-total-label-line-height, var(--ls-line-xs));opacity:var(--ls-counters-total-label-opacity, 0.8)}.ls-counters .total-value{margin:0;font-size:var(--ls-counters-total-value-font-size, var(--ls-text-lg));line-height:var(--ls-counters-total-value-line-height, var(--ls-line-lg));font-weight:var(--ls-counters-total-value-font-weight, 600);font-variant-numeric:tabular-nums}.ls-counters.refreshing .content{opacity:var(--ls-counters-refreshing-opacity, 0.6)}.ls-counters .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ls-counters .error-message{font-size:var(--ls-counters-error-font-size, var(--ls-text-base));line-height:var(--ls-counters-error-line-height, var(--ls-line-base));padding:0.375rem 0.5rem;box-sizing:border-box;text-align:center;border-radius:0.25rem;white-space:normal;overflow-wrap:anywhere}`;
|
|
59301
59301
|
|
|
59302
59302
|
/** Lodash `isEmpty` does not narrow, so this also gives a string out of an optional one. */
|
|
59303
59303
|
const isBlank$1 = (value) => value === undefined || value === '';
|
|
@@ -59437,11 +59437,12 @@ const LsCounters = class {
|
|
|
59437
59437
|
this.applyErrorOverlay();
|
|
59438
59438
|
return;
|
|
59439
59439
|
}
|
|
59440
|
-
|
|
59440
|
+
const storeError = init$1.getHistoricStoreError(this.store.state.error);
|
|
59441
|
+
if (storeError.hasError) {
|
|
59441
59442
|
this.errorState = {
|
|
59442
59443
|
hasError: true,
|
|
59443
|
-
messageKey:
|
|
59444
|
-
type:
|
|
59444
|
+
messageKey: storeError.messageKey,
|
|
59445
|
+
type: storeError.type,
|
|
59445
59446
|
};
|
|
59446
59447
|
this.applyErrorOverlay();
|
|
59447
59448
|
return;
|
|
@@ -59489,7 +59490,7 @@ const LsCounters = class {
|
|
|
59489
59490
|
this.applyErrorOverlay();
|
|
59490
59491
|
return;
|
|
59491
59492
|
}
|
|
59492
|
-
if (this.store.state.error.hasError) {
|
|
59493
|
+
if (init$1.getHistoricStoreError(this.store.state.error).hasError) {
|
|
59493
59494
|
this.updateErrorState();
|
|
59494
59495
|
this.isLoading = false;
|
|
59495
59496
|
return;
|
|
@@ -59700,10 +59701,11 @@ const LsCounters = class {
|
|
|
59700
59701
|
}
|
|
59701
59702
|
renderTable(store, rowCount, columns) {
|
|
59702
59703
|
const noValueLabel = store.t('ui:counters.no_value');
|
|
59703
|
-
|
|
59704
|
+
const tableLabel = store.t('ui:counters.table_caption');
|
|
59705
|
+
return (index.h("div", { class: "table-container", part: "table-container", tabindex: "0", role: "region", "aria-label": tableLabel }, index.h("table", { part: "table" }, index.h("caption", { class: "visually-hidden", part: "caption" }, tableLabel), index.h("thead", { part: "table-head" }, index.h("tr", { part: "header-row" }, index.h("th", { scope: "col", part: "column-header" }, store.t('ui:counters.column.stop')), columns.map(column => (index.h("th", { key: column.labelKey, scope: "col", class: "numeric", part: "column-header" }, store.t(column.labelKey)))))), index.h("tbody", { part: "table-body" }, Array.from({ length: rowCount }, (_unused, index$1) => (index.h("tr", { key: `stop-${index$1 + 1}`, part: "row" }, index.h("th", { scope: "row", part: "cell stop-cell" }, this.formatNumber(index$1 + 1)), columns.map(column => {
|
|
59704
59706
|
const isEmptyValue = column.isEmpty(index$1);
|
|
59705
59707
|
return (index.h("td", { key: column.labelKey, class: "numeric", part: isEmptyValue ? 'cell empty-value' : 'cell', title: isEmptyValue ? noValueLabel : undefined }, column.value(index$1)));
|
|
59706
|
-
})))))));
|
|
59708
|
+
}))))))));
|
|
59707
59709
|
}
|
|
59708
59710
|
renderTotals(store, totals) {
|
|
59709
59711
|
const noValueLabel = store.t('ui:counters.no_value');
|
|
@@ -59722,9 +59724,9 @@ const LsCounters = class {
|
|
|
59722
59724
|
'loading': isLoading,
|
|
59723
59725
|
'refreshing': this.isRefreshing,
|
|
59724
59726
|
};
|
|
59725
|
-
return (index.h(index.Host, { key: '
|
|
59727
|
+
return (index.h(index.Host, { key: '0df2c002876d49d22a92a82dc06b41887fb90f71', loading: isLoading }, index.h("div", { key: '11484e37489819be12bf71298481d41e63bfa7cb', class: classes, part: "container", ref: element => {
|
|
59726
59728
|
this.containerElement = element;
|
|
59727
|
-
} }, !this.hideTitle && (index.h("div", { key: '
|
|
59729
|
+
} }, !this.hideTitle && (index.h("div", { key: '799b0ae59b0170b9e49fa66128921d33494e8f32', class: "title", part: "title" }, (_a = store === null || store === void 0 ? void 0 : store.t('ui:counters.title')) !== null && _a !== void 0 ? _a : '')), !this.hidePeriod && store !== null && (index.h("div", { key: '1a9899e80ef526ad4aee3547ebf2722a61ee69c6', class: "period", part: "period" }, this.getPeriodLabel(store))), store === null || isLoading ? (index.h("div", { class: "loading", part: "loading" }, index.h("slot", { name: "loading" }, (_b = store === null || store === void 0 ? void 0 : store.t('ui:counters.loading')) !== null && _b !== void 0 ? _b : ''))) : isEmptyPeriod ? (index.h("div", { class: "empty", part: "empty" }, store.t('ui:counters.none'))) : (index.h("div", { class: "content" }, !this.hideStops && rowCount > 0 && this.renderTable(store, rowCount, this.getColumns()), !this.hideTotals && totals.length > 0 && this.renderTotals(store, totals))), index.h("slot", { key: '33fc3ec5b102a4fa24f5143d033e3f3715eda6d5' }))));
|
|
59728
59730
|
}
|
|
59729
59731
|
static get watchers() { return {
|
|
59730
59732
|
"from": [{
|
|
@@ -67594,11 +67596,12 @@ function updateErrorState(host) {
|
|
|
67594
67596
|
applyErrorOverlay(host);
|
|
67595
67597
|
return;
|
|
67596
67598
|
}
|
|
67597
|
-
|
|
67599
|
+
const storeError = host.showsHistoricData ? init$1.getHistoricStoreError(store.state.error) : store.state.error;
|
|
67600
|
+
if (storeError.hasError) {
|
|
67598
67601
|
host.setErrorState({
|
|
67599
67602
|
hasError: true,
|
|
67600
|
-
messageKey:
|
|
67601
|
-
type:
|
|
67603
|
+
messageKey: storeError.messageKey,
|
|
67604
|
+
type: storeError.type,
|
|
67602
67605
|
});
|
|
67603
67606
|
applyErrorOverlay(host);
|
|
67604
67607
|
return;
|
|
@@ -74335,7 +74338,8 @@ class SwimlaneChart {
|
|
|
74335
74338
|
});
|
|
74336
74339
|
const mainBackgroundUI = main.append('g').attr('width', innerWidth).attr('height', mainPlotHeight).attr('class', 'main-background-ui');
|
|
74337
74340
|
// A block at the back so the group reports mouse moves over empty space.
|
|
74338
|
-
|
|
74341
|
+
// Its fill comes from the stylesheet, so it can follow a dark theme.
|
|
74342
|
+
mainBackgroundUI.append('rect').attr('width', innerWidth).attr('height', mainPlotHeight).attr('class', 'background');
|
|
74339
74343
|
this.rowHighlight = mainBackgroundUI
|
|
74340
74344
|
.append('rect')
|
|
74341
74345
|
.attr('x', 0)
|
|
@@ -74775,7 +74779,7 @@ function buildSwimlaneModel(data, { from, to, now, locale, sensorIds = init$1.HI
|
|
|
74775
74779
|
return { lanes, items };
|
|
74776
74780
|
}
|
|
74777
74781
|
|
|
74778
|
-
const lsHistorySwimlaneCss = () => `.error-message{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;padding:0.5rem 0;position:absolute;top:50%;left:0;right:0;width:100%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;color:var(--ls-font-primary-color);background-color:var(--ls-default-background);border-radius:2px;opacity:1;animation:append-animate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);will-change:transform, opacity;z-index:10;user-select:none;-webkit-user-select:none}.blur{filter:blur(10px);-webkit-filter:blur(10px);user-select:none;-webkit-user-select:none}@keyframes append-animate{from{transform:translateY(-50%) scale(0.96);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}:host{font-family:var(--ls-font-family);position:relative;display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.ls-history-swimlane{min-height:200px;width:100%;user-select:none}.ls-history-swimlane svg{margin:0 auto}.ls-history-swimlane:focus-visible{outline:2px solid var(--ls-secondary-color);outline-offset:2px}.loading{font-size:var(--ls-text-base);line-height:var(--ls-line-base);color:var(--ls-font-primary-color);position:absolute;top:0;width:100%;height:100%;display:grid;align-items:center;justify-items:center;background-color:var(--ls-history-swimlane-loading-background, white)}.ls-history-swimlane.refreshing .chart{opacity:var(--ls-history-swimlane-refreshing-opacity, 0.6)}.time-readout rect{fill:var(--ls-history-swimlane-readout-background, rgb(0 0 0 / 10%))}.time-readout text{fill:var(--ls-history-swimlane-readout-color, var(--ls-font-primary-color));font-size:var(--ls-text-xs)}.mini-items{fill:none;stroke-width:3}.mini .mini-time-indicator,.main .main-time-indicator{stroke:var(--ls-accent-color);stroke-width:1}.main text,.main image{pointer-events:none}.lane-text,.time-indicator,.axis text{fill:var(--ls-font-primary-color);font-size:var(--ls-text-xs)}.lane-lines{stroke:var(--ls-history-swimlane-lane-line-color, var(--ls-gray-300))}.item-label{font-size:var(--ls-text-xs);font-weight:bold}.today-line{stroke:var(--ls-history-swimlane-today-line-color, var(--ls-accent-color));stroke-width:1.5}.time-indicator-line{stroke:var(--ls-history-swimlane-axis-color, var(--ls-font-primary-color));stroke-width:1}.axis line,.axis path{stroke:var(--ls-history-swimlane-axis-color, var(--ls-font-primary-color))}.period image{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;shape-rendering:crispEdges}`;
|
|
74782
|
+
const lsHistorySwimlaneCss = () => `.error-message{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;padding:0.5rem 0;position:absolute;top:50%;left:0;right:0;width:100%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;color:var(--ls-font-primary-color);background-color:var(--ls-default-background);border-radius:2px;opacity:1;animation:append-animate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);will-change:transform, opacity;z-index:10;user-select:none;-webkit-user-select:none}.blur{filter:blur(10px);-webkit-filter:blur(10px);user-select:none;-webkit-user-select:none}@keyframes append-animate{from{transform:translateY(-50%) scale(0.96);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}:host{font-family:var(--ls-font-family);position:relative;display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.ls-history-swimlane{min-height:200px;width:100%;user-select:none}.ls-history-swimlane svg{margin:0 auto}.ls-history-swimlane:focus-visible{outline:2px solid var(--ls-secondary-color);outline-offset:2px}.loading{font-size:var(--ls-text-base);line-height:var(--ls-line-base);color:var(--ls-font-primary-color);position:absolute;top:0;width:100%;height:100%;display:grid;align-items:center;justify-items:center;background-color:var(--ls-history-swimlane-loading-background, white)}.main-background-ui .background{fill:var(--ls-history-swimlane-background, transparent)}.ls-history-swimlane.refreshing .chart{opacity:var(--ls-history-swimlane-refreshing-opacity, 0.6)}.time-readout rect{fill:var(--ls-history-swimlane-readout-background, rgb(0 0 0 / 10%))}.time-readout text{fill:var(--ls-history-swimlane-readout-color, var(--ls-font-primary-color));font-size:var(--ls-text-xs)}.mini-items{fill:none;stroke-width:3}.mini .mini-time-indicator,.main .main-time-indicator{stroke:var(--ls-accent-color);stroke-width:1}.main text,.main image{pointer-events:none}.lane-text,.time-indicator,.axis text{fill:var(--ls-font-primary-color);font-size:var(--ls-text-xs)}.lane-lines{stroke:var(--ls-history-swimlane-lane-line-color, var(--ls-gray-300))}.item-label{font-size:var(--ls-text-xs);font-weight:bold}.today-line{stroke:var(--ls-history-swimlane-today-line-color, var(--ls-accent-color));stroke-width:1.5}.time-indicator-line{stroke:var(--ls-history-swimlane-axis-color, var(--ls-font-primary-color));stroke-width:1}.axis line,.axis path{stroke:var(--ls-history-swimlane-axis-color, var(--ls-font-primary-color))}.period image{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;shape-rendering:crispEdges}`;
|
|
74779
74783
|
|
|
74780
74784
|
/** Redraws are full SVG rebuilds, so coalesce a drag-resize into one. */
|
|
74781
74785
|
const RESIZE_DEBOUNCE_MS = 150;
|
|
@@ -74840,6 +74844,7 @@ const LsHistorySwimlane = class {
|
|
|
74840
74844
|
onRecovered: () => {
|
|
74841
74845
|
void this.load();
|
|
74842
74846
|
},
|
|
74847
|
+
showsHistoricData: true,
|
|
74843
74848
|
};
|
|
74844
74849
|
}
|
|
74845
74850
|
onRangeProps() {
|
|
@@ -74915,7 +74920,7 @@ const LsHistorySwimlane = class {
|
|
|
74915
74920
|
this.logError(description);
|
|
74916
74921
|
}
|
|
74917
74922
|
async load() {
|
|
74918
|
-
if (this.store === null || this.store.state.error.hasError)
|
|
74923
|
+
if (this.store === null || init$1.getHistoricStoreError(this.store.state.error).hasError)
|
|
74919
74924
|
return;
|
|
74920
74925
|
// A new window is a new attempt. Guarding on the component's own error
|
|
74921
74926
|
// instead latched it dead: only a *store* error ever clears that flag, and
|
|
@@ -75091,9 +75096,9 @@ const LsHistorySwimlane = class {
|
|
|
75091
75096
|
const isPending = this.isLoading && !this.errorState.hasError;
|
|
75092
75097
|
const showLoading = isPending && this.rendered === null;
|
|
75093
75098
|
const isRefreshing = isPending && this.rendered !== null;
|
|
75094
|
-
return (index.h(index.Host, { key: '
|
|
75099
|
+
return (index.h(index.Host, { key: '1501166956470e971243cf538d81f6bf9a736456' }, index.h("div", { key: '27ea1820e073eb58b5815e0f4fad8f5c308b6eab', class: { 'ls-history-swimlane': true, 'refreshing': isRefreshing }, part: "container", tabindex: "0", role: "group", "aria-label": label, "aria-busy": this.isLoading ? 'true' : 'false', "aria-keyshortcuts": "ArrowLeft ArrowRight", ref: el => {
|
|
75095
75100
|
this.container = el !== null && el !== void 0 ? el : null;
|
|
75096
|
-
} }), showLoading && (index.h("div", { key: '
|
|
75101
|
+
} }), showLoading && (index.h("div", { key: '970a3d85fa09b23a192284f88532cdffb488a219', class: "loading", part: "loading" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.t('ui:general.loading'))), index.h("slot", { key: '9e5f8787f86ff7c57bdbfbe54469227b7e491caf' })));
|
|
75097
75102
|
}
|
|
75098
75103
|
static get assetsDirs() { return ["assets"]; }
|
|
75099
75104
|
get element() { return index.getElement(this); }
|
|
@@ -76813,7 +76818,7 @@ const toStatusHistoryEntry = (row) => {
|
|
|
76813
76818
|
*/
|
|
76814
76819
|
const filterStatusHistoryEntries = (entries, severityFilter, showClosed) => entries.filter(entry => severityFilter.includes(entry.severity) && (showClosed || entry.end === null));
|
|
76815
76820
|
|
|
76816
|
-
const lsStatusHistoryCss = () => `.error-message{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;padding:0.5rem 0;position:absolute;top:50%;left:0;right:0;width:100%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;color:var(--ls-font-primary-color);background-color:var(--ls-default-background);border-radius:2px;opacity:1;animation:append-animate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);will-change:transform, opacity;z-index:10;user-select:none;-webkit-user-select:none}.blur{filter:blur(10px);-webkit-filter:blur(10px);user-select:none;-webkit-user-select:none}@keyframes append-animate{from{transform:translateY(-50%) scale(0.96);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}.pagination{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--ls-pagination-gap, 0.25rem 1rem);padding:var(--ls-pagination-padding, 0.5rem 0);font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600)}.pagination-page{display:inline-flex;align-items:center;gap:0.375rem}.pagination-page select{font-family:inherit;font-size:inherit;color:inherit}.pagination-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--ls-pagination-button-size, 1.75rem);min-height:var(--ls-pagination-button-size, 1.75rem);padding:0 0.25rem;font:inherit;color:inherit;line-height:1}.pagination-button[disabled]{opacity:0.4}.pagination-button svg{display:block;width:var(--ls-pagination-icon-size, 1cap);height:var(--ls-pagination-icon-size, 1cap)}.severity{display:inline-flex;align-items:center;gap:var(--ls-severity-icon-gap, 0.375rem);color:var(--ls-default-text);background-color:var(--ls-default-background);font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);height:var(--ls-line-sm);border-radius:3px;width:fit-content;padding:0.375rem 0.5rem;white-space:nowrap}.severity-icon{flex-shrink:0;width:var(--ls-severity-icon-size, 1.15cap);height:var(--ls-severity-icon-size, 1.15cap);color:var(--ls-severity-icon-color, currentColor);opacity:var(--ls-severity-icon-opacity, 0.8)}.severity.impact{color:var(--ls-danger-text);background-color:var(--ls-danger-background)}.severity.non-impact{color:var(--ls-warning-text);background-color:var(--ls-warning-background)}.severity.informational{color:var(--ls-info-text);background-color:var(--ls-info-background)}.label{font-size:var(--ls-text-lg);line-height:var(--ls-line-lg)}.status-code{font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600)}.human-readable-timestamp{font-size:var(--ls-text-base);line-height:var(--ls-line-base)}.relative-timestamp{font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600)}:host{display:block;font-family:var(--ls-font-family);color:var(--ls-font-primary-color)}.ls-status-history{position:relative;overflow:hidden}.ls-status-history .title{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600}.ls-status-history .filter{display:flex;flex-wrap:wrap;gap:var(--ls-status-history-filter-gap, 0.5rem 1rem);padding:var(--ls-status-history-filter-padding, 0.75rem 0);border:0;margin:0;min-inline-size:0}.ls-status-history .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ls-status-history .filter-option{display:flex;align-items:center;gap:0.375rem;font-size:var(--ls-text-sm);line-height:var(--ls-line-sm)}.ls-status-history .filter-result{font-size:var(--ls-text-xs);line-height:var(--ls-line-xs);color:var(--ls-gray-600);padding-bottom:0.5rem}.ls-status-history .message{font-size:var(--ls-text-base);line-height:var(--ls-line-base);padding:0.5rem 0}.ls-status-history .table-container{
|
|
76821
|
+
const lsStatusHistoryCss = () => `.error-message{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;padding:0.5rem 0;position:absolute;top:50%;left:0;right:0;width:100%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;color:var(--ls-font-primary-color);background-color:var(--ls-default-background);border-radius:2px;opacity:1;animation:append-animate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);will-change:transform, opacity;z-index:10;user-select:none;-webkit-user-select:none}.blur{filter:blur(10px);-webkit-filter:blur(10px);user-select:none;-webkit-user-select:none}@keyframes append-animate{from{transform:translateY(-50%) scale(0.96);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}.pagination{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--ls-pagination-gap, 0.25rem 1rem);padding:var(--ls-pagination-padding, 0.5rem 0);font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600)}.pagination-page{display:inline-flex;align-items:center;gap:0.375rem}.pagination-page select{font-family:inherit;font-size:inherit;color:inherit}.pagination-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--ls-pagination-button-size, 1.75rem);min-height:var(--ls-pagination-button-size, 1.75rem);padding:0 0.25rem;font:inherit;color:inherit;line-height:1}.pagination-button[disabled]{opacity:0.4}.pagination-button svg{display:block;width:var(--ls-pagination-icon-size, 1cap);height:var(--ls-pagination-icon-size, 1cap)}.severity{display:inline-flex;align-items:center;gap:var(--ls-severity-icon-gap, 0.375rem);color:var(--ls-default-text);background-color:var(--ls-default-background);font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);height:var(--ls-line-sm);border-radius:3px;width:fit-content;padding:0.375rem 0.5rem;white-space:nowrap}.severity-icon{flex-shrink:0;width:var(--ls-severity-icon-size, 1.15cap);height:var(--ls-severity-icon-size, 1.15cap);color:var(--ls-severity-icon-color, currentColor);opacity:var(--ls-severity-icon-opacity, 0.8)}.severity.impact{color:var(--ls-danger-text);background-color:var(--ls-danger-background)}.severity.non-impact{color:var(--ls-warning-text);background-color:var(--ls-warning-background)}.severity.informational{color:var(--ls-info-text);background-color:var(--ls-info-background)}.label{font-size:var(--ls-text-lg);line-height:var(--ls-line-lg)}.status-code{font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600)}.human-readable-timestamp{font-size:var(--ls-text-base);line-height:var(--ls-line-base)}.relative-timestamp{font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600)}:host{display:block;font-family:var(--ls-font-family);color:var(--ls-font-primary-color)}.ls-status-history{position:relative;overflow:hidden}.ls-status-history .title{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600}.ls-status-history .filter{display:flex;flex-wrap:wrap;gap:var(--ls-status-history-filter-gap, 0.5rem 1rem);padding:var(--ls-status-history-filter-padding, 0.75rem 0);border:0;margin:0;min-inline-size:0}.ls-status-history .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ls-status-history .filter-option{display:flex;align-items:center;gap:0.375rem;font-size:var(--ls-text-sm);line-height:var(--ls-line-sm)}.ls-status-history .filter-result{font-size:var(--ls-text-xs);line-height:var(--ls-line-xs);color:var(--ls-gray-600);padding-bottom:0.5rem}.ls-status-history .message{font-size:var(--ls-text-base);line-height:var(--ls-line-base);padding:0.5rem 0}.ls-status-history .table-container{overflow-x:auto}.ls-status-history .table-container:focus-visible{outline:2px solid var(--ls-secondary-color);outline-offset:2px}.ls-status-history table{display:grid;grid-template-columns:repeat(5, auto);grid-template-rows:auto minmax(0, 1fr);max-block-size:var(--ls-status-history-max-height, 24rem);width:100%;min-inline-size:min-content;font-size:var(--ls-text-base);line-height:var(--ls-line-base);text-align:left}.ls-status-history thead,.ls-status-history tbody,.ls-status-history tr{display:grid;grid-template-columns:subgrid;grid-column:1 / -1}.ls-status-history tbody{overflow-x:hidden;overflow-y:auto}.ls-status-history th{background-color:var(--ls-gray-100);font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);font-weight:600;padding:0.5rem}.ls-status-history td{padding:0.5rem;border-bottom:1px solid var(--ls-gray-100)}.ls-status-history th:last-child,.ls-status-history td:last-child{padding-inline-end:1.5rem}.ls-status-history .severity{--ls-severity-icon-gap:var(--ls-status-history-icon-gap, 0.375rem);--ls-severity-icon-size:var(--ls-status-history-icon-size, 1.15cap);--ls-severity-icon-color:var(--ls-status-history-icon-color, currentColor);--ls-severity-icon-opacity:var(--ls-status-history-icon-opacity, 0.8)}`;
|
|
76817
76822
|
|
|
76818
76823
|
const DAY_FORMAT = 'DD-MM-YYYY';
|
|
76819
76824
|
/** Whether a store value is unset or empty. */
|
|
@@ -76890,7 +76895,7 @@ const LsStatusHistory = class {
|
|
|
76890
76895
|
this.requestSequence = 0;
|
|
76891
76896
|
this.warnedPeriodProps = null;
|
|
76892
76897
|
this.syncStoreError = () => {
|
|
76893
|
-
const { hasError, messageKey } = this.loadedStore.state.error;
|
|
76898
|
+
const { hasError, messageKey } = init$1.getHistoricStoreError(this.loadedStore.state.error);
|
|
76894
76899
|
this.storeErrorKey = hasError ? (messageKey !== null && messageKey !== void 0 ? messageKey : 'CONSOLE_INFO') : null;
|
|
76895
76900
|
};
|
|
76896
76901
|
/**
|
|
@@ -77129,19 +77134,19 @@ const LsStatusHistory = class {
|
|
|
77129
77134
|
renderRows() {
|
|
77130
77135
|
return this.pagedEntries.map(entry => {
|
|
77131
77136
|
var _a;
|
|
77132
|
-
return (index.h("tr", { key: `${entry.code}-${entry.start}`, part: `row ${entry.severity}` }, index.h("td",
|
|
77137
|
+
return (index.h("tr", { role: "row", key: `${entry.code}-${entry.start}`, part: `row ${entry.severity}` }, index.h("td", { role: "cell" }, renderStatusLabel(entry.code, entry.description)), index.h("td", { role: "cell" }, this.renderTimestamp(entry.start)), index.h("td", { role: "cell" }, this.renderTimestamp(entry.end)), index.h("td", { role: "cell" }, this.formatDuration((_a = entry.durationMs) !== null && _a !== void 0 ? _a : this.nowMs - Date.parse(entry.start))), index.h("td", { role: "cell" }, renderSeverityChip(entry.severity, this.loadedStore.t(init$1.getSeverityLabelKey(entry.severity)), this.showSeverityIcons))));
|
|
77133
77138
|
});
|
|
77134
77139
|
}
|
|
77135
77140
|
render() {
|
|
77136
77141
|
const errorKey = this.displayErrorKey;
|
|
77137
|
-
return (index.h(index.Host, { key: '
|
|
77142
|
+
return (index.h(index.Host, { key: '02e68d58d8f0d001381f4ec0985b70382b348bb3' }, index.h("slot", { key: '193e155e366eaf8ff344a3ce5282a27f5f10cc80' }), index.h("div", { key: '5ab061a277593cca5e3f7fc03d148985e8648223', class: "ls-status-history", "aria-busy": String(this.isLoading), ref: element => {
|
|
77138
77143
|
this.containerElement = element;
|
|
77139
|
-
} }, !this.hideTitle && (index.h("div", { key: '
|
|
77144
|
+
} }, !this.hideTitle && (index.h("div", { key: 'f01c8d1996959add4ccd4284ab02405f48b55554', class: "title", part: "title" }, this.periodLabel)), index.h("fieldset", { key: '8353ea668e541d1aade74dfc890df8890e7145c5', class: "filter", part: "filter" }, index.h("legend", { key: '1e9a27234e6c0d655118b4124f8f489177b50cb6', class: "visually-hidden" }, this.loadedStore.t('ui:status_history.filter_legend')), init$1.SEVERITY_VALUES.map((severity, index$1) => (index.h("label", { key: `severity-${severity}`, class: "filter-option", part: "filter-option" }, index.h("input", { type: "checkbox", value: index$1, checked: this.severityFilter.includes(severity), onChange: this.toggleSeverity }), this.loadedStore.t(init$1.getSeverityLabelKey(severity))))), index.h("label", { key: '0d659f3e1c161742483ddcfe48c712078a832a02', class: "filter-option", part: "filter-option" }, index.h("input", { key: '66dcd00fc4cc4013f11ede1cdf8589b8b433144e', type: "checkbox", checked: this.showClosed, onChange: this.toggleClosed }), this.loadedStore.t('ui:status_history.show_closed'))), errorKey === null && !this.isLoading && (index.h("div", { key: 'f40cadc78c2c613afc687bd593f91309309fbd2d', class: "filter-result", part: "filter-result" }, this.loadedStore.t('ui:status_history.filter_result', {
|
|
77140
77145
|
shown: this.visibleEntries.length,
|
|
77141
77146
|
total: this.entries.length,
|
|
77142
|
-
}))), errorKey === null && this.isLoading && index.h("div", { key: '
|
|
77147
|
+
}))), errorKey === null && this.isLoading && index.h("div", { key: '247ab0abfdf99375d94276672ff03b0801c5f308', class: "message" }, this.loadedStore.t('ui:status_history.loading')), errorKey === null &&
|
|
77143
77148
|
!this.isLoading &&
|
|
77144
|
-
(this.visibleEntries.length === 0 ? (index.h("div", { class: "message" }, this.loadedStore.t('ui:status_history.none'))) : (index.h("div", { class: "table-container", part: "table-container" }, index.h("table", { part: "table" }, index.h("caption", { class: "visually-hidden", part: "caption" }, this.periodLabel), index.h("thead",
|
|
77149
|
+
(this.visibleEntries.length === 0 ? (index.h("div", { class: "message" }, this.loadedStore.t('ui:status_history.none'))) : (index.h("div", { class: "table-container", part: "table-container", tabindex: "0", role: "region", "aria-label": this.periodLabel }, index.h("table", { role: "table", part: "table" }, index.h("caption", { class: "visually-hidden", part: "caption" }, this.periodLabel), index.h("thead", { role: "rowgroup" }, index.h("tr", { role: "row" }, index.h("th", { role: "columnheader", scope: "col" }, this.loadedStore.t('ui:status_history.column.status')), index.h("th", { role: "columnheader", scope: "col" }, this.loadedStore.t('ui:status_history.column.start')), index.h("th", { role: "columnheader", scope: "col" }, this.loadedStore.t('ui:status_history.column.end')), index.h("th", { role: "columnheader", scope: "col" }, this.loadedStore.t('ui:status_history.column.duration')), index.h("th", { role: "columnheader", scope: "col" }, this.loadedStore.t('ui:status_history.column.level')))), index.h("tbody", { role: "rowgroup" }, this.renderRows()))))), errorKey === null &&
|
|
77145
77150
|
!this.isLoading &&
|
|
77146
77151
|
this.visibleEntries.length > 0 &&
|
|
77147
77152
|
renderPagination({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BRUAq2EB.js');
|
|
4
|
-
var init = require('./init-
|
|
4
|
+
var init = require('./init-DTU-5DzQ.js');
|
|
5
5
|
|
|
6
6
|
class InternMap extends Map {
|
|
7
7
|
constructor(entries, key = keyof) {
|
|
@@ -7756,7 +7756,7 @@ const LsEnergyUsage = class {
|
|
|
7756
7756
|
return;
|
|
7757
7757
|
this.scheduleLoad();
|
|
7758
7758
|
});
|
|
7759
|
-
this.hadStoreError = this.store.state.error.hasError;
|
|
7759
|
+
this.hadStoreError = init.getHistoricStoreError(this.store.state.error).hasError;
|
|
7760
7760
|
this.isComponentMounted = true;
|
|
7761
7761
|
this.updateErrorState();
|
|
7762
7762
|
// The first load is immediate, only refetches are debounced.
|
|
@@ -7767,9 +7767,8 @@ const LsEnergyUsage = class {
|
|
|
7767
7767
|
return;
|
|
7768
7768
|
this.scheduleLoad();
|
|
7769
7769
|
}), this.store.onChange('error', () => {
|
|
7770
|
-
var _a, _b;
|
|
7771
7770
|
const hadStoreError = this.hadStoreError;
|
|
7772
|
-
this.hadStoreError =
|
|
7771
|
+
this.hadStoreError = this.store !== null && init.getHistoricStoreError(this.store.state.error).hasError;
|
|
7773
7772
|
this.updateErrorState();
|
|
7774
7773
|
if (hadStoreError && !this.hadStoreError) {
|
|
7775
7774
|
this.scheduleLoad();
|
|
@@ -7825,11 +7824,12 @@ const LsEnergyUsage = class {
|
|
|
7825
7824
|
this.applyErrorOverlay();
|
|
7826
7825
|
return;
|
|
7827
7826
|
}
|
|
7828
|
-
|
|
7827
|
+
const storeError = init.getHistoricStoreError(this.store.state.error);
|
|
7828
|
+
if (storeError.hasError) {
|
|
7829
7829
|
this.errorState = {
|
|
7830
7830
|
hasError: true,
|
|
7831
|
-
messageKey:
|
|
7832
|
-
type:
|
|
7831
|
+
messageKey: storeError.messageKey,
|
|
7832
|
+
type: storeError.type,
|
|
7833
7833
|
};
|
|
7834
7834
|
this.applyErrorOverlay();
|
|
7835
7835
|
return;
|
|
@@ -7878,7 +7878,7 @@ const LsEnergyUsage = class {
|
|
|
7878
7878
|
this.applyErrorOverlay();
|
|
7879
7879
|
return;
|
|
7880
7880
|
}
|
|
7881
|
-
if (this.store.state.error.hasError) {
|
|
7881
|
+
if (init.getHistoricStoreError(this.store.state.error).hasError) {
|
|
7882
7882
|
this.updateErrorState();
|
|
7883
7883
|
this.isLoading = false;
|
|
7884
7884
|
return;
|
|
@@ -8035,11 +8035,11 @@ const LsEnergyUsage = class {
|
|
|
8035
8035
|
'loading': isLoading,
|
|
8036
8036
|
'refreshing': this.isRefreshing,
|
|
8037
8037
|
};
|
|
8038
|
-
return (index.h(index.Host, { key: '
|
|
8038
|
+
return (index.h(index.Host, { key: '71072e7b78d93e2a3e3ae1980cc7e6146570f0c6', loading: isLoading }, index.h("div", { key: '5b8e6b6844e6c30787d89b6d29a8f1f47ac70d37', class: classes, part: "container", ref: element => {
|
|
8039
8039
|
this.containerElement = element;
|
|
8040
|
-
} }, !this.hideTitle && (index.h("div", { key: '
|
|
8040
|
+
} }, !this.hideTitle && (index.h("div", { key: 'bfe3e612595cf19ee5565c0738ea724c49d49400', class: "title", part: "title" }, (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.t('ui:energy_usage.title')) !== null && _b !== void 0 ? _b : '')), isLoading ? (index.h("div", { class: "loading", part: "loading" }, index.h("slot", { name: "loading" }, (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.t('ui:energy_usage.loading')) !== null && _d !== void 0 ? _d : ''))) : isEmptyPeriod ? (index.h("div", { class: "empty", part: "empty" }, (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.t('ui:energy_usage.none')) !== null && _f !== void 0 ? _f : '')) : (index.h("div", { class: "chart", part: "chart", ref: element => {
|
|
8041
8041
|
this.chartElement = element;
|
|
8042
|
-
} })), index.h("slot", { key: '
|
|
8042
|
+
} })), index.h("slot", { key: '49654fb5231da38dd15a569c9f70af9cafcc7f6a' }))));
|
|
8043
8043
|
}
|
|
8044
8044
|
static get watchers() { return {
|
|
8045
8045
|
"from": [{
|
|
@@ -88,6 +88,16 @@
|
|
|
88
88
|
color: var(--ls-counters-empty-color, var(--ls-gray-500));
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
+
/* A wide table scrolls instead of being cut off by the container */
|
|
92
|
+
.ls-counters .table-container {
|
|
93
|
+
overflow-x: auto;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.ls-counters .table-container:focus-visible {
|
|
97
|
+
outline: 2px solid var(--ls-secondary-color);
|
|
98
|
+
outline-offset: 2px;
|
|
99
|
+
}
|
|
100
|
+
|
|
91
101
|
.ls-counters table {
|
|
92
102
|
width: 100%;
|
|
93
103
|
border-collapse: collapse;
|
|
@@ -10,7 +10,7 @@ import { watchStoreLocale } from "../../utils/locale-state";
|
|
|
10
10
|
import { COUNTER_PER_STOP_REAR_SENSOR_IDS, COUNTER_PER_STOP_SENSOR_IDS, COUNTER_SENSOR_IDS, isSensorId, SENSOR } from "../../utils/sensors";
|
|
11
11
|
import { resolveCustomPeriod, resolvePeriod } from "../../utils/period";
|
|
12
12
|
import { ErrorType } from "../../utils/status";
|
|
13
|
-
import { getStoreUnavailableError } from "../../utils/store-error";
|
|
13
|
+
import { getHistoricStoreError, getStoreUnavailableError } from "../../utils/store-error";
|
|
14
14
|
import { translations } from "../../utils/translations";
|
|
15
15
|
import { buildSensorRowMap, deltaAt, EM_DASH, getRatio, getStopRowCount, totalOf } from "./ls-counters.utils";
|
|
16
16
|
/** Lodash `isEmpty` does not narrow, so this also gives a string out of an optional one. */
|
|
@@ -24,6 +24,7 @@ const REFETCH_MAX_WAIT_MS = 2000;
|
|
|
24
24
|
* @part container - The outer wrapper.
|
|
25
25
|
* @part title - The component heading.
|
|
26
26
|
* @part period - The line describing the period the counters cover.
|
|
27
|
+
* @part table-container - The wrapper that scrolls the table horizontally when it is wider than the component.
|
|
27
28
|
* @part table - The per-stop statistics table.
|
|
28
29
|
* @part caption - The table caption. Visually hidden by default.
|
|
29
30
|
* @part table-head - The table head.
|
|
@@ -174,11 +175,12 @@ export class LsCounters {
|
|
|
174
175
|
this.applyErrorOverlay();
|
|
175
176
|
return;
|
|
176
177
|
}
|
|
177
|
-
|
|
178
|
+
const storeError = getHistoricStoreError(this.store.state.error);
|
|
179
|
+
if (storeError.hasError) {
|
|
178
180
|
this.errorState = {
|
|
179
181
|
hasError: true,
|
|
180
|
-
messageKey:
|
|
181
|
-
type:
|
|
182
|
+
messageKey: storeError.messageKey,
|
|
183
|
+
type: storeError.type,
|
|
182
184
|
};
|
|
183
185
|
this.applyErrorOverlay();
|
|
184
186
|
return;
|
|
@@ -226,7 +228,7 @@ export class LsCounters {
|
|
|
226
228
|
this.applyErrorOverlay();
|
|
227
229
|
return;
|
|
228
230
|
}
|
|
229
|
-
if (this.store.state.error.hasError) {
|
|
231
|
+
if (getHistoricStoreError(this.store.state.error).hasError) {
|
|
230
232
|
this.updateErrorState();
|
|
231
233
|
this.isLoading = false;
|
|
232
234
|
return;
|
|
@@ -437,10 +439,11 @@ export class LsCounters {
|
|
|
437
439
|
}
|
|
438
440
|
renderTable(store, rowCount, columns) {
|
|
439
441
|
const noValueLabel = store.t('ui:counters.no_value');
|
|
440
|
-
|
|
442
|
+
const tableLabel = store.t('ui:counters.table_caption');
|
|
443
|
+
return (h("div", { class: "table-container", part: "table-container", tabindex: "0", role: "region", "aria-label": tableLabel }, h("table", { part: "table" }, h("caption", { class: "visually-hidden", part: "caption" }, tableLabel), h("thead", { part: "table-head" }, h("tr", { part: "header-row" }, h("th", { scope: "col", part: "column-header" }, store.t('ui:counters.column.stop')), columns.map(column => (h("th", { key: column.labelKey, scope: "col", class: "numeric", part: "column-header" }, store.t(column.labelKey)))))), h("tbody", { part: "table-body" }, Array.from({ length: rowCount }, (_unused, index) => (h("tr", { key: `stop-${index + 1}`, part: "row" }, h("th", { scope: "row", part: "cell stop-cell" }, this.formatNumber(index + 1)), columns.map(column => {
|
|
441
444
|
const isEmptyValue = column.isEmpty(index);
|
|
442
445
|
return (h("td", { key: column.labelKey, class: "numeric", part: isEmptyValue ? 'cell empty-value' : 'cell', title: isEmptyValue ? noValueLabel : undefined }, column.value(index)));
|
|
443
|
-
})))))));
|
|
446
|
+
}))))))));
|
|
444
447
|
}
|
|
445
448
|
renderTotals(store, totals) {
|
|
446
449
|
const noValueLabel = store.t('ui:counters.no_value');
|
|
@@ -459,9 +462,9 @@ export class LsCounters {
|
|
|
459
462
|
'loading': isLoading,
|
|
460
463
|
'refreshing': this.isRefreshing,
|
|
461
464
|
};
|
|
462
|
-
return (h(Host, { key: '
|
|
465
|
+
return (h(Host, { key: '0df2c002876d49d22a92a82dc06b41887fb90f71', loading: isLoading }, h("div", { key: '11484e37489819be12bf71298481d41e63bfa7cb', class: classes, part: "container", ref: element => {
|
|
463
466
|
this.containerElement = element;
|
|
464
|
-
} }, !this.hideTitle && (h("div", { key: '
|
|
467
|
+
} }, !this.hideTitle && (h("div", { key: '799b0ae59b0170b9e49fa66128921d33494e8f32', class: "title", part: "title" }, (_a = store === null || store === void 0 ? void 0 : store.t('ui:counters.title')) !== null && _a !== void 0 ? _a : '')), !this.hidePeriod && store !== null && (h("div", { key: '1a9899e80ef526ad4aee3547ebf2722a61ee69c6', class: "period", part: "period" }, this.getPeriodLabel(store))), store === null || isLoading ? (h("div", { class: "loading", part: "loading" }, h("slot", { name: "loading" }, (_b = store === null || store === void 0 ? void 0 : store.t('ui:counters.loading')) !== null && _b !== void 0 ? _b : ''))) : isEmptyPeriod ? (h("div", { class: "empty", part: "empty" }, store.t('ui:counters.none'))) : (h("div", { class: "content" }, !this.hideStops && rowCount > 0 && this.renderTable(store, rowCount, this.getColumns()), !this.hideTotals && totals.length > 0 && this.renderTotals(store, totals))), h("slot", { key: '33fc3ec5b102a4fa24f5143d033e3f3715eda6d5' }))));
|
|
465
468
|
}
|
|
466
469
|
static get is() { return "ls-counters"; }
|
|
467
470
|
static get encapsulation() { return "shadow"; }
|
|
@@ -13,7 +13,7 @@ import { watchStoreLocale } from "../../utils/locale-state";
|
|
|
13
13
|
import { resolveCustomPeriod, resolvePeriod } from "../../utils/period";
|
|
14
14
|
import { SENSOR } from "../../utils/sensors";
|
|
15
15
|
import { ErrorType } from "../../utils/status";
|
|
16
|
-
import { getStoreUnavailableError } from "../../utils/store-error";
|
|
16
|
+
import { getHistoricStoreError, getStoreUnavailableError } from "../../utils/store-error";
|
|
17
17
|
import { translations } from "../../utils/translations";
|
|
18
18
|
import { hasUsage, toChartRows } from "./ls-energy-usage.utils";
|
|
19
19
|
const REFETCH_DEBOUNCE_MS = 400;
|
|
@@ -98,7 +98,7 @@ export class LsEnergyUsage {
|
|
|
98
98
|
return;
|
|
99
99
|
this.scheduleLoad();
|
|
100
100
|
});
|
|
101
|
-
this.hadStoreError = this.store.state.error.hasError;
|
|
101
|
+
this.hadStoreError = getHistoricStoreError(this.store.state.error).hasError;
|
|
102
102
|
this.isComponentMounted = true;
|
|
103
103
|
this.updateErrorState();
|
|
104
104
|
// The first load is immediate, only refetches are debounced.
|
|
@@ -109,9 +109,8 @@ export class LsEnergyUsage {
|
|
|
109
109
|
return;
|
|
110
110
|
this.scheduleLoad();
|
|
111
111
|
}), this.store.onChange('error', () => {
|
|
112
|
-
var _a, _b;
|
|
113
112
|
const hadStoreError = this.hadStoreError;
|
|
114
|
-
this.hadStoreError =
|
|
113
|
+
this.hadStoreError = this.store !== null && getHistoricStoreError(this.store.state.error).hasError;
|
|
115
114
|
this.updateErrorState();
|
|
116
115
|
if (hadStoreError && !this.hadStoreError) {
|
|
117
116
|
this.scheduleLoad();
|
|
@@ -167,11 +166,12 @@ export class LsEnergyUsage {
|
|
|
167
166
|
this.applyErrorOverlay();
|
|
168
167
|
return;
|
|
169
168
|
}
|
|
170
|
-
|
|
169
|
+
const storeError = getHistoricStoreError(this.store.state.error);
|
|
170
|
+
if (storeError.hasError) {
|
|
171
171
|
this.errorState = {
|
|
172
172
|
hasError: true,
|
|
173
|
-
messageKey:
|
|
174
|
-
type:
|
|
173
|
+
messageKey: storeError.messageKey,
|
|
174
|
+
type: storeError.type,
|
|
175
175
|
};
|
|
176
176
|
this.applyErrorOverlay();
|
|
177
177
|
return;
|
|
@@ -220,7 +220,7 @@ export class LsEnergyUsage {
|
|
|
220
220
|
this.applyErrorOverlay();
|
|
221
221
|
return;
|
|
222
222
|
}
|
|
223
|
-
if (this.store.state.error.hasError) {
|
|
223
|
+
if (getHistoricStoreError(this.store.state.error).hasError) {
|
|
224
224
|
this.updateErrorState();
|
|
225
225
|
this.isLoading = false;
|
|
226
226
|
return;
|
|
@@ -377,11 +377,11 @@ export class LsEnergyUsage {
|
|
|
377
377
|
'loading': isLoading,
|
|
378
378
|
'refreshing': this.isRefreshing,
|
|
379
379
|
};
|
|
380
|
-
return (h(Host, { key: '
|
|
380
|
+
return (h(Host, { key: '71072e7b78d93e2a3e3ae1980cc7e6146570f0c6', loading: isLoading }, h("div", { key: '5b8e6b6844e6c30787d89b6d29a8f1f47ac70d37', class: classes, part: "container", ref: element => {
|
|
381
381
|
this.containerElement = element;
|
|
382
|
-
} }, !this.hideTitle && (h("div", { key: '
|
|
382
|
+
} }, !this.hideTitle && (h("div", { key: 'bfe3e612595cf19ee5565c0738ea724c49d49400', class: "title", part: "title" }, (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.t('ui:energy_usage.title')) !== null && _b !== void 0 ? _b : '')), isLoading ? (h("div", { class: "loading", part: "loading" }, h("slot", { name: "loading" }, (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.t('ui:energy_usage.loading')) !== null && _d !== void 0 ? _d : ''))) : isEmptyPeriod ? (h("div", { class: "empty", part: "empty" }, (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.t('ui:energy_usage.none')) !== null && _f !== void 0 ? _f : '')) : (h("div", { class: "chart", part: "chart", ref: element => {
|
|
383
383
|
this.chartElement = element;
|
|
384
|
-
} })), h("slot", { key: '
|
|
384
|
+
} })), h("slot", { key: '49654fb5231da38dd15a569c9f70af9cafcc7f6a' }))));
|
|
385
385
|
}
|
|
386
386
|
static get is() { return "ls-energy-usage"; }
|
|
387
387
|
static get encapsulation() { return "shadow"; }
|
|
@@ -87,6 +87,14 @@
|
|
|
87
87
|
background-color: var(--ls-history-swimlane-loading-background, white);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
+
/*
|
|
91
|
+
* The block behind the detail view. It needs a paint of its own to receive the
|
|
92
|
+
* mouse moves over empty space, so set a colour rather than `none`.
|
|
93
|
+
*/
|
|
94
|
+
.main-background-ui .background {
|
|
95
|
+
fill: var(--ls-history-swimlane-background, transparent);
|
|
96
|
+
}
|
|
97
|
+
|
|
90
98
|
/* An hour step keeps the drawn hour on screen until the next one arrives. */
|
|
91
99
|
.ls-history-swimlane.refreshing .chart {
|
|
92
100
|
opacity: var(--ls-history-swimlane-refreshing-opacity, 0.6);
|
|
@@ -7,6 +7,7 @@ import { applyErrorOverlay, clearError, logError, setError, updateErrorState } f
|
|
|
7
7
|
import { watchStoreLocale } from "../../utils/locale-state";
|
|
8
8
|
import { HISTORY_SWIMLANE_SENSOR_IDS, getHistorySwimlaneSensorIds } from "../../utils/sensors";
|
|
9
9
|
import { ErrorType } from "../../utils/status";
|
|
10
|
+
import { getHistoricStoreError } from "../../utils/store-error";
|
|
10
11
|
import { SwimlaneChart } from "./swimlane-chart";
|
|
11
12
|
import { buildSwimlaneModel } from "./swimlane-data";
|
|
12
13
|
import { formatTimestamp } from "./swimlane-format";
|
|
@@ -76,6 +77,7 @@ export class LsHistorySwimlane {
|
|
|
76
77
|
onRecovered: () => {
|
|
77
78
|
void this.load();
|
|
78
79
|
},
|
|
80
|
+
showsHistoricData: true,
|
|
79
81
|
};
|
|
80
82
|
}
|
|
81
83
|
onRangeProps() {
|
|
@@ -151,7 +153,7 @@ export class LsHistorySwimlane {
|
|
|
151
153
|
this.logError(description);
|
|
152
154
|
}
|
|
153
155
|
async load() {
|
|
154
|
-
if (this.store === null || this.store.state.error.hasError)
|
|
156
|
+
if (this.store === null || getHistoricStoreError(this.store.state.error).hasError)
|
|
155
157
|
return;
|
|
156
158
|
// A new window is a new attempt. Guarding on the component's own error
|
|
157
159
|
// instead latched it dead: only a *store* error ever clears that flag, and
|
|
@@ -327,9 +329,9 @@ export class LsHistorySwimlane {
|
|
|
327
329
|
const isPending = this.isLoading && !this.errorState.hasError;
|
|
328
330
|
const showLoading = isPending && this.rendered === null;
|
|
329
331
|
const isRefreshing = isPending && this.rendered !== null;
|
|
330
|
-
return (h(Host, { key: '
|
|
332
|
+
return (h(Host, { key: '1501166956470e971243cf538d81f6bf9a736456' }, h("div", { key: '27ea1820e073eb58b5815e0f4fad8f5c308b6eab', class: { 'ls-history-swimlane': true, 'refreshing': isRefreshing }, part: "container", tabindex: "0", role: "group", "aria-label": label, "aria-busy": this.isLoading ? 'true' : 'false', "aria-keyshortcuts": "ArrowLeft ArrowRight", ref: el => {
|
|
331
333
|
this.container = el !== null && el !== void 0 ? el : null;
|
|
332
|
-
} }), showLoading && (h("div", { key: '
|
|
334
|
+
} }), showLoading && (h("div", { key: '970a3d85fa09b23a192284f88532cdffb488a219', class: "loading", part: "loading" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.t('ui:general.loading'))), h("slot", { key: '9e5f8787f86ff7c57bdbfbe54469227b7e491caf' })));
|
|
333
335
|
}
|
|
334
336
|
static get is() { return "ls-history-swimlane"; }
|
|
335
337
|
static get encapsulation() { return "shadow"; }
|
|
@@ -244,7 +244,8 @@ export class SwimlaneChart {
|
|
|
244
244
|
});
|
|
245
245
|
const mainBackgroundUI = main.append('g').attr('width', innerWidth).attr('height', mainPlotHeight).attr('class', 'main-background-ui');
|
|
246
246
|
// A block at the back so the group reports mouse moves over empty space.
|
|
247
|
-
|
|
247
|
+
// Its fill comes from the stylesheet, so it can follow a dark theme.
|
|
248
|
+
mainBackgroundUI.append('rect').attr('width', innerWidth).attr('height', mainPlotHeight).attr('class', 'background');
|
|
248
249
|
this.rowHighlight = mainBackgroundUI
|
|
249
250
|
.append('rect')
|
|
250
251
|
.attr('x', 0)
|