Merge pull request #11 from DHTMLX/next

Updates for v8.4

Author: mafanya23

docs/assets/chart/show_percent_values.png

@@ -8,6 +8,10 @@ description: You can explore the data config of Chart in the documentation of th
 
 @short: Optional. Specifies an array of data objects to set into the chart
 
+:::info
+Please note that if you specify the `id` fields in the data collection, their values should be **unique**. You can also omit the `id` fields in the data collection. In this case they will be generated automatically.
+:::
+
 @signature: {'data?: object[];'}
 
 @example:

docs/assets/combo/options_group.png

@@ -249,6 +249,7 @@ series: [
         strokeWidth?: number,
         subType?: "basic" | "percentOnly" | "valueOnly",
         useLines?: boolean,
+        valueTemplate?: (value: number) => string
     }
 ]
 ~~~
@@ -299,12 +300,16 @@ series: [
         </tr>
         <tr>
             <td><b>subType</b></td>
-            <td>(optional) specifies the subtype of a chart: "basic"|"percentOnly"|"valueOnly"</td>
+            <td>(optional) specifies the subtype of a chart: "basic" | "percentOnly" | "valueOnly"</td>
         </tr>
         <tr>
             <td><b>useLines</b></td>
             <td>(optional) shows/hides lines used to "connect" chart sectors with labels</td>
         </tr>
+         <tr>
+            <td><b>valueTemplate</b></td>
+            <td>(optional) a function that specifies the template for rendering the values for data items on a chart<br/><br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/77aei7os?tag=chart" target="_blank">Chart. Value template</a> </td>
+        </tr>
     </tbody>
 </table>
 <br><br>

docs/assets/tabbar/tabs_tooltips.png

@@ -39,6 +39,8 @@ description: You can explore the pdf method of Chart in the documentation of the
             - `title` - (optional) document name
             - `pageNumber` - (optional) current page number
             - `totalPages` - (optional) total pages in the document
+    - `header?: string` - (optional) an HTML template for the header in the exported file
+    - `footer?: string` - (optional) an HTML template for the footer in the exported file
 
 
 @example:
@@ -78,7 +80,8 @@ It is necessary to set sufficient margin for correct display of `headerTemplate`
 **Related API:** [exportStyles](chart/api/chart_exportstyles_config.md)
 
 **Change log:** 
+- The **header** and **footer** options of the export object were added in v8.4
 - The **theme**, **exportStyles** options of the export object were added in v8.1
-- The **pageRanges**, **displayHeaderFooter**, **footerTemplate**, **headerTemplate** options of the pdf object were added in 8.1
-- The method was added in v8.0
+- The **pageRanges**, **displayHeaderFooter**, **footerTemplate**, **headerTemplate** options of the pdf object were added in v8.1
+- Added in v8.0
 

docs/chart/api/chart_data_config.md

@@ -16,6 +16,8 @@ description: You can explore the png method of Chart in the documentation of the
     - `name?: string` - (optional) the name of the exported file
     - `theme?: string` - (optional) the exported theme, "light" by default. For custom or overridden themes, enable the `exportStyles` option
     - `exportStyles?: boolean | string[]` - (optional) defines the styles that will be sent to the export service when exporting Chart. Use *false* to prevent all styles from being sent to the export service
+    - `header?: string` - (optional) an HTML template for the header in the exported file
+    - `footer?: string` - (optional) an HTML template for the footer in the exported file
 
 @example:
 // default export
@@ -34,5 +36,7 @@ chart.export.png({
 **Related API:** [exportStyles](chart/api/chart_exportstyles_config.md)
 
 **Change log:** 
+
+- The **header** and **footer** options of the export object were added in 8.4
 - The **theme** and **exportStyles** options of the export object were added in 8.1
-- The method was added in v8.0
+- Added in v8.0

docs/chart/api/chart_series_config.md

@@ -201,7 +201,7 @@ const chart = new dhx.Chart("chart_container", {
 
 **Related sample**: [Chart. Show text](https://snippet.dhtmlx.com/o7ke2f1s)
 
-The **showTextTemplate** option of [series](chart/configuration_properties.md#series) lets you an opportunity to add a template to values that are shown for data items in bars:
+The **showTextTemplate** option of [series](chart/configuration_properties.md#series) allows you to add a template to values that are shown for data items in bars:
 
 ~~~js {20-22,29-31}
 const chart = new dhx.Chart("chart_container", {
@@ -245,3 +245,25 @@ const chart = new dhx.Chart("chart_container", {
     }
 });
 ~~~
+
+## Adding template to values of data items in Pie and Donut charts
+
+![](../assets/chart/show_percent_values.png)
+
+**Related sample**: [Chart. Value template](https://snippet.dhtmlx.com/o7ke2f1s)
+
+When you need to show values for data items on the Pie, Pie3D and Donut charts, you can use the **valueTemplate** option of [series](chart/configuration_properties.md#the-list-of-config-options-for-series-for-charts-without-scales-pie-pie3d-donut) to specify the necessary template function. For example:
+
+~~~jsx {6-8}
+const chart = new dhx.Chart("chart_container", {
+    type: "pie",
+    series: [
+        {
+            value: "value",
+            valueTemplate: value => {
+                return (value * 100).toFixed(2) + "%";
+            }
+        }
+    ]
+});
+~~~ 

docs/chart/api/export/chart_pdf_method.md

@@ -15,7 +15,13 @@ First, you need to prepare a data set that will be loaded into Chart.
 
 ## Preparing data set
 
-DHTMLX Chart expects loaded data in the JSON format. Here are examples of appropriate data sets for different chart types:
+DHTMLX Chart expects loaded data in the JSON format. 
+
+:::info
+Please note that if you specify the `id` fields in the data collection, their values should be **unique**. You can also omit the `id` fields in the data collection. In this case they will be generated automatically.
+:::
+
+Here are examples of appropriate data sets for different chart types:
 
 - **Line, Spline, Bar, X-Bar, Area, Spline Area, Radar, Scatter charts**
 
@@ -46,7 +52,7 @@ A data set for Pie, Pie3D and Donut charts differs a little bit and includes the
     <tbody>
         <tr>
             <td><b>id</b></td>
-            <td>(<i>string, number</i>) the id of a series </td>
+            <td>(<i>string | number</i>) the id of a series</td>
         </tr>
         <tr>
             <td><b>key:value</b></td>
@@ -84,7 +90,7 @@ A data set for Treemap chart has also another structure and may include the foll
     <tbody>
         <tr>
             <td><b>id</b></td>
-            <td>(<i>string, number</i>) the id of a tile or group</td>
+            <td>(<i>string | number</i>) the id of a tile or group</td>
         </tr>
         <tr>
             <td><b>key:value</b></td>
@@ -122,7 +128,7 @@ A data set for Heatmap chart should include the following properties:
     <tbody>
         <tr>
             <td><b>id</b></td>
-            <td>(<i>string, number</i>) the id of a cell</td>
+            <td>(<i>string | number</i>) the id of a cell</td>
         </tr>
         <tr>
             <td><b>key:value</b></td>

docs/chart/api/export/chart_png_method.md

@@ -15,7 +15,13 @@ First, you need to prepare a data set that will be loaded into Combo.
 
 ## Preparing data set
 
-DHTMLX Combo expects loaded data in the JSON format. Here is an example of an appropriate data set:
+DHTMLX Combo expects loaded data in the JSON format. 
+
+:::info
+Please note that if you specify the `id` fields in the data collection, their values should be **unique**. You can also omit the `id` fields in the data collection. In this case they will be generated automatically.
+:::
+
+Here is an example of an appropriate data set:
 
 ~~~js
 const dataset = [