@yuebai008/cli/dist/cli-server/client/front_end/ui/legacy/components/perf_ui/PieChart.js

Command line interface for rapid qg-minigame development

import*as ComponentHelpers from"../../../components/helpers/helpers.js";import*as LitHtml from"../../../lit-html/lit-html.js";import pieChartStyles from"./pieChart.css.js";const{render:render,html:html,svg:svg}=LitHtml;import*as i18n from"../../../../core/i18n/i18n.js";const UIStrings={total:"Total"},str_=i18n.i18n.registerUIStrings("ui/legacy/components/perf_ui/PieChart.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class PieChart extends HTMLElement{static litTagName=LitHtml.literal`devtools-perf-piechart`;shadow=this.attachShadow({mode:"open"});chartName="";size=0;formatter=e=>String(e);showLegend=!1;total=0;slices=[];totalSelected=!0;sliceSelected=-1;innerR=.618;lastAngle=-Math.PI/2;connectedCallback(){this.shadow.adoptedStyleSheets=[pieChartStyles]}set data(e){this.chartName=e.chartName,this.size=e.size,this.formatter=e.formatter,this.showLegend=e.showLegend,this.total=e.total,this.slices=e.slices,this.render()}render(){this.lastAngle=-Math.PI/2;const e=html`
      <div class="root" role="group" @keydown=${this.onKeyDown} aria-label=${this.chartName}>
        <div class="chart-root" style="width: ${this.size}px; height: ${this.size}px;">
          ${svg`
          <svg>
          <g transform="scale(${this.size/2}) translate(1, 1) scale(0.99, 0.99)">
            <circle r="1" stroke="hsl(0, 0%, 80%)" fill="transparent" stroke-width=${1/this.size}></circle>
            <circle r=${this.innerR} stroke="hsl(0, 0%, 80%)" fill="transparent" stroke-width=${1/this.size}></circle>
            ${this.slices.map(((e,t)=>{const s=this.sliceSelected===t,i=s&&!this.showLegend?"0":"-1";return svg`<path class="slice ${s?"selected":""}"
                  @click=${this.onSliceClicked(t)} tabIndex=${i}
                  fill=${e.color} d=${this.getPathStringForSlice(e)}
                  aria-label=${e.title} id=${s?"selectedSlice":""}></path>`}))}
            <!-- This is so that the selected slice is re-drawn on top, to avoid re-ordering slices
            just to render them properly. -->
            <use href="#selectedSlice" />
            </g>
          </svg>
          `}
          <div class="pie-chart-foreground">
            <div class="pie-chart-total ${this.totalSelected?"selected":""}" @click=${this.selectTotal}
                tabIndex=${this.totalSelected&&!this.showLegend?"1":"-1"}>
              ${this.total?this.formatter(this.total):""}
            </div>
          </div>
        </div>
        ${this.showLegend?html`
        <div class="pie-chart-legend">
          ${this.slices.map(((e,t)=>{const s=this.sliceSelected===t;return html`
              <div class="pie-chart-legend-row ${s?"selected":""}"
                  @click=${this.onSliceClicked(t)} tabIndex=${s?"0":"-1"}>
                <div class="pie-chart-size">${this.formatter(e.value)}</div>
                <div class="pie-chart-swatch" style="background-color: ${e.color};"></div>
                <div class="pie-chart-name">${e.title}</div>
              </div>`}))}
          <div class="pie-chart-legend-row ${this.totalSelected?"selected":""}"
              @click=${this.selectTotal} tabIndex=${this.totalSelected?"0":"-1"}>
            <div class="pie-chart-size">${this.formatter(this.total)}</div>
            <div class="pie-chart-swatch"></div>
            <div class="pie-chart-name">${i18nString(UIStrings.total)}</div>
          </div>
        </div>
        `:""}
    `;render(e,this.shadow,{host:this})}onSliceClicked(e){return()=>{this.selectSlice(e)}}selectSlice(e){this.totalSelected=!1,this.sliceSelected=e,this.render()}selectTotal(){this.totalSelected=!0,this.sliceSelected=-1,this.render()}selectAndFocusTotal(){this.selectTotal();const e=this.shadow.querySelector(".pie-chart-legend > :last-child");e&&e.focus()}selectAndFocusSlice(e){this.selectSlice(e);const t=this.shadow.querySelector(`.pie-chart-legend > :nth-child(${e+1})`);t&&t.focus()}focusNextElement(){this.totalSelected?this.selectAndFocusSlice(0):this.sliceSelected===this.slices.length-1?this.selectAndFocusTotal():this.selectAndFocusSlice(this.sliceSelected+1)}focusPreviousElement(){this.totalSelected?this.selectAndFocusSlice(this.slices.length-1):0===this.sliceSelected?this.selectAndFocusTotal():this.selectAndFocusSlice(this.sliceSelected-1)}onKeyDown(e){let t=!1;"ArrowDown"===e.key?(this.focusNextElement(),t=!0):"ArrowUp"===e.key&&(this.focusPreviousElement(),t=!0),t&&(e.stopImmediatePropagation(),e.preventDefault())}getPathStringForSlice(e){let t=e.value/this.total*2*Math.PI;if(!isFinite(t))return;t=Math.min(t,2*Math.PI*.9999);const s=Math.cos(this.lastAngle),i=Math.sin(this.lastAngle);this.lastAngle+=t;const l=Math.cos(this.lastAngle),c=Math.sin(this.lastAngle),h=this.innerR,a=l*h,o=c*h,r=s*h,n=i*h,d=t>Math.PI?1:0;return`M${s},${i} A1,1,0,${d},1,${l},${c} L${a},${o} A${h},${h},0,${d},0,${r},${n} Z`}}ComponentHelpers.CustomElements.defineComponent("devtools-perf-piechart",PieChart);