[Components](https://oods-foundry.com/components) / viz.mark

# VizAreaPreview

Displays an area chart from bound chart data.

Generated from @oods/foundry 0.10.1

- Categories

  viz.mark

- Contexts

  detail

- Readiness

  `react-and-vue`

## Playground

This component's contract doesn't list typed props, so the playground shows its documented example.

Documented example `viz-area-preview-frame-placeholder-and-slot` : remove the default slot and then restore it, empty frame shows Area preview (640 x 360); authored content replaces the placeholder.

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

The real VizAreaPreview, live

React

Authored area preview content

Vue

Authored area preview content

## Code

The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

**React**

```
import { VizAreaPreview } from '@oods/components-react';
import '@oods/component-styles/css';

export function Example() {
  return (
    <VizAreaPreview
      width={640}
      height={360}
    >
      Authored area preview content
    </VizAreaPreview>
  );
}
```

## Props, slots and events

Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

Props

| Prop | Type | Required | Documented example |
| - | - | - | - |
| `svg` | `string \| undefined` | no | |
| `svgNarrow` | `string \| undefined` | no | |
| `svgWide` | `string \| undefined` | no | |
| `svgDark` | `string \| undefined` | no | |
| `svgDarkNarrow` | `string \| undefined` | no | |
| `svgDarkWide` | `string \| undefined` | no | |
| `svgHc` | `string \| undefined` | no | |
| `svgHcNarrow` | `string \| undefined` | no | |
| `svgHcWide` | `string \| undefined` | no | |
| `title` | `string \| undefined` | no | |
| `description` | `string \| undefined` | no | |
| `width` | `number \| undefined` | no | `640` |
| `height` | `number \| undefined` | no | `360` |

### Slots

default

### Events

none

## States

placeholder, content

## Accessibility

- Role

  `none`

- How it gets its name

  `none` on `:root`

### Keyboard

The contract lists no keyboard behaviour.

### Obligations in the contract

- The empty frame has a visible text placeholder
- Authored default-slot content preserves its own semantics
- Static SVG renders in a labelled figure with role img and preserves SVG IDs and ARIA
- A title the SVG does not paint is the figure heading (figcaption), so a placed chart names itself outside its pixels

Mirrors renderVizAreaPreview through renderVizPreview with data-viz-preview-type=area and default dimensions 640x360; the placeholder appears only without authored content. With svg, renders a labelled figure preserving static SVG IDs and ARIA; without svg, the placeholder remains unchanged. svgNarrow is the same chart at the narrow size: the figure shows it instead of svg when its own inline size is at most 600px (a container query), so axis text keeps its size on a phone column. svgWide is the same chart at the wide size: the figure shows it instead of svg when its own inline size is at least 900px, and a figure that carries it fills its column, so a detail chart spans a desktop screen at design scale. svgDark, svgDarkNarrow and svgDarkWide, and svgHc, svgHcNarrow and svgHcWide, are the same chart drawn in the dark and high-contrast themes: with any of them svg, svgNarrow and svgWide are the light renders, the renders of each theme sit in a data-viz-theme wrapper, and the figure shows the one matching the nearest data-theme.

## Tokens

The token roles this component reads.

- `preview.frame`
- `preview.placeholder`

## Readiness

The evidence recorded for this component, with its label.

`react-and-vue`: catalog_list gives this label when the React and Vue components have complete readiness evidence, but the sweep's generated apps don't use the component in both.

Readiness evidence

| Evidence | React | Vue |
| - | - | - |
| state | implemented-evidence-complete | implemented-evidence-complete |
| versioned contract | passed | passed |
| target implementation | passed | passed |
| package export | passed | passed |
| public declaration | passed | passed |
| dependency closure | passed | passed |
| framework scenario | passed | passed |
| accessibility | verified | verified |
| interaction | not-applicable | not-applicable |
| visual themes | verified | verified |

VizAreaPreview presents content and owns no focusable control or action; authored child actions remain the consumer's responsibility.

## Use your own

You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

The `component_map` call, with the parts in angle brackets yours to fill:

```
{
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourVizAreaPreview>",
  "oodsTraits": [
    "MarkArea"
  ],
  "substitution": {
    "component": "VizAreaPreview",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourVizAreaPreview>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourVizAreaPreview>"
    }
  }
}
```

## How this page was made

Generated at build from the published data, each source with the hash of what was read. [The page's manifest](https://oods-foundry.com/components/viz-area-preview/manifest.json).

- **Contract**: `@oods/component-contracts@0.10.1 componentContracts.VizAreaPreview` `sha256:3b96753be733…`
- **Documented example**: `@oods/component-contracts@0.10.1 sharedScenarios viz-area-preview-frame-placeholder-and-slot` `sha256:81bdb72c7e6d…`
- **Catalog entry (catalog_list)**: `generated/0.10.1/system/catalog.json VizAreaPreview` `sha256:0d866838a6d8…`
- **React readiness**: `@oods/components-react@0.10.1 readiness VizAreaPreview` `sha256:8d3ab47a6589…`
- **Vue readiness**: `@oods/components-vue@0.10.1 readiness VizAreaPreview` `sha256:03c7641bb658…`
- **Prop types**: `generated/0.10.1/components/prop-types.json VizAreaPreview` `sha256:520236e3f821…`