[Components](https://oods-foundry.com/components) / viz.mark # VizHeatmapPreview Displays a heatmap 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 `VizHeatmapPreview` : mount the authored fragment or shared-renderer SVG, SVG bytes hash 0a661f59cc96aa4b7cbb922cddd0d7bf744171c28b239a5615892353712629b3. The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example. The real VizHeatmapPreview, live React Four authored sample observations. Vue Four authored sample observations. ## Code The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles. **React** ``` import { VizHeatmapPreview } from '@oods/components-react'; import '@oods/component-styles/css'; export function Example() { return ( 1222ValueHeatmap chart sampleFebJanPeriodABCategory"} title="Heatmap chart sample" description="Four authored sample observations." width={360} height={200} /> ); } ``` ## 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 | `Heatmap chart sample` | | `description` | `string \| undefined` | no | `Four authored sample observations.` | | `width` | `number \| undefined` | no | `360` | | `height` | `number \| undefined` | no | `200` | ### Slots default ### Events none ## States unbound, rendered ## Accessibility - Role `img` - How it gets its name `aria-label` on `[data-oods-component="VizHeatmapPreview"]` ### Keyboard The contract lists no keyboard behaviour. ### Obligations in the contract - Static shared-renderer SVG is preserved inside a named image figure; absence is explicitly disclosed. Recipe over VizAreaPreview's static SVG mechanism. VizHeatmapPreview uses the existing heatmap renderer; this is no new chart family. No pixels are invented when svg is absent. ## Tokens The token roles this component reads. - `surface.panel` - `text.body` ## 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 | VizHeatmapPreview displays an authored chart input or rendered static SVG and owns no focusable control or consumer action. ## 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": "", "externalComponent": "", "oodsTraits": [ "MarkRect" ], "substitution": { "component": "VizHeatmapPreview", "react": { "package": "/react", "version": "", "export": "" }, "vue": { "package": "/vue", "version": "", "export": "" } } } ``` ## 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-heatmap-preview/manifest.json). - **Contract**: `@oods/component-contracts@0.10.1 componentContracts.VizHeatmapPreview` `sha256:9da9e4aeff34…` - **Documented example**: `@oods/component-contracts@0.10.1 sharedScenarios VizHeatmapPreview` `sha256:0e71a20d09cd…` - **Catalog entry (catalog_list)**: `generated/0.10.1/system/catalog.json VizHeatmapPreview` `sha256:dd618d588c51…` - **React readiness**: `@oods/components-react@0.10.1 readiness VizHeatmapPreview` `sha256:c8c229b5fffa…` - **Vue readiness**: `@oods/components-vue@0.10.1 readiness VizHeatmapPreview` `sha256:dad9f02d510f…` - **Prop types**: `generated/0.10.1/components/prop-types.json VizHeatmapPreview` `sha256:520236e3f821…`