.story.ts

ts

import { LitElement, css, html, customElement} from "@umbraco-cms/backoffice/external/lit";
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";

@customElement('dashboard-chart')
export class DashboardChartElement extends UmbElementMixin(LitElement) {

    render() {
        return html`
            <uui-box headline="Dashboard with Pie Chart" style="margin:20px;">
                <p>Look at my chart</p>
                <umb-donut-chart description="Colors of fruits">
                    <umb-donut-slice color="red" name="Red" amount="10" kind="apples"></umb-donut-slice>
                    <umb-donut-slice color="green" name="Green" amount="20" kind="apples"></umb-donut-slice>
                    <umb-donut-slice color="yellow" name="Yellow" amount="10" kind="bananas"></umb-donut-slice>
                    <umb-donut-slice color="purple" name="Purple" amount="69" kind="plums"></umb-donut-slice>
                </umb-donut-chart>
            </uui-box>
        `;
    }
}

export default DashboardChartElement;

declare global {
  interface HTMLElementTagNameMap {
    'dashboard-chart': DashboardChartElement;
  }
}