Skip to content

Commit

Permalink
v4.0.10-beta
Browse files Browse the repository at this point in the history
  • Loading branch information
jemu75 committed Jan 10, 2024
1 parent 90b2b6a commit 68f9286
Show file tree
Hide file tree
Showing 34 changed files with 1,108 additions and 640 deletions.
21 changes: 21 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,27 @@ Parameter|Default|Beschreibung|
|max|100|Wenn der Bereich des Wertes nicht zwischen 0 und 100 liegt, kann kann der größte Wert festgelegt werden. Diese entspricht dann im Wertebereich 100 Prozent [number]|
|reverse|false|Die Startrichtung in der die Bar farblich hervorgehoben wird, wird umgekehrt [boolean]|
|linear|false|zeigt eine horizontale oder runde Statusbar an [boolean]|
### Level Element Chart serie
Zeigt ein Chart. Im Gegensatz zu normalen Definitionen, werden zur Anzeige der Datenreihen **alle** Definitionen verwendet, deren Bedingungen zutreffen.

Parameter|Default|Beschreibung|
|---|---|---|
|reading||siehe Parameter [reading](#konfiguration-der-elemente)|
|value||siehe Parameter [value](#konfiguration-der-elemente)|
|log|||
|from|-6||
|to|0||
|column|4||
|filter|||
|format|||
|name|||
|type|||
|calc|||
### Level Element Chart options
Bietet die Möglichkeit die Darstellung der Datenreihen individuell anzupassen. Die entsprechenden Optionen müssen als JSON-Definition angegeben werden.

!noch auf Voreinstellung der Zeiten eingehen und auf Apex-Charts verweisen.!

## Bereich Info
Der Infobereich befindet sich im unteren Teil. Er dient dazu, weitere Werte des Sonsors oder Aktors in Form von Icons oder Text darzustellen. Es können bis zu 6 Spalten für die Anzeige von Icons bzw. Texten verwendet werden.
### Element info
Expand Down
821 changes: 240 additions & 581 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,15 @@
"format": "prettier --write src/"
},
"dependencies": {
"echarts": "^5.4.3",
"pinia": "^2.1.7",
"prismjs": "^1.29.0",
"vue": "^3.3.4",
"vue-clipboard3": "^2.0.0",
"vue-echarts": "^6.6.8",
"vue-i18n": "^9.6.1",
"vue-json-pretty": "^2.3.0",
"vue-prism-editor": "^2.0.0-alpha.2",
"vue-router": "^4.2.5",
"vuetify": "^3.3.22"
},
Expand Down
3 changes: 3 additions & 0 deletions public/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
# v4.0.10-beta (06.01.2024)
## Component Chart

# v4.0.9-beta (02.01.2024)
## Component Slider - vertical

Expand Down
3 changes: 1 addition & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,7 @@
<v-col>
{{ fhem.app.version }}
</v-col>
<v-spacer/>
<v-col class="text-right">
<v-col cols="2" class="text-right">
<v-icon :icon="fhem.app.isReady ? 'mdi-sync' : 'mdi-alert'" size="small"></v-icon>
</v-col>
</v-row>
Expand Down
2 changes: 2 additions & 0 deletions src/components/PanelMain.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import PanelMainSlider from './PanelMainSlider.vue'
import PanelMainImage from './PanelMainImage.vue'
import PanelMainMenu from './PanelMainMenu.vue'
import PanelMainChart from './PanelMainChart.vue'
defineProps({
main: Object,
Expand Down Expand Up @@ -41,6 +42,7 @@
if(type === 'slider') return PanelMainSlider
if(type === 'image') return PanelMainImage
if(type === 'menu') return PanelMainMenu
if(type === 'chart') return PanelMainChart
}
</script>

Expand Down
168 changes: 168 additions & 0 deletions src/components/PanelMainChart copy 2.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useFhemStore } from '@/stores/fhem'
const props = defineProps({
el: Object,
iconmap: Array,
devices: Array
})
const fhem = useFhemStore()
const series = ref()
const options = ref({
theme: {
mode: 'dark'
},
chart: {
height: 'auto',
type: 'line',
toolbar: {
show: false
}
},
tooltip: {
x: {
format: 'dd.MM.yy HH:mm:ss'
}
},
xaxis: {
type: 'datetime',
labels: {
datetimeUTC: false
}
}
})
const seriesDefs = computed(() => {
let res = fhem.handleDefs(
props.el.serie,
['log', 'from', 'to', 'column', 'filter', 'format', 'name', 'type', 'calc'],
[null, -6, 0, 4, null, null, '', 'line', 'raw'], true),
defPart
for(const [ idx, def ] of Object.entries(props.el.serie)) {
defPart = def.split(':')[7]
if(defPart) res[idx].format = defPart
if(!res[idx].format) res[idx].format = '%n()'
}
return res
})
function getDate(diff) {
return ( d => new Date(d.setDate(d.getDate() + (Number(diff) || 0))).toISOString() )(new Date).split('T')[0]
}
function getDevice(device) {
let defParts = []
for(const device of props.devices) {
defParts = device.split(':')
if(RegExp(defParts[0]).test(device)) return defParts[1]
}
return device
}
function handleLogData(data) {
let rows = data.split('\n'),
ts,
value,
res = []
if(rows.length > 0) {
for(const row of rows) {
ts = Date.parse(new Date(row.split(' ')[0].replace('_','T')))
value = parseFloat(row.split(' ')[1])
res.push([ts, value])
}
}
return res
}
function loadChartData() {
let chartSeries = [],
chartSerie,
yaxis = [],
formatDef
readLogData(seriesDefs.value)
.then((res) => {
if(res.length > 0) {
for(const data of res) {
chartSerie = { data: handleLogData(data.data, data.calc), name: data.name };
if (data.type) chartSerie.type = data.type;
if(data.format) {
formatDef = {
labels: {
formatter: (val) => {
let res = ''
let fmt = data.format.match(/%n\(.*\)/)
let digits = fmt ? (Number(fmt[0].split(',')[0].replace('%n(','').replace(')','')) || 0) : 0
if(val) res = data.format.replace(/%n\(.*\)/, val.toLocaleString(fhem.app.settings.lang, { minimumFractionDigits: digits, maximumFractionDigits: digits }))
return res
}
}
}
if(yaxis[data.id]) {
yaxis[data.id].labels = formatDef.labels
} else {
yaxis.push(formatDef)
}
}
chartSeries.push(chartSerie);
}
}
})
.finally(() => {
options.value = {
...options.value,
yaxis
}
series.value = chartSeries
console.log(series.value)
})
}
async function readLogData(series) {
let res = [],
cmd,
logData
for(const [idx, serie] of Object.entries(series)) {
if(serie.log) {
cmd = 'get ' + getDevice(serie.log) + ' - - '
cmd += getDate(serie.from) + ' '
cmd += getDate(serie.to) + ' '
cmd += serie.column + ':' + serie.filter + ':0:int'
logData = fhem.request('text', cmd)
if(logData) {
res.push({ id: idx, data: await logData, name: serie.name, format: serie.format, type: serie.type, calc: serie.calc })
}
}
}
return res
}
onMounted(() => {
loadChartData()
})
</script>

<template>
<apexchart v-if="series" :series="series" :options="options"></apexchart>
</template>
Loading

0 comments on commit 68f9286

Please sign in to comment.