# presentation/renderers/metric.renderer.ts

> 28 lines of code and 4 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-renderers-metric-renderer-ts
Source text: https://banes-lab.com/assets/sources/source.d0564ad5058206f6e3a900365d890ac727c401e1f31e9649ec4d5ab6bfb7039b.generated.txt

## Definitions

- `renderMetrics` (lexical_declaration, line 20, exported)
- `renderMetricGrid` (lexical_declaration, line 14, exported)
- `renderMetric` (lexical_declaration, line 4)
- `grid` (lexical_declaration, line 15, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)

## Used by

- [presentation/renderers/block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/block.renderer.ts.md)
- [presentation/renderers/folder.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/folder.renderer.ts.md)

## Source

```typescript
import type { Metric, MetricBlock } from "#types/block.types";
import { appendChildren, createElement } from "#core/factories/element.factory";

const renderMetric = function renderMetric(metric: Metric): Element {
    return createElement("div", {
        children: [
            createElement("span", { className: "record-field-label", text: metric.label }),
            createElement("span", { className: "record-field-value metric-value", text: metric.value }),
        ],
        className: "record-field metric-card",
    });
};

export const renderMetricGrid = function renderMetricGrid(block: MetricBlock): Element {
    const grid = createElement("div", { className: "record-fields metric-grid" });
    appendChildren(grid, block.metrics.map(renderMetric));
    return grid;
};

export const renderMetrics = function renderMetrics(block: MetricBlock): Element {
    return createElement("figure", {
        children: [
            createElement("figcaption", {
                children: [createElement("span", { className: "diagram-caption", text: block.caption })],
                className: "diagram-header",
            }),
            renderMetricGrid(block),
        ],
        className: "diagram-figure metric-figure",
    });
};
```