displaying batch lots as tooltips in scatter chart

This commit is contained in:
frankknoll
2023-11-09 09:22:55 +01:00
parent cfa314b4ae
commit 46e3f4c22d
4 changed files with 35 additions and 16 deletions

View File

@@ -13870,6 +13870,7 @@
<script src="../gentelella/vendors/bootstrap/dist/js/bootstrap.min.js"></script> <script src="../gentelella/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- FK-TODO: update chart.js to newest version -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js" <script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"
type="text/javascript"></script> type="text/javascript"></script>

View File

@@ -16,14 +16,16 @@ class SymptomVsSymptomChartDataProvider {
dict1: prrByLotX, dict1: prrByLotX,
dict2: prrByLotY dict2: prrByLotY
}); });
return Object const lots = Object.keys(prrByLotXCommon);
.keys(prrByLotXCommon) return {
.map( labels: lots,
lot => data:
({ lots.map(
x: prrByLotXCommon[lot], lot => ({
y: prrByLotYCommon[lot] x: prrByLotXCommon[lot],
})); y: prrByLotYCommon[lot]
}))
};
} }
static #getCommonKeys(dict1, dict2) { static #getCommonKeys(dict1, dict2) {

View File

@@ -7,6 +7,7 @@ class SymptomVsSymptomChartView {
this.#canvas = canvas; this.#canvas = canvas;
} }
// FK-TODO: refactor
displayChart(symptomX, symptomY) { displayChart(symptomX, symptomY) {
if (this.#chart != null) { if (this.#chart != null) {
this.#chart.destroy(); this.#chart.destroy();
@@ -21,8 +22,8 @@ class SymptomVsSymptomChartView {
const chartData = SymptomVsSymptomChartDataProvider.getChartData({ prrByLotX, prrByLotY }); const chartData = SymptomVsSymptomChartDataProvider.getChartData({ prrByLotX, prrByLotY });
const data = { const data = {
datasets: [{ datasets: [{
label: 'Scatter Dataset', labels: chartData.labels,
data: chartData, data: chartData.data,
backgroundColor: 'rgb(0, 0, 255)' backgroundColor: 'rgb(0, 0, 255)'
}], }],
}; };
@@ -35,6 +36,18 @@ class SymptomVsSymptomChartView {
type: 'linear', type: 'linear',
position: 'bottom' position: 'bottom'
} }
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function (context) {
return 'Batch: ' + context.dataset.labels[context.dataIndex];
}
}
}
} }
} }
}; };

View File

@@ -67,11 +67,14 @@ QUnit.module('SymptomVsSymptomChartDataProviderTest', function () {
// Then // Then
assert.deepEqual( assert.deepEqual(
chartData, chartData,
[ {
{ labels: ["lotCommon"],
x: 2.0, data: [
y: 3.0 {
} x: 2.0,
]); y: 3.0
}
]
});
}); });
}); });