@record-evolution/widget-gauge 1.5.21 → 1.5.22

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.22';
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,7 +1112,7 @@ 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();
1116
1118
  for (const ds of this.dataSets) {
@@ -1118,12 +1120,14 @@ class WidgetGauge extends s$1 {
1118
1120
  // filter latest values and calculate average
1119
1121
  if (typeof ds.averageLatest !== 'number' || !isNaN(ds.averageLatest))
1120
1122
  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;
1123
+ ds.data = (_a = ds === null || ds === void 0 ? void 0 : ds.data) === null || _a === void 0 ? void 0 : _a.splice(-ds.averageLatest || -1);
1124
+ 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 : []);
1125
+ const average = values.reduce((p, c) => p + c, 0) / values.length;
1126
+ ds.needleValue = isNaN(average) ? (_e = ds.sections) === null || _e === void 0 ? void 0 : _e[0] : average;
1127
+ 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
1128
  if (isNaN(ds.range))
1125
1129
  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 : [];
1130
+ 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
1131
  // const option = this.canvasList[ds.label].getOption()
1128
1132
  const option = JSON.parse(JSON.stringify(this.template));
1129
1133
  const ga = option.series[0], ga2 = option.series[1];
@@ -1134,48 +1138,49 @@ class WidgetGauge extends s$1 {
1134
1138
  ga.data[0].value = ds.needleValue;
1135
1139
  ga.data[0].name = ds.unit;
1136
1140
  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';
1141
+ ga.title.color = (_o = ds.valueColor) !== null && _o !== void 0 ? _o : 'black';
1142
+ ga.detail.color = (_p = ds.valueColor) !== null && _p !== void 0 ? _p : 'black';
1139
1143
  ga.detail.fontSize = 40 * modifier;
1140
- ga.detail.formatter = (val) => isNaN(val) ? '-' : val.toFixed(0);
1144
+ ga.detail.formatter = (val) => (isNaN(val) ? '-' : val.toFixed(0));
1141
1145
  // ga.anchor.itemStyle.color = ds.valueColor
1142
1146
  // ga.pointer.itemStyle.color = ds.valueColor
1143
1147
  // 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;
1148
+ ga2.min = ((_q = ds.sections) === null || _q === void 0 ? void 0 : _q.length) ? Math.min(...ds.sections) : 0;
1149
+ ga2.max = ((_r = ds.sections) === null || _r === void 0 ? void 0 : _r.length) ? Math.max(...ds.sections) : 100;
1146
1150
  ga.min = ga2.min;
1147
1151
  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));
1152
+ 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
1153
  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;
1154
+ ga2.axisLine.lineStyle.color = (colorSections === null || colorSections === void 0 ? void 0 : colorSections.length)
1155
+ ? colorSections
1156
+ : ga2.axisLine.lineStyle.color;
1152
1157
  ga2.axisLabel.fontSize = 20 * modifier;
1153
1158
  // ga2.axisLabel.color = ds.valueColor
1154
1159
  ga2.axisLabel.distance = -24 * modifier;
1155
1160
  ga2.splitLine.length = 16 * modifier;
1156
1161
  ga2.splitLine.distance = -16 * modifier;
1157
1162
  // 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 : []) {
1163
+ let progressColor = (_u = (_t = ds.backgroundColors) === null || _t === void 0 ? void 0 : _t[ds.backgroundColors.length - 1]) !== null && _u !== void 0 ? _u : 'green';
1164
+ for (const [i, s] of (_w = (_v = ds.sections) === null || _v === void 0 ? void 0 : _v.entries()) !== null && _w !== void 0 ? _w : []) {
1160
1165
  if (s > ds.needleValue) {
1161
- progressColor = (_t = ds.backgroundColors[i - 1]) !== null && _t !== void 0 ? _t : ds.backgroundColors[0];
1166
+ 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
1167
  break;
1163
1168
  }
1164
1169
  }
1165
1170
  ga.progress.itemStyle.color = progressColor;
1166
1171
  ga.progress.width = 80 * modifier;
1167
1172
  // Apply
1168
- (_u = this.canvasList[ds.label]) === null || _u === void 0 ? void 0 : _u.setOption(option);
1173
+ (_1 = this.canvasList[ds.label]) === null || _1 === void 0 ? void 0 : _1.setOption(option);
1169
1174
  }
1170
1175
  }
