diff --git a/code-gen-library/ToolbarDownloadChart/Angular.ts b/code-gen-library/ToolbarDownloadChart/Angular.ts new file mode 100644 index 000000000..c2a71e298 --- /dev/null +++ b/code-gen-library/ToolbarDownloadChart/Angular.ts @@ -0,0 +1,16 @@ +//begin imports +import { IgxToolbarComponent, IgxToolActionLabelComponent, IgxToolActionComponent, IgxToolCommandEventArgs } from 'igniteui-angular-layouts'; +//end imports + + +export class ToolbarDownloadChart { + + //begin eventHandler + public ToolbarDownloadChart(): void { + + //TODO + + } + //end eventHandler + +} \ No newline at end of file diff --git a/code-gen-library/ToolbarDownloadChart/Blazor.cs b/code-gen-library/ToolbarDownloadChart/Blazor.cs new file mode 100644 index 000000000..ac41bd556 --- /dev/null +++ b/code-gen-library/ToolbarDownloadChart/Blazor.cs @@ -0,0 +1,20 @@ +//begin imports +using IgniteUI.Blazor.Controls; +using System; +//end imports + +public class ToolbarDownloadChart +{ + //begin eventHandler + public void ToolbarDownloadChart(IgbToolCommandEventArgs args) + { + var target = this.chart; + switch (args.Command.CommandId) + { + case "DownloadAsImage": + JS.InvokeVoidAsync("ToolbarDownloadScript", null); + break; + } + } + //end eventHandler +} \ No newline at end of file diff --git a/code-gen-library/ToolbarDownloadChart/React.tsx b/code-gen-library/ToolbarDownloadChart/React.tsx new file mode 100644 index 000000000..da8c6fdcf --- /dev/null +++ b/code-gen-library/ToolbarDownloadChart/React.tsx @@ -0,0 +1,16 @@ +//begin imports +import { IgrToolbarComponent, IgrToolActionLabelComponent, IgrToolActionComponent, IgrToolCommandEventArgs } from 'igniteui-react-layouts'; +//end imports + + +export class ToolbarDownloadChart { + + //begin eventHandler + public toolbarDownloadChart(): void { + + //TODO + + } + //end eventHandler + +} \ No newline at end of file diff --git a/code-gen-library/ToolbarDownloadChart/WPF.cs b/code-gen-library/ToolbarDownloadChart/WPF.cs new file mode 100644 index 000000000..7600bd8cf --- /dev/null +++ b/code-gen-library/ToolbarDownloadChart/WPF.cs @@ -0,0 +1,31 @@ +//begin imports +using Infragistics.Controls; +using Infragistics.Controls.Layouts; +using System; +using System.Collections.Generic; +using System.Collections.ObjectModel; +using System.Diagnostics; +using System.Linq; +using System.Text; +using System.Threading.Tasks; +using System.Windows; +using System.Windows.Controls; +using System.Windows.Data; +using System.Windows.Documents; +using System.Windows.Input; +using System.Windows.Media; +using System.Windows.Media.Imaging; +using System.Windows.Navigation; +using System.Windows.Shapes; +//end imports + +public class ToolbarDownloadChart +{ + + //begin eventHandler + public void ToolbarDownloadChart() + { + //TODO + } + //end eventHandler +} \ No newline at end of file diff --git a/code-gen-library/ToolbarDownloadChart/WebComponents.ts b/code-gen-library/ToolbarDownloadChart/WebComponents.ts new file mode 100644 index 000000000..baef2e47d --- /dev/null +++ b/code-gen-library/ToolbarDownloadChart/WebComponents.ts @@ -0,0 +1,16 @@ +//begin imports +import { IgcToolbarComponent, IgcToolActionLabelComponent, IgcToolActionComponent, IgcToolCommandEventArgs } from 'igniteui-webcomponents-layouts'; +//end imports + + +export class ToolbarDownloadChart { + + //begin eventHandler + public toolbarDownloadChart(): void { + + //TODO + + } + //end eventHandler + +} \ No newline at end of file diff --git a/code-gen-library/ToolbarDownloadScript/Blazor.js b/code-gen-library/ToolbarDownloadScript/Blazor.js new file mode 100644 index 000000000..fee8d604c --- /dev/null +++ b/code-gen-library/ToolbarDownloadScript/Blazor.js @@ -0,0 +1,17 @@ +//begin template +function toolbarDownloadScript() { + var chart = document.getElementsByClassName("ig-data-chart igc-data-chart")[0]; + var image = chart.renderToImage(chart.viewportRect.width, chart.viewportRect.height); + this.saveBase64AsFile(image.src, "file.jpg"); +} + +function saveBase64AsFile(base64, fileName) { + var link = document.createElement("a"); + document.body.appendChild(link); + link.setAttribute("type", "hidden"); + link.href = base64; + link.download = fileName; + link.click(); + document.body.removeChild(link); +} +//end template \ No newline at end of file diff --git a/samples/charts/toolbar/download-data-chart-as-image.json b/samples/charts/toolbar/download-data-chart-as-image.json new file mode 100644 index 000000000..136ae410b --- /dev/null +++ b/samples/charts/toolbar/download-data-chart-as-image.json @@ -0,0 +1,82 @@ +{ + "TODO": "CodeGen does not yet support external JS scripts called from event handler", + "export": false, + "descriptions": { + "aboveContentLeft": { + "type": "Toolbar", + "name": "Toolbar", + "targetRef": "chart", + "orientation": "Horizontal", + "onCommandRef": "ToolbarDownloadChart", + "actions": [ + { + "name": "DownloadChartImage", + "type": "ToolActionIconButton", + "title": "Download as Image", + "overlayId": "CopyAsImage", + "commandId": "DownloadAsImage" + + } + ] + }, + "content": { + "type": "DataChart", + "computedPlotAreaMarginMode": "Series", + "isHorizontalZoomEnabled": true, + "isVerticalZoomEnabled": true, + "name": "chart", + "axes": [ + { + "type": "CategoryXAxis", + "name": "xAxis", + "dataSourceRef": "CountryRenewableElectricity", + "label": "Year" + }, + { + "type": "NumericYAxis", + "name": "yAxis", + "title": "TWh", + "labelLocation": "OutsideRight" + } + ], + "series": [ + { + "type": "LineSeries", + "name": "LineSeries1", + "title": "Electricity", + "xAxisRef": "xAxis", + "yAxisRef": "yAxis", + "dataSourceRef": "CountryRenewableElectricity", + "valueMemberPath": "America" + }, + { + "type": "LineSeries", + "name": "LineSeries2", + "title": "Electricity", + "xAxisRef": "xAxis", + "yAxisRef": "yAxis", + "dataSourceRef": "CountryRenewableElectricity", + "valueMemberPath": "Europe" + }, + { + "type": "LineSeries", + "name": "LineSeries3", + "title": "Electricity", + "xAxisRef": "xAxis", + "yAxisRef": "yAxis", + "dataSourceRef": "CountryRenewableElectricity", + "valueMemberPath": "China" + } + ] + } + }, + "modules": [ + "layouts/ToolbarModule", + "charts/DataChartToolbarModule", + "charts/DataChartCoreModule", + "charts/DataChartCategoryModule", + "charts/DataChartAnnotationModule", + "charts/DataChartInteractivityModule", + "charts/DataChartCategoryTrendLineModule" + ] +}