Merge pull request #80 from apexcharts/add-datapoint-custom

Make possible to pass some extra data to a datapoint

Author: joadan

docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json

@@ -11,7 +11,7 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "launchBrowser": true,
-      "launchUrl": "candlestick-charts",
+      "launchUrl": "features/formatters",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

docs/BlazorApexCharts.Docs/Components/Features/Formatters/ExtraData.razor

@@ -0,0 +1,76 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value"
+    Options="options"
+    Debug>
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         OrderByDescending="e=>e.Y" ShowDataLabels 
+                        DataPointMutator=SetCustomData/>
+
+        
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+    private ApexChartOptions<Order> options;
+
+    protected override void OnInitialized()
+    {
+        options = new ApexChartOptions<Order>();
+
+        options.Yaxis = new List<YAxis>();
+        options.Yaxis.Add(new YAxis
+            {
+                Labels = new YAxisLabels
+                {
+                    Formatter = @"function (value) {
+                    return '$' + Number(value).toLocaleString();}"
+                }
+            }
+        );
+
+        options.Xaxis = new XAxis
+            {
+                Labels = new XAxisLabels
+                {
+                    Formatter = @"function (value) {
+                    if (value === undefined) {return '';}
+                    return value.toUpperCase();}"
+                }
+            };
+
+        options.DataLabels = new DataLabels
+            {
+                Formatter = @"function(value, opts) {
+            return  Number(value).toLocaleString();}"
+            };
+
+        options.Tooltip = new ApexCharts.Tooltip
+            {
+                X = new TooltipX
+                {
+                    Formatter = @"function(value, opts) {
+                    if (value === undefined) {return '';}
+                    let extra =  opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].extra;                   
+                    return  opts.w.globals.categoryLabels[value-1] + ':' + value + ' [' + extra.label + ']'}"
+                }
+            };
+    }
+
+    private void SetCustomData(DataPoint<Order> datapoint)
+    {
+        datapoint.Extra = new AdditionalData { Label = "Extra Data!" };
+    }
+
+    public class AdditionalData
+    {
+        public string Label { get; set; }
+    }
+    }

docs/BlazorApexCharts.Docs/Components/Features/Formatters/FormatterSamples.razor

@@ -1,14 +1,20 @@
 @page "/features/formatters"
 
 <DocExamples Title="Formatters">
+       
 
      <CodeSnippet Title="Use javascript" ClassName=@typeof(UseJavascript).ToString()>
         <Snippet>
             <UseJavascript />
         </Snippet>
     </CodeSnippet>
 
-    
+     <CodeSnippet Title="Pass Extra Data" ClassName=@typeof(ExtraData).ToString()>
+        <Snippet>
+            <ExtraData />
+        </Snippet>
+    </CodeSnippet>
+
     <CodeSnippet Title="Use DotNet" ClassName=@typeof(UseDotnet).ToString()>
         <Description>
             <Alert BackgroundColor=TablerColor.Danger>

src/Blazor-ApexCharts/ApexChart.razor.cs

@@ -4,7 +4,6 @@
 using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
-using System.Diagnostics;
 using System.Linq;
 using System.Text.Json;
 using System.Threading.Tasks;

src/Blazor-ApexCharts/Models/DataPoints/BubblePoint.cs

@@ -15,7 +15,8 @@ public class BubblePoint<TItem> : IDataPoint<TItem>
 
         public decimal Z { get; set; }
 
-      
+        public object Extra { get; set; }
+
         [JsonIgnore]
         public IEnumerable<TItem> Items { get; set; }
 

src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs

@@ -17,6 +17,7 @@ public class DataPoint<TItem> : IDataPoint<TItem>
         [JsonIgnore]
         public IEnumerable<TItem> Items { get; set; }
 
+        public object Extra { get; set; }
     }
 
     public class DataPointGoal

src/Blazor-ApexCharts/Models/DataPoints/IDataPoint.cs

@@ -7,6 +7,8 @@ public interface IDataPoint<TItem>
         IEnumerable<TItem> Items { get; set; }
         object X { get; set; }
         string FillColor { get; set; }
+
+        object Extra { get; set; }
 
     }
 }

src/Blazor-ApexCharts/Models/DataPoints/ListPoint.cs

@@ -13,8 +13,9 @@ public class ListPoint<TItem> : IDataPoint<TItem>
         public object X { get; set; }
         [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
         public IEnumerable<decimal?> Y { get; set; }
-      
-       
+
+        public object Extra { get; set; }
+
         [JsonIgnore]
         public IEnumerable<TItem> Items { get; set; }
     }

src/Blazor-ApexCharts/Series/ApexBaseSeries.cs

@@ -2,7 +2,6 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
-using System.Linq.Expressions;
 using System.Threading.Tasks;
 
 namespace ApexCharts
@@ -17,7 +16,6 @@ public abstract class ApexBaseSeries<TItem> : ComponentBase where TItem : class
         [Parameter] public IEnumerable<TItem> Items { get; set; }
         [Parameter] public SeriesStroke Stroke { get; set; }
         [Parameter] public string Color { get; set; }
-
         [Parameter] public Func<TItem, string> PointColor { get; set; }
         public async Task Toggle()
         {
@@ -46,11 +44,10 @@ public string GetPointColor(IEnumerable<TItem> items)
             return PointColor.Invoke(items.First());
         }
 
-
-        public  List<T> UpdateDataPoints<T>(IEnumerable<T> items, Action<T>  updateMethod)
+        public List<T> UpdateDataPoints<T>(IEnumerable<T> items, Action<T> updateMethod)
         {
             var data = items.ToList();
-            if(updateMethod == null)
+            if (updateMethod == null)
             {
                 return data;
             }

src/Blazor-ApexCharts/Series/IApexSeries.cs

@@ -12,6 +12,7 @@ public interface IApexSeries<TItem> : IDisposable where TItem : class
         Func<TItem, object> XValue { get; set; }
         IEnumerable<TItem> Items { get; set; }
         string Color { get; set; }
+        
         bool ShowDataLabels { get; set; }
         SeriesStroke Stroke { get; set; }
         public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> items);