@record-evolution/widget-gauge 1.5.21 → 1.5.23

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.
@@ -908,17 +908,15 @@ function r(r) {
908
908
  });
909
909
  }
910
910
 
911
- // echarts.use([GaugeChart, CanvasRenderer]);
912
911
  class WidgetGauge extends s$1 {
913
912
  constructor() {
914
913
  super();
915
- this.inputData = undefined;
916
914
  this.dataSets = [];
917
915
  this.canvasList = {};
918
916
  this.origWidth = 0;
919
917
  this.origHeight = 0;
920
918
  this.modifier = 1;
921
- this.version = '1.5.21';
919
+ this.version = '1.5.23';
922
920
  this.resizeObserver = new ResizeObserver(this.adjustSizes.bind(this));
923
921
  this.template = {
924
922
  title: {
@@ -957,7 +955,7 @@ class WidgetGauge extends s$1 {
957
955
  fontSize: 25,
958
956
  offsetCenter: [0, '-7%'],
959
957
  color: 'inherit',
960
- formatter: (val) => isNaN(val) ? '-' : val.toFixed()
958
+ formatter: (val) => (isNaN(val) ? '-' : val.toFixed())
961
959
  },
962
960
  title: {
963
961
  offsetCenter: [0, '-35%'],
@@ -965,7 +963,7 @@ class WidgetGauge extends s$1 {
965
963
  },
966
964
  data: [
967
965
  {
968
- value: 70,
966
+ value: 70
969
967
  }
970
968
  ]
971
969
  },
@@ -993,16 +991,16 @@ class WidgetGauge extends s$1 {
993
991
  distance: -25,
994
992
  lineStyle: {
995
993
  width: 2,
996
- color: 'auto',
994
+ color: 'auto'
997
995
  }
998
996
  },
999
997
  axisLabel: {
1000
998
  distance: -20,
1001
999
  color: '#999',
1002
1000
  rotate: 'tangential',
1003
- fontSize: 12,
1004
- },
1005
- },
1001
+ fontSize: 12
1002
+ }
1003
+ }
1006
1004
  ]
1007
1005
  };
1008
1006
  }
