Merge pull request #107 from apexcharts/csv-dateformatter

Fixed Export CSV DateFromatter
apexcharts · Jun 7, 2022 · 904e060 · 904e060
2 parents 3377abf + 56f26ae
commit 904e060
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 2 deletions.
diff --git a/docs/BlazorApexCharts.Docs/Components/Features/Export/CsvFormatter.razor b/docs/BlazorApexCharts.Docs/Components/Features/Export/CsvFormatter.razor
@@ -0,0 +1,46 @@
+<DemoContainer>
+    <ApexChart TItem="Order" Title="Orders Value"
+               XAxisType="XAxisType.Datetime"
+               Options="options">
+
+        <ApexPointSeries TItem="Order"
+                         Items="SampleData.GetOrders()"
+                         Name="Net Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.OrderDate.FirstDayOfMonth())"
+                         YAggregate="@(e => e.Sum(e => e.NetValue))"
+                         OrderBy="e=>e.X" />
+
+        <ApexPointSeries TItem="Order"
+                         Items="SampleData.GetOrders()"
+                         Name="Gross Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.OrderDate.FirstDayOfMonth())"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         OrderBy="e=>e.X" />
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private ApexChartOptions<Order> options = new ApexCharts.ApexChartOptions<Order>();
+    protected override void OnInitialized()
+    {
+        options.Chart = new Chart
+            {
+                Toolbar = new Toolbar
+                {
+                    Export = new ExportOptions
+                    {
+                        Csv = new ExportCSV
+                        {
+                            Filename = "Test Date formatter",
+                            HeaderCategory = "sep=|" + Environment.NewLine + "Date",
+                            ColumnDelimiter = "|",
+                            DateFormatter = "function (value) {  return new Date(value).toLocaleString(); }"
+
+                        }
+                    }
+                }
+            };
+    }
+}
diff --git a/docs/BlazorApexCharts.Docs/Components/Features/Export/Export.razor b/docs/BlazorApexCharts.Docs/Components/Features/Export/Export.razor
@@ -8,4 +8,12 @@
         </Snippet>
     </CodeSnippet>
 
+    <CodeSnippet Title="CSV formatter" ClassName=@typeof(CsvFormatter).ToString()>
+        <Snippet>
+            <CsvFormatter />
+        </Snippet>
+    </CodeSnippet>
+
+
+
 </DocExamples>
diff --git a/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js b/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js
@@ -49,7 +49,7 @@
 
     updateOptions(id, options, redrawPaths, animate, updateSyncedCharts) {
         var data = JSON.parse(options, (key, value) =>
-            (key === 'formatter' || key === 'custom') && value.length !== 0 ? eval("(" + value + ")") : value
+            (key === 'formatter' || key === 'dateFormatter' || key === 'custom') && value.length !== 0 ? eval("(" + value + ")") : value
         );
         var chart = this.findChart(id);
         if (chart !== undefined) {
@@ -189,7 +189,7 @@
         }
 
         var options = JSON.parse(options, (key, value) =>
-            (key === 'formatter' || key === 'custom') && value.length !== 0 ? eval("(" + value + ")") : value
+            (key === 'formatter' || key === 'dateFormatter' || key === 'custom') && value.length !== 0 ? eval("(" + value + ")") : value
         );
 
         if (options.debug == true) {