Version 1 - User Guide for WRD by Dancho and Desi

_config.yml

@@ -30,6 +30,12 @@ navigation:
     styling:
         position: 70
         title: "Styles & Appearance"
+    user-guide:
+        position: 85
+        title: "Web Report Designer - User Guide"
+    user-guide/components:
+        position: 15
+        title: "Report Components"
     styling/rendering-and-paging:
         position: 8
         title: "Rendering and Paging"

user-guide/app-tour.md

@@ -0,0 +1,34 @@
+---
+title: App Tour
+page_title: App Tour - Web Report Designer User Guide
+description: Explore the Web Report Designer's panes and discover the features it offers.
+slug: user-guide/app-tour
+tags: web, report, design, tool, create, report, web, structure 
+published: True
+position: 5
+---
+
+# App Tour of the Web Report Designer
+
+The fastest way to explore the Web Report Designer and to learn its basics is to start the built-in onboarding tour, which walks you through the Report Designer's main tools.
+
+The app tour starts automatically the first time you open an application with an embedded Telerik Web Report Designer.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/xO7Vg01JRnk?si=MZlV9FJECadFcRxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+As illustrated by the video above, the main elements of the Web Report Designer's user interface are:
+
+* An interactive **Design surface** where you  create and style your report.
+* A **Components tray** which contains all of the items that you can add to the report.
+* An **Explorer** providing a tree-based structure of everything that is already in the report, including the data structure.
+* A **Properties area** which shows the properties and values for the currently selected component.
+* A **Main menu** which lets you open, save, and interact with reports on a global level along with the **Asset Manager** which is where you store all of your.
+* A **Preview** button which shows an exact representation of the designed report.
+* A **Search box** which allows you to search the report instance for any property value, component data source, and so on.
+
+To view the app tour again, type `Start onboarding` in the search box.
+
+## See Also
+
+* [Create a Simple Report]({%slug web-report-designer-user-guide-getting-started%})
+* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})

user-guide/components/charts.md

