53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { LitElement, html, css, property, customElement } from './plugins.js';
|
|
import type { CSSResult, TemplateResult } from './plugins.js';
|
|
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
|
import { SwDashTable } from './sw-dash-table.js';
|
|
import type { IColumnConfig } from './sw-dash-table.js';
|
|
|
|
export interface IContentTypeStats {
|
|
contentType: string;
|
|
totalResources: number;
|
|
totalSize: number;
|
|
totalHits: number;
|
|
totalMisses: number;
|
|
hitRate: number;
|
|
}
|
|
|
|
/**
|
|
* Content types table view component
|
|
*/
|
|
@customElement('sw-dash-types')
|
|
export class SwDashTypes extends LitElement {
|
|
public static styles: CSSResult[] = [
|
|
sharedStyles,
|
|
tableStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
`
|
|
];
|
|
|
|
@property({ type: Array }) accessor contentTypes: IContentTypeStats[] = [];
|
|
|
|
private columns: IColumnConfig[] = [
|
|
{ key: 'contentType', label: 'Content Type' },
|
|
{ key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
|
|
{ key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
|
|
{ key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
|
|
{ key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
|
|
{ key: 'hitRate', label: 'Hit Rate' },
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<sw-dash-table
|
|
.columns="${this.columns}"
|
|
.data="${this.contentTypes}"
|
|
filterPlaceholder="Filter types..."
|
|
infoLabel="content types"
|
|
></sw-dash-table>
|
|
`;
|
|
}
|
|
}
|