[GELÖST] OH3 Charts in UI einbinden

[lenschith]

Hallo zusammen,

ich hätte mal eine Frage zu den Charts die in OH3 erstellt werden können, diese sind ja mittlerweile auch brauchbar. Ich habe eine Chartsite erstellt dort sind die Charts auch schön eingebunden, nun würde ich aber gerne auf der Overview direkt eine Chart mit einbinden wollen ist das möglich?
Quasi in einem Widget das Chart. Leider konnte ich i Netz nichts brauchbares finden.

Screenshot 2022-11-12 202645.png

Gruß Lenschi

[peter-pan]

..hier hab ich ein kleines Widget, das auch ein Chart enthält. Da musst du halt das was du nicht brauchst rausschmeissen:

Code: Alles auswählen

uid: inverter_v_01
tags:
  - Background and Layout 'round Corners' from Peter
  - Original from Daniel and Denis
  - https://community.openhab.org/t/oh3-graph-in-card-widget/119202/12
props:
  parameters:
    - description: Title of the widget
      label: Title
      name: title
      required: false
      type: TEXT
    - description: 1st gauge
      label: Gauge 1 label
      name: gauge1
      required: false
      type: TEXT
    - description: 1st gauge MAX
      label: Gauge 1 limit
      name: gauge1max
      required: false
      type: TEXT
    - description: 2nd gauge
      label: Gauge 2 label
      name: gauge2
      required: false
      type: TEXT
    - description: 2nd gauge MAX
      label: Gauge 2 limit
      name: gauge2max
      required: false
      type: TEXT
    - description: 1st chart
      label: Chart label 1
      name: chart1
      required: false
      type: TEXT
    - description: 2nd chart
      label: Chart label 2
      name: chart2
      required: false
      type: TEXT
    - context: item
      description: Item in gauge
      label: Gauge/Chart 1 item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item in gauge
      label: Gauge/Chart 2 item
      name: item2
      required: true
      type: TEXT
    - description: Color Gauge1-InsideText
      label: Gauge1-InsideTextColor
      name: gauge1insidetext
      required: false
      type: TEXT
    - description: Color Gauge2-InsideText
      label: Gauge2-InsideTextColor
      name: gauge2insidetext
      required: false
      type: TEXT
    - description: Counter-Color Gauge2 -Circle
      label: Counter-Color Circle 1
      name: countercircle1
      required: false
      type: TEXT
    - description: Counter-Color Gauge2 -Circle
      label: Counter-Color Circle 2
      name: countercircle2
      required: false
      type: TEXT
    - description: e.x. linear-gradient(to bottom,#6fa8dc 0%,#ffe74c 100%), red, transparent or hex or rgb
      label: Background-Color
      name: bg_color1
      required: false
      type: TEXT
    - description: Round Corners ? "y" all others means sharp Corners
      label: Round Corners - Layout ?
      name: roundcorners
      required: false
      type: TEXT
timestamp: Jul 1, 2022, 7:00:35 PM
component: f7-card
config:
  class:
    - padding-bottom
    - padding-left
  style:
    --f7-card-box-shadow: none
    background: '=(props.bg_color1) ? props.bg_color1 : ""'
    background-position: down
    background-repeat: no-repeat
    background-size: cover
    border-radius: "=(props.roundcorners) ? 'var(--f7-card-expandable-border-radius)' : 'none'"
    font-size: medium
    height: auto
    margin: 10px
    noShadow: true
    padding: 0
  title: =props.title
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top
      slots:
        default:
          - component: f7-col
            config:
              class:
                - display-flex
                - flex-direction-column
                - align-content-space-around
              width: 25
            slots:
              default:
                - component: oh-gauge
                  config:
                    borderBgColor: '=(props.countercircle1) ? props.countercircle1 : "gray"'
                    borderColor: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                    item: =props.item1
                    labelText: =props.gauge1
                    labelTextColor: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                    max: =props.gauge1max
                    min: 0
                    type: semicircle
                    valueFontSize: 22
                    valueTextColor: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                - component: oh-gauge
                  config:
                    borderBgColor: '=(props.countercircle2) ? props.countercircle2 : "gray"'
                    borderColor: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                    item: =props.item2
                    labelText: =props.gauge2
                    labelTextColor: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
                    max: =props.gauge2max
                    min: 0
                    type: semicircle
                    valueFontSize: 22
                    valueTextColor: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
          - component: f7-col
            config:
              width: 75
            slots:
              default:
                - component: oh-chart
                  config:
                    chartType: ""
                    label: =props.chart1
                    period: 12h
                  slots:
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    series:
                      - component: oh-time-series
                        config:
                          color: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                          gridIndex: 0
                          item: =props.item1
                          name: =props.chart1
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                      - component: oh-time-series
                        config:
                          color: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
                          gridIndex: 0
                          item: =props.item2
                          name: =props.chart2
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          gridIndex: 0
                          min: 0
                          name: Watt

Das sieht dann so aus:

2022-11-12_235714.jpg

Das Original-Widget findest du als Tag im Yaml-Code

[lenschith]

Hallo Peter,
das hatte ich schon gefunden, aber eigentlich hätte ich einfach gerne das eingebunden das ich schon auf OH angelegt habe.

[peter-pan]

Du bist doch so ein Tüftler. Eigentlich solltest du ja den Chart-Code (irgendwie) in das Widget reinkopieren können bzw. eine f7-Card drumherumbauen können.

Ich hab jetzt einfach mal den Chart-Teil von dem oberen Widget herauskopiert und stelle ihn hier rein:

Code: Alles auswählen

                - component: oh-chart
                  config:
                    chartType: ""
                    label: =props.chart1
                    period: 12h
                  slots:
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    series:
                      - component: oh-time-series
                        config:
                          color: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                          gridIndex: 0
                          item: =props.item1
                          name: =props.chart1
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                      - component: oh-time-series
                        config:
                          color: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
                          gridIndex: 0
                          item: =props.item2
                          name: =props.chart2
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          gridIndex: 0
                          min: 0
                          name: Watt

Wenn du den jetzt mal genauer anschaust, siehst du, wenn du ihn mit deinem Chart-code vergleichst, dass das doch fast der selbe Aufbau ist, oder ?

Ich habe zwar momentan noch etwas anderes zu erledigen, aber du hast mich da auf eine Idee gebracht, ich werde es mal bei Gelegenheit probieren. Natürlich braucht es die "Gauges" nicht.

[lenschith]

Oh man, so einfach. Da muss man erst mal drauf kommen.

Screenshot 2022-11-13 164411.png

Vielen Dank.

Gruß Lenschi

[peter-pan]

Da muss man erst mal drauf kommen.

Gerne. Ich hab auch noch was in meinem "Fundus" gefunden. Ich habe das zwar auch nicht im Einsatz, aber vielleicht kannst du das auch noch gebrauchen:

Code: Alles auswählen

uid: z_test_CHART_Widget
tags: []
props:
  parameters:
    - description: Header of the cell
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      label: Graph Item 1
      name: graphItem1
      required: false
      type: TEXT
    - label: Area 1 filled
      name: area1filled
      required: false
      type: BOOLEAN
    - context: item
      label: Graph Item 2
      name: graphItem2
      required: false
      type: TEXT
    - label: Area 2 filled
      name: area2filled
      required: false
      type: BOOLEAN
    - context: item
      label: Graph Item 3
      name: graphItem3
      required: false
      type: TEXT
    - label: Area 3 filled
      name: area3filled
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Oct 14, 2022, 2:58:12 PM
component: f7-card
config:
  key: =Math.random() + items[props.graphItem1].state.split(" ")[0] + items[props.graphItem2].state.split(" ")[0] + items[props.graphItem3].state.split(" ")[0]
  style:
    background-color: rgba(0,0,0,0)
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.header ? props.header : ''"
  default:
    - component: oh-chart
      config:
        options:
          color:
            - rgba(255,0,0,1)
            - rgba(0,255,255,1)
            - rgba(0,255,0,1)
        period: W
      slots:
        grid:
          - component: oh-chart-page
            config:
              containLabel: true
              height: 85%
              includeLabels: true
              left: 20px
              show: false
              top: 16px
              width: 95%
        legend:
          - component: oh-chart-legend
            config:
              bottom: 0px
              show: true
              type: scroll
        series:
          - component: oh-time-series
            config:
              areaStyle:
                opacity: "=props.area1filled ? 0.2 : 0.0"
              item: =props.graphItem1
              markPoint:
                data:
                  - name: Max
                    type: "=props.item1max ? 'max' : ''"
                  - name: Min
                    type: "=props.item1min ? 'min' : ''"
                  - name: Average
                    type: "=props.item1average ? 'average' : ''"
              name: =props.graphItem1
              smooth: true
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
          - component: oh-time-series
            config:
              areaStyle:
                opacity: "=props.area2filled ? 0.2 : 0.0"
              gridIndex: 0
              item: =props.graphItem2
              markPoint:
                data:
                  - name: Max
                    type: "=props.item2max ? 'max' : ''"
                  - name: Min
                    type: "=props.item2min ? 'min' : ''"
                  - name: Average
                    type: "=props.item2average ? 'average' : ''"
              name: =props.graphItem2
              smooth: true
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
          - component: oh-time-series
            config:
              areaStyle:
                opacity: "=props.area3filled ? 0.2 : 0.0"
              item: =props.graphItem3
              markPoint:
                data:
                  - name: Max
                    type: "=props.item3max ? 'max' : ''"
                  - name: Min
                    type: "=props.item3min ? 'min' : ''"
                  - name: Average
                    type: "=props.item3average ? 'average' : ''"
              name: =props.graphItem3
              smooth: true
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              orient: vertical
              show: true
              smartFormatter: true
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0

Die Hintergrundfarben, etc. lassen sich da leicht verändern. Genügend Anregungen kennst du ja aus meinen anderen Widgets.

[lenschith]

Ich möchte mir daraus gerne ein Widget basteln da ich immer wieder Charts habe. Aber irgendwie kann ich die Einheiten nicht mit props anzeigen lassen. Das wird dann immer als Text in den Graph geschrieben. Eine Idee wie ich das machen muss?

Screenshot 2022-11-13 193457.png

Code: Alles auswählen

        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
              name: =props.graph1unit
          - component: oh-value-axis
            config:
              gridIndex: 0
              name: W

[peter-pan]

.. Das geht leider nicht. Da hab ich schon im internationalen Forum geforscht und leider nichts gefunden. Es ist zwar schon eine Weile her, aber vielleicht gibt es zwischenzeitlich eine Möglichkeit. Eventuell hat sich Yannick Schaus etwas ausgedacht.

Momentan nur "händisch". Sorry

[lenschith]

Danke für die Info. Das ist aber sehr schade. wäre so cool gewesen.
https://community.openhab.org/t/configu ... s/137831/8

[peter-pan]

...ja da gibt's mehrere threads, die hierauf Bezug nehmen, ob nun von Yannick oder Justin. Leider reicht das wohl nicht im Moment.
https://community.openhab.org/t/iconcol ... r/137876/4
Warten wir's ab.