Widget Chart

Chart widget with up to three items, and selectable filld area for each item. Refreshes when item is updated.

Changelog

Version 0.1

  • initial release

Resources

uid: 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: Aug 7, 2022, 7:57:23 AM
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:
    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
    background-color: rgba(0,0,0,0)
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
              includeLabels: true
              show: false
              width: 95%
              left: 20px
              top: 16px
              height: 85%
        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
              name: =props.graphItem1
              markPoint:
                data:
                  - name: Max
                    type: "=props.item1max ? 'max' : ''"
                  - name: Min
                    type: "=props.item1min ? 'min' : ''"
                  - name: Average
                    type: "=props.item1average ? 'average' : ''"
              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
              name: =props.graphItem2
              markPoint:
                data:
                  - name: Max
                    type: "=props.item2max ? 'max' : ''"
                  - name: Min
                    type: "=props.item2min ? 'min' : ''"
                  - name: Average
                    type: "=props.item2average ? 'average' : ''"
              smooth: true
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
          - component: oh-time-series
            config:
              areaStyle:
                opacity: "=props.area3filled ? 0.2 : 0.0"
              item: =props.graphItem3
              name: =props.graphItem3
              markPoint:
                data:
                  - name: Max
                    type: "=props.item3max ? 'max' : ''"
                  - name: Min
                    type: "=props.item3min ? 'min' : ''"
                  - name: Average
                    type: "=props.item3average ? 'average' : ''"
              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
3 Likes