<div
    class="gh-feedback-events-feed"
    {{on "mouseleave" this.onMouseleave}}
>
    <div class="gh-feedback-events-feed-container">
        <EmberChart
            @type='doughnut'
            @data={{this.chartData}}
            @options={{this.chartOptions}}
            @height={{220}}
            @width={{220}}
        />
    </div>

    <div
        class="gh-feedback-events-tooltip"
        id="gh-feedback-events-tooltip"
        {{did-insert this.onTooltipInsert}}
    >
        <div>
            <div class="gh-feedback-events-tooltip-body">
                <span
                    class="gh-feedback-events-tooltip-badge"
                    style={{html-safe (concat "background-color: " this.tooltipData.color)}}
                ></span>
                <span class="gh-feedback-events-tooltip-info">{{this.tooltipData.value}}</span>
                <span>{{this.tooltipData.percent}}%</span>
            </div>

            <span class="gh-feedback-events-tooltip-metric">{{this.tooltipData.label}}</span>
        </div>
    </div>
</div>
