diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000000..afab8c6a73 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +*.md text eol=lf +*.mdx text eol=lf diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index a10fbf4bec..e6aed90770 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -8,9 +8,11 @@ ### 7. [Sample / Code View Configuration](#code-view-configuration) ### 8. [PlatformBlock usage](#platform-block) ### 9. [ApiLink usage](#api-link) - ### 10. [Creating shared help topics](#creating-shared-help-topics) - ### 11. [Updating of Data Visualization related topics](#updating-of-data-visualization-related-topics) - ### 12. [Adding of images](#adding-of-images-in-the-topic) + ### 10. [Checking MDX API Links](#checking-api-links) + ### 11. [ApiLink registry workflow](#api-link-registry-workflow) + ### 12. [Creating shared help topics](#creating-shared-help-topics) + ### 13. [Updating of Data Visualization related topics](#updating-of-data-visualization-related-topics) + ### 14. [Adding of images](#adding-of-images-in-the-topic) # Repository overview @@ -251,7 +253,7 @@ Usage: | `height` | no | `400` | Height of the sample widget in pixels (numeric JSX expression, e.g. `{600}`). | | `alt` | no | `""` | Accessible label for the iframe. Use the `{Platform}` token so it resolves per-platform. | | `lob` | no | `false` | Use `lobDemosBaseUrl` as the base URL (for LOB / grid-dynamic demos). | -| `dv` | no | `false` | Force `dvDemosBaseUrl` for samples whose path does not start with a recognised DV prefix. | +| `dv` | no | `false` | Force `dvDemosBaseUrl` for samples whose path does not start with a recognized DV prefix. | | `crm` | no | `false` | Use `crmDemoBaseUrl` (for CRM demo samples). | | `iframeOnly` | no | `false` | Render only the iframe — hides the navbar, code tabs, and live-edit footer. | | `fullscreenBtn` | no | `false` | When used together with `iframeOnly={true}`, adds an "Open in full screen" button below the iframe. | @@ -312,8 +314,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; Basic syntax: ```mdx - - + + ``` @@ -321,21 +323,122 @@ Key attributes: | Attribute | Required | Notes | |---|---|---| -| `pkg` | yes | Package key: `"grids"`, `"core"`, `"charts"`, `"gauges"`, `"excel"`, etc. | +| `pkg` | no | Package key such as `"core"`, `"grids"`, `"charts"`, `"inputs"`, `"excel"`, or `"geo-core"`. Add it only when the registry has multiple valid matches and the package must be explicit. | | `type` | yes | Short type name **without** platform prefix — e.g. `"Grid"`, not `"IgrGrid"`. | -| `kind` | for non-classes | TypeDoc kind: omit for classes. Use `"enum"`, `"interface"`, or `"typeAlias"` otherwise. | +| `kind` | for non-classes | API kind. Omit for classes. Use `"enum"`, `"interface"`, `"type"`, `"function"`, or `"variable"` when the registry symbol is not a class. | | `member` | no | Property or method name for anchor links. | | `prefixed` | no | Default `true` (adds `Igr`/`Igx`/`Igc`/`Igb`). Set `{false}` for excel types and when `type` already contains `{ComponentName}`. | -| `exclude` | no | Comma-separated platforms to show as inline code instead of a link (e.g. `exclude="Blazor"`). Use when the type does not exist on those platforms. | +| `suffix` | no | Default `true` for component-style symbols. Set `{false}` for utility classes, strategy classes, and excel types that do not have an Angular `Component` suffix. | | `label` | no | Override the display text. | +`ApiLink` resolves through the generated API symbol registry. Keep links minimal when the registry can resolve a single target: + +```mdx + + +``` + +Add `pkg` only when the same symbol exists in more than one package: + +```mdx + + + +``` + +Add `kind` only when the intended symbol is not a class, or when the same name exists as multiple API kinds: + +```mdx + +``` + +If one `ApiLink` cannot be correct for all platforms, split the content with `PlatformBlock` instead of forcing one set of props to mean different targets. + +Member lookup is case-insensitive, but after a member is found the registry is the source of truth for the rendered member name and anchor. + Also declare the types in the frontmatter so the auto-generated API reference grid works: ```yaml mentionedTypes: ["Grid", "Column"] ``` -For a complete reference see [AI-AGENT-API-LINKS.md](../docs/xplat/AI-AGENT-API-LINKS.md). +For a complete editing reference see [AI-AGENT-API-LINKS.md](../docs/xplat/AI-AGENT-API-LINKS.md). For the registry and checker flow, see [API-LINK-WORKFLOW.md](../API-LINK-WORKFLOW.md). + +# Checking MDX API Links + +Use the root `check-mdx-links` scripts to validate `ApiLink` references: + +| Scope | Command | +|---|---| +| All MDX sources | `npm run check-mdx-links` | +| Angular docs | `npm run check-mdx-links:angular` | +| React xplat docs | `npm run check-mdx-links:react` | +| Web Components xplat docs | `npm run check-mdx-links:wc` | +| Blazor xplat docs | `npm run check-mdx-links:blazor` | +| Markdown reports | `npm run check-mdx-links:report:` | +| Resolve-only broken-link reports | `npm run check-mdx-links:broken:` | + +These scripts also check for ambiguous `ApiLink` references. If a symbol exists in more than one registry package and the link does not specify enough information to choose safely, the script prints an **Ambiguous ApiLinks** section, writes a `reports/api-link-ambiguity-report*.md` file, and exits with a failure. + +Fix ambiguous links by adding a specific `pkg` or `kind` prop. If the correct target differs by platform, wrap platform-specific links in `PlatformBlock`. + +Angular checks run the same generated-content sync used by Angular builds before scanning `docs/angular/src/content`. React, Web Components, and Blazor checks generate the selected platform output first, then scan raw xplat MDX files filtered through each language `toc.json` platform exclusions. This keeps report paths pointed at raw xplat source files while avoiding topics excluded from that platform. + +Reports are written under `reports/`: + +| Report | Meaning | +|---|---| +| `api-link-ambiguity-report*.md` | Registry duplicate keys and currently referenced ambiguous `ApiLink`s. | +| `mdx-broken-links*.md` | Resolve-only broken or unresolved `ApiLink`s. | +| `mdx-link-report*.md` | Full URL check output when the non-broken report scripts are used. | + +Referenced ambiguities should be fixed before merging. Registry duplicate keys can remain in the report when no current MDX link references them. + +# ApiLink registry workflow + +The API registry flow is: + +```mermaid +flowchart TD + A[api-docs] --> B[Generate API docs] + B --> C[Generate API registry JSON] + C --> D[Sync into igniteui-documentation] + D --> E[ApiLink resolves type/member from registry] + E --> F{Resolved?} + + F -->|Yes| G[Render API link] + G --> H[Link checker crawls URL] + H --> I[Reported if unreachable / soft 404] + + F -->|No| J[Render highlighted text only] + J --> K[Reported as unresolved] +``` + +The checker also detects duplicate registry matches: + +```mermaid +flowchart TD + A[MDX ApiLink] --> B[Resolve candidate names] + B --> C[Apply platform prefix/suffix rules] + C --> D[Apply pkg and kind filters] + D --> E[Match type in registry] + E --> F[Match member case-insensitively] + F --> G{How many registry symbols match?} + + G -->|0| H[Unresolved ApiLink] + G -->|1| I[Resolved ApiLink] + G -->|2 or more| J[Ambiguous ApiLink] + + H --> K[Write broken report] + I --> L[Use canonical registry symbol and member] + J --> M[Write ambiguity report and fail when enabled] +``` + +Registry snapshots live under `src/data/api-link-index//staging-latest.json`. The runtime `ApiLink` component and the checker both use these registries to choose the final URL. + +Only referenced ambiguities are blocking. Duplicate registry keys listed in the report are informational until an MDX file references them without enough props to choose the intended symbol. + +For the full workflow, package mappings, generated-content behavior, and practical fix loop, see [API-LINK-WORKFLOW.md](../API-LINK-WORKFLOW.md). # Creating shared help topics @@ -369,4 +472,4 @@ Usage: - Use the `@xplat-images` alias which resolves to `docs/xplat/public/images/`. - Always provide a meaningful `alt` attribute. - Use `{Platform}` in the `alt` text when the image is platform-generic (e.g. `alt="{Platform} Grid Overview"`). -- Responsive sizing and lazy loading are handled automatically by Astro — no extra classes or `data-srcset` attributes are needed. \ No newline at end of file +- Responsive sizing and lazy loading are handled automatically by Astro — no extra classes or `data-srcset` attributes are needed. diff --git a/.github/skills/docfx-sync/SKILL.md b/.github/skills/docfx-sync/SKILL.md index f11b7a2613..de031315ea 100644 --- a/.github/skills/docfx-sync/SKILL.md +++ b/.github/skills/docfx-sync/SKILL.md @@ -71,11 +71,11 @@ These look like: |---|---| | `.../classes/igx{foo}component.html` | `` | | `.../classes/igx{foo}component.html#{member}` | `` | -| `.../classes/igx{foo}directive.html` | `` | -| `.../interfaces/i{foo}.html` | `` | +| `.../classes/igx{foo}directive.html` | `` | +| `.../interfaces/i{foo}.html` | `` | | `.../enums/igx{foo}.html` | `` | -| `.../enums/{foo}.html` (no igx) | `` | -| `.../functions/{foo}.html` | `` | +| `.../enums/{foo}.html` (no igx) | `` | +| `.../functions/{foo}.html` | `` | **Prop reference:** @@ -83,15 +83,12 @@ These look like: |---|---|---| | `type` | required | Short name, no `Igx` prefix — `"Grid"` not `"IgxGrid"` | | `kind` | `"class"` | Set `"interface"`, `"enum"`, `"type"`, `"function"`, `"variable"` as appropriate | -| `suffix` | `true` | `false` for directives, utilities, interfaces (anything that isn't a `Component`) | -| `prefixed` | `true` | `false` for interfaces (`IFoo`), enums/functions with no `Igx` prefix | | `member` | none | Property or method name from the URL anchor | | `label` | derived | Only when display text differs from the type name (e.g. `label="igx-grid"` for selector display) | | `pkg` | `"core"` | Angular docs **rarely** need this — use `pkg="charts"` for chart types, etc. | -**Important — `suffix={false}` traps:** -- `InputGroup`, `Checkbox`, `DropDown`, `Overlay`, `List`, `Avatar`, `Icon`, `Badge`, `Button`, `Card` — these commonly appear **without** `Component` suffix in prose. Restore the `suffix={false}` if master had it. -- `Combo` in overlay note context → `suffix={false}` (the note refers to `IgxCombo` selector, not `IgxComboComponent`) +The generated ApiLink registry resolves prefix/suffix differences. Do not add +`prefixed={false}` or `suffix={false}` for new links. --- @@ -134,7 +131,7 @@ JP content is at `docs/angular/src/content/jp/`. Apply the same fixes as EN. The 1. **Do not add `pkg=` to angular-specific files** unless the type is from a sub-package (charts, gauges, maps, etc.). Angular docs default to `pkg="core"` which resolves to `igniteui-angular`. -2. **Do not remove `suffix={false}` or `prefixed={false}`** from existing ApiLink components — these were added deliberately and are often required for the link to resolve correctly. +2. **Do not add legacy prefix/suffix override props**. The registry should resolve the actual API symbol name. 3. **Do not use `.md` extensions** in links — the remark plugin does not handle them and produces dead links at build time. diff --git a/.github/skills/xplat-docs-api-links/SKILL.md b/.github/skills/xplat-docs-api-links/SKILL.md index 55e37a58af..9e721c7235 100644 --- a/.github/skills/xplat-docs-api-links/SKILL.md +++ b/.github/skills/xplat-docs-api-links/SKILL.md @@ -1,485 +1,72 @@ --- name: xplat-docs-api-links -description: "Reference guide for adding and fixing ApiLink components in xplat MDX documentation files. Covers pkg, type, kind, member, prefixed, suffix, and label props; platform prefix mapping (Igr/Igx/Igc/Igb); kind values from TypeDoc JSON; utility class suffix rules; excel library special rules (prefixed={false}, IgniteUI.Blazor.Documents.Excel); dock manager slot members; and MDX parse error from JSX in comments. Use when an agent needs to add, fix, or audit ApiLink calls in MDX files." +description: "Reference guide for adding, fixing, and auditing ApiLink components in xplat MDX using the generated api-docs registry. Covers clean ApiLink props, pkg/kind disambiguation, member checks, PlatformBlock use, and registry reports." user-invocable: true --- -# AI Agent Guide — Updating ApiLink in MDX Files +# Xplat ApiLink Guide -## Context +## Preferred Markup -The MDX files in this folder are shared across four platforms: **Angular, React, WebComponents, Blazor**. The `` component resolves to the correct platform-specific URL at build time from a single MDX source. - -> **Key insight:** The `type=`, `member=`, `pkg=`, and `kind=` attributes are **identical for all platforms**. Fixing an ApiLink fixes it for all four platforms simultaneously. Only the generated URL differs per platform. - ---- - -## Step 1 — Locate the API Source Data - -The `api-docs` project (sibling to this docs repository) contains TypeDoc JSON files that are the **authoritative source** for which class owns which member. Find the project by its folder name `api-docs` — the exact path on disk depends on the machine. -Alternatively get the source from this github repository - https://github.com/IgniteUI/api-docs - -### Data files by platform - -``` -api-docs/src/data/ - react/ - igniteui-react-grids.json ← grids (Grid, Column, ColumnGroup, …) - igniteui-react.json ← core components - igniteui-react-17.5.0.json - igniteui-react-18.0.0.json - igniteui-react-dockmanager.json - angular/ - igniteui-angular-21.0.x.json ← Angular grids + core (same package) - igniteui-angular-9.0.x.json - igniteui-angular-core.json - igniteui-angular-inputs.json - igniteui-angular-layouts.json - web-components/ - igniteui-web-components-grids.json - igniteui-web-components.json - igniteui-webcomponents-charts.json - igniteui-grid-lite.json - blazor/ - IgniteUI.Blazor.25.1.x.json - IgniteUI.Blazor.GridLite.25.1.x.json -``` - -> **Use the React grids JSON as your primary reference.** The class hierarchy and member names are consistent across all platforms. If a member is on `IgrColumn` in React, it is on `IgxColumn` in Angular and `IgcColumn` in WebComponents. The MDX `type=` uses the short unprefixed name (`Column`), so the same fix covers all platforms. - -### JSON structure - -Each JSON file is a TypeDoc reflection tree. Top-level `children` contains all exported symbols. Relevant `kind` values: - -| kind value | Symbol type | -|---|---| -| `8` | Enum | -| `128` | Class | -| `256` | Interface | -| `4194304` | Type alias | - ---- - -## Step 2 — Understand the MDX ApiLink Syntax - -```mdx - -``` - -| Attribute | Required | Notes | -|---|---|---| -| `pkg` | yes | Package key: `"grids"`, `"core"`, `"charts"`, etc. Same key for all platforms. | -| `type` | yes | Short type name **without** platform prefix. E.g. `"Column"`, not `"IgrColumn"`. | -| `kind` | **yes*** | Must match the TypeDoc symbol kind. Default is `"class"` — omit only for classes. **Always check and set this explicitly for non-class types.** | -| `member` | no | Property or method name for the anchor. | -| `prefixed` | no | Default `true` — adds `Igr`/`Igx`/`Igc`/`Igb` automatically. Set `false` when `type` contains `{ComponentName}` or the name is already fully-qualified. **Always `false` for excel types.** | -| `suffix` | no | Default `true` — appends `Component` suffix for Angular DV packages. Set `false` for utility classes (FilteringOperand, SortingStrategy, SummaryOperand, all excel types). | -| `exclude` | no | Comma-separated platform list (`"Angular"`, `"Blazor"`, etc.). On listed platforms the symbol renders as inline code (backticks) instead of a link. Use when the type/member genuinely **does not exist** on those platforms. **Preferred over wrapping a single `` in a ``** for the sole purpose of platform-omission. | -| `label` | no | Override display text. | - -> **Critical rule:** NEVER replace an existing `` with backtick text. If a URL is broken on certain platforms, add `exclude="Platform"` to the tag. Only backtick text is acceptable when the type has no TypeDoc page on *any* platform AND has never been an ApiLink in the content history. When in doubt, keep the ApiLink — the broken link will be caught by `check-api-links.mjs` and fixed via `apply-excludes.mjs`. - -### Platform prefix mapping - -| Platform | Prefix | Example (type="Column") | -|---|---|---| -| React | `Igr` | links to `IgrColumn` | -| Angular | `Igx` | links to `IgxColumn` | -| WebComponents | `Igc` | links to `IgcColumn` | -| Blazor | `Igb` | links to `IgbColumn` | - ---- - -## Step 3 — The Correct `type=` for Common Members - -Most members appear under the same logical class across all platforms. The corrections below apply to all platforms. - -### Grid-level members — `type="{ComponentName}" prefixed={false}` - -These are on `IgrGridBaseDirective` / `IgrGrid` in React (equivalents in other platforms): - -``` -addRow, advancedFilteringExpressionsTree, allowAdvancedFiltering, allowFiltering, -batchEditing, beginAddRowById, beginAddRowByIndex, cellMergeMode, cellSelection, -clipboardOptions, closeAdvancedFilteringDialog, columnSelection, columnWidth, -deleteRow, deselectAllRows, disableSummaries, enableSummaries, -excelStyleHeaderIconTemplate, filterMode, filterStrategy, filteringExpressionsTree, -findNext, height, lastSearchInfo, mergeStrategy, moving, openAdvancedFilteringDialog, -pinRow, pinning, primaryKey, rowClasses, rowDraggable, rowEditable, rowHeight, -rowSelection, rowStyles, selectAllRows, selectedRows, showSummaryOnCollapse, -sort, sortStrategy, sortingExpressions, summaryCalculationMode, summaryPosition, -summaryRowHeight, toolbar, totalItemCount, unpinRow, updateCell, updateRow, width -``` - -### Column members — `type="Column"` (drop `prefixed={false}`) - -On `IgrColumn` in React / `IgxColumn` in Angular / `IgcColumn` in WebComponents / `IgbColumn` in Blazor: - -``` -cellClasses, cellStyles, colEnd, colStart, dataType, disableHiding, disablePinning, -editable, filterable, filteringIgnoreCase, formatter, groupable, hasSummary, -header, hidden, maxWidth, minWidth, pinned, pipeArgs, resizable, -rowEnd, rowStart, searchable, selectable, sortable, sortingIgnoreCase, -summaryFormatter, visibleWhenCollapsed -``` - -### ColumnGroup-only members — `type="ColumnGroup"` (drop `prefixed={false}`) - -Only on `IgrColumnGroup` (not `IgrColumn`): - -``` -collapsible, collapsibleIndicatorTemplate, expanded -``` - -### Row members — `type="RowDirective"` (drop `prefixed={false}`) - -When the prose refers to a **row object** (not a column): - -``` -pinned, pin, unpin, data, index, key, delete, update, inEditMode, expanded -``` - -> **Context matters:** `pinned` is on **both** `IgrColumn` and `IgrRowDirective`. Read the surrounding sentence — "column pinning" → `type="Column"`, "row pinning … the Row" → `type="RowDirective"`. - -### Special types - -| Member(s) | `type=` | `kind=` | Notes | -|---|---|---|---| -| `enabled`, `copyHeaders`, `copyFormatters`, `separator` | `ClipboardOptions` | `"interface"` | Clipboard options interface | -| `editValue` | `CellType` | `"interface"` | Cell in edit mode | -| `validation` | `CellType` or `RowType` | `"interface"` | Read context to decide | -| `getState`, `applyState`, `getStateAsString`, `applyStateFromString` | `GridState` | `"class"` | State persistence component | -| `freezeHeaders`, `ignoreMultiColumnHeaders` | `ExporterOptionsBase` | `"class"` | Exporter options | -| `perPage` | `Paginator` | `"class"` | Pagination component | -| `chunkSize`, `startIndex` | `ForOfState` | `"class"` | Virtual scrolling state | -| `caseSensitive`, `exactMatch` | `BaseSearchInfo` | `"class"` | Search API parameters | -| `insertAtIndex` in column pin event | `PinColumnEventArgsDetail` | `"class"` | Pin order change event arg | -| `insertAtIndex` in row pin event | `PinRowEventArgsDetail` | `"class"` | Row pin order change event arg | - ---- - -## Step 4 — Always Verify and Set `kind=` - -The `kind=` attribute maps directly to the URL segment (`/classes/`, `/interfaces/`, `/enums/`, `/types/`). The wrong `kind=` produces a **404**. The default is `"class"` — only omit `kind=` when you are certain the type is a class. - -### How to determine `kind` from the TypeDoc JSON - -Check the `kind` field on the top-level symbol in the JSON: - -| JSON `kind` value | MDX `kind=` | -|---|---| -| `128` | `"class"` *(default — can be omitted)* | -| `256` | `"interface"` — **must set explicitly** | -| `8` | `"enum"` — **must set explicitly** | -| `4194304` | `"type"` — **must set explicitly** | -| `64` | `"function"` — **must set explicitly** | -| `32` | `"variable"` — **must set explicitly** | - -### Examples by kind +Use unprefixed TypeDoc names and let the registry resolve package, kind, prefix, +suffix, URL, and member anchors: ```mdx - - - - - - - - - - - - - - + + + ``` -### Agent rule: check `kind` before writing every ApiLink - -Before writing or fixing any ``: -1. Look up the symbol in the TypeDoc JSON. -2. Check its `kind` value. -3. If `kind != 128`, set `kind=` explicitly. -4. Never assume `"class"` without verifying. +## Props ---- +- `type`: required unprefixed symbol name. +- `member`: optional member/property/method/enum value. +- `label`: optional display text. +- `pkg`: disambiguation only. Add it when `check-mdx-links` reports that the same symbol exists in multiple packages. +- `kind`: use for Sass (`kind="sass"`) or when the registry report proves a TypeDoc symbol needs narrowing. -## Step 5 — The `prefixed` Rule +Do not add `exclude`, `excludePrefixFor`, or `excludeSuffixFor`. -The `prefixed` prop (default `true`) controls whether the platform class prefix (`Igr`/`Igx`/`Igc`/`Igb`) is prepended to `type` automatically. +Avoid adding `prefixed={false}` or `suffix={false}` in new MDX. Those are legacy +fallback overrides, not the normal registry-based workflow. -**Keep `prefixed={false}`** when: -- `type="{ComponentName}"` — the template variable already expands to the full prefixed class name at build time (e.g. `IgrGrid`) -- The type name is already fully qualified with a prefix (e.g. `"ExcelExporterService"` — Angular-only service) -- The symbol genuinely has no platform prefix (standalone functions, certain enums used as literals) -- **All excel library types** — `Workbook`, `Worksheet`, `WorksheetTable`, etc. never have a platform prefix +## PlatformBlock -**Remove `prefixed={false}` (use the default)** when: -- You change `type` from `"{ComponentName}"` to a concrete short name like `"Column"`, `"ColumnGroup"`, `"GridState"`, etc. -- The prefix will be added automatically: `Column` → `IgrColumn` (React), `IgxColumn` (Angular), `IgcColumn` (WebComponents), `IgbColumn` (Blazor) - -### Examples +Use `PlatformBlock` only when the visible content or actual API symbol differs by +platform: ```mdx - - - - - - - + + + - - - - - - + + + ``` ---- - -## Step 5b — The `suffix` Rule (Angular Utility Classes) +Do not use PlatformBlock just to work around prefix/suffix/package URL rules. +Those should be handled by the registry or by `pkg` disambiguation. -Angular's `grids` package appends `Component` to all **UI component** class names in the TypeDoc URL: -`IgxGrid` → `IgxGridComponent`, `IgxColumn` → `IgxColumnComponent`. +## Validation -**Utility and strategy classes do NOT carry this suffix** and will produce a 404 if the suffix is appended. - -### Add `suffix={false}` for utility / non-component classes - -```mdx - - +Run registry checks before making manual API-link assumptions: - - -``` - -### Use PlatformBlock when only some platforms use the suffix or prefix - -When `suffix={false}` or `prefixed={false}` is correct for **specific platforms only**, do **not** put that prop on a shared top-level ApiLink. Wrap each variant in a `PlatformBlock` so every platform gets exactly the ApiLink shape it needs: - -```mdx - - +```bash +npm run check-mdx-links:broken:angular +npm run check-mdx-links:broken:react +npm run check-mdx-links:broken:wc +npm run check-mdx-links:broken:blazor ``` -Use the same pattern when only some platforms need `prefixed={false}`: - -```mdx - -``` - -> **Do not use `excludeSuffixFor` or `excludePrefixFor` in MDX.** They should be migrated to explicit `PlatformBlock` variants. - -> **Decision guide**: -> - Symbol **doesn't exist** on a platform → `exclude="Platform"` -> - Symbol exists but URL has wrong suffix on some platforms → `PlatformBlock` variants with `suffix={false}` only in the affected platform block -> - Symbol exists but URL has wrong prefix on some platforms → `PlatformBlock` variants with `prefixed={false}` only in the affected platform block -> - `suffix={false}` / `prefixed={false}` → removes suffix/prefix globally (all platforms) - -### When to use PlatformBlock for ApiLinks with different attributes - -When two platforms require **different attribute values** (including `suffix`, `prefixed`, `kind`, `pkg`, or `type` differences), wrap **both** ApiLinks in their own `` blocks. - -#### Anti-pattern (BUG — produces duplicate output on Blazor) - -```mdx - - -``` - -The `exclude="Blazor"` prop causes the first ApiLink to render as **backtick text** on Blazor (not hidden — just degraded to inline code). The PlatformBlock then renders the second ApiLink as a real link. Result: on Blazor the user sees both a broken inline-code snippet and a working link side by side. - -#### Correct pattern — both in PlatformBlocks - -```mdx - - -``` - -#### When to use which approach - -| Difference between platforms | Solution | -|---|---| -| Only `suffix` differs (e.g. one platform has no `Component` suffix) | Two ``-wrapped `` variants; put `suffix={false}` only in the affected block | -| Only `prefix` differs | Two ``-wrapped `` variants; put `prefixed={false}` only in the affected block | -| Type doesn't exist on a platform at all | Single `` with `exclude="Platform"` | -| `kind` differs (e.g. `interface` on Angular/React/WC, `class` on Blazor) | Two ``-wrapped `` tags | -| `kind` AND `suffix` differ | Two ``-wrapped `` tags | -| Any combination of multiple attribute differences | Two ``-wrapped `` tags | - -> **Rule:** Never combine `exclude="Platform"` on one ApiLink with a `` wrapping another ApiLink for the **same type**. The `exclude` prop does NOT hide the tag — it degrades it to inline code, producing duplicate visible output. - -### Classes that NEED `suffix={false}` - -- All `*FilteringOperand` classes: `BooleanFilteringOperand`, `NumberFilteringOperand`, `StringFilteringOperand`, `DateFilteringOperand`, `DateTimeFilteringOperand`, `TimeFilteringOperand` -- All `*SummaryOperand` classes: `SummaryOperand`, `NumberSummaryOperand`, `DateSummaryOperand` -- Strategy classes: `DefaultSortingStrategy`, `NoopSortingStrategy`, `NoopFilteringStrategy`, `GridSortingStrategy` -- Any class that is instantiated in code (not placed in a template) - -### Classes that keep the default (`suffix` omitted or `true`) - -- UI component classes: `Column`, `ColumnGroup`, `Grid`, `TreeGrid`, `HierarchicalGrid` -- Any class that maps to a rendered element (``, ``, etc.) - -### Rule of thumb - -> If you call it in code like `StringFilteringOperand.instance()` → needs `suffix={false}`. -> If you put it in a template like `` → keep the default. - ---- - -## Step 6 — Angular-Only Members - -Some members exist only in Angular and have no equivalent in React/WebComponents/Blazor. These are typically: -- Angular template directives (`cellEditor`, `cellEditorExit`, `rowEdit`, `rowEditEnter`, etc. — Angular uses event binding syntax `(rowEdit)`) -- Angular services (`ExcelExporterService`, `PdfExporterService`) -- Angular reactive forms integration (`formGroupCreated`, `markAsTouched`) - -For these, keep `type="{ComponentName}"` with `prefixed={false}`. The React JSON will not have them (they appear as `onRowEdit`, `onCellEdit`, etc. in React). This is expected — **do not treat "NOT IN JSON" as an error** for these cases. - -React renames all events with an `on` prefix: `rowEdit` → `onRowEdit`, `columnPin` → `onColumnPin`, `contextMenu` → `onContextMenu`, etc. - ---- - -## Step 7 — Excel Library Types - -Excel library types (`Workbook`, `Worksheet`, `WorksheetTable`, `WorksheetCell`, `Formula`, `DisplayOptions`, `SortSettings`, etc.) are utility classes — they carry **no platform prefix** and **no `Component` suffix** on any platform. - -**Always** use `prefixed={false}` for `pkg="excel"`: - -```mdx - - - -``` - -The Blazor excel package is **not** the main `IgniteUI.Blazor` package — it is `IgniteUI.Blazor.Documents.Excel`. This is already configured in `platform-context.ts`. Do not change it to `IgniteUI.Blazor`. - -### `platform-context.ts` excel entry (Blazor — correct) -```typescript -excel: { - docRoot: 'https://staging.infragistics.com/blazor-apis-new/blazor/IgniteUI.Blazor.Documents.Excel/25.1.x', - packageId: 'IgniteUI.Blazor.Documents.Excel', - noPackagePrefix: true, - preserveCase: true, - pascalCaseMembers: true -} -``` - -Do **not** add `classSuffix: 'Component'` to the `excel` entry for any platform. - ---- - -## Step 7b — Dock Manager Slot Members - -Dock manager slot names are members of the `DockManager` class, in `pkg="core"`: - -```mdx - - - - - - - - - - -``` - -WC API reference: `https://staging.infragistics.com/wc-apis-new/wc/igniteui-dockmanager/latest/classes/IgcDockManagerComponent/` - ---- - -## Step 7c — MDX Parse Error: JSX in Comments - -JSX expressions (`{500}`, `{true}`) inside `{/* */}` MDX comments cause: -`Cannot read properties of undefined (reading 'start')` - -Fix: replace JSX numeric props with string values inside comments: - -```mdx -{/* Bad */} -{/* */} - -{/* Good */} -{/* */} -``` - ---- - -## Step 8 — Fix Pattern - -### Column-level fix - -Before: -```mdx - -``` - -After: -```mdx - -``` - -### Interface fix - -Before: -```mdx - -``` - -After: -```mdx - -``` - -### Wrong class fix - -Before: -```mdx - -``` - -After: -```mdx - -``` - ---- - -## Step 9 — Adding API Reference Entries - -If a page references a type not yet in `## API References`, add individual `` tags — one per type: - -```mdx -## API References - - - - - -``` - -Rules: -- One `` per type — no arrays -- Use `prefixed={false}` only for `{ComponentName}` or fully-qualified names - -## Key Files - -| File | Role | -|---|---| -| `src/components/mdx/ApiLink.astro` | ApiLink component — URL generation logic | -| `src/lib/platform-context.ts` | Platform config, `docRoot` URLs per platform, prefix mapping | -| `api-docs/src/data/react/igniteui-react-grids.json` | TypeDoc JSON — React grids (primary reference) | -| `api-docs/src/data/react/igniteui-react.json` | TypeDoc JSON — React core | -| `api-docs/src/data/angular/igniteui-angular-21.0.x.json` | TypeDoc JSON — Angular | -| `api-docs/src/data/web-components/igniteui-web-components-grids.json` | TypeDoc JSON — WebComponents grids | -| `api-docs/src/data/blazor/IgniteUI.Blazor.25.1.x.json` | TypeDoc JSON — Blazor | +Interpret common statuses: -## Related Skills +- `missing`: the symbol was not found in the latest platform registry. +- `member-missing`: the symbol exists, but the requested member was not found. +- `ambiguous`: the symbol exists in multiple packages; add `pkg`. +- `dynamic`: the link uses a template value such as `{ComponentName}` and cannot be resolved statically. +- `sass`: Sass links are intentionally outside the TypeDoc registry. -- [`xplat-docs-platform-block`](../xplat-docs-platform-block/SKILL.md) — PlatformBlock usage and audit guide +For `member-missing`, inspect the registry before editing. Some APIs expose +platform-specific member names, for example React `dataSource` versus older +source prose that says `itemsSource`. diff --git a/.github/skills/xplat-docs-api-map-sync/SKILL.md b/.github/skills/xplat-docs-api-map-sync/SKILL.md index f1855f2d2b..727e0a41e7 100644 --- a/.github/skills/xplat-docs-api-map-sync/SKILL.md +++ b/.github/skills/xplat-docs-api-map-sync/SKILL.md @@ -1,223 +1,52 @@ --- name: xplat-docs-api-map-sync -description: "Reference guide for synchronizing the xplat docs ApiLink references with the upstream igniteui-xplat-docs apiMap data. Covers running scripts/resolve-api-links.mjs to inject ApiLink tags from `IgxFoo.bar`-style backtick references in MDX, syncing docConfig.json with the sibling igniteui-xplat-docs repo, generating per-platform broken-link reports via scripts/check-api-links.mjs, and applying exclude= props to broken ApiLink tags via scripts/apply-excludes.mjs. Use when bumping API package versions, after merging vNext content, or when ApiLink coverage drifts from upstream." +description: "Reference guide for syncing xplat ApiLink coverage from the legacy igniteui-xplat-docs apiMap data while keeping ApiLink markup registry-first. Use when importing missing links from igniteui-xplat-docs or auditing ApiLink coverage after API registry updates." user-invocable: true --- -# AI Agent Guide — Syncing xplat-docs ApiLink Coverage +# Syncing Xplat ApiLink Coverage -## Context +## Current Direction -This Astro xplat docs project mirrors the legacy gulp-based `igniteui-xplat-docs` pipeline. The legacy pipeline used **apiMap JSON** files (one per platform) and **docConfig.json** to: +The docs now resolve ApiLinks through the generated api-docs registry stored in +`src/data/api-link-index/{platform}/{staging-latest|prod-latest}.json`. -1. Convert backtick-prefixed type/member references (`` `IgxGrid.sort` ``) into resolved API URLs. -2. Resolve the right per-platform package version, prefix, suffix, and base URL. +The legacy `igniteui-xplat-docs/apiMap` files are useful for discovering missed +references in old markdown, but they are not the final URL source of truth. -Here those responsibilities are split across: +## Rules -| Responsibility | Implementation | -|---|---| -| `apiMap` lookup of valid types / members | Per-platform JSON files in sibling `igniteui-xplat-docs/apiMap/{Angular,React,Blazor,WebComponents}/*.apiMap.json` | -| `docConfig` (package versions, prefixes, base URLs) | `docs/xplat/docConfig.json` | -| Backtick → `` conversion | `docs/xplat/scripts/resolve-api-links.mjs` (or workspace-level equivalent) | -| Verifying generated URLs against staging | `scripts/check-api-links.mjs` | -| Auto-applying `exclude=` for broken URLs | `scripts/apply-excludes.mjs` | -| Migrating `` to `exclude=` | `scripts/migrate-platformblock-to-exclude.mjs` | +- Prefer clean links: `` and ``. +- Use `pkg` only when the registry reports an ambiguous symbol name. +- Use `kind` only when it is needed for Sass links or to disambiguate a real TypeDoc symbol. +- Do not add `exclude`, `excludePrefixFor`, or `excludeSuffixFor`; those props are obsolete. +- Avoid `prefixed={false}` and `suffix={false}` in new MDX. The registry should resolve the real symbol name. +- Use `PlatformBlock` only when the prose or the actual symbol/member name differs by platform. +- Never replace an existing ApiLink with backtick text only because one platform is missing it; report the miss and let the registry/API data decide. ---- - -## Sibling Repository Layout - -The `igniteui-xplat-docs` repo is at . - -``` -igniteui-xplat-docs/ - apiMap/ - Angular/*.apiMap.json - React/*.apiMap.json - Blazor/*.apiMap.json - WebComponents/*.apiMap.json - docConfig.json - gulpfile.js ← legacy reference; do not run -``` - -The `astro-components` repo is also a sibling (checked out next to `docs-template`) and is symlinked into `node_modules/igniteui-astro-components` via the workspace config in `docs-template/package.json`. The `` Astro component lives there at `src/components/mdx/ApiLink/ApiLink.astro`. - ---- - -## Workflow 0 — Applying Fixes from an Existing mdx-link-report +## Workflow -When `mdx-link-report-{angular,react,wc,blazor}.md` files already exist at the repo root (generated by a previous `check-mdx-links` run), apply all suggested fixes in one step: +1. Use the local sibling repo `../igniteui-xplat-docs` to inspect old apiMap or markdown references. +2. Add missing xplat ApiLinks to `docs/xplat/src/content`. +3. Run the registry checker: ```bash -# Preview what will change (no writes) -node scripts/apply-mdx-report-fixes.mjs --dry-run - -# Apply all fixes across all four platform reports -node scripts/apply-mdx-report-fixes.mjs +npm run check-mdx-links:broken:angular +npm run check-mdx-links:broken:react +npm run check-mdx-links:broken:wc +npm run check-mdx-links:broken:blazor ``` -The script reads every `mdx-link-report-*.md` it finds, parses each broken-URL entry's **FIX** line, and merges the appropriate prop (`excludeSuffixFor`, `excludePrefixFor`, or `exclude`) onto the matching `` tag in the xplat source file. Angular report paths are automatically remapped to their canonical `docs/xplat/src/content/` source (except `grids/` and `changelog/` which Angular owns directly). - -After applying, re-run the check to confirm the broken count drops to 0: - -```bash -npm run check-mdx-links:report:angular -npm run check-mdx-links:report:react -npm run check-mdx-links:report:wc -npm run check-mdx-links:report:blazor -``` - ---- - -## Workflow 1 — After Bumping a Platform Version - -When a platform's API package version changes (e.g. Angular 21.1 → 21.2) some symbols may be renamed, removed, or relocated. Walk through: +4. For ambiguous results, add `pkg` or `kind` only where the report proves it is needed. +5. For member-missing results, first verify whether the member exists under a different name in the generated registry before changing MDX. +6. Keep generated reports under `reports/` when they are useful for review. -```bash -# 1. Sync docConfig.json with upstream (manual diff) -# Compare docs/xplat/docConfig.json with sibling igniteui-xplat-docs/docConfig.json. -# Apply any version, base-URL, or package-key changes; preserve local-only fields -# (e.g. codeSandboxButtonInject). - -# 2. Generate per-platform broken-link reports against staging -node scripts/check-api-links.mjs --platform=angular -node scripts/check-api-links.mjs --platform=react -node scripts/check-api-links.mjs --platform=wc -node scripts/check-api-links.mjs --platform=blazor -# → produces api-link-report-{angular,react,wc,blazor}.md at repo root. - -# 3. Auto-apply exclude= to ApiLink tags whose URLs are broken -node scripts/apply-excludes.mjs --dry-run # preview -node scripts/apply-excludes.mjs # apply - -# 4. Re-run reports — broken count should now be near 0 -node scripts/check-api-links.mjs --platform=angular -# (and the other three) -``` - -## Workflow 2 — After Importing New Content from vNext - -**Critical rule: never demote an existing `` to backtick text.** If a URL is broken on some platforms, add `exclude="Platform"` — never remove the link. Backtick text is only acceptable when the type has no TypeDoc page on *any* platform and was never an ApiLink in the upstream content. - -**Correct pipeline order** — must run in this sequence: - -```bash -# 1. Strip Igr/Igx/Igc/Igb prefixes from backtick-wrapped prose refs. -# (Xplat content is platform-agnostic. `IgrToolbar` → `Toolbar`) -# Script skips code fences, JSX tags, and PlatformBlock-wrapped content -# (e.g. `IgrFoo` is intentional). -node scripts/fix-igr-backtick-prefix.mjs - -# 2. Convert bare backtick refs (`Toolbar`, `DataChart`, etc.) into -# using the sibling igniteui-xplat-docs/apiMap JSON files. -# Reads mentionedTypes: frontmatter to scope the lookup per file. -cd docs/xplat && node scripts/resolve-api-links.mjs - -# 3. Fix attributes: strip CLR arity suffixes, add prefixed={false} -# for enums, reclassify class → interface for known mis-classified types. -# Does NOT demote ApiLinks to backtick text. -node scripts/fix-api-link-attrs.mjs - -# 4. Migrate any wrappers -# that exist purely for platform-omission into exclude= props. -cd /c/Repos/docs/docs-template && node scripts/migrate-platformblock-to-exclude.mjs - -# 5. Run Workflow 1 (steps 2-4) to verify and auto-fix broken URLs. -``` - -**Angular content syncs automatically** — after fixing xplat, run: -```bash -cd docs/xplat && node scripts/generate.mjs --platform=Angular --lang=en -cd /c/Repos/docs/docs-template && node docs/angular/scripts/sync-generated.mjs --lang=en -# repeat for --lang=jp, --lang=kr if needed -``` - ---- - -## Script Reference - -### `scripts/check-api-links.mjs` - -Walks `docs/xplat/src/content/**/*.mdx`, extracts every `` tag, computes the staging URL per platform, and HEAD-checks each URL. - -- Honors enclosing `` (stack-based intersection) so a tag wrapped for one platform is checked only on that platform. -- Honors `exclude="..."` on the tag itself — listed platforms are dropped from the check set. -- Output: - - Console summary (OK / Not found / HTTP / Total broken). - - `api-link-report-.md` with details on every broken URL and the MDX files it appears in. - -CLI: -``` -node scripts/check-api-links.mjs --platform=angular|react|wc|blazor -``` - -### `scripts/apply-excludes.mjs` - -Reads all four `api-link-report-*.md` files, builds a per-file map of broken URLs → platforms, then walks each file's `` tags and merges `exclude="..."` for any matching tag. Idempotent. - -Matching algorithm: -- Strip platform prefix (`Igr/Igx/Igc/Igb`) from URL type names. -- Generate two key variants per URL — with and without `Component/Module/Directive/Element` suffix — to match Angular tags written either with or without the suffix. -- Lowercase member fragments so Blazor's PascalCased `#Condition` matches a tag's `member="condition"`. -- On tag side, key is `(stripPrefix(type) | lowercased member | kind || 'class')`. - -CLI: -``` -node scripts/apply-excludes.mjs --dry-run -node scripts/apply-excludes.mjs -``` - -### `scripts/migrate-platformblock-to-exclude.mjs` - -Finds the anti-pattern: - -```mdx - - - -``` - -When `for=` lists exactly N-1 of the 4 platforms, rewrites to: - -```mdx - -``` - -Skips tags that already have an `exclude=` attribute. - -### `scripts/resolve-api-links.mjs` (or workspace equivalent) - -Walks MDX content and converts backtick-only API references like `` `IgxGrid.sort` `` into `` tags by looking up the type and member in the sibling `igniteui-xplat-docs/apiMap/*.json` files. - ---- - -## docConfig.json Sync Checklist - -When syncing `docs/xplat/docConfig.json` with the upstream `igniteui-xplat-docs/docConfig.json`: - -- Pull in any new platform version numbers (`apiPackages[platform][packageId].version`). -- Pull in any new packageId entries (e.g. new component packages added upstream). -- Preserve **local-only** fields the Astro project uses but the legacy pipeline does not — e.g. `codeSandboxButtonInject`. -- Leave `prefix`, `classSuffix`, and `apiUrl` alone unless explicitly changed upstream — only Angular has a non-empty `classSuffix` ("Component") for chart/gauge/map/excel/spreadsheet packages. - ---- - -## Common Pitfalls - -| Pitfall | Symptom | Fix | -|---|---|---| -| Forgot to re-run `check-api-links` after `apply-excludes` | Same broken count reported | Re-run check after apply; report is regenerated. | -| Member casing mismatch (Blazor PascalCase vs MDX lowercase) | Blazor 0 tags updated even though report shows breaks | `apply-excludes.mjs` already handles this via lowercase key. If you customize, preserve the lowercase logic. | -| Angular `Component` suffix only on certain packages | Some Angular URLs still broken after apply | Verify `apply-excludes.mjs` `baseVariants()` adds both with-suffix and without-suffix variants. | -| `replace_string_in_file` silently failing on `apply-excludes.mjs` | Edits report success but file unchanged | Use a Node-based file patcher: `readFileSync` + `.replace()` + `writeFileSync`. Always grep to verify. | -| Running resolve-api-links BEFORE fix-igr-backtick-prefix | Backtick refs with `Igr` prefix can't be resolved; new backtick `Toolbar` refs created after fix-igr go unconverted | Always run fix-igr **first**, then resolve-api-links, then fix-api-link-attrs. | -| Adding types to a NONEXISTENT_TYPES demotion list in fix-api-link-attrs | ApiLinks removed from content; replaced with `IgrFoo` backtick text | **Never demote ApiLinks.** `fix-api-link-attrs.mjs` has NO demotion logic. Handle broken URLs with `exclude=` via `apply-excludes.mjs`. | -| fix-igr-backtick-prefix stripping Igr prefix inside PlatformBlock | ``IgrFoo`` → `Foo` (wrong) | The script already skips lines containing `` is an Astro MDX component that renders its content **only for the specified platform(s)**. Any content — prose, code blocks, notes, or JSX — that should appear on some platforms but not others **must be wrapped in a ``**. +Use it when: -> **Key rule:** Every platform-specific code snippet, note, or prose block must be wrapped in a ``. Content valid for ALL platforms can be left unwrapped. When in doubt, wrap it. +- prose differs by platform; +- sample code differs by platform; +- the actual symbol or member name differs by platform; +- a platform needs a manual external link or plain text because the API does not exist. ---- - -## Import - -Every MDX file that uses `` must import it at the top: - -```mdx -import PlatformBlock from 'docs-template/components/mdx/PlatformBlock.astro'; -``` - -This import line must appear before any use of the component. Check for it before adding PlatformBlocks to a file. +Do not use it just to handle package, prefix, suffix, or URL differences. ApiLink +and the generated registry should handle those. ---- - -## Syntax +## Correct Use ```mdx -content visible only on Angular + -``` - -Multiple platforms in one block — use a comma-separated list: -```mdx - -content visible on Angular and WebComponents + + ``` -Valid platform names (exact casing required): - -| Platform name | Description | -|---|---| -| `Angular` | Angular (Ignite UI for Angular) | -| `React` | React (Ignite UI for React) | -| `WebComponents` | Web Components (Ignite UI for Web Components) | -| `Blazor` | Blazor (Ignite UI for Blazor) | +## ApiLink Rules ---- - -## What Goes Inside a PlatformBlock - -### Platform-specific code snippets - -Each platform has a different template/markup syntax. Wrap each variant: - -```mdx - -```html - - - -``` - - - -```html - - - -``` - - - -```tsx - - - -``` - +- Prefer clean links: ``. +- Add `member` when linking to a member. +- Add `pkg` only when `check-mdx-links` reports an ambiguity. +- Do not add `exclude`, `excludePrefixFor`, or `excludeSuffixFor`. +- Avoid new `prefixed={false}` or `suffix={false}` usage. - -```razor - - - -``` - -``` +## Formatting -### Platform-specific prose notes +Keep PlatformBlocks readable: ```mdx - -> [!Note] -> Using `cellEditor` with any editor component will disrupt keyboard navigation flow. - -``` - ---- - -## What Does NOT Need a PlatformBlock - -Content that is **identical for all platforms** must **not** be wrapped. Wrapping it would hide it from any platform that is not listed. The most common cases: - -| Content type | Example | Wrap? | -|---|---|---| -| Generic CSS | `.activeRow { border: 2px solid red; }` | **No** | -| JSON / data examples | `[{ id: 1, name: "Alice" }]` | **No** | -| Platform-agnostic TypeScript concepts | General algorithm explanation in code | **No** | -| Shared prose | Paragraphs about features common to all platforms | **No** | -| Platform-specific markup / APIs | Angular template syntax, WC custom elements, Blazor razor | **Yes** | - ---- +Some prose before. -## Grouping Platforms - -When two or more platforms share the exact same content, use a comma-separated `for=` value instead of repeating blocks: - -```mdx - -```typescript -this.grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc }); -``` + Angular-only content. - -```typescript -this.grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc }); -``` + + Shared xplat content. - - -```typescript -this.grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc }); -``` - +Some prose after. ``` ---- - -## ComponentBlock — Wrapping per Grid Variant - -Some shared files cover multiple grid components: `Grid`, `TreeGrid`, `HierarchicalGrid`, `PivotGrid`. Use `` to scope content to specific grid variants. `PlatformBlock` is nested **inside** `ComponentBlock` when the content is both variant-specific and platform-specific. - -```mdx - - - -```typescript -public updateCell() { - this.hierarchicalGrid.updateCell(newValue, rowID, 'Age'); -} -``` - - - -```razor -@code { - this.HierarchicalGridRef.UpdateCell(newValue, rowID, "Age"); -} -``` - - -``` - -### Important nesting rules for ComponentBlock + PlatformBlock - -- **`PlatformBlock` goes inside `ComponentBlock`**, never the other way around. -- A TypeScript block inside a `ComponentBlock` but outside a `PlatformBlock` is visible to Angular, React, and WebComponents simultaneously. Use this **only** when the TypeScript code is literally identical across those three platforms (i.e., it does not use any platform-specific APIs like `IgcGridComponent` or `IgrGrid`). -- If a TypeScript block uses WC-specific APIs (`IgcGridComponent`, `IgcColumnComponent`, `IgcCellTemplateContext`, etc.), wrap it in `` even if it is already inside a `ComponentBlock`. -- If a code block uses Angular-specific APIs (`IgxGridComponent`, Angular decorators, `@Component`), wrap it in ``. - ---- - -## When to Split vs When to Group - -### Split into separate PlatformBlocks when -- The markup/template syntax is different (`igx-` vs `igc-` vs `` vs ``) -- The API call or property name differs per platform (e.g., `getState()` vs `GetState()`) -- One platform has extra configuration the others do not - -### Group into one PlatformBlock when -- The code is byte-for-byte identical across those platforms -- The prose or note applies equally to all listed platforms - -### Omit PlatformBlock entirely when -- The content applies to **all four** platforms without exception (CSS, JSON data, shared algorithm explanations) - ---- - -## Code Blocks — Platform Detection Tokens - -Every ` ``` ` code snippet that is **platform-specific must be inside** a ``. If the code uses any of these tokens, it is platform-specific and requires a PlatformBlock: - -| Token / pattern | Platform | -|---|---| -| `igx-`, `` as a self-closing tag is invalid. It must always have a closing tag: - -```mdx - - - - - -... - - - - -... - -``` - ---- - -## Balancing Open and Close Tags - -Every `` must have exactly one `` closing tag. A common mistake is closing the block too early when the following code block also belongs to the same platform: - -```mdx - - -```html - -``` - - -```ts -// WC-specific TypeScript — NOT wrapped! -var grid = document.getElementById('grid') as IgcGridComponent; -``` - - - -```html - -``` - -```ts -var grid = document.getElementById('grid') as IgcGridComponent; -``` - -``` - -### Quick balance check - -```bash -# Should print equal counts -grep -c '' file.mdx -``` - ---- - -## Full Coverage Requirement - -When a section of the page shows platform-specific code, **every platform must be covered** (or explicitly omitted with a comment explaining why). Missing a platform means that platform's docs page shows no code for that section. - -Typical full-coverage pattern: - -```mdx - -```html - -``` - - - -```html - -``` - -```ts -// WC-specific TypeScript initialization -``` - - - -```tsx -{/* React JSX */} -``` - - - -```razor -@* Blazor Razor syntax *@ -``` - -``` - ---- - -## Step-by-Step: Adding a PlatformBlock to an Existing File - -1. **Check for the import** at the top of the file: - ```mdx - import PlatformBlock from 'docs-template/components/mdx/PlatformBlock.astro'; - ``` - Add it if missing (after existing imports). - -2. **Identify the platform-specific content** — look for platform API tokens (see table above) in unprotected code blocks. - -3. **Wrap each variant** in the appropriate ``. - -4. **Check balance** — count open vs close tags as shown above. - -5. **Do not wrap CSS or JSON** that applies to all platforms. - -6. **Do not use self-closing ``** — always use ``. - ---- - -## Common Mistakes - -| Mistake | Effect | Fix | -|---|---|---| -| Missing PlatformBlock around WC-specific TypeScript | Code shown on all platforms, breaks Angular/React/Blazor | Add `` | -| Self-closing `` used as closing tag | MDX parse error or content rendered incorrectly | Change to `` | -| Closing `` placed too early (before related code block) | Platform-specific code shown on all platforms | Move `` to after the last related code block | -| Wrong platform name (e.g. `"Webcomponents"`, `"blazor"`) | Content never shown (silently filtered out) | Use exact casing: `WebComponents`, `Blazor`, `Angular`, `React` | -| CSS inside PlatformBlock when it applies to all platforms | CSS hidden from unlisted platforms | Move CSS outside the PlatformBlock | -| JSX `{500}` inside `{/* */}` MDX comment | Parse error: `Cannot read properties of undefined (reading 'start')` | Change numeric JSX props to strings: `height="500"` | -| **Inline PlatformBlock mid-sentence** with blank lines around content | Content renders as separate block-level paragraph, breaking sentence flow | Move the entire sentence into each PlatformBlock (duplicate shared text) | - ---- - -## CRITICAL: Never Use PlatformBlock for Inline Text - -`` is a **block-level** component. When its content has blank lines around it, MDX renders it as a separate paragraph. **Never** split a sentence across PlatformBlock boundaries. - -### Wrong — breaks sentence flow: - -```mdx -The component gives flexibility through the {Platform} Button - - -OnClick event - - - - - -clicked callback - - -, toggle the button, and more. -``` - -This renders "OnClick event" as a standalone paragraph, with `, toggle the button` orphaned below it. - -### Correct — duplicate shared text into each block: - -```mdx - - -The component gives flexibility through the {Platform} Button OnClick event, toggle the button, and more. - - - - - -The component gives flexibility through the {Platform} Button clicked callback, toggle the button, and more. - - -``` - -### Also correct — inline on same line (no blank lines): - -```mdx -The component uses for rendering. -``` - -This works because the PlatformBlock tags and content are all on the **same line** — MDX treats same-line components as inline elements. - ---- - -## Key Files - -| File | Role | -|---|---| -| `src/components/mdx/PlatformBlock.astro` | PlatformBlock component — renders content conditionally per platform | -| `src/lib/platform-context.ts` | Platform detection and config (used by ApiLink; same platforms) | - -## ApiLink `exclude` prop — preferred for pure exclusion - -**Do NOT** use a `` whose only purpose is to **omit** an `` for a subset of platforms. Use the `exclude="..."` prop on `` instead. - -The `exclude` prop accepts a comma-separated list of platform names (same casing as `for`). On the listed platforms, the link renders as **inline code (backticks)** instead of a hyperlink — preserving the symbol name in prose without producing a broken URL. - -### Anti-pattern (DO NOT DO THIS) - -```mdx - - - - -``` - -### Correct pattern - -```mdx - -``` - -This renders a normal link on Angular/React/WebComponents and renders `MyType.someMember` in backticks on Blazor. No PlatformBlock needed. - -### When to use which - -| Situation | Use | -|---|---| -| The same `` references something missing on N platforms (broken URL) | `exclude="P1,P2"` on the ApiLink | -| Only `suffix` or `prefix` differs on some platforms | One `` per ApiLink variant; use `suffix={false}` or `prefixed={false}` only in the affected platform block | -| Different platforms need genuinely **different** ApiLinks (different `type`, `kind`, `member`, etc.) | One `` per variant (each containing its own ``) | -| Surrounding **prose or code** also differs per platform | `` (regular usage) | - -### Critical anti-pattern: `exclude` + PlatformBlock for the same type - -**Never** combine `exclude="Platform"` on one ApiLink with a `` wrapping another ApiLink for the **same type**. The `exclude` prop does NOT hide the tag — it degrades it to inline code (backticks). This produces duplicate visible output on the excluded platform (inline code + a link). - -```mdx - - -``` - -**Correct pattern** — wrap both variants in their own PlatformBlocks: - -```mdx - -``` - -This ensures each platform sees exactly one link. - -### Migration script - -`scripts/migrate-platformblock-to-exclude.mjs` automatically rewrites the anti-pattern (a `` containing only a single `` whose `for=` covers exactly N-1 of the 4 platforms) into ``. - -### Report-driven exclusion - -`scripts/apply-excludes.mjs` reads `api-link-report-{angular,react,wc,blazor}.md` (produced by `scripts/check-api-links.mjs`) and adds `exclude="..."` to every ApiLink whose generated URL is broken on a given platform. Run after every API package version bump: - -```bash -# 1. Generate per-platform reports -node scripts/check-api-links.mjs --platform=angular -node scripts/check-api-links.mjs --platform=react -node scripts/check-api-links.mjs --platform=wc -node scripts/check-api-links.mjs --platform=blazor - -# 2. Auto-apply exclude= to broken-link tags (idempotent) -node scripts/apply-excludes.mjs --dry-run # preview -node scripts/apply-excludes.mjs # apply - -# 3. Re-run reports to verify near-zero broken count -``` - -The script: -- Strips `Igx/Igr/Igc/Igb` prefix from URL type names. -- Strips `Component/Module/Directive/Element` suffix (Angular adds these to certain class names). -- Lowercases member fragments (Blazor PascalCases members in URLs). -- Merges with any existing `exclude=` attribute (preserves manually-added platforms). - ---- - -## Related Skills - -- [`xplat-docs-api-links`](../xplat-docs-api-links/SKILL.md) — ApiLink usage guide +Avoid single-line PlatformBlocks unless they are already inside a compact inline +context that cannot be safely restructured. diff --git a/API-LINK-WORKFLOW.md b/API-LINK-WORKFLOW.md new file mode 100644 index 0000000000..66527e02f5 --- /dev/null +++ b/API-LINK-WORKFLOW.md @@ -0,0 +1,191 @@ +# ApiLink Registry Workflow + +This document explains the current `ApiLink` flow from API documentation generation to MDX validation. The short version: the API registry is the source of truth for symbol URLs, member casing, package selection, and ambiguity detection. + +## End-to-End Flow + +```mermaid +flowchart TD + A[api-docs] --> B[Generate API docs] + B --> C[Generate API registry JSON] + C --> D[Sync into igniteui-documentation] + D --> E[ApiLink resolves type/member from registry] + E --> F{Resolved?} + + F -->|Yes| G[Render API link] + G --> H[Link checker crawls URL] + H --> I[Reported if unreachable / soft 404] + + F -->|No| J[Render highlighted text only] + J --> K[Reported as unresolved] +``` + +The checker adds one more branch for duplicate registry matches: + +```mermaid +flowchart TD + A[MDX ApiLink] --> B[Resolve candidate names] + B --> C[Apply platform prefix/suffix rules] + C --> D[Apply pkg and kind filters] + D --> E[Match type in registry] + E --> F[Match member case-insensitively] + F --> G{How many registry symbols match?} + + G -->|0| H[Unresolved ApiLink] + G -->|1| I[Resolved ApiLink] + G -->|2 or more| J[Ambiguous ApiLink] + + H --> K[Write broken report] + I --> L[Use canonical registry symbol and member] + J --> M[Write ambiguity report and fail when enabled] +``` + +## Source Repositories + +`api-docs` owns the API documentation generation. It produces the API docs and the registry JSON snapshots. + +`igniteui-documentation` stores registry snapshots under: + +```text +src/data/api-link-index/ + angular/staging-latest.json + react/staging-latest.json + webcomponents/staging-latest.json + blazor/staging-latest.json + manifest.json +``` + +`igniteui-astro-components` owns the runtime `ApiLink` component and registry lookup code used by MDX rendering. + +## Registry Contract + +Each registry entry describes a symbol: + +| Field | Meaning | +|---|---| +| `p` | Package id, such as `igniteui-react-inputs` or `IgniteUI.Blazor`. | +| `k` | API kind, such as `class`, `interface`, `enum`, or `type`. | +| `u` | URL path for the symbol. | +| `m` | Member map for anchors. | + +The registry can contain duplicate symbol keys when more than one package or kind has the same public name. This is expected. It becomes a docs problem only when an MDX `ApiLink` references the duplicate name without enough props to choose one symbol. + +## ApiLink Resolution Rules + +Resolution is platform-aware: + +- Angular tries Angular naming conventions first, such as `Calendar` -> `IgxCalendarComponent`. +- React, Web Components, and Blazor apply their platform prefixes and package mappings. +- Member matching is case-insensitive, but the resolved member name and anchor come from the registry. +- `pkg` filters the candidate symbols by package id. +- `kind` filters the candidate symbols by API kind. + +The registry is the source of truth after a symbol is found. For example, if MDX uses a member with different casing, the rendered link uses the canonical registry member and anchor. + +## When to Add Props + +Keep links minimal when the registry resolves one symbol: + +```mdx + + +``` + +Add `pkg` when the same symbol exists in more than one package and the package changes the target: + +```mdx + + + +``` + +Add `kind` when the same symbol name exists as a non-class type, or when the intended symbol is not a class: + +```mdx + +``` + +Use `PlatformBlock` when the correct package or symbol differs by platform: + +```mdx + + + + + + + +``` + +## Checker Commands + +The root `check-mdx-links` scripts include ambiguity reporting: + +| Command | What it checks | +|---|---| +| `npm run check-mdx-links:angular` | Angular content after xplat Angular sync. | +| `npm run check-mdx-links:react` | Raw xplat content for React, filtered by TOC exclusions. | +| `npm run check-mdx-links:wc` | Raw xplat content for Web Components, filtered by TOC exclusions. | +| `npm run check-mdx-links:blazor` | Raw xplat content for Blazor, filtered by TOC exclusions. | +| `npm run check-mdx-links:broken:` | Resolve-only report for broken, unresolved, and ambiguous `ApiLink`s. | +| `npm run check-mdx-links:report:` | Markdown report for URL checks plus ambiguity report. | + +The package scripts pass these flags to `scripts/check-mdx-links.mjs`: + +```text +--list-ambiguities +--ambiguity-md=reports/api-link-ambiguity-report-.md +--fail-on-ambiguity +``` + +Use `--no-sync` only for a quick local resolver check when generated content is already current. + +## Platform Generation Before Checking + +Angular: + +```text +npm run sync:generated-from-xplat --prefix docs/angular +npm run sync:generated-from-xplat:jp --prefix docs/angular +scan docs/angular/src/content +``` + +React, Web Components, and Blazor: + +```text +npm run generate: --prefix docs/xplat +npm run generate::jp --prefix docs/xplat +scan docs/xplat/src/content with toc.json exclusions +``` + +This keeps reported file paths on the raw xplat MDX files while still respecting platform-specific excluded topics. + +## Reports + +Ambiguity reports are written to: + +```text +reports/api-link-ambiguity-report.md +reports/api-link-ambiguity-report-angular.md +reports/api-link-ambiguity-report-react.md +reports/api-link-ambiguity-report-wc.md +reports/api-link-ambiguity-report-blazor.md +``` + +The report has two useful sections: + +- Referenced ambiguous `ApiLink`s: current MDX links that must be fixed. +- All registry duplicate symbol keys: duplicate registry names that may or may not be referenced. + +Only referenced ambiguities are blockers. Duplicate registry keys are informational until MDX links to them without enough props. + +## Practical Fix Loop + +1. Run the platform check. +2. Open the ambiguity report. +3. For each referenced ambiguity, compare the candidate packages and kinds. +4. Add the smallest correct disambiguation: usually `pkg`, sometimes `kind`. +5. Use `PlatformBlock` only when one MDX line cannot be correct for all platforms. +6. Re-run the same check until `Ambiguous ApiLinks` says `None`. + +For Angular `Calendar`, no `pkg` is needed in normal Angular docs because `Calendar` resolves through Angular naming conventions to `IgxCalendarComponent` before considering the duplicate raw `Calendar` registry key. diff --git a/README.md b/README.md index e324187738..a29aac5371 100644 --- a/README.md +++ b/README.md @@ -66,12 +66,36 @@ The MDX files currently use these documentation components from `igniteui-astro- | `PlatformBlock` | Shows content only for selected platforms. | | `Sample` | Embeds runnable or linked product samples. | +## Checking MDX API Links + +Use the root `check-mdx-links` scripts to validate `ApiLink` references: + +| Scope | Command | +|---|---| +| All MDX sources | `npm run check-mdx-links` | +| Angular docs | `npm run check-mdx-links:angular` | +| React xplat docs | `npm run check-mdx-links:react` | +| Web Components xplat docs | `npm run check-mdx-links:wc` | +| Blazor xplat docs | `npm run check-mdx-links:blazor` | +| Markdown reports | `npm run check-mdx-links:report:` | +| Resolve-only broken-link reports | `npm run check-mdx-links:broken:` | + +These scripts also check for ambiguous `ApiLink` references. If a symbol exists in more than one registry package and the link does not specify enough information to choose safely, the script prints an `Ambiguous ApiLinks` section, writes an `api-link-ambiguity-report*.md` file under `reports/`, and exits with a failure. + +Fix ambiguous links by adding a specific `pkg` or `kind` prop. If the correct target differs by platform, wrap platform-specific links in `PlatformBlock`. + ## Content Locations - Angular content lives under `docs/angular/src/content//`. - Shared xplat content lives under `docs/xplat/src/content//`. - Static images and assets are stored in the nearest product package when product-specific, or in the root `public/` directory when shared. +## Collaboration Docs + +- [.github/CONTRIBUTING.md](.github/CONTRIBUTING.md): day-to-day editing, generated-content behavior, and report expectations. +- [API-LINK-WORKFLOW.md](API-LINK-WORKFLOW.md): API registry flow, `ApiLink` resolution, ambiguity handling, and checker commands. +- [migration.md](migration.md): MDX migration rules and component examples. + ## Contributing Open a pull request against this repository and request review from the documentation team. diff --git a/docs/angular/package.json b/docs/angular/package.json index 0c037b7af6..2824d704bc 100644 --- a/docs/angular/package.json +++ b/docs/angular/package.json @@ -37,7 +37,7 @@ "dependencies": { "astro": "^6.1.6", "docs-template": "file:../../", - "igniteui-astro-components": "0.0.19", + "igniteui-astro-components": "0.0.20", "sharp": "^0.34.2" }, "devDependencies": { diff --git a/docs/angular/scripts/sync-generated.mjs b/docs/angular/scripts/sync-generated.mjs index c4409d64cb..35f09cea1e 100644 --- a/docs/angular/scripts/sync-generated.mjs +++ b/docs/angular/scripts/sync-generated.mjs @@ -1,6 +1,6 @@ #!/usr/bin/env node -import { cpSync, existsSync } from 'fs'; -import { join, dirname } from 'path'; +import { closeSync, cpSync, existsSync, ftruncateSync, openSync, readFileSync, readdirSync, statSync, writeSync } from 'fs'; +import { join, dirname, relative } from 'path'; import { fileURLToPath } from 'url'; const __filename = fileURLToPath(import.meta.url); @@ -20,26 +20,113 @@ if (!existsSync(sourceDir)) { process.exit(1); } -// Copy all generated content files from source to target -console.log(`Copying from ${sourceDir} to ${targetDir}`); -cpSync(sourceDir, targetDir, { - recursive: true, - filter: (src) => { - // Skip grids folder (Angular has its own) - if (src.includes('/grids/') || src.includes('\\grids\\')) { - return false; +function shouldCopy(src) { + // Skip grids folder (Angular has its own) + if (src.includes('/grids/') || src.includes('\\grids\\')) { + return false; + } + // Skip changelog folder (Angular has its own) + if (src.includes('/changelog/') || src.includes('\\changelog\\')) { + return false; + } + // Skip TOC files (Angular manages its own) + if (src.endsWith('toc.json') || src.endsWith('toc.yml')) { + return false; + } + return true; +} + +function normalizeMarkdownSpacing(content) { + const hasFinalNewline = /\r?\n$/.test(content); + const lines = content.replace(/\r\n/g, '\n').split('\n'); + const result = []; + let blankCount = 0; + let inFence = false; + + for (const line of lines) { + if (/^\s*(```|~~~)/.test(line)) { + inFence = !inFence; + blankCount = 0; + result.push(line); + continue; + } + + if (inFence) { + result.push(line); + continue; + } + + if (line.trim() === '') { + blankCount++; + if (blankCount <= 1) { + result.push(''); + } + continue; } - // Skip changelog folder (Angular has its own) - if (src.includes('/changelog/') || src.includes('\\changelog\\')) { - return false; + + blankCount = 0; + result.push(line); + } + + let normalized = result.join('\n').replace(/\n+$/, ''); + if (hasFinalNewline) { + normalized += '\n'; + } + return normalized; +} + +function normalizeCopiedMarkdownFiles(srcDir, destDir) { + let normalizedCount = 0; + + function visit(srcPath) { + if (!shouldCopy(srcPath)) return; + + const stat = statSync(srcPath); + if (stat.isDirectory()) { + for (const entry of readdirSync(srcPath)) { + visit(join(srcPath, entry)); + } + return; } - // Skip TOC files (Angular manages its own) - if (src.endsWith('toc.json') || src.endsWith('toc.yml')) { - return false; + + if (!/\.(md|mdx)$/i.test(srcPath)) return; + + const destPath = join(destDir, relative(srcDir, srcPath)); + let fd; + + try { + fd = openSync(destPath, 'r+'); + const original = readFileSync(fd, 'utf8'); + const normalized = normalizeMarkdownSpacing(original); + + if (normalized !== original) { + ftruncateSync(fd, 0); + writeSync(fd, normalized, 0, 'utf8'); + normalizedCount++; + } + } catch (error) { + if (error?.code === 'ENOENT') return; + throw error; + } finally { + if (fd !== undefined) { + closeSync(fd); + } } - return true; } + + visit(srcDir); + return normalizedCount; +} + +// Copy all generated content files from source to target +console.log(`Copying from ${sourceDir} to ${targetDir}`); +cpSync(sourceDir, targetDir, { + recursive: true, + filter: shouldCopy, }); +const normalizedFiles = normalizeCopiedMarkdownFiles(sourceDir, targetDir); + console.log(' Generated content synced successfully'); console.log(' Excluded: grids/, changelog/, toc files'); +console.log(` Normalized markdown spacing in ${normalizedFiles} file(s)`); diff --git a/docs/angular/src/content/en/components/accordion.mdx b/docs/angular/src/content/en/components/accordion.mdx index 3e3b415993..44ab5f6772 100644 --- a/docs/angular/src/content/en/components/accordion.mdx +++ b/docs/angular/src/content/en/components/accordion.mdx @@ -206,7 +206,7 @@ If , you can customize the header and content panel`s appearance. -The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the . +The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the . diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx index 7722af1084..7b4caadeb1 100644 --- a/docs/angular/src/content/en/components/action-strip.mdx +++ b/docs/angular/src/content/en/components/action-strip.mdx @@ -104,7 +104,7 @@ By default, the Action Strip will not be visible, but this can be configured via ### Menu look and feel -For scenarios where more than three action items will be shown, it is best to use directive. Any item within the Action Strip marked with the `*igxActionStripMenuItem` structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action. +For scenarios where more than three action items will be shown, it is best to use directive. Any item within the Action Strip marked with the `*igxActionStripMenuItem` structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action. ```html
@@ -154,7 +154,7 @@ This can be utilized via grid action components and we are providing two default ``` -These components inherit and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. +These components inherit and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. @@ -209,10 +209,10 @@ The following built-in CSS styles helped us achieve this Action Strip layout: Additional components and/or directives that can be used within the Action Strip: -- +- - - -- +- diff --git a/docs/angular/src/content/en/components/autocomplete.mdx b/docs/angular/src/content/en/components/autocomplete.mdx index db4bfccbaf..52b06590c2 100644 --- a/docs/angular/src/content/en/components/autocomplete.mdx +++ b/docs/angular/src/content/en/components/autocomplete.mdx @@ -15,7 +15,7 @@ Angular Autocomplete is a search box directive that enables users to easily find
-The directive provides a way to enhance a text input by showing an with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys. +The directive provides a way to enhance a text input by showing an with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys.
## Angular Autocomplete Example @@ -36,7 +36,7 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule** in our **app.module**. If is applied on an , the **igxInputGroupModule** is also required: +The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule** in our **app.module**. If is applied on an , the **igxInputGroupModule** is also required: ```typescript // app.module.ts @@ -135,12 +135,12 @@ export class AutocompletePipeStartsWith implements PipeTransform { ``` -The uses the as a provider for the available options, which means that all capabilities of the dropdown component can be used in the autocomplete. +The uses the as a provider for the available options, which means that all capabilities of the dropdown component can be used in the autocomplete. ### Disable Angular Autocomplete -You can disable the Angular autocomplete by using the input: +You can disable the Angular autocomplete by using the input: ```html @@ -153,7 +153,7 @@ You can disable the Angular autocomplete by using the . +The `igx-autocomplete` dropdown positioning, scrolling strategy, and outlet can be configured using the . In the following Angular Autocomplete example we will position the dropdown above the input and disable the opening and closing animations. We're using the `ConnectedPositioningStrategy` for this: @@ -269,7 +269,7 @@ Take a look at the [`igxInputGroup`](/input-group#styling) and the [`igxDropdown
-- +- - - diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx index 0edd62c9bc..3fd3b53906 100644 --- a/docs/angular/src/content/en/components/badge.mdx +++ b/docs/angular/src/content/en/components/badge.mdx @@ -421,7 +421,7 @@ At the end your badges should look like this: - - - -- +- ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx index 88f2367c82..7ca75f5d91 100644 --- a/docs/angular/src/content/en/components/banner.mdx +++ b/docs/angular/src/content/en/components/banner.mdx @@ -147,7 +147,7 @@ If you want to use an `igx-icon` in your banner message, wrap it in a `span` tag ### Changing the banner button -The `IgxBannerModule` exposes a directive for templating the banner buttons - . This directive allows you to override the default banner button (`Dismiss`) and add user-defined custom actions. +The `IgxBannerModule` exposes a directive for templating the banner buttons - . This directive allows you to override the default banner button (`Dismiss`) and add user-defined custom actions. ```html {/*banner.component.html*/} @@ -298,7 +298,7 @@ The last step is to pass the custom banner theme:
- -- +- - Additional components and/or directives with relative APIs that were used: diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx index df6c2d0333..9896a0cc00 100644 --- a/docs/angular/src/content/en/components/bullet-graph.mdx +++ b/docs/angular/src/content/en/components/bullet-graph.mdx @@ -17,19 +17,13 @@ The Ignite UI for Angular bullet graph component provides you with the ability t ## Angular Bullet Graph Example -The following sample demonstrates how setting multiple properties on the same can transform it to completely different bullet graph. +The following sample demonstrates how setting multiple properties on the same can transform it to completely different bullet graph. - - - -The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the property. +The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the property. The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more. - - - ## Dependencies When installing the gauge package, the core package must also be installed. @@ -38,15 +32,9 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - - ## Component Modules -The requires the following modules: - - - +The requires the following modules: ```ts // app.module.ts @@ -66,9 +54,6 @@ export class AppModule {} The following code walks through creating a bullet graph component, and configuring a performance bar, comparative measure marker, and three comparative ranges on the scale. - - - ```html ``` - - - - ## Highlight Value -The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the appear with a lower opacity. A good example is if is 50 and is set to 25. This would represent a performance of 50% regardless of what the value of is set to. To enable this first set to Overlay and then apply a to something lower than . - - +The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the appear with a lower opacity. A good example is if is 50 and is set to 25. This would represent a performance of 50% regardless of what the value of is set to. To enable this first set to Overlay and then apply a to something lower than . ```html ``` - - - - ## Comparative Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. - - ```html ``` - - - - - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. - Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties. - Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. - - ```html ``` - - - - - ## Labels The labels indicate the measures on the scale. - - ```html ``` - - - - - ## Backing The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. - - ```html ``` - - - - - ## Scale -The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using property) and all labels will be rendered from right-to-left instead of left-to-right. - - +The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using property) and all labels will be rendered from right-to-left instead of left-to-right. ```html ``` - - - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. - - ```html ``` - - - ## API References - - + + ## Additional Resources You can find more information about other types of gauges in these topics: diff --git a/docs/angular/src/content/en/components/button-group.mdx b/docs/angular/src/content/en/components/button-group.mdx index dcb0b13faf..b4b150a7c1 100644 --- a/docs/angular/src/content/en/components/button-group.mdx +++ b/docs/angular/src/content/en/components/button-group.mdx @@ -349,7 +349,7 @@ At the end your button group should look like this:
- - -- +- - ## Theming Dependencies diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx index 1de63b1a01..56b10567e5 100644 --- a/docs/angular/src/content/en/components/button.mdx +++ b/docs/angular/src/content/en/components/button.mdx @@ -76,7 +76,7 @@ Now that you have the Ignite UI for Angular Button module or directive imported, ### Flat Button -Use the directive to add a simple flat button in your component template. Note that if you do not choose a type, by default it will be set to `flat`. +Use the directive to add a simple flat button in your component template. Note that if you do not choose a type, by default it will be set to `flat`. ```html @@ -160,7 +160,7 @@ The `disabled` property can be used to make a button unclickable: ### Ripple -The directive adds a ripple effect to your buttons or other specified elements. You can easily change the default ripple color, position and duration, using its properties: +The directive adds a ripple effect to your buttons or other specified elements. You can easily change the default ripple color, position and duration, using its properties: ```html ``` -You may access the exporter service by defining an argument of type in the component's constructor and the Angular framework will provide an instance of the service. To export some data in CSV format you need to invoke the exporter service's method. This method accepts as a first argument the data you want to export and the second argument is of type and allows you to configure the export process. +You may access the exporter service by defining an argument of type in the component's constructor and the Angular framework will provide an instance of the service. To export some data in CSV format you need to invoke the exporter service's method. This method accepts as a first argument the data you want to export and the second argument is of type and allows you to configure the export process. Here is the code which will execute the export process in the component's typescript file: @@ -82,7 +82,7 @@ If all went well, you should see an export button. When pressed, it will trigger ## Exporting IgxGrid's Data The CSV Exporter service can also export data in CSV format from an [**IgxGrid**](/grid/grid). The only difference is that you need to invoke the -'s method and pass the [**IgxGrid**](/grid/grid) as first argument. +'s method and pass the [**IgxGrid**](/grid/grid) as first argument. Here is an example: @@ -123,24 +123,24 @@ public exportButtonHandler() { The CSV Exporter supports several types of exporting formats. The export format may be specified: -- as a second argument of the objects's constructor -- using the object's property +- as a second argument of the objects's constructor +- using the object's property Different export formats have different file extensions and value delimiters. The following table maps the export formats and their respective file extensions and delimiters: | Format | File Extension | Default Delimiter | | :--- | :--- | :--- | -| | .csv | Comma | -| | .tab | Tab | -| | .tsv | Tab | +| | .csv | Comma | +| | .tab | Tab | +| | .tsv | Tab |
-You can also specify a custom delimiter using the objects's property. +You can also specify a custom delimiter using the objects's property. ## Customizing the Exported Content -In the above examples the CSV Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the and/or events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's property to `true`. +In the above examples the CSV Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the and/or events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's property to `true`. The following example will exclude a column from the export if its name is "Age" and if its index is 1: @@ -155,12 +155,12 @@ this.csvExportService.columnExporting.subscribe((args: IColumnExportingEventArgs this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedDataFile')); ``` -When you are exporting data from [**IgxGrid**](/grid/grid) the export process takes in account features like row filtering and column hiding and exports only the data visible in the grid. You can configure the exporter service to include filtered rows or hidden columns by setting properties on the object. These properties are described in the table below. +When you are exporting data from [**IgxGrid**](/grid/grid) the export process takes in account features like row filtering and column hiding and exports only the data visible in the grid. You can configure the exporter service to include filtered rows or hidden columns by setting properties on the object. These properties are described in the table below. ## API References The CSV Exporter service has a few more APIs to explore, which are listed below. -- -- +- +- Additional components that were used: - - diff --git a/docs/angular/src/content/en/components/exporter-excel.mdx b/docs/angular/src/content/en/components/exporter-excel.mdx index 431cc45766..4bc025389f 100644 --- a/docs/angular/src/content/en/components/exporter-excel.mdx +++ b/docs/angular/src/content/en/components/exporter-excel.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-The Ignite UI for Angular Excel Exporter service can export data in Microsoft® Excel® format from raw data (array) or from the [**IgxGrid**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid) and [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid) components. The exporting functionality is encapsulated in the class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. +The Ignite UI for Angular Excel Exporter service can export data in Microsoft® Excel® format from raw data (array) or from the [**IgxGrid**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid) and [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid) components. The exporting functionality is encapsulated in the class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc.
@@ -25,7 +25,7 @@ The Ignite UI for Angular Excel Exporter service can export data in Microsoft® ## Usage -To start using the IgniteUI Excel Exporter first import the in the app.module.ts file and add the service to the `providers` array: +To start using the IgniteUI Excel Exporter first import the in the app.module.ts file and add the service to the `providers` array: ```typescript // app.module.ts @@ -51,7 +51,7 @@ To initiate an export process you may use the handler of a button in your compon ``` -You may access the exporter service by defining an argument of type in the component's constructor and the Angular framework will provide an instance of the service. To export some data in MS Excel format you need to invoke the exporter service's method. This method accepts as a first argument the data you want to export and the second argument is of type and allows you to configure the export process. +You may access the exporter service by defining an argument of type in the component's constructor and the Angular framework will provide an instance of the service. To export some data in MS Excel format you need to invoke the exporter service's method. This method accepts as a first argument the data you want to export and the second argument is of type and allows you to configure the export process. Here is the code which will execute the export process in the component's typescript file: @@ -82,7 +82,7 @@ If all went well, you should see an export button. When pressed, it will trigger ## Customizing the Exported Content -In the above examples the Excel Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the and/or events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's property to `true`. +In the above examples the Excel Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the and/or events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's property to `true`. The following example will exclude a column from the export if its header is "Age" and if its index is 1: @@ -99,8 +99,8 @@ this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions('Expor ## API References The Excel Exporter service has a few more APIs to explore, which are listed below. -- -- +- +- Grids Excel Exporters: - [`IgxGrid Excel Exporters`](/grid/export-excel) - [`IgxTreeGrid Excel Exporters`](/treegrid/export-excel) diff --git a/docs/angular/src/content/en/components/exporter-pdf.mdx b/docs/angular/src/content/en/components/exporter-pdf.mdx index 803ef77b45..8b975ab781 100644 --- a/docs/angular/src/content/en/components/exporter-pdf.mdx +++ b/docs/angular/src/content/en/components/exporter-pdf.mdx @@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-The Ignite UI for Angular PDF Exporter service provides powerful functionality to export data in PDF format from various sources, including raw data arrays and advanced grid components such as [**IgxGrid**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid), [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid), and [**IgxPivotGrid**](/pivotGrid/pivot-grid). The exporting functionality is encapsulated in the class, which enables seamless data export to PDF format with comprehensive features including multi-page document support, automatic page breaks, and customizable formatting options. +The Ignite UI for Angular PDF Exporter service provides powerful functionality to export data in PDF format from various sources, including raw data arrays and advanced grid components such as [**IgxGrid**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid), [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid), and [**IgxPivotGrid**](/pivotGrid/pivot-grid). The exporting functionality is encapsulated in the class, which enables seamless data export to PDF format with comprehensive features including multi-page document support, automatic page breaks, and customizable formatting options.
@@ -24,7 +24,7 @@ The Ignite UI for Angular PDF Exporter service provides powerful functionality t ## Usage -To start using the Ignite UI PDF Exporter, first import the into your component: +To start using the Ignite UI PDF Exporter, first import the into your component: ```typescript import { IgxPdfExporterService } from 'igniteui-angular/grids/core'; @@ -43,7 +43,7 @@ To initiate an export process, you can use a button click handler in your compon ``` -You can access the by using the `inject` function. To export data in PDF format, you need to invoke the exporter service's method. This method accepts the data you want to export as its first argument, and an instance as its second argument, which allows you to configure the export process. +You can access the by using the `inject` function. To export data in PDF format, you need to invoke the exporter service's method. This method accepts the data you want to export as its first argument, and an instance as its second argument, which allows you to configure the export process. Here is the code that will execute the export process in the component's TypeScript file: @@ -75,7 +75,7 @@ If all went well, you should see an export button. When pressed, it will trigger ## Customizing the Exported Content -In the above examples, the PDF Exporter service exports all available data. However, there are situations where you may want to skip exporting a row or an entire column. To achieve this, you can subscribe to the and/or events, which are fired for each column and/or each row respectively. You can then cancel the export by setting the event argument object's property to `true`. +In the above examples, the PDF Exporter service exports all available data. However, there are situations where you may want to skip exporting a row or an entire column. To achieve this, you can subscribe to the and/or events, which are fired for each column and/or each row respectively. You can then cancel the export by setting the event argument object's property to `true`. The following example excludes a column from the export if its header is "Age" and its index is 1: @@ -92,7 +92,7 @@ this.pdfExportService.export(this.igxGrid1, new IgxPdfExporterOptions('ExportedD ## PDF Export Options -The class provides several properties to customize the PDF export: +The class provides several properties to customize the PDF export: - **pageOrientation**: Specifies the page orientation (`portrait` or `landscape`). Default is `landscape`. - **pageSize**: Specifies the page size (`a3`, `a4`, `a5`, `letter`, `legal`, etc.). Default is `a4`. @@ -202,8 +202,8 @@ The following fonts provide excellent Unicode coverage: ## API References The PDF Exporter service has a few more APIs to explore, which are listed below. -- -- +- +- Additional components that were used: - - diff --git a/docs/angular/src/content/en/components/for-of.mdx b/docs/angular/src/content/en/components/for-of.mdx index b653226073..7e24e3b6b8 100644 --- a/docs/angular/src/content/en/components/for-of.mdx +++ b/docs/angular/src/content/en/components/for-of.mdx @@ -22,7 +22,7 @@ The Ignite UI for Angular igxForOf directive is an alternative to ngForOf for te ## Getting Started with Ignite UI for Angular Virtual ForOf Directive -To get started with the Ignite UI for Angular directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: +To get started with the Ignite UI for Angular directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: ```cmd ng add igniteui-angular @@ -113,7 +113,7 @@ Virtualization works similarly to Paging by slicing the data into smaller chucks ``` -_**Note:**_ It is strongly advised that the parent container of the template has the following CSS rules applied: `height` for vertical and `width` for horizontal, `overflow: hidden` and `position: relative`. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible. +_**Note:**_ It is strongly advised that the parent container of the template has the following CSS rules applied: `height` for vertical and `width` for horizontal, `overflow: hidden` and `position: relative`. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible. ### Horizontal virtualization @@ -173,7 +173,7 @@ Follow the [Grid Virtualization](/grid/virtualization) topic for more detailed i ### igxFor bound to remote service -The directive can be bound to a remote service using the `Observable` property - `remoteData` (in the following case). The `chunkLoading` event should also be utilized to trigger the requests for data. +The directive can be bound to a remote service using the `Observable` property - `remoteData` (in the following case). The `chunkLoading` event should also be utilized to trigger the requests for data. ```html
@@ -190,7 +190,7 @@ The property in the instance of . +_**Note:**_ There is a requirement to set the property in the instance of . ```typescript this.virtDirRemote.totalItemCount = data['@odata.count']; @@ -203,7 +203,7 @@ In order to access the directive instance from the component, it should be marke public virtDirRemote: IgxForOfDirective; ``` -After the request for loading the first chunk, the can be set: +After the request for loading the first chunk, the can be set: ```typescript public ngAfterViewInit() { @@ -213,7 +213,7 @@ public ngAfterViewInit() { } ``` -When requesting data you can take advantage of the interface, which provides the and properties. Note that initially the chunkSize will be 0, so you have to specify the size of the first loaded chunk (the best value is the initial divided by the ). +When requesting data you can take advantage of the interface, which provides the and properties. Note that initially the chunkSize will be 0, so you have to specify the size of the first loaded chunk (the best value is the initial divided by the ). ```typescript public getData(data?: IForOfState, cb?: (any) => void): any { @@ -247,7 +247,7 @@ private buildUrl(dataState: any): string { } ``` -Every time the event is thrown, a new chunk of data should be requested: +Every time the event is thrown, a new chunk of data should be requested: ```typescript chunkLoading(evt) { @@ -279,7 +279,7 @@ The `igxFor` directive includes the following helper properties in its context: | `scrollTo` method does not work correctly when the content size of the rendered templates changes post initialization | When the elements inside the template have a size, that changes runtime after initialization (for example as a result of content projection, remote request resolution etc.), then the `scrollTo` method will not be able to scroll to the correct index. The method will scroll to the position of the index before the runtime size change occurs, hence the location will not be correct after the size is changed later. A possible workaround is to use templates that do not change their size based on their content if the content is loaded later. | ## API References -- +- - - ## Additional Resources diff --git a/docs/angular/src/content/en/components/general-changelog-dv.mdx b/docs/angular/src/content/en/components/general-changelog-dv.mdx index 31ba84f116..4c6b5b1386 100644 --- a/docs/angular/src/content/en/components/general-changelog-dv.mdx +++ b/docs/angular/src/content/en/components/general-changelog-dv.mdx @@ -78,9 +78,9 @@ Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and Proporti #### User Annotations -In Ignite UI for Angular, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. +In Ignite UI for Angular, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. -This is directly integrated with the available tools of the . +This is directly integrated with the available tools of the . Angular user-annotation-create @@ -88,8 +88,8 @@ This is directly integrated with the available tools of the -- +- +- ### igniteui-angular-maps (Geographic Map) @@ -110,7 +110,7 @@ Ability for axis annotations to automatically detect collisions and truncate to #### Azure Map Imagery Support -The `IgxGeographicMap` now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease. +The now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease. Note: Support for Bing Maps imagery is being phased out. Existing enterprise keys can still be used to access Bing Maps, ensuring your current applications continue to function while you transition to Azure maps. @@ -120,7 +120,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft #### New Axis Label Events -The following events have been added to the `IgxDataChart` to allow you to detect different operations on the axis labels: +The following events have been added to the to allow you to detect different operations on the axis labels: - `LabelMouseDown` - `LabelMouseUp` @@ -131,57 +131,56 @@ The following events have been added to the `IgxDataChart` to allow you to detec #### Companion Axis -Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties. +Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties. #### RadialPieSeries Inset Outlines -There is a new property called to control how outlines on the are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape. +There is a new property called to control how outlines on the are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape. **Breaking Changes** -- A fix was made due to an issue where the and properties on class were reversed. This will change the values that and return. +- A fix was made due to an issue where the and properties on class were reversed. This will change the values that and return. ### Enhancements #### IgxBulletGraph -- Added new property +- Added new property #### Charts - New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: `ToolTipBackground`, `ToolTipBorderBrush`, and `ToolTipBorderThickness` -- New properties added to the DataLegend to aid in styling: , , and . The and default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties. +- New properties added to the DataLegend to aid in styling: , , and . The and default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties. -- Added a new property to called that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space. +- Added a new property to called that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space. -- Added to and . This allows you to configure the opacity applied to highlighted series. +- Added to and . This allows you to configure the opacity applied to highlighted series. - Expose `CalloutLabelUpdating` event for domain charts. #### IgxLinearGauge -- Added new property +- Added new property ### Bug Fixes | Bug Number | Control | Description | |------------|---------|-------------| -|31624 | `IgxCategoryChart` | Resizing the containing window of the `IgxCategoryChart` causes the chart to fail to render the series| -|27304 | `IgxDataChart` | Zoom rectangle is not positioned the same as the background rectangle| -|37930 | `IgxDataChart` | Data Annotation Overlay Text Color not working| -|30600 | `IgxDoughnutChart` | No textStyle property for either the chart or series (pie chart has this)| +|31624 | | Resizing the containing window of the causes the chart to fail to render the series| +|27304 | | Zoom rectangle is not positioned the same as the background rectangle| +|37930 | | Data Annotation Overlay Text Color not working| +|30600 | | No textStyle property for either the chart or series (pie chart has this)| |38231 | `IgxGrid` | Unpinned column does not return to the original position if hidden columns exist| |33861 | Excel Library | Adding line chart corrupts excel File for German culture| - ## **20.0.1 (August 2025)** ### Bug Fixes | Bug Number | Control | Description | |------------|---------|------------------| -|36448 | `IgxRadialGauge` | Radial label format properties do not work. (eg. Title, SubTitles)| +|36448 | | Radial label format properties do not work. (eg. Title, SubTitles)| ### igniteui-angular-charts (Charts) @@ -211,17 +210,17 @@ For more details please visit: - Data Annotation Slice Layer - Data Annotation Strip Layer -- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure. +- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure. -- The property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within. +- The property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within. -- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text. +- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text. - [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart. ### igniteui-angular-dashboards (Dashboards) -- The `IgxDashboardTile` now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the `DataSource` of the `IgxDashboardTile` to an instance of `IgxLocalDataSource`. +- The now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the of the to an instance of `IgxLocalDataSource`. ### igniteui-angular @@ -242,8 +241,8 @@ For more details please visit: | Bug Number | Control | Description | |------------|---------|------------------| -|37023 | `IgxDataChart` | Tooltips are cut-off/offscreen if overflow hidden is set.| -|37685 | `IgxSpreadsheet` | Poor rendering of numbers formatted with Arial font.| +|37023 | | Tooltips are cut-off/offscreen if overflow hidden is set.| +|37685 | | Poor rendering of numbers formatted with Arial font.| |37244 | Excel Library | Custom Data Validation is not working.| ## **19.0.1 (February 2025)** @@ -252,9 +251,9 @@ For more details please visit: #### Toolbar -- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. -- Added new property on called which controls the horizontal alignment of the title text. -- Added new property on called which controls the spacing between items inside the panel. +- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. +- Added new property on called which controls the horizontal alignment of the title text. +- Added new property on called which controls the spacing between items inside the panel. ### Bug Fixes @@ -262,20 +261,19 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools | Bug Number | Control | Description | |------------|---------|------------------| -|30286 | `IgxDataChart` | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble| -|32906 | `IgxDataChart` | `IgxDataChart` is showing two xAxis on the top| -|33605 | `IgxDataChart` | ScatterLineSeries is not showing the color of the line correctly in the legend| -|35498 | `IgxDataChart` | Tooltips for the series specified in IncludedSeries are not displayed| -|34776 | `IgxDataChart` | Repeatedly showing and hiding the `IgxDataChart` causes memory leakage in JS Heap| -|34053 | `IgxRadialGauge` | The position of the scale label is shifted| -|35496 | `IgxSpreadsheet` | Error when setting styles in Excel with images| +|30286 | | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble| +|32906 | | is showing two xAxis on the top| +|33605 | | ScatterLineSeries is not showing the color of the line correctly in the legend| +|35498 | | Tooltips for the series specified in IncludedSeries are not displayed| +|34776 | | Repeatedly showing and hiding the causes memory leakage in JS Heap| +|34053 | | The position of the scale label is shifted| +|35496 | | Error when setting styles in Excel with images| |36176 | Excel Library | Exception occurs when loading an Excel workbook that has a LET function| |36379 | Excel Library | Colors with any alpha channel in an excel workbook fail to load| |26218 | Excel Library | Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file| |35495 | Excel Library | Pictures in cells are lost when a template file is loaded| |34083 | Excel Library | TextOperatorConditionalFormat's is not loaded/saved properly if the text contains = in a template Excel file| - ## **19.0.0 (January 2025)** - Angular 19 support. @@ -292,11 +290,11 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools ## **18.1.0 (September 2024)** -- [Data Pie Chart](charts/types/data-pie-chart.md) - The is a new component that renders a pie chart. This component works similarly to the , in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component. +- [Data Pie Chart](charts/types/data-pie-chart.md) - The is a new component that renders a pie chart. This component works similarly to the , in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component. -- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. +- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. -- +- - New ToolActionCheckboxList A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. @@ -315,67 +313,67 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools ### igniteui-angular-charts (Charts) -- [Data Legend Grouping](charts/features/chart-data-legend.md#angular-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#angular-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property toggles grouping with each series opting in can assign group text via the property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. +- [Data Legend Grouping](charts/features/chart-data-legend.md#angular-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#angular-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property toggles grouping with each series opting in can assign group text via the property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. -- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for and . Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. +- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for and . Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. -- [Treemap Highlighting](charts/types/treemap-chart.md#angular-treemap-highlighting) - Now exposes a property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the property. +- [Treemap Highlighting](charts/types/treemap-chart.md#angular-treemap-highlighting) - Now exposes a property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the property. -- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#angular-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`. +- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#angular-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`. -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### igniteui-angular-gauges (Gauges) -- - - New label for the highlight needle. and and many other styling related properties for the HighlightLabel were added. +- + - New label for the highlight needle. and and many other styling related properties for the HighlightLabel were added. ## **17.3.0 (March 2024)** ### igniteui-angular-charts -- New Data Filtering via the property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. +- New Data Filtering via the property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. - `RadialChart` - New Label Mode - The for the now exposes a property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. + The for the now exposes a property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. ### igniteui-angular-gauges -- - - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position. - - New and properties for the . This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling) - - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. -- - - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. -- - - The Performance bar will now reflect a difference between the value and new when the is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. +- + - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position. + - New and properties for the . This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling) + - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- + - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- + - The Performance bar will now reflect a difference between the value and new when the is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. ## **17.2.0 (January 2024)** ### igniteui-angular-charts (Charts) -- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The and now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. +- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The and now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. ## **17.0.0 (November 2023)** ### igniteui-angular - Toolbar - - Save tool action has been added to save the chart to an image via the clipboard. -- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. ## **16.1.0 (June 2023)** ### New Components -- [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our or components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. +- [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our or components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. ### igniteui-angular-charts (Charts) -- [ValueLayer](charts/features/chart-overlays.md#angular-value-layer) - A new series type named the is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the and by adding to the new collection. +- [ValueLayer](charts/features/chart-overlays.md#angular-value-layer) - A new series type named the is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the and by adding to the new collection. -- It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#angular-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#angular-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#angular-chart-trendlines-dash-array-example) of the series plotted in the chart. +- It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#angular-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#angular-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#angular-chart-trendlines-dash-array-example) of the series plotted in the chart. ## **16.0.0 (May 2023)** - Angular 16 support. @@ -390,7 +388,7 @@ Added significant improvements to default behaviors, and refined the Category Ch - Responsive layouts for horizontal label rotation based on browser / screen size. - Enhanced rendering for rounded labels on all platforms. - Added marker properties to StackedFragmentSeries. -- Added property. +- Added property. - New Category Axis Properties: - ZoomMaximumCategoryRange - ZoomMaximumItemSpan @@ -410,27 +408,25 @@ Added significant improvements to default behaviors, and refined the Category Ch - GroupSorts - GroupSortDescriptions - -The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using | because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. +The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using | because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. ## **13.2.0 (June 2022)** ### igniteui-angular-charts (Charts) -- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the , but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. +- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the , but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. - Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. -- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place. -- Added `AssigningCategoryStyle` event, is now available to all series in . This event is handled when you want to conditionally configure aspects of the series items such as background-color and highlighting. -- New enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. +- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place. +- Added `AssigningCategoryStyle` event, is now available to all series in . This event is handled when you want to conditionally configure aspects of the series items such as background-color and highlighting. +- New enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. - New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. - - for CalloutLayer - - for FinalValueLayer - - and for CrosshairLayer -- New and enumeration to enable scrollbars in various ways. When paired with or , you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart. -- New , determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. , , `PercentChangeAxis`). -- New determines whether to include the spline shape in the axis range requested of the axis. -- New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series. -- New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category. - + - for CalloutLayer + - for FinalValueLayer + - and for CrosshairLayer +- New and enumeration to enable scrollbars in various ways. When paired with or , you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart. +- New , determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. , , `PercentChangeAxis`). +- New determines whether to include the spline shape in the axis range requested of the axis. +- New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series. +- New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category. ## **13.1.0 (November 2021)** @@ -442,63 +438,62 @@ Please ensure package "lit-html": "^2.0.0" or newer is added to your project for This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components. -- Changed property's type to **YAxisLabelLocation** from **AxisLabelLocation** in and -- Changed property's type to **XAxisLabelLocation** from **AxisLabelLocation** in -- Added property to -- Added support for representing geographic series of in a legend -- Added crosshair lines by default in and -- Added crosshair annotations by default in and -- Added final value annotation by default in +- Changed property's type to **YAxisLabelLocation** from **AxisLabelLocation** in and +- Changed property's type to **XAxisLabelLocation** from **AxisLabelLocation** in +- Added property to +- Added support for representing geographic series of in a legend +- Added crosshair lines by default in and +- Added crosshair annotations by default in and +- Added final value annotation by default in - Added new properties in Category Chart and Financial Chart: - - and other properties for customizing crosshairs lines - - and other properties for customizing crosshairs annotations - - and other properties for customizing final value annotations - - that allow changing opacity of series fill (e.g. Area chart) - - that allows changing thickness of markers + - and other properties for customizing crosshairs lines + - and other properties for customizing crosshairs annotations + - and other properties for customizing final value annotations + - that allow changing opacity of series fill (e.g. Area chart) + - that allows changing thickness of markers - Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map: - - that allows which marker type is assigned to multiple series in the same chart - - for setting badge shape of all series represented in a legend - - for setting badge complexity on all series in a legend + - that allows which marker type is assigned to multiple series in the same chart + - for setting badge shape of all series represented in a legend + - for setting badge complexity on all series in a legend - Added new properties in Series in Data Chart and Geographic Map: - - for setting badge shape on specific series represented in a legend - - for setting badge complexity on specific series in a legend + - for setting badge shape on specific series represented in a legend + - for setting badge complexity on specific series in a legend - Changed default vertical crosshair line stroke from #000000 to #BBBBBB in category chart and series -- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's property to `SmartIndexed` enum value -- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's property to `MatchSeries` enum value +- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's property to `SmartIndexed` enum value +- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's property to `MatchSeries` enum value - Changed color palette of series and markers displayed in all charts to improve accessibility | Old brushes/outlines | New outline/brushes | | -------------------- | ------------------- | | #8BDC5C
#8B5BB1
#6DB1FF
#F8A15F
#EE5879
#735656
#F7D262
#8CE7D9
#E051A9
#A8A8B7 | #8BDC5C
#8961A9
#6DB1FF
#82E9D9
#EA3C63
#735656
#F8CE4F
#A8A8B7
#E051A9
#FF903B
| - ## **11.2.0 (April 2021)** ### igniteui-angular-charts (Charts) -This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. , , and . +This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. , , and . - Changed Bar/Column/Waterfall series to have square corners instead of rounded corners - Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000 - Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879 - Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from #C62828 to #ee5879 - Changed marker's thickness to 2px from 1px -- Changed marker's fill to match the marker's outline for , , , . You can use set property to Normal to undo this change -- Compressed labelling for the and +- Changed marker's fill to match the marker's outline for , , , . You can use set property to Normal to undo this change +- Compressed labelling for the and - New Marker Properties: - - series. - Can be set to `MatchMarkerOutline` so the marker depends on the outline - - series. - Can be set to a value 0 to 1 - - series. - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color + - series. - Can be set to `MatchMarkerOutline` so the marker depends on the outline + - series. - Can be set to a value 0 to 1 + - series. - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color - New Series Property: - - series. - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series -- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart: - - chart. - - chart. - - chart. - - chart. - - chart. + - series. - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series +- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart: + - chart. + - chart. + - chart. + - chart. + - chart. - New Highlighting Properties - - chart. - Sets whether hovered or non-hovered series to fade, brighten - - chart. - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item + - chart. - Sets whether hovered or non-hovered series to fade, brighten + - chart. - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item - Note, in previous releases the highlighting was limited to fade on hover. - Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series: - Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series: @@ -521,8 +516,8 @@ for example: #### Chart Legend -- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart -- Added property - Enables series highlighting when hovering over legend items +- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added property - Enables series highlighting when hovering over legend items ### igniteui-angular-maps (GeoMap) @@ -535,7 +530,6 @@ These features are CTP - Added support for highlighting of the shape series - Added support for some annotation layers for the shape series - ## **8.2.12** - Changed Import Statements @@ -561,8 +555,6 @@ Now, you need to use just package names instead of full paths to API classes and Please also note that the name of the Data Grid component and its corresponding modules have also changed. - - ```ts // gauges: import { IgxLinearGauge } from "igniteui-angular-gauges"; @@ -582,14 +574,10 @@ import { IgxGeographicMapComponent } from "igniteui-angular-maps"; import { IgxGeographicMapModule } from "igniteui-angular-maps"; ``` - - - Code Before Changes Before, you had to import using full paths to API classes and enums: - - ```ts // gauges: import { IgxLinearGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-component'; @@ -611,5 +599,3 @@ import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-cha import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geographic-map-component"; import { IgxGeographicMapModule } from "igniteui-angular-maps/ES5/igx-geographic-map-module"; ``` - - diff --git a/docs/angular/src/content/en/components/general/data-analysis.mdx b/docs/angular/src/content/en/components/general/data-analysis.mdx index 4c30cf821c..ab56169560 100644 --- a/docs/angular/src/content/en/components/general/data-analysis.mdx +++ b/docs/angular/src/content/en/components/general/data-analysis.mdx @@ -165,7 +165,7 @@ Understanding conditional formatting - it allows for applying formatting such as | `formatter`: **string** | An **input** property, which sets/gets the current formatting type | | | `formatColors` | An **input** property, which sets/gets the current formatting colors | `val`: _IFormatColors_ | | `onFormattersReady`| An **event**, which emits the applicable `formatting types` for the selected data, when they are determined. | | -| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [ ],
`reset`: boolean (**true** by default) | +| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [ ],
`reset`: boolean (**true** by default) | | `clearFormatting` | Removes the conditional formatting from the selected cells. Usage:
**this.conditionalFormatting.clearFormatting()** | | ### IgxChartIntegrationDirective diff --git a/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx b/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx index fb9f1afa0e..bc29681867 100644 --- a/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx +++ b/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx @@ -185,7 +185,7 @@ Go to [Batch Editing](/grid/batch-editing) for more details and demo samples. You can see and learn more about default cell editing templates in the [general editing topic](/grid/editing#editing-templates). -If you want to provide a custom template which will be applied when a cell is in edit mode, you can make use of the . To do this, you need to pass an `ng-template` marked with the `igxCellEditor` directive and properly bind your custom control to the : +If you want to provide a custom template which will be applied when a cell is in edit mode, you can make use of the . To do this, you need to pass an `ng-template` marked with the `igxCellEditor` directive and properly bind your custom control to the : ```html @@ -207,14 +207,14 @@ The grid exposes a wide array of events that provide greater control over the ed | Event | Description | Arguments | Cancellable | | :----------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- | :---------- | -| | If `rowEditing` is enabled, fires when a row enters edit mode | | `true` | -| | Fires when a cell **enters edit mode** (after `rowEditEnter`) | | `true` | -| | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | | `true` | -| | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | | `false` | -| | Fires when a cell **exits edit mode** | | `false` | -| | If `rowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | | `true` | -| | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | | `false` | -| | If `rowEditing` is enabled, fires when a row **exits edit mode** | | `false` | +| | If `rowEditing` is enabled, fires when a row enters edit mode | | `true` | +| | Fires when a cell **enters edit mode** (after `rowEditEnter`) | | `true` | +| | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | | `true` | +| | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | | `false` | +| | Fires when a cell **exits edit mode** | | `false` | +| | If `rowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | | `true` | +| | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | | `false` | +| | If `rowEditing` is enabled, fires when a row **exits edit mode** | | `false` | Go to [Events](/grid/editing#event-arguments-and-sequence) for more details and demo samples. @@ -227,7 +227,7 @@ Updating data in the grid is achieved through methods exposed both by the grid: - - -and `update` method exposed by the and instances: +and `update` method exposed by the and instances: ```typescript // Through the grid methods @@ -251,9 +251,9 @@ Enabling CRUD in a robust way is major milestone for any data-driven application ## API References - -- -- +- +- - -- +- - - diff --git a/docs/angular/src/content/en/components/general/update-guide.mdx b/docs/angular/src/content/en/components/general/update-guide.mdx index f46fa16133..00f915f818 100644 --- a/docs/angular/src/content/en/components/general/update-guide.mdx +++ b/docs/angular/src/content/en/components/general/update-guide.mdx @@ -434,8 +434,8 @@ When selected row is deleted from the grid component, `rowSelectionChanging` eve - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` - Parameters in grid templates now have types for their context. This can also cause issues if the app is in strict template mode and uses the wrong type. References to the template that may require conversion: - - `IgxColumnComponent` - (for example the column parameter in `igxFilterCellTemplate`) - - `IgxGridCell` - (for example the cell parameter in `igxCell` template) + - `IgxColumnComponent` - (for example the column parameter in `igxFilterCellTemplate`) + - `IgxGridCell` - (for example the cell parameter in `igxCell` template) - Ignite UI for Angular has a dependency on [igniteui-theming](https://github.com/IgniteUI/igniteui-theming). Add the following preprocessor configuration in your `angular.json` file. ```json @@ -985,7 +985,7 @@ To get a better grasp on the Sass Module System, you can read [this great articl - _IgxGridCellComponent_, _IgxTreeGridCellComponent_, _IgxHierarchicalGridCellComponent_, _IgxGridExpandableCellComponent_ are no longer exposed in the public API. -- Public APIs, which used to return an instance of one of the above, now return an instance of : +- Public APIs, which used to return an instance of one of the above, now return an instance of : ```ts const cell = grid.getCellByColumn(0, 'ProductID'); // returns IgxGridCell @@ -996,13 +996,13 @@ const selectedCells = grid.selectedCells; // returns IgxGridCell[] const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[] ``` -- `cell` property in the `IGridCellEventArgs` event arguments emitted by _cellClick_, _selected_, _contextMenu_ and _doubleClick_ events is now an instance of +- `cell` property in the `IGridCellEventArgs` event arguments emitted by _cellClick_, _selected_, _contextMenu_ and _doubleClick_ events is now an instance of - `let-cell` property in cell template is now `IgxGridCell`. - `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead. Please note: -- _ng update_ will migrate the uses of _IgxGridCellComponent_, _IgxTreeGridCellComponent_, _IgxHierarchicalGridCellComponent_, _IgxGridExpandableCellComponent_, like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with . +- _ng update_ will migrate the uses of _IgxGridCellComponent_, _IgxTreeGridCellComponent_, _IgxHierarchicalGridCellComponent_, _IgxGridExpandableCellComponent_, like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with . - _getCellByIndex_ and other methods will return undefined, if the row at that index is not a data row, but is IgxGroupByRow, IgxSummaryRow, details row, etc. ### Themes @@ -1229,7 +1229,7 @@ The was completely refactor ### IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent - _IgxGridRowComponent_, _IgxTreeGridRowComponent_, _IgxHierarchicalRowComponent_, _IgxGridGroupByRowComponent_ are no longer exposed in the public API. -- Public APIs, which used to return an instance of one of the above, now return objects implementing the public interface: +- Public APIs, which used to return an instance of one of the above, now return objects implementing the public interface: ```ts const row = grid.getRowByIndex(0); @@ -1237,9 +1237,9 @@ const row = grid.getRowByKey(2); const row = cell.row; ``` -While the public API of is the same as what _IgxRowComponent_ and others used to expose, please note: +While the public API of is the same as what _IgxRowComponent_ and others used to expose, please note: -- _toggle_ method, exposed by the _IgxHierarchicalRowComponent_ is not available. Use property for all row types: +- _toggle_ method, exposed by the _IgxHierarchicalRowComponent_ is not available. Use property for all row types: ```ts grid.getRowByIndex(0).expanded = false; @@ -1247,9 +1247,9 @@ grid.getRowByIndex(0).expanded = false; *row.rowData_ and _row.rowID_ are deprecated and will be entirely removed with version 13. Please use _row.data_ and _row.key_ instead. -- _row_ property in the event arguments emitted by _onRowPinning_, and _dragData_ property in the event arguments emitted by _onRowDragStart_, _onRowDragEnd_ is now implementing -- _ng update_ will migrate most of the uses of _IgxGridRowComponent_, _IgxTreeGridRowComponent_, _IgxHierarchicalRowComponent_, _IgxGridGroupByRowComponent_ , like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with . -- _getRowByIndex_ will now return a object, if the row at that index is a summary row (previously used to returned _undefined_). _row.isSummaryRow_ and _row.isGroupByRow_ return true if the row at the index is a summary row or a group by row. +- _row_ property in the event arguments emitted by _onRowPinning_, and _dragData_ property in the event arguments emitted by _onRowDragStart_, _onRowDragEnd_ is now implementing +- _ng update_ will migrate most of the uses of _IgxGridRowComponent_, _IgxTreeGridRowComponent_, _IgxHierarchicalRowComponent_, _IgxGridGroupByRowComponent_ , like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with . +- _getRowByIndex_ will now return a object, if the row at that index is a summary row (previously used to returned _undefined_). _row.isSummaryRow_ and _row.isGroupByRow_ return true if the row at the index is a summary row or a group by row. ### IgxInputGroupComponent diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx index 3fab98f535..88065cd552 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx @@ -15,12 +15,8 @@ With the Ignite UI for Angular map component, you can plot geographic data loade ## Angular Binding CSV Files with Geographic Locations Example - - - - ## Data Example Here is an example of data from CSV file: @@ -30,13 +26,8 @@ New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227 Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650 ``` - - ## Code Snippet -The following code loads and binds in the map component to an array of objects created from loaded CSV file with geographic locations. - - - +The following code loads and binds in the map component to an array of objects created from loaded CSV file with geographic locations. ```html
@@ -60,9 +51,6 @@ The following code loads and binds + diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx index 34eda3ee6c..7eb7a86fe2 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx @@ -15,12 +15,8 @@ With the Ignite UI for Angular map, you can plot geographic data loaded from var ## Angular Binding JSON Files with Geographic Locations Example - - - - ## Data Example Here is an example of data from JSON file: @@ -34,9 +30,7 @@ Here is an example of data from JSON file: ``` ## Code Snippet -The following code loads and binds in the map component to an array of objects created from loaded JSON file with geographic locations: - - +The following code loads and binds in the map component to an array of objects created from loaded JSON file with geographic locations: ```html
@@ -54,9 +48,6 @@ The following code loads and binds - - - - - + + + + + + diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx index 083d84bec6..50f49a6aa9 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx @@ -11,32 +11,26 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Binding Geographic Data Models -The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects. +The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects. ## Angular Binding Geographic Data Models Example - - - - The following table summarized data structures required for each type of geographic series: | Geographic Series | Properties | Description | |--------------|---------------| ---------------| -| | , | Specifies names of 2 numeric longitude and latitude coordinates | -| | , | Specifies names of 2 numeric longitude and latitude coordinates | -| | , , | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols | -| | , , | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -| | , , | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -|||Specifies the name of data column of items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | -|||Specifies the name of data column of items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | +| | , | Specifies names of 2 numeric longitude and latitude coordinates | +| | , | Specifies names of 2 numeric longitude and latitude coordinates | +| | , , | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols | +| | , , | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +| | , , | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +|||Specifies the name of data column of items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | +|||Specifies the name of data column of items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | ## Code Snippet -The following code shows how to bind the to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the to plot shortest geographic path between these locations using the [WorldUtility](geo-map-resources-world-util.md) - - +The following code shows how to bind the to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the to plot shortest geographic path between these locations using the [WorldUtility](geo-map-resources-world-util.md) ```html
@@ -68,9 +62,6 @@ The following code shows how to bind the - - - - - + + + + + + diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx index fb96398f8f..aa028be59c 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx @@ -10,7 +10,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Data Binding -The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The property of geographic series is used for the purpose of binding to data models. +The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The property of geographic series is used for the purpose of binding to data models. ## Types of Data Sources The following section list some of data source that you can bind in the geographic map component @@ -21,6 +21,5 @@ The following section list some of data source that you can bind in the geograph - [Binding Data Models](geo-map-binding-data-model.md) - [Binding Multiple Sources](geo-map-binding-multiple-sources.md) - ## API References - + diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx index 4f3020b29a..9dd9d363d0 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Binding Multiple Data Shapes | Infragistics" description: Use Infragistics' Angular to add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. View Ignite UI for Angular map tutorials! keywords: "Angular map, shape files, Ignite UI for Angular, Infragistics, data binding" @@ -11,21 +11,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Binding and Overlaying Multiple Shape Files -In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, for plotting geographic locations of ports, the for plotting routes between ports, and the for plotting shapes of countries. +In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, for plotting geographic locations of ports, the for plotting routes between ports, and the for plotting shapes of countries. ## Angular Binding and Overlaying Multiple Shape Files Example - +This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about object. - - -This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about object. - -- – displays locations of major cities -- – displays routes between major ports -- – displays shapes of countries of the world +- – displays locations of major cities +- – displays routes between major ports +- – displays shapes of countries of the world You can use geographic series in above or other combinations to plot desired data. @@ -33,9 +29,6 @@ You can use geographic series in above or other combinations to plot desired dat First, let's import required components and modules: - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; @@ -44,15 +37,10 @@ import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; import { IgxShapeDataSource } from 'igniteui-angular-core'; ``` - - - ## Creating Series Next, we need to create a map with a few Geographic Series that will later load different type of shapefile. - - ```html
@@ -108,15 +96,9 @@ Next, we need to create a map with a few Geographic Series that will later load ``` - - - ## Loading Shapefiles -Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component. - - - +Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component. ```ts const sdsPolygons = new IgxShapeDataSource(); @@ -136,12 +118,9 @@ sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf"; sdsLocations.dataBind(); ``` - - - ## Processing Polygons -Process shapes data loaded in with of countries of the world and assign it to object. +Process shapes data loaded in with of countries of the world and assign it to object. ```ts import { IgrGeographicShapeSeries } from 'igniteui-react-maps'; @@ -220,7 +199,7 @@ public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) { ## Processing Polyline -Process shapes data loaded in with communication routes between major cities and assign it to object. +Process shapes data loaded in with communication routes between major cities and assign it to object. ```ts import { IgrGeographicPolylineSeries } from 'igniteui-react-maps'; @@ -307,7 +286,7 @@ public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) { ## Processing Points -Process shapes data loaded in with locations of major cities and assign it to object. +Process shapes data loaded in with locations of major cities and assign it to object. ```ts import { IgrGeographicSymbolSeries } from 'igniteui-react-maps'; @@ -391,16 +370,10 @@ public onPointsLoaded(sds: IgcShapeDataSource, e: any) { } ``` - - - ## Map Background Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application. - - - ```ts public geoMap: IgxGeographicMapComponent; // ... @@ -408,15 +381,10 @@ public geoMap: IgxGeographicMapComponent; this.geoMap.backgroundContent = {}; ``` - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -545,11 +513,8 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit { } ``` - - - ## API References - - - - + + + + diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx index ef281ee9c1..3b18d0b184 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx @@ -10,22 +10,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Binding Multiple Data Sources -In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, for plotting geographic locations of airports, the for plotting flights between airports, and 2nd for plotting gridlines of major geographic coordinates. - +In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, for plotting geographic locations of airports, the for plotting flights between airports, and 2nd for plotting gridlines of major geographic coordinates. ## Angular Binding Multiple Data Sources Example - - - - This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data: -- – displays locations of major airports -- – displays flights between airports -- – displays gridlines of major coordinates +- – displays locations of major airports +- – displays flights between airports +- – displays gridlines of major coordinates You can use geographic series in this or other combinations to plot desired data. @@ -33,9 +28,6 @@ You can use geographic series in this or other combinations to plot desired data Create data sources for all geographic series that you want to display in the Ignite UI for Angular map. For example, you can the use [WorldConnections](geo-map-resources-world-connections.md) script. - - - ```html
``` - - - ## Overlaying Flights -Create first object with flight connections between major airports and add it to the Series collection of the Ignite UI for Angular map. - - +Create first object with flight connections between major airports and add it to the Series collection of the Ignite UI for Angular map. ```html object with ``` - - - ## Overlaying Gridlines -Create second object with geographic gridlines and add it to the Series collection of the Ignite UI for Angular map. - - +Create second object with geographic gridlines and add it to the Series collection of the Ignite UI for Angular map. ```html object with ``` - - - ## Overlaying Airports -Create object with airport points and add it to the Series collection of the geographic Ignite UI for Angular map. - - +Create object with airport points and add it to the Series collection of the geographic Ignite UI for Angular map. ```html object with airport ``` - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { MarkerType } from 'igniteui-angular-charts'; @@ -225,9 +197,6 @@ export class MapBindingMultipleSourcesComponent implements AfterViewInit { } ``` - - - ## API References - - + + diff --git a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx index 0fd2489f00..6ea68e0cfe 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Binding Geographic Shape Files | Infragistics" description: Use Infragistics' Angular JavaScript map to load geo-spatial data from shape files. View Ignite UI for Angular map demos! keywords: "Angular map, shapefiles, Ignite UI for Angular, Infragistics, data binding" @@ -10,19 +10,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Binding Shape Files with Geo-spatial Data -The Ignite UI for Angular map component, the class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of `IgxShapefileRecord` objects. - +The Ignite UI for Angular map component, the class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of `IgxShapefileRecord` objects. ## Angular Binding Shape Files with Geo-spatial Data Example - - - - -The following table explains properties of the class for loading shape files. - +The following table explains properties of the class for loading shape files. | Property | Type | Description | |----------|------|---------------| @@ -32,16 +26,13 @@ The following table explains properties of the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with `IgxShapefileRecord` objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. +When both source properties are set to non-null values, then the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with `IgxShapefileRecord` objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. ## Loading Shapefiles -The following code creates an instance of the object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component. - - - +The following code creates an instance of the object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component. ## Binding Shapefiles -In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an property which can be bound to an array of objects. The is an example such array because it contains a list of `IgxShapefileRecord` objects. +In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an property which can be bound to an array of objects. The is an example such array because it contains a list of `IgxShapefileRecord` objects. The `ShapefileRecord` class provides properties for storing geo-spatial data, listed in the following table. @@ -53,10 +44,8 @@ The `ShapefileRecord` class provides properties for storing geo-spatial data, li This data structure is suitable for use in most Geographic Series as long as appropriate data columns are mapped to them. ## Code Snippet -This code example assumes that shape files were loaded using the . -The following code binds in the map component to the and maps the `Points` property of all `IgxShapefileRecord` objects. - - +This code example assumes that shape files were loaded using the . +The following code binds in the map component to the and maps the `Points` property of all `IgxShapefileRecord` objects. ```html
@@ -80,9 +69,6 @@ The following code binds ``` - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -142,13 +128,10 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { } ``` - - - ## API References - - - - - - + + + + + + diff --git a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx index fdbf61d5a0..4fa0195cd4 100644 --- a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx @@ -15,22 +15,16 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; # Angular Imagery from Azure Maps -The Angular is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The Ignite UI for Angular map component can display geographic imagery from Azure Maps in the map’s background content using the class. +The Angular is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The Ignite UI for Angular map component can display geographic imagery from Azure Maps in the map’s background content using the class. ## Angular Displaying Imagery from Azure Maps - Overview - AzureMapsImagery - - - ## Angular Displaying Imagery from Azure Maps - Code Example -The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular using class. - - +The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular using class. ```html ``` - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxAzureMapsImagery } from 'igniteui-angular-maps'; @@ -56,12 +47,9 @@ tileSource.imageryStyle = AzureMapsImageryStyle.Road; //or Traffic & Weather etc this.map.backgroundContent = tileSource; ``` - - - ## Angular Overlaying Imagery from Azure Maps - Overview -When working with the , you can combine **overlays** (traffic, weather, labels) on top of a **base map style** such as eg. **Satellite**, **Road**, or **DarkGrey**. Using **TerraOverlay** with eg. **Satellite** to visualize terrain. +When working with the , you can combine **overlays** (traffic, weather, labels) on top of a **base map style** such as eg. **Satellite**, **Road**, or **DarkGrey**. Using **TerraOverlay** with eg. **Satellite** to visualize terrain. - **Base Styles**: Satellite, Road, Terra, and DarkGrey provide the core background tiles. - **Overlay Styles**: Traffic and Weather imagery (e.g., `TrafficRelativeOverlay`, `WeatherRadarOverlay`) are designed to be layered on top of a base style by assigning them to a tile series. @@ -74,11 +62,8 @@ This design allows you to build richer maps, for example: Azure Traffic Tile Series With Background - ## Angular Overlaying Imagery from Azure Maps - Code Example -The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular using and classes. - - +The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular using and classes. ```html @@ -86,9 +71,6 @@ The following code snippet shows how to display geographic imagery tiles on top ``` - - - ```ts export class AppComponent implements AfterViewInit { @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent; @@ -113,18 +95,14 @@ export class AppComponent implements AfterViewInit { } ``` - - - ## Properties -The following table summarizes properties of the class: +The following table summarizes properties of the class: | Property Name | Property Type | Description | |----------------|-----------------|---------------| -||string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| -||`IgxAzureMapsImageryStyle`|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following `IgxAzureMapsImageryStyle` enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
| - +||string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| +||`IgxAzureMapsImageryStyle`|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following `IgxAzureMapsImageryStyle` enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
| ## API References - - + + diff --git a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx index 39902fe13b..5f03c0ba19 100644 --- a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx @@ -19,20 +19,15 @@ For more details: [Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) -The Angular is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the class. +The Angular is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the class. ## Angular Displaying Imagery from Bing Maps Example - {/**/} Angular Bing Maps Imagery - - ## Code Snippet -The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular using class. - - +The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular using class. ```html ``` - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxBingMapsMapImagery } from 'igniteui-angular-maps'; @@ -68,25 +60,21 @@ tileSource.bingImageryRestUri = tileUri; this.map.backgroundContent = tileSource; ``` - - - ## Properties -The following table summarized properties of the class: +The following table summarized properties of the class: | Property Name | Property Type | Description | |----------------|-----------------|---------------| -||string|Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website.| -|||Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following enumeration values:
  • Aerial - Specifies the Aerial map style without road or labels overlay
  • AerialWithLabels - Specifies the Aerial map style with road and labels overlay
  • Road - Specifies the Roads map style without Aerial overlay
