BlogChart

---
import type { BlogChartConfig } from '../../lib/blog-chart/schema'
import { DEFAULT_CHART_HEIGHT } from '../../lib/blog-chart/schema'
import '../../styles/blog-chart.css'

interface Props {
  config: BlogChartConfig
}

const { config } = Astro.props
const ariaLabel = config.ariaLabel ?? config.title ?? 'Chart'
const height = config.height ?? DEFAULT_CHART_HEIGHT
const configJson = JSON.stringify(config).replace(/</g, '\\u003c')
---

  <figure class="blog-chart not-prose" style={`--blog-chart-height: ${height}`}>
    {
      config.title != null ? (
        <figcaption class="blog-chart__caption meta text-xs">
          <span class="blog-chart__title block text-ink">{config.title}</span>
          {config.description != null ? (
            <span class="blog-chart__description mt-1 block text-ink-muted">{config.description}</span>
          ) : null}
        </figcaption>
      ) : config.description != null ? (
        <figcaption class="blog-chart__caption meta text-xs">
          <span class="blog-chart__description block text-ink-muted">{config.description}</span>
        </figcaption>
      ) : null
    }
    <div class="blog-chart__canvas" role="img" aria-label={ariaLabel} />
    <script type="application/json" class="blog-chart__config" set:html={configJson} />
  </figure>

<script>
  import { initBlogCharts } from '../../lib/blog-chart/init-blog-charts'

  initBlogCharts()
</script>