Added support for formatters

apexcharts · Sep 7, 2021 · d923a01 · d923a01
1 parent d91d488
commit d923a01
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 19 deletions.
diff --git a/samples/DemoCharts/Pages/DateTimeChart.razor b/samples/DemoCharts/Pages/DateTimeChart.razor
@@ -37,13 +37,19 @@
     protected override void OnInitialized()
     {
 
-        //Stacked 100% test
-        //options.Chart = new Chart { Stacked = true, Type = ChartType.Bar, StackType = StackType.Percent100 };
-
+        options.Debug = true;
         options.Tooltip = new Tooltip { X = new TooltipX { Format = @"MMMM \ yyyy" } };
 
         options.Subtitle = new Subtitle { OffsetY = 15, Text = "DateTime sample with options" };
 
+        options.Tooltip = new Tooltip {
+            Enabled = true,
+            Y = new TooltipY { 
+                Title = new TooltipYTitle {Formatter = @"function(name) { return name + ':' }" },
+                Formatter = @"function(value, { series, seriesIndex, dataPointIndex, w }) { return '$' + value }" },
+        };
+
+
         options.Xaxis = new XAxis
         {
             Title = new XaxisTitle

diff --git a/samples/DemoCharts/Pages/GaugeChart.razor b/samples/DemoCharts/Pages/GaugeChart.razor
@@ -34,7 +34,12 @@
                 DataLabels = new RadialBarDataLabels
                 {
                     Name = new RadialBarDataLabelsName { FontSize = "26px", OffsetY=-20 },
-                    Value = new RadialBarDataLabelsValue { FontSize = "36px", FontWeight = "bold", Color = "lightgray" }
+                    Value = new RadialBarDataLabelsValue { 
+                        FontSize = "36px",
+                        FontWeight = "bold", 
+                        Color = "lightgray",
+                        Formatter = @"function (val) { return val + '%' }"
+                    }
                 }
             }
         };

diff --git a/samples/DemoCharts/Properties/launchSettings.json b/samples/DemoCharts/Properties/launchSettings.json
@@ -11,20 +11,21 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "launchUrl": "datetime-chart",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-      }
+      },
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
     },
     "DemoCharts": {
       "commandName": "Project",
-      "dotnetRunMessages": "true",
       "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:5001;http://localhost:5000",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-      }
+      },
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "dotnetRunMessages": "true"
     }
   }
-}
+}
diff --git a/src/Blazor-ApexCharts/ApexChart.razor.cs b/src/Blazor-ApexCharts/ApexChart.razor.cs
@@ -193,13 +193,15 @@ public async Task Render()
                 PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
                 IgnoreNullValues = true,
             };
-           
+
             serializerOptions.Converters.Add(new DataPointConverter<TItem>());
             serializerOptions.Converters.Add(new CustomJsonStringEnumConverter());
             var jsonOptions = JsonSerializer.Serialize(Options, serializerOptions);
+
             await JSRuntime.InvokeVoidAsync("blazor_apexchart.renderChart", ObjectReference, ChartContainer, jsonOptions);
             await OnDataPointSelection.InvokeAsync(null);
         }
+
 
         public void Dispose()
         {

diff --git a/src/Blazor-ApexCharts/Models/ApexChartOptions.cs b/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
@@ -7,7 +7,7 @@ namespace ApexCharts
     public class ApexChartOptions<TItem>
     {
         public bool Debug { get; set; }
-        
+
         /// <summary>
         /// Annotations options
         /// See https://apexcharts.com/docs/options/annotations/
@@ -486,6 +486,7 @@ public class DataLabels
         public double? OffsetY { get; set; }
         public DataLabelsStyle Style { get; set; }
         public TextAnchor? TextAnchor { get; set; }
+        public string Formatter { get; set; }
     }
 
     public class DataLabelsBackground
@@ -959,6 +960,7 @@ public class RadialBarDataLabelsValue
         public string FontSize { get; set; }
         public object FontWeight { get; set; }
         public double? OffsetY { get; set; }
+        public string Formatter { get; set; }
         public bool? Show { get; set; }
     }
 
@@ -1144,7 +1146,7 @@ public class Tooltip
         public IndigoStyle Style { get; set; }
         public string Theme { get; set; }
         public TooltipX X { get; set; }
-        public object Y { get; set; }
+        public TooltipY Y { get; set; }
         public TooltipZ Z { get; set; }
     }
 
@@ -1182,17 +1184,28 @@ public class TooltipX
     {
         public string Format { get; set; }
         public bool? Show { get; set; }
+        public string Formatter { get; set; }
     }
 
     public class PurpleY
     {
         public Dictionary<string, object> Title { get; set; }
     }
+    public class TooltipYTitle
+    {
+        public string Formatter { get; set; }
+    }
+
+    public class TooltipY
+    {
+        public TooltipYTitle Title { get; set; }
+        public string Formatter { get; set; }
+    }
 
-
     public class TooltipZ
     {
         public string Title { get; set; }
+        public string Formatter { get; set; }
     }
 
     /// <summary>
@@ -1289,6 +1302,7 @@ public class XaxisLabels
         public PurpleDatetimeFormatter DatetimeFormatter { get; set; }
         public bool? DatetimeUTC { get; set; }
         public string Format { get; set; }
+        public string Formatter { get; set; }
         public bool? HideOverlappingLabels { get; set; }
         public double? MaxHeight { get; set; }
         public double? MinHeight { get; set; }
@@ -1415,6 +1429,7 @@ public class YAxisLabels
         public double? Padding { get; set; }
         public double? Rotate { get; set; }
         public bool? Show { get; set; }
+        public string Formatter { get; set; }
         public YAxisLabelStyle Style { get; set; }
     }
 
@@ -3115,7 +3130,7 @@ public class ApexGridXaxis
     {
         public Lines Lines { get; set; }
     }
-  
+
     public class ApexGridYaxis
     {
         public Lines Lines { get; set; }
@@ -3138,10 +3153,12 @@ public class ApexThemeMonochrome
 
     public enum Easing { Easein, Easeinout, Easeout, Linear };
 
-    public enum StackType { 
+    public enum StackType
+    {
         Normal,
         [EnumMember(Value = "100%")]
-        Percent100 };
+        Percent100
+    };
 
     public enum AutoSelected { Pan, Selection, Zoom };
 

diff --git a/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js b/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js
@@ -11,7 +11,17 @@
     },
 
     renderChart(dotNetObject, container, options) {
-        var options = JSON.parse(options);
+
+        if (options.debug == true) {
+            console.log(options);
+        }
+
+        var options = JSON.parse(options, (key, value) =>
+            key === 'formatter' && value.length !== 0 ? eval("(" + value + ")") : value
+
+);
+
+
 
         if (options.debug == true) {
             console.log(options);