@record-evolution/widget-value 1.0.10 → 1.0.12
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/src/widget-value.d.ts +2 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-value.js +168 -139
- package/dist/widget-value.js.map +1 -1
- package/package.json +4 -2
- package/src/definition-schema.d.ts +56 -0
- package/src/definition-schema.json +6 -2
- package/src/widget-value.ts +305 -241
- package/dist/src/types.d.ts +0 -28
- package/src/types.ts +0 -32
package/dist/widget-value.js
CHANGED
|
@@ -645,7 +645,7 @@ const z = {
|
|
|
645
645
|
B: L
|
|
646
646
|
},
|
|
647
647
|
Z = t$2.litHtmlPolyfillSupport;
|
|
648
|
-
Z?.(V, M), (t$2.litHtmlVersions ??= []).push("3.0
|
|
648
|
+
Z?.(V, M), (t$2.litHtmlVersions ??= []).push("3.1.0");
|
|
649
649
|
const j = (t, i, s) => {
|
|
650
650
|
const e = s?.renderBefore ?? i;
|
|
651
651
|
let h = e._$litPart$;
|
|
@@ -911,47 +911,42 @@ function r(r) {
|
|
|
911
911
|
class WidgetValue extends s$1 {
|
|
912
912
|
constructor() {
|
|
913
913
|
super();
|
|
914
|
-
this.inputData = undefined;
|
|
915
914
|
this.dataSets = new Map();
|
|
916
915
|
this.textActive = true;
|
|
917
|
-
this.version = '1.0.
|
|
916
|
+
this.version = '1.0.12';
|
|
918
917
|
this.origWidth = 0;
|
|
919
918
|
this.origHeight = 0;
|
|
920
919
|
this.resizeObserver = new ResizeObserver((ev) => this.adjustSizes());
|
|
921
920
|
this.resizeObserver.observe(this);
|
|
922
921
|
}
|
|
923
922
|
firstUpdated(_changedProperties) {
|
|
923
|
+
var _a;
|
|
924
|
+
this.valueContainer = (_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.value-container');
|
|
925
|
+
this.sizingSetup();
|
|
924
926
|
this.applyInputData();
|
|
925
927
|
}
|
|
926
928
|
update(changedProperties) {
|
|
927
|
-
changedProperties.
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
});
|
|
932
|
-
this.sizingSetup();
|
|
929
|
+
if (changedProperties.has('inputData')) {
|
|
930
|
+
this.sizingSetup();
|
|
931
|
+
this.applyInputData();
|
|
932
|
+
}
|
|
933
933
|
super.update(changedProperties);
|
|
934
934
|
}
|
|
935
935
|
sizingSetup() {
|
|
936
|
-
var _a, _b, _c
|
|
936
|
+
var _a, _b, _c;
|
|
937
937
|
if (this.origWidth !== 0 && this.origHeight !== 0)
|
|
938
938
|
return;
|
|
939
|
-
|
|
940
|
-
this.
|
|
941
|
-
|
|
942
|
-
this.
|
|
943
|
-
|
|
944
|
-
this.origHeight = (_h = (_g = this.boxes) === null || _g === void 0 ? void 0 : _g.map(b => b.getBoundingClientRect().height).reduce((p, c) => c > p ? c : p, 0)) !== null && _h !== void 0 ? _h : 0;
|
|
945
|
-
if (this.origWidth > 0)
|
|
946
|
-
this.origWidth += 16;
|
|
947
|
-
if (this.origHeight > 0)
|
|
948
|
-
this.origHeight += 16;
|
|
939
|
+
const boxes = Array.from((_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sizing-container > .single-value'));
|
|
940
|
+
this.origWidth =
|
|
941
|
+
(_b = boxes === null || boxes === void 0 ? void 0 : boxes.map((b) => b.getBoundingClientRect().width).reduce((p, c) => (c > p ? c : p), 0)) !== null && _b !== void 0 ? _b : 0;
|
|
942
|
+
this.origHeight =
|
|
943
|
+
(_c = boxes === null || boxes === void 0 ? void 0 : boxes.map((b) => b.getBoundingClientRect().height).reduce((p, c) => (c > p ? c : p), 0)) !== null && _c !== void 0 ? _c : 0;
|
|
949
944
|
this.adjustSizes();
|
|
950
945
|
}
|
|
951
946
|
adjustSizes() {
|
|
952
947
|
var _a, _b, _c, _d, _e, _f;
|
|
953
|
-
const userWidth = (_a = this.valueContainer) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
|
|
954
|
-
const userHeight = (
|
|
948
|
+
const userWidth = ((_b = (_a = this.valueContainer) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 32) - 32;
|
|
949
|
+
const userHeight = ((_d = (_c = this.valueContainer) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height) !== null && _d !== void 0 ? _d : 32) - 32;
|
|
955
950
|
const count = this.dataSets.size;
|
|
956
951
|
const width = this.origWidth;
|
|
957
952
|
const height = this.origHeight;
|
|
@@ -960,8 +955,8 @@ class WidgetValue extends s$1 {
|
|
|
960
955
|
const fits = [];
|
|
961
956
|
for (let c = 1; c <= count; c++) {
|
|
962
957
|
const r = Math.ceil(count / c);
|
|
963
|
-
const uwgap =
|
|
964
|
-
const uhgap =
|
|
958
|
+
const uwgap = userWidth - 12 * (c - 1);
|
|
959
|
+
const uhgap = userHeight - 12 * (r - 1);
|
|
965
960
|
const m = uwgap / width / c;
|
|
966
961
|
const size = m * m * width * height * count;
|
|
967
962
|
if (r * m * height < uhgap)
|
|
@@ -969,41 +964,47 @@ class WidgetValue extends s$1 {
|
|
|
969
964
|
}
|
|
970
965
|
for (let r = 1; r <= count; r++) {
|
|
971
966
|
const c = Math.ceil(count / r);
|
|
972
|
-
const uwgap =
|
|
973
|
-
const uhgap =
|
|
967
|
+
const uwgap = userWidth - 12 * (c - 1);
|
|
968
|
+
const uhgap = userHeight - 12 * (r - 1);
|
|
974
969
|
const m = uhgap / height / r;
|
|
975
970
|
const size = m * m * width * height * count;
|
|
976
971
|
if (c * m * width < uwgap)
|
|
977
972
|
fits.push({ r, m, size, width, height, userWidth, userHeight });
|
|
978
973
|
}
|
|
979
|
-
const maxSize = fits.reduce((p, c) => c.size < p ? p : c.size, 0);
|
|
980
|
-
const fit = fits.find(f => f.size === maxSize);
|
|
981
|
-
const modifier = (
|
|
974
|
+
const maxSize = fits.reduce((p, c) => (c.size < p ? p : c.size), 0);
|
|
975
|
+
const fit = fits.find((f) => f.size === maxSize);
|
|
976
|
+
const modifier = (_e = fit === null || fit === void 0 ? void 0 : fit.m) !== null && _e !== void 0 ? _e : 1;
|
|
982
977
|
// console.log('FITS', fits, 'modifier', modifier, 'cols',fit?.c, 'rows', fit?.r, 'new size', fit?.size.toFixed(0), 'total space', (userWidth* userHeight).toFixed(0))
|
|
983
|
-
(
|
|
984
|
-
|
|
985
|
-
|
|
978
|
+
const boxes = Array.from((_f = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelectorAll('.value-container > .single-value'));
|
|
979
|
+
boxes === null || boxes === void 0 ? void 0 : boxes.forEach((box) => box.setAttribute('style', `width:${modifier * width}px; height:${modifier * height}px; padding:${modifier * 6}px`));
|
|
980
|
+
boxes === null || boxes === void 0 ? void 0 : boxes.forEach((n) => {
|
|
986
981
|
const label = n.getAttribute('label');
|
|
987
982
|
const ds = this.dataSets.get(label !== null && label !== void 0 ? label : '');
|
|
988
|
-
|
|
983
|
+
const numberText = n.querySelector('.current-value');
|
|
984
|
+
numberText.setAttribute('style', `font-size: ${32 * modifier}px; ${(ds === null || ds === void 0 ? void 0 : ds.valueColor) ? 'color: ' + (ds === null || ds === void 0 ? void 0 : ds.valueColor) : ''}`);
|
|
989
985
|
});
|
|
990
|
-
|
|
991
|
-
var _a;
|
|
986
|
+
boxes === null || boxes === void 0 ? void 0 : boxes.forEach((n) => {
|
|
992
987
|
const label = n.getAttribute('label');
|
|
993
988
|
const ds = this.dataSets.get(label !== null && label !== void 0 ? label : '');
|
|
994
|
-
|
|
989
|
+
const labelText = n.querySelector('.label');
|
|
990
|
+
labelText.setAttribute('style', `font-size: ${26 * modifier}px; ${(ds === null || ds === void 0 ? void 0 : ds.labelColor) ? 'color: ' + (ds === null || ds === void 0 ? void 0 : ds.labelColor) : ''}`);
|
|
991
|
+
const unitText = n.querySelector('.unit');
|
|
992
|
+
unitText.setAttribute('style', `font-size: ${26 * modifier}px; ${(ds === null || ds === void 0 ? void 0 : ds.labelColor) ? 'color: ' + (ds === null || ds === void 0 ? void 0 : ds.labelColor) : ''}`);
|
|
995
993
|
});
|
|
996
994
|
this.textActive = true;
|
|
997
995
|
}
|
|
998
996
|
async applyInputData() {
|
|
997
|
+
var _a, _b;
|
|
999
998
|
if (!this.inputData)
|
|
1000
999
|
return;
|
|
1001
1000
|
this.dataSets = new Map();
|
|
1002
|
-
this.inputData.dataseries
|
|
1001
|
+
(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.dataseries) === null || _b === void 0 ? void 0 : _b.forEach((ds) => {
|
|
1002
|
+
var _a;
|
|
1003
1003
|
// pivot data
|
|
1004
|
-
const distincts = [...new Set(ds.data.map((d) => d.pivot))];
|
|
1004
|
+
const distincts = [...new Set((_a = ds.data) === null || _a === void 0 ? void 0 : _a.map((d) => d.pivot))];
|
|
1005
1005
|
if (distincts.length > 1 || distincts[0] !== undefined) {
|
|
1006
1006
|
distincts.forEach((piv) => {
|
|
1007
|
+
var _a;
|
|
1007
1008
|
const pds = {
|
|
1008
1009
|
label: `${ds.label} ${piv}`,
|
|
1009
1010
|
order: ds.order,
|
|
@@ -1011,7 +1012,7 @@ class WidgetValue extends s$1 {
|
|
|
1011
1012
|
averageLatest: ds.averageLatest,
|
|
1012
1013
|
labelColor: ds.labelColor,
|
|
1013
1014
|
valueColor: ds.valueColor,
|
|
1014
|
-
data: ds.data.filter(d => d.pivot === piv)
|
|
1015
|
+
data: (_a = ds.data) === null || _a === void 0 ? void 0 : _a.filter((d) => d.pivot === piv)
|
|
1015
1016
|
};
|
|
1016
1017
|
this.dataSets.set(pds.label, pds);
|
|
1017
1018
|
});
|
|
@@ -1022,11 +1023,13 @@ class WidgetValue extends s$1 {
|
|
|
1022
1023
|
});
|
|
1023
1024
|
// filter latest values and calculate average
|
|
1024
1025
|
this.dataSets.forEach((ds, label) => {
|
|
1025
|
-
var _a;
|
|
1026
|
+
var _a, _b, _c, _d;
|
|
1026
1027
|
if (typeof ds.averageLatest !== 'number' || !isNaN(ds.averageLatest))
|
|
1027
1028
|
ds.averageLatest = 1;
|
|
1028
|
-
ds.data =
|
|
1029
|
-
|
|
1029
|
+
ds.data = (_a = ds === null || ds === void 0 ? void 0 : ds.data) === null || _a === void 0 ? void 0 : _a.splice(-ds.averageLatest || -1);
|
|
1030
|
+
const values = ((_d = (_c = (_b = ds === null || ds === void 0 ? void 0 : ds.data) === null || _b === void 0 ? void 0 : _b.map((d) => d.value)) === null || _c === void 0 ? void 0 : _c.filter((p) => p !== undefined)) !== null && _d !== void 0 ? _d : []);
|
|
1031
|
+
const average = values.reduce((p, c) => p + c, 0) / values.length;
|
|
1032
|
+
ds.needleValue = average;
|
|
1030
1033
|
});
|
|
1031
1034
|
this.requestUpdate();
|
|
1032
1035
|
await this.updateComplete;
|
|
@@ -1035,114 +1038,140 @@ class WidgetValue extends s$1 {
|
|
|
1035
1038
|
render() {
|
|
1036
1039
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1037
1040
|
return x `
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1041
|
+
<div class="wrapper">
|
|
1042
|
+
<header>
|
|
1043
|
+
<h3 class="paging" ?active=${(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.title}>
|
|
1044
|
+
${(_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.settings) === null || _d === void 0 ? void 0 : _d.title}
|
|
1045
|
+
</h3>
|
|
1046
|
+
<p class="paging" ?active=${(_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.settings) === null || _f === void 0 ? void 0 : _f.subTitle}>
|
|
1047
|
+
${(_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.settings) === null || _h === void 0 ? void 0 : _h.subTitle}
|
|
1048
|
+
</p>
|
|
1049
|
+
</header>
|
|
1050
|
+
<div class="sizing-container">
|
|
1051
|
+
${c(this.dataSets, ([label]) => label, ([label, ds]) => {
|
|
1046
1052
|
return x `
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
${isNaN(ds.needleValue) ? '' : ds.needleValue.toFixed(0)}
|
|
1060
|
-
</span>
|
|
1061
|
-
<span class="label paging" label="${label}" ?active=${this.textActive} >
|
|
1062
|
-
${ds.unit}
|
|
1063
|
-
</span>
|
|
1064
|
-
</div>
|
|
1065
|
-
`;
|
|
1053
|
+
<div class="single-value" label="${label}">
|
|
1054
|
+
<div class="label paging" ?active=${this.textActive}>${label}</div>
|
|
1055
|
+
<div class="horizontal">
|
|
1056
|
+
<div class="current-value paging" ?active=${this.textActive}>
|
|
1057
|
+
${isNaN(ds.needleValue)
|
|
1058
|
+
? ''
|
|
1059
|
+
: ds.needleValue.toFixed(0)}
|
|
1060
|
+
</div>
|
|
1061
|
+
<div class="unit paging" ?active=${this.textActive}>${ds.unit}</div>
|
|
1062
|
+
</div>
|
|
1063
|
+
</div>
|
|
1064
|
+
`;
|
|
1066
1065
|
})}
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1066
|
+
</div>
|
|
1067
|
+
<div class="value-container">
|
|
1068
|
+
${c(this.dataSets, ([label]) => label, ([label, ds]) => {
|
|
1069
|
+
return x `
|
|
1070
|
+
<div class="single-value" label="${label}">
|
|
1071
|
+
<div class="label paging" ?active=${this.textActive}>${label}</div>
|
|
1072
|
+
<span class="current-value paging" ?active=${this.textActive}>
|
|
1073
|
+
${isNaN(ds.needleValue)
|
|
1074
|
+
? ''
|
|
1075
|
+
: ds.needleValue.toFixed(0)}
|
|
1076
|
+
</span>
|
|
1077
|
+
<span class="unit paging" ?active=${this.textActive}>${ds.unit}</span>
|
|
1078
|
+
</div>
|
|
1079
|
+
`;
|
|
1080
|
+
})}
|
|
1081
|
+
</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
`;
|
|
1070
1084
|
}
|
|
1071
1085
|
}
|
|
1072
1086
|
WidgetValue.styles = i$3 `
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1087
|
+
:host {
|
|
1088
|
+
display: block;
|
|
1089
|
+
font-family: sans-serif;
|
|
1090
|
+
box-sizing: border-box;
|
|
1091
|
+
position: relative;
|
|
1092
|
+
margin: auto;
|
|
1093
|
+
}
|
|
1080
1094
|
|
|
1081
|
-
|
|
1095
|
+
.paging:not([active]) {
|
|
1096
|
+
display: none !important;
|
|
1097
|
+
}
|
|
1082
1098
|
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1099
|
+
.wrapper {
|
|
1100
|
+
display: flex;
|
|
1101
|
+
flex-direction: column;
|
|
1102
|
+
height: 100%;
|
|
1103
|
+
line-height: 0.9;
|
|
1104
|
+
width: 100%;
|
|
1105
|
+
padding: 16px;
|
|
1106
|
+
box-sizing: border-box;
|
|
1107
|
+
}
|
|
1091
1108
|
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1109
|
+
h3 {
|
|
1110
|
+
margin: 0;
|
|
1111
|
+
max-width: 300px;
|
|
1112
|
+
overflow: hidden;
|
|
1113
|
+
text-overflow: ellipsis;
|
|
1114
|
+
white-space: nowrap;
|
|
1115
|
+
color: var(--re-text-color, #000) !important;
|
|
1116
|
+
}
|
|
1117
|
+
p {
|
|
1118
|
+
margin: 10px 0 0 0;
|
|
1119
|
+
max-width: 300px;
|
|
1120
|
+
font-size: 14px;
|
|
1121
|
+
line-height: 17px;
|
|
1122
|
+
overflow: hidden;
|
|
1123
|
+
text-overflow: ellipsis;
|
|
1124
|
+
white-space: nowrap;
|
|
1125
|
+
color: var(--re-text-color, #000) !important;
|
|
1126
|
+
}
|
|
1110
1127
|
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1128
|
+
.value-container {
|
|
1129
|
+
display: flex;
|
|
1130
|
+
flex-wrap: wrap;
|
|
1131
|
+
align-items: center;
|
|
1132
|
+
justify-content: center;
|
|
1133
|
+
flex: 1;
|
|
1134
|
+
overflow: hidden;
|
|
1135
|
+
position: relative;
|
|
1136
|
+
gap: 12px;
|
|
1137
|
+
}
|
|
1121
1138
|
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
}
|
|
1139
|
+
.single-value {
|
|
1140
|
+
overflow: hidden;
|
|
1141
|
+
position: relative;
|
|
1142
|
+
align-items: end;
|
|
1143
|
+
padding: 6px;
|
|
1144
|
+
box-sizing: border-box;
|
|
1145
|
+
/* border-left: 4px solid #ddd; */
|
|
1146
|
+
}
|
|
1131
1147
|
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1148
|
+
.current-value {
|
|
1149
|
+
font-size: 32px;
|
|
1150
|
+
font-weight: 600;
|
|
1151
|
+
white-space: nowrap;
|
|
1152
|
+
color: var(--re-text-color, #000);
|
|
1153
|
+
}
|
|
1138
1154
|
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1155
|
+
.label,
|
|
1156
|
+
.unit {
|
|
1157
|
+
font-weight: 300;
|
|
1158
|
+
font-size: 26px;
|
|
1159
|
+
color: var(--re-text-color, #000);
|
|
1160
|
+
white-space: nowrap;
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
.sizing-container {
|
|
1164
|
+
position: absolute;
|
|
1165
|
+
left: 10000px;
|
|
1166
|
+
display: flex;
|
|
1167
|
+
flex-wrap: wrap;
|
|
1168
|
+
align-items: center;
|
|
1169
|
+
justify-content: center;
|
|
1170
|
+
flex: 1;
|
|
1171
|
+
overflow: hidden;
|
|
1172
|
+
gap: 12px;
|
|
1173
|
+
}
|
|
1174
|
+
`;
|
|
1146
1175
|
__decorate([
|
|
1147
1176
|
n({ type: Object })
|
|
1148
1177
|
], WidgetValue.prototype, "inputData", void 0);
|
|
@@ -1158,7 +1187,7 @@ __decorate([
|
|
|
1158
1187
|
__decorate([
|
|
1159
1188
|
r()
|
|
1160
1189
|
], WidgetValue.prototype, "labelText", void 0);
|
|
1161
|
-
window.customElements.define('widget-value-1.0.
|
|
1190
|
+
window.customElements.define('widget-value-1.0.12', WidgetValue);
|
|
1162
1191
|
|
|
1163
1192
|
export { WidgetValue };
|
|
1164
1193
|
//# sourceMappingURL=widget-value.js.map
|