acinguiux-preact-components 0.0.1

package/src/wcs/components/rio-iframe/rio-iframe.js

@@ -0,0 +1,137 @@
+const { h, register, preactHooks } = globalThis.ami
+const { useState, useEffect, useRef, useMemo } = preactHooks
+
+const LOCALE = (document.documentElement.lang || navigator.language).replace('-', '_').toLowerCase()
+const HASH_PARAM = 'iframe'
+const POLLING_INTERVAL = 200
+const DEFAULT_HEIGHT = 800
+const DEFAULT_ALLOW = 'geolocation'
+const ALLOWED_PROTOCOLS = new Set(['http:', 'https:'])
+const PARAMS_TO_PASS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'gclid']
+
+function RIOIframe ({ src, height: defaultHeight = DEFAULT_HEIGHT, title }) {
+  const id = useMemo(() => `_${globalThis.crypto.randomUUID()}`, [])
+  const ref = useRef(null)
+  const [height, setHeight] = useState(defaultHeight)
+  const [url, setUrl] = useState({})
+
+  useEffect(() => {
+    if (!ref.current) {
+      return null
+    }
+
+    const iframe = ref.current
+    const isFirst = document.querySelector('rio-iframe') === iframe.parentNode.host
+
+    const currUrl = getUrl(src, isFirst)
+    setUrl(currUrl)
+
+    const postMessage = () => iframe.contentWindow.postMessage({ id, locale: LOCALE, index: 0 }, currUrl?.origin)
+
+    const onMessage = event => {
+      // Ignore messages from other iframes (by id).
+      if (event?.data?.id !== id) {
+        return
+      }
+
+      // Set the height.
+      if (event.data.height) {
+        setHeight(event.data.height)
+      }
+
+      // Update the URL (first iframe only).
+      if (isFirst && event.data.url) {
+        // Only Unicode characters will be encoded in the event.data.url.
+        // Make sure the entire URL is encoded in the hash without double-encoding any potential Unicode characters.
+        location.hash = `${HASH_PARAM}=${toBase64(decodeURI(event.data.url))}`
+      }
+    }
+
+    // Poll iframe when loaded.
+    const onLoad = () => {
+      postMessage()
+      const intervalRef = setInterval(() => iframe.contentWindow ? postMessage() : clearInterval(intervalRef),
+        POLLING_INTERVAL)
+    }
+
+    window.addEventListener('message', onMessage)
+    iframe.addEventListener('load', onLoad)
+
+    // Unbind event listeners on unmount.
+    return () => {
+      window.removeEventListener('message', onMessage)
+      iframe.removeEventListener('load', onLoad)
+    }
+  }, [src])
+
+  return h('iframe', {
+    id,
+    height: url?.href ? height : 0,
+    className: 'block w-full',
+    src: url?.href,
+    ref,
+    title,
+    allow: DEFAULT_ALLOW,
+    allowfullscreen: 'allowfullscreen',
+    loading: 'lazy'
+  })
+}
+
+function getUrl (src, isFirst) {
+  let url = sanitizeUrl(src)
+  if (!url) {
+    return url
+  }
+
+  if (isFirst) {
+    url = deepLink(url)
+  }
+  updateParams(url)
+  return url
+}
+
+function sanitizeUrl (url) {
+  if (!url) {
+    return null
+  }
+
+  const urlObj = new URL(url, globalThis.location.href)
+
+  if (!ALLOWED_PROTOCOLS.has(urlObj.protocol)) {
+    console.error(`Unsupported iframe protocol: ${url}`)
+    return null
+  }
+
+  return urlObj
+}
+
+function deepLink (urlObj) {
+  const hashParams = new URLSearchParams(location.hash.substring(1))
+  if (hashParams.has(HASH_PARAM)) {
+    return new URL(fromBase64(hashParams.get(HASH_PARAM)), urlObj)
+  }
+
+  return urlObj
+}
+
+function updateParams (urlObj) {
+  const pageParams = new URLSearchParams(location.search)
+
+  for (const param of PARAMS_TO_PASS) {
+    pageParams.has(param) && urlObj.searchParams.set(param, pageParams.get(param))
+  }
+}
+
+function toBase64 (str) {
+  const textEncoder = new globalThis.TextEncoder()
+  // eslint-disable-next-line unicorn/prefer-code-point -- fromCharCode is required to match charCodeAt in fromBase64
+  return btoa(String.fromCharCode(...textEncoder.encode(str)))
+}
+
+function fromBase64 (str) {
+  const textDecoder = new globalThis.TextDecoder()
+  // eslint-disable-next-line unicorn/prefer-code-point -- fromCharCode is required to match fromCharCode in toBase64
+  return textDecoder.decode(Uint8Array.from([...atob(str)].map(c => c.charCodeAt(0))))
+}
+
+register(RIOIframe, 'rio-iframe')

