# Metric Card

A metric summary with value, unit and process context.

## Installation

Download: /api/catalog/metric-card/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically.

Add an Embedded View (ia.display.view), set props.path to RungsmithLab/Data/MetricCard, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| label | string | input | "Caudal actual" |

| value | number | input | 42.6 |

| unit | string | input | "m³/h" |

| decimals | number | input | 1 |

| code | string | input | "FT-101" |

| delta | string | input | "+2,4 % respecto al turno anterior" |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "RungsmithLab/Data/MetricCard",
    "params": {
      "label": "Caudal actual",
      "value": 42.6,
      "unit": "m³/h",
      "decimals": 1,
      "code": "FT-101",
      "delta": "+2,4 % respecto al turno anterior"
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/RungsmithLab/Data/MetricCard/view.json

```json

{
  "custom": {},
  "params": {
    "label": "Caudal actual",
    "value": 42.6,
    "unit": "m³/h",
    "decimals": 1,
    "code": "FT-101",
    "delta": "+2,4 % respecto al turno anterior"
  },
  "props": {
    "defaultSize": {
      "width": 320,
      "height": 184
    }
  },
  "propConfig": {
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.unit": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.decimals": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.code": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.delta": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "Root"
    },
    "props": {
      "direction": "column",
      "wrap": "nowrap",
      "alignItems": "stretch",
      "justify": "flex-start",
      "style": {
        "gap": "10px",
        "minWidth": 0,
        "boxSizing": "border-box",
        "classes": "vc-lab-card vc/data-metric-card",
        "height": "100%",
        "width": "100%",
        "overflow": "hidden",
        "padding": "14px 16px",
        "borderRadius": "12px"
      }
    },
    "position": {
      "basis": "auto",
      "grow": 0,
      "shrink": 0
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "Code"
        },
        "props": {
          "text": "",
          "alignVertical": "center",
          "style": {
            "fontFamily": "Viewcraft Geist, Inter, Segoe UI, sans-serif",
            "fontSize": "11px",
            "whiteSpace": "normal",
            "overflowWrap": "break-word",
            "minWidth": 0,
            "classes": "vc-lab-s-500a6767ce vc/data-metric-code",
            "fontWeight": "500",
            "letterSpacing": "0.04em",
            "textTransform": "uppercase"
          }
        },
        "position": {
          "basis": "auto",
          "grow": 0,
          "shrink": 0
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(isNull({view.params.code}), \"\", {view.params.code})"
              }
            }
          }
        }
      },
      {
        "type": "ia.display.view",
        "version": 0,
        "meta": {
          "name": "Metric"
        },
        "props": {
          "path": "Viewcraft/Components/Data/MetricValue",
          "params": {},
          "useDefaultViewWidth": false,
          "useDefaultViewHeight": false,
          "style": {
            "minWidth": 0,
            "minHeight": 0
          }
        },
        "position": {
          "basis": "106px",
          "grow": 0,
          "shrink": 0
        },
        "propConfig": {
          "props.params.label": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(isNull({view.params.label}), \"\", {view.params.label})"
              }
            }
          },
          "props.params.value": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "{view.params.value}"
              }
            }
          },
          "props.params.unit": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(isNull({view.params.unit}), \"\", {view.params.unit})"
              }
            }
          },
          "props.params.decimals": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "{view.params.decimals}"
              }
            }
          },
          "props.params.delta": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(isNull({view.params.delta}), \"\", {view.params.delta})"
              }
            }
          }
        }
      }
    ],
    "propConfig": {}
  }
}


```

### com.inductiveautomation.perspective/views/RungsmithLab/Data/MetricCard/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/views/Viewcraft/Components/Data/MetricValue/view.json

```json

{
  "custom": {},
  "params": {
    "label": "Caudal actual",
    "value": 42.6,
    "unit": "m³/h",
    "decimals": 1,
    "delta": "+2,4 % respecto al turno anterior"
  },
  "props": {
    "defaultSize": {
      "width": 280,
      "height": 106
    }
  },
  "propConfig": {
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.unit": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.decimals": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.delta": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "Root"
    },
    "props": {
      "direction": "column",
      "wrap": "nowrap",
      "alignItems": "stretch",
      "justify": "flex-start",
      "style": {
        "gap": "6px",
        "minWidth": 0,
        "boxSizing": "border-box",
        "classes": "vc-lab-component vc/data-metric-value",
        "height": "100%",
        "width": "100%",
        "overflow": "hidden"
      }
    },
    "position": {
      "basis": "auto",
      "grow": 0,
      "shrink": 0
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "Label"
        },
        "props": {
          "text": "",
          "alignVertical": "center",
          "style": {
            "fontFamily": "Viewcraft Geist, Inter, Segoe UI, sans-serif",
            "fontSize": "12px",
            "whiteSpace": "normal",
            "overflowWrap": "break-word",
            "minWidth": 0,
            "classes": "vc-lab-s-500a6767ce vc/data-metric-label",
            "fontWeight": "500",
            "lineHeight": "1.3"
          }
        },
        "position": {
          "basis": "auto",
          "grow": 0,
          "shrink": 0
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(isNull({view.params.label}), \"\", {view.params.label})"
              }
            }
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "Value"
        },
        "props": {
          "text": "42,6 m³/h",
          "alignVertical": "center",
          "style": {
            "fontFamily": "Viewcraft Geist, Inter, Segoe UI, sans-serif",
            "fontSize": "28px",
            "whiteSpace": "normal",
            "overflowWrap": "break-word",
            "minWidth": 0,
            "classes": "vc-lab-s-3252f41ae1 vc/data-metric-num",
            "fontWeight": "600",
            "lineHeight": "1.1",
            "letterSpacing": "-0.025em",
            "fontVariantNumeric": "tabular-nums"
          }
        },
        "position": {
          "basis": "auto",
          "grow": 0,
          "shrink": 0
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr-struct",
              "config": {
                "struct": {
                  "value": "{view.params.value}",
                  "decimals": "{view.params.decimals}",
                  "unit": "{view.params.unit}"
                },
                "waitOnAll": true
              },
              "transforms": [
                {
                  "type": "script",
                  "code": "\tif value is None:\n\t\treturn u\"\"\n\treturn rslab.fmt(rslab.get(value, \"value\"), rslab.get(value, \"decimals\", 1), rslab.get(value, \"unit\", u\"\"))"
                }
              ]
            }
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "Delta"
        },
        "props": {
          "text": "",
          "alignVertical": "center",
          "style": {
            "fontFamily": "Viewcraft Geist, Inter, Segoe UI, sans-serif",
            "fontSize": "12px",
            "whiteSpace": "normal",
            "overflowWrap": "break-word",
            "minWidth": 0,
            "classes": "vc-lab-s-500a6767ce vc/data-metric-delta",
            "lineHeight": "1.35"
          }
        },
        "position": {
          "basis": "auto",
          "grow": 0,
          "shrink": 0
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(isNull({view.params.delta}), \"\", {view.params.delta})"
              }
            }
          }
        }
      }
    ],
    "propConfig": {}
  }
}


```

### com.inductiveautomation.perspective/views/Viewcraft/Components/Data/MetricValue/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-card/style.json

```json

{
    "base": {
        "style": {
            "gap": "10px",
            "padding": "14px 16px",
            "borderRadius": "12px"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-card/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-code/style.json

```json

{
    "base": {
        "style": {
            "fontSize": "11px",
            "fontWeight": "500",
            "letterSpacing": "0.04em",
            "textTransform": "uppercase",
            "color": "#b0b0b8"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-code/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-value/style.json

```json

{
    "base": {
        "style": {
            "gap": "6px"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-value/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-label/style.json

```json

{
    "base": {
        "style": {
            "fontSize": "12px",
            "fontWeight": "500",
            "color": "#b0b0b8"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-label/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-num/style.json

```json

{
    "base": {
        "style": {
            "fontSize": "28px",
            "fontWeight": "600",
            "letterSpacing": "-0.025em",
            "fontVariantNumeric": "tabular-nums"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-num/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-delta/style.json

```json

{
    "base": {
        "style": {
            "fontSize": "12px",
            "color": "#b0b0b8"
        },
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/data-metric-delta/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### stylesheet-snippet.css

```css


[class~="psc-vc/data-metric-value"], .psc-vc\/data-metric-value{
  gap:6px!important;
  align-items:flex-start!important;
}
[class~="psc-vc/data-metric-label"], .psc-vc\/data-metric-label{
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.3!important;
  color:var(--vc-data-muted,#b0b0b8)!important;
  letter-spacing:.01em!important;
}
[class~="psc-vc/data-metric-num"], .psc-vc\/data-metric-num{
  font-size:28px!important;
  font-weight:600!important;
  line-height:1.1!important;
  letter-spacing:-0.025em!important;
  font-variant-numeric:tabular-nums!important;
  color:var(--vc-data-text,#fafafa)!important;
}
[class~="psc-vc/data-metric-delta"], .psc-vc\/data-metric-delta{
  font-size:12px!important;
  line-height:1.35!important;
  color:var(--vc-data-muted,#b0b0b8)!important;
}
[class~="psc-vc/data-metric-code"], .psc-vc\/data-metric-code{
  font-size:11px!important;
  font-weight:500!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  color:var(--vc-data-muted,#b0b0b8)!important;
  font-variant-numeric:tabular-nums!important;
}
[class~="psc-vc/data-metric-card"], .psc-vc\/data-metric-card{
  gap:10px!important;
  padding:14px 16px!important;
  border-radius:12px!important;
}
[class~="psc-vc/data-metric-num"], .psc-vc\/data-metric-num{
  font-variant-numeric:tabular-nums!important;
}

```