component Chart {
  outputs {
    select(payload: { item: string | number | boolean | null | object; index: number; datasetIndex: number; sourceEvent?: Event })
    dataPointClick(payload: { item: string | number | boolean | null | object; index: number; datasetIndex: number; sourceEvent?: Event })
    legendToggle(payload: { item: string | number | boolean | null | object; index: number; datasetIndex?: number; hidden: boolean; sourceEvent?: Event })
  }
  props {
    title: string = "Chart"
    description: string = ""
    items: unknown[] = []
    data: unknown = undefined
    labels: unknown[] = []
    datasets: unknown[] = []
    options: object = {}
    type: string = ""
    valueKey: string = "value"
    labelKey: string = "label"
    height: number = 240
    showLegend: boolean = true
    showValues: boolean = true
    size: string = "default"
    color: string = "primary"
    variant: string = "bar"
    class: string = ""
  }
  functions {
    shared function configText() {
      var chartData = typeof data === "string" ? JSON.parse(data) : data
      return JSON.stringify({ title: title, items: items, data: chartData, labels: labels, datasets: datasets, options: options, type: type || variant, valueKey: valueKey, labelKey: labelKey, showLegend: showLegend, showValues: showValues })
    }
  }
  view {
    <figure {...attrs} data-ui-component="Chart" data-wrnexus-runtime="chartjs" data-chart-config="{configText()}" data-color="{color}" data-size="{size}" class="wrn-chart {class}" @chartselect="output.select(event.detail)" @chartpointclick="output.dataPointClick(event.detail)" @chartlegendtoggle="output.legendToggle(event.detail)" data-wrn-owner="Chart" data-wrn-part="root" data-wrn-component="Chart" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
      {#if title || description}
        <figcaption class="wrn-chart__header" data-wrn-owner="Chart" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
          {#if title}<strong>{title}</strong>{/if}
          {#if description}<span>{description}</span>{/if}
        </figcaption>
      {/if}
      <div class="wrn-chart__stage" style="height:{Math.max(120, height)}px" data-wrn-owner="Chart" data-wrn-part="stage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
        <canvas data-chart-canvas role="img" aria-label="{title || 'Chart'}" data-wrn-owner="Chart" data-wrn-part="canvas" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Chart data is available in the table below.</canvas>
      </div>
      <p data-chart-status class="wrn-chart__status" role="status" data-wrn-owner="Chart" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></p>
      <div data-chart-table class="wrn-chart__accessible" data-wrn-owner="Chart" data-wrn-part="accessible" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
      <slot />
    </figure>
  }
  style {
    .wrn-chart { --wrn-chart-color:var(--wrn-color-primary); display:grid; gap:0.875rem; min-width:0; margin:0; padding:1rem 1.125rem; border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius); color:var(--wrn-color-text); background:var(--wrn-color-surface); }
    .wrn-chart[data-color="secondary"] { --wrn-chart-color:var(--wrn-color-secondary); }
    .wrn-chart[data-color="success"] { --wrn-chart-color:var(--wrn-color-success); }
    .wrn-chart[data-color="info"] { --wrn-chart-color:var(--wrn-color-info); }
    .wrn-chart[data-color="warning"] { --wrn-chart-color:var(--wrn-color-warning); }
    .wrn-chart[data-color="danger"] { --wrn-chart-color:var(--wrn-color-danger); }
    .wrn-chart__header { display:grid; gap:0.2rem; }
    .wrn-chart__header > strong { font-size:0.9375rem; font-weight:600; }
    .wrn-chart__header > span,.wrn-chart__status { color:var(--wrn-color-text-muted); font-size:0.8125rem; }
    .wrn-chart__stage { position:relative; min-width:0; width:100%; }
    .wrn-chart__stage canvas { display:block; max-width:100%; }
    .wrn-chart__status { margin:0; }
    .wrn-chart__status:empty { display:none; }
    .wrn-chart__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  }
}