diff --git a/README.md b/README.md index 01defc6..c4c0020 100644 --- a/README.md +++ b/README.md @@ -1 +1,151 @@ -# grid-demos-wc \ No newline at end of file +# Ignite UI for Web Components Examples + +Explore how to build lightning-fast apps with these Web Components examples. + +[https://www.infragistics.com/webcomponents-grid-examples/home/inventory](https://www.infragistics.com/webcomponents-grid-examples/home/inventory) + +Each sample demonstrates the power of Ignite UI’s Web Components Grids, ensuring scalability, interactivity, and flexibility. Use them as a starting point to create scalable, customizable solutions. + +## Financial Portfolio App +Web Components Financial Portfolio App + + +**Description:** +The Financial Portfolio app in Web Components delivers a clear overview of assets, profits, and losses using a sleek, responsive interface and dynamic, interactive charts. Designed with the Bootstrap Light theme, it provides a professional look and ensures a consistent user experience. + +**Components Used:** +- Data Grid +- Avatar +- Button +- Icon +- Linear Bar +- Input Group +- Excel Exporter Service +- CSV Exporter Service + +**Features:** +- Row Selection +- Sorting +- Column Hiding +- Column Pinning +- Exporting +- Conditional Cell Styling +- Filtering + +--- + +## ERP/Inventory +Web Components ERP/Inventory example + + +**Description:** +Built with the Ignite UI for Web Components Hierarchical Grid and styled with the Material Light theme, the ERP/Inventory example app enables users to manage and monitor large product datasets efficiently. It allows businesses to keep track of quantities, locations, and product details without performance slowdowns. + +**Components Used:** +- Hierarchical Grid +- Data Chart +- Rating +- Dialog +- Badge +- Button +- Icon +- Excel Exporter Service +- CSV Exporter Service + +**Features:** +- Row Selection +- Sorting +- Filtering +- Column Moving +- Column Hiding +- Column Pinning +- Exporting + +--- + +## Org Chart/HR Portal +Web Components HR Portal Example App + + +**Description:** +The HR Portal sample app leverages the Ignite UI for Web Components Tree Grid to present and manage employee information in an intuitive, hierarchical view. With its focus on usability, the portal simplifies the management of company-wide personnel data. + +**Components Used:** +- Tree Grid +- Avatar +- Button +- Icon +- Paginator +- Excel Exporter Service +- CSV Exporter Service + +**Features:** +- Row Selection +- Sorting +- Excel Style Filtering +- Column Hiding +- Column Pinning +- Exporting +- Paging + +--- + +## Fleet Management System +Web Components Fleet Management System Example + + +**Description:** +This Fleet Management System showcases how the Ignite UI for Web Components Grid can power a detailed master-detail layout for operational tracking. This Web Components example app is tailored for managing fleet information, covering acquisition, maintenance, and performance details of each vehicle. + +**Components Used:** +- Grid +- Pie Chart +- Category Chart +- Card +- Geographic Map +- Overlay +- Avatar +- Badge +- Tabs +- Carousel +- Slide +- Divider +- Select +- Button +- Icon +- Excel Exporter Service +- CSV Exporter Service + +**Features:** +- Sorting +- Exporting +- Filtering +- Column Pinning +- Column Hiding + +--- + +## Sales Dashboard +Web Components Sales Dashboard Example App + + +**Description:** +This Web Components example app demonstrates how to visualize and analyze key sales metrics using the Pivot Grid from Ignite UI for Web Components. Designed for data-driven teams, it enables users to evaluate sales by product, region, and time, while spotting trends through powerful interactive filtering and pivoting. + +**Components Used:** +- Pivot Grid +- Pivot Data Selector +- Button +- Icon +- Toggle +- Tooltip +- Dropdown +- Excel Exporter Service +- CSV Exporter Service + +**Features:** +- Sorting +- Exporting +- Filtering +- Resizing +- Super Compact Mode diff --git a/src/views/home/home-view.scss b/src/views/home/home-view.scss index 542e8dc..e0764de 100644 --- a/src/views/home/home-view.scss +++ b/src/views/home/home-view.scss @@ -14,6 +14,7 @@ flex-direction: column; align-items: center; box-sizing: border-box; + igc-chip { --ig-chip-hover-background: var(--ig-gray-300); --ig-chip-focus-background: var(--ig-gray-300); @@ -37,6 +38,7 @@ justify-content: space-between; background-color: var(--ig-surface-500); box-sizing: border-box; + & a { text-decoration: none; display: block; @@ -149,9 +151,32 @@ } } -:-webkit-full-screen { +:fullscreen, +:-webkit-full-screen, +:host(:fullscreen), +:host(:-webkit-full-screen), +:host([data-browser-fullscreen]) { width: 100vw; height: 100vh; - overflow: auto; + display: flex; + flex-direction: column; background: white; } + +:host(:fullscreen) .demo-container, +:host(:-webkit-full-screen) .demo-container, +:host([data-browser-fullscreen]) .demo-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: stretch; +} + +:host(:fullscreen) .router-container, +:host(:-webkit-full-screen) .router-container, +:host([data-browser-fullscreen]) .router-container { + flex: 1; + display: flex; + overflow: auto; +} diff --git a/src/views/home/home-view.ts b/src/views/home/home-view.ts index 076d303..ebb854d 100644 --- a/src/views/home/home-view.ts +++ b/src/views/home/home-view.ts @@ -32,18 +32,17 @@ interface TabInfo { @customElement("home-view") export default class HomeView extends LitElement { - @query('#fullscreenElement') fullscreenElement!: HTMLElement; @property({ type: Boolean }) isFullscreen = false; @property({ type: Boolean }) isChartsSection = false; - @property({type: Array}) tabsGrids = [ + @property({ type: Array }) tabsGrids = [ { key: 'inventory' }, { key: 'hr-portal' }, { key: 'finance' }, { key: 'sales' }, { key: 'fleet' }, ]; - @property({type: Array}) tabsCharts = [ + @property({ type: Array }) tabsCharts = [ { key: 'column-chart' }, { key: 'bar-chart' }, { key: 'line-chart' }, @@ -51,8 +50,7 @@ export default class HomeView extends LitElement { { key: 'step-chart' }, { key: 'polar-chart' } ]; - @state() - private routeName: string = "inventory"; + @state() private routeName: string = "inventory"; public tabInfoGrids = new Map([ [ @@ -165,7 +163,7 @@ export default class HomeView extends LitElement { public tabInfo = this.tabInfoGrids; public activeTabs = this.tabsGrids; - + constructor() { super(); registerIconFromText("file_download", FILE_DOWNLOAD, "indigo_internal"); @@ -176,104 +174,86 @@ export default class HomeView extends LitElement { connectedCallback(): void { super.connectedCallback(); - + if (typeof window !== 'undefined') { window.addEventListener('vaadin-router-location-changed', this.updateCurrentPath); window.addEventListener('resize', this.onResize); // Initial setting of the correct route - const path = window.location.pathname; - this.routeName = this.extractRouteKey(path); - this.updateTabsBasedOnRoute(path); + this.updateTabsBasedOnRoute(window.location.pathname); } - + if (typeof document !== 'undefined') { document.addEventListener('fullscreenchange', this.onFullscreenChange); + document.addEventListener('webkitfullscreenchange', this.onFullscreenChange); } } - + disconnectedCallback(): void { super.disconnectedCallback(); - + if (typeof window !== 'undefined') { window.removeEventListener('vaadin-router-location-changed', this.updateCurrentPath); window.removeEventListener('resize', this.onResize); - this.updateTabsBasedOnRoute(window.location.pathname); } - if (typeof document !== 'undefined') { document.removeEventListener('fullscreenchange', this.onFullscreenChange); + document.removeEventListener('webkitfullscreenchange', this.onFullscreenChange); } } - private extractRouteKey(path: string): string { + private extractRouteKey(path: string) { // Get the part after '/home/', (for example 'charts/column-chart') - const base = path.split('/home/')[1] || ''; - return base; + return path.split('/home/')[1] || ''; } - + private updateCurrentPath = (_event: any) => { - // The full pathname -> like '/webcomponents-grid-examples/home/charts/line-chart' - const fullPath = window.location.pathname; - - // Extract the last segment as routeName for tab selection -> like 'line-chart' - const segments = fullPath.split('/').filter(Boolean); - const lastSegment = segments[segments.length - 1] || ''; - this.routeName = lastSegment; - - this.updateTabsBasedOnRoute(fullPath); + this.updateTabsBasedOnRoute(window.location.pathname); }; - + private onDownloadClick = (event: MouseEvent, tabName: string) => { event.preventDefault(); event.stopPropagation(); - const downloadLink = this.tabInfo.get(tabName)?.downloadLink; - if (typeof window !== 'undefined' && downloadLink) { - window.open(downloadLink, "_blank")?.focus(); - } + if (downloadLink) window.open(downloadLink, "_blank")?.focus(); }; - + private onViewMoreClick = (event: MouseEvent, tabName: string) => { event.preventDefault(); event.stopPropagation(); - const viewMoreLink = this.tabInfo.get(tabName)?.moreLink; - if (typeof window !== 'undefined' && viewMoreLink) { - window.open(viewMoreLink, '_blank')?.focus(); - } + if (viewMoreLink) window.open(viewMoreLink, "_blank")?.focus(); }; - + private async onToggleFullscreen() { - if (typeof document === 'undefined') return; + const el = this.fullscreenElement || this.shadowRoot?.host; if (!document.fullscreenElement) { - await this.fullscreenElement?.requestFullscreen?.(); + await el?.requestFullscreen?.(); } else { await document.exitFullscreen?.(); } } - - private onResize = () => { - if (typeof window === 'undefined' || typeof screen === 'undefined') return; - const isF11 = - window.innerWidth === screen.width && - window.innerHeight === screen.height; - - if (this.isFullscreen !== isF11) { - this.isFullscreen = isF11; + private onResize = () => { + const isFs = !!document.fullscreenElement || + (window.innerHeight === screen.height && window.innerWidth === screen.width); + if (this.isFullscreen !== isFs) { + this.isFullscreen = isFs; + this.requestUpdate(); } }; private onFullscreenChange = () => { - if (typeof document === 'undefined') return; - this.isFullscreen = !!document.fullscreenElement; + this.isFullscreen = !!document.fullscreenElement || + (window.innerHeight === screen.height && window.innerWidth === screen.width); + this.requestUpdate(); }; private updateTabsBasedOnRoute(url: string) { - this.routeName = url.replace(/^.*home\//, ''); - + const routeKey = this.extractRouteKey(url); + this.routeName = routeKey; + if (url.includes('charts')) { this.tabInfo = this.tabInfoCharts; this.activeTabs = this.tabsCharts; @@ -285,56 +265,52 @@ export default class HomeView extends LitElement { } } - private tabItemTemplate = (tabName: string) => { - const currentTabName = this.routeName.startsWith('charts/') - ? this.routeName.substring('charts/'.length) - : this.routeName; - - const isSelected = currentTabName === tabName; + private tabItemTemplate(tabName: string) { + const currentTabName = this.isChartsSection ? this.routeName.replace(/^charts\//, '') : this.routeName; + const isSelected = currentTabName === tabName; const fullTabKey = this.isChartsSection ? `charts/${tabName}` : tabName; const info = this.tabInfo.get(fullTabKey); - + return html`
-
+
${info?.title?.toUpperCase() ?? tabName}
`; - }; - - private tabInfoTemplate = (tabName: string, info: TabInfo | undefined) => { + } + private tabInfoTemplate(tabName: string, info: TabInfo | undefined) { return html`
${info?.title}
${info?.content}
- +
Theme: ${info?.theme}
Mode: ${info?.themeMode}
- +
- - + + Download - + + variant="outlined" + class="custom-button" + @click="${(e: MouseEvent) => this.onViewMoreClick(e, tabName)}" + > View More - +
- ${!this.isFullscreen ? html` -
- ${this.activeTabs.map( - (tab) => html` + ${!this.isFullscreen ? html` +
+ ${this.activeTabs.map(tab => html`
${this.tabItemTemplate(tab.key)}
- ` - )} -
- ` : ''} - + `)} +
+ ` : ''}
${this.tabInfoTemplate(this.routeName, this.tabInfo?.get(this.routeName))}
@@ -380,5 +353,6 @@ export default class HomeView extends LitElement {
`; } + static styles = unsafeCSS(styles); }