| -||string|Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.| -||string|Represents a property for setting the culture name for the tile source.| -||boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.| -||boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.| -||`SubDomainsCollection`|Represents an image collection of URI sub domains| -||string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps| - +||string|Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website.| +|||Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following enumeration values:
  • Aerial - Specifies the Aerial map style without road or labels overlay
  • AerialWithLabels - Specifies the Aerial map style with road and labels overlay
  • Road - Specifies the Roads map style without Aerial overlay
| +||string|Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.| +||string|Represents a property for setting the culture name for the tile source.| +||boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.| +||boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.| +|||Represents an image collection of URI sub domains| +||string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps| ## API References - - - + + + diff --git a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx index 1bc99c6b9a..e831f94a68 100644 --- a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx @@ -10,20 +10,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Displaying Imagery from Esri Maps -The is a free geographic imagery mapping service created by Esri company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on www.arcgisonline.com web site. +The is a free geographic imagery mapping service created by Esri company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on www.arcgisonline.com web site. ## Angular Displaying Imagery from Esri Maps Example - - - - ## Code Snippet -The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in using class. - - +The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in using class. ```html ``` - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps'; @@ -48,14 +39,9 @@ tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/service this.geoMap.backgroundContent = tileSource; ``` - - - ## Esri Utility Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which defines all styles provided by Esri imagery servers. - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps'; @@ -69,9 +55,6 @@ tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap); this.geoMap.backgroundContent = tileSource; ``` - - - ## API References - - + + diff --git a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx index c406c1dfb7..a6fe591fe2 100644 --- a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Infragistics" description: Use Infragistics' Angular JavaScript map to display heat map imagery. Check out Ignite UI for Angular map demos! keywords: "Angular map, heat map imagery, Ignite UI for Angular, Infragistics" @@ -10,7 +10,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Displaying Heat Imagery -The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the that are generated by a by loading geo-spatial data by loading shape files to a tile series. +The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the that are generated by a by loading geo-spatial data by loading shape files to a tile series. It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](geo-map-binding-shp-file.md) topic as a pre-requisite to this topic. @@ -18,22 +18,17 @@ It is highly recommended that you review the [Binding Shape Files with Geo-Spati +When a loads its shape files, it converts that data into objects. These objects can be retrieved from the `GetPointData()` method of the and can then be used to create a heat-map through usage of a object with a assigned to its property. This can then be used in a as its source. +The object works such that it has three value paths, , and . As an example of how these could be used, in the case of a shape file that has information about population, you could consider the to be longitude, to be latitude, and to be the population data. Each of these properties takes a `number[]`. +The display of the geographic tile series when using the heat-map functionality can be customized by setting the and properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the property of the . You can further customize this by setting the property of the generator to contain a collection of strings that describe colors, as this will tell the what colors to use for the displayed values in the map. It is also possible to customize how colors in your collection blur together by using the , , and properties. -When a loads its shape files, it converts that data into objects. These objects can be retrieved from the `GetPointData()` method of the and can then be used to create a heat-map through usage of a object with a assigned to its `TileGenerator` property. This can then be used in a as its `TileImagery` source. - -The object works such that it has three value paths, `XValues`, `YValues` and `Values`. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the `XValues` to be longitude, `YValues` to be latitude, and `Values` to be the population data. Each of these properties takes a `number[]`. - -The display of the geographic tile series when using the heat-map functionality can be customized by setting the `MinimumColor` and `MaximumColor` properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the `Values` property of the . You can further customize this by setting the `ScaleColors` property of the generator to contain a collection of strings that describe colors, as this will tell the what colors to use for the displayed values in the map. It is also possible to customize how colors in your `ScaleColors` collection blur together by using the `BlurRadius`, `MaxBlurRadius`, and `UseBlurRadiusAdjustedForZoom` properties. - -The can also use a logarithmic scale. If you want to use this, you can set the `UseLogarithmicScale` property to **true**. - +The can also use a logarithmic scale. If you want to use this, you can set the property to **true**. ## Web Worker -The `HeatTileGenerator` also has support for web workers to do the heavy lifting of the loading of the tile imagery from your shape file on a separate thread. This can greatly improve the performance of your geographic map when using the heat-map functionality. In order to use a web worker with the generator, you can set the `UseWebWorkers` property to **true** and then set the `WebWorkerInstance` property to an instance of your web worker. - +The also has support for web workers to do the heavy lifting of the loading of the tile imagery from your shape file on a separate thread. This can greatly improve the performance of your geographic map when using the heat-map functionality. In order to use a web worker with the generator, you can set the property to **true** and then set the property to an instance of your web worker. ```ts // heatworker.worker.ts @@ -47,10 +42,8 @@ function heatWorkerPostMessage() { } HeatTileGeneratorWebWorker.start(); export default {} as typeof Worker & (new () => Worker); -``` - - +``` ```ts import { IgxHeatTileGenerator } from 'igniteui-angular-core'; @@ -59,25 +52,16 @@ import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; ``` - - - ## Creating Heatmap The following code snippet shows how to display a population based heat-map in the Ignite UI for Angular map component: - - - ```html ``` - - - ```ts @ViewChild("map", { static: true }) public map: IgxGeographicMapComponent; @@ -142,12 +126,9 @@ constructor() { } ``` - - - ## API References - - - - - + + + + + diff --git a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx index 3bcb8070cf..2e0ef4982e 100644 --- a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx @@ -24,34 +24,33 @@ The following table summarizes supported and custom geographic imagery sources f {/*| Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
  • Satellite Map Style
  • Road Map Style
