Merge pull request #31 from erossini/feature/groupYAxis

Add GroupYAxis
erossini · Dec 6, 2022 · 994f180 · 994f180
2 parents 0845449 + 0cb5e2b
commit 994f180
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 13 deletions.
diff --git a/ChartjsDemo/Pages/BarHorizontal.razor b/ChartjsDemo/Pages/BarHorizontal.razor
@@ -1,4 +1,4 @@
-@page "/barSimple"
+@page "/barHorizontal"
 
 <h3>Bar Simple</h3>
 
@@ -30,6 +30,7 @@ protected override async Task OnInitializedAsync()
     {
         Options = new Options()
         {
+            IndexAxis = "y",
             Responsive = true,
             MaintainAspectRatio = false,
             Plugins = new Plugins()
@@ -86,6 +87,7 @@ protected override async Task OnInitializedAsync()
         {
             Options = new Options()
             {
+                IndexAxis = "y",
                 Responsive = true,
                 MaintainAspectRatio = false,
                 Plugins = new Plugins()

diff --git a/ChartjsDemo/Pages/BarSimple.razor b/ChartjsDemo/Pages/BarSimple.razor
@@ -1,4 +1,4 @@
-@page "/barHorizontal"
+@page "/barSimple"
 
 <h3>Bar Simple</h3>
 
@@ -86,15 +86,14 @@ protected override async Task OnInitializedAsync()
         {
             Options = new Options()
             {
-                IndexAxis = "y",
                 Responsive = true,
                 MaintainAspectRatio = false,
                 Plugins = new Plugins()
                 {
                     Legend = new Legend()
                     {
                         Align = Align.Center,
-                        Display = false,
+                        Display = true,
                         Position = LegendPosition.Right
                     }
                 },

diff --git a/ChartjsDemo/Pages/LineMultiAxes.razor b/ChartjsDemo/Pages/LineMultiAxes.razor
@@ -18,6 +18,12 @@ To achieve that, under <b>Options</b>, there is <b>GroupXAxis</b>: if the proper
 
 <Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
 
+<p>
+    Also, the graph can have multiple Y axis. In the following example, I use the same values from the example above but the axises are inverted and the group is on Y.
+</p>
+
+<Chart Config="_config2" @ref="_chart2" Height="400px"></Chart>
+
 <hr />
 
 <h3>Code</h3>
@@ -37,6 +43,8 @@ To achieve that, under <b>Options</b>, there is <b>GroupXAxis</b>: if the proper
 <CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
 private LineChartConfig? _config1;
 private Chart? _chart1;
+private LineChartConfig? _config2;
+private Chart? _chart2;
 
 public static List&lt;string> MultiAxesLineText = new List&lt;string>() { 
     "January;2015", "February;2015;Y", "March;2015", 
@@ -53,23 +61,46 @@ protected override async Task OnInitializedAsync()
         }
     };
 
-    _config1.Data.Labels = LineDataExamples.SimpleLineText;
+    _config1.Data.Labels = LineDataExamples.MultiAxesLineText;
     _config1.Data.Datasets.Add(new LineDataset()
         {
-            Label = "My First Dataset",
-            Data = LineDataExamples.SimpleLine.ToList(),
+            Label = "# of Votes",
+            Data = LineDataExamples.MultiAxesLine.ToList(),
             BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
             Tension = 0.1M,
             Fill = false,
             PointRadius= 15,
             PointStyle = PointStyle.Cross
         });
+
+    _config2 = new LineChartConfig()
+        {
+            Options = new Options()
+            {
+                GroupYAxis = true,
+                IndexAxis = "y"
+            }
+        };
+
+    _config2.Data.Labels = LineDataExamples.MultiAxesLineText;
+    _config2.Data.Datasets.Add(new LineDataset()
+        {
+            Label = "# of Votes",
+            Data = LineDataExamples.MultiAxesLine.ToList(),
+            BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
+            Tension = 0.1M,
+            Fill = false,
+            PointRadius = 15,
+            PointStyle = PointStyle.Cross
+        });
 }
 </CodeSnippet>
 
 @code {
     private LineChartConfig? _config1;
     private Chart? _chart1;
+    private LineChartConfig? _config2;
+    private Chart? _chart2;
 
     protected override async Task OnInitializedAsync()
     {
@@ -92,5 +123,26 @@ protected override async Task OnInitializedAsync()
                 PointRadius= 15,
                 PointStyle = PointStyle.Cross
             });
+
+        _config2 = new LineChartConfig()
+            {
+                Options = new Options()
+                {
+                    GroupYAxis = true,
+                    IndexAxis = "y"
+                }
+            };
+
+        _config2.Data.Labels = LineDataExamples.MultiAxesLineText;
+        _config2.Data.Datasets.Add(new LineDataset()
+            {
+                Label = "# of Votes",
+                Data = LineDataExamples.MultiAxesLine.ToList(),
+                BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
+                Tension = 0.1M,
+                Fill = false,
+                PointRadius = 15,
+                PointStyle = PointStyle.Cross
+            });
     }
 }
diff --git a/ChartjsDemo/Pages/StackedBarSimple.razor b/ChartjsDemo/Pages/StackedBarSimple.razor
@@ -0,0 +1,151 @@
+@page "/stackedbar"
+
+<h3>Bar Simple</h3>
+
+<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
+
+<hr />
+
+<h3>Code</h3>
+
+<p>
+    This is the component to add in your page.
+</p>
+
+<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
+&ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
+</CodeSnippet>
+
+<p>
+    Then, in the code section, add the following code:
+</p>
+
+<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
+private BarChartConfig? _config1;
+private Chart? _chart1;
+
+protected override async Task OnInitializedAsync()
+{
+    _config1 = new BarChartConfig()
+        {
+            Options = new Options()
+            {
+                Responsive = true,
+                MaintainAspectRatio = false,
+                Plugins = new Plugins()
+                {
+                    Legend = new Legend()
+                    {
+                        Align = Align.Center,
+                        Display = true,
+                        Position = LegendPosition.Right
+                    }
+                },
+                Scales = new Dictionary&lt;string, Axis>()
+                {
+                    {
+                        Scales.XAxisId, new Axis()
+                        {
+                            Stacked = true,
+                            Ticks = new Ticks()
+                            {
+                                MaxRotation = 0,
+                                MinRotation = 0
+                            }
+                        }
+                    },
+                    {
+                        Scales.YAxisId, new Axis()
+                        {
+                            Stacked = true
+                        }
+                    }
+                },
+                IndexAxis = Axes.Y
+            }
+        };
+
+    _config1.Data.Labels = BarDataExamples.GroupedLabels;
+    _config1.Data.Datasets.Add(new BarDataset()
+        {
+            Label = "Value",
+            Data = BarDataExamples.Grouped1,
+            BackgroundColor = new List&lt;string>() { Colors.Palette1.First() },
+            BorderColor = new List&lt;string>() { Colors.Palette1.First() },
+            BorderWidth = 1
+        });
+    _config1.Data.Datasets.Add(new BarDataset()
+        {
+            Label = "Value2",
+            Data = BarDataExamples.Grouped2,
+            BackgroundColor = new List&lt;string>() { Colors.PaletteBorder1.First() },
+            BorderColor = new List&lt;string>() { Colors.PaletteBorder1.First() },
+            BorderWidth = 1
+        });
+}
+</CodeSnippet>
+
+@code {
+    private BarChartConfig? _config1;
+    private Chart? _chart1;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _config1 = new BarChartConfig()
+            {
+                Options = new Options()
+                {
+                    Responsive = true,
+                    MaintainAspectRatio = false,
+                    Plugins = new Plugins()
+                    {
+                        Legend = new Legend()
+                        {
+                            Align = Align.Center,
+                            Display = true,
+                            Position = LegendPosition.Right
+                        }
+                    },
+                    Scales = new Dictionary<string, Axis>()
+                    {
+                        {
+                            Scales.XAxisId, new Axis()
+                            {
+                                Stacked = true,
+                                Ticks = new Ticks()
+                                {
+                                    MaxRotation = 0,
+                                    MinRotation = 0
+                                }
+                            }
+                        },
+                        {
+                            Scales.YAxisId, new Axis()
+                            {
+                                Stacked = true
+                            }
+                        }
+                    },
+                    IndexAxis = Axes.Y
+                }
+            };
+
+        _config1.Data.Labels = BarDataExamples.GroupedLabels;
+        _config1.Data.Datasets.Add(new BarDataset()
+            {
+                Label = "Value",
+                Data = BarDataExamples.Grouped1,
+                BackgroundColor = new List<string>() { Colors.Palette1.First() },
+                BorderColor = new List<string>() { Colors.Palette1.First() },
+                BorderWidth = 1
+            });
+        _config1.Data.Datasets.Add(new BarDataset()
+            {
+                Label = "Value2",
+                Data = BarDataExamples.Grouped2,
+                BackgroundColor = new List<string>() { Colors.PaletteBorder1.First() },
+                BorderColor = new List<string>() { Colors.PaletteBorder1.First() },
+                BorderWidth = 1
+            });
+    }
+}
diff --git a/ChartjsDemo/Shared/NavMenu.razor b/ChartjsDemo/Shared/NavMenu.razor
@@ -29,6 +29,11 @@
                 <span class="oi oi-bar-chart" aria-hidden="true"></span> Horizontal Bar
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="stackedbar">
+                <span class="oi oi-bar-chart" aria-hidden="true"></span> Stacked Bar
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="lineSimple">
                 <span class="oi oi-graph" aria-hidden="true"></span> Line Simple

diff --git a/src/Models/Common/Legend.cs b/src/Models/Common/Legend.cs
@@ -54,7 +54,7 @@ public Align? Align
         /// <value><c>null</c> if fullSize contains no value, <c>true</c> is the default; otherwise, <c>false</c>.</value>
         [JsonPropertyName("fullSize")]
         [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
-        public bool? FullSize { get; set; } = true;
+        public bool? FullSize { get; set; }
 
         /// <summary>
         /// Gets or sets the position.
@@ -90,7 +90,7 @@ public LegendPosition Position
         ///   <c>true</c> if reverse; otherwise, <c>false</c>.
         /// </value>
         [JsonPropertyName("reverse")]
-        public bool Reverse { get; set; } = false;
+        public bool Reverse { get; set; }
 
         /// <summary>
         /// Gets or sets a value indicating if the <see cref="Legend"/> will be rendered from right to left.

diff --git a/src/Models/Common/Options.cs b/src/Models/Common/Options.cs
@@ -90,6 +90,38 @@ public bool? GroupXAxis {
         }
         private bool? _groupXAxis;
 
+        /// <summary>
+        /// Gets or sets a value indicating whether [group y axis].
+        /// </summary>
+        /// <value><c>null</c> if [group y axis] contains no value, <c>true</c> if [group y axis]; otherwise, <c>false</c>.</value>
+        [JsonPropertyName("groupYAxis")]
+        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+        public bool? GroupYAxis
+        {
+            get => _groupYAxis;
+            set
+            {
+                _groupYAxis = value;
+
+                if (Scales == null)
+                    Scales = new Dictionary<string, Axis>();
+
+                if (Scales.Keys.Where(k => k == "y").Count() == 0)
+                    Scales.Add("y", new Axis() { Ticks = new Ticks() });
+                if (Scales.Keys.Where(k => k == "yAxis2").Count() == 0)
+                    Scales.Add("yAxis2", new Axis()
+                    {
+                        Type = "category",
+                        Grid = new Grid()
+                        {
+                            DrawOnChartArea = false
+                        },
+                        Ticks = new Ticks()
+                    });
+            }
+        }
+        private bool? _groupYAxis;
+
         /// <summary>
         /// Gets a value indicating whether this instance has on hover asynchronous.
         /// </summary>

diff --git a/src/Models/Common/StringEnums/LegendPosition.cs b/src/Models/Common/StringEnums/LegendPosition.cs
@@ -52,7 +52,7 @@ public static LegendPosition Left
         /// Right
         /// </value>
         public static LegendPosition Right
-        { get { return new LegendPosition("Right"); } }
+        { get { return new LegendPosition("right"); } }
 
         /// <summary>
         /// Gets the value.

diff --git a/src/PSC.Blazor.Components.Chartjs.csproj b/src/PSC.Blazor.Components.Chartjs.csproj
@@ -7,7 +7,7 @@
     <PackageIcon>psc_logo.png</PackageIcon>
     <ApplicationIcon>psc_ico.ico</ApplicationIcon>
     <PackageReadmeFile>README.md</PackageReadmeFile>
-    <PackageReleaseNotes>Add multiple axes - Fix few bugs</PackageReleaseNotes>
+    <PackageReleaseNotes>Fix legend</PackageReleaseNotes>
     <PackAsTool>False</PackAsTool>
     <Copyright>Enrico Rossini - PureSourceCode.com</Copyright>
     <RepositoryType>git</RepositoryType>