@@ -0,0 +1,206 @@
+---
+title: Charts
+page_title: Charts
+description: Explore the available Chart report components offered by the Web Report Designer.
+slug: web-report-designer-user-guide-components-charts
+tags: web, report, design, components, chart, bar, line, area, column, pie, doughnut, polar, range, scatter, bubble, sparkline, ohlc
+published: True
+position: 5
+---
+
+<style>
+img[alt$="><"] {
+  border: 1px solid lightgrey;
+}
+</style>
+
+# Charts
+
+The Chart components in the Web Report Designer allow users to visualize data records from different [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) storages. Charts transform numerical data into visual representations, making it easier to identify patterns, trends, and relationships in your data.
+
+You can use Charts to represent:
+
+* Trend Analysis—Show data changes over time using Line or Area charts.
+* Comparison Analysis—Compare values across categories using Bar or Column charts.
+* Part-to-Whole Analysis—Display proportional relationships using Pie or Doughnut charts.
+* Performance Dashboards—Create visual scorecards and KPI displays.
+* Financial Reporting—Present sales figures, revenue trends, and budget comparisons.
+* Statistical Reports—Visualize survey results, demographic data, and analytical findings.
+
+![Charts Group ><](images/wrd-components-tray-charts-design-mode.png)
+
+## Chart Types
+
+The Web Report Designer provides the following chart types:
+
+* [Bar Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-bar-chart)—Displays data series as sets of horizontal bars, ideal for comparing amounts or values between different categories.
+* [Line Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-line-chart)—Displays series as sets of points connected by lines, perfect for showing trends over continuous periods.
+* [Area Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-an-area-chart)—Shows data as filled areas under lines, emphasizing volume and cumulative totals.
+* [Column Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-column-chart)—Displays data series as sets of vertical bars that are grouped by category.
+* [Pie Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-pie-chart)—Shows the contribution of fractional parts to a whole, commonly used for proportion comparisons.
+* [Doughnut Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-pie-chart)—Similar to Pie Chart but with an open space in the center, allowing for additional information display.
+
+## Chart Categories
+
+The Web Report Designer supports two main chart categories:
+
+* **Cartesian Charts** (Bar, Line, Column, Area)—Use the Cartesian coordinate system to plot data points in chart series. The X and Y axes define how each point's coordinates in the plot area are calculated. Cartesian charts provide a mechanism for combining data points that reside in different series but have the same category. The combine mode can be:
+
+  * **Cluster**—Data points in the same category are positioned close together.
+  * **Stack**—Data points are plotted on top of each other.
+  * **Stack100**—Values of one series are presented as a percentage of the other series.
+
+* **Pie Charts** (Pie, Doughnut)—Use the Radial coordinate system to plot each point as an arc segment where the arc's length represents the percentage this point's value is from the total sum.
+
+The following sections demonstrate how to add different chart types and illustrate how CSV data is presented in each chart.
+
+>note The **Configuration** pane on the right-hand side is identical for all chart types, allowing users to specify the Data Source and configure the Categories, Series and Values groups.
+
+## Adding a Chart to a Report
+
+The next sections in this article demonstrate how to add each of the available [chart types](#chart-types) to your report. To follow along the steps below, make sure to add the proposed [data source](#adding-data-source) first.
+
+### Adding Data Source
+
+For this tutorial, use the following sample CSV data to create a CSV Data Source that will be used throughout this article:
+
+```csv
+Category,Year,Value
+Accessories,2003,230
+Accessories,2004,340
+Bikes,2001,150
+Bikes,2002,195
+Bikes,2003,340
+Bikes,2004,265
+Clothing,2002,80
+Clothing,2003,120
+Clothing,2004,110
+Components,2001,230
+Components,2002,140
+Components,2003,280
+Components,2004,310
+```
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/d34jlpfD94Q?si=jCgcgEMH9y2AQGOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+After adding the data source to your report, continue by adding the desired chart type.
+
+### Adding a Bar Chart
+
+To create a Bar Chart, follow the steps below. See the video after the steps for a detailed walk-through.
+
+1. Click the **Bar** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer.
+
+1. Set the [data source](#adding-data-source) for the Chart.
+
+1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display.
+
+1. Optionally, change the Chart type.
+
+>caption Adding a Bar Chart and populating it with data
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/-bCYlj5Qtwg?si=VgbqrDrNDA3zDvA_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Based on the Bar Chart type that you select during the configuration, one of the following charts will be displayed:
+
+|Clustered Bar|Stacked Bar|100% Stacked Bar|
+|----|----|----|
+|![Clustered Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png)|![Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png)|![100% Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png) |
+
+### Adding a Column Chart
+
+To create a Column Chart, follow the steps below. See the video after the steps for a detailed walk-through.
+
+1. Click the **Column** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer.
+
+1. Set the [data source](#adding-data-source) for the Chart.
+
+1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display.
+
+1. Optionally, change the Chart type.
+
+>caption Adding a Column Chart and populating it with data
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/RGJa5FLZ5A8?si=vxsKE8GwK2jFFnIv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Based on the Column Chart type that you select during the configuration, one of the following charts will be displayed:
+
+|Clustered Column|Stacked Column|100% Stacked Column|
+|----|----|----|
+|![Clustered Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-clustered-type.png)|![Stacked Column Type ](images/wrd-components-tray-charts-configure-column-chart-stacked-type.png)|  ![100% Stacked Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png) |
+
+### Adding an Area Chart
+
+To create an Area Chart, follow the steps below. See the video after the steps for a detailed walk-through.
+
+1. Click the **Area** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer.
+
+1. Set the [data source](#adding-data-source) for the Chart.
+
+1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display.
+
+1. Optionally, change the Chart type.
+
+>caption Adding an Area Chart and populating it with data
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Eygyvp6y1zk?si=ObaAThjMoEajmB6H" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Based on the Column Chart type that you select during the configuration, one of the following charts will be displayed:
+
+|Area|Stacked Area|100% Stacked Area|
+|----|----|----|
+|![Area Chart Type ](images/wrd-components-tray-charts-configure-area-chart-type.png)|![Stacked Area Type ](images/wrd-components-tray-charts-configure-stacked-area-type.png)|![100% Stacked Area Type ](images/wrd-components-tray-charts-configure-area-100-stacked-type.png)|
+
+### Adding a Line Chart
+
+To create a Line Chart, follow the steps below. See the video after the steps for a detailed walk-through.
+
+1. Click the **Line** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer.
+
+1. Set the [data source](#adding-data-source) for the Chart.
+
+1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display.
+
+1. Optionally, change the Chart type.
+
+>caption Adding a Line Chart and populating it with data
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/jEP0YrFUG68?si=N5VuLs9tUHQ0I4CW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Based on the Line Chart type that you select during the configuration, one of the following charts will be displayed:
+
+|Line|Stacked Line|100% Stacked Line|
+|----|----|----|
+|![Line Chart Type ](images/wrd-components-tray-charts-configure-line-chart-type.png)|![Stacked Line Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-type.png)|![100% Stacked Line Chart Type ](images/wrd-components-tray-charts-configure-line-100-stacked-type.png)|
+
+|Line with Markers|Stacked Line with Markers|100% Stacked Line with Markers|
+|----|----|----|
+|![Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png)|![Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png)|![100% Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png)|
+
+### Adding a Pie Chart
+
+To create a Pie Chart, follow the steps below. See the video after the steps for a detailed walk-through.
+
+1. Click the **Pie** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer.
+
+1. Set the [data source](#adding-data-source) for the Chart.
+
+1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display.
+
+1. Optionally, change the Chart type.
+
+>caption Adding a Pie Chart and populating it with data
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/SPLPy_jAsJM?si=iYhK6Tm_W0DujcwD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Based on the Pie Chart type that you select during the configuration, one of the following charts will be displayed:
+
+|Pie Chart|Doughnut Chart|
+|----|----|
+|![Pie Chart Type ](images/wrd-components-tray-charts-configure-pie-chart-type.png)|![Doughnut Chart Type ](images/wrd-components-tray-charts-configure-doughnut-chart-type.png)|
+
+## See Also
+
+* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})
+* [Overview of the Graph Report Item]({%slug telerikreporting/designing-reports/report-structure/graph/overview%})
+* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%})

user-guide/components/components.md

@@ -0,0 +1,59 @@
+---
+title: Overview
+page_title: Components - Overview
+description: Explore the available report components offered by the Web Report Designer.
+slug: web-report-designer-user-guide-components
+tags: web, report, design, components, overview
+published: True
+position: 0
+---
+
+<style>
+img[alt$="><"] {
+  border: 1px solid lightgrey; 
+}
+table th:first-of-type {
+	width: 50%;
+}
+table th:nth-of-type(2) {
+	width:50%;
+}
+}
+</style>
+
+# Components Overview
+
+Each report is built using [report items]({%slug user-guide/components/report-items%}), which are available in the Components tab. This tab organizes the items into categories based on their type and functionality, making it easy to find what you need for your report design. It supports two layout modes—grid and list, with the list view selected by default.
+
+## How to Use Components
+
+You can add components to your report in two ways:
+
+* Drag and drop&mdash;Click the report's design surface and drag a component from the Components tab onto the report.
+* Click to add&mdash;Click the desired location in your report, then click the component in the Components tab.
+
+You can edit already added components by clicking the respective report item on the design surface of the report. To edit multiple items simultaneously, select them by holding the `Ctrl` or `Cmd` key. Once the item is selected, you can edit its properties in the pane on the right.
+
+![Components tray in List Mode ><](images/wrd-components-tray-design-mode.png)
+
+|Group (Category)|Report Items|
+|----|----|
+|[Report Items]({%slug user-guide/components/report-items%}) - The main building blocks used in the report depending on the data that will be displayed, e.g. a TextBox item for static or data-bound text, a PictureBox for displaying images, a Barcode for showing a barcode in a label report, etc.|<ul><li>TextBox</li><li>HtmlTextBox</li><li>PictureBox</li><li>CheckBox</li><li>Barcode</li><li>Shape</li><li>Panel</li><li>Radial Gauge Wizard</li><li>Linear Gauge Wizard</li></ul>|
+|[Tables]({%slug web-report-designer-user-guide-components-tables%}) - The Table report item is a generalized layout report item that displays report data in cells that are organized into rows and columns.|<ul><li>List</li><li>Table</li><li>Crosstab</li><li>Table Wizard</li><li>Crosstab Wizard</li></ul>|
+|Reports - The [SubReport]({%slug web-report-designer-user-guide-components-subreport%}) item enables you to display reports within reports and serves as a container, similar to the report sections, growing in size depending on its children.|<ul><li>SubReport</li></ul>|
+|[Maps]({%slug web-report-designer-user-guide-components-maps%}) - The Map report item is a Telerik Reporting item which enables you to visualize aggregate business data in a geographical manner.|<ul><li>Map types: Point, Pie, Column</li><li>Choropleth</li></ul>|
+|[Charts]({%slug web-report-designer-user-guide-components-charts%}) - The Graph report item is a Telerik Reporting item that allows you to generate different Chart types (objects) and visually present large volumes of aggregated information.|<ul><li>Bar Chart</li><li>Line Chart</li><li>Area Chart</li><li>Column Chart</li><li>Pie Chart</li><li>Doughnut Chart</li></ul>|
+|[Report Sections]({%slug user-guide/components/report-sections%}) - A Telerik report consists of different sections that may contain report items. Each report section represents a specific area on the report page and defines the report items you can add.|<ul><li>Page Header</li><li>Page Footer</li><li>Report Header</li><li>Report Footer</li><li>Table of Contents</li></ul>|
+|[Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) - Data Source components are used to connect data items to different types of data without writing any code.|<ul><li>SQL Data Source</li><li>CSV Data Source</li><li>Web Service Data Source</li><li>GraphQL Data Source</li><li>JSON Data Source</li><li>Object Data Source</li></ul>|
+
+## Next Steps
+
+* [Learn about Report Items]({%slug user-guide/components/report-items%})
+* [Configure Data Sources]({%slug web-report-designer-user-guide-components-data-sources%})
+* [Explore Report Sections]({%slug user-guide/components/report-sections%})
+* [Create Your First Report]({%slug web-report-designer-user-guide-getting-started%})
+
+## See Also
+
+* [Report Structure]({%slug user-guide/report-structure%})
+* [Working with Tables]({%slug web-report-designer-user-guide-components-tables%})