package/src/wcs/components/salsify-products/filter-tools.js

@@ -0,0 +1,60 @@
+export function getFilters (allProducts, filter1, filter2) {
+  return [filter1, filter2]
+    .filter(Boolean)
+    .map(f => {
+      const [title = '', field = ''] = f.split(',')
+
+      // Get a list of unique values for the field existing in all products.
+      const options = [...(allProducts.reduce((acc, p) => new Set([...acc, p[field]]), new Set()))]
+        .filter(Boolean)
+        .map(v => ({ name: v, value: v }))
+
+      // Sort values.
+      options.sort((a, b) => {
+        if (isNumber(a.value) && isNumber(b.value)) {
+          return Number.parseFloat(a.value) - Number.parseFloat(b.value)
+        }
+
+        return a.value.localeCompare(b.value)
+      })
+
+      return { name: title, field, options }
+    })
+}
+
+export function updateFiltersWithCounts (products, filters, appliedFilters) {
+  // For each filter, compute counts for its options in one pass over products.
+  // This reduces complexity by avoiding a per-option scan of the product list.
+  for (const filter of filters) {
+    const counts = computeCountsForFilter(products, filter, appliedFilters)
+    filter.options = filter.options.map(o => ({ name: `${o.value} (${counts.get(o.value) || 0})`, value: o.value }))
+  }
+}
+
+// Compute option counts for a filter given the searchedProducts and applied filters.
+function computeCountsForFilter (products, filter, appliedFilters) {
+  const counts = new Map()
+  const otherApplied = appliedFilters.filter(af => af.field !== filter.field)
+
+  for (const p of products) {
+    let ok = true
+    for (const af of otherApplied) {
+      if (af.value && p[af.field] !== af.value) {
+        ok = false
+        break
+      }
+    }
+    if (!ok) {
+      continue
+    }
+
+    const val = p[filter.field]
+    counts.set(val, (counts.get(val) || 0) + 1)
+  }
+
+  return counts
+}
+
+function isNumber (value) {
+  return !Number.isNaN(Number.parseFloat(value))
+}

package/src/wcs/components/salsify-products/icon-cart.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.20731 4.42397C4.16978 4.18006 3.95991 4 3.71312 4H2.5C2.22386 4 2 3.77614 2 3.5V2.5C2 2.22386 2.22386 2 2.5 2H4.57104C5.3114 2 5.94102 2.54017 6.0536 3.27191L6.2591 4.60767H20.5105C20.8335 4.60767 21.0717 4.90937 20.9968 5.22359L19.2352 12.6149C19.1815 12.8401 18.9803 12.999 18.7488 12.999H7.55007L7.79269 14.576C7.83022 14.8199 8.04009 15 8.28688 15H18.5C18.7761 15 19 15.2239 19 15.5V16.5C19 16.7761 18.7761 17 18.5 17H7.42896C6.6886 17 6.05898 16.4598 5.9464 15.7281L4.20731 4.42397ZM6.58786 6.60767L7.26279 10.999H17.4458C17.5153 10.999 17.5756 10.9513 17.5917 10.8838L18.5669 6.79244C18.5893 6.69818 18.5179 6.60767 18.421 6.60767H6.58786ZM10 20C10 21.1046 9.10457 22 8 22C6.89543 22 6 21.1046 6 20C6 18.8954 6.89543 18 8 18C9.10457 18 10 18.8954 10 20ZM19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z" fill="#292929"/>
+</svg>

package/src/wcs/components/salsify-products/process-products.js

