+ // [col.field]})
${col.field}
+ //
+ // `;
+ }
}
- button:hover {
- border-color: #646cff;
+
+ public currencyFormatter(value: any, field: string) {
+ if (value === undefined || value === null){
+ return "";
+ }
+ const valueConfig = this.pivotGrid.pivotConfiguration.values.find(value => value.member === field);
+ if (!valueConfig || valueConfig.aggregate.key === "COUNT") {
+ return value;
+ }
+ const roundedValue = (Math.round(value * 100) / 100).toString();
+ const numLength = roundedValue.split('').length;
+ const separatedValue = roundedValue.split('').reverse()
+ .reduce((prev, curr, index) => prev + curr + ((index + 1) % 3 === 0 && index < numLength - 1 ? ",": ""))
+ .split('').reverse().join("");
+ return "$" + separatedValue;
}
- button:focus,
- button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+
+ render() {
+ configureTheme("indigo");
+
+ return html`
+
+
+
+
+ `;
}
- @media (prefers-color-scheme: light) {
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+ static styles = unsafeCSS(salesGridStyles);
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "app-sales-grid": SalesGrid;
}
- `;
}
diff --git a/projects/sales-grid/src/services/data.service.ts b/projects/sales-grid/src/services/data.service.ts
new file mode 100644
index 0000000..8ea3154
--- /dev/null
+++ b/projects/sales-grid/src/services/data.service.ts
@@ -0,0 +1,20 @@
+class DataService {
+ public DATA_URL = 'https://www.infragistics.com/grid-examples-data/data/sales/sales.json';
+
+ public async getSalesData() {
+ try {
+ const response = await fetch(this.DATA_URL);
+ if (!response.ok) {
+ console.error(response.statusText);
+ return [];
+ }
+
+ const json = await response.json();
+ return json;
+ } catch(error: any) {
+ console.error(error.message);
+ }
+ }
+}
+
+export const SalesDataService: DataService = new DataService();
\ No newline at end of file
diff --git a/projects/sales-grid/src/styles/index.css b/projects/sales-grid/src/styles/index.css
new file mode 100644
index 0000000..a950b4c
--- /dev/null
+++ b/projects/sales-grid/src/styles/index.css
@@ -0,0 +1,19 @@
+html,
+body {
+ height: 100%;
+}
+
+html {
+ box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+ margin: 0;
+}
diff --git a/projects/sales-grid/src/styles/utils.scss b/projects/sales-grid/src/styles/utils.scss
new file mode 100644
index 0000000..28e2924
--- /dev/null
+++ b/projects/sales-grid/src/styles/utils.scss
@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "igniteui-theming" as *;
+
+@function is-root() {
+ @each $selector in & {
+ @return $selector == null;
+ }
+}
+
+@mixin theme($palette, $elevations, $typeface, $type-scale, $variant) {
+ $root: is-root();
+ $scope: if($root, ":root", "&");
+
+ #{$scope} {
+ --ig-theme: #{map.get($palette, "_meta", "variant")};
+ --ig-theme-variant: #{$variant};
+ --ig-spacing: 1;
+ --ig-spacing-inline: 1;
+ --ig-spacing-block: 1;
+ --ig-size-small: 1;
+ --ig-size-medium: 2;
+ --ig-size-large: 3;
+ --ig-scrollbar-size: #{rem(16px)};
+ }
+
+ #{$scope}[dir="rtl"] {
+ --ig-dir: -1;
+ }
+
+ @include palette($palette);
+ @include elevations($elevations);
+ @include typography($font-family: $typeface, $type-scale: $type-scale);
+}
diff --git a/projects/sales-grid/vite.config.ts b/projects/sales-grid/vite.config.ts
new file mode 100644
index 0000000..2fb9181
--- /dev/null
+++ b/projects/sales-grid/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ "igniteui-theming": new URL("./node_modules/igniteui-theming", import.meta.url).pathname,
+ },
+ },
+ plugins: [
+ viteStaticCopy({
+ targets: [
+ {
+ src: "node_modules/igniteui-webcomponents-grids/grids/themes/light/indigo.css",
+ dest: "themes",
+ },
+ ],
+ }),
+ ],
+});
diff --git a/src/views/sales/sales-view.scss b/src/views/sales/sales-view.scss
new file mode 100644
index 0000000..35db6f7
--- /dev/null
+++ b/src/views/sales/sales-view.scss
@@ -0,0 +1,13 @@
+:host {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+iframe {
+ width: 100%;
+ height: 100%;
+ border: 0;
+}
diff --git a/src/views/sales/sales-view.ts b/src/views/sales/sales-view.ts
index 575895d..85f9efd 100644
--- a/src/views/sales/sales-view.ts
+++ b/src/views/sales/sales-view.ts
@@ -1,81 +1,25 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
import { customElement } from "lit/decorators.js";
import "../../../projects/sales-grid/src/sales-grid";
+import namedStyles from "./sales-view.scss?inline";
+import sharedStyles from "../../shared/styles.scss?inline";
+
@customElement("sales-view")
export default class SalesView extends LitElement {
- render() {
- return html`
+
+
+
+
+
+
+
+
+
+
`;
+ }
- @media (prefers-color-scheme: light) {
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
- }
- `;
+ static styles = [unsafeCSS(namedStyles), unsafeCSS(sharedStyles)];
}
diff --git a/vite.config.ts b/vite.config.ts
index cef528a..ed497c8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -31,6 +31,10 @@ export default defineConfig(() => {
src: "./projects/fleet-management-grid/public/*",
dest: "",
},
+ {
+ src: "./projects/sales-grid/public/*",
+ dest: "",
+ },
{
src: "node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css",
dest: "themes",
@@ -47,6 +51,10 @@ export default defineConfig(() => {
src: "node_modules/igniteui-webcomponents-grids/grids/themes/dark/material.css",
dest: "themes/dark",
},
+ {
+ src: "node_modules/igniteui-webcomponents-grids/grids/themes/light/indigo.css",
+ dest: "themes",
+ },
],
}),
],