upd page with altruist chart

src/views/altruist/AltruistChart.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="isLaoded">
     <datalog-chart :log="log" />
-    <robo-button @click="showRaw">Raw</robo-button>
-    <datalog-list v-if="isShowRaw" :log="log" />
+    <sensor-info :sensor_id="address" class="block" />
+    <measurements-scalegrid :log="log" class="block" />
   </div>
   <datalog-loader v-else />
 </template>
@@ -11,12 +11,18 @@
 import { ref, toRefs } from "vue";
 import { useDatalog } from "./datalog";
 import DatalogChart from "./DatalogChart.vue";
-import DatalogList from "./DatalogList.vue";
 import DatalogLoader from "./DatalogLoader.vue";
+import MeasurementsScalegrid from "./MeasurementsScalegrid.vue";
+import SensorInfo from "./SensorInfo.vue";
 
 export default {
   props: ["address"],
-  components: { DatalogList, DatalogLoader, DatalogChart },
+  components: {
+    DatalogLoader,
+    DatalogChart,
+    SensorInfo,
+    MeasurementsScalegrid
+  },
   setup(props) {
     const datalog = useDatalog(toRefs(props).address);
 
@@ -34,3 +40,9 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.block {
+  margin: 15px 0;
+}
+</style>

src/views/altruist/DatalogChart.vue

@@ -5,6 +5,7 @@
 <script>
 import { Chart } from "highcharts-vue";
 import { getCurrentInstance, onMounted, watch } from "vue";
+import measurements from "./measurements";
 
 export default {
   components: { Chart },
@@ -14,14 +15,21 @@ export default {
       const seriesRaw = {};
       for (const row of data) {
         for (const item of row.data) {
-          if (seriesRaw[item.name]) {
-            seriesRaw[item.name].data.push([
+          if (seriesRaw[item.fullKey]) {
+            seriesRaw[item.fullKey].data.push([
               row.moment,
               parseFloat(item.value)
             ]);
           } else {
-            seriesRaw[item.name] = {
-              name: item.name,
+            let name = item.fullKey;
+            if (
+              measurements[item.fullKey] &&
+              measurements[item.fullKey].label
+            ) {
+              name = measurements[item.fullKey].label;
+            }
+            seriesRaw[item.fullKey] = {
+              name: name,
               data: [[row.moment, parseFloat(item.value)]]
             };
           }
@@ -59,6 +67,9 @@ export default {
         lang: {
           locale: "en"
         },
+        chart: {
+          spacing: [50, 20, 20, 20]
+        },
         title: {
           text: ""
         },

src/views/altruist/MeasurementsScalegrid.vue

@@ -0,0 +1,86 @@
+<template>
+  <section v-if="scales && scales.length > 0">
+    <h3>Units of measurement</h3>
+    <div class="scalegrid">
+      <div v-for="item in scales" :key="item.label">
+        <template v-if="item?.zones && (item.name || item.label)">
+          <p>
+            <b v-if="item.name">{{
+              locale === "en" ? item.name.en : item.name.ru
+            }}</b>
+            <b v-else>{{ item.label }}</b>
+            ({{ item.unit }})
+          </p>
+          <template v-for="zone in item.zones" :key="zone.color">
+            <div
+              class="scales-color"
+              v-if="zone.color && zone.label"
+              :style="`--color: ${zone.color}`"
+            >
+              <b>{{ locale === "en" ? zone.label.en : zone.label.ru }}</b>
+              (<template v-if="zone.value">up to {{ zone.value }}</template>
+              <template v-else>above</template>)
+            </div>
+          </template>
+        </template>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import measurements from "./measurements";
+
+export default {
+  props: ["log"],
+  setup(props) {
+    const scales = [];
+    let units = [];
+    for (const item of props.log) {
+      for (const unit of item.data) {
+        if (units.indexOf(unit.fullKey) === -1) {
+          units.push(unit.fullKey);
+          if (measurements[unit.fullKey]) {
+            scales.push(measurements[unit.fullKey]);
+          }
+        }
+      }
+    }
+
+    return {
+      locale: "en",
+      scales
+    };
+  }
+};
+</script>
+
+<style scoped>
+/* + scales */
+.scalegrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--gap);
+  font-size: 0.8em;
+}
+.scalegrid p {
+  margin-bottom: calc(var(--gap) * 0.5);
+}
+
+.scales-color {
+  position: relative;
+  padding-left: calc(var(--gap) * 2);
+}
+
+.scales-color:before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: var(--color);
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--gap);
+}
+/* - scales */
+</style>

src/views/altruist/NoticeText.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="textsmall">
+    This information holds no legal validity and is intended solely for personal
+    use.
+  </div>
+</template>
+
+<style>
+.textsmall {
+  font-size: 0.8em;
+}
+</style>

src/views/altruist/Page.vue

@@ -1,10 +1,10 @@
 <template>
   <robo-layout-section>
-    <robo-section offset="x2" width="narrow" style="text-align: center">
+    <robo-section offset="x2" width="middle" style="text-align: center">
       <h2>Altruist</h2>
     </robo-section>
 
-    <robo-section offset="x2" width="narrow">
+    <robo-section offset="x2" width="middle">
       <datalog-loader v-if="isFind" />
       <robo-status v-else-if="altruistAddress === null" type="warning">
         Not found
@@ -14,18 +14,23 @@
         :address="altruistAddress"
       />
     </robo-section>
+
+    <robo-section offset="x2" width="middle">
+      <notice-text />
+    </robo-section>
   </robo-layout-section>
 </template>
 
 <script>
 import { watch } from "vue";
 import AltruistChart from "./AltruistChart.vue";
 import DatalogLoader from "./DatalogLoader.vue";
+import NoticeText from "./NoticeText.vue";
 import { useFindAltruist } from "./dtwin.js";
 
 export default {
   props: ["address"],
-  components: { AltruistChart, DatalogLoader },
+  components: { AltruistChart, DatalogLoader, NoticeText },
   setup(props) {
     const { address: altruistAddress, isFind, runFind } = useFindAltruist();
 

src/views/altruist/SensorInfo.vue

@@ -0,0 +1,42 @@
+<template>
+  <section>
+    <h3>Advanced information</h3>
+    <div class="infoline flexline">
+      <div class="infoline-title">Sensor id:</div>
+      <div class="infoline-info">
+        {{ sensor_id }}
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["sensor_id"]
+};
+</script>
+
+<style scoped>
+:root {
+  --gap: 10px;
+}
+
+.flexline {
+  display: flex;
+  gap: calc(var(--gap) * 2);
+  align-items: center;
+}
+
+.flexline .flexline {
+  gap: var(--gap);
+}
+.infoline.flexline {
+  gap: calc(var(--gap) * 0.5);
+}
+.infoline-title {
+  font-weight: bold;
+}
+.infoline-info {
+  font-size: 0.9rem;
+}
+</style>

src/views/altruist/datalog.js

@@ -1,14 +1,14 @@
 import { useRobonomics } from "@/hooks/useRobonomics";
 import { onUnmounted, ref, watch } from "vue";
 
-const mapName = new Map([
-  ["p1", "PM10"],
-  ["p2", "PM2.5"],
-  ["nm", "Noise Max."],
-  ["na", "Noise Avg."],
-  ["t", "Temperature"],
-  ["p", "Pressure"],
-  ["h", "Humidity"]
+const mapKey = new Map([
+  ["p1", "pm10"],
+  ["p2", "pm25"],
+  ["nm", "noisemax"],
+  ["na", "noiseavg"],
+  ["t", "temperature"],
+  ["p", "pressure"],
+  ["h", "humidity"]
 ]);
 
 /**
@@ -18,8 +18,8 @@ const mapName = new Map([
  * @param {string} key
  * @return {string}
  */
-const getName = (key) => {
-  const name = mapName.get(key);
+const getFullKey = (key) => {
+  const name = mapKey.get(key);
   if (name) {
     return name;
   }
@@ -41,7 +41,7 @@ const parseData = (data) => {
     const [key, value] = item.split(":");
     return {
       key,
-      name: getName(key),
+      fullKey: getFullKey(key),
       value
     };
   });

src/views/altruist/measurements/___example.js

@@ -0,0 +1,28 @@
+export default {
+  label: "PM2.5", // ! Обязательное поле. Название
+  // Необязательное поле, для некоторых значений хочется более человеческого описания + локализация
+  name: {
+    en: "Humidity",
+    ru: "Влажность"
+  },
+  unit: "μg/m3", // ! Обязательное поле. Единица измерения
+  chartColor: "#89b268", // Цвет на графике
+  range: [0, 50, 90], // диапазон значений для отображения цвета
+  colors: ["#60bc2a", "#ff9d00", "#fc0202"], // диапозон цвета в зависимости от значения для отрисовки маркера на карте
+  // зоны для графика, value - высшее значение, color - цвет на графике, label [en/ru] - локализованная подпись короткая
+  zones: [
+    {
+      value: 50,
+      color: "#60bc2a",
+      label: {
+        en: "Good",
+        ru: "Хорошо"
+      }
+    }
+  ],
+  calculate: function (v) {
+    // преобразование значения, например для приведения к нужной единице измерения, только для реалтайм
+    return Number(v) * 2;
+  },
+  info: "", // Описание | на данный момент не используется
+};

src/views/altruist/measurements/airtemp.js

@@ -0,0 +1,4 @@
+export default {
+  label: "Airtemp",
+  unit: "℃",
+};

src/views/altruist/measurements/airtempavg.js

@@ -0,0 +1,4 @@
+export default {
+  label: "AvgAirtemp",
+  unit: "℃",
+};

src/views/altruist/measurements/airtempmax.js

@@ -0,0 +1,4 @@
+export default {
+  label: "MaxAirtemp",
+  unit: "℃",
+};

src/views/altruist/measurements/airtempmin.js

@@ -0,0 +1,4 @@
+export default {
+  label: "MinAirtemp",
+  unit: "℃",
+};