*/} ## Map Background Content -The map component's property is used to display all supported types of geographic imagery sources. For each imagery source, there is an imagery class used for rendering corresponding geographic imagery tiles. +The map component's property is used to display all supported types of geographic imagery sources. For each imagery source, there is an imagery class used for rendering corresponding geographic imagery tiles. The following table summarizes imagery classes provided by the map component. | Imagery Class | Description | |---------------|---------------| -||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.| -||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.| +||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.| +||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.| -{/*||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.|*/} +{/*||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.|*/} -By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured. +By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured. -In addition, the property can be set to any object that inherits the class. However, only objects that inherit the class will allow panning and zooming of the map background content. +In addition, the property can be set to any object that inherits the class. However, only objects that inherit the class will allow panning and zooming of the map background content. In the map component, map background content is always rendered behind all geographic series. In other words, geographic imagery tiles are always rendered first and any geographic series in the map component's Series property is rendered on top of the geographic imagery tiles. This is especially important when displaying multiple geographic series in the same plot area of the map component because geographic imagery tiles can quickly get buried in the map view. ## Code Snippet -This code example explicitly sets of the map component to the object which provides geographic imagery tile from the Open Street Maps. +This code example explicitly sets of the map component to the object which provides geographic imagery tile from the Open Street Maps. ```html TODO - ADD CODE SNIPPET ``` - ## API References -
-
-
+
+
+
diff --git a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx index bbcdbf7f21..da203a0e8f 100644 --- a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx @@ -10,21 +10,15 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Displaying Imagery from Open Street Maps -The Angular is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. It provides geographic imagery tiles of the world only in road map style without any configuration options. This geographic imagery service can be accessed directly on www.OpenStreetMap.org web site. +The Angular is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. It provides geographic imagery tiles of the world only in road map style without any configuration options. This geographic imagery service can be accessed directly on www.OpenStreetMap.org web site. By the default, the Ignite UI for Angular map component already displays geographic imagery from the Open Street Maps. Therefore, there is no need to configure the control to display geographic imagery from the Open Street Maps. ## Angular Displaying Imagery from Open Street Maps Example - - - - ## Code Snippet -This code example explicitly sets of the map component to the object which provides geographic imagery from OpenStreetMap© contributors. - - +This code example explicitly sets of the map component to the object which provides geographic imagery from OpenStreetMap© contributors. ```html ``` - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxOpenStreetMapImagery } from 'igniteui-angular-maps'; @@ -47,8 +38,5 @@ const tileSource = new IgxOpenStreetMapImagery(); this.map.backgroundContent = tileSource; ``` - - - ## API References - + diff --git a/docs/angular/src/content/en/components/geo-map-navigation.mdx b/docs/angular/src/content/en/components/geo-map-navigation.mdx index 1ffc10855e..afaee623cd 100644 --- a/docs/angular/src/content/en/components/geo-map-navigation.mdx +++ b/docs/angular/src/content/en/components/geo-map-navigation.mdx @@ -10,16 +10,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Navigating Map Content -Navigation in the control is enabled by default and it allows zooming and panning of the map content. However, this behavior can be changed using the property. It is important to know that the map allows only synchronized zooming - scaling the map content with preserved aspect ratio. As result, it is not possible to scale the map content vertically without scaling it also horizontally and vice versa. +Navigation in the control is enabled by default and it allows zooming and panning of the map content. However, this behavior can be changed using the property. It is important to know that the map allows only synchronized zooming - scaling the map content with preserved aspect ratio. As result, it is not possible to scale the map content vertically without scaling it also horizontally and vice versa. ## Angular Navigating Map Content Example - - - - ## Geographic Coordinates You navigate map content within geographic region bound by these coordinates: @@ -28,9 +24,6 @@ You navigate map content within geographic region bound by these coordinates: This code snippet shows how navigate the map using geographic coordinates: - - - ## Window Coordinates Also, you can navigate map content within window rectangle bound by these relative coordinates: @@ -39,23 +32,19 @@ Also, you can navigate map content within window rectangle bound by these relati This code snippet shows how navigate the map using relative window coordinates: - - - ## Properties -The following table summarizes properties that can be used in navigation of the control: +The following table summarizes properties that can be used in navigation of the control: | Property Name | Property Type | Description | |----------------|-----------------|---------------| -|| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | -|| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the property | -|| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the property. | -|| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the property. | -|| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | -|| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the property | -|| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the property. | -|| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the property. | - +|| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | +|| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the property | +|| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the property. | +|| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the property. | +|| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | +|| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the property | +|| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the property. | +|| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the property. | ## API References - + diff --git a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx index 21d66b0d79..1f430e6d95 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx @@ -9,7 +9,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Esri Utility -The resource topic provides implementation of an utility that helps with using provided by Esri Maps in . +The resource topic provides implementation of an utility that helps with using provided by Esri Maps in . ## Code Snippet @@ -80,9 +80,6 @@ export enum EsriStyle { } ``` - - - ## API References - - + + diff --git a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx index 2006ac10e0..055ec2765a 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx @@ -9,20 +9,15 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Shape Styling Utility -The resource topic provides implementation of an utility that helps with styling UI elements of in Angular component. +The resource topic provides implementation of an utility that helps with styling UI elements of in Angular component. ## Required Imports - - ```ts import { IgxGeographicShapeSeries } from 'igniteui-angular-maps'; import { Style } from 'igniteui-angular-core'; ``` - - - ## Utility Implementation ```ts @@ -257,7 +252,6 @@ export class ShapeComparison { } ``` - ## API References - - + + diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx index 9fd4db176f..238dba2612 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx @@ -140,8 +140,5 @@ export default class WorldConnections { } ``` - - - ## API References - + diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx index d2a0aba9d5..2c1e5f963e 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx @@ -656,8 +656,5 @@ export default class WorldLocations { } ``` - - - ## API References - + diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx index 66b7a7511c..160e1f6fdf 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx @@ -194,8 +194,5 @@ export default class WorldUtils { } ``` - - - ## API References - + diff --git a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx index ffe7a2d218..1f54d5660b 100644 --- a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx +++ b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx @@ -7,7 +7,6 @@ mentionedTypes: ["GeographicMap", "GeographicShapeSeriesBase", "Series"] --- import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Shape Files Reference ## Purpose @@ -36,7 +35,7 @@ Before plotting geo-spatial data in the control, one should get familiar with th ## Shape Files Format -The Angular control uses popular [Shape Files](http://en.wikipedia.org/wiki/Shapefile#Overview) format as one of the sources for geo-spatial data. Shape files are usually shipped with other file types, generally files with **.shp**, **.shx**, and **.dbf** extensions. +The Angular control uses popular [Shape Files](http://en.wikipedia.org/wiki/Shapefile#Overview) format as one of the sources for geo-spatial data. Shape files are usually shipped with other file types, generally files with **.shp**, **.shx**, and **.dbf** extensions. The following table provides basic information and purpose for each type of shape files. @@ -46,8 +45,6 @@ The following table provides basic information and purpose for each type of shap | `.shx` | A shape index file contains an index for a quick lookup of a geo-spatial vector data items. | | `.dbf` | A shape database file contains a table in which a row corresponds to each geo-spatial data item from a shape (.shp) file. In the shape database file, string columns may describe attributes for geo-spatial data item such as strings (names of countries, regions, cities) and numeric columns (population of countries, location of cities). | - - Refer to the following resources for detailed information and specifications on how geo-spatial data is stored in shape files. - [ESRI - Shape File Technical Description](http://www.esri.com/library/whitepapers/pdfs/shapefile.pdf) @@ -72,7 +69,7 @@ The following list provides resource tools for editing shape files. ## Shape Files Data Sources -The following list provides resources for obtaining shape files. Also, samples for the control are good source of shape files. These shape files are included in the installer for the Samples Browser. +The following list provides resources for obtaining shape files. Also, samples for the control are good source of shape files. These shape files are included in the installer for the Samples Browser. - [ESRI - World Map Data](http://www.esri.com/data/download/basemap/index.html) - [ESRI - Census 2010 Tiger/Line® - Shape Files](http://www.census.gov/geo/www/tiger/tgrshp2010/tgrshp2010.html) @@ -94,9 +91,8 @@ The following topics provide additional information related to this topic. - [Binding Shape Files](geo-map-binding-shp-file.md) - ## API References - - - - + + + + diff --git a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx index 8d5d1f0660..cb3efdcef1 100644 --- a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx +++ b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx @@ -10,22 +10,16 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Shape Styling on Geographic Shape Series -This topic explains how to apply custom styling to the in the Angular . +This topic explains how to apply custom styling to the in the Angular . ## Angular Shape Styling on Geographic Shape Series Example - - - - ## Required Imports Shape styling requires that you import the following classes: - - ```ts import { IgxGeographicShapeSeries } from 'igniteui-angular-maps'; import { IgxStyleShapeEventArgs } from 'igniteui-angular-charts'; @@ -33,9 +27,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; import { IgxShapefileRecord } from 'igniteui-angular-core'; ``` - - - Note that the following code examples are using the [Shape Styling Utility](geo-map-resources-shape-styling-utility.md) file that provides four different ways of styling shapes: - [Shape Comparison Styling](#shape-comparison-styling) - [Shape Random Styling](#shape-random-styling) @@ -46,8 +37,6 @@ Note that the following code examples are using the [Shape Styling Utility](geo- This code snippet creates instances of **ShapeRandomStyling** that will randomly assign fill colors to the countries of the world. - - ```ts import { ShapeRandomStyling } from './ShapeStylingUtility'; // ... @@ -69,15 +58,10 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) } ``` - - - ## Shape Scale Styling This code snippet creates instances of **ShapeScaleStyling** that will assign fill colors to shape of countries based on population scaled on logarithmic scale. - - ```ts import { ShapeScaleStyling } from './ShapeStylingUtility'; // ... @@ -103,15 +87,10 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) } ``` - - - ## Shape Range Styling This code snippet creates instances of **ShapeRangeStyling** that will assign colors to shape of countries based on ranges of population. - - ```ts import { ShapeRangeStyling } from './ShapeStylingUtility'; // ... @@ -138,15 +117,10 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) } ``` - - - ## Shape Comparison Styling This code snippet creates instances of **ShapeComparisonStyling** that will assign colors to countries based on their region name in the world. - - ```ts import { ShapeComparisonStyling } from './ShapeStylingUtility'; this.shapeComparisonStyling = new ShapeComparisonStyling(); @@ -188,9 +162,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) } ``` - - - ## API References - - + + diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx index 654b0f692d..a5c12dfc80 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Scatter Area Series | Data Binding | Infragistics" description: Use Infragistics Angular map's scatter area series to draw a colored area surface based on a triangulation of longitude and latitude data with a numeric value assigned to each point. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, scatter area series, Ignite UI for Angular, Infragistics" @@ -10,54 +10,47 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Geographic Area Map -In Angular map component, you can use the to draw a colored surface, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data, defined by geographic locations such as weather temperature, precipitation, population distribution, air pollution, etc. +In Angular map component, you can use the to draw a colored surface, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data, defined by geographic locations such as weather temperature, precipitation, population distribution, air pollution, etc. ## Angular Geographic Area Map Example - - - - -The works a lot like the except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. +The works a lot like the except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. ## Data Requirements -Similar to other types of geographic series in the map component, the has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The `LongitudeMemberPath`, `LatitudeMemberPath`, and `ColorMemberPath` properties of the geographic series identify these data column. -The automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the `TrianglesSource` property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. +Similar to other types of geographic series in the map component, the has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The `LongitudeMemberPath`, `LatitudeMemberPath`, and `ColorMemberPath` properties of the geographic series identify these data column. +The automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the `TrianglesSource` property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. ## Data Binding The following table summarizes properties of GeographicScatterAreaSeries used for data binding. | Property Name | Property Type | Description | |--------------|---------------| ---------------| -||any|The source of data items to perform triangulation on if the property provides no triangulation data.| -||string|The name of the property containing the Longitude for all items bound to the .| -||string|The name of the property containing the Latitude for all items bound to the .| -||string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the `ColorScale` property is set.| -||any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| -||string|The name of the property of the items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -||string|The name of the property of the items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -||string|The name of the property of the items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +||any|The source of data items to perform triangulation on if the property provides no triangulation data.| +||string|The name of the property containing the Longitude for all items bound to the .| +||string|The name of the property containing the Latitude for all items bound to the .| +||string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the `ColorScale` property is set.| +||any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| +||string|The name of the property of the items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +||string|The name of the property of the items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +||string|The name of the property of the items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| ## Color Scale -Use the ColorScale property of the to resolve colors values of points and thus fill surface of the geographic series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to a triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes. -The provided class should satisfy most coloring needs, but the ColorScale base class can be inherited by the application for custom coloring logic. +Use the ColorScale property of the to resolve colors values of points and thus fill surface of the geographic series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to a triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes. +The provided class should satisfy most coloring needs, but the ColorScale base class can be inherited by the application for custom coloring logic. The following table list properties of the `CustomPaletteColorScale` affecting surface coloring of the GeographicScatterAreaSeries. | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|| `ObservableCollection` |Gets or sets the collection of colors to select from or to interpolate between.| -||`ColorScaleInterpolationMode`|Gets or sets the method getting a color from the Palette.| -||double|The highest value to assign a color. Any given value greater than this value will be Transparent.| -||double|The lowest value to assign a color. Any given value less than this value will be Transparent.| +|| `ObservableCollection` |Gets or sets the collection of colors to select from or to interpolate between.| +||`ColorScaleInterpolationMode`|Gets or sets the method getting a color from the Palette.| +||double|The highest value to assign a color. Any given value greater than this value will be Transparent.| +||double|The lowest value to assign a color. Any given value less than this value will be Transparent.| ## Code Snippet -The following code shows how to bind the to triangulation data representing surface temperatures in the world. - - - +The following code shows how to bind the to triangulation data representing surface temperatures in the world. ```html
@@ -85,9 +78,6 @@ The following code shows how to bind the - - - + + + + diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx index 37b7f77dc1..4427d3a1ca 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx @@ -10,40 +10,33 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Geographic Bubble Map -In Angular map component, you can use the to plot bubbles or proportional markers at the geographic locations specified by the data in your application. This map series can be useful for highlighting points of interest in your particular business case like department stores, warehouses, or offices. Also you can use this map series in a fleet management system or a GPS system for dynamic vehicle tracking. +In Angular map component, you can use the to plot bubbles or proportional markers at the geographic locations specified by the data in your application. This map series can be useful for highlighting points of interest in your particular business case like department stores, warehouses, or offices. Also you can use this map series in a fleet management system or a GPS system for dynamic vehicle tracking. ## Angular Geographic Bubble Map Example - - - -
-The demo above shows the series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too. +The demo above shows the series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too. ## Configuration Summary -Similar to other types of scatter series in the map control, the series has the property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the and properties to map these data columns. The and will settings configures the radius for the bubbles. +Similar to other types of scatter series in the map control, the series has the property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the and properties to map these data columns. The and will settings configures the radius for the bubbles. The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding. | Property|Type|Description | | ---|---|--- | -| |any|Gets or sets the items source | -| |string|Uses the DataSource property to determine the location of the longitude values on the assigned items | -| |string|Uses the DataSource property to determine the location of the latitude values on the assigned items | -| |string|Sets the path to use to get the radius values for the series. | -| ||Gets or sets the radius scale property for the current bubble series. | -| |any|Configure the minimum value for calculating value sub ranges. | -| |any|Configure the maximum value for calculating value sub ranges. | +| |any|Gets or sets the items source | +| |string|Uses the DataSource property to determine the location of the longitude values on the assigned items | +| |string|Uses the DataSource property to determine the location of the latitude values on the assigned items | +| |string|Sets the path to use to get the radius values for the series. | +| ||Gets or sets the radius scale property for the current bubble series. | +| |any|Configure the minimum value for calculating value sub ranges. | +| |any|Configure the maximum value for calculating value sub ranges. | ## Code Snippet - - - ```html
``` - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxSizeScaleComponent } from 'igniteui-angular-charts'; @@ -156,10 +146,7 @@ export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit { } ``` - - - ## API References -
-
+
+
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx index 434ab0088b..f8f36006dc 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx @@ -10,55 +10,48 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Geographic Contour Map -In Angular map component, you can use the to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data defined by geographic locations such as weather temperature, atmospheric pressure, precipitation, population distribution, topographic data, etc. +In Angular map component, you can use the to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data defined by geographic locations such as weather temperature, atmospheric pressure, precipitation, population distribution, topographic data, etc. ## Angular Geographic Contour Map Example - - - -
-The works a lot like the except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale. +The works a lot like the except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale. ## Data Requirements -Similar to other types of geographic series in the map component, the has the property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by , , and properties of the geographic series. -The automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. +Similar to other types of geographic series in the map component, the has the property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by , , and properties of the geographic series. +The automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. ## Data Binding -The following table summarizes properties of used for data binding. +The following table summarizes properties of used for data binding. | Property Name | Property Type | Description | |--------------|---------------| ---------------| -||any|The source of data items to perform triangulation on if the property provides no triangulation data.| -||string|The name of the property containing the Longitude for all items bound to the .| -||string|The name of the property containing the Latitude for all items bound to to the .| -||string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the property is set.| -||any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| -||string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -||string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -||string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +||any|The source of data items to perform triangulation on if the property provides no triangulation data.| +||string|The name of the property containing the Longitude for all items bound to the .| +||string|The name of the property containing the Latitude for all items bound to to the .| +||string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the property is set.| +||any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| +||string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +||string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +||string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| ## Contour Fill Scale -Use the property of the to resolve fill brushes of the contour lines of the geographic series. +Use the property of the to resolve fill brushes of the contour lines of the geographic series. The provided `ValueBrushScale class should satisfy most of your coloring needs, but the application for custom coloring logic can inherit the ValueBrushScale class. The following table list properties of the CustomPaletteColorScale affecting the surface coloring of the GeographicContourLineSeries. | Property Name | Property Type | Description | |--------------|---------------| ---------------| -||BrushCollection|Gets or sets the collection of brushes for filling contours of the | -||double|The highest value to assign a brush in a fill scale.| -||double|The lowest value to assign a brush in a fill scale.| +||BrushCollection|Gets or sets the collection of brushes for filling contours of the | +||double|The highest value to assign a brush in a fill scale.| +||double|The lowest value to assign a brush in a fill scale.| ## Code Snippet -The following code shows how to bind the to triangulation data representing surface temperatures in the world. - - - +The following code shows how to bind the to triangulation data representing surface temperatures in the world. ```html
@@ -76,9 +69,6 @@ The following code shows how to bind the
-
-
-
+
+
+
+
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx index b0f1188025..4594542cc0 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx @@ -10,48 +10,41 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Geographic High Density Map -In Angular map component, you can use the to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time. +In Angular map component, you can use the to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time. ## Angular Geographic High Density Map Example - - - - -The demo above shows the series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. +The demo above shows the series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. Because there are so many data points, the series displays the scatter data as tiny dots as opposed to full size markers, and displays areas with the most data using a higher color density representing a cluster of data points. ## Data Requirements -Similar to other types of scatter series in the map control, the series has the property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the and properties to map these data columns. +Similar to other types of scatter series in the map control, the series has the property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the and properties to map these data columns. ### Data Binding The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding. | Property|Type|Description | | ---|---|--- | -| |any|Gets or sets the items source | -| |string|Uses the DataSource property to determine the location of the longitude values on the assigned items | -| |string|Uses the DataSource property to determine the location of the latitude values on the assigned items | +| |any|Gets or sets the items source | +| |string|Uses the DataSource property to determine the location of the longitude values on the assigned items | +| |string|Uses the DataSource property to determine the location of the latitude values on the assigned items | ## Heat Color Scale The Heat Color Scale, an optional feature, determines the color pattern within the series. The following table summarizes the properties used for determining the color scale. | Property |Type|Description | | ---|---|--- | -| |Double|Defines the double value representing the minimum end of the color scale | -| |Double|Defines the double value representing the maximum end of the color scale | -| |Color|Defines the point density color used at the bottom end of the color scale | -| |Color|Defines the point density color used at the top end of the color scale | +| |Double|Defines the double value representing the minimum end of the color scale | +| |Double|Defines the double value representing the maximum end of the color scale | +| |Color|Defines the point density color used at the bottom end of the color scale | +| |Color|Defines the point density color used at the top end of the color scale | ## Code Example -The following code demonstrates how set the and properties of the - - - +The following code demonstrates how set the and properties of the ```html
@@ -71,9 +64,6 @@ The following code demonstrates how set the + diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx index 727828e1cb..00a5663a3d 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Scatter Symbol Series | Data Binding | Infragistics" description: Use Infragistics Angular map's scatter symbol series to display geo-spatial data using points or markers in a geographic context.. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, scatter symbol series, Ignite UI for Angular, Infragistics" @@ -10,24 +10,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Geographic Symbol Map -In Angular map component, you can use the to display geo-spatial data using points or markers in a geographic context. This type of geographic series is often used to render a collection of geographic locations such as cities, airports, earthquakes, or points of interests. +In Angular map component, you can use the to display geo-spatial data using points or markers in a geographic context. This type of geographic series is often used to render a collection of geographic locations such as cities, airports, earthquakes, or points of interests. ## Angular Geographic Symbol Map Example - - - - ## Data Requirements -Similarly to other types of geographic series in the map component, the has the property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the and properties. The `GeographicSymbolSeries` uses values of these mapped data columns to plot symbol elements in the geographic map component. +Similarly to other types of geographic series in the map component, the has the property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the and properties. The `GeographicSymbolSeries` uses values of these mapped data columns to plot symbol elements in the geographic map component. ## Code Snippet -The following code shows how to bind the to locations of cities loaded from a shape file using the . - - - +The following code shows how to bind the to locations of cities loaded from a shape file using the . ```html
@@ -62,9 +55,6 @@ The following code shows how to bind the - + + diff --git a/docs/angular/src/content/en/components/geo-map-type-series.mdx b/docs/angular/src/content/en/components/geo-map-type-series.mdx index c4ce7aa33a..17714f744e 100644 --- a/docs/angular/src/content/en/components/geo-map-type-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-series.mdx @@ -7,7 +7,6 @@ mentionedTypes: ["GeographicMap", "Series"] --- import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Geographic Series Overview In the Ignite UI for Angular Map component, geographic series are visual elements of the map that display geo-spatial data as points (e.g. locations of cities), polylines (e.g. road connections), or polygons (shape of countries) in a geographic context. @@ -15,7 +14,6 @@ The map component's Series property is a collection of geographic series objects All types of geographic series are always rendered on top of the geographic imagery tiles. However, sometimes geographic series (e.g. with detailed shape files of the world) might provide enough geographic contexts for an application and geographic imagery is not desired in the map control. - ## Type of Geographic Series The Angular Geographic Map component supports the following types of geographic series: @@ -28,6 +26,5 @@ The Angular Geographic Map component supports the following types of geographic - [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md) - [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md) - ## API References - + diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx index 941f590412..f4c5a95038 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Shape Polygon Series | Infragistics" description: Use Infragistics Angular map's shape polygon series to render shapes of countries or regions defined by geographic locations. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, shape polygon series, Ignite UI for Angular, Infragistics" @@ -10,26 +10,19 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Geographic Polygon Map -In Angular map component, you can use the to display geo-spatial data using shape polygons in a geographic context. This type of geographic series is often used to render shapes of countries or regions defined by geographic locations. +In Angular map component, you can use the to display geo-spatial data using shape polygons in a geographic context. This type of geographic series is often used to render shapes of countries or regions defined by geographic locations. ## Angular Geographic Polygon Map Example - - - - -The works a lot like the except that geo-spatial data is rendered with polygons instead of polylines. +The works a lot like the except that geo-spatial data is rendered with polygons instead of polylines. ## Data Requirements -Similar to other types of geographic series in the map control, the has the property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicShapeSeries` uses points of this mapped data column to plot polygons in the map control. +Similar to other types of geographic series in the map control, the has the property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicShapeSeries` uses points of this mapped data column to plot polygons in the map control. ## Code Snippet -The following code demonstrates how to bind the to shapes of countries in the world loaded from a shape file using the . - - - +The following code demonstrates how to bind the to shapes of countries in the world loaded from a shape file using the . ```html
@@ -64,9 +57,6 @@ The following code demonstrates how to bind the - - + + + diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx index e4b6918e4e..f8f4b6b83d 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Shape Polyline Series | Infragistics" description: Use Infragistics Angular map's shape polyline series to render roads or connections between geographic locations such as cities or airports. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, Ignite UI for Angular, shape polyline series, Infragistics" @@ -10,26 +10,19 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Geographic Polyline Map -In Angular map component, you can use the to display geo-spatial data using polylines in a geographic context. This type of geographic series is often used to render roads or connections between geographic locations such as cities or airports. +In Angular map component, you can use the to display geo-spatial data using polylines in a geographic context. This type of geographic series is often used to render roads or connections between geographic locations such as cities or airports. ## Angular Geographic Polyline Map Example - - - - -The works a lot like the except that geo-spatial data is rendered with polylines instead of polygons. +The works a lot like the except that geo-spatial data is rendered with polylines instead of polygons. ## Data Requirements -Similarly to other types of geographic series in the control, the has the property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicPolylineSeries` uses points of this mapped data column to plot polygons in the control. +Similarly to other types of geographic series in the control, the has the property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicPolylineSeries` uses points of this mapped data column to plot polygons in the control. ## Code Snippet -The following code shows how to bind the to locations of cities loaded from a shape file using the . - - - +The following code shows how to bind the to locations of cities loaded from a shape file using the . ```html
@@ -54,9 +47,6 @@ The following code shows how to bind the - - + + + diff --git a/docs/angular/src/content/en/components/geo-map.mdx b/docs/angular/src/content/en/components/geo-map.mdx index 957835d443..6b0f5ef20a 100644 --- a/docs/angular/src/content/en/components/geo-map.mdx +++ b/docs/angular/src/content/en/components/geo-map.mdx @@ -14,16 +14,13 @@ The Ignite UI for Angular map component allows you to display data that contains ## Angular Map Example -The following sample demonstrates how display data in using also known as Bubble Series. +The following sample demonstrates how display data in using also known as Bubble Series. - - - The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds. -The map's Series property is used to support rendering an unlimited number of geographic series. This property is a collection of geographic series objects and any type of geographic series can be added to it. For example, can be added for plotting geographic locations such as cities and the for plotting connections (e.g. roads) between these geographic locations. +The map's Series property is used to support rendering an unlimited number of geographic series. This property is a collection of geographic series objects and any type of geographic series can be added to it. For example, can be added for plotting geographic locations such as cities and the for plotting connections (e.g. roads) between these geographic locations. The map provides customizable navigation behaviors for navigating map content using mouse, keyboard, or code-behind. @@ -33,9 +30,6 @@ For more details please visit: [Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) - - - ## Dependencies The Angular geographic map component, you need to first install these packages: @@ -46,15 +40,9 @@ npm install --save igniteui-angular-charts npm install --save igniteui-angular-maps ``` - - - ## Component Modules -The requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content. - - - +The requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content. ```ts // app.module.ts @@ -72,9 +60,6 @@ import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; export class AppModule {} ``` - - - ```ts import { AfterViewInit, Component, ViewChild } from "@angular/core"; import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; @@ -102,8 +87,6 @@ export class MapOverviewComponent implements AfterViewInit { Now that the map module is imported, next step is to create geographic map. The following code demonstrates how to do this and enable zooming in the map. - - ```html
- - - - - - - + + + + + + + + diff --git a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx index 38bd38c8c4..b2f50d14fd 100644 --- a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx +++ b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx @@ -27,7 +27,7 @@ To achieve that, use **``** inside `... ``` -You also need to import +You also need to import ```typescript import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; @@ -118,7 +118,7 @@ Keep in mind the more complex and involved the template is, the greater the perf ## Cell Context Object -The custom cell renderer is passed an object as a parameter with the following props: +The custom cell renderer is passed an object as a parameter with the following props: ```typescript @@ -153,7 +153,7 @@ export interface IgxGridLiteCellTemplateContext { - - -- +- ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid-lite/filtering.mdx b/docs/angular/src/content/en/components/grid-lite/filtering.mdx index ebc531da53..cc8f3a841a 100644 --- a/docs/angular/src/content/en/components/grid-lite/filtering.mdx +++ b/docs/angular/src/content/en/components/grid-lite/filtering.mdx @@ -43,7 +43,7 @@ column.filteringCaseSensitive = true; ## Filter Model -The building blocks for filter operations in the grid is the which has the following structure: +The building blocks for filter operations in the grid is the which has the following structure: ```typescript export interface FilterExpression = Keys> { diff --git a/docs/angular/src/content/en/components/grid-lite/header-template.mdx b/docs/angular/src/content/en/components/grid-lite/header-template.mdx index 99f6f7b132..2047bf5d6f 100644 --- a/docs/angular/src/content/en/components/grid-lite/header-template.mdx +++ b/docs/angular/src/content/en/components/grid-lite/header-template.mdx @@ -67,7 +67,7 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla - - -- +- ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid/grid.mdx b/docs/angular/src/content/en/components/grid/grid.mdx index f1c85fdbb8..4c223af43a 100644 --- a/docs/angular/src/content/en/components/grid/grid.mdx +++ b/docs/angular/src/content/en/components/grid/grid.mdx @@ -250,7 +250,7 @@ As you can see, we are adding **draggable** attribute set to _false_. ... ``` -In the snippet above we "take" a reference to the implicitly provided cell value. This is sufficient if you just want to present some data and maybe apply some custom styling or pipe transforms over the value of the cell. However even more useful is to take the instance itself as shown below: +In the snippet above we "take" a reference to the implicitly provided cell value. This is sufficient if you just want to present some data and maybe apply some custom styling or pipe transforms over the value of the cell. However even more useful is to take the instance itself as shown below: ```html @@ -295,7 +295,7 @@ to set the property of the ``` -Make sure to check the API for the in order to get accustomed with the provided properties you can use in your templates. +Make sure to check the API for the in order to get accustomed with the provided properties you can use in your templates. ### Column Template API @@ -695,9 +695,9 @@ And the result from this configuration is: ### Working with Flat data -The flat data binding approach is similar to the one that we already described above, but instead of **cell value** we are going to use the property of the . +The flat data binding approach is similar to the one that we already described above, but instead of **cell value** we are going to use the property of the . -Since the Angular grid is a component for **rendering**, **manipulating** and **preserving** data records, having access to **every data record** gives you the opportunity to customize the approach of handling it. The property provides you this opportunity. +Since the Angular grid is a component for **rendering**, **manipulating** and **preserving** data records, having access to **every data record** gives you the opportunity to customize the approach of handling it. The property provides you this opportunity. Below is the data that we are going to use: @@ -829,8 +829,8 @@ Enabling it can affects other parts of an Angular application that the `IgxGridC - - - -- -- +- +- ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/grid/groupby.mdx b/docs/angular/src/content/en/components/grid/groupby.mdx index 33a6b6f4ed..e583bc1afc 100644 --- a/docs/angular/src/content/en/components/grid/groupby.mdx +++ b/docs/angular/src/content/en/components/grid/groupby.mdx @@ -36,7 +36,7 @@ public ngOnInit() { } ``` -Grouping expressions implement the interface. +Grouping expressions implement the interface. ## Group By API @@ -59,7 +59,7 @@ public ngOnInit() { } ``` -During runtime the expressions are gettable and settable from the property. If you need to add or change an existing expression you may also use the method with either a single or an array of . +During runtime the expressions are gettable and settable from the property. If you need to add or change an existing expression you may also use the method with either a single or an array of . ```typescript grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }); @@ -85,7 +85,7 @@ export interface IGroupByExpandState { } ``` -As with , setting a list of directly to the will change the expansion accordingly. Additionally exposes a method that toggles a group by the group record instance. +As with , setting a list of directly to the will change the expansion accordingly. Additionally exposes a method that toggles a group by the group record instance. ```typescript const groupRow = this.grid.groupsRecords.find(r => r.value === "France"); @@ -211,7 +211,7 @@ The grouping UI supports the following keyboard interactions: igxGrid allows defining custom grouping per column or per grouping expression, which provides grouping based on a custom condition. This is useful when you need to group by complex objects or for other application specific scenarios. -In order to implement custom grouping the data first needs to be sorted appropriately. Due to this you may also need to apply a custom sorting strategy that extends the base . After the data is sorted the custom groups can be determined by specifying a for the column or for the specific grouping expression. +In order to implement custom grouping the data first needs to be sorted appropriately. Due to this you may also need to apply a custom sorting strategy that extends the base . After the data is sorted the custom groups can be determined by specifying a for the column or for the specific grouping expression. The sample below demonstrates custom grouping by `Date`, where the date values are sorted and grouped by Day, Week, Month or Year based on user-selected grouping mode. @@ -223,7 +223,7 @@ The sample below demonstrates custom grouping by `Date`, where the date values a The sample defines custom sorting strategies for the different date conditions. -Each custom strategy extends the base and defines the method, which is the custom compare function used when sorting the values. Additionally it extracts the values from the date needed for the comparison. +Each custom strategy extends the base and defines the method, which is the custom compare function used when sorting the values. Additionally it extracts the values from the date needed for the comparison. ```typescript class BaseSortingStrategy extends DefaultSortingStrategy { @@ -281,7 +281,7 @@ class WeekSortingStrategy extends BaseSortingStrategy { } ``` -A function is defined for the grouping expressions, which determines the items belonging to the same group based on the selected grouping mode. Values in the sorted data for which this function returns 0 are marked as part of the same group. +A function is defined for the grouping expressions, which determines the items belonging to the same group based on the selected grouping mode. Values in the sorted data for which this function returns 0 are marked as part of the same group. ```typescript groupingComparer: (a, b) => { @@ -486,11 +486,11 @@ The sample will not be affected by the selected global theme from `Change Theme` ## API References - -- +- - -- +- - -- +- - - ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid/master-detail.mdx b/docs/angular/src/content/en/components/grid/master-detail.mdx index bdf9e28501..e2ea0db205 100644 --- a/docs/angular/src/content/en/components/grid/master-detail.mdx +++ b/docs/angular/src/content/en/components/grid/master-detail.mdx @@ -93,7 +93,7 @@ Additional API methods for controlling the expansion states are also exposed: - - - -- -- -- -- \ No newline at end of file +- +- +- +- \ No newline at end of file diff --git a/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx b/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx index a8a8787f21..b7cd3e2f44 100644 --- a/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx +++ b/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx @@ -18,7 +18,7 @@ With the sample, illustrated beyond, you may see how multiple selection is being ## Topic Overview To achieve the selection-based aggregates functionality, you can use our [Grid Selection](/components/grid/grid/selection) feature, together with the [Grid Summaries](/components/grid/grid/summaries). -The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, , or , depending on the column data type and your needs. +The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, , or , depending on the column data type and your needs. ## Selection @@ -43,7 +43,7 @@ Bear in mind, that `isDate` is a custom function. After having the data types grouped accordingly, you can proceed to the aggregation itself. For that reason, you could use the already exposed methods of the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`. -After that, you'd have to put the aggregated data in the same array, which would be returned to the template. +After that, you'd have to put the aggregated data in the same array, which would be returned to the template. For the visualization of the data, you might want to use the ``, which in a combination with the `custom-summaries` class will give the natural look of the Summary. @@ -57,17 +57,17 @@ Change the selection to see summaries of the currently selected range. ## API References - -- +- - ## Additional Resources - [Grid overview](/grid/grid) -- +- - [Row Selection](/grid/row-selection) - [Cell Selection](/grid/cell-selection) -- -- +- +- - [Summaries](/grid/summaries) - [Paging](/grid/paging) diff --git a/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx index eefe59db29..5ba2f98fc1 100644 --- a/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx +++ b/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx @@ -411,8 +411,8 @@ Enabling it can affects other parts of an Angular application that the `igxHiera - - - -- -- +- +- ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/hierarchicalgrid/load-on-demand.mdx b/docs/angular/src/content/en/components/hierarchicalgrid/load-on-demand.mdx index dcb3aee0d6..6bf74d1e65 100644 --- a/docs/angular/src/content/en/components/hierarchicalgrid/load-on-demand.mdx +++ b/docs/angular/src/content/en/components/hierarchicalgrid/load-on-demand.mdx @@ -123,7 +123,7 @@ public schema: EntityType[] = [ #### Setting initial filter -Now let's add initial filtering rules to our grid so that the root grid is filtered when first loaded. We will create a and set it to the property of the `IgxHierarchicalGrid` using the `ngOnInit` lifecycle hook. +Now let's add initial filtering rules to our grid so that the root grid is filtered when first loaded. We will create a and set it to the property of the `IgxHierarchicalGrid` using the `ngOnInit` lifecycle hook. Let's say we want to filter customers that have order's freight at least `500`. We will take advantage of the ability to create nested queries in the filtering expressions and this is the result: diff --git a/docs/angular/src/content/en/components/icon-button.mdx b/docs/angular/src/content/en/components/icon-button.mdx index aa1916c1e8..eb07e762eb 100644 --- a/docs/angular/src/content/en/components/icon-button.mdx +++ b/docs/angular/src/content/en/components/icon-button.mdx @@ -62,7 +62,7 @@ Now that you have the Ignite UI for Angular Icon Button directive imported, you ### Flat Icon Button -Use the directive to add a simple flat icon button in your component template: +Use the directive to add a simple flat icon button in your component template: ```html