@@ -1030,8 +1028,10 @@ class WidgetGauge extends s$1 {
1030
1028
  this.boxes = Array.from((_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.chart'));
1031
1029
  if (!this.boxes.length)
1032
1030
  return;
1033
- this.origWidth = (_c = (_b = this.boxes) === null || _b === void 0 ? void 0 : _b.map(b => b.getBoundingClientRect().width).reduce((p, c) => c > p ? c : p, 0)) !== null && _c !== void 0 ? _c : 0;
1034
- this.origHeight = (_e = (_d = this.boxes) === null || _d === void 0 ? void 0 : _d.map(b => b.getBoundingClientRect().height).reduce((p, c) => c > p ? c : p, 0)) !== null && _e !== void 0 ? _e : 0;
1031
+ this.origWidth =
1032
+ (_c = (_b = this.boxes) === null || _b === void 0 ? void 0 : _b.map((b) => b.getBoundingClientRect().width).reduce((p, c) => (c > p ? c : p), 0)) !== null && _c !== void 0 ? _c : 0;
1033
+ this.origHeight =
1034
+ (_e = (_d = this.boxes) === null || _d === void 0 ? void 0 : _d.map((b) => b.getBoundingClientRect().height).reduce((p, c) => (c > p ? c : p), 0)) !== null && _e !== void 0 ? _e : 0;
1035
1035
  if (this.origWidth > 0)
1036
1036
  this.origWidth += 16;
1037
1037
  if (this.origHeight > 0)
@@ -1054,8 +1054,8 @@ class WidgetGauge extends s$1 {
1054
1054
  const fits = [];
1055
1055
  for (let c = 1; c <= count; c++) {
1056
1056
  const r = Math.ceil(count / c);
1057
- const uwgap = (userWidth - 12 * (c - 1));
1058
- const uhgap = (userHeight - 12 * (r - 1));
1057
+ const uwgap = userWidth - 12 * (c - 1);
1058
+ const uhgap = userHeight - 12 * (r - 1);
1059
1059
  const m = uwgap / width / c;
1060
1060
  const size = m * m * width * height * count;
1061
1061
  if (r * m * height < uhgap)
@@ -1063,18 +1063,18 @@ class WidgetGauge extends s$1 {
1063
1063
  }
1064
1064
  for (let r = 1; r <= count; r++) {
1065
1065
  const c = Math.ceil(count / r);
1066
- const uwgap = (userWidth - 12 * (c - 1));
1067
- const uhgap = (userHeight - 12 * (r - 1));
1066
+ const uwgap = userWidth - 12 * (c - 1);
1067
+ const uhgap = userHeight - 12 * (r - 1);
1068
1068
  const m = uhgap / height / r;
1069
1069
  const size = m * m * width * height * count;
1070
1070
  if (c * m * width < uwgap)
1071
1071
  fits.push({ r, m, size, width, height, userWidth, userHeight });
1072
1072
  }
1073
- const maxSize = fits.reduce((p, c) => c.size < p ? p : c.size, 0);
1074
- const fit = fits.find(f => f.size === maxSize);
1075
- const modifier = ((_b = fit === null || fit === void 0 ? void 0 : fit.m) !== null && _b !== void 0 ? _b : 0);
1073
+ const maxSize = fits.reduce((p, c) => (c.size < p ? p : c.size), 0);
1074
+ const fit = fits.find((f) => f.size === maxSize);
1075
+ const modifier = (_b = fit === null || fit === void 0 ? void 0 : fit.m) !== null && _b !== void 0 ? _b : 0;
1076
1076
  // console.log('FITS count', count, userWidth, userHeight, 'modifier', modifier, 'cols',fit?.c, 'rows', fit?.r, 'new size', fit?.size.toFixed(0), 'total space', (userWidth* userHeight).toFixed(0))
1077
- (_c = this.boxes) === null || _c === void 0 ? void 0 : _c.forEach(box => box.setAttribute("style", `width:${modifier * width}px; height:${modifier * height}px`));
1077
+ (_c = this.boxes) === null || _c === void 0 ? void 0 : _c.forEach((box) => box.setAttribute('style', `width:${modifier * width}px; height:${modifier * height}px`));
1078
1078
  this.modifier = modifier;
1079
1079
  for (const canvas in this.canvasList) {
1080
1080
  this.canvasList[canvas].resize();
@@ -1086,11 +1086,13 @@ class WidgetGauge extends s$1 {
1086
1086
  if (!(this === null || this === void 0 ? void 0 : this.inputData))
1087
1087
  return;
1088
1088
  this.dataSets = [];
1089
- (_a = this.inputData.dataseries) === null || _a === void 0 ? void 0 : _a.forEach(ds => {
1089
+ (_a = this.inputData.dataseries) === null || _a === void 0 ? void 0 : _a.forEach((ds) => {
1090
+ var _a;
1090
1091
  // pivot data
1091
- const distincts = [...new Set(ds.data.map((d) => d.pivot))];
1092
+ const distincts = [...new Set((_a = ds === null || ds === void 0 ? void 0 : ds.data) === null || _a === void 0 ? void 0 : _a.map((d) => d.pivot))];
1092
1093
  if (distincts.length > 1) {
1093
1094
  distincts.forEach((piv) => {
1095
+ var _a;
1094
1096
  const pds = {
1095
1097
  label: `${ds.label} ${piv}`,
1096
1098
  unit: ds.unit,
@@ -1098,7 +1100,7 @@ class WidgetGauge extends s$1 {
1098
1100
  valueColor: ds.valueColor,
1099
1101
  sections: ds.sections,
1100
1102
  backgroundColors: ds.backgroundColors,
1101
- data: ds.data.filter(d => d.pivot === piv)
1103
+ data: (_a = ds === null || ds === void 0 ? void 0 : ds.data) === null || _a === void 0 ? void 0 : _a.filter((d) => d.pivot === piv)
1102
1104
  };
1103
1105
  this.dataSets.push(pds);
1104
1106
  });
@@ -1110,20 +1112,24 @@ class WidgetGauge extends s$1 {
1110
1112
  // console.log('Gauge Datasets', this.dataSets)
1111
1113
  }
1112
1114
  applyData() {
1113
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
1115
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
1114
1116
  const modifier = this.modifier;
1115
1117
  this.setupCharts();
1118
+ this.dataSets.sort((a, b) => (a.label < b.label ? 1 : -1));
1119
+ this.requestUpdate();
1116
1120
  for (const ds of this.dataSets) {
1117
1121
  // compute derivative values
1118
1122
  // filter latest values and calculate average
1119
1123
  if (typeof ds.averageLatest !== 'number' || !isNaN(ds.averageLatest))
1120
1124
  ds.averageLatest = 1;
1121
- ds.data = ds.data.splice(-ds.averageLatest || -1);
1122
- ds.needleValue = (_a = ds.data.map(d => d.value).reduce((p, c) => p + c, 0) / ds.data.length) !== null && _a !== void 0 ? _a : (_b = ds.sections) === null || _b === void 0 ? void 0 : _b[0];
1123
- ds.range = (_f = ((_c = ds.sections) === null || _c === void 0 ? void 0 : _c[((_d = ds.sections) === null || _d === void 0 ? void 0 : _d.length) - 1]) - ((_e = ds.sections) === null || _e === void 0 ? void 0 : _e[0])) !== null && _f !== void 0 ? _f : 100;
1125
+ ds.data = (_a = ds === null || ds === void 0 ? void 0 : ds.data) === null || _a === void 0 ? void 0 : _a.splice(-ds.averageLatest || -1);
1126
+ 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 : []);
1127
+ const average = values.reduce((p, c) => p + c, 0) / values.length;
1128
+ ds.needleValue = isNaN(average) ? (_e = ds.sections) === null || _e === void 0 ? void 0 : _e[0] : average;
1129
+ ds.range = ((_h = (_f = ds.sections) === null || _f === void 0 ? void 0 : _f[((_g = ds.sections) === null || _g === void 0 ? void 0 : _g.length) - 1]) !== null && _h !== void 0 ? _h : 100) - ((_k = (_j = ds.sections) === null || _j === void 0 ? void 0 : _j[0]) !== null && _k !== void 0 ? _k : 0);
1124
1130
  if (isNaN(ds.range))
1125
1131
  ds.range = 100;
1126
- ds.ranges = (_h = (_g = ds.sections) === null || _g === void 0 ? void 0 : _g.map((v, i, a) => { var _a; return v - ((_a = a === null || a === void 0 ? void 0 : a[i - 1]) !== null && _a !== void 0 ? _a : 0); }).slice(1)) !== null && _h !== void 0 ? _h : [];
1132
+ ds.ranges = (_m = (_l = ds.sections) === null || _l === void 0 ? void 0 : _l.map((v, i, a) => { var _a; return v - ((_a = a === null || a === void 0 ? void 0 : a[i - 1]) !== null && _a !== void 0 ? _a : 0); }).slice(1)) !== null && _m !== void 0 ? _m : [];
1127
1133
  // const option = this.canvasList[ds.label].getOption()
1128
1134
  const option = JSON.parse(JSON.stringify(this.template));
1129
1135
  const ga = option.series[0], ga2 = option.series[1];
@@ -1134,48 +1140,49 @@ class WidgetGauge extends s$1 {
1134
1140
  ga.data[0].value = ds.needleValue;
1135
1141
  ga.data[0].name = ds.unit;
1136
1142
  ga.title.fontSize = 20 * modifier;
1137
- ga.title.color = (_j = ds.valueColor) !== null && _j !== void 0 ? _j : 'black';
1138
- ga.detail.color = (_k = ds.valueColor) !== null && _k !== void 0 ? _k : 'black';
1143
+ ga.title.color = (_o = ds.valueColor) !== null && _o !== void 0 ? _o : 'black';
1144
+ ga.detail.color = (_p = ds.valueColor) !== null && _p !== void 0 ? _p : 'black';
1139
1145
  ga.detail.fontSize = 40 * modifier;
1140
- ga.detail.formatter = (val) => isNaN(val) ? '-' : val.toFixed(0);
1146
+ ga.detail.formatter = (val) => (isNaN(val) ? '-' : val.toFixed(0));
1141
1147
  // ga.anchor.itemStyle.color = ds.valueColor
1142
1148
  // ga.pointer.itemStyle.color = ds.valueColor
1143
1149
  // Axis
1144
- ga2.min = ((_l = ds.sections) === null || _l === void 0 ? void 0 : _l.length) ? Math.min(...ds.sections) : 0;
1145
- ga2.max = ((_m = ds.sections) === null || _m === void 0 ? void 0 : _m.length) ? Math.max(...ds.sections) : 100;
1150
+ ga2.min = ((_q = ds.sections) === null || _q === void 0 ? void 0 : _q.length) ? Math.min(...ds.sections) : 0;
1151
+ ga2.max = ((_r = ds.sections) === null || _r === void 0 ? void 0 : _r.length) ? Math.max(...ds.sections) : 100;
1146
1152
  ga.min = ga2.min;
1147
1153
  ga.max = ga2.max;
1148
- // @ts-ignore
1149
- const colorSections = (_o = ds.backgroundColors) === null || _o === void 0 ? void 0 : _o.map((b, i) => { var _a; return [(((_a = ds.sections) === null || _a === void 0 ? void 0 : _a[i + 1]) - ga.min) / ds.range, b]; }).filter(([s]) => !isNaN(s));
1154
+ const colorSections = (_s = ds.backgroundColors) === null || _s === void 0 ? void 0 : _s.map((b, i) => { var _a, _b; return [(((_b = (_a = ds.sections) === null || _a === void 0 ? void 0 : _a[i + 1]) !== null && _b !== void 0 ? _b : ga.min) - ga.min) / ds.range, b]; }).filter(([s]) => !isNaN(s));
1150
1155
  ga2.axisLine.lineStyle.width = 8 * modifier;
1151
- ga2.axisLine.lineStyle.color = (colorSections === null || colorSections === void 0 ? void 0 : colorSections.length) ? colorSections : ga2.axisLine.lineStyle.color;
1156
+ ga2.axisLine.lineStyle.color = (colorSections === null || colorSections === void 0 ? void 0 : colorSections.length)
1157
+ ? colorSections
1158
+ : ga2.axisLine.lineStyle.color;
1152
1159
  ga2.axisLabel.fontSize = 20 * modifier;
1153
1160
  // ga2.axisLabel.color = ds.valueColor
1154
1161
  ga2.axisLabel.distance = -24 * modifier;
1155
1162
  ga2.splitLine.length = 16 * modifier;
1156
1163
  ga2.splitLine.distance = -16 * modifier;
1157
1164
  // Progress
1158
- let progressColor = (_q = (_p = ds.backgroundColors) === null || _p === void 0 ? void 0 : _p[ds.backgroundColors.length - 1]) !== null && _q !== void 0 ? _q : 'green';
1159
- for (const [i, s] of (_s = (_r = ds.sections) === null || _r === void 0 ? void 0 : _r.entries()) !== null && _s !== void 0 ? _s : []) {
1165
+ let progressColor = (_u = (_t = ds.backgroundColors) === null || _t === void 0 ? void 0 : _t[ds.backgroundColors.length - 1]) !== null && _u !== void 0 ? _u : 'green';
1166
+ for (const [i, s] of (_w = (_v = ds.sections) === null || _v === void 0 ? void 0 : _v.entries()) !== null && _w !== void 0 ? _w : []) {
1160
1167
  if (s > ds.needleValue) {
1161
- progressColor = (_t = ds.backgroundColors[i - 1]) !== null && _t !== void 0 ? _t : ds.backgroundColors[0];
1168
+ progressColor = (_0 = (_y = (_x = ds.backgroundColors) === null || _x === void 0 ? void 0 : _x[i - 1]) !== null && _y !== void 0 ? _y : (_z = ds.backgroundColors) === null || _z === void 0 ? void 0 : _z[0]) !== null && _0 !== void 0 ? _0 : 'green';
1162
1169
  break;
1163
1170
  }
1164
1171
  }
1165
1172
  ga.progress.itemStyle.color = progressColor;
1166
1173
  ga.progress.width = 80 * modifier;
1167
1174
  // Apply
1168
- (_u = this.canvasList[ds.label]) === null || _u === void 0 ? void 0 : _u.setOption(option);
1175
+ (_1 = this.canvasList[ds.label]) === null || _1 === void 0 ? void 0 : _1.setOption(option);
1169
1176
  }
1170
1177
  }
1171
1178
  setupCharts() {
1172
1179
  // remove the gauge canvases of non provided data series
1173
1180
  for (const label in this.canvasList) {
1174
- const ex = this.dataSets.find(ds => ds.label === label);
1181
+ const ex = this.dataSets.find((ds) => ds.label === label);
1175
1182
  if (!ex)
1176
1183
  delete this.canvasList[label];
1177
1184
  }
1178
- this.dataSets.forEach(ds => {
1185
+ this.dataSets.forEach((ds) => {
1179
1186
  var _a;
1180
1187
  if (this.canvasList[ds.label])
1181
1188
  return;
@@ -1190,81 +1197,90 @@ class WidgetGauge extends s$1 {
1190
1197
  render() {
1191
1198
  var _a, _b, _c, _d, _e, _f, _g, _h;
1192
1199
  return x `
1193
- <div class="wrapper">
1194
- <header>
1195
- <h3 class="paging" ?active=${(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.title}>${(_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.settings) === null || _d === void 0 ? void 0 : _d.title}</h3>
1196
- <p class="paging" ?active=${(_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.settings) === null || _f === void 0 ? void 0 : _f.subTitle}>${(_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.settings) === null || _h === void 0 ? void 0 : _h.subTitle}</p>
1197
- </header>
1198
- <div class="gauge-container">
1199
- ${c(this.dataSets, ds => ds.label, ds => x `
1200
- <div name="${ds.label}" class="chart" style="min-width: 600px; min-height: 300px; width: 600px; height: 300px;"></div>
1201
- `)}
1202
- </div>
1203
- </div>
1204
- `;
1200
+ <div class="wrapper">
1201
+ <header>
1202
+ <h3 class="paging" ?active=${(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.title}>
1203
+ ${(_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.settings) === null || _d === void 0 ? void 0 : _d.title}
1204
+ </h3>
1205
+ <p class="paging" ?active=${(_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.settings) === null || _f === void 0 ? void 0 : _f.subTitle}>
1206
+ ${(_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.settings) === null || _h === void 0 ? void 0 : _h.subTitle}
1207
+ </p>
1208
+ </header>
1209
+ <div class="gauge-container">
1210
+ ${c(this.dataSets, (ds) => ds.label, (ds) => x `
1211
+ <div
1212
+ name="${ds.label}"
1213
+ class="chart"
1214
+ style="min-width: 600px; min-height: 300px; width: 600px; height: 300px;"
1215
+ ></div>
1216
+ `)}
1217
+ </div>
1218
+ </div>
1219
+ `;
1205
1220
  }
1206
1221
  }
1207
1222
  WidgetGauge.styles = i$3 `
1208
- :host {
1209
- display: block;
1210
- color: var(--re-text-color, #000);
1211
- font-family: sans-serif;
1212
- box-sizing: border-box;
1213
- position: relative;
1214
- margin: auto;
1215
- }
1216
-
1217
- .paging:not([active]) { display: none !important; }
1223
+ :host {
1224
+ display: block;
1225
+ color: var(--re-text-color, #000);
1226
+ font-family: sans-serif;
1227
+ box-sizing: border-box;
1228
+ position: relative;
1229
+ margin: auto;
1230
+ }
1218
1231
 
1219
- .wrapper {
1220
- display: flex;
1221
- flex-direction: column;
1222
- height: 100%;
1223
- width: 100%;
1224
- padding: 16px;
1225
- box-sizing: border-box;
1226
- }
1227
- .gauge-container {
1228
- display: flex;
1229
- flex: 1;
1230
- justify-content: center;
1231
- align-items: center;
1232
- flex-wrap: wrap;
1233
- overflow: hidden;
1234
- position: relative;
1235
- gap: 12px;
1236
- }
1232
+ .paging:not([active]) {
1233
+ display: none !important;
1234
+ }
1237
1235
 
1238
- header {
1239
- display: flex;
1240
- flex-direction: column;
1241
- margin: 0 0 16px 0;
1242
- }
1243
- h3 {
1244
- margin: 0;
1245
- max-width: 300px;
1246
- overflow: hidden;
1247
- text-overflow: ellipsis;
1248
- white-space: nowrap;
1249
- color: var(--re-text-color, #000) !important;
1250
- }
1251
- p {
1252
- margin: 10px 0 0 0;
1253
- max-width: 300px;
1254
- font-size: 14px;
1255
- line-height: 17px;
1256
- overflow: hidden;
1257
- text-overflow: ellipsis;
1258
- white-space: nowrap;
1259
- color: var(--re-text-color, #000) !important;
1260
- }
1236
+ .wrapper {
1237
+ display: flex;
1238
+ flex-direction: column;
1239
+ height: 100%;
1240
+ width: 100%;
1241
+ padding: 16px;
1242
+ box-sizing: border-box;
1243
+ }
1244
+ .gauge-container {
1245
+ display: flex;
1246
+ flex: 1;
1247
+ justify-content: center;
1248
+ align-items: center;
1249
+ flex-wrap: wrap;
1250
+ overflow: hidden;
1251
+ position: relative;
1252
+ gap: 12px;
1253
+ }
1261
1254
 
1262
- .chart {
1263
- width: 600px; /* will be overriden by adjustSizes */
1264
- height: 300px;
1265
- }
1255
+ header {
1256
+ display: flex;
1257
+ flex-direction: column;
1258
+ margin: 0 0 16px 0;
1259
+ }
1260
+ h3 {
1261
+ margin: 0;
1262
+ max-width: 300px;
1263
+ overflow: hidden;
1264
+ text-overflow: ellipsis;
1265
+ white-space: nowrap;
1266
+ color: var(--re-text-color, #000) !important;
1267
+ }
1268
+ p {
1269
+ margin: 10px 0 0 0;
1270
+ max-width: 300px;
1271
+ font-size: 14px;
1272
+ line-height: 17px;
1273
+ overflow: hidden;
1274
+ text-overflow: ellipsis;
1275
+ white-space: nowrap;
1276
+ color: var(--re-text-color, #000) !important;
1277
+ }
1266
1278
 
1267
- `;
1279
+ .chart {
1280
+ width: 600px; /* will be overriden by adjustSizes */
1281
+ height: 300px;
1282
+ }
1283
+ `;
1268
1284
  __decorate([
1269
1285
  n({ type: Object })
1270
1286
  ], WidgetGauge.prototype, "inputData", void 0);
@@ -1274,7 +1290,7 @@ __decorate([
1274
1290
  __decorate([
1275
1291
  r()
1276
1292
  ], WidgetGauge.prototype, "canvasList", void 0);
1277
- window.customElements.define('widget-gauge-1.5.21', WidgetGauge);
1293
+ window.customElements.define('widget-gauge-1.5.23', WidgetGauge);
1278
1294
 
1279
1295
  export { WidgetGauge };
1280
1296
  //# sourceMappingURL=widget-gauge.js.map