version: 1
widgets:
  Card_Template_Chart_Bar_Aggregated:
    tags:
      - Card Template Chart Bar Aggregated
      - Version 0.1
      - Customizable Template
      - ScrewPlate
    props:
      parameters:
        - description: "Input without 'px' (Default: none)"
          label: Card Height
          name: cardHeight
          required: false
          type: TEXT
          groupName: cardGroup
        - description: "Input without 'px' (Default: 20px)"
          label: Card Border Radius
          name: cardBorderRadius
          required: false
          type: TEXT
          groupName: cardGroup
        - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
          label: Card Border Color
          name: cardBorderColor
          required: false
          type: TEXT
          groupName: cardGroup
        - description: "Input without 'px' (Default: 3px)"
          label: Card Border Size
          name: cardBorderSize
          required: false
          type: TEXT
          groupName: cardGroup
        - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
          label: Card Background Color
          name: cardBgColor
          required: false
          type: TEXT
          groupName: cardGroup
        - default: false
          label: Card Background Image - Show on Card
          name: cardBgImageShow
          required: false
          type: BOOLEAN
          groupName: cardGroup
        - description: Input file name for Background Image (uploaded to /html/ folder)
          label: Card Background Image
          name: cardBgImage
          required: false
          type: TEXT
          groupName: cardGroup
        - default: false
          label: Icon - Show on Card
          name: iconShow
          required: false
          type: BOOLEAN
          groupName: iconGroup
        - description: Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
          label: Icon
          name: iconName
          required: false
          type: TEXT
          groupName: iconGroup
        - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
          label: Icon Color
          name: iconColor
          required: false
          type: TEXT
          groupName: iconGroup
        - description: "Input without 'px' (Default: 30px)"
          label: Icon  Size
          name: iconSize
          required: false
          type: TEXT
          groupName: iconGroup
        - default: false
          label: Header - Show on Card
          name: headerShow
          required: false
          type: BOOLEAN
          groupName: headerGroup
        - description: Input Text to diplay on Header
          label: Header
          name: headerText
          required: false
          type: TEXT
          groupName: headerGroup
        - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
          label: Header Text Color
          name: headerTextColor
          required: false
          type: TEXT
          groupName: headerGroup
        - description: "Input without 'px' (Default: 25px)"
          label: Header Text Size
          name: headerTextSize
          required: false
          type: TEXT
          groupName: headerGroup
        - default: false
          label: Footer - Show on Card
          name: footerShow
          required: false
          type: BOOLEAN
          groupName: footerGroup
        - description: Input Text to diplay on Footer
          label: Footer
          name: footerText
          required: false
          type: TEXT
          groupName: footerGroup
        - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
          label: Footer Text Color
          name: footerTextColor
          required: false
          type: TEXT
          groupName: footerGroup
        - description: "Input without 'px' (Default: 16px)"
          label: Footer Text Size
          name: footerTextSize
          required: false
          type: TEXT
          groupName: footerGroup
        - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
          label: Content Text Color
          name: contentTextColor
          required: false
          type: TEXT
          groupName: contentGroup
        - description: "Input without 'px' (Default: 18px)"
          label: Content Text Size
          name: contentTextSize
          required: false
          type: TEXT
          groupName: contentGroup
        - description: "Input without 'px' (Default: 30px)"
          label: Content Icon Size
          name: contentIconSize
          required: false
          type: TEXT
          groupName: contentGroup
        - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
          label: Content Icon Color
          name: contentIconColor
          required: false
          type: TEXT
          groupName: contentGroup
        - context: item
          description: Chart item
          label: Chart Item
          name: chartItem
          required: true
          type: TEXT
          groupName: customGroup
        - default: kWh
          description: Input like 'kWh' or 'm³', etc.
          label: Chart Y UOM
          name: chartYUOM
          required: true
          type: TEXT
          groupName: customGroup
        - description: "Enter the desired start year (e.g., 2025). (Default: current year)"
          label: Initial Year
          name: chartInitialYear
          required: false
          type: TEXT
          groupName: customGroup
        - description: "Bar Color"
          label: Input like '#FFFFFF' or 'red', 'yellow' etc.
          name: chartBarColor
          required: false
          type: TEXT
          groupName: customGroup          
      parameterGroups:
        - name: cardGroup
          label: Card Settings
          description: All settings to customize the card layout
        - name: iconGroup
          label: Icon Settings
          description: All settings to customize the icon
        - name: headerGroup
          label: Header Settings
          description: All settings to customize the header area
        - name: footerGroup
          label: Footer Settings
          description: All settings to customize the content area
        - name: contentGroup
          label: Content Settings
          description: All settings to customize the content area
        - name: customGroup
          label: Custom Settings
          description: All settings to customize the custom objects
    component: f7-card
    config:
      style:
        --f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark === 'dark' ? '#232324' : 'white')"
        --f7-card-border-radius: "=props.cardBorderRadius ? props.cardBorderRadius + 'px' : '20px'"
        --f7-card-margin-horizontal: 4px
        --f7-card-margin-vertical: 4px
        --f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor : '#c95826'"
        background-color: var(--f7-card-bg-color)
        background-image: "=props.cardBgImageShow && props.cardBgImage ? 'linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url(/static/' + props.cardBgImage + ')' : ''"
        border: "=props.cardBorderSize ? props.cardBorderSize + 'px solid var(--f7-card-outline-border-color)' : '3px solid var(--f7-card-outline-border-color)'"
        color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark === 'dark' ? 'white' : 'black')"
        font-size: "=props.contentTextSize ? props.contentTextSize + 'px' : '18px'"
    slots:
      default:
        - component: f7-card-header
          config:
            style:
              --f7-card-header-border-color: transparent
              --f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '25px'"
              --f7-card-header-font-weight: 800
              --f7-card-header-min-height: "=props.headerShow == 'true' ? '35px' : '0px'"
              --f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor : (themeOptions.dark === 'dark' ? 'white' : 'black')"
              justify-content: flex-start
              margin-left: "=(Number.parseInt(props.cardBorderRadius) > 90) ? '30px' : (Number.parseInt(props.cardBorderRadius) > 50) ? '10px' : '0px'"
          slots:
            default:
              - component: oh-icon
                config:
                  icon: "=props.iconName ? props.iconName : 'f7:house'"
                  style:
                    color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ? 'white' : 'black')"
                    padding-right: 10px
                  visible: "=props.iconShow ? props.iconShow : props.iconShow"
                  width: "=props.iconSize ? (props.iconSize) + 'px' : '30px'"
              - component: Label
                config:
                  text: "=props.headerText ? props.headerText : 'Header'"
                  visible: "=props.headerShow ? props.headerShow : props.headerShow"
        - component: f7-card-content
          config:
            style:
              align-items: center
              display: flex
              height: "=props.cardHeight ? (props.cardHeight) + 'px' : ''"
              justify-content: center
              margin-left: "=(Number.parseInt(props.cardBorderRadius) > 90) ? '30px' : (Number.parseInt(props.cardBorderRadius) > 50) ? '10px' : '0px'"
              margin-top: -10px
          slots:
            default:
              - component: f7-block
                config:
                  style:
                    margin-top: -10px
                    text-align: center
                    width: 100%
                slots:
                  default:
                    - component: oh-chart
                      config:
                        chartType: year
                        initialYear: "=props.chartInitialYear ? Number(props.chartInitialYear) : dayjs().year()"                     
                        stylesheet: |
                              .menu {
                                top: -15px;
                                right: -15px;
                                transform: scale(0.95);
                                transform-origin: top right;
                              }              
                        options:
                              backgroundColor: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark === 'dark' ? '#232324' : 'white')"                       
                      slots:
                        grid:
                          - component: oh-chart-grid
                            config:
                              bottom: "30"
                              left: "40"
                              right: "20"
                              top: "40"
                        xAxis:
                          - component: oh-category-axis
                            config:
                              categoryType: year
                              gridIndex: 0
                              monthFormat: short
                              name: " "
                              axisLabel:
                                color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark === 'dark' ? 'white' : 'black')"
                                fontSize: "=props.contentTextSize ? props.contentTextSize + 'px' : '12px'"                           
                        yAxis:
                          - component: oh-value-axis
                            config:
                              gridIndex: 0
                              name: "=props.chartYUOM"
                              nameTextStyle:
                                color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark === 'dark' ? 'white' : 'black')"
                                fontSize: "=props.contentTextSize ? props.contentTextSize + 'px' : '12px'"                                    
                              axisLabel:
                                color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark === 'dark' ? 'white' : 'black')"
                                fontSize: "=props.contentTextSize ? props.contentTextSize + 'px' : '12px'"                              
                        series:
                          - component: oh-aggregate-series
                            config:
                              aggregationFunction: last
                              dimension1: month
                              gridIndex: 0
                              item: "=props.chartItem"
                              type: bar
                              xAxisIndex: 0
                              yAxisIndex: 0
                              itemStyle:
                                color: "=props.chartBarColor ? props.chartBarColor : '#409eff'"
                        tooltip:
                          - component: oh-chart-tooltip
                            config:
                              confine: true
        - component: f7-card-footer
          config:
            style:
              --f7-card-footer-border-color: transparent
              --f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '16px'"
              --f7-card-footer-font-weight: 500
              --f7-card-footer-min-height: "=props.footerShow == 'true' ? '20px' : '0px'"
              --f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor : (themeOptions.dark === 'dark' ? 'white' : 'black')"
              margin-left: "=(Number.parseInt(props.cardBorderRadius) > 90) ? '30px' : (Number.parseInt(props.cardBorderRadius) > 50) ? '10px' : '0px'"
          slots:
            default:
              - component: Label
                config:
                  text: "=props.footerText ? props.footerText : 'Footer'"
                  visible: "=props.footerShow ? props.footerShow : props.footerShow"