1171
1176
  setupCharts() {
1172
1177
  // remove the gauge canvases of non provided data series
1173
1178
  for (const label in this.canvasList) {
1174
- const ex = this.dataSets.find(ds => ds.label === label);
1179
+ const ex = this.dataSets.find((ds) => ds.label === label);
1175
1180
  if (!ex)
1176
1181
  delete this.canvasList[label];
1177
1182
  }
1178
- this.dataSets.forEach(ds => {
1183
+ this.dataSets.forEach((ds) => {
1179
1184
  var _a;
1180
1185
  if (this.canvasList[ds.label])
1181
1186
  return;
@@ -1190,81 +1195,90 @@ class WidgetGauge extends s$1 {
1190
1195
  render() {
1191
1196
  var _a, _b, _c, _d, _e, _f, _g, _h;
1192
1197
  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
- `;
1198
+ <div class="wrapper">
1199
+ <header>
1200
+ <h3 class="paging" ?active=${(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.title}>
1201
+ ${(_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.settings) === null || _d === void 0 ? void 0 : _d.title}
1202
+ </h3>
1203
+ <p class="paging" ?active=${(_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.settings) === null || _f === void 0 ? void 0 : _f.subTitle}>
1204
+ ${(_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.settings) === null || _h === void 0 ? void 0 : _h.subTitle}
1205
+ </p>
1206
+ </header>
1207
+ <div class="gauge-container">
1208
+ ${c(this.dataSets, (ds) => ds.label, (ds) => x `
1209
+ <div
1210
+ name="${ds.label}"
1211
+ class="chart"
1212
+ style="min-width: 600px; min-height: 300px; width: 600px; height: 300px;"
1213
+ ></div>
1214
+ `)}
1215
+ </div>
1216
+ </div>
1217
+ `;
1205
1218
  }
1206
1219
  }
1207
1220
  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; }
1221
+ :host {
1222
+ display: block;
1223
+ color: var(--re-text-color, #000);
1224
+ font-family: sans-serif;
1225
+ box-sizing: border-box;
1226
+ position: relative;
1227
+ margin: auto;
1228
+ }
1218
1229
 
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
- }
1230
+ .paging:not([active]) {
1231
+ display: none !important;
1232
+ }
1237
1233
 
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
- }
1234
+ .wrapper {
1235
+ display: flex;
1236
+ flex-direction: column;
1237
+ height: 100%;
1238
+ width: 100%;
1239
+ padding: 16px;
1240
+ box-sizing: border-box;
1241
+ }
1242
+ .gauge-container {
1243
+ display: flex;
1244
+ flex: 1;
1245
+ justify-content: center;
1246
+ align-items: center;
1247
+ flex-wrap: wrap;
1248
+ overflow: hidden;
1249
+ position: relative;
1250
+ gap: 12px;
1251
+ }
1261
1252
 
1262
- .chart {
1263
- width: 600px; /* will be overriden by adjustSizes */
1264
- height: 300px;
1265
- }
1253
+ header {
1254
+ display: flex;
1255
+ flex-direction: column;
1256
+ margin: 0 0 16px 0;
1257
+ }
1258
+ h3 {
1259
+ margin: 0;
1260
+ max-width: 300px;
1261
+ overflow: hidden;
1262
+ text-overflow: ellipsis;
1263
+ white-space: nowrap;
1264
+ color: var(--re-text-color, #000) !important;
1265
+ }
1266
+ p {
1267
+ margin: 10px 0 0 0;
1268
+ max-width: 300px;
1269
+ font-size: 14px;
1270
+ line-height: 17px;
1271
+ overflow: hidden;
1272
+ text-overflow: ellipsis;
1273
+ white-space: nowrap;
1274
+ color: var(--re-text-color, #000) !important;
1275
+ }
1266
1276
 
1267
- `;
1277
+ .chart {
1278
+ width: 600px; /* will be overriden by adjustSizes */
1279
+ height: 300px;
1280
+ }
1281
+ `;
1268
1282
  __decorate([
1269
1283
  n({ type: Object })
1270
1284
  ], WidgetGauge.prototype, "inputData", void 0);
@@ -1274,7 +1288,7 @@ __decorate([
1274
1288
  __decorate([
1275
1289
  r()
1276
1290
  ], WidgetGauge.prototype, "canvasList", void 0);
1277
- window.customElements.define('widget-gauge-1.5.21', WidgetGauge);
1291
+ window.customElements.define('widget-gauge-1.5.22', WidgetGauge);
1278
1292
 
1279
1293
  export { WidgetGauge };
1280
1294
  //# sourceMappingURL=widget-gauge.js.map