@@ -0,0 +1,53 @@
+const RENDITION = 'c_limit,cs_srgb,h_500,w_500'
+const DEFAULT_LOCALE = 'en-US'
+const LOCALE = document.documentElement.lang ?? DEFAULT_LOCALE
+
+export default function processProducts (products) {
+  const processedProducts = []
+  for (const product of products) {
+    let image = get(product, 'Main Image')
+    if (image) {
+      const index = image.lastIndexOf('/')
+      image = `${image.slice(0, index + 1)}${RENDITION}/${image.slice(index + 1)}`
+    }
+
+    const links = []
+    const features = []
+    for (const key of Object.keys(product)) {
+      if (key.startsWith('Buy Now Label')) {
+        const name = get(product, key)
+        const value = get(product, key.replace('Label', 'Link'))
+        links.push({ name, value })
+      }
+
+      if (key.startsWith('Key Feature')) {
+        const value = get(product, key)
+        value && features.push(value)
+      }
+    }
+
+    // Randomize links order.
+    // eslint-disable-next-line sonarjs/pseudo-random
+    links.sort(() => Math.random() - 0.5) // NOSONAR
+
+    processedProducts.push({
+      id: get(product, 'Salsify Unique ID'),
+      name: get(product, 'Product Name'),
+      description: get(product, 'Product Description'),
+      category: get(product, 'Product Category'),
+      subcategory: get(product, 'Product Subcategory'),
+      viscosity: get(product, 'Viscosity'),
+      'product-line': get(product, 'Product Line'),
+      image,
+      features,
+      links
+    })
+  }
+
+  processedProducts.sort((a, b) => a.id.localeCompare(b.id))
+  return processedProducts
+}
+
+function get (product, key) {
+  return product[key]?.[LOCALE] ?? product[key]?.[DEFAULT_LOCALE]
+}

package/src/wcs/components/salsify-products/route-tools.js

@@ -0,0 +1,54 @@
+export function getSuffix () {
+  const url = getUrl()
+  return url.pathname.split('.html/')[1]
+}
+
+export function updateSuffix (suffix) {
+  const url = getUrl()
+  const currentSuffix = getSuffix()
+
+  url.pathname = `${url.pathname.split('.html')[0]}.html`
+
+  if (suffix) {
+    url.pathname += `/${suffix}`
+    url.hash = ''
+  } else {
+    url.hash = `#_${currentSuffix}`
+  }
+
+  return url.toString()
+}
+
+export function setParams (params) {
+  const url = new URL(location.href)
+  url.hash = ''
+
+  for (const [name, value] of Object.entries(params)) {
+    value
+      ? url.searchParams.set(name, value)
+      : url.searchParams.delete(name)
+  }
+
+  route(url)
+}
+
+export function getParam (name) {
+  const url = new URL(location.href)
+  return url.searchParams.get(name)
+}
+
+export function route (url) {
+  history.pushState({}, '', url)
+  globalThis.dispatchEvent(new Event('popstate'))
+}
+
+function getUrl () {
+  const url = new URL(location.href)
+
+  // Hack for homepage.
+  if (url.pathname === '/') {
+    url.pathname = '/_jcr_content.html'
+  }
+
+  return url
+}

package/src/wcs/components/salsify-products/salsify-products.js

@@ -0,0 +1,281 @@
+import { route, getParam, setParams, getSuffix, updateSuffix } from './route-tools.js'
+import processProducts from './process-products.js'
+import { getFilters, updateFiltersWithCounts } from './filter-tools.js'
+import ICON_CART from './icon-cart.svg'
+
+const { h, register, matter, preactHooks, t } = globalThis.ami
+const { useState, useLayoutEffect, useMemo, useRef } = preactHooks
+const { Card, Box, Heading, Input, List, Button, Link } = matter
+
+const LOAD_MORE_LIMIT = 12
+const BASE_SEARCH_FIELDS = ['name', 'description']
+const SEARCH_DEBOUNCE = 300
+const SEARCH_PARAM = 'search' // Do not use `q` as it is one of the forwarded params in router.js.
+
+function SalsifyProducts ({ src, filter1, filter2, 'disable-filters': disableFilters, columns = 4 }) {
+  const areFiltersDisabled = disableFilters === 'true'
+  const [state, setState] = useState({})
+
+  // Update state based on the current URL.
+  const updateState = (allProducts, allFilters) => {
+    // Resolve selected product based on the URL suffix.
+    const productId = getSuffix()
+    const selectedProduct = productId ? allProducts.find(p => p.id === productId) : null
+
+    // Apply search.
+    let searchedProducts = allProducts
+    const searchTerm = getParam(SEARCH_PARAM)
+    if (searchTerm) {
+      const searchableFields = [...BASE_SEARCH_FIELDS, ...allFilters.map(f => f.field)]
+      searchedProducts = allProducts.filter(product => searchableFields.some(
+        field => product[field]?.toLowerCase().includes(searchTerm.toLowerCase())
+      ))
+    }
+
+    // Mark selected filters.
+    const appliedFilters = []
+    for (const filter of allFilters) {
+      filter.selected = getParam(filter.field) || null
+      if (filter.selected) {
+        appliedFilters.push({ field: filter.field, value: filter.selected })
+      }
+    }
+
+    updateFiltersWithCounts(searchedProducts, allFilters, appliedFilters)
+
+    // Filter products.
+    const filteredProducts = searchedProducts.filter(product =>
+      appliedFilters.every(filter => !filter.value || product[filter.field] === filter.value)
+    )
+
+    // Limit products.
+    const page = Number.parseInt(getParam('page'), 10) || 1
+    const limit = page * LOAD_MORE_LIMIT
+    const limitedProducts = filteredProducts.slice(0, limit)
+
+    setState({
+      products: limitedProducts,
+      selectedProduct,
+      filters: allFilters,
+      searchTerm,
+      hasMore: filteredProducts.length > limit
+    })
+  }
+
+  useLayoutEffect(() => {
+    let cleanup
+    (async () => {
+      const res = await fetch(src)
+      const data = await res.json()
+      const allProducts = processProducts(data)
+      const allFilters = getFilters(allProducts, filter1, filter2)
+
+      updateState(allProducts, allFilters)
+      const handler = () => updateState(allProducts, allFilters)
+      globalThis.addEventListener('popstate', handler)
+      cleanup = () => globalThis.removeEventListener('popstate', handler)
+    })().catch(console.error)
+    return () => cleanup?.()
+  }, [src, filter1, filter2])
+
+  if (!state.products) {
+    return null
+  }
+
+  const config = {
+    areFiltersDisabled,
+    filters: state.filters,
+    hasMore: state.hasMore,
+    searchTerm: state.searchTerm,
+    columns: Number.parseInt(columns, 10)
+  }
+
+  return state.selectedProduct
+    ? h(ProductDetails, { product: state.selectedProduct, config })
+    : h(ProductList, { products: state.products, config })
+}
+
+function ProductList ({ products, config }) {
+  const listId = useMemo(() => `_${crypto.randomUUID()}`, [])
+  const searchTimeoutRef = useRef(null)
+  const hasFilters = config.filters.length > 0 && !config.areFiltersDisabled
+
+  return h('div', { className: 'grid grid-cols-1 gap-5 animate-fade' },
+    hasFilters && h('div',
+      h(Box, { className: 'p-6 col-span-3 bg-bga text-txa rounded-2xl' },
+        h('div', { className: 'flex gap-5' },
+          h('label', { className: 'flex-1' },
+            h('span', { className: 'font-bold' }, t('Search')),
+            h(Input, {
+              'aria-controls': listId,
+              type: 'search',
+              name: t('Search'),
+              value: config.searchTerm || '',
+              onInput: event => {
+                // Capture primitive values synchronously. Do NOT rely on the
+                // event object inside async callbacks — it may be retargeted
+                // (shadow DOM) or otherwise unavailable later.
+                const query = event.target?.value ?? ''
+
+                // Avoid flooding updates when user is typing.
+                clearTimeout(searchTimeoutRef.current)
+                searchTimeoutRef.current = setTimeout(() => {
+                  // Use captured `query` instead of `event.target` here.
+                  const params = query ? { [SEARCH_PARAM]: query, page: null } : { [SEARCH_PARAM]: null, page: null }
+                  setParams(params)
+                }, SEARCH_DEBOUNCE)
+              }
+            })
+          ),
+          config.filters.map(filter => h(Filter, { ariaControls: listId, filter }))
+        ),
+        h('p',
+          h(Link, {
+            'aria-controls': listId,
+            _variant: 'underline',
+            _model: { name: t('Reset filters'), value: '#' },
+            onClick: e => {
+              e.preventDefault()
+              history.pushState({}, '', location.pathname)
+              globalThis.dispatchEvent(new Event('popstate'))
+            }
+          })
+        )
+      )
+    ),
+    h('div', { id: listId, 'aria-live': 'polite' },
+      products.length === 0 && h('div', { className: 'text-center' }, t('No results found.')),
+      products.length > 0 && h('div', {
+        className: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${config.columns} gap-4`,
+        children: products.map(product =>
+          h('div', { className: 'animate-fade' },
+            h(Card, {
+              id: `_${product.id}`,
+              _model: { value: updateSuffix(product.id) },
+              children: [
+                h(Box,
+                  h('div', { className: 'rounded-lg overflow-hidden p-6 border-1 border-txa/10', style: 'background: white' },
+                    h(ProductImage, { product })
+                  ),
+                  h(Heading, { _level: 3 }, product.name),
+                  h(Labels, { product, config })
+                )
+              ]
+            })
+          )
+        )
+      })
+    ),
+    config.hasMore && h('div', { className: 'flex justify-center' },
+      h(Button, {
+        'aria-controls': listId,
+        className: 'w-auto',
+        onClick: () => {
+          const page = Number.parseInt(getParam('page'), 10) || 1
+          setParams({ page: page + 1 })
+        },
+        _model: {
+          name: t('Load more'),
+        }
+      })
+    )
+  )
+}
+
+function ProductDetails ({ product, config }) {
+  useLayoutEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
+  return h('div', {
+    className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 animate-fade',
+    itemtype: 'https://schema.org/Product',
+    itemscope: '',
+    children: [
+      h(Box, { className: 'lg:col-span-3 md:col-span-2 p-6 rounded-2xl bg-bga text-txa' },
+        h(Link, {
+          onClick: event => {
+            event.preventDefault()
+            route(event.currentTarget.href)
+            dispatchEvent(new Event('hashchange')) // Force hash jump.
+          },
+          _variant: 'simple',
+          _model: { name: t('View product list'), value: updateSuffix(null) },
+        }),
+        h(Heading, { _level: 2, itemprop: 'name' }, product.name)
+      ),
+      h('div', { className: 'flex flex-col gap-5' },
+        h('div', { className: 'rounded-2xl overflow-hidden' },
+          h(ProductImage, { product })
+        ),
+        h(StoreLinks, { product })
+      ),
+      h(Box, { className: 'lg:col-span-2 bg-bga text-txa rounded-2xl', itemprop: 'description' },
+        product.description && [
+          h(Heading, { _level: 3 }, t('Description')),
+          h('p', product.description),
+        ],
+        h(Labels, { product, config }),
+        product.features.length > 0 && [
+          h(Heading, { _level: 3 }, t('Features')),
+          h(List, product.features.map(f =>
+            h('li', f)
+          ))
+        ]
+      )
+    ]
+  })
+}
+
+function ProductImage ({ product }) {
+  return h('div', { className: 'aspect-square' },
+    h('img', {
+      itemprop: 'image',
+      className: 'block object-contain h-full',
+      alt: product.name,
+      src: product.image
+    })
+  )
+}
+
+function Filter ({ ariaControls, filter }) {
+  return h('label', { className: 'flex-1' },
+    h('span', { className: 'font-bold' }, filter.name),
+    h(Input, {
+      defaultValue: filter.selected || '',
+      selectedValue: filter.selected,
+      'aria-controls': ariaControls,
+      type: 'select',
+      onChange: event => {
+        setParams({ [filter.field]: event.target.value, page: null })
+      },
+      children: [
+        h('option', { value: '' }, ''),
+        filter.options.map(o => h('option', { value: o.value, selected: o.value === filter.selected }, o.name))
+      ]
+    })
+  )
+}
+
+function Labels ({ product, config }) {
+  return [
+    h('hr', { className: 'mb-2 w-6 h-1 bg-bgb' }),
+    h('div', { className: 'space-y-1' },
+      config.filters.map(filter => h('dl', { className: 'text-sm flex gap-2' },
+        h('dt', { className: 'font-bold basis-24 grow-0 shrink-0' }, filter.name),
+        h('dd', product[filter.field])
+      ))
+    )
+  ]
+}
+
+function StoreLinks ({ product }) {
+  return product.links.length > 0 && h(Box, { className: 'p-6 text-txa bg-bga rounded-xl' },
+    h(Heading, { _level: 3 }, t('Buy now')),
+    product.links.map(link =>
+      h(Button, { _wide: true, _model: { ...link, icon: ICON_CART } })
+    )
+  )
+}
+
+register(SalsifyProducts, 'salsify-products')

package/src/wcs/components/shout-out/shout-out.js

@@ -0,0 +1,51 @@
+const { register, h, matter, preactHooks } = globalThis.ami
+const { Box, SVG, Heading, RichText } = matter
+const { useEffect, useState } = preactHooks
+
+const DEFAULT_ICON_SIZE_MAPPING = { s: 6, m: 8, l: 12, xl: 16 }
+const DEFAULT_ICON_SIZE = DEFAULT_ICON_SIZE_MAPPING.s
+
+function ShoutOut ({ src }) {
+  const [data, setData] = useState()
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src)
+      if (!res.ok) {
+        throw new Error(`Error fetching ${src}. Status: ${res.status}`)
+      }
+      const json = await res.json()
+      setData(json)
+    })().catch(console.error)
+  }, [src])
+
+  if (!data) {
+    return null
+  }
+
+  const iconSize = DEFAULT_ICON_SIZE_MAPPING[data.customModel.elements.iconSize.value] || DEFAULT_ICON_SIZE
+  const title = data.customModel.elements.title.value
+
+  return h(Box, { className: 'bg-bga text-txa h-full rounded-2xl' },
+    h('div', { className: 'flex gap-3' },
+      h('div', { className: 'shrink' },
+        h('div', { className: `block w-${iconSize} h-${iconSize}` },
+          h(SVG, {
+            _style: id => `
+              ${id} path, ${id} polygon {
+                fill: currentColor;
+            }`,
+            _model: { src: data.customModel.elements.icon.value }
+          })
+        )
+      ),
+      title && h('div', { className: 'shrink' },
+        h(Heading, { _level: 3 }, title)
+      ),
+      h('div', { className: 'flex items-center' },
+        h(RichText, data.customModel.elements.description.value)
+      )
+    )
+  )
+}
+
+register(ShoutOut, 'shout-out')

package/src/wcs/components/simple-chart/simple-chart.js

@@ -0,0 +1,53 @@
+import Chart from 'chart.js/auto'
+
+const { h, register, preactHooks, matter } = globalThis.ami
+const { Box, Heading } = matter
+const { useRef, useEffect, useState, useLayoutEffect } = preactHooks
+
+function SimpleChart ({ src, title, subtitle }) {
+  const [data, setData] = useState()
+  const chart = useRef(null)
+  const canvasRef = useRef(null)
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src)
+      setData(await res.json())
+    })().catch(console.error)
+  }, [src])
+
+  useLayoutEffect(() => {
+    if (!data || !canvasRef.current) {
+      return
+    }
+
+    chart.current?.destroy()
+    chart.current = new Chart(canvasRef.current, {
+      ...data,
+      options: {
+        ...data.options,
+        animation: {
+          ...data.options?.animation,
+          onComplete: () => canvasRef.current?.setAttribute('data-complete', '')
+        }
+      }
+    })
+  }, [data])
+
+  if (!data) {
+    return null
+  }
+
+  return h(Box, { className: 'bg-bga text-txa rounded-2xl' },
+    h(Heading, { _level: 3 }, title),
+    h('canvas', {
+      className: 'w-full',
+      ref: canvasRef,
+      'aria-label': subtitle ? `${title}: ${subtitle}` : title,
+      role: 'img'
+    }),
+    subtitle ? h('p', subtitle) : null
+  )
+}
+
+register(SimpleChart, 'simple-chart')