listForm ve Chart birleştirildi

api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsDto.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Text.Json;
 using System.Text.Json.Serialization;
+using Kurs.Platform.Charts.Dto;
 using Kurs.Platform.Enums;
 using Volo.Abp.Application.Dtos;
 
@@ -332,4 +333,356 @@ public class GridOptionsDto : AuditedEntityDto<Guid>
         }
         set { LayoutJson = JsonSerializer.Serialize(value); }
     }
+
+    /// <summary> Chart a yetkili kullanıcı. UserId ve RoleId boş ise herkes yetkilidir
+    /// </summary>
+    public string UserId { get; set; }
+    /// <summary> Chart a yetkili rol. UserId ve RoleId boş ise herkes yetkilidir
+    /// </summary>
+    public string RoleId { get; set; }
+    /// <summary> Grafik hangi dile ait
+    /// </summary>
+
+    /// <summary> DxChart'ın istediği diğer bütün ayarların tutulduğu Json veri yapısı
+    /// </summary>
+    [JsonIgnore]
+    public string CommonJson { get; set; }
+    public ChartCommonDto CommonDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(CommonJson))
+                return JsonSerializer.Deserialize<ChartCommonDto>(CommonJson);
+            return new ChartCommonDto();
+        }
+        set { CommonJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Uyarlanabilir düzen özelliklerini tutan Json veri yapısıdır.
+    /// Uyarlanabilir düzen, UI bileşeninin, kapsayıcıya sığmayan isteğe bağlı öğeleri gizlemesini sağlar.
+    /// Şu sırada gizlenir: Title, Export menu icon, Legend, Axis titles, Axis labels
+    /// </summary>
+    [JsonIgnore]
+    public string AdaptiveLayoutJson { get; set; }
+    public ChartAdaptivelayoutDto AdaptivelayoutDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(AdaptiveLayoutJson))
+                return JsonSerializer.Deserialize<ChartAdaptivelayoutDto>(AdaptiveLayoutJson);
+            return new ChartAdaptivelayoutDto();
+        }
+        set { AdaptiveLayoutJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Animasyon özelliklerini belirtir.
+    /// UI bileşeni, öğeler ilk yüklenirken ve veri kaynağı değiştiğinde canlandırır
+    /// </summary>
+    [JsonIgnore]
+    public string AnimationJson { get; set; }
+    public ChartAnimationDto AnimationDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(AnimationJson))
+                return JsonSerializer.Deserialize<ChartAnimationDto>(AnimationJson);
+            return new ChartAnimationDto();
+        }
+        set { AnimationJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Ek açıklama koleksiyonuna ait Json veri yapısı.
+    /// Ek açıklamalar, görselleştirilmiş veriler hakkında ek bilgiler görüntüleyen resimler, metin blokları ve özel içerik için içeriklerdir
+    /// </summary>
+    [JsonIgnore]
+    public string AnnotationsJson { get; set; }
+    public List<ChartAnnotationDto> AnnotationsDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(AnnotationsJson))
+                return JsonSerializer.Deserialize<List<ChartAnnotationDto>>(AnnotationsJson);
+            return new List<ChartAnnotationDto>();
+        }
+        set { AnnotationsJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary>Bağımsız değişken eksenini yapılandırır.
+    /// Burada açıklanan argumentAxis nesnesi, bağımsız değişken eksenini ayrı ayrı yapılandırır. 
+    /// Bir grafikteki tüm eksenler için ortak ayarlar belirtmek üzere commonAxisSettings nesnesini kullanılmalıdır. 
+    /// Eksene özgü ayarlar, ortak ayarları geçersiz kılar.
+    /// </summary>
+    [JsonIgnore]
+    public string ArgumentAxisJson { get; set; }
+    public ChartArgumentAxisDto ArgumentAxisDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(ArgumentAxisJson))
+                return JsonSerializer.Deserialize<ChartArgumentAxisDto>(ArgumentAxisJson);
+            return new ChartArgumentAxisDto();
+        }
+        set { ArgumentAxisJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Grafikteki tüm detaylandırmalar için ortak olan ayarları belirtir.
+    /// Burada belirtilen ayarlar, AnnotationsJson dizisinde belirtilen bireysel ek açıklama ayarlar var ise  göz ardı edilebilir. 
+    /// Ek açıklamaların nasıl yapılandırılacağı hakkında bilgi için AnnotationsJson açıklamasına bakın.
+    /// </summary>
+    [JsonIgnore]
+    public string CommonAnnotationsSettingsJson { get; set; }
+    public ChartCommonAnnotationDto CommonAnnotationSettingsDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(CommonAnnotationsSettingsJson))
+                return JsonSerializer.Deserialize<ChartCommonAnnotationDto>(CommonAnnotationsSettingsJson);
+            return new ChartCommonAnnotationDto();
+        }
+        set { CommonAnnotationsSettingsJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Bir grafikte hem bağımsız değişken hem de değer ekseni için ortak ayarları tanımlar.
+    /// Burada belirtilen ayarlar, ArgumentAxisJson yada ValueAxisJson ayarları dolu ise göz ardı edilir
+    /// </summary>
+    [JsonIgnore]
+    public string CommonAxisSettingsJson { get; set; }
+    /// <summary> Bir grafikte hem bağımsız değişken hem de değer ekseni için ortak ayarları tanımlar.
+    /// </summary>
+    public ChartCommonAxisDto CommonAxisSettingsDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(CommonAxisSettingsJson))
+                return JsonSerializer.Deserialize<ChartCommonAxisDto>(CommonAxisSettingsJson);
+            return new ChartCommonAxisDto();
+        }
+        set { CommonAxisSettingsJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary>Bir grafikteki tüm bölmeler için ortak ayarları tanımlar.
+    /// Bölme, dizi içeren bir grafik alanıdır. Bir grafikte çok sayıda seri varsa, bunlar birden çok bölme arasında dağıtılabilir.
+    /// </summary>
+    [JsonIgnore]
+    public string CommonPaneSettingsJson { get; set; }
+    public ChartCommonPaneDto CommonPaneSettingsDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(CommonPaneSettingsJson))
+                return JsonSerializer.Deserialize<ChartCommonPaneDto>(CommonPaneSettingsJson);
+            return new ChartCommonPaneDto();
+        }
+        set { CommonPaneSettingsJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Grafikteki tüm seriler için ortak olan ayarları belirtir.
+    /// </summary>
+    [JsonIgnore]
+    public string CommonSeriesSettingsJson { get; set; }
+    public ChartCommonSeriesSettingsDto CommonSeriesSettingsDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(CommonSeriesSettingsJson))
+                return JsonSerializer.Deserialize<ChartCommonSeriesSettingsDto>(CommonSeriesSettingsJson);
+            return new ChartCommonSeriesSettingsDto();
+        }
+        set { CommonSeriesSettingsJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> fare ile grafik üzerindeki bir noktaya gelindiğinde yatay ve dikey çizgilerin çıkmasını sağlayan Json veri yapısıdır
+    /// </summary>
+    [JsonIgnore]
+    public string CrosshairJson { get; set; }
+    public ChartCrosshairDto CrosshairDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(CrosshairJson))
+                return JsonSerializer.Deserialize<ChartCrosshairDto>(CrosshairJson);
+            return new ChartCrosshairDto();
+        }
+        set { CrosshairJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Dışa aktarma ve yazdırma özelliklerini yapılandırır
+    /// </summary>
+    [JsonIgnore]
+    public string ExportJson { get; set; }
+    public ChartExportDto ExportDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(ExportJson))
+                return JsonSerializer.Deserialize<ChartExportDto>(ExportJson);
+            return new ChartExportDto();
+        }
+        set { ExportJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary>Bir grafiğin açıklamasının (lejant) özelliklerini belirtir.
+    /// Grafik Kullanıcı Arabirimi bileşeni, bir diziyi tanımlamanıza yardımcı olan açıklayıcı bir bileşen olan bir açıklama içerebilir. 
+    /// Her seri, bir Legend bir öğe ile temsil edilir. Bir öğe işaretçisi, seri rengini tanımlar.
+    /// </summary>
+    [JsonIgnore]
+    public string LegendJson { get; set; }
+    public ChartLegendDto LegendDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(LegendJson))
+                return JsonSerializer.Deserialize<ChartLegendDto>(LegendJson);
+            return new ChartLegendDto();
+        }
+        set { LegendJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> UI bileşeni çevresinde boşluk ayarlarını yapılandırır
+    /// </summary>
+    [JsonIgnore]
+    public string MarginJson { get; set; }
+    public ChartMarginDto MarginDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(MarginJson))
+                return JsonSerializer.Deserialize<ChartMarginDto>(MarginJson);
+            return new ChartMarginDto();
+        }
+        set { MarginJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Bölme alanlarını bildirir. Bölme, dizi içeren bir grafik alanıdır. 
+    /// Bir grafikte çok sayıda seri varsa, bunlar birden çok bölme arasında dağıtılabilir.
+    /// </summary>
+    [JsonIgnore]
+    public string PanesJson { get; set; }
+    /// <summary>
+    /// Bilgilendirme: PanesDto dolu ise Serilerin Pane property leri mutlaka dolu olmalıdır
+    /// </summary>
+    public List<ChartPanesDto> PanesDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(PanesJson))
+                return JsonSerializer.Deserialize<List<ChartPanesDto>>(PanesJson);
+            return new List<ChartPanesDto>();
+        }
+        set { PanesJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Kaydırma çubuğunun ayarlarını belirtir.
+    /// </summary>
+    [JsonIgnore]
+    public string ScrollBarJson { get; set; }
+    public ChartScrollBarDto ScrollBarDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(ScrollBarJson))
+                return JsonSerializer.Deserialize<ChartScrollBarDto>(ScrollBarJson);
+            return new ChartScrollBarDto();
+        }
+        set { ScrollBarJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Chart UI bileşen serisi için özellikleri belirtir.
+    /// Cannot be used in themes
+    /// </summary>
+    [JsonIgnore]
+    public string SeriesJson { get; set; }
+    public List<ChartSeriesDto> SeriesDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(SeriesJson))
+                return JsonSerializer.Deserialize<List<ChartSeriesDto>>(SeriesJson);
+            return new List<ChartSeriesDto>();
+        }
+        set { SeriesJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Char boyutunu belirtir
+    /// </summary>
+    [JsonIgnore]
+    public string SizeJson { get; set; }
+    public ChartSizeDto SizeDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(SizeJson))
+                return JsonSerializer.Deserialize<ChartSizeDto>(SizeJson);
+            return new ChartSizeDto();
+        }
+        set { SizeJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Başlık ayarlarını içeren Json veri yapısı
+    /// </summary>
+    [JsonIgnore]
+    public string TitleJson { get; set; }
+    /// <summary> Başlık ayarlarının nesnesi
+    /// </summary>
+    public ChartTitleDto TitleDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(TitleJson))
+                return JsonSerializer.Deserialize<ChartTitleDto>(TitleJson);
+            return new ChartTitleDto();
+        }
+        set { TitleJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Tooltip ayarlarını içeren Json veri yapısıdır.
+    /// Tooltip, bir seri noktasının değerlerini gösteren minyatür bir dikdörtgendir. 
+    /// Kullanıcı imleci bir dizi noktasının üzerine getirdiğinde bir araç ipucu görünür.
+    /// </summary>
+    [JsonIgnore]
+    public string TooltipJson { get; set; }
+    public ChartTooltipDto TooltipDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(TooltipJson))
+                return JsonSerializer.Deserialize<ChartTooltipDto>(TooltipJson);
+            return new ChartTooltipDto();
+        }
+        set { TooltipJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Değer eksenini yapılandırır.
+    /// Burada açıklanan valueAxis nesnesi, değer eksenini ayrı ayrı yapılandırır. 
+    /// Bir grafikteki tüm eksenler için ortak ayarlar belirtmek üzere commonAxisSettings nesnesini kullanılmalıdır. Eksene özgü ayarlar, ortak ayarları geçersiz kılar. 
+    /// </summary>
+    [JsonIgnore]
+    public string ValueAxisJson { get; set; }
+    public List<ChartValueAxisDto> ValueAxisDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(ValueAxisJson))
+                return JsonSerializer.Deserialize<List<ChartValueAxisDto>>(ValueAxisJson);
+            return new List<ChartValueAxisDto>();
+        }
+        set { ValueAxisJson = JsonSerializer.Serialize(value); }
+    }
+
+    /// <summary> Yakınlaştırmayı ve kaydırmayı yapılandırır.
+    /// Bağımsız değişken ve değer eksenleri için yakınlaştırmayı ve kaydırmayı etkinleştirebilirsiniz. 
+    /// Belirli bir eksen için yakınlaştırmayı, kaydırmayı veya her ikisini birden etkinleştirmek için argumentAxis ve valueAxis özellikleri ayarlanmalıdır
+    /// </summary>
+    [JsonIgnore]
+    public string ZoomAndPanJson { get; set; }
+    public ChartZoomAndPanDto ZoomAndPanDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(ZoomAndPanJson))
+                return JsonSerializer.Deserialize<ChartZoomAndPanDto>(ZoomAndPanJson);
+            return new ChartZoomAndPanDto();
+        }
+        set { ZoomAndPanJson = JsonSerializer.Serialize(value); }
+    }
 }

api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs

@@ -51,4 +51,15 @@ public class ListFormEditTabs
     public const string Fields = "fields";
     public const string Customization = "customization";
     public const string ExtraFilterForm = "extraFilter";
+    // Chart ile ilgili sekmeler
+    public const string ChartAnimations = "chartAnimations";
+    public const string ChartAnnotations = "chartAnnotations";
+    public const string ChartCommon = "chartCommon";
+    public const string ChartSeries = "chartSeries";
+    public const string ChartAxis = "chartAxis";
+    public const string ChartPanes = "chartPanes";
+    public const string ChartCrosshair = "chartCrosshair";
+    public const string ChartExport = "chartExport";
+    public const string ChartLegend = "chartLegend";
+    public const string ChartZoom = "chartZoom";
 }

api/src/Kurs.Platform.Application/ListForms/Administration/ListFormsAppService.cs

@@ -66,6 +66,10 @@ public class ListFormsAppService : CrudAppService<
             item.IsSubForm = input.IsSubForm;
             item.ListFormType = input.ListFormType;
             item.LayoutJson = JsonSerializer.Serialize(input.LayoutDto);
+
+            //Chart ile ilgili sütunlar
+            item.RoleId = input.RoleId;
+            item.UserId = input.UserId;
         }
         else if (input.EditType == ListFormEditTabs.Database.DataSourceForm)
         {
@@ -147,6 +151,49 @@ public class ListFormsAppService : CrudAppService<
             item.SubFormsJson = JsonSerializer.Serialize(input.SubFormsDto);
         }
 
+        /*Chart*/
+        else if (input.EditType == ListFormEditTabs.ChartCommon)
+        {
+            item.CommonJson = JsonSerializer.Serialize(input.CommonDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartSeries)
+        {
+            item.SeriesJson = JsonSerializer.Serialize(input.SeriesDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartAxis)
+        {
+            item.CommonAxisSettingsJson = JsonSerializer.Serialize(input.CommonAxisSettingsDto);
+            item.ArgumentAxisJson = JsonSerializer.Serialize(input.ArgumentAxisDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartPanes)
+        {
+            item.PanesJson = JsonSerializer.Serialize(input.PanesDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartAnimations)
+        {
+            item.AnimationJson = JsonSerializer.Serialize(input.AnimationDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartAnnotations)
+        {
+            item.AnnotationsJson = JsonSerializer.Serialize(input.AnnotationsDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartZoom)
+        {
+            item.ZoomAndPanJson = JsonSerializer.Serialize(input.ZoomAndPanDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartLegend)
+        {
+            item.LegendJson = JsonSerializer.Serialize(input.LegendDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartExport)
+        {
+            item.ExportJson = JsonSerializer.Serialize(input.ExportDto);
+        }
+        else if (input.EditType == ListFormEditTabs.ChartCrosshair)
+        {
+            item.CrosshairJson = JsonSerializer.Serialize(input.CrosshairDto);
+        }
+
         await Repository.UpdateAsync(item, autoSave: true);
 
         return await MapToGetOutputDtoAsync(item);

api/src/Kurs.Platform.Domain/Entities/ListForm.cs

@@ -125,4 +125,105 @@ public class ListForm : FullAuditedEntity<Guid>
 
     /// <summary>bu listform'un üstünde yer alan widgetların listesidir</summary>
     public string LayoutJson { get; set; }
+
+    /*
+    Chart ile ilgili alanlar
+    */
+
+    /// <summary> Chart a yetkili kullanıcı. UserId ve RoleId boş ise herkes yetkilidir
+    /// </summary>
+    public string UserId { get; set; }
+    /// <summary> Chart a yetkili rol. UserId ve RoleId boş ise herkes yetkilidir
+    /// </summary>
+    public string RoleId { get; set; }
+
+    /// <summary> DxChart'ın istediği ve aşağıdaki diğer propertyler içerisinde olmayan diğer bütün ayarların tutulduğu Json veri yapısı
+    /// </summary>
+    public string CommonJson { get; set; }
+    /// <summary> Chart'a ait sorguların tutulduğu Json veri yapısı
+    /// </summary>
+    public string DataSourceJson { get; set; }
+
+    /// <summary> Uyarlanabilir düzen özelliklerini tutan Json veri yapısıdır.
+    /// Uyarlanabilir düzen, UI bileşeninin, kapsayıcıya sığmayan isteğe bağlı öğeleri gizlemesini sağlar.
+    /// </summary>
+    public string AdaptiveLayoutJson { get; set; }
+    /// <summary> Animasyon özelliklerini belirtir.
+    /// UI bileşeni, öğeler ilk yüklenirken ve veri kaynağı değiştiğinde canlandırır
+    /// </summary>
+    public string AnimationJson { get; set; }
+    /// <summary> Ek açıklama koleksiyonuna ait Json veri yapısı.
+    /// Ek açıklamalar, görselleştirilmiş veriler hakkında ek bilgiler görüntüleyen resimler, metin blokları ve özel içerik için içeriklerdir
+    /// </summary>
+    public string AnnotationsJson { get; set; }
+    /// <summary>Bağımsız değişken eksenini yapılandırır.
+    /// Burada açıklanan argumentAxis nesnesi, bağımsız değişken eksenini ayrı ayrı yapılandırır. 
+    /// Bir grafikteki tüm eksenler için ortak ayarlar belirtmek üzere commonAxisSettings nesnesini kullanılmalıdır. 
+    /// Eksene özgü ayarlar, ortak ayarları geçersiz kılar.
+    /// </summary>
+    public string ArgumentAxisJson { get; set; }
+
+    /// <summary> Grafikteki tüm detaylandırmalar için ortak olan ayarları belirtir.
+    /// Burada belirtilen ayarlar, AnnotationsJson dizisinde belirtilen bireysel ek açıklama ayarlar var ise  göz ardı edilebilir. 
+    /// Ek açıklamaların nasıl yapılandırılacağı hakkında bilgi için AnnotationsJson açıklamasına bakın.
+    /// </summary>
+    public string CommonAnnotationsSettingsJson { get; set; }
+    /// <summary> Bir grafikte hem bağımsız değişken hem de değer ekseni için ortak ayarları tanımlar.
+    /// Burada belirtilen ayarlar, ArgumentAxisJson yada ValueAxisJson ayarları dolu ise göz ardı edilir
+    /// </summary>
+    public string CommonAxisSettingsJson { get; set; }
+    /// <summary>Bir grafikteki tüm bölmeler için ortak ayarları tanımlar.
+    /// Bölme, dizi içeren bir grafik alanıdır. Bir grafikte çok sayıda seri varsa, bunlar birden çok bölme arasında dağıtılabilir.
+    /// </summary>
+    public string CommonPaneSettingsJson { get; set; }
+    /// <summary> Grafikteki tüm seriler için ortak olan ayarları belirtir.
+    /// </summary>
+    public string CommonSeriesSettingsJson { get; set; }
+
+    /// <summary> fare ile grafik üzerindeki bir noktaya gelindiğinde yatay ve dikey çizgilerin çıkmasını sağlayan Json veri yapısıdır
+    /// </summary>
+    public string CrosshairJson { get; set; }
+    /// <summary> Dışa aktarma ve yazdırma özelliklerini yapılandırır
+    /// </summary>
+    public string ExportJson { get; set; }
+    /// <summary>Bir grafiğin açıklamasının (lejant) özelliklerini belirtir.
+    /// Grafik Kullanıcı Arabirimi bileşeni, bir diziyi tanımlamanıza yardımcı olan açıklayıcı bir bileşen olan bir açıklama içerebilir. 
+    /// Her seri, bir Legend bir öğe ile temsil edilir. Bir öğe işaretçisi, seri rengini tanımlar.
+    /// </summary>
+    public string LegendJson { get; set; }
+    /// <summary> UI bileşeni çevresinde boşluk ayarlarını yapılandırır
+    /// </summary>
+    public string MarginJson { get; set; }
+    /// <summary> Bölme alanlarını bildirir. Bölme, dizi içeren bir grafik alanıdır. 
+    /// Bir grafikte çok sayıda seri varsa, bunlar birden çok bölme arasında dağıtılabilir.
+    /// </summary>
+    public string PanesJson { get; set; }
+    /// <summary> Kaydırma çubuğunun ayarlarını belirtir.
+    /// </summary>
+    public string ScrollBarJson { get; set; }
+    /// <summary> Chart UI bileşen serisi için özellikleri belirtir.
+    /// Cannot be used in themes
+    /// </summary>
+    public string SeriesJson { get; set; }
+    /// <summary> Char boyutunu belirtir
+    /// </summary>
+    public string SizeJson { get; set; }
+    /// <summary> Başlık ayarlarını içeren Json veri yapısı
+    /// </summary>
+    public string TitleJson { get; set; }
+    /// <summary> Tooltip ayarlarını içeren Json veri yapısıdır.
+    /// Tooltip, bir seri noktasının değerlerini gösteren minyatür bir dikdörtgendir. 
+    /// Kullanıcı imleci bir dizi noktasının üzerine getirdiğinde bir araç ipucu görünür.
+    /// </summary>
+    public string TooltipJson { get; set; }
+    /// <summary> Değer eksenini yapılandırır.
+    /// Burada açıklanan valueAxis nesnesi, değer eksenini ayrı ayrı yapılandırır. 
+    /// Bir grafikteki tüm eksenler için ortak ayarlar belirtmek üzere commonAxisSettings nesnesini kullanılmalıdır. Eksene özgü ayarlar, ortak ayarları geçersiz kılar. 
+    /// </summary>
+    public string ValueAxisJson { get; set; }
+    /// <summary> Yakınlaştırmayı ve kaydırmayı yapılandırır.
+    /// Bağımsız değişken ve değer eksenleri için yakınlaştırmayı ve kaydırmayı etkinleştirebilirsiniz. 
+    /// Belirli bir eksen için yakınlaştırmayı, kaydırmayı veya her ikisini birden etkinleştirmek için argumentAxis ve valueAxis özellikleri ayarlanmalıdır
+    /// </summary>
+    public string ZoomAndPanJson { get; set; }
 }

api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250926063427_Initial.Designer.cs

@@ -13,7 +13,7 @@ using Volo.Abp.EntityFrameworkCore;
 namespace Kurs.Platform.Migrations
 {
     [DbContext(typeof(PlatformDbContext))]
-    [Migration("20250925111605_Initial")]
+    [Migration("20250926063427_Initial")]
     partial class Initial
     {
         /// <inheritdoc />
@@ -2751,12 +2751,39 @@ namespace Kurs.Platform.Migrations
                     b.Property<Guid>("Id")
                         .HasColumnType("uniqueidentifier");
 
+                    b.Property<string>("AdaptiveLayoutJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("AnimationJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("AnnotationsJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ArgumentAxisJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("ColumnOptionJson")
                         .HasColumnType("nvarchar(max)");
 
                     b.Property<string>("CommandColumnJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("CommonAnnotationsSettingsJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("CommonAxisSettingsJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("CommonJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("CommonPaneSettingsJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("CommonSeriesSettingsJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<DateTime>("CreationTime")
                         .HasColumnType("datetime2")
                         .HasColumnName("CreationTime");
@@ -2765,6 +2792,9 @@ namespace Kurs.Platform.Migrations
                         .HasColumnType("uniqueidentifier")
                         .HasColumnName("CreatorId");
 
+                    b.Property<string>("CrosshairJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("CultureName")
                         .HasColumnType("nvarchar(max)");
 
@@ -2777,6 +2807,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("DataSourceCode")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("DataSourceJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("DefaultFilter")
                         .HasColumnType("nvarchar(max)");
 
@@ -2806,6 +2839,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("EditingOptionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("ExportJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("ExtraFilterJson")
                         .HasColumnType("nvarchar(max)");
 
@@ -2872,6 +2908,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("LayoutJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("LegendJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("ListFormCode")
                         .IsRequired()
                         .HasColumnType("nvarchar(450)");
@@ -2879,6 +2918,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("ListFormType")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("MarginJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("Name")
                         .HasColumnType("nvarchar(max)");
 
@@ -2890,12 +2932,21 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("PagerOptionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("PanesJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("PermissionJson")
                         .HasColumnType("nvarchar(max)");
 
                     b.Property<string>("PivotOptionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("RoleId")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ScrollBarJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("SearchPanelJson")
                         .HasColumnType("nvarchar(max)");
 
@@ -2911,6 +2962,12 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("SelectionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("SeriesJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("SizeJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("SortMode")
                         .HasColumnType("nvarchar(max)");
 
@@ -2926,6 +2983,12 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("Title")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("TitleJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("TooltipJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("UpdateCommand")
                         .HasColumnType("nvarchar(max)");
 
@@ -2935,12 +2998,21 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("UpdateServiceAddress")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("UserId")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ValueAxisJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("WidgetsJson")
                         .HasColumnType("nvarchar(max)");
 
                     b.Property<int?>("Width")
                         .HasColumnType("int");
 
+                    b.Property<string>("ZoomAndPanJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.HasKey("Id");
 
                     b.ToTable("PListForm", (string)null);

api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250926063427_Initial.cs

@@ -1243,6 +1243,30 @@ namespace Kurs.Platform.Migrations
                     WidgetsJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
                     ExtraFilterJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
                     LayoutJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    UserId = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    RoleId = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    CommonJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    DataSourceJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    AdaptiveLayoutJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    AnimationJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    AnnotationsJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    ArgumentAxisJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    CommonAnnotationsSettingsJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    CommonAxisSettingsJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    CommonPaneSettingsJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    CommonSeriesSettingsJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    CrosshairJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    ExportJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    LegendJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    MarginJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    PanesJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    ScrollBarJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    SeriesJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    SizeJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    TitleJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    TooltipJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    ValueAxisJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    ZoomAndPanJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
                     CreationTime = table.Column<DateTime>(type: "datetime2", nullable: false),
                     CreatorId = table.Column<Guid>(type: "uniqueidentifier", nullable: true),
                     LastModificationTime = table.Column<DateTime>(type: "datetime2", nullable: true),

api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs

@@ -2748,12 +2748,39 @@ namespace Kurs.Platform.Migrations
                     b.Property<Guid>("Id")
                         .HasColumnType("uniqueidentifier");
 
+                    b.Property<string>("AdaptiveLayoutJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("AnimationJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("AnnotationsJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ArgumentAxisJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("ColumnOptionJson")
                         .HasColumnType("nvarchar(max)");
 
                     b.Property<string>("CommandColumnJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("CommonAnnotationsSettingsJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("CommonAxisSettingsJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("CommonJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("CommonPaneSettingsJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("CommonSeriesSettingsJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<DateTime>("CreationTime")
                         .HasColumnType("datetime2")
                         .HasColumnName("CreationTime");
@@ -2762,6 +2789,9 @@ namespace Kurs.Platform.Migrations
                         .HasColumnType("uniqueidentifier")
                         .HasColumnName("CreatorId");
 
+                    b.Property<string>("CrosshairJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("CultureName")
                         .HasColumnType("nvarchar(max)");
 
@@ -2774,6 +2804,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("DataSourceCode")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("DataSourceJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("DefaultFilter")
                         .HasColumnType("nvarchar(max)");
 
@@ -2803,6 +2836,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("EditingOptionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("ExportJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("ExtraFilterJson")
                         .HasColumnType("nvarchar(max)");
 
@@ -2869,6 +2905,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("LayoutJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("LegendJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("ListFormCode")
                         .IsRequired()
                         .HasColumnType("nvarchar(450)");
@@ -2876,6 +2915,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("ListFormType")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("MarginJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("Name")
                         .HasColumnType("nvarchar(max)");
 
@@ -2887,12 +2929,21 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("PagerOptionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("PanesJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("PermissionJson")
                         .HasColumnType("nvarchar(max)");
 
                     b.Property<string>("PivotOptionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("RoleId")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ScrollBarJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("SearchPanelJson")
                         .HasColumnType("nvarchar(max)");
 
@@ -2908,6 +2959,12 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("SelectionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("SeriesJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("SizeJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("SortMode")
                         .HasColumnType("nvarchar(max)");
 
@@ -2923,6 +2980,12 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("Title")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("TitleJson")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("TooltipJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("UpdateCommand")
                         .HasColumnType("nvarchar(max)");
 
@@ -2932,12 +2995,21 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("UpdateServiceAddress")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("UserId")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ValueAxisJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("WidgetsJson")
                         .HasColumnType("nvarchar(max)");
 
                     b.Property<int?>("Width")
                         .HasColumnType("int");
 
+                    b.Property<string>("ZoomAndPanJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.HasKey("Id");
 
                     b.ToTable("PListForm", (string)null);

ui/src/proxy/admin/list-form/models.ts

@@ -82,6 +82,17 @@ export const ListFormEditTabs = {
   Fields: 'fields',
   Customization: 'customization',
   ExtraFilter: 'extraFilter',
+  //Chart Tabs
+  ChartCommon: 'chartCommon',
+  ChartSeries: 'chartSeries',
+  ChartAxis: 'chartAxis',
+  ChartPanes: 'chartPanes',
+  ChartAnimations: 'chartAnimations',
+  ChartAnnotations: 'chartAnnotations',
+  ChartZoom: 'chartZoom',
+  ChartLegend: 'chartLegend',
+  ChartExport: 'chartExport',
+  ChartCrosshair: 'chartCrosshair',
 } as const
 
 export const extraFilterControlTypeOptions = [

ui/src/proxy/form/models.ts

@@ -20,6 +20,29 @@ import { FormItemComponent } from 'devextreme/ui/form'
 import { AuditedEntityDto } from '../abp'
 import { EditorType2, RowMode } from '../../views/form/types'
 import { bool } from 'yup'
+import {
+  ChartCommonDto,
+  ChartAdaptivelayoutDto,
+  ChartAnimationDto,
+  ChartAnnotationDto,
+  ChartArgumentAxisDto,
+  ChartCommonAnnotationDto,
+  ChartCommonAxisDto,
+  ChartCommonPaneDto,
+  ChartCommonSeriesSettingsDto,
+  ChartCrosshairDto,
+  ChartExportDto,
+  ChartLegendDto,
+  ChartMarginDto,
+  ChartPanesDto,
+  ChartScrollBarDto,
+  ChartSeriesDto,
+  ChartSizeDto,
+  ChartTitleDto,
+  ChartTooltipDto,
+  ChartValueAxisDto,
+  ChartZoomAndPanDto,
+} from '../charts/models'
 
 //1
 export interface SelectListItem {
@@ -489,6 +512,52 @@ export interface GridOptionsDto extends AuditedEntityDto<string> {
   extraFilterJson?: string
   extraFilterDto: ExtraFilterDto[]
   layoutDto: LayoutDto
+
+  //ChartEditDto
+  userId?: string
+  roleId?: string
+  commonJson?: string
+  commonDto: ChartCommonDto
+  adaptiveLayoutJson?: string
+  adaptivelayoutDto: ChartAdaptivelayoutDto
+  animationJson?: string
+  animationDto: ChartAnimationDto
+  annotationsJson?: string
+  annotationsDto: ChartAnnotationDto[]
+  argumentAxisJson?: string
+  argumentAxisDto: ChartArgumentAxisDto
+  commonAnnotationsSettingsJson?: string
+  commonAnnotationSettingsDto: ChartCommonAnnotationDto
+  commonAxisSettingsJson?: string
+  commonAxisSettingsDto: ChartCommonAxisDto
+  commonPaneSettingsJson?: string
+  commonPaneSettingsDto: ChartCommonPaneDto
+  commonSeriesSettingsJson?: string
+  commonSeriesSettingsDto: ChartCommonSeriesSettingsDto
+  crosshairJson?: string
+  crosshairDto: ChartCrosshairDto
+  exportJson?: string
+  exportDto: ChartExportDto
+  legendJson?: string
+  legendDto: ChartLegendDto
+  marginJson?: string
+  marginDto: ChartMarginDto
+  panesJson?: string
+  panesDto: ChartPanesDto[]
+  scrollBarJson?: string
+  scrollBarDto: ChartScrollBarDto
+  seriesJson?: string
+  seriesDto: ChartSeriesDto[]
+  sizeJson?: string
+  sizeDto: ChartSizeDto
+  titleJson?: string
+  titleDto: ChartTitleDto
+  tooltipJson?: string
+  tooltipDto: ChartTooltipDto
+  valueAxisJson?: string
+  valueAxisDto: ChartValueAxisDto[]
+  zoomAndPanJson?: string
+  zoomAndPanDto: ChartZoomAndPanDto
 }
 
 export interface GridOptionsEditDto extends GridOptionsDto, Record<string, any> {

ui/src/views/admin/chart/edit/ChartTabAnimation.tsx

@@ -1,69 +0,0 @@
-import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-import { chartEasingListOptions } from './../options'
-
-interface ChartTabAnimationProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-}
-
-const ChartTabAnimation = ({ values, errors, touched }: ChartTabAnimationProps) => {
-  return (
-    <Card className="my-2">
-      <FormItem
-        label="Enabled"
-        invalid={!!(errors.animationDto?.enabled && touched.animationDto?.enabled)}
-        errorMessage={errors.animationDto?.enabled as string}
-      >
-        <Field name="animationDto.enabled" component={Checkbox} />
-      </FormItem>
-
-      <FormItem
-        label="Easing"
-        invalid={!!(errors.animationDto?.easing && touched.animationDto?.easing)}
-        errorMessage={errors.animationDto?.easing}
-      >
-        <Field type="text" name="animationDto.easing">
-          {({ field, form }: FieldProps<SelectBoxOption>) => (
-            <Select
-              field={field}
-              form={form}
-              options={chartEasingListOptions}
-              isClearable={true}
-              value={chartEasingListOptions.filter(
-                (option) => option.value === values.animationDto.easing,
-              )}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-
-      <FormItem
-        label="Duration"
-        invalid={!!(errors.animationDto?.duration && touched.animationDto?.duration)}
-        errorMessage={errors.animationDto?.duration as string}
-      >
-        <Field type="number" name="animationDto.duration" component={Input} />
-      </FormItem>
-
-      <FormItem
-        label="Max Point Count Supported"
-        invalid={
-          !!(
-            errors.animationDto?.maxPointCountSupported &&
-            touched.animationDto?.maxPointCountSupported
-          )
-        }
-        errorMessage={errors.animationDto?.maxPointCountSupported as string}
-      >
-        <Field type="number" name="animationDto.maxPointCountSupported" component={Input} />
-      </FormItem>
-    </Card>
-  )
-}
-
-export default ChartTabAnimation

ui/src/views/admin/chart/edit/ChartTabAnnotations.tsx

@@ -1,558 +0,0 @@
-import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
-import TabContent from '@/components/ui/Tabs/TabContent'
-import TabList from '@/components/ui/Tabs/TabList'
-import TabNav from '@/components/ui/Tabs/TabNav'
-import TBody from '@/components/ui/Table/TBody'
-import THead from '@/components/ui/Table/THead'
-import Td from '@/components/ui/Table/Td'
-import Th from '@/components/ui/Table/Th'
-import Tr from '@/components/ui/Table/Tr'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
-import {
-  chartAnnotationTypeListOptions,
-  chartSeriesDashStyleOptions,
-  chartWordWrapListOptions,
-} from './../options'
-import { ChartDialogType } from './../types'
-import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
-
-interface ChartTabAnnotationsProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-  chartValues: ChartEditDto
-  setDatabaseOperationsModalData: (data: DatabaseOperation) => void
-  setConfirmDelete: (data: ConfirmDelete) => void
-  SeriesList: () => SelectBoxOption[] | undefined
-}
-
-const ChartTabAnnotations = ({
-  values,
-  errors,
-  touched,
-  chartValues,
-  setDatabaseOperationsModalData,
-  setConfirmDelete,
-  SeriesList,
-}: ChartTabAnnotationsProps) => {
-  return (
-    <Tabs defaultValue="annotations_general">
-      <TabList>
-        <TabNav value="annotations_general">General</TabNav>
-        <TabNav value="annotations_common">Common Pane</TabNav>
-      </TabList>
-      <TabContent value="annotations_general">
-        <Card className="my-2" bodyClass="p-0">
-          <Table compact>
-            <THead>
-              <Tr>
-                <Th>
-                  <Button
-                    shape="circle"
-                    variant="plain"
-                    type="button"
-                    size="xs"
-                    title="Add"
-                    icon={<FaFileMedical />}
-                    onClick={async (e) => {
-                      e.preventDefault()
-                      setDatabaseOperationsModalData({
-                        id: values.id ?? '',
-                        index: -1,
-                        isOpen: 'annotation',
-                        operation: 'insert',
-                      })
-                    }}
-                  />
-                </Th>
-                <Th>Type</Th>
-                <Th>Name</Th>
-                <Th>Text</Th>
-                <Th>Series</Th>
-                <Th>Value</Th>
-                <Th>Width</Th>
-              </Tr>
-            </THead>
-            <TBody>
-              {chartValues.annotationsDto.map((row, index) => (
-                <Tr key={index}>
-                  <Td>
-                    <div className="flex-wrap inline-flex xl:flex items-center gap-2">
-                      <Button
-                        shape="circle"
-                        variant="plain"
-                        type="button"
-                        size="xs"
-                        title="Edit"
-                        icon={<FaEdit />}
-                        onClick={async (e) => {
-                          e.preventDefault()
-                          setDatabaseOperationsModalData({
-                            id: values.id ?? '',
-                            index,
-                            isOpen: 'annotation',
-                            operation: 'update',
-                            annotationsValues: chartValues.annotationsDto[index],
-                          })
-                        }}
-                      />
-                      <Button
-                        shape="circle"
-                        variant="plain"
-                        type="button"
-                        size="xs"
-                        title="Delete"
-                        icon={<FaTrash />}
-                        onClick={async (e) => {
-                          e.preventDefault()
-                          setConfirmDelete({
-                            isOpen: true,
-                            id: values.id ?? '',
-                            fieldName: 'annotation',
-                            index,
-                          })
-                        }}
-                      />
-                    </div>
-                  </Td>
-                  <Td>{row.type}</Td>
-                  <Td>{row.name}</Td>
-                  <Td>{row.text}</Td>
-                  <Td>{row.series}</Td>
-                  <Td>{row.value}</Td>
-                  <Td>{row.width}</Td>
-                </Tr>
-              ))}
-            </TBody>
-          </Table>
-        </Card>
-      </TabContent>
-      <TabContent value="annotations_common">
-        <Card className="my-2">
-          <FormItem
-            label="Tooltip Enabled"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.tooltipEnabled &&
-                touched.commonAnnotationSettingsDto?.tooltipEnabled
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
-          >
-            <Field name="commonAnnotationSettingsDto.tooltipEnabled" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Pan Key"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.type &&
-                touched.commonAnnotationSettingsDto?.type
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.type}
-          >
-            <Field type="text" name="commonAnnotationSettingsDto.type">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartAnnotationTypeListOptions}
-                  isClearable={true}
-                  value={chartAnnotationTypeListOptions.filter(
-                    (option) => option.value === values.commonAnnotationSettingsDto.type,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Pan Key"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.series &&
-                touched.commonAnnotationSettingsDto?.series
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.series}
-          >
-            <Field type="text" name="commonAnnotationSettingsDto.series">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={SeriesList()}
-                  isClearable={true}
-                  value={SeriesList()?.find(
-                    (option) => option.value === values.commonAnnotationSettingsDto.series,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Argument"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.argument &&
-                touched.commonAnnotationSettingsDto?.argument
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.argument}
-          >
-            <Field name="commonAnnotationSettingsDto.argument" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Color"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.color &&
-                touched.commonAnnotationSettingsDto?.color
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.color}
-          >
-            <Field name="commonAnnotationSettingsDto.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Value"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.value &&
-                touched.commonAnnotationSettingsDto?.value
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.value}
-          >
-            <Field name="commonAnnotationSettingsDto.value" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Description"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.description &&
-                touched.commonAnnotationSettingsDto?.description
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.description}
-          >
-            <Field name="commonAnnotationSettingsDto.description" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Image"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.image &&
-                touched.commonAnnotationSettingsDto?.image
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.image}
-          >
-            <Field name="commonAnnotationSettingsDto.image" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Text"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.text &&
-                touched.commonAnnotationSettingsDto?.text
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.text}
-          >
-            <Field name="commonAnnotationSettingsDto.text" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Word Wrap"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.wordWrap &&
-                touched.commonAnnotationSettingsDto?.wordWrap
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
-          >
-            <Field type="text" name="commonAnnotationSettingsDto.wordWrap">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartWordWrapListOptions}
-                  isClearable={true}
-                  value={chartWordWrapListOptions.filter(
-                    (option) => option.value === values.commonAnnotationSettingsDto.wordWrap,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.width &&
-                touched.commonAnnotationSettingsDto?.width
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.width}
-          >
-            <Field type="number" name="commonAnnotationSettingsDto.width" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Height"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.height &&
-                touched.commonAnnotationSettingsDto?.height
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.height}
-          >
-            <Field type="number" name="commonAnnotationSettingsDto.height" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="X"
-            invalid={
-              !!(errors.commonAnnotationSettingsDto?.x && touched.commonAnnotationSettingsDto?.x)
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.x}
-          >
-            <Field type="number" name="commonAnnotationSettingsDto.x" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Y"
-            invalid={
-              !!(errors.commonAnnotationSettingsDto?.y && touched.commonAnnotationSettingsDto?.y)
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.y}
-          >
-            <Field type="number" name="commonAnnotationSettingsDto.y" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Offset X"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.offsetX &&
-                touched.commonAnnotationSettingsDto?.offsetX
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
-          >
-            <Field type="number" name="commonAnnotationSettingsDto.offsetX" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Offset Y"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.offsetY &&
-                touched.commonAnnotationSettingsDto?.offsetY
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
-          >
-            <Field type="number" name="commonAnnotationSettingsDto.offsetY" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Padding Left/Right"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.paddingLeftRight &&
-                touched.commonAnnotationSettingsDto?.paddingLeftRight
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
-          >
-            <Field
-              type="number"
-              name="commonAnnotationSettingsDto.paddingLeftRight"
-              component={Input}
-            />
-          </FormItem>
-
-          <FormItem
-            label="Padding Top/Bottom"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.paddingTopBottom &&
-                touched.commonAnnotationSettingsDto?.paddingTopBottom
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
-          >
-            <Field
-              type="number"
-              name="commonAnnotationSettingsDto.paddingTopBottom"
-              component={Input}
-            />
-          </FormItem>
-        </Card>
-
-        <Card className="my-2" header="Common Annotations - Border">
-          <FormItem
-            label="Visible"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.border?.visible &&
-                touched.commonAnnotationSettingsDto?.border?.visible
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
-          >
-            <Field name="commonAnnotationSettingsDto.border.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Color"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.border?.color &&
-                touched.commonAnnotationSettingsDto?.border?.color
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
-          >
-            <Field type="text" name="commonAnnotationSettingsDto.border.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Dash Style"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.border?.dashStyle &&
-                touched.commonAnnotationSettingsDto?.border?.dashStyle
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
-          >
-            <Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartSeriesDashStyleOptions}
-                  isClearable={true}
-                  value={chartSeriesDashStyleOptions.filter(
-                    (option) =>
-                      option.value === values.commonAnnotationSettingsDto.border.dashStyle,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Corner Radius"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
-                touched.commonAnnotationSettingsDto?.border?.cornerRadius
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
-          >
-            <Field
-              type="number"
-              name="commonAnnotationSettingsDto.border.cornerRadius"
-              component={Input}
-            />
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.border?.width &&
-                touched.commonAnnotationSettingsDto?.border?.width
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
-          >
-            <Field
-              type="number"
-              name="commonAnnotationSettingsDto.border.width"
-              component={Input}
-            />
-          </FormItem>
-        </Card>
-
-        <Card className="my-2" header="Common Annotations - Font">
-          <FormItem
-            label="Color"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.font?.color &&
-                touched.commonAnnotationSettingsDto?.font?.color
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
-          >
-            <Field name="commonAnnotationSettingsDto.font.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Family"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.font?.family &&
-                touched.commonAnnotationSettingsDto?.font?.family
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
-          >
-            <Field name="commonAnnotationSettingsDto.font.family" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Size"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.font?.size &&
-                touched.commonAnnotationSettingsDto?.font?.size
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
-          >
-            <Field type="number" name="commonAnnotationSettingsDto.font.size" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Weight"
-            invalid={
-              !!(
-                errors.commonAnnotationSettingsDto?.font?.weight &&
-                touched.commonAnnotationSettingsDto?.font?.weight
-              )
-            }
-            errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
-          >
-            <Field type="number" name="commonAnnotationSettingsDto.font.weight" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-    </Tabs>
-  )
-}
-
-export default ChartTabAnnotations

ui/src/views/admin/chart/edit/ChartTabAxis.tsx

@@ -1,440 +0,0 @@
-import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
-import TBody from '@/components/ui/Table/TBody'
-import THead from '@/components/ui/Table/THead'
-import Td from '@/components/ui/Table/Td'
-import Th from '@/components/ui/Table/Th'
-import Tr from '@/components/ui/Table/Tr'
-import TabContent from '@/components/ui/Tabs/TabContent'
-import TabList from '@/components/ui/Tabs/TabList'
-import TabNav from '@/components/ui/Tabs/TabNav'
-import { ChartEditDto, ChartValueAxisDto } from '@/proxy/charts/models'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
-import {
-  chartArgumentAxisHoverModeListOptions,
-  chartArgumentAxisIntervalListOptions,
-  chartArgumentAxisLabelDisplayModeListOptions,
-  chartArgumentAxisLabelOverlappingBehaviorListOptions,
-  chartArgumentAxisPositionListOptions,
-  chartArgumentAxisTypeListOptions,
-} from './../options'
-import { ChartDialogType } from './../types'
-import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
-
-interface ChartTabAxisProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-  chartValues: ChartEditDto
-  setDatabaseOperationsModalData: (data: DatabaseOperation) => void
-  setConfirmDelete: (data: ConfirmDelete) => void
-}
-
-const ChartTabAxis = ({
-  values,
-  errors,
-  touched,
-  chartValues,
-  setDatabaseOperationsModalData,
-  setConfirmDelete,
-}: ChartTabAxisProps) => {
-  return (
-    <Tabs defaultValue="axis_value">
-      <TabList>
-        <TabNav value="axis_value">Value Axis</TabNav>
-        <TabNav value="axis_argument">Argument Axis Options</TabNav>
-        <TabNav value="axis_common">Common Axis Settings</TabNav>
-      </TabList>
-      <TabContent value="axis_value">
-        <Card className="my-2" bodyClass="p-0">
-          <Table compact>
-            <THead>
-              <Tr>
-                <Th>
-                  <Button
-                    shape="circle"
-                    variant="plain"
-                    type="button"
-                    size="xs"
-                    title="Add"
-                    icon={<FaPlus />}
-                    onClick={async (e) => {
-                      e.preventDefault()
-                      setDatabaseOperationsModalData({
-                        id: values.id ?? '',
-                        index: -1,
-                        isOpen: 'axis',
-                        operation: 'insert',
-                      })
-                    }}
-                  />
-                </Th>
-                <Th>Value Type</Th>
-                <Th>Position</Th>
-                <Th>Type</Th>
-                <Th>Name</Th>
-                <Th>Title</Th>
-                <Th>Visible</Th>
-              </Tr>
-            </THead>
-            <TBody>
-              {chartValues.valueAxisDto.map((row, index) => (
-                <Tr key={index}>
-                  <Td>
-                    <div className="flex-wrap inline-flex xl:flex items-center gap-2">
-                      <Button
-                        shape="circle"
-                        variant="plain"
-                        type="button"
-                        size="xs"
-                        title="Edit"
-                        icon={<FaEdit />}
-                        onClick={async (e) => {
-                          e.preventDefault()
-                          setDatabaseOperationsModalData({
-                            id: values.id ?? '',
-                            index,
-                            isOpen: 'axis',
-                            operation: 'update',
-                            axisValues: chartValues.valueAxisDto[index],
-                          })
-                        }}
-                      />
-                      <Button
-                        shape="circle"
-                        variant="plain"
-                        type="button"
-                        size="xs"
-                        title="Delete"
-                        icon={<FaTrash />}
-                        onClick={async (e) => {
-                          e.preventDefault()
-                          setConfirmDelete({
-                            isOpen: true,
-                            id: values.id ?? '',
-                            fieldName: 'axis',
-                            index,
-                          })
-                        }}
-                      />
-                    </div>
-                  </Td>
-                  <Td>{row.valueType}</Td>
-                  <Td>{row.position}</Td>
-                  <Td>{row.type}</Td>
-                  <Td>{row.name}</Td>
-                  <Td>{row.title}</Td>
-                  <Td>{row.visible}</Td>
-                </Tr>
-              ))}
-            </TBody>
-          </Table>
-        </Card>
-      </TabContent>
-      <TabContent value="axis_argument">
-        <Card className="my-2">
-          <FormItem
-            label="Visible"
-            invalid={!!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)}
-            errorMessage={errors.argumentAxisDto?.visible}
-          >
-            <Field name="argumentAxisDto.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Workdays Only"
-            invalid={
-              !!(errors.argumentAxisDto?.workdaysOnly && touched.argumentAxisDto?.workdaysOnly)
-            }
-            errorMessage={errors.argumentAxisDto?.workdaysOnly}
-          >
-            <Field name="argumentAxisDto.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Title"
-            invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)}
-            errorMessage={errors.argumentAxisDto?.title}
-          >
-            <Field type="text" name="argumentAxisDto.title" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Hover Mode"
-            invalid={!!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode)}
-            errorMessage={errors.argumentAxisDto?.hoverMode}
-          >
-            <Field type="text" name="argumentAxisDto.hoverMode">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartArgumentAxisHoverModeListOptions}
-                  isClearable={true}
-                  value={chartArgumentAxisHoverModeListOptions.filter(
-                    (option) => option.value === values.argumentAxisDto.hoverMode,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Argument Type"
-            invalid={
-              !!(errors.argumentAxisDto?.argumentType && touched.argumentAxisDto?.argumentType)
-            }
-            errorMessage={errors.argumentAxisDto?.argumentType}
-          >
-            <Field type="text" name="argumentAxisDto.argumentType">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartArgumentAxisTypeListOptions}
-                  isClearable={true}
-                  value={chartArgumentAxisTypeListOptions.filter(
-                    (option) => option.value === values.argumentAxisDto.argumentType,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Position"
-            invalid={!!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position)}
-            errorMessage={errors.argumentAxisDto?.position}
-          >
-            <Field type="text" name="argumentAxisDto.position">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartArgumentAxisPositionListOptions}
-                  isClearable={true}
-                  value={chartArgumentAxisPositionListOptions.filter(
-                    (option) => option.value === values.argumentAxisDto.position,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)}
-            errorMessage={errors.argumentAxisDto?.width}
-          >
-            <Field type="number" name="argumentAxisDto.width" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Aggregation Interval"
-            invalid={
-              !!(
-                errors.argumentAxisDto?.aggregationInterval &&
-                touched.argumentAxisDto?.aggregationInterval
-              )
-            }
-            errorMessage={errors.argumentAxisDto?.aggregationInterval}
-          >
-            <Field type="text" name="argumentAxisDto.aggregationInterval">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartArgumentAxisIntervalListOptions}
-                  isClearable={true}
-                  value={chartArgumentAxisIntervalListOptions.filter(
-                    (option) => option.value === values.argumentAxisDto.aggregationInterval,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-        </Card>
-
-        <Card className="my-2" header="Argument Axis - Grid">
-          <FormItem
-            label="Visible"
-            invalid={
-              !!(errors.argumentAxisDto?.grid?.visible && touched.argumentAxisDto?.grid?.visible)
-            }
-            errorMessage={errors.argumentAxisDto?.grid?.visible}
-          >
-            <Field name="argumentAxisDto.grid.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Color"
-            invalid={
-              !!(errors.argumentAxisDto?.grid?.color && touched.argumentAxisDto?.grid?.color)
-            }
-            errorMessage={errors.argumentAxisDto?.grid?.color}
-          >
-            <Field type="text" name="argumentAxisDto.grid.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={
-              !!(errors.argumentAxisDto?.grid?.width && touched.argumentAxisDto?.grid?.width)
-            }
-            errorMessage={errors.argumentAxisDto?.grid?.width}
-          >
-            <Field type="number" name="argumentAxisDto.grid.width" component={Input} />
-          </FormItem>
-        </Card>
-
-        <Card className="my-2" header="Argument Axis - Label">
-          <FormItem
-            label="Position"
-            invalid={
-              !!(
-                errors.argumentAxisDto?.label?.displayMode &&
-                touched.argumentAxisDto?.label?.displayMode
-              )
-            }
-            errorMessage={errors.argumentAxisDto?.label?.displayMode}
-          >
-            <Field type="text" name="argumentAxisDto.label.displayMode">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartArgumentAxisLabelDisplayModeListOptions}
-                  isClearable={true}
-                  value={chartArgumentAxisLabelDisplayModeListOptions.filter(
-                    (option) => option.value === values.argumentAxisDto.label.displayMode,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Rotation Angle"
-            invalid={
-              !!(
-                errors.argumentAxisDto?.label?.rotationAngle &&
-                touched.argumentAxisDto?.label?.rotationAngle
-              )
-            }
-            errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
-          >
-            <Field type="number" name="argumentAxisDto.label.rotationAngle" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Overlapping Behavior"
-            invalid={
-              !!(
-                errors.argumentAxisDto?.label?.overlappingBehavior &&
-                touched.argumentAxisDto?.label?.overlappingBehavior
-              )
-            }
-            errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
-          >
-            <Field type="text" name="argumentAxisDto.label.overlappingBehavior">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
-                  isClearable={true}
-                  value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
-                    (option) => option.value === values.argumentAxisDto.label.overlappingBehavior,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-        </Card>
-      </TabContent>
-      <TabContent value="axis_common">
-        <Card className="my-2">
-          <FormItem
-            label="Visible"
-            invalid={
-              !!(errors.commonAxisSettingsDto?.visible && touched.commonAxisSettingsDto?.visible)
-            }
-            errorMessage={errors.commonAxisSettingsDto?.visible}
-          >
-            <Field name="commonAxisSettingsDto.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Title"
-            invalid={
-              !!(errors.commonAxisSettingsDto?.title && touched.commonAxisSettingsDto?.title)
-            }
-            errorMessage={errors.commonAxisSettingsDto?.title}
-          >
-            <Field type="text" name="title" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={
-              !!(errors.commonAxisSettingsDto?.width && touched.commonAxisSettingsDto?.width)
-            }
-            errorMessage={errors.commonAxisSettingsDto?.width}
-          >
-            <Field type="number" name="commonAxisSettingsDto.width" component={Input} />
-          </FormItem>
-        </Card>
-
-        <Card className="my-2" header="Common Axis Settings - Grid">
-          <FormItem
-            label="Visible"
-            invalid={
-              !!(
-                errors.commonAxisSettingsDto?.grid?.visible &&
-                touched.commonAxisSettingsDto?.grid?.visible
-              )
-            }
-            errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
-          >
-            <Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Color"
-            invalid={
-              !!(
-                errors.commonAxisSettingsDto?.grid?.color &&
-                touched.commonAxisSettingsDto?.grid?.color
-              )
-            }
-            errorMessage={errors.commonAxisSettingsDto?.grid?.color}
-          >
-            <Field type="text" name="commonAxisSettingsDto.grid.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={
-              !!(
-                errors.commonAxisSettingsDto?.grid?.width &&
-                touched.commonAxisSettingsDto?.grid?.width
-              )
-            }
-            errorMessage={errors.commonAxisSettingsDto?.grid?.width}
-          >
-            <Field type="number" name="commonAxisSettingsDto.grid.width" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-    </Tabs>
-  )
-}
-
-export default ChartTabAxis

ui/src/views/admin/chart/edit/ChartTabCommonSettings.tsx

@@ -1,586 +0,0 @@
-import { Card, Checkbox, FormItem, Input, Select, Tabs } from '@/components/ui'
-import TabContent from '@/components/ui/Tabs/TabContent'
-import TabList from '@/components/ui/Tabs/TabList'
-import TabNav from '@/components/ui/Tabs/TabNav'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { IdentityRoleDto } from '@/proxy/admin/models'
-import {
-  chartArgumentAxisPositionListOptions,
-  chartPaletteExtensionModeOptions,
-  chartPaletteOptions,
-  chartSeriesDashStyleOptions,
-  chartTitleHorizantalAlignmentListOptions,
-  chartTitleTextOverFlowListOptions,
-  chartTitleVerticalAlignmentListOptions,
-  chartTitleWordWrapListOptions,
-  chartTooltipLocationListOptions,
-} from './../options'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
-
-interface ChartTabCommonSettingsProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-}
-
-const ChartTabCommonSettings = ({ values, errors, touched }: ChartTabCommonSettingsProps) => {
-  return (
-    <Tabs defaultValue="commonSettings_general">
-      <TabList className="flex-wrap">
-        <TabNav value="commonSettings_general">General</TabNav>
-        <TabNav value="commonSettings_adaptiveLayouts">Adaptive Layout Settings</TabNav>
-        <TabNav value="commonSettings_title">Title Settings</TabNav>
-        <TabNav value="commonSettings_tooltip">Tooltip Settings</TabNav>
-        <TabNav value="commonSettings_margin">Margin Settings</TabNav>
-        <TabNav value="commonSettings_size">Size Settings</TabNav>
-        <TabNav value="commonSettings_scrollbar">ScrollBar Settings</TabNav>
-      </TabList>
-      <TabContent value="commonSettings_general">
-        <Card className="my-2">
-          <FormItem
-            label="Disabled"
-            invalid={!!(errors.commonDto?.disabled && touched.commonDto?.disabled)}
-            errorMessage={errors.commonDto?.disabled}
-          >
-            <Field name="commonDto.disabled" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Adjust On Zoom"
-            invalid={!!(errors.commonDto?.adjustOnZoom && touched.commonDto?.adjustOnZoom)}
-            errorMessage={errors.commonDto?.adjustOnZoom as string}
-          >
-            <Field name="commonDto.adjustOnZoom" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Container BackgroundColor"
-            invalid={
-              !!(
-                errors.commonDto?.containerBackgroundColor &&
-                touched.commonDto?.containerBackgroundColor
-              )
-            }
-            errorMessage={errors.commonDto?.containerBackgroundColor}
-          >
-            <Field name="commonDto.containerBackgroundColor" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Default Pane"
-            invalid={!!(errors.commonDto?.defaultPane && touched.commonDto?.defaultPane)}
-            errorMessage={errors.commonDto?.defaultPane}
-          >
-            <Field type="text" name="commonDto.defaultPane" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Theme"
-            invalid={!!(errors.commonDto?.theme && touched.commonDto?.theme)}
-            errorMessage={errors.commonDto?.theme}
-          >
-            <Field type="text" name="commonDto.theme">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={themeOptions}
-                  isClearable={true}
-                  value={themeOptions.filter((option) => option.value === values.commonDto.theme)}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Palette"
-            invalid={!!(errors.commonDto?.palette && touched.commonDto?.palette)}
-            errorMessage={errors.commonDto?.palette}
-          >
-            <Field type="text" name="commonDto.palette">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartPaletteOptions}
-                  isClearable={true}
-                  value={chartPaletteOptions.filter(
-                    (option) => option.value === values.commonDto.palette,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Palette Extension Mode"
-            invalid={
-              !!(errors.commonDto?.paletteExtensionMode && touched.commonDto?.paletteExtensionMode)
-            }
-            errorMessage={errors.commonDto?.paletteExtensionMode}
-          >
-            <Field type="text" name="commonDto.paletteExtensionMode">
-              {({ field, form }: FieldProps<any>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartPaletteExtensionModeOptions}
-                  isClearable={true}
-                  value={chartPaletteExtensionModeOptions.filter(
-                    (option) => option.value === values.commonDto.paletteExtensionMode,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-        </Card>
-      </TabContent>
-      <TabContent value="commonSettings_adaptiveLayouts">
-        <Card className="my-2">
-          <FormItem
-            label="Keep Labels"
-            invalid={
-              !!(errors.adaptivelayoutDto?.keepLabels && touched.adaptivelayoutDto?.keepLabels)
-            }
-            errorMessage={errors.adaptivelayoutDto?.keepLabels as string}
-          >
-            <Field name="adaptivelayoutDto.keepLabels" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={!!(errors.adaptivelayoutDto?.width && touched.adaptivelayoutDto?.width)}
-            errorMessage={errors.adaptivelayoutDto?.width}
-          >
-            <Field type="number" name="adaptivelayoutDto.width" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Height"
-            invalid={!!(errors.adaptivelayoutDto?.height && touched.adaptivelayoutDto?.height)}
-            errorMessage={errors.adaptivelayoutDto?.height}
-          >
-            <Field type="number" name="adaptivelayoutDto.height" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-      <TabContent value="commonSettings_title">
-        <Card className="my-2">
-          <FormItem
-            label="Text"
-            invalid={!!(errors.titleDto?.text && touched.titleDto?.text)}
-            errorMessage={errors.titleDto?.text}
-          >
-            <Field name="titleDto.text" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Subtitle"
-            invalid={!!(errors.titleDto?.subtitle && touched.titleDto?.subtitle)}
-            errorMessage={errors.titleDto?.subtitle}
-          >
-            <Field name="titleDto.subtitle" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Vertical Alignment"
-            invalid={!!(errors.titleDto?.verticalAlignment && touched.titleDto?.verticalAlignment)}
-            errorMessage={errors.titleDto?.verticalAlignment}
-          >
-            <Field type="text" name="titleDto.verticalAlignment">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartTitleVerticalAlignmentListOptions}
-                  isClearable={true}
-                  value={chartTitleVerticalAlignmentListOptions.filter(
-                    (option) => option.value === values.titleDto.verticalAlignment,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Horizontal Alignment"
-            invalid={
-              !!(errors.titleDto?.horizontalAlignment && touched.titleDto?.horizontalAlignment)
-            }
-            errorMessage={errors.titleDto?.horizontalAlignment}
-          >
-            <Field type="text" name="titleDto.horizontalAlignment">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartTitleHorizantalAlignmentListOptions}
-                  isClearable={true}
-                  value={chartTitleHorizantalAlignmentListOptions.filter(
-                    (option) => option.value === values.titleDto.horizontalAlignment,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Text Overflow"
-            invalid={!!(errors.titleDto?.textOverflow && touched.titleDto?.textOverflow)}
-            errorMessage={errors.titleDto?.textOverflow}
-          >
-            <Field type="text" name="titleDto.textOverflow">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartTitleTextOverFlowListOptions}
-                  isClearable={true}
-                  value={chartTitleTextOverFlowListOptions.filter(
-                    (option) => option.value === values.titleDto.textOverflow,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Word Wrap"
-            invalid={!!(errors.titleDto?.wordWrap && touched.titleDto?.wordWrap)}
-            errorMessage={errors.titleDto?.wordWrap}
-          >
-            <Field type="text" name="titleDto.wordWrap">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartTitleWordWrapListOptions}
-                  isClearable={true}
-                  value={chartTitleWordWrapListOptions.filter(
-                    (option) => option.value === values.titleDto.wordWrap,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-        </Card>
-      </TabContent>
-      <TabContent value="commonSettings_tooltip">
-        <Card className="my-2">
-          <FormItem
-            label="Enabled"
-            invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
-            errorMessage={errors.tooltipDto?.enabled as string}
-          >
-            <Field name="tooltipDto.keepLabels" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Shared"
-            invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
-            errorMessage={errors.tooltipDto?.shared as string}
-          >
-            <Field name="tooltipDto.shared" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Format"
-            invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
-            errorMessage={errors.tooltipDto?.format}
-          >
-            <Field type="text" name="tooltipDto.format">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={tooltipFormatListOptions}
-                  isClearable={true}
-                  value={tooltipFormatListOptions.filter(
-                    (option) => option.value === values.tooltipDto.format,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Location"
-            invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
-            errorMessage={errors.tooltipDto?.location}
-          >
-            <Field type="text" name="tooltipDto.location">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartTooltipLocationListOptions}
-                  isClearable={true}
-                  value={chartTooltipLocationListOptions.filter(
-                    (option) => option.value === values.tooltipDto.location,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Color"
-            invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
-            errorMessage={errors.tooltipDto?.color}
-          >
-            <Field name="tooltipDto.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Argument Format"
-            invalid={!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)}
-            errorMessage={errors.tooltipDto?.argumentFormat}
-          >
-            <Field name="tooltipDto.argumentFormat" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Arrow Length"
-            invalid={!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)}
-            errorMessage={errors.tooltipDto?.arrowLength}
-          >
-            <Field type="number" name="tooltipDto.arrowLength" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Padding Top/Bottom"
-            invalid={
-              !!(errors.tooltipDto?.paddingTopBottom && touched.tooltipDto?.paddingTopBottom)
-            }
-            errorMessage={errors.tooltipDto?.paddingTopBottom}
-          >
-            <Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Padding Left/Right"
-            invalid={
-              !!(errors.tooltipDto?.paddingLeftRight && touched.tooltipDto?.paddingLeftRight)
-            }
-            errorMessage={errors.tooltipDto?.paddingLeftRight}
-          >
-            <Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
-          </FormItem>
-        </Card>
-        <div className="font-bold m-3">Tooltip Settings - Font</div>
-        <FormItem
-          label="Color"
-          invalid={!!(errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color)}
-          errorMessage={errors.tooltipDto?.font?.color}
-        >
-          <Field name="tooltipDto.font.color" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Family"
-          invalid={!!(errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family)}
-          errorMessage={errors.tooltipDto?.font?.family}
-        >
-          <Field name="tooltipDto.font.family" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Size"
-          invalid={!!(errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size)}
-          errorMessage={errors.tooltipDto?.font?.size}
-        >
-          <Field type="number" name="tooltipDto.font.size" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Weight"
-          invalid={!!(errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight)}
-          errorMessage={errors.tooltipDto?.font?.weight}
-        >
-          <Field type="number" name="tooltipDto.font.weight" component={Input} />
-        </FormItem>
-
-        <div className="font-bold m-3">Tooltip Settings - Border</div>
-        <FormItem
-          label="Visible"
-          invalid={!!(errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible)}
-          errorMessage={errors.tooltipDto?.border?.visible as string}
-        >
-          <Field name="tooltipDto.border.visible" component={Checkbox} />
-        </FormItem>
-
-        <FormItem
-          label="Dash Style"
-          invalid={
-            !!(errors.tooltipDto?.border?.dashStyle && touched.tooltipDto?.border?.dashStyle)
-          }
-          errorMessage={errors.tooltipDto?.border?.dashStyle}
-        >
-          <Field type="text" name="tooltipDto.border.dashStyle">
-            {({ field, form }: FieldProps<SelectBoxOption>) => (
-              <Select
-                field={field}
-                form={form}
-                options={chartSeriesDashStyleOptions}
-                isClearable={true}
-                value={chartSeriesDashStyleOptions.filter(
-                  (option) => option.value === values.tooltipDto.border.dashStyle,
-                )}
-                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-              />
-            )}
-          </Field>
-        </FormItem>
-
-        <FormItem
-          label="Width"
-          invalid={!!(errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width)}
-          errorMessage={errors.tooltipDto?.border?.width}
-        >
-          <Field type="number" name="tooltipDto.border.width" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Corner Radius"
-          invalid={
-            !!(errors.tooltipDto?.border?.cornerRadius && touched.tooltipDto?.border?.cornerRadius)
-          }
-          errorMessage={errors.tooltipDto?.border?.cornerRadius}
-        >
-          <Field type="number" name="tooltipDto.border.cornerRadius" component={Input} />
-        </FormItem>
-      </TabContent>
-      <TabContent value="commonSettings_margin">
-        <Card className="my-2">
-          <FormItem
-            label="Bottom"
-            invalid={!!(errors.marginDto?.bottom && touched.marginDto?.bottom)}
-            errorMessage={errors.marginDto?.bottom}
-          >
-            <Field type="number" name="marginDto.bottom" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Top"
-            invalid={!!(errors.marginDto?.top && touched.marginDto?.top)}
-            errorMessage={errors.marginDto?.top}
-          >
-            <Field type="number" name="marginDto.top" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Right"
-            invalid={!!(errors.marginDto?.right && touched.marginDto?.right)}
-            errorMessage={errors.marginDto?.right}
-          >
-            <Field type="number" name="marginDto.right" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Left"
-            invalid={!!(errors.marginDto?.left && touched.marginDto?.left)}
-            errorMessage={errors.marginDto?.left}
-          >
-            <Field type="number" name="marginDto.left" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-      <TabContent value="commonSettings_size">
-        <Card className="my-2">
-          <FormItem
-            label="Use Size"
-            invalid={!!(errors.sizeDto?.useSize && touched.sizeDto?.useSize)}
-            errorMessage={errors.sizeDto?.useSize as string}
-          >
-            <Field name="sizeDto.useSize" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={!!(errors.sizeDto?.width && touched.sizeDto?.width)}
-            errorMessage={errors.sizeDto?.width}
-          >
-            <Field type="number" name="sizeDto.width" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Height"
-            invalid={!!(errors.sizeDto?.height && touched.sizeDto?.height)}
-            errorMessage={errors.sizeDto?.height}
-          >
-            <Field type="number" name="sizeDto.height" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-      <TabContent value="commonSettings_scrollbar">
-        <Card className="my-2">
-          <FormItem
-            label="Visible"
-            invalid={!!(errors.scrollBarDto?.visible && touched.scrollBarDto?.visible)}
-            errorMessage={errors.scrollBarDto?.visible as string}
-          >
-            <Field name="scrollBarDto.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Color"
-            invalid={!!(errors.scrollBarDto?.color && touched.scrollBarDto?.color)}
-            errorMessage={errors.scrollBarDto?.color}
-          >
-            <Field name="scrollBarDto.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Position"
-            invalid={!!(errors.scrollBarDto?.position && touched.scrollBarDto?.position)}
-            errorMessage={errors.scrollBarDto?.position}
-          >
-            <Field type="text" name="commonDto.position">
-              {({ field, form }: FieldProps<IdentityRoleDto>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartArgumentAxisPositionListOptions}
-                  isClearable={true}
-                  value={chartArgumentAxisPositionListOptions.filter(
-                    (option) => option.value === values.scrollBarDto.position,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Offset"
-            invalid={!!(errors.scrollBarDto?.offset && touched.scrollBarDto?.offset)}
-            errorMessage={errors.scrollBarDto?.offset}
-          >
-            <Field type="number" name="scrollBarDto.offset" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={!!(errors.scrollBarDto?.width && touched.scrollBarDto?.width)}
-            errorMessage={errors.scrollBarDto?.width}
-          >
-            <Field type="number" name="scrollBarDto.width" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-    </Tabs>
-  )
-}
-
-export default ChartTabCommonSettings

ui/src/views/admin/chart/edit/ChartTabCrosshair.tsx

@@ -1,302 +0,0 @@
-import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { tooltipFormatListOptions } from '@/shared/options'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-import { chartSeriesDashStyleOptions } from './../options'
-
-interface ChartTabCrosshairProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-}
-
-const ChartTabCrosshair = ({ values, errors, touched }: ChartTabCrosshairProps) => {
-  return (
-    <>
-      <Card className="my-2">
-        <FormItem
-          label="Enabled"
-          invalid={!!(errors.crosshairDto?.enabled && touched.crosshairDto?.enabled)}
-          errorMessage={errors.crosshairDto?.enabled as string}
-        >
-          <Field name="crosshairDto.enabled" component={Checkbox} />
-        </FormItem>
-
-        <FormItem
-          label="Color"
-          invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
-          errorMessage={errors.crosshairDto?.color}
-        >
-          <Field type="text" name="crosshairDto.color" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Dash Style"
-          invalid={!!(errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle)}
-          errorMessage={errors.crosshairDto?.dashStyle}
-        >
-          <Field type="text" name="crosshairDto.dashStyle">
-            {({ field, form }: FieldProps<SelectBoxOption>) => (
-              <Select
-                field={field}
-                form={form}
-                options={chartSeriesDashStyleOptions}
-                isClearable={true}
-                value={chartSeriesDashStyleOptions.filter(
-                  (option) => option.value === values.crosshairDto.dashStyle,
-                )}
-                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-              />
-            )}
-          </Field>
-        </FormItem>
-
-        <FormItem
-          label="Width"
-          invalid={!!(errors.crosshairDto?.width && touched.crosshairDto?.width)}
-          errorMessage={errors.crosshairDto?.width}
-        >
-          <Field type="number" name="crosshairDto.width" component={Input} />
-        </FormItem>
-      </Card>
-
-      <Card className="my-2" header="Crosshair Options - Label">
-        <FormItem
-          label="Visible"
-          invalid={!!(errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible)}
-          errorMessage={errors.crosshairDto?.label?.visible as string}
-        >
-          <Field name="crosshairDto.label.visible" component={Checkbox} />
-        </FormItem>
-
-        <FormItem
-          label="Background Color"
-          invalid={
-            !!(
-              errors.crosshairDto?.label?.backgroundColor &&
-              touched.crosshairDto?.label?.backgroundColor
-            )
-          }
-          errorMessage={errors.crosshairDto?.label?.backgroundColor}
-        >
-          <Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Format"
-          invalid={!!(errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format)}
-          errorMessage={errors.crosshairDto?.label?.format}
-        >
-          <Field type="text" name="crosshairDto.label.format">
-            {({ field, form }: FieldProps<SelectBoxOption>) => (
-              <Select
-                field={field}
-                form={form}
-                options={tooltipFormatListOptions}
-                isClearable={true}
-                value={tooltipFormatListOptions.filter(
-                  (option) => option.value === values.crosshairDto.label.format,
-                )}
-                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-              />
-            )}
-          </Field>
-        </FormItem>
-
-        <FormItem
-          label="Customize Text"
-          invalid={
-            !!(
-              errors.crosshairDto?.label?.customizeText &&
-              touched.crosshairDto?.label?.customizeText
-            )
-          }
-          errorMessage={errors.crosshairDto?.label?.customizeText}
-        >
-          <Field type="text" name="crosshairDto.label.customizeText" component={Input} />
-        </FormItem>
-      </Card>
-
-      <Card className="my-2" header="Crosshair Options - Label - Font">
-        <FormItem
-          label="Color"
-          invalid={
-            !!(errors.crosshairDto?.label?.font?.color && touched.crosshairDto?.label?.font?.color)
-          }
-          errorMessage={errors.crosshairDto?.label?.font?.color}
-        >
-          <Field type="text" name="crosshairDto.label.font.color" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Family"
-          invalid={
-            !!(
-              errors.crosshairDto?.label?.font?.family && touched.crosshairDto?.label?.font?.family
-            )
-          }
-          errorMessage={errors.crosshairDto?.label?.font?.family}
-        >
-          <Field type="text" name="crosshairDto.label.font.family" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Size"
-          invalid={
-            !!(errors.crosshairDto?.label?.font?.size && touched.crosshairDto?.label?.font?.size)
-          }
-          errorMessage={errors.crosshairDto?.label?.font?.size}
-        >
-          <Field type="number" name="crosshairDto.label.font.size" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Weight"
-          invalid={
-            !!(
-              errors.crosshairDto?.label?.font?.weight && touched.crosshairDto?.label?.font?.weight
-            )
-          }
-          errorMessage={errors.crosshairDto?.label?.font?.weight}
-        >
-          <Field type="number" name="crosshairDto.label.font.weight" component={Input} />
-        </FormItem>
-      </Card>
-
-      <Card className="my-2" header="Crosshair Options - Label - Horizontal Line">
-        <FormItem
-          label="Visible"
-          invalid={
-            !!(
-              errors.crosshairDto?.horizontalLine?.visible &&
-              touched.crosshairDto?.horizontalLine?.visible
-            )
-          }
-          errorMessage={errors.crosshairDto?.horizontalLine?.visible as string}
-        >
-          <Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
-        </FormItem>
-
-        <FormItem
-          label="Color"
-          invalid={
-            !!(
-              errors.crosshairDto?.horizontalLine?.color &&
-              touched.crosshairDto?.horizontalLine?.color
-            )
-          }
-          errorMessage={errors.crosshairDto?.horizontalLine?.color}
-        >
-          <Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Dash Style"
-          invalid={
-            !!(
-              errors.crosshairDto?.horizontalLine?.dashStyle &&
-              touched.crosshairDto?.horizontalLine?.dashStyle
-            )
-          }
-          errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
-        >
-          <Field type="text" name="crosshairDto.horizontalLine.dashStyle">
-            {({ field, form }: FieldProps<SelectBoxOption>) => (
-              <Select
-                field={field}
-                form={form}
-                options={chartSeriesDashStyleOptions}
-                isClearable={true}
-                value={chartSeriesDashStyleOptions.filter(
-                  (option) => option.value === values.crosshairDto.horizontalLine.dashStyle,
-                )}
-                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-              />
-            )}
-          </Field>
-        </FormItem>
-
-        <FormItem
-          label="Width"
-          invalid={
-            !!(
-              errors.crosshairDto?.horizontalLine?.width &&
-              touched.crosshairDto?.horizontalLine?.width
-            )
-          }
-          errorMessage={errors.crosshairDto?.horizontalLine?.width}
-        >
-          <Field type="number" name="crosshairDto.horizontalLine.width" component={Input} />
-        </FormItem>
-      </Card>
-
-      <Card className="my-2" header="Crosshair Options - Label - Vertical Line">
-        <FormItem
-          label="Visible"
-          invalid={
-            !!(
-              errors.crosshairDto?.verticalLine?.visible &&
-              touched.crosshairDto?.verticalLine?.visible
-            )
-          }
-          errorMessage={errors.crosshairDto?.verticalLine?.visible as string}
-        >
-          <Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
-        </FormItem>
-
-        <FormItem
-          label="Color"
-          invalid={
-            !!(
-              errors.crosshairDto?.verticalLine?.color && touched.crosshairDto?.verticalLine?.color
-            )
-          }
-          errorMessage={errors.crosshairDto?.verticalLine?.color}
-        >
-          <Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Dash Style"
-          invalid={
-            !!(
-              errors.crosshairDto?.verticalLine?.dashStyle &&
-              touched.crosshairDto?.verticalLine?.dashStyle
-            )
-          }
-          errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
-        >
-          <Field type="text" name="crosshairDto.verticalLine.dashStyle">
-            {({ field, form }: FieldProps<SelectBoxOption>) => (
-              <Select
-                field={field}
-                form={form}
-                options={chartSeriesDashStyleOptions}
-                isClearable={true}
-                value={chartSeriesDashStyleOptions.filter(
-                  (option) => option.value === values.crosshairDto.verticalLine.dashStyle,
-                )}
-                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-              />
-            )}
-          </Field>
-        </FormItem>
-
-        <FormItem
-          label="Width"
-          invalid={
-            !!(
-              errors.crosshairDto?.verticalLine?.width && touched.crosshairDto?.verticalLine?.width
-            )
-          }
-          errorMessage={errors.crosshairDto?.verticalLine?.width}
-        >
-          <Field type="number" name="crosshairDto.verticalLine.width" component={Input} />
-        </FormItem>
-      </Card>
-    </>
-  )
-}
-
-export default ChartTabCrosshair

ui/src/views/admin/chart/edit/ChartTabDatabase.tsx

@@ -1,83 +0,0 @@
-import { Checkbox, FormItem, Input, Select } from '@/components/ui'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { DataSourceTypeEnum } from '@/proxy/form/models'
-import { SelectBoxOption } from '@/shared/types'
-import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-
-interface ChartTabDatabaseProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-  dataSourceList: SelectBoxOption[]
-}
-
-const ChartTabDatabase = ({ values, errors, touched, dataSourceList }: ChartTabDatabaseProps) => {
-  const { translate } = useLocalization()
-
-  return (
-    <>
-      <FormItem
-        label={translate('::ListForms.ListFormEdit.IsTenant')}
-        invalid={!!(errors.isTenant && touched.isTenant)}
-        errorMessage={errors.isTenant as string}
-      >
-        <Field
-          name="isTenant"
-          placeholder={translate('::ListForms.ListFormEdit.IsTenant')}
-          component={Checkbox}
-        />
-      </FormItem>
-      <FormItem
-        label={translate('::ListForms.ListFormEdit.IsBranch')}
-        invalid={!!(errors.isBranch && touched.isBranch)}
-        errorMessage={errors.isBranch as string}
-      >
-        <Field
-          name="isBranch"
-          placeholder={translate('::ListForms.ListFormEdit.IsBranch')}
-          component={Checkbox}
-        />
-      </FormItem>
-      <FormItem
-        label={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
-        invalid={!!(errors.isOrganizationUnit && touched.isOrganizationUnit)}
-        errorMessage={errors.isOrganizationUnit as string}
-      >
-        <Field
-          name="isOrganizationUnit"
-          placeholder={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
-          component={Checkbox}
-        />
-      </FormItem>
-
-      <FormItem
-        label="Data Source Code"
-        invalid={!!(errors.dataSourceCode && touched.dataSourceCode)}
-        errorMessage={errors.dataSourceCode}
-      >
-        <Field name="dataSourceCode">
-          {({ field, form }: FieldProps<DataSourceTypeEnum>) => (
-            <Select
-              field={field}
-              form={form}
-              options={dataSourceList}
-              value={dataSourceList?.filter((option) => option.value === values.dataSourceCode)}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-
-      <FormItem
-        label="DataSource Query"
-        invalid={!!(errors.dataSourceDto?.query && touched.dataSourceDto?.query)}
-        errorMessage={errors.dataSourceDto?.query}
-      >
-        <Field type="text" name="dataSourceDto.query" component={Input} textArea={true} />
-      </FormItem>
-    </>
-  )
-}
-
-export default ChartTabDatabase

ui/src/views/admin/chart/edit/ChartTabDetails.tsx

@@ -1,87 +0,0 @@
-import { FormItem, Input, Select } from '@/components/ui'
-import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { LanguageInfo } from '@/proxy/config/models'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-
-interface ChartTabDetailsProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-  langOptions: SelectBoxOption[]
-  roleList: SelectBoxOption[]
-  userList: SelectBoxOption[]
-}
-
-const ChartTabDetails = ({
-  values,
-  errors,
-  touched,
-  langOptions,
-  roleList,
-  userList,
-}: ChartTabDetailsProps) => {
-  return (
-    <>
-      <FormItem
-        label="Chart Code"
-        invalid={errors.chartCode && touched.chartCode}
-        errorMessage={errors.chartCode}
-      >
-        <Field type="text" name="chartCode" component={Input} />
-      </FormItem>
-
-      <FormItem
-        label="Culture Name"
-        invalid={errors.cultureName && touched.cultureName}
-        errorMessage={errors.cultureName}
-      >
-        <Field type="text" name="cultureName">
-          {({ field, form }: FieldProps<LanguageInfo>) => (
-            <Select
-              field={field}
-              form={form}
-              options={langOptions}
-              isClearable={true}
-              value={langOptions.filter((option) => option.value === values.cultureName)}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-
-      <FormItem label="Role" invalid={errors.roleId && touched.roleId} errorMessage={errors.roleId}>
-        <Field type="text" name="roleId">
-          {({ field, form }: FieldProps<IdentityRoleDto>) => (
-            <Select
-              field={field}
-              form={form}
-              options={roleList}
-              isClearable={true}
-              value={roleList.filter((option) => option.value === values.roleId)}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-
-      <FormItem label="User" invalid={errors.userId && touched.userId} errorMessage={errors.userId}>
-        <Field type="text" name="userId">
-          {({ field, form }: FieldProps<IdentityUserDto>) => (
-            <Select
-              field={field}
-              form={form}
-              options={userList}
-              isClearable={true}
-              value={userList.filter((option) => option.value === values.userId)}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-    </>
-  )
-}
-
-export default ChartTabDetails

ui/src/views/admin/chart/edit/ChartTabExport.tsx

@@ -1,48 +0,0 @@
-import { Card, Checkbox, FormItem, Input } from '@/components/ui'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { Field, FormikErrors, FormikTouched } from 'formik'
-
-interface ChartTabExportProps {
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-}
-
-const ChartTabExport = ({ errors, touched }: ChartTabExportProps) => {
-  return (
-    <Card className="my-2">
-      <FormItem
-        label="Enabled"
-        invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)}
-        errorMessage={errors.exportDto?.enabled as string}
-      >
-        <Field name="exportDto.enabled" component={Checkbox} />
-      </FormItem>
-
-      <FormItem
-        label="Printing Enabled"
-        invalid={!!(errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled)}
-        errorMessage={errors.exportDto?.printingEnabled as string}
-      >
-        <Field name="exportDto.printingEnabled" component={Checkbox} />
-      </FormItem>
-
-      <FormItem
-        label="Background Color"
-        invalid={!!(errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor)}
-        errorMessage={errors.exportDto?.backgroundColor}
-      >
-        <Field type="text" name="exportDto.backgroundColor" component={Input} />
-      </FormItem>
-
-      <FormItem
-        label="Margin"
-        invalid={!!(errors.exportDto?.margin && touched.exportDto?.margin)}
-        errorMessage={errors.exportDto?.margin}
-      >
-        <Field type="number" name="exportDto.margin" component={Input} />
-      </FormItem>
-    </Card>
-  )
-}
-
-export default ChartTabExport

ui/src/views/admin/chart/edit/ChartTabLegend.tsx

@@ -1,176 +0,0 @@
-import { Card, Checkbox, FormItem, Input, Select, Tabs } from '@/components/ui'
-import TabContent from '@/components/ui/Tabs/TabContent'
-import TabList from '@/components/ui/Tabs/TabList'
-import TabNav from '@/components/ui/Tabs/TabNav'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-import {
-  chartLegendOrientationListOptions,
-  chartLegendPositionListOptions,
-  chartSeriesDashStyleOptions,
-} from './../options'
-
-interface ChartTabLegendProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-}
-
-const ChartTabLegend = ({ values, errors, touched }: ChartTabLegendProps) => {
-  return (
-    <Tabs defaultValue="legendSettings_general">
-      <TabList>
-        <TabNav value="legendSettings_general">General</TabNav>
-        <TabNav value="legendSettings_border">Border</TabNav>
-      </TabList>
-      <TabContent value="legendSettings_general">
-        <Card className="my-2">
-          <FormItem
-            label="Visible"
-            invalid={!!(errors.legendDto?.visible && touched.legendDto?.visible)}
-            errorMessage={errors.legendDto?.visible}
-          >
-            <Field name="legendDto.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Background Color"
-            invalid={!!(errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor)}
-            errorMessage={errors.legendDto?.backgroundColor}
-          >
-            <Field name="legendDto.backgroundColor" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Title"
-            invalid={!!(errors.legendDto?.title && touched.legendDto?.title)}
-            errorMessage={errors.legendDto?.title}
-          >
-            <Field name="legendDto.title" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Orientation"
-            invalid={!!(errors.legendDto?.orientation && touched.legendDto?.orientation)}
-            errorMessage={errors.legendDto?.orientation}
-          >
-            <Field type="text" name="legendDto.orientation">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartLegendOrientationListOptions}
-                  isClearable={true}
-                  value={chartLegendOrientationListOptions.filter(
-                    (option) => option.value === values.legendDto.orientation,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Position"
-            invalid={!!(errors.legendDto?.position && touched.legendDto?.position)}
-            errorMessage={errors.legendDto?.position}
-          >
-            <Field type="text" name="legendDto.position">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartLegendPositionListOptions}
-                  isClearable={true}
-                  value={chartLegendPositionListOptions.filter(
-                    (option) => option.value === values.legendDto.position,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Row Count"
-            invalid={!!(errors.legendDto?.rowCount && touched.legendDto?.rowCount)}
-            errorMessage={errors.legendDto?.rowCount}
-          >
-            <Field type="number" name="legendDto.rowCount" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Column Count"
-            invalid={!!(errors.legendDto?.columnCount && touched.legendDto?.columnCount)}
-            errorMessage={errors.legendDto?.columnCount}
-          >
-            <Field type="number" name="legendDto.columnCount" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-      <TabContent value="legendSettings_border">
-        <Card className="my-2">
-          <FormItem
-            label="Visible"
-            invalid={!!(errors.legendDto?.border?.visible && touched.legendDto?.border?.visible)}
-            errorMessage={errors.legendDto?.border?.visible}
-          >
-            <Field name="legendDto.border.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Color"
-            invalid={!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)}
-            errorMessage={errors.legendDto?.border?.color}
-          >
-            <Field name="legendDto.border.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Dash Style"
-            invalid={
-              !!(errors.legendDto?.border?.dashStyle && touched.legendDto?.border?.dashStyle)
-            }
-            errorMessage={errors.legendDto?.border?.dashStyle}
-          >
-            <Field type="text" name="legendDto.border.dashStyle">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartSeriesDashStyleOptions}
-                  isClearable={true}
-                  value={chartSeriesDashStyleOptions.filter(
-                    (option) => option.value === values.legendDto.border.dashStyle,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={!!(errors.legendDto?.border?.width && touched.legendDto?.border?.width)}
-            errorMessage={errors.legendDto?.border?.width}
-          >
-            <Field type="number" name="legendDto.border.width" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Corner Radius"
-            invalid={
-              !!(errors.legendDto?.border?.cornerRadius && touched.legendDto?.border?.cornerRadius)
-            }
-            errorMessage={errors.legendDto?.border?.cornerRadius}
-          >
-            <Field type="number" name="legendDto.border.cornerRadius" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-    </Tabs>
-  )
-}
-
-export default ChartTabLegend

ui/src/views/admin/chart/edit/ChartTabPanes.tsx

@@ -1,127 +0,0 @@
-import { Button, Card, FormItem, Input, Table } from '@/components/ui'
-import TBody from '@/components/ui/Table/TBody'
-import THead from '@/components/ui/Table/THead'
-import Td from '@/components/ui/Table/Td'
-import Th from '@/components/ui/Table/Th'
-import Tr from '@/components/ui/Table/Tr'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { Field, FormikErrors, FormikTouched } from 'formik'
-import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
-import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
-
-interface ChartTabPanesProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-  chartValues: ChartEditDto
-  setDatabaseOperationsModalData: (data: DatabaseOperation) => void
-  setConfirmDelete: (data: ConfirmDelete) => void
-}
-
-const ChartTabPanes = ({
-  values,
-  errors,
-  touched,
-  chartValues,
-  setDatabaseOperationsModalData,
-  setConfirmDelete,
-}: ChartTabPanesProps) => {
-  return (
-    <>
-      <Card className="my-2">
-        <FormItem
-          label="Background Color"
-          invalid={
-            !!(
-              errors.commonPaneSettingsDto?.backgroundColor &&
-              touched.commonPaneSettingsDto?.backgroundColor
-            )
-          }
-          errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
-        >
-          <Field type="text" name="commonPaneSettingsDto.backgroundColor" component={Input} />
-        </FormItem>
-      </Card>
-      <Card className="my-2" bodyClass="p-0">
-        <Table compact>
-          <THead>
-            <Tr>
-              <Th>
-                <Button
-                  shape="circle"
-                  variant="plain"
-                  type="button"
-                  size="xs"
-                  title="Add"
-                  icon={<FaFileMedical />}
-                  onClick={async (e) => {
-                    e.preventDefault()
-                    setDatabaseOperationsModalData({
-                      id: values.id ?? '',
-                      index: -1,
-                      isOpen: 'pane',
-                      operation: 'insert',
-                    })
-                  }}
-                />
-              </Th>
-              <Th>Name</Th>
-              <Th>Background Color</Th>
-              <Th>Height</Th>
-            </Tr>
-          </THead>
-          <TBody>
-            {chartValues.panesDto.map((row, index) => (
-              <Tr key={index}>
-                <Td>
-                  <div className="flex-wrap inline-flex xl:flex items-center gap-2">
-                    <Button
-                      shape="circle"
-                      variant="plain"
-                      type="button"
-                      size="xs"
-                      title="Edit"
-                      icon={<FaEdit />}
-                      onClick={async (e) => {
-                        e.preventDefault()
-                        setDatabaseOperationsModalData({
-                          id: values.id ?? '',
-                          index,
-                          isOpen: 'pane',
-                          operation: 'update',
-                          panesValues: chartValues.panesDto[index],
-                        })
-                      }}
-                    />
-                    <Button
-                      shape="circle"
-                      variant="plain"
-                      type="button"
-                      size="xs"
-                      title="Delete"
-                      icon={<FaTrash />}
-                      onClick={async (e) => {
-                        e.preventDefault()
-                        setConfirmDelete({
-                          isOpen: true,
-                          id: values.id ?? '',
-                          fieldName: 'pane',
-                          index,
-                        })
-                      }}
-                    />
-                  </div>
-                </Td>
-                <Td>{row.name}</Td>
-                <Td>{row.backgroundColor}</Td>
-                <Td>{row.height}</Td>
-              </Tr>
-            ))}
-          </TBody>
-        </Table>
-      </Card>
-    </>
-  )
-}
-
-export default ChartTabPanes

ui/src/views/admin/chart/edit/ChartTabPermissions.tsx

@@ -1,98 +0,0 @@
-import { FormItem, Select } from '@/components/ui'
-import { MenuDto } from '@/proxy/menus/models'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-
-interface ChartTabPermissionsProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-  permissionOptions: SelectBoxOption[]
-}
-
-const ChartTabPermissions = ({
-  values,
-  errors,
-  touched,
-  permissionOptions,
-}: ChartTabPermissionsProps) => {
-  return (
-    <>
-      <FormItem
-        label="Create"
-        invalid={!!(errors.permissionDto?.c && touched.permissionDto?.c)}
-        errorMessage={errors.permissionDto?.c}
-      >
-        <Field name="permissionDto.c">
-          {({ field, form }: FieldProps<MenuDto>) => (
-            <Select
-              field={field}
-              form={form}
-              options={permissionOptions}
-              isClearable={true}
-              value={permissionOptions.filter((option) => option.value === values.permissionDto.c)}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-      <FormItem
-        label="Read"
-        invalid={!!(errors.permissionDto?.r && touched.permissionDto?.r)}
-        errorMessage={errors.permissionDto?.r}
-      >
-        <Field name="permissionDto.r">
-          {({ field, form }: FieldProps<MenuDto>) => (
-            <Select
-              field={field}
-              form={form}
-              options={permissionOptions}
-              isClearable={true}
-              value={permissionOptions.filter((option) => option.value === values.permissionDto.r)}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-      <FormItem
-        label="Update"
-        invalid={!!(errors.permissionDto?.u && touched.permissionDto?.u)}
-        errorMessage={errors.permissionDto?.u}
-      >
-        <Field name="permissionDto.u">
-          {({ field, form }: FieldProps<MenuDto>) => (
-            <Select
-              field={field}
-              form={form}
-              options={permissionOptions}
-              isClearable={true}
-              value={permissionOptions.filter((option) => option.value === values.permissionDto.u)}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-      <FormItem
-        label="Delete"
-        invalid={!!(errors.permissionDto?.d && touched.permissionDto?.d)}
-        errorMessage={errors.permissionDto?.d}
-      >
-        <Field name="permissionDto.d">
-          {({ field, form }: FieldProps<MenuDto>) => (
-            <Select
-              field={field}
-              form={form}
-              options={permissionOptions}
-              isClearable={true}
-              value={permissionOptions.filter((option) => option.value === values.permissionDto.d)}
-              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-            />
-          )}
-        </Field>
-      </FormItem>
-    </>
-  )
-}
-
-export default ChartTabPermissions

ui/src/views/admin/chart/edit/ChartTabSeries.tsx

@@ -1,366 +0,0 @@
-import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
-import TBody from '@/components/ui/Table/TBody'
-import THead from '@/components/ui/Table/THead'
-import Td from '@/components/ui/Table/Td'
-import Th from '@/components/ui/Table/Th'
-import Tr from '@/components/ui/Table/Tr'
-import TabContent from '@/components/ui/Tabs/TabContent'
-import TabList from '@/components/ui/Tabs/TabList'
-import TabNav from '@/components/ui/Tabs/TabNav'
-import {
-  ChartAnnotationDto,
-  ChartEditDto,
-  ChartPanesDto,
-  ChartSeriesDto,
-  ChartValueAxisDto,
-} from '@/proxy/charts/models'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
-import {
-  chartSeriesDashStyleOptions,
-  chartSeriesSelectionModeOptions,
-  chartSeriesTypeOptions,
-} from './../options'
-import { ChartDialogType, ChartOperation } from './../types'
-import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
-
-interface ChartTabSeriesProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-  chartValues: ChartEditDto
-  setDatabaseOperationsModalData: (data: DatabaseOperation) => void
-  setConfirmDelete: (data: ConfirmDelete) => void
-  valueAxisList: () => SelectBoxOption[] | undefined
-  valuePaneList: () => SelectBoxOption[] | undefined
-}
-
-const ChartTabSeries = ({
-  values,
-  errors,
-  touched,
-  chartValues,
-  setDatabaseOperationsModalData,
-  setConfirmDelete,
-  valueAxisList,
-  valuePaneList,
-}: ChartTabSeriesProps) => {
-  return (
-    <Tabs defaultValue="series_general">
-      <TabList>
-        <TabNav value="series_general">General</TabNav>
-        <TabNav value="series_common">Common Series Settings</TabNav>
-      </TabList>
-      <TabContent value="series_general">
-        <Card className="my-2" bodyClass="p-0">
-          <Table compact>
-            <THead>
-              <Tr>
-                <Th>
-                  <Button
-                    shape="circle"
-                    variant="plain"
-                    type="button"
-                    size="xs"
-                    title="Add"
-                    icon={<FaPlus />}
-                    onClick={async (e) => {
-                      e.preventDefault()
-                      setDatabaseOperationsModalData({
-                        id: values.id ?? '',
-                        index: -1,
-                        isOpen: 'serie',
-                        operation: 'insert',
-                      })
-                    }}
-                  />
-                </Th>
-                <Th>Type</Th>
-                <Th>Name</Th>
-                <Th>Argument Field</Th>
-                <Th>Value Field</Th>
-                <Th>Pane</Th>
-                <Th>Axis</Th>
-              </Tr>
-            </THead>
-            <TBody>
-              {chartValues.seriesDto.map((row, index) => (
-                <Tr key={index}>
-                  <Td>
-                    <div className="flex-wrap inline-flex xl:flex items-center gap-2">
-                      <Button
-                        shape="circle"
-                        variant="plain"
-                        type="button"
-                        size="xs"
-                        title="Edit"
-                        icon={<FaEdit />}
-                        onClick={async (e) => {
-                          e.preventDefault()
-                          setDatabaseOperationsModalData({
-                            id: values.id ?? '',
-                            index,
-                            isOpen: 'serie',
-                            operation: 'update',
-                            seriesValues: chartValues.seriesDto[index],
-                          })
-                        }}
-                      />
-                      <Button
-                        shape="circle"
-                        variant="plain"
-                        type="button"
-                        size="xs"
-                        title="Delete"
-                        icon={<FaTrash />}
-                        onClick={async (e) => {
-                          e.preventDefault()
-                          setConfirmDelete({
-                            isOpen: true,
-                            id: values.id ?? '',
-                            fieldName: 'serie',
-                            index,
-                          })
-                        }}
-                      />
-                    </div>
-                  </Td>
-                  <Td>{row.type}</Td>
-                  <Td>{row.name}</Td>
-                  <Td>{row.argumentField}</Td>
-                  <Td>{row.valueField}</Td>
-                  <Td>{row.pane}</Td>
-                  <Td>{row.axis}</Td>
-                </Tr>
-              ))}
-            </TBody>
-          </Table>
-        </Card>
-      </TabContent>
-      <TabContent value="series_common">
-        <Card className="my-2">
-          <FormItem
-            label="Visible"
-            invalid={
-              !!(
-                errors.commonSeriesSettingsDto?.visible && touched.commonSeriesSettingsDto?.visible
-              )
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.visible}
-          >
-            <Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Show In Legend"
-            invalid={
-              !!(
-                errors.commonSeriesSettingsDto?.showInLegend &&
-                touched.commonSeriesSettingsDto?.showInLegend
-              )
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
-          >
-            <Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Ignore Empty Points"
-            invalid={
-              !!(
-                errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
-                touched.commonSeriesSettingsDto?.ignoreEmptyPoints
-              )
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
-          >
-            <Field name="commonSeriesSettingsDto.ignoreEmptyPoints" component={Checkbox} />
-          </FormItem>
-
-          <FormItem
-            label="Type"
-            invalid={
-              !!(errors.commonSeriesSettingsDto?.type && touched.commonSeriesSettingsDto?.type)
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.type}
-          >
-            <Field type="text" name="commonSeriesSettingsDto.type">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartSeriesTypeOptions}
-                  isClearable={true}
-                  value={chartSeriesTypeOptions.filter(
-                    (option) => option.value === values.commonSeriesSettingsDto.type,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Selection Mode"
-            invalid={
-              !!(
-                errors.commonSeriesSettingsDto?.selectionMode &&
-                touched.commonSeriesSettingsDto?.selectionMode
-              )
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
-          >
-            <Field type="text" name="commonSeriesSettingsDto.selectionMode">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartSeriesSelectionModeOptions}
-                  isClearable={true}
-                  value={chartSeriesSelectionModeOptions.filter(
-                    (option) => option.value === values.commonSeriesSettingsDto.selectionMode,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Argument Field"
-            invalid={
-              !!(
-                errors.commonSeriesSettingsDto?.argumentField &&
-                touched.commonSeriesSettingsDto?.argumentField
-              )
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.argumentField}
-          >
-            <Field name="commonSeriesSettingsDto.argumentField" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Value Field"
-            invalid={
-              !!(
-                errors.commonSeriesSettingsDto?.valueField &&
-                touched.commonSeriesSettingsDto?.valueField
-              )
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.valueField}
-          >
-            <Field name="commonSeriesSettingsDto.valueField" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Axis"
-            invalid={
-              !!(errors.commonSeriesSettingsDto?.axis && touched.commonSeriesSettingsDto?.axis)
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.axis}
-          >
-            <Field type="text" name="commonSeriesSettingsDto.axis">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={valueAxisList()}
-                  isClearable={true}
-                  value={valueAxisList()?.find(
-                    (option) => option.value === values.commonSeriesSettingsDto.axis,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Pane"
-            invalid={
-              !!(errors.commonSeriesSettingsDto?.pane && touched.commonSeriesSettingsDto?.pane)
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.pane}
-          >
-            <Field type="text" name="commonSeriesSettingsDto.pane">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={valuePaneList()}
-                  isClearable={true}
-                  value={valuePaneList()?.find(
-                    (option) => option.value === values.commonSeriesSettingsDto.pane,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Color"
-            invalid={
-              !!(errors.commonSeriesSettingsDto?.color && touched.commonSeriesSettingsDto?.color)
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.color}
-          >
-            <Field name="commonSeriesSettingsDto.color" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Corner Radius"
-            invalid={
-              !!(
-                errors.commonSeriesSettingsDto?.cornerRadius &&
-                touched.commonSeriesSettingsDto?.cornerRadius
-              )
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
-          >
-            <Field type="number" name="commonSeriesSettingsDto.cornerRadius" component={Input} />
-          </FormItem>
-
-          <FormItem
-            label="Type"
-            invalid={
-              !!(
-                errors.commonSeriesSettingsDto?.dashStyle &&
-                touched.commonSeriesSettingsDto?.dashStyle
-              )
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
-          >
-            <Field type="text" name="commonSeriesSettingsDto.dashStyle">
-              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                <Select
-                  field={field}
-                  form={form}
-                  options={chartSeriesDashStyleOptions}
-                  isClearable={true}
-                  value={chartSeriesDashStyleOptions.filter(
-                    (option) => option.value === values.commonSeriesSettingsDto.dashStyle,
-                  )}
-                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                />
-              )}
-            </Field>
-          </FormItem>
-
-          <FormItem
-            label="Width"
-            invalid={
-              !!(errors.commonSeriesSettingsDto?.width && touched.commonSeriesSettingsDto?.width)
-            }
-            errorMessage={errors.commonSeriesSettingsDto?.width}
-          >
-            <Field type="number" name="commonSeriesSettingsDto.width" component={Input} />
-          </FormItem>
-        </Card>
-      </TabContent>
-    </Tabs>
-  )
-}
-
-export default ChartTabSeries

ui/src/views/admin/chart/edit/ChartTabZoomAndPan.tsx

@@ -1,142 +0,0 @@
-import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
-import { ChartEditDto } from '@/proxy/charts/models'
-import { SelectBoxOption } from '@/shared/types'
-import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
-import { chartZoomAndPanAxisOptions, chartZoomAndPanKeyOptions } from './../options'
-
-interface ChartTabZoomAndPanProps {
-  values: ChartEditDto
-  errors: FormikErrors<ChartEditDto>
-  touched: FormikTouched<ChartEditDto>
-}
-
-const ChartTabZoomAndPan = ({ values, errors, touched }: ChartTabZoomAndPanProps) => {
-  return (
-    <>
-      <Card className="my-2">
-        <FormItem
-          label="Allow Mouse Wheel"
-          invalid={
-            !!(errors.zoomAndPanDto?.allowMouseWheel && touched.zoomAndPanDto?.allowMouseWheel)
-          }
-          errorMessage={errors.zoomAndPanDto?.allowMouseWheel as string}
-        >
-          <Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
-        </FormItem>
-
-        <FormItem
-          label="Allow Touch Gestures"
-          invalid={
-            !!(
-              errors.zoomAndPanDto?.allowTouchGestures && touched.zoomAndPanDto?.allowTouchGestures
-            )
-          }
-          errorMessage={errors.zoomAndPanDto?.allowTouchGestures as string}
-        >
-          <Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
-        </FormItem>
-
-        <FormItem
-          label="Drag To Zoom"
-          invalid={!!(errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom)}
-          errorMessage={errors.zoomAndPanDto?.dragToZoom as string}
-        >
-          <Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
-        </FormItem>
-
-        <FormItem
-          label="Argument Axis"
-          invalid={!!(errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis)}
-          errorMessage={errors.zoomAndPanDto?.argumentAxis}
-        >
-          <Field type="text" name="zoomAndPanDto.argumentAxis">
-            {({ field, form }: FieldProps<SelectBoxOption>) => (
-              <Select
-                field={field}
-                form={form}
-                options={chartZoomAndPanAxisOptions}
-                isClearable={true}
-                value={chartZoomAndPanAxisOptions.filter(
-                  (option) => option.value === values.zoomAndPanDto.argumentAxis,
-                )}
-                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-              />
-            )}
-          </Field>
-        </FormItem>
-
-        <FormItem
-          label="Value Axis"
-          invalid={!!(errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis)}
-          errorMessage={errors.zoomAndPanDto?.valueAxis}
-        >
-          <Field type="text" name="zoomAndPanDto.valueAxis">
-            {({ field, form }: FieldProps<SelectBoxOption>) => (
-              <Select
-                field={field}
-                form={form}
-                options={chartZoomAndPanAxisOptions}
-                isClearable={true}
-                value={chartZoomAndPanAxisOptions.filter(
-                  (option) => option.value === values.zoomAndPanDto.valueAxis,
-                )}
-                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-              />
-            )}
-          </Field>
-        </FormItem>
-
-        <FormItem
-          label="Pan Key"
-          invalid={!!(errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey)}
-          errorMessage={errors.zoomAndPanDto?.panKey}
-        >
-          <Field type="text" name="zoomAndPanDto.panKey">
-            {({ field, form }: FieldProps<SelectBoxOption>) => (
-              <Select
-                field={field}
-                form={form}
-                options={chartZoomAndPanKeyOptions}
-                isClearable={true}
-                value={chartZoomAndPanKeyOptions.filter(
-                  (option) => option.value === values.zoomAndPanDto.panKey,
-                )}
-                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-              />
-            )}
-          </Field>
-        </FormItem>
-      </Card>
-
-      <Card className="my-2" header="Zoom and Pan - DragBox Style">
-        <FormItem
-          label="Color"
-          invalid={
-            !!(
-              errors.zoomAndPanDto?.dragBoxStyle?.color &&
-              touched.zoomAndPanDto?.dragBoxStyle?.color
-            )
-          }
-          errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
-        >
-          <Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
-        </FormItem>
-
-        <FormItem
-          label="Opacity"
-          invalid={
-            !!(
-              errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
-              touched.zoomAndPanDto?.dragBoxStyle?.opacity
-            )
-          }
-          errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity as string}
-        >
-          <Field type="number" name="zoomAndPanDto.dragBoxStyle.opacity" component={Input} />
-        </FormItem>
-      </Card>
-    </>
-  )
-}
-
-export default ChartTabZoomAndPan

ui/src/views/admin/chart/options.ts

@@ -1,183 +0,0 @@
-export const chartPaletteOptions = [
-  { value: 'Bright', label: 'Bright' },
-  { value: 'Carmine', label: 'Carmine' },
-  { value: 'Dark Moon', label: 'Dark Moon' },
-  { value: 'Dark Violet', label: 'Dark Violet' },
-  { value: 'Green Mist', label: 'Green Mist' },
-  { value: 'Harmony Light', label: 'Harmony Light' },
-  { value: 'Material', label: 'Material' },
-  { value: 'Ocean', label: 'Ocean' },
-  { value: 'Office', label: 'Office' },
-  { value: 'Pastel', label: 'Pastel' },
-  { value: 'Soft', label: 'Soft' },
-  { value: 'Soft Blue', label: 'Soft Blue' },
-  { value: 'Soft Pastel', label: 'Soft Pastel' },
-  { value: 'Vintage', label: 'Vintage' },
-  { value: 'Violet', label: 'Violet' },
-]
-
-export const chartPaletteExtensionModeOptions = [
-  { value: 'alternate', label: 'Alternate' },
-  { value: 'blend', label: 'Blend' },
-  { value: 'extrapolate', label: 'Extrapolate' },
-]
-
-export const chartSeriesTypeOptions = [
-  { value: 'line', label: 'Line' },
-  { value: 'stepline', label: 'Stepline' },
-  { value: 'bar', label: 'Bar' },
-  { value: 'fullstackedbar', label: 'Fullstackedbar' },
-  { value: 'rangebar', label: 'Rangebar' },
-  { value: 'rangearea', label: 'Rangearea' },
-  { value: 'fullstackedarea', label: 'Fullstackedarea' },
-  { value: 'area', label: 'Area' },
-  { value: 'bubble', label: 'Bubble' },
-  { value: 'candlestick', label: 'Candlestick' },
-  { value: 'fullstackedline', label: 'Fullstackedline' },
-  { value: 'fullstackedspline', label: 'Fullstackedspline' },
-  { value: 'fullstackedsplinearea', label: 'Fullstackedsplinearea' },
-  { value: 'scatter', label: 'Scatter' },
-  { value: 'spline', label: 'Spline' },
-  { value: 'splinearea', label: 'Splinearea' },
-  { value: 'stackedarea', label: 'Stackedarea' },
-  { value: 'stackedbar', label: 'Stackedbar' },
-  { value: 'stackedline', label: 'Stackedline' },
-  { value: 'stackedspline', label: 'Stackedspline' },
-  { value: 'stackedsplinearea', label: 'Stackedsplinearea' },
-  { value: 'steparea', label: 'Steparea' },
-  { value: 'stock', label: 'Stock' },
-]
-
-export const chartSeriesSelectionModeOptions = [
-  { value: 'none', label: 'None' },
-  { value: 'allArgumentPoints', label: 'All Argument Points' },
-  { value: 'allSeriesPoints', label: 'All Series Points' },
-  { value: 'excludePoints', label: 'Exclude Points' },
-  { value: 'includePoints', label: 'Include Points' },
-  { value: 'onlyPoint', label: 'Only Point' },
-]
-
-export const chartSeriesDashStyleOptions = [
-  { value: 'dash', label: 'Dash' },
-  { value: 'solid', label: 'Dash Solid' },
-  { value: 'dot', label: 'Dot' },
-  { value: 'longDash', label: 'Long Dash' },
-]
-
-export const chartEasingListOptions = [
-  { value: 'linear', label: 'Linear' },
-  { value: 'easeOutCubic', label: 'Ease Out Cubic' },
-]
-
-export const chartArgumentAxisHoverModeListOptions = [
-  { value: 'none', label: 'None' },
-  { value: 'allArgumentPoints', label: 'All Argument Points' },
-]
-
-export const chartArgumentAxisTypeListOptions = [
-  { value: null, label: 'None' },
-  { value: 'numeric', label: 'Numeric' },
-  { value: 'datetime', label: 'Datetime' },
-  { value: 'string', label: 'String' },
-]
-
-export const chartArgumentAxisPositionListOptions = [
-  { value: 'bottom', label: 'Bottom' },
-  { value: 'left', label: 'Left' },
-  { value: 'right', label: 'Right' },
-  { value: 'top', label: 'Top' },
-]
-
-export const chartArgumentAxisIntervalListOptions = [
-  { value: 'millisecond', label: 'Millisecond' },
-  { value: 'second', label: 'Second' },
-  { value: 'minute', label: 'Minute' },
-  { value: 'hour', label: 'Hour' },
-  { value: 'day', label: 'Day' },
-  { value: 'week', label: 'Week' },
-  { value: 'month', label: 'Month' },
-  { value: 'quarter', label: 'Quarter' },
-  { value: 'year', label: 'Year' },
-]
-
-export const chartArgumentAxisLabelDisplayModeListOptions = [
-  { value: 'rotate', label: 'Rotate' },
-  { value: 'stagger', label: 'Stagger' },
-  { value: 'standard', label: 'Standard' },
-]
-
-export const chartArgumentAxisLabelOverlappingBehaviorListOptions = [
-  { value: 'none', label: 'None' },
-  { value: 'hide', label: 'Hide' },
-  { value: 'standard', label: 'Standard' },
-  { value: 'stagger', label: 'Stagger' },
-]
-
-export const chartLegendOrientationListOptions = [
-  { value: 'horizontal', label: 'Horizontal' },
-  { value: 'vertical', label: 'Vertical' },
-]
-
-export const chartLegendPositionListOptions = [
-  { value: 'inside', label: 'Inside' },
-  { value: 'outside', label: 'Outside' },
-]
-
-export const chartTitleVerticalAlignmentListOptions = [
-  { value: 'bottom', label: 'Bottom' },
-  { value: 'top', label: 'Top' },
-]
-
-export const chartTitleHorizantalAlignmentListOptions = [
-  { value: 'center', label: 'Center' },
-  { value: 'left', label: 'Left' },
-  { value: 'right', label: 'Right' },
-]
-
-export const chartTitleTextOverFlowListOptions = [
-  { value: 'none', label: 'None' },
-  { value: 'ellipsis', label: 'Ellipsis' },
-  { value: 'hide', label: 'Hide' },
-]
-
-export const chartTitleWordWrapListOptions = [
-  { value: 'none', label: 'None' },
-  { value: 'normal', label: 'Normal' },
-  { value: 'breakWord', label: 'Break Word' },
-]
-
-export const chartTooltipLocationListOptions = [
-  { value: 'center', label: 'Center' },
-  { value: 'edge', label: 'Edge' },
-]
-
-export const chartZoomAndPanAxisOptions = [
-  { value: 'none', label: 'None' },
-  { value: 'edge', label: 'Both' },
-  { value: 'pan', label: 'Pan' },
-  { value: 'zoom', label: 'Zoom' },
-]
-
-export const chartZoomAndPanKeyOptions = [
-  { value: 'alt', label: 'Alt' },
-  { value: 'ctrl', label: 'Ctrl' },
-  { value: 'meta', label: 'Meta' },
-  { value: 'shift', label: 'Shift' },
-]
-
-export const chartAnnotationTypeListOptions = [
-  { value: 'text', label: 'Text' },
-  { value: 'image', label: 'Image' },
-  { value: 'custom', label: 'Custom' },
-]
-
-export const chartWordWrapListOptions = [
-  { value: 'none', label: 'None' },
-  { value: 'normal', label: 'Normal' },
-  { value: 'breakWord', label: 'Break Word' },
-]
-
-export const chartBreakStyleLineListOptions = [
-  { value: 'straight', label: 'Straight' },
-  { value: 'waved', label: 'Waved' },
-]

ui/src/views/admin/listForm/edit/ChartTabAnimation.tsx

@@ -0,0 +1,95 @@
+import { Card, Checkbox, FormContainer, FormItem, Input, Select, Button } from '@/components/ui'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import { object } from 'yup'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store/store'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { chartEasingListOptions } from './options'
+
+const schema = object()
+
+function ChartTabAnimation(props: FormEditProps) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartAnimations, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Card className="my-2">
+              <FormItem
+                label="Enabled"
+                invalid={!!(errors.animationDto?.enabled && touched.animationDto?.enabled)}
+                errorMessage={errors.animationDto?.enabled as string}
+              >
+                <Field name="animationDto.enabled" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Easing"
+                invalid={!!(errors.animationDto?.easing && touched.animationDto?.easing)}
+                errorMessage={errors.animationDto?.easing}
+              >
+                <Field type="text" name="animationDto.easing">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={chartEasingListOptions}
+                      isClearable={true}
+                      value={chartEasingListOptions.filter(
+                        (option) => option.value === values.animationDto.easing,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label="Duration"
+                invalid={!!(errors.animationDto?.duration && touched.animationDto?.duration)}
+                errorMessage={errors.animationDto?.duration as string}
+              >
+                <Field type="number" name="animationDto.duration" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Max Point Count Supported"
+                invalid={
+                  !!(
+                    errors.animationDto?.maxPointCountSupported &&
+                    touched.animationDto?.maxPointCountSupported
+                  )
+                }
+                errorMessage={errors.animationDto?.maxPointCountSupported as string}
+              >
+                <Field type="number" name="animationDto.maxPointCountSupported" component={Input} />
+              </FormItem>
+            </Card>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default ChartTabAnimation

ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx

@@ -0,0 +1,627 @@
+import {
+  Button,
+  Card,
+  Checkbox,
+  FormContainer,
+  FormItem,
+  Input,
+  Select,
+  Table,
+  Tabs,
+} from '@/components/ui'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import TBody from '@/components/ui/Table/TBody'
+import THead from '@/components/ui/Table/THead'
+import Td from '@/components/ui/Table/Td'
+import Th from '@/components/ui/Table/Th'
+import Tr from '@/components/ui/Table/Tr'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
+import { object, string } from 'yup'
+import { FormEditProps } from './FormEdit'
+import { useStoreState } from '@/store/store'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import {
+  chartAnnotationTypeListOptions,
+  chartWordWrapListOptions,
+  chartSeriesDashStyleOptions,
+} from './options'
+import { ChartSeriesDto } from '@/proxy/charts/models'
+
+const schema = object().shape({
+  name: string().required(),
+})
+
+function ChartTabAnnotations(
+  props: FormEditProps & { setDatabaseOperationsModalData: Function; setConfirmDelete: Function },
+) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  const SeriesList = () => {
+    return listFormValues?.seriesDto.map((key: ChartSeriesDto) => ({
+      value: key.name,
+      label: key.name,
+    }))
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartAnnotations, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Tabs defaultValue="annotations_general">
+              <TabList>
+                <TabNav value="annotations_general">General</TabNav>
+                <TabNav value="annotations_common">Common Pane</TabNav>
+              </TabList>
+              <TabContent value="annotations_general">
+                <Card className="my-2" bodyClass="p-0">
+                  <Table compact>
+                    <THead>
+                      <Tr>
+                        <Th>
+                          <Button
+                            shape="circle"
+                            variant="plain"
+                            type="button"
+                            size="xs"
+                            title="Add"
+                            icon={<FaFileMedical />}
+                            onClick={async (e) => {
+                              e.preventDefault()
+                              props.setDatabaseOperationsModalData({
+                                id: values.id ?? '',
+                                index: -1,
+                                isOpen: 'annotation',
+                                operation: 'insert',
+                              })
+                            }}
+                          />
+                        </Th>
+                        <Th>Type</Th>
+                        <Th>Name</Th>
+                        <Th>Text</Th>
+                        <Th>Series</Th>
+                        <Th>Value</Th>
+                        <Th>Width</Th>
+                      </Tr>
+                    </THead>
+                    <TBody>
+                      {listFormValues.annotationsDto.map((row, index) => (
+                        <Tr key={index}>
+                          <Td>
+                            <div className="flex-wrap inline-flex xl:flex items-center gap-2">
+                              <Button
+                                shape="circle"
+                                variant="plain"
+                                type="button"
+                                size="xs"
+                                title="Edit"
+                                icon={<FaEdit />}
+                                onClick={async (e) => {
+                                  e.preventDefault()
+                                  props.setDatabaseOperationsModalData({
+                                    id: values.id ?? '',
+                                    index,
+                                    isOpen: 'annotation',
+                                    operation: 'update',
+                                    annotationsValues: listFormValues.annotationsDto[index],
+                                  })
+                                }}
+                              />
+                              <Button
+                                shape="circle"
+                                variant="plain"
+                                type="button"
+                                size="xs"
+                                title="Delete"
+                                icon={<FaTrash />}
+                                onClick={async (e) => {
+                                  e.preventDefault()
+                                  props.setConfirmDelete({
+                                    isOpen: true,
+                                    id: values.id ?? '',
+                                    fieldName: 'annotation',
+                                    index,
+                                  })
+                                }}
+                              />
+                            </div>
+                          </Td>
+                          <Td>{row.type}</Td>
+                          <Td>{row.name}</Td>
+                          <Td>{row.text}</Td>
+                          <Td>{row.series}</Td>
+                          <Td>{row.value}</Td>
+                          <Td>{row.width}</Td>
+                        </Tr>
+                      ))}
+                    </TBody>
+                  </Table>
+                </Card>
+              </TabContent>
+              <TabContent value="annotations_common">
+                <Card className="my-2">
+                  <FormItem
+                    label="Tooltip Enabled"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.tooltipEnabled &&
+                        touched.commonAnnotationSettingsDto?.tooltipEnabled
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
+                  >
+                    <Field name="commonAnnotationSettingsDto.tooltipEnabled" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Pan Key"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.type &&
+                        touched.commonAnnotationSettingsDto?.type
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.type}
+                  >
+                    <Field type="text" name="commonAnnotationSettingsDto.type">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartAnnotationTypeListOptions}
+                          isClearable={true}
+                          value={chartAnnotationTypeListOptions.filter(
+                            (option) => option.value === values.commonAnnotationSettingsDto.type,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Pan Key"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.series &&
+                        touched.commonAnnotationSettingsDto?.series
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.series}
+                  >
+                    <Field type="text" name="commonAnnotationSettingsDto.series">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={SeriesList()}
+                          isClearable={true}
+                          value={SeriesList()?.find(
+                            (option) => option.value === values.commonAnnotationSettingsDto.series,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Argument"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.argument &&
+                        touched.commonAnnotationSettingsDto?.argument
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.argument}
+                  >
+                    <Field name="commonAnnotationSettingsDto.argument" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Color"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.color &&
+                        touched.commonAnnotationSettingsDto?.color
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.color}
+                  >
+                    <Field name="commonAnnotationSettingsDto.color" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Value"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.value &&
+                        touched.commonAnnotationSettingsDto?.value
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.value}
+                  >
+                    <Field name="commonAnnotationSettingsDto.value" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Description"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.description &&
+                        touched.commonAnnotationSettingsDto?.description
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.description}
+                  >
+                    <Field name="commonAnnotationSettingsDto.description" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Image"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.image &&
+                        touched.commonAnnotationSettingsDto?.image
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.image}
+                  >
+                    <Field name="commonAnnotationSettingsDto.image" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Text"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.text &&
+                        touched.commonAnnotationSettingsDto?.text
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.text}
+                  >
+                    <Field name="commonAnnotationSettingsDto.text" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Word Wrap"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.wordWrap &&
+                        touched.commonAnnotationSettingsDto?.wordWrap
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
+                  >
+                    <Field type="text" name="commonAnnotationSettingsDto.wordWrap">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartWordWrapListOptions}
+                          isClearable={true}
+                          value={chartWordWrapListOptions.filter(
+                            (option) =>
+                              option.value === values.commonAnnotationSettingsDto.wordWrap,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.width &&
+                        touched.commonAnnotationSettingsDto?.width
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.width}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.width"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Height"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.height &&
+                        touched.commonAnnotationSettingsDto?.height
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.height}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.height"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="X"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.x &&
+                        touched.commonAnnotationSettingsDto?.x
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.x}
+                  >
+                    <Field type="number" name="commonAnnotationSettingsDto.x" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Y"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.y &&
+                        touched.commonAnnotationSettingsDto?.y
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.y}
+                  >
+                    <Field type="number" name="commonAnnotationSettingsDto.y" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Offset X"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.offsetX &&
+                        touched.commonAnnotationSettingsDto?.offsetX
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.offsetX"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Offset Y"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.offsetY &&
+                        touched.commonAnnotationSettingsDto?.offsetY
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.offsetY"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Padding Left/Right"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.paddingLeftRight &&
+                        touched.commonAnnotationSettingsDto?.paddingLeftRight
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.paddingLeftRight"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Padding Top/Bottom"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.paddingTopBottom &&
+                        touched.commonAnnotationSettingsDto?.paddingTopBottom
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.paddingTopBottom"
+                      component={Input}
+                    />
+                  </FormItem>
+                </Card>
+
+                <Card className="my-2" header="Common Annotations - Border">
+                  <FormItem
+                    label="Visible"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.border?.visible &&
+                        touched.commonAnnotationSettingsDto?.border?.visible
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
+                  >
+                    <Field name="commonAnnotationSettingsDto.border.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Color"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.border?.color &&
+                        touched.commonAnnotationSettingsDto?.border?.color
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
+                  >
+                    <Field
+                      type="text"
+                      name="commonAnnotationSettingsDto.border.color"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Dash Style"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.border?.dashStyle &&
+                        touched.commonAnnotationSettingsDto?.border?.dashStyle
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
+                  >
+                    <Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartSeriesDashStyleOptions}
+                          isClearable={true}
+                          value={chartSeriesDashStyleOptions.filter(
+                            (option) =>
+                              option.value === values.commonAnnotationSettingsDto.border.dashStyle,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Corner Radius"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
+                        touched.commonAnnotationSettingsDto?.border?.cornerRadius
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.border.cornerRadius"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.border?.width &&
+                        touched.commonAnnotationSettingsDto?.border?.width
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.border.width"
+                      component={Input}
+                    />
+                  </FormItem>
+                </Card>
+
+                <Card className="my-2" header="Common Annotations - Font">
+                  <FormItem
+                    label="Color"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.font?.color &&
+                        touched.commonAnnotationSettingsDto?.font?.color
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
+                  >
+                    <Field name="commonAnnotationSettingsDto.font.color" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Family"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.font?.family &&
+                        touched.commonAnnotationSettingsDto?.font?.family
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
+                  >
+                    <Field name="commonAnnotationSettingsDto.font.family" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Size"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.font?.size &&
+                        touched.commonAnnotationSettingsDto?.font?.size
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.font.size"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Weight"
+                    invalid={
+                      !!(
+                        errors.commonAnnotationSettingsDto?.font?.weight &&
+                        touched.commonAnnotationSettingsDto?.font?.weight
+                      )
+                    }
+                    errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAnnotationSettingsDto.font.weight"
+                      component={Input}
+                    />
+                  </FormItem>
+                </Card>
+              </TabContent>
+            </Tabs>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default ChartTabAnnotations

ui/src/views/admin/listForm/edit/ChartTabAxis.tsx

@@ -0,0 +1,504 @@
+import {
+  Button,
+  Card,
+  Checkbox,
+  FormContainer,
+  FormItem,
+  Input,
+  Select,
+  Table,
+  Tabs,
+} from '@/components/ui'
+import TBody from '@/components/ui/Table/TBody'
+import THead from '@/components/ui/Table/THead'
+import Td from '@/components/ui/Table/Td'
+import Th from '@/components/ui/Table/Th'
+import Tr from '@/components/ui/Table/Tr'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store/store'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { object, string } from 'yup'
+import {
+  chartArgumentAxisHoverModeListOptions,
+  chartArgumentAxisTypeListOptions,
+  chartArgumentAxisPositionListOptions,
+  chartArgumentAxisIntervalListOptions,
+  chartArgumentAxisLabelDisplayModeListOptions,
+  chartArgumentAxisLabelOverlappingBehaviorListOptions,
+} from './options'
+
+const schema = object().shape({
+  name: string().required(),
+  title: string().required(),
+})
+
+function ChartTabAxis(
+  props: FormEditProps & { setDatabaseOperationsModalData: Function; setConfirmDelete: Function },
+) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartAxis, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Tabs defaultValue="axis_value">
+              <TabList>
+                <TabNav value="axis_value">Value Axis</TabNav>
+                <TabNav value="axis_argument">Argument Axis Options</TabNav>
+                <TabNav value="axis_common">Common Axis Settings</TabNav>
+              </TabList>
+              <TabContent value="axis_value">
+                <Card className="my-2" bodyClass="p-0">
+                  <Table compact>
+                    <THead>
+                      <Tr>
+                        <Th>
+                          <Button
+                            shape="circle"
+                            variant="plain"
+                            type="button"
+                            size="xs"
+                            title="Add"
+                            icon={<FaPlus />}
+                            onClick={async (e) => {
+                              e.preventDefault()
+                              props.setDatabaseOperationsModalData({
+                                id: values.id ?? '',
+                                index: -1,
+                                isOpen: 'axis',
+                                operation: 'insert',
+                              })
+                            }}
+                          />
+                        </Th>
+                        <Th>Value Type</Th>
+                        <Th>Position</Th>
+                        <Th>Type</Th>
+                        <Th>Name</Th>
+                        <Th>Title</Th>
+                        <Th>Visible</Th>
+                      </Tr>
+                    </THead>
+                    <TBody>
+                      {listFormValues.valueAxisDto.map((row, index) => (
+                        <Tr key={index}>
+                          <Td>
+                            <div className="flex-wrap inline-flex xl:flex items-center gap-2">
+                              <Button
+                                shape="circle"
+                                variant="plain"
+                                type="button"
+                                size="xs"
+                                title="Edit"
+                                icon={<FaEdit />}
+                                onClick={async (e) => {
+                                  e.preventDefault()
+                                  props.setDatabaseOperationsModalData({
+                                    id: values.id ?? '',
+                                    index,
+                                    isOpen: 'axis',
+                                    operation: 'update',
+                                    axisValues: listFormValues.valueAxisDto[index],
+                                  })
+                                }}
+                              />
+                              <Button
+                                shape="circle"
+                                variant="plain"
+                                type="button"
+                                size="xs"
+                                title="Delete"
+                                icon={<FaTrash />}
+                                onClick={async (e) => {
+                                  e.preventDefault()
+                                  props.setConfirmDelete({
+                                    isOpen: true,
+                                    id: values.id ?? '',
+                                    fieldName: 'axis',
+                                    index,
+                                  })
+                                }}
+                              />
+                            </div>
+                          </Td>
+                          <Td>{row.valueType}</Td>
+                          <Td>{row.position}</Td>
+                          <Td>{row.type}</Td>
+                          <Td>{row.name}</Td>
+                          <Td>{row.title}</Td>
+                          <Td>{row.visible}</Td>
+                        </Tr>
+                      ))}
+                    </TBody>
+                  </Table>
+                </Card>
+              </TabContent>
+              <TabContent value="axis_argument">
+                <Card className="my-2">
+                  <FormItem
+                    label="Visible"
+                    invalid={
+                      !!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)
+                    }
+                    errorMessage={errors.argumentAxisDto?.visible}
+                  >
+                    <Field name="argumentAxisDto.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Workdays Only"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.workdaysOnly &&
+                        touched.argumentAxisDto?.workdaysOnly
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.workdaysOnly}
+                  >
+                    <Field name="argumentAxisDto.workdaysOnly" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Title"
+                    invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)}
+                    errorMessage={errors.argumentAxisDto?.title}
+                  >
+                    <Field type="text" name="argumentAxisDto.title" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Hover Mode"
+                    invalid={
+                      !!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode)
+                    }
+                    errorMessage={errors.argumentAxisDto?.hoverMode}
+                  >
+                    <Field type="text" name="argumentAxisDto.hoverMode">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartArgumentAxisHoverModeListOptions}
+                          isClearable={true}
+                          value={chartArgumentAxisHoverModeListOptions.filter(
+                            (option) => option.value === values.argumentAxisDto.hoverMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Argument Type"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.argumentType &&
+                        touched.argumentAxisDto?.argumentType
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.argumentType}
+                  >
+                    <Field type="text" name="argumentAxisDto.argumentType">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartArgumentAxisTypeListOptions}
+                          isClearable={true}
+                          value={chartArgumentAxisTypeListOptions.filter(
+                            (option) => option.value === values.argumentAxisDto.argumentType,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Position"
+                    invalid={
+                      !!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position)
+                    }
+                    errorMessage={errors.argumentAxisDto?.position}
+                  >
+                    <Field type="text" name="argumentAxisDto.position">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartArgumentAxisPositionListOptions}
+                          isClearable={true}
+                          value={chartArgumentAxisPositionListOptions.filter(
+                            (option) => option.value === values.argumentAxisDto.position,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)}
+                    errorMessage={errors.argumentAxisDto?.width}
+                  >
+                    <Field type="number" name="argumentAxisDto.width" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Aggregation Interval"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.aggregationInterval &&
+                        touched.argumentAxisDto?.aggregationInterval
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.aggregationInterval}
+                  >
+                    <Field type="text" name="argumentAxisDto.aggregationInterval">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartArgumentAxisIntervalListOptions}
+                          isClearable={true}
+                          value={chartArgumentAxisIntervalListOptions.filter(
+                            (option) => option.value === values.argumentAxisDto.aggregationInterval,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                </Card>
+
+                <Card className="my-2" header="Argument Axis - Grid">
+                  <FormItem
+                    label="Visible"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.grid?.visible &&
+                        touched.argumentAxisDto?.grid?.visible
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.grid?.visible}
+                  >
+                    <Field name="argumentAxisDto.grid.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Color"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.grid?.color && touched.argumentAxisDto?.grid?.color
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.grid?.color}
+                  >
+                    <Field type="text" name="argumentAxisDto.grid.color" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.grid?.width && touched.argumentAxisDto?.grid?.width
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.grid?.width}
+                  >
+                    <Field type="number" name="argumentAxisDto.grid.width" component={Input} />
+                  </FormItem>
+                </Card>
+
+                <Card className="my-2" header="Argument Axis - Label">
+                  <FormItem
+                    label="Position"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.label?.displayMode &&
+                        touched.argumentAxisDto?.label?.displayMode
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.label?.displayMode}
+                  >
+                    <Field type="text" name="argumentAxisDto.label.displayMode">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartArgumentAxisLabelDisplayModeListOptions}
+                          isClearable={true}
+                          value={chartArgumentAxisLabelDisplayModeListOptions.filter(
+                            (option) => option.value === values.argumentAxisDto.label.displayMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Rotation Angle"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.label?.rotationAngle &&
+                        touched.argumentAxisDto?.label?.rotationAngle
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
+                  >
+                    <Field
+                      type="number"
+                      name="argumentAxisDto.label.rotationAngle"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Overlapping Behavior"
+                    invalid={
+                      !!(
+                        errors.argumentAxisDto?.label?.overlappingBehavior &&
+                        touched.argumentAxisDto?.label?.overlappingBehavior
+                      )
+                    }
+                    errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
+                  >
+                    <Field type="text" name="argumentAxisDto.label.overlappingBehavior">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
+                          isClearable={true}
+                          value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
+                            (option) =>
+                              option.value === values.argumentAxisDto.label.overlappingBehavior,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                </Card>
+              </TabContent>
+              <TabContent value="axis_common">
+                <Card className="my-2">
+                  <FormItem
+                    label="Visible"
+                    invalid={
+                      !!(
+                        errors.commonAxisSettingsDto?.visible &&
+                        touched.commonAxisSettingsDto?.visible
+                      )
+                    }
+                    errorMessage={errors.commonAxisSettingsDto?.visible}
+                  >
+                    <Field name="commonAxisSettingsDto.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Title"
+                    invalid={
+                      !!(
+                        errors.commonAxisSettingsDto?.title && touched.commonAxisSettingsDto?.title
+                      )
+                    }
+                    errorMessage={errors.commonAxisSettingsDto?.title}
+                  >
+                    <Field type="text" name="title" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={
+                      !!(
+                        errors.commonAxisSettingsDto?.width && touched.commonAxisSettingsDto?.width
+                      )
+                    }
+                    errorMessage={errors.commonAxisSettingsDto?.width}
+                  >
+                    <Field type="number" name="commonAxisSettingsDto.width" component={Input} />
+                  </FormItem>
+                </Card>
+
+                <Card className="my-2" header="Common Axis Settings - Grid">
+                  <FormItem
+                    label="Visible"
+                    invalid={
+                      !!(
+                        errors.commonAxisSettingsDto?.grid?.visible &&
+                        touched.commonAxisSettingsDto?.grid?.visible
+                      )
+                    }
+                    errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
+                  >
+                    <Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Color"
+                    invalid={
+                      !!(
+                        errors.commonAxisSettingsDto?.grid?.color &&
+                        touched.commonAxisSettingsDto?.grid?.color
+                      )
+                    }
+                    errorMessage={errors.commonAxisSettingsDto?.grid?.color}
+                  >
+                    <Field type="text" name="commonAxisSettingsDto.grid.color" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={
+                      !!(
+                        errors.commonAxisSettingsDto?.grid?.width &&
+                        touched.commonAxisSettingsDto?.grid?.width
+                      )
+                    }
+                    errorMessage={errors.commonAxisSettingsDto?.grid?.width}
+                  >
+                    <Field
+                      type="number"
+                      name="commonAxisSettingsDto.grid.width"
+                      component={Input}
+                    />
+                  </FormItem>
+                </Card>
+              </TabContent>
+            </Tabs>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default ChartTabAxis

ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx

@@ -0,0 +1,652 @@
+import {
+  Button,
+  Card,
+  Checkbox,
+  FormContainer,
+  FormItem,
+  Input,
+  Select,
+  Tabs,
+} from '@/components/ui'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import { IdentityRoleDto } from '@/proxy/admin/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, Form, Formik, FormikErrors, FormikTouched } from 'formik'
+import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store/store'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { object } from 'yup'
+import {
+  chartPaletteOptions,
+  chartPaletteExtensionModeOptions,
+  chartTitleVerticalAlignmentListOptions,
+  chartTitleHorizantalAlignmentListOptions,
+  chartTitleTextOverFlowListOptions,
+  chartTitleWordWrapListOptions,
+  chartTooltipLocationListOptions,
+  chartSeriesDashStyleOptions,
+  chartArgumentAxisPositionListOptions,
+} from './options'
+
+const schema = object()
+
+function ChartTabCommonSettings(props: FormEditProps) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartCommon, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Tabs defaultValue="commonSettings_general">
+              <TabList className="flex-wrap">
+                <TabNav value="commonSettings_general">General</TabNav>
+                <TabNav value="commonSettings_adaptiveLayouts">Adaptive Layout Settings</TabNav>
+                <TabNav value="commonSettings_title">Title Settings</TabNav>
+                <TabNav value="commonSettings_tooltip">Tooltip Settings</TabNav>
+                <TabNav value="commonSettings_margin">Margin Settings</TabNav>
+                <TabNav value="commonSettings_size">Size Settings</TabNav>
+                <TabNav value="commonSettings_scrollbar">ScrollBar Settings</TabNav>
+              </TabList>
+              <TabContent value="commonSettings_general">
+                <Card className="my-2">
+                  <FormItem
+                    label="Disabled"
+                    invalid={!!(errors.commonDto?.disabled && touched.commonDto?.disabled)}
+                    errorMessage={errors.commonDto?.disabled}
+                  >
+                    <Field name="commonDto.disabled" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Adjust On Zoom"
+                    invalid={!!(errors.commonDto?.adjustOnZoom && touched.commonDto?.adjustOnZoom)}
+                    errorMessage={errors.commonDto?.adjustOnZoom as string}
+                  >
+                    <Field name="commonDto.adjustOnZoom" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Container BackgroundColor"
+                    invalid={
+                      !!(
+                        errors.commonDto?.containerBackgroundColor &&
+                        touched.commonDto?.containerBackgroundColor
+                      )
+                    }
+                    errorMessage={errors.commonDto?.containerBackgroundColor}
+                  >
+                    <Field name="commonDto.containerBackgroundColor" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Default Pane"
+                    invalid={!!(errors.commonDto?.defaultPane && touched.commonDto?.defaultPane)}
+                    errorMessage={errors.commonDto?.defaultPane}
+                  >
+                    <Field type="text" name="commonDto.defaultPane" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Theme"
+                    invalid={!!(errors.commonDto?.theme && touched.commonDto?.theme)}
+                    errorMessage={errors.commonDto?.theme}
+                  >
+                    <Field type="text" name="commonDto.theme">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={themeOptions}
+                          isClearable={true}
+                          value={themeOptions.filter(
+                            (option) => option.value === values.commonDto.theme,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Palette"
+                    invalid={!!(errors.commonDto?.palette && touched.commonDto?.palette)}
+                    errorMessage={errors.commonDto?.palette}
+                  >
+                    <Field type="text" name="commonDto.palette">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartPaletteOptions}
+                          isClearable={true}
+                          value={chartPaletteOptions.filter(
+                            (option) => option.value === values.commonDto.palette,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Palette Extension Mode"
+                    invalid={
+                      !!(
+                        errors.commonDto?.paletteExtensionMode &&
+                        touched.commonDto?.paletteExtensionMode
+                      )
+                    }
+                    errorMessage={errors.commonDto?.paletteExtensionMode}
+                  >
+                    <Field type="text" name="commonDto.paletteExtensionMode">
+                      {({ field, form }: FieldProps<any>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartPaletteExtensionModeOptions}
+                          isClearable={true}
+                          value={chartPaletteExtensionModeOptions.filter(
+                            (option) => option.value === values.commonDto.paletteExtensionMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                </Card>
+              </TabContent>
+              <TabContent value="commonSettings_adaptiveLayouts">
+                <Card className="my-2">
+                  <FormItem
+                    label="Keep Labels"
+                    invalid={
+                      !!(
+                        errors.adaptivelayoutDto?.keepLabels &&
+                        touched.adaptivelayoutDto?.keepLabels
+                      )
+                    }
+                    errorMessage={errors.adaptivelayoutDto?.keepLabels as string}
+                  >
+                    <Field name="adaptivelayoutDto.keepLabels" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={
+                      !!(errors.adaptivelayoutDto?.width && touched.adaptivelayoutDto?.width)
+                    }
+                    errorMessage={errors.adaptivelayoutDto?.width}
+                  >
+                    <Field type="number" name="adaptivelayoutDto.width" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Height"
+                    invalid={
+                      !!(errors.adaptivelayoutDto?.height && touched.adaptivelayoutDto?.height)
+                    }
+                    errorMessage={errors.adaptivelayoutDto?.height}
+                  >
+                    <Field type="number" name="adaptivelayoutDto.height" component={Input} />
+                  </FormItem>
+                </Card>
+              </TabContent>
+              <TabContent value="commonSettings_title">
+                <Card className="my-2">
+                  <FormItem
+                    label="Text"
+                    invalid={!!(errors.titleDto?.text && touched.titleDto?.text)}
+                    errorMessage={errors.titleDto?.text}
+                  >
+                    <Field name="titleDto.text" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Subtitle"
+                    invalid={!!(errors.titleDto?.subtitle && touched.titleDto?.subtitle)}
+                    errorMessage={errors.titleDto?.subtitle}
+                  >
+                    <Field name="titleDto.subtitle" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Vertical Alignment"
+                    invalid={
+                      !!(errors.titleDto?.verticalAlignment && touched.titleDto?.verticalAlignment)
+                    }
+                    errorMessage={errors.titleDto?.verticalAlignment}
+                  >
+                    <Field type="text" name="titleDto.verticalAlignment">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartTitleVerticalAlignmentListOptions}
+                          isClearable={true}
+                          value={chartTitleVerticalAlignmentListOptions.filter(
+                            (option) => option.value === values.titleDto.verticalAlignment,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Horizontal Alignment"
+                    invalid={
+                      !!(
+                        errors.titleDto?.horizontalAlignment &&
+                        touched.titleDto?.horizontalAlignment
+                      )
+                    }
+                    errorMessage={errors.titleDto?.horizontalAlignment}
+                  >
+                    <Field type="text" name="titleDto.horizontalAlignment">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartTitleHorizantalAlignmentListOptions}
+                          isClearable={true}
+                          value={chartTitleHorizantalAlignmentListOptions.filter(
+                            (option) => option.value === values.titleDto.horizontalAlignment,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Text Overflow"
+                    invalid={!!(errors.titleDto?.textOverflow && touched.titleDto?.textOverflow)}
+                    errorMessage={errors.titleDto?.textOverflow}
+                  >
+                    <Field type="text" name="titleDto.textOverflow">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartTitleTextOverFlowListOptions}
+                          isClearable={true}
+                          value={chartTitleTextOverFlowListOptions.filter(
+                            (option) => option.value === values.titleDto.textOverflow,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Word Wrap"
+                    invalid={!!(errors.titleDto?.wordWrap && touched.titleDto?.wordWrap)}
+                    errorMessage={errors.titleDto?.wordWrap}
+                  >
+                    <Field type="text" name="titleDto.wordWrap">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartTitleWordWrapListOptions}
+                          isClearable={true}
+                          value={chartTitleWordWrapListOptions.filter(
+                            (option) => option.value === values.titleDto.wordWrap,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                </Card>
+              </TabContent>
+              <TabContent value="commonSettings_tooltip">
+                <Card className="my-2">
+                  <FormItem
+                    label="Enabled"
+                    invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
+                    errorMessage={errors.tooltipDto?.enabled as string}
+                  >
+                    <Field name="tooltipDto.keepLabels" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Shared"
+                    invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
+                    errorMessage={errors.tooltipDto?.shared as string}
+                  >
+                    <Field name="tooltipDto.shared" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Format"
+                    invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
+                    errorMessage={errors.tooltipDto?.format}
+                  >
+                    <Field type="text" name="tooltipDto.format">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={tooltipFormatListOptions}
+                          isClearable={true}
+                          value={tooltipFormatListOptions.filter(
+                            (option) => option.value === values.tooltipDto.format,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Location"
+                    invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
+                    errorMessage={errors.tooltipDto?.location}
+                  >
+                    <Field type="text" name="tooltipDto.location">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartTooltipLocationListOptions}
+                          isClearable={true}
+                          value={chartTooltipLocationListOptions.filter(
+                            (option) => option.value === values.tooltipDto.location,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Color"
+                    invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
+                    errorMessage={errors.tooltipDto?.color}
+                  >
+                    <Field name="tooltipDto.color" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Argument Format"
+                    invalid={
+                      !!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)
+                    }
+                    errorMessage={errors.tooltipDto?.argumentFormat}
+                  >
+                    <Field name="tooltipDto.argumentFormat" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Arrow Length"
+                    invalid={!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)}
+                    errorMessage={errors.tooltipDto?.arrowLength}
+                  >
+                    <Field type="number" name="tooltipDto.arrowLength" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Padding Top/Bottom"
+                    invalid={
+                      !!(
+                        errors.tooltipDto?.paddingTopBottom && touched.tooltipDto?.paddingTopBottom
+                      )
+                    }
+                    errorMessage={errors.tooltipDto?.paddingTopBottom}
+                  >
+                    <Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Padding Left/Right"
+                    invalid={
+                      !!(
+                        errors.tooltipDto?.paddingLeftRight && touched.tooltipDto?.paddingLeftRight
+                      )
+                    }
+                    errorMessage={errors.tooltipDto?.paddingLeftRight}
+                  >
+                    <Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
+                  </FormItem>
+                </Card>
+                <div className="font-bold m-3">Tooltip Settings - Font</div>
+                <FormItem
+                  label="Color"
+                  invalid={!!(errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color)}
+                  errorMessage={errors.tooltipDto?.font?.color}
+                >
+                  <Field name="tooltipDto.font.color" component={Input} />
+                </FormItem>
+
+                <FormItem
+                  label="Family"
+                  invalid={!!(errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family)}
+                  errorMessage={errors.tooltipDto?.font?.family}
+                >
+                  <Field name="tooltipDto.font.family" component={Input} />
+                </FormItem>
+
+                <FormItem
+                  label="Size"
+                  invalid={!!(errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size)}
+                  errorMessage={errors.tooltipDto?.font?.size}
+                >
+                  <Field type="number" name="tooltipDto.font.size" component={Input} />
+                </FormItem>
+
+                <FormItem
+                  label="Weight"
+                  invalid={!!(errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight)}
+                  errorMessage={errors.tooltipDto?.font?.weight}
+                >
+                  <Field type="number" name="tooltipDto.font.weight" component={Input} />
+                </FormItem>
+
+                <div className="font-bold m-3">Tooltip Settings - Border</div>
+                <FormItem
+                  label="Visible"
+                  invalid={
+                    !!(errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible)
+                  }
+                  errorMessage={errors.tooltipDto?.border?.visible as string}
+                >
+                  <Field name="tooltipDto.border.visible" component={Checkbox} />
+                </FormItem>
+
+                <FormItem
+                  label="Dash Style"
+                  invalid={
+                    !!(
+                      errors.tooltipDto?.border?.dashStyle && touched.tooltipDto?.border?.dashStyle
+                    )
+                  }
+                  errorMessage={errors.tooltipDto?.border?.dashStyle}
+                >
+                  <Field type="text" name="tooltipDto.border.dashStyle">
+                    {({ field, form }: FieldProps<SelectBoxOption>) => (
+                      <Select
+                        field={field}
+                        form={form}
+                        options={chartSeriesDashStyleOptions}
+                        isClearable={true}
+                        value={chartSeriesDashStyleOptions.filter(
+                          (option) => option.value === values.tooltipDto.border.dashStyle,
+                        )}
+                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      />
+                    )}
+                  </Field>
+                </FormItem>
+
+                <FormItem
+                  label="Width"
+                  invalid={
+                    !!(errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width)
+                  }
+                  errorMessage={errors.tooltipDto?.border?.width}
+                >
+                  <Field type="number" name="tooltipDto.border.width" component={Input} />
+                </FormItem>
+
+                <FormItem
+                  label="Corner Radius"
+                  invalid={
+                    !!(
+                      errors.tooltipDto?.border?.cornerRadius &&
+                      touched.tooltipDto?.border?.cornerRadius
+                    )
+                  }
+                  errorMessage={errors.tooltipDto?.border?.cornerRadius}
+                >
+                  <Field type="number" name="tooltipDto.border.cornerRadius" component={Input} />
+                </FormItem>
+              </TabContent>
+              <TabContent value="commonSettings_margin">
+                <Card className="my-2">
+                  <FormItem
+                    label="Bottom"
+                    invalid={!!(errors.marginDto?.bottom && touched.marginDto?.bottom)}
+                    errorMessage={errors.marginDto?.bottom}
+                  >
+                    <Field type="number" name="marginDto.bottom" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Top"
+                    invalid={!!(errors.marginDto?.top && touched.marginDto?.top)}
+                    errorMessage={errors.marginDto?.top}
+                  >
+                    <Field type="number" name="marginDto.top" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Right"
+                    invalid={!!(errors.marginDto?.right && touched.marginDto?.right)}
+                    errorMessage={errors.marginDto?.right}
+                  >
+                    <Field type="number" name="marginDto.right" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Left"
+                    invalid={!!(errors.marginDto?.left && touched.marginDto?.left)}
+                    errorMessage={errors.marginDto?.left}
+                  >
+                    <Field type="number" name="marginDto.left" component={Input} />
+                  </FormItem>
+                </Card>
+              </TabContent>
+              <TabContent value="commonSettings_size">
+                <Card className="my-2">
+                  <FormItem
+                    label="Use Size"
+                    invalid={!!(errors.sizeDto?.useSize && touched.sizeDto?.useSize)}
+                    errorMessage={errors.sizeDto?.useSize as string}
+                  >
+                    <Field name="sizeDto.useSize" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={!!(errors.sizeDto?.width && touched.sizeDto?.width)}
+                    errorMessage={errors.sizeDto?.width}
+                  >
+                    <Field type="number" name="sizeDto.width" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Height"
+                    invalid={!!(errors.sizeDto?.height && touched.sizeDto?.height)}
+                    errorMessage={errors.sizeDto?.height}
+                  >
+                    <Field type="number" name="sizeDto.height" component={Input} />
+                  </FormItem>
+                </Card>
+              </TabContent>
+              <TabContent value="commonSettings_scrollbar">
+                <Card className="my-2">
+                  <FormItem
+                    label="Visible"
+                    invalid={!!(errors.scrollBarDto?.visible && touched.scrollBarDto?.visible)}
+                    errorMessage={errors.scrollBarDto?.visible as string}
+                  >
+                    <Field name="scrollBarDto.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Color"
+                    invalid={!!(errors.scrollBarDto?.color && touched.scrollBarDto?.color)}
+                    errorMessage={errors.scrollBarDto?.color}
+                  >
+                    <Field name="scrollBarDto.color" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Position"
+                    invalid={!!(errors.scrollBarDto?.position && touched.scrollBarDto?.position)}
+                    errorMessage={errors.scrollBarDto?.position}
+                  >
+                    <Field type="text" name="commonDto.position">
+                      {({ field, form }: FieldProps<IdentityRoleDto>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartArgumentAxisPositionListOptions}
+                          isClearable={true}
+                          value={chartArgumentAxisPositionListOptions.filter(
+                            (option) => option.value === values.scrollBarDto.position,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Offset"
+                    invalid={!!(errors.scrollBarDto?.offset && touched.scrollBarDto?.offset)}
+                    errorMessage={errors.scrollBarDto?.offset}
+                  >
+                    <Field type="number" name="scrollBarDto.offset" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={!!(errors.scrollBarDto?.width && touched.scrollBarDto?.width)}
+                    errorMessage={errors.scrollBarDto?.width}
+                  >
+                    <Field type="number" name="scrollBarDto.width" component={Input} />
+                  </FormItem>
+                </Card>
+              </TabContent>
+            </Tabs>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+export default ChartTabCommonSettings

ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx

@@ -0,0 +1,340 @@
+import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
+import { tooltipFormatListOptions } from '@/shared/options'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store/store'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { object } from 'yup'
+import { chartSeriesDashStyleOptions } from './options'
+
+const schema = object()
+
+function ChartTabCrosshair(props: FormEditProps) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartCrosshair, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Card className="my-2">
+              <FormItem
+                label="Enabled"
+                invalid={!!(errors.crosshairDto?.enabled && touched.crosshairDto?.enabled)}
+                errorMessage={errors.crosshairDto?.enabled as string}
+              >
+                <Field name="crosshairDto.enabled" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Color"
+                invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
+                errorMessage={errors.crosshairDto?.color}
+              >
+                <Field type="text" name="crosshairDto.color" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Dash Style"
+                invalid={!!(errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle)}
+                errorMessage={errors.crosshairDto?.dashStyle}
+              >
+                <Field type="text" name="crosshairDto.dashStyle">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={chartSeriesDashStyleOptions}
+                      isClearable={true}
+                      value={chartSeriesDashStyleOptions.filter(
+                        (option) => option.value === values.crosshairDto.dashStyle,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label="Width"
+                invalid={!!(errors.crosshairDto?.width && touched.crosshairDto?.width)}
+                errorMessage={errors.crosshairDto?.width}
+              >
+                <Field type="number" name="crosshairDto.width" component={Input} />
+              </FormItem>
+            </Card>
+
+            <Card className="my-2" header="Crosshair Options - Label">
+              <FormItem
+                label="Visible"
+                invalid={
+                  !!(errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible)
+                }
+                errorMessage={errors.crosshairDto?.label?.visible as string}
+              >
+                <Field name="crosshairDto.label.visible" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Background Color"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.label?.backgroundColor &&
+                    touched.crosshairDto?.label?.backgroundColor
+                  )
+                }
+                errorMessage={errors.crosshairDto?.label?.backgroundColor}
+              >
+                <Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Format"
+                invalid={
+                  !!(errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format)
+                }
+                errorMessage={errors.crosshairDto?.label?.format}
+              >
+                <Field type="text" name="crosshairDto.label.format">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={tooltipFormatListOptions}
+                      isClearable={true}
+                      value={tooltipFormatListOptions.filter(
+                        (option) => option.value === values.crosshairDto.label.format,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label="Customize Text"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.label?.customizeText &&
+                    touched.crosshairDto?.label?.customizeText
+                  )
+                }
+                errorMessage={errors.crosshairDto?.label?.customizeText}
+              >
+                <Field type="text" name="crosshairDto.label.customizeText" component={Input} />
+              </FormItem>
+            </Card>
+
+            <Card className="my-2" header="Crosshair Options - Label - Font">
+              <FormItem
+                label="Color"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.label?.font?.color &&
+                    touched.crosshairDto?.label?.font?.color
+                  )
+                }
+                errorMessage={errors.crosshairDto?.label?.font?.color}
+              >
+                <Field type="text" name="crosshairDto.label.font.color" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Family"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.label?.font?.family &&
+                    touched.crosshairDto?.label?.font?.family
+                  )
+                }
+                errorMessage={errors.crosshairDto?.label?.font?.family}
+              >
+                <Field type="text" name="crosshairDto.label.font.family" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Size"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.label?.font?.size &&
+                    touched.crosshairDto?.label?.font?.size
+                  )
+                }
+                errorMessage={errors.crosshairDto?.label?.font?.size}
+              >
+                <Field type="number" name="crosshairDto.label.font.size" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Weight"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.label?.font?.weight &&
+                    touched.crosshairDto?.label?.font?.weight
+                  )
+                }
+                errorMessage={errors.crosshairDto?.label?.font?.weight}
+              >
+                <Field type="number" name="crosshairDto.label.font.weight" component={Input} />
+              </FormItem>
+            </Card>
+
+            <Card className="my-2" header="Crosshair Options - Label - Horizontal Line">
+              <FormItem
+                label="Visible"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.horizontalLine?.visible &&
+                    touched.crosshairDto?.horizontalLine?.visible
+                  )
+                }
+                errorMessage={errors.crosshairDto?.horizontalLine?.visible as string}
+              >
+                <Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Color"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.horizontalLine?.color &&
+                    touched.crosshairDto?.horizontalLine?.color
+                  )
+                }
+                errorMessage={errors.crosshairDto?.horizontalLine?.color}
+              >
+                <Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Dash Style"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.horizontalLine?.dashStyle &&
+                    touched.crosshairDto?.horizontalLine?.dashStyle
+                  )
+                }
+                errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
+              >
+                <Field type="text" name="crosshairDto.horizontalLine.dashStyle">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={chartSeriesDashStyleOptions}
+                      isClearable={true}
+                      value={chartSeriesDashStyleOptions.filter(
+                        (option) => option.value === values.crosshairDto.horizontalLine.dashStyle,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label="Width"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.horizontalLine?.width &&
+                    touched.crosshairDto?.horizontalLine?.width
+                  )
+                }
+                errorMessage={errors.crosshairDto?.horizontalLine?.width}
+              >
+                <Field type="number" name="crosshairDto.horizontalLine.width" component={Input} />
+              </FormItem>
+            </Card>
+
+            <Card className="my-2" header="Crosshair Options - Label - Vertical Line">
+              <FormItem
+                label="Visible"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.verticalLine?.visible &&
+                    touched.crosshairDto?.verticalLine?.visible
+                  )
+                }
+                errorMessage={errors.crosshairDto?.verticalLine?.visible as string}
+              >
+                <Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Color"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.verticalLine?.color &&
+                    touched.crosshairDto?.verticalLine?.color
+                  )
+                }
+                errorMessage={errors.crosshairDto?.verticalLine?.color}
+              >
+                <Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Dash Style"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.verticalLine?.dashStyle &&
+                    touched.crosshairDto?.verticalLine?.dashStyle
+                  )
+                }
+                errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
+              >
+                <Field type="text" name="crosshairDto.verticalLine.dashStyle">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={chartSeriesDashStyleOptions}
+                      isClearable={true}
+                      value={chartSeriesDashStyleOptions.filter(
+                        (option) => option.value === values.crosshairDto.verticalLine.dashStyle,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label="Width"
+                invalid={
+                  !!(
+                    errors.crosshairDto?.verticalLine?.width &&
+                    touched.crosshairDto?.verticalLine?.width
+                  )
+                }
+                errorMessage={errors.crosshairDto?.verticalLine?.width}
+              >
+                <Field type="number" name="crosshairDto.verticalLine.width" component={Input} />
+              </FormItem>
+            </Card>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default ChartTabCrosshair

ui/src/views/admin/listForm/edit/ChartTabExport.tsx

@@ -0,0 +1,78 @@
+import { Button, Card, Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
+import { Field, Form, Formik } from 'formik'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store/store'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { object } from 'yup'
+
+const schema = object()
+
+function ChartTabExport(props: FormEditProps) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartExport, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Card className="my-2">
+              <FormItem
+                label="Enabled"
+                invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)}
+                errorMessage={errors.exportDto?.enabled as string}
+              >
+                <Field name="exportDto.enabled" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Printing Enabled"
+                invalid={
+                  !!(errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled)
+                }
+                errorMessage={errors.exportDto?.printingEnabled as string}
+              >
+                <Field name="exportDto.printingEnabled" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Background Color"
+                invalid={
+                  !!(errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor)
+                }
+                errorMessage={errors.exportDto?.backgroundColor}
+              >
+                <Field type="text" name="exportDto.backgroundColor" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Margin"
+                invalid={!!(errors.exportDto?.margin && touched.exportDto?.margin)}
+                errorMessage={errors.exportDto?.margin}
+              >
+                <Field type="number" name="exportDto.margin" component={Input} />
+              </FormItem>
+            </Card>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+export default ChartTabExport

ui/src/views/admin/listForm/edit/ChartTabLegend.tsx

@@ -0,0 +1,224 @@
+import {
+  Button,
+  Card,
+  Checkbox,
+  FormContainer,
+  FormItem,
+  Input,
+  Select,
+  Tabs,
+} from '@/components/ui'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store/store'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { object } from 'yup'
+import {
+  chartLegendOrientationListOptions,
+  chartLegendPositionListOptions,
+  chartSeriesDashStyleOptions,
+} from './options'
+
+const schema = object()
+
+function ChartTabLegend(props: FormEditProps) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartLegend, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Tabs defaultValue="legendSettings_general">
+              <TabList>
+                <TabNav value="legendSettings_general">General</TabNav>
+                <TabNav value="legendSettings_border">Border</TabNav>
+              </TabList>
+              <TabContent value="legendSettings_general">
+                <Card className="my-2">
+                  <FormItem
+                    label="Visible"
+                    invalid={!!(errors.legendDto?.visible && touched.legendDto?.visible)}
+                    errorMessage={errors.legendDto?.visible}
+                  >
+                    <Field name="legendDto.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Background Color"
+                    invalid={
+                      !!(errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor)
+                    }
+                    errorMessage={errors.legendDto?.backgroundColor}
+                  >
+                    <Field name="legendDto.backgroundColor" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Title"
+                    invalid={!!(errors.legendDto?.title && touched.legendDto?.title)}
+                    errorMessage={errors.legendDto?.title}
+                  >
+                    <Field name="legendDto.title" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Orientation"
+                    invalid={!!(errors.legendDto?.orientation && touched.legendDto?.orientation)}
+                    errorMessage={errors.legendDto?.orientation}
+                  >
+                    <Field type="text" name="legendDto.orientation">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartLegendOrientationListOptions}
+                          isClearable={true}
+                          value={chartLegendOrientationListOptions.filter(
+                            (option) => option.value === values.legendDto.orientation,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Position"
+                    invalid={!!(errors.legendDto?.position && touched.legendDto?.position)}
+                    errorMessage={errors.legendDto?.position}
+                  >
+                    <Field type="text" name="legendDto.position">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartLegendPositionListOptions}
+                          isClearable={true}
+                          value={chartLegendPositionListOptions.filter(
+                            (option) => option.value === values.legendDto.position,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Row Count"
+                    invalid={!!(errors.legendDto?.rowCount && touched.legendDto?.rowCount)}
+                    errorMessage={errors.legendDto?.rowCount}
+                  >
+                    <Field type="number" name="legendDto.rowCount" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Column Count"
+                    invalid={!!(errors.legendDto?.columnCount && touched.legendDto?.columnCount)}
+                    errorMessage={errors.legendDto?.columnCount}
+                  >
+                    <Field type="number" name="legendDto.columnCount" component={Input} />
+                  </FormItem>
+                </Card>
+              </TabContent>
+              <TabContent value="legendSettings_border">
+                <Card className="my-2">
+                  <FormItem
+                    label="Visible"
+                    invalid={
+                      !!(errors.legendDto?.border?.visible && touched.legendDto?.border?.visible)
+                    }
+                    errorMessage={errors.legendDto?.border?.visible}
+                  >
+                    <Field name="legendDto.border.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Color"
+                    invalid={
+                      !!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)
+                    }
+                    errorMessage={errors.legendDto?.border?.color}
+                  >
+                    <Field name="legendDto.border.color" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Dash Style"
+                    invalid={
+                      !!(
+                        errors.legendDto?.border?.dashStyle && touched.legendDto?.border?.dashStyle
+                      )
+                    }
+                    errorMessage={errors.legendDto?.border?.dashStyle}
+                  >
+                    <Field type="text" name="legendDto.border.dashStyle">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartSeriesDashStyleOptions}
+                          isClearable={true}
+                          value={chartSeriesDashStyleOptions.filter(
+                            (option) => option.value === values.legendDto.border.dashStyle,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={
+                      !!(errors.legendDto?.border?.width && touched.legendDto?.border?.width)
+                    }
+                    errorMessage={errors.legendDto?.border?.width}
+                  >
+                    <Field type="number" name="legendDto.border.width" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Corner Radius"
+                    invalid={
+                      !!(
+                        errors.legendDto?.border?.cornerRadius &&
+                        touched.legendDto?.border?.cornerRadius
+                      )
+                    }
+                    errorMessage={errors.legendDto?.border?.cornerRadius}
+                  >
+                    <Field type="number" name="legendDto.border.cornerRadius" component={Input} />
+                  </FormItem>
+                </Card>
+              </TabContent>
+            </Tabs>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default ChartTabLegend

ui/src/views/admin/listForm/edit/ChartTabPanes.tsx

@@ -0,0 +1,144 @@
+import { Button, Card, FormContainer, FormItem, Input, Table } from '@/components/ui'
+import TBody from '@/components/ui/Table/TBody'
+import THead from '@/components/ui/Table/THead'
+import Td from '@/components/ui/Table/Td'
+import Th from '@/components/ui/Table/Th'
+import Tr from '@/components/ui/Table/Tr'
+import { Field, Form, Formik } from 'formik'
+import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { useStoreState } from '@/store/store'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { object, string } from 'yup'
+
+const schema = object().shape({
+  name: string().required(),
+})
+
+function ChartTabPanes(
+  props: FormEditProps & { setDatabaseOperationsModalData: Function; setConfirmDelete: Function },
+) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartPanes, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Card className="my-2">
+              <FormItem
+                label="Background Color"
+                invalid={
+                  !!(
+                    errors.commonPaneSettingsDto?.backgroundColor &&
+                    touched.commonPaneSettingsDto?.backgroundColor
+                  )
+                }
+                errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
+              >
+                <Field type="text" name="commonPaneSettingsDto.backgroundColor" component={Input} />
+              </FormItem>
+            </Card>
+            <Card className="my-2" bodyClass="p-0">
+              <Table compact>
+                <THead>
+                  <Tr>
+                    <Th>
+                      <Button
+                        shape="circle"
+                        variant="plain"
+                        type="button"
+                        size="xs"
+                        title="Add"
+                        icon={<FaFileMedical />}
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          props.setDatabaseOperationsModalData({
+                            id: values.id ?? '',
+                            index: -1,
+                            isOpen: 'pane',
+                            operation: 'insert',
+                          })
+                        }}
+                      />
+                    </Th>
+                    <Th>Name</Th>
+                    <Th>Background Color</Th>
+                    <Th>Height</Th>
+                  </Tr>
+                </THead>
+                <TBody>
+                  {listFormValues.panesDto.map((row, index) => (
+                    <Tr key={index}>
+                      <Td>
+                        <div className="flex-wrap inline-flex xl:flex items-center gap-2">
+                          <Button
+                            shape="circle"
+                            variant="plain"
+                            type="button"
+                            size="xs"
+                            title="Edit"
+                            icon={<FaEdit />}
+                            onClick={async (e) => {
+                              e.preventDefault()
+                              props.setDatabaseOperationsModalData({
+                                id: values.id ?? '',
+                                index,
+                                isOpen: 'pane',
+                                operation: 'update',
+                                panesValues: listFormValues.panesDto[index],
+                              })
+                            }}
+                          />
+                          <Button
+                            shape="circle"
+                            variant="plain"
+                            type="button"
+                            size="xs"
+                            title="Delete"
+                            icon={<FaTrash />}
+                            onClick={async (e) => {
+                              e.preventDefault()
+                              props.setConfirmDelete({
+                                isOpen: true,
+                                id: values.id ?? '',
+                                fieldName: 'pane',
+                                index,
+                              })
+                            }}
+                          />
+                        </div>
+                      </Td>
+                      <Td>{row.name}</Td>
+                      <Td>{row.backgroundColor}</Td>
+                      <Td>{row.height}</Td>
+                    </Tr>
+                  ))}
+                </TBody>
+              </Table>
+            </Card>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default ChartTabPanes

ui/src/views/admin/listForm/edit/ChartTabSeries.tsx

@@ -0,0 +1,420 @@
+import {
+  Button,
+  Card,
+  Checkbox,
+  FormContainer,
+  FormItem,
+  Input,
+  Select,
+  Table,
+  Tabs,
+} from '@/components/ui'
+import TBody from '@/components/ui/Table/TBody'
+import THead from '@/components/ui/Table/THead'
+import Td from '@/components/ui/Table/Td'
+import Th from '@/components/ui/Table/Th'
+import Tr from '@/components/ui/Table/Tr'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import { ChartPanesDto, ChartValueAxisDto } from '@/proxy/charts/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store/store'
+import { object, string } from 'yup'
+import {
+  chartSeriesTypeOptions,
+  chartSeriesSelectionModeOptions,
+  chartSeriesDashStyleOptions,
+} from './options'
+
+const schema = object().shape({
+  name: string().required(),
+})
+
+function ChartTabSeries(
+  props: FormEditProps & { setDatabaseOperationsModalData: Function; setConfirmDelete: Function },
+) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  const valueAxisList = () => {
+    return listFormValues?.valueAxisDto.map((key: ChartValueAxisDto) => ({
+      value: key.name,
+      label: key.name,
+    }))
+  }
+
+  const valuePaneList = () => {
+    return listFormValues?.panesDto.map((key: ChartPanesDto) => ({
+      value: key.name,
+      label: key.name,
+    }))
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartSeries, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Tabs defaultValue="series_general">
+              <TabList>
+                <TabNav value="series_general">General</TabNav>
+                <TabNav value="series_common">Common Series Settings</TabNav>
+              </TabList>
+              <TabContent value="series_general">
+                <Card className="my-2" bodyClass="p-0">
+                  <Table compact>
+                    <THead>
+                      <Tr>
+                        <Th>
+                          <Button
+                            shape="circle"
+                            variant="plain"
+                            type="button"
+                            size="xs"
+                            title="Add"
+                            icon={<FaPlus />}
+                            onClick={async (e) => {
+                              e.preventDefault()
+                              props.setDatabaseOperationsModalData({
+                                id: values.id ?? '',
+                                index: -1,
+                                isOpen: 'serie',
+                                operation: 'insert',
+                              })
+                            }}
+                          />
+                        </Th>
+                        <Th>Type</Th>
+                        <Th>Name</Th>
+                        <Th>Argument Field</Th>
+                        <Th>Value Field</Th>
+                        <Th>Pane</Th>
+                        <Th>Axis</Th>
+                      </Tr>
+                    </THead>
+                    <TBody>
+                      {listFormValues.seriesDto.map((row, index) => (
+                        <Tr key={index}>
+                          <Td>
+                            <div className="flex-wrap inline-flex xl:flex items-center gap-2">
+                              <Button
+                                shape="circle"
+                                variant="plain"
+                                type="button"
+                                size="xs"
+                                title="Edit"
+                                icon={<FaEdit />}
+                                onClick={async (e) => {
+                                  e.preventDefault()
+                                  props.setDatabaseOperationsModalData({
+                                    id: values.id ?? '',
+                                    index,
+                                    isOpen: 'serie',
+                                    operation: 'update',
+                                    seriesValues: listFormValues.seriesDto[index],
+                                  })
+                                }}
+                              />
+                              <Button
+                                shape="circle"
+                                variant="plain"
+                                type="button"
+                                size="xs"
+                                title="Delete"
+                                icon={<FaTrash />}
+                                onClick={async (e) => {
+                                  e.preventDefault()
+                                  props.setConfirmDelete({
+                                    isOpen: true,
+                                    id: values.id ?? '',
+                                    fieldName: 'serie',
+                                    index,
+                                  })
+                                }}
+                              />
+                            </div>
+                          </Td>
+                          <Td>{row.type}</Td>
+                          <Td>{row.name}</Td>
+                          <Td>{row.argumentField}</Td>
+                          <Td>{row.valueField}</Td>
+                          <Td>{row.pane}</Td>
+                          <Td>{row.axis}</Td>
+                        </Tr>
+                      ))}
+                    </TBody>
+                  </Table>
+                </Card>
+              </TabContent>
+              <TabContent value="series_common">
+                <Card className="my-2">
+                  <FormItem
+                    label="Visible"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.visible &&
+                        touched.commonSeriesSettingsDto?.visible
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.visible}
+                  >
+                    <Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Show In Legend"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.showInLegend &&
+                        touched.commonSeriesSettingsDto?.showInLegend
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
+                  >
+                    <Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Ignore Empty Points"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
+                        touched.commonSeriesSettingsDto?.ignoreEmptyPoints
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
+                  >
+                    <Field name="commonSeriesSettingsDto.ignoreEmptyPoints" component={Checkbox} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Type"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.type &&
+                        touched.commonSeriesSettingsDto?.type
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.type}
+                  >
+                    <Field type="text" name="commonSeriesSettingsDto.type">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartSeriesTypeOptions}
+                          isClearable={true}
+                          value={chartSeriesTypeOptions.filter(
+                            (option) => option.value === values.commonSeriesSettingsDto.type,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Selection Mode"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.selectionMode &&
+                        touched.commonSeriesSettingsDto?.selectionMode
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
+                  >
+                    <Field type="text" name="commonSeriesSettingsDto.selectionMode">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartSeriesSelectionModeOptions}
+                          isClearable={true}
+                          value={chartSeriesSelectionModeOptions.filter(
+                            (option) =>
+                              option.value === values.commonSeriesSettingsDto.selectionMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Argument Field"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.argumentField &&
+                        touched.commonSeriesSettingsDto?.argumentField
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.argumentField}
+                  >
+                    <Field name="commonSeriesSettingsDto.argumentField" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Value Field"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.valueField &&
+                        touched.commonSeriesSettingsDto?.valueField
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.valueField}
+                  >
+                    <Field name="commonSeriesSettingsDto.valueField" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Axis"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.axis &&
+                        touched.commonSeriesSettingsDto?.axis
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.axis}
+                  >
+                    <Field type="text" name="commonSeriesSettingsDto.axis">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={valueAxisList()}
+                          isClearable={true}
+                          value={valueAxisList()?.find(
+                            (option) => option.value === values.commonSeriesSettingsDto.axis,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Pane"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.pane &&
+                        touched.commonSeriesSettingsDto?.pane
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.pane}
+                  >
+                    <Field type="text" name="commonSeriesSettingsDto.pane">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={valuePaneList()}
+                          isClearable={true}
+                          value={valuePaneList()?.find(
+                            (option) => option.value === values.commonSeriesSettingsDto.pane,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Color"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.color &&
+                        touched.commonSeriesSettingsDto?.color
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.color}
+                  >
+                    <Field name="commonSeriesSettingsDto.color" component={Input} />
+                  </FormItem>
+
+                  <FormItem
+                    label="Corner Radius"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.cornerRadius &&
+                        touched.commonSeriesSettingsDto?.cornerRadius
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
+                  >
+                    <Field
+                      type="number"
+                      name="commonSeriesSettingsDto.cornerRadius"
+                      component={Input}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label="Type"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.dashStyle &&
+                        touched.commonSeriesSettingsDto?.dashStyle
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
+                  >
+                    <Field type="text" name="commonSeriesSettingsDto.dashStyle">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartSeriesDashStyleOptions}
+                          isClearable={true}
+                          value={chartSeriesDashStyleOptions.filter(
+                            (option) => option.value === values.commonSeriesSettingsDto.dashStyle,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label="Width"
+                    invalid={
+                      !!(
+                        errors.commonSeriesSettingsDto?.width &&
+                        touched.commonSeriesSettingsDto?.width
+                      )
+                    }
+                    errorMessage={errors.commonSeriesSettingsDto?.width}
+                  >
+                    <Field type="number" name="commonSeriesSettingsDto.width" component={Input} />
+                  </FormItem>
+                </Card>
+              </TabContent>
+            </Tabs>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default ChartTabSeries

ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx

@@ -0,0 +1,171 @@
+import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import { FormEditProps } from '../../listForm/edit/FormEdit'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store/store'
+import { object } from 'yup'
+import { chartZoomAndPanAxisOptions, chartZoomAndPanKeyOptions } from './options'
+
+const schema = object()
+
+const ChartTabZoomAndPan = (props: FormEditProps) => {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Formik
+      initialValues={listFormValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await props.onSubmit(ListFormEditTabs.ChartZoom, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, resetForm, isSubmitting, values }) => (
+        <Form>
+          <FormContainer size="sm">
+            <Card className="my-2">
+              <FormItem
+                label="Allow Mouse Wheel"
+                invalid={
+                  !!(
+                    errors.zoomAndPanDto?.allowMouseWheel && touched.zoomAndPanDto?.allowMouseWheel
+                  )
+                }
+                errorMessage={errors.zoomAndPanDto?.allowMouseWheel as string}
+              >
+                <Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Allow Touch Gestures"
+                invalid={
+                  !!(
+                    errors.zoomAndPanDto?.allowTouchGestures &&
+                    touched.zoomAndPanDto?.allowTouchGestures
+                  )
+                }
+                errorMessage={errors.zoomAndPanDto?.allowTouchGestures as string}
+              >
+                <Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Drag To Zoom"
+                invalid={!!(errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom)}
+                errorMessage={errors.zoomAndPanDto?.dragToZoom as string}
+              >
+                <Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
+              </FormItem>
+
+              <FormItem
+                label="Argument Axis"
+                invalid={
+                  !!(errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis)
+                }
+                errorMessage={errors.zoomAndPanDto?.argumentAxis}
+              >
+                <Field type="text" name="zoomAndPanDto.argumentAxis">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={chartZoomAndPanAxisOptions}
+                      isClearable={true}
+                      value={chartZoomAndPanAxisOptions.filter(
+                        (option) => option.value === values.zoomAndPanDto.argumentAxis,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label="Value Axis"
+                invalid={!!(errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis)}
+                errorMessage={errors.zoomAndPanDto?.valueAxis}
+              >
+                <Field type="text" name="zoomAndPanDto.valueAxis">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={chartZoomAndPanAxisOptions}
+                      isClearable={true}
+                      value={chartZoomAndPanAxisOptions.filter(
+                        (option) => option.value === values.zoomAndPanDto.valueAxis,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label="Pan Key"
+                invalid={!!(errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey)}
+                errorMessage={errors.zoomAndPanDto?.panKey}
+              >
+                <Field type="text" name="zoomAndPanDto.panKey">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={chartZoomAndPanKeyOptions}
+                      isClearable={true}
+                      value={chartZoomAndPanKeyOptions.filter(
+                        (option) => option.value === values.zoomAndPanDto.panKey,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+            </Card>
+
+            <Card className="my-2" header="Zoom and Pan - DragBox Style">
+              <FormItem
+                label="Color"
+                invalid={
+                  !!(
+                    errors.zoomAndPanDto?.dragBoxStyle?.color &&
+                    touched.zoomAndPanDto?.dragBoxStyle?.color
+                  )
+                }
+                errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
+              >
+                <Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
+              </FormItem>
+
+              <FormItem
+                label="Opacity"
+                invalid={
+                  !!(
+                    errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
+                    touched.zoomAndPanDto?.dragBoxStyle?.opacity
+                  )
+                }
+                errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity as string}
+              >
+                <Field type="number" name="zoomAndPanDto.dragBoxStyle.opacity" component={Input} />
+              </FormItem>
+            </Card>
+            <div className="mt-4">
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </div>
+          </FormContainer>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default ChartTabZoomAndPan

ui/src/views/admin/listForm/edit/FormTabDetails.tsx

@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react'
 import * as Yup from 'yup'
 import { FormEditProps } from './FormEdit'
 import { listFormDefaultLayoutOptions, listFormTypeOptions } from './options'
+import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
 
 const schema = Yup.object().shape({
   cultureName: Yup.string().required('Culture Name Required'),
@@ -27,7 +28,9 @@ const schema = Yup.object().shape({
   }),
 })
 
-function FormTabDetails(props: FormEditProps) {
+function FormTabDetails(
+  props: FormEditProps & { roleList: SelectBoxOption[]; userList: SelectBoxOption[] },
+) {
   const [langOptions, setLangOptions] = useState<SelectBoxOption[]>([])
   const { translate } = useLocalization()
 
@@ -287,6 +290,44 @@ function FormTabDetails(props: FormEditProps) {
                 </FormItem>
               </div>
 
+              <FormItem
+                label="Role"
+                invalid={errors.roleId && touched.roleId}
+                errorMessage={errors.roleId}
+              >
+                <Field type="text" name="roleId">
+                  {({ field, form }: FieldProps<IdentityRoleDto>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={props.roleList}
+                      isClearable={true}
+                      value={props.roleList.filter((option) => option.value === values.roleId)}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label="User"
+                invalid={errors.userId && touched.userId}
+                errorMessage={errors.userId}
+              >
+                <Field type="text" name="userId">
+                  {({ field, form }: FieldProps<IdentityUserDto>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={props.userList}
+                      isClearable={true}
+                      value={props.userList.filter((option) => option.value === values.userId)}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
               <Button block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>

ui/src/views/admin/listForm/edit/FormTabPivots.tsx

@@ -7,7 +7,7 @@ import { Field, FieldProps, Form, Formik } from 'formik'
 import * as Yup from 'yup'
 import { FormEditProps } from './FormEdit'
 import { SelectBoxOption } from '@/shared/types'
-import { chartSeriesTypeOptions } from '../../chart/options'
+import { chartSeriesTypeOptions } from './options'
 
 const validationSchema = Yup.object().shape({})
 

ui/src/views/admin/listForm/edit/options.ts

@@ -200,6 +200,190 @@ export const listFormAlignmentOptions = [
   { value: 'right', label: 'Right' },
 ]
 
+export const chartPaletteOptions = [
+  { value: 'Bright', label: 'Bright' },
+  { value: 'Carmine', label: 'Carmine' },
+  { value: 'Dark Moon', label: 'Dark Moon' },
+  { value: 'Dark Violet', label: 'Dark Violet' },
+  { value: 'Green Mist', label: 'Green Mist' },
+  { value: 'Harmony Light', label: 'Harmony Light' },
+  { value: 'Material', label: 'Material' },
+  { value: 'Ocean', label: 'Ocean' },
+  { value: 'Office', label: 'Office' },
+  { value: 'Pastel', label: 'Pastel' },
+  { value: 'Soft', label: 'Soft' },
+  { value: 'Soft Blue', label: 'Soft Blue' },
+  { value: 'Soft Pastel', label: 'Soft Pastel' },
+  { value: 'Vintage', label: 'Vintage' },
+  { value: 'Violet', label: 'Violet' },
+]
+
+export const chartPaletteExtensionModeOptions = [
+  { value: 'alternate', label: 'Alternate' },
+  { value: 'blend', label: 'Blend' },
+  { value: 'extrapolate', label: 'Extrapolate' },
+]
+
+export const chartSeriesTypeOptions = [
+  { value: 'line', label: 'Line' },
+  { value: 'stepline', label: 'Stepline' },
+  { value: 'bar', label: 'Bar' },
+  { value: 'fullstackedbar', label: 'Fullstackedbar' },
+  { value: 'rangebar', label: 'Rangebar' },
+  { value: 'rangearea', label: 'Rangearea' },
+  { value: 'fullstackedarea', label: 'Fullstackedarea' },
+  { value: 'area', label: 'Area' },
+  { value: 'bubble', label: 'Bubble' },
+  { value: 'candlestick', label: 'Candlestick' },
+  { value: 'fullstackedline', label: 'Fullstackedline' },
+  { value: 'fullstackedspline', label: 'Fullstackedspline' },
+  { value: 'fullstackedsplinearea', label: 'Fullstackedsplinearea' },
+  { value: 'scatter', label: 'Scatter' },
+  { value: 'spline', label: 'Spline' },
+  { value: 'splinearea', label: 'Splinearea' },
+  { value: 'stackedarea', label: 'Stackedarea' },
+  { value: 'stackedbar', label: 'Stackedbar' },
+  { value: 'stackedline', label: 'Stackedline' },
+  { value: 'stackedspline', label: 'Stackedspline' },
+  { value: 'stackedsplinearea', label: 'Stackedsplinearea' },
+  { value: 'steparea', label: 'Steparea' },
+  { value: 'stock', label: 'Stock' },
+]
+
+export const chartSeriesSelectionModeOptions = [
+  { value: 'none', label: 'None' },
+  { value: 'allArgumentPoints', label: 'All Argument Points' },
+  { value: 'allSeriesPoints', label: 'All Series Points' },
+  { value: 'excludePoints', label: 'Exclude Points' },
+  { value: 'includePoints', label: 'Include Points' },
+  { value: 'onlyPoint', label: 'Only Point' },
+]
+
+export const chartSeriesDashStyleOptions = [
+  { value: 'dash', label: 'Dash' },
+  { value: 'solid', label: 'Dash Solid' },
+  { value: 'dot', label: 'Dot' },
+  { value: 'longDash', label: 'Long Dash' },
+]
+
+export const chartEasingListOptions = [
+  { value: 'linear', label: 'Linear' },
+  { value: 'easeOutCubic', label: 'Ease Out Cubic' },
+]
+
+export const chartArgumentAxisHoverModeListOptions = [
+  { value: 'none', label: 'None' },
+  { value: 'allArgumentPoints', label: 'All Argument Points' },
+]
+
+export const chartArgumentAxisTypeListOptions = [
+  { value: null, label: 'None' },
+  { value: 'numeric', label: 'Numeric' },
+  { value: 'datetime', label: 'Datetime' },
+  { value: 'string', label: 'String' },
+]
+
+export const chartArgumentAxisPositionListOptions = [
+  { value: 'bottom', label: 'Bottom' },
+  { value: 'left', label: 'Left' },
+  { value: 'right', label: 'Right' },
+  { value: 'top', label: 'Top' },
+]
+
+export const chartArgumentAxisIntervalListOptions = [
+  { value: 'millisecond', label: 'Millisecond' },
+  { value: 'second', label: 'Second' },
+  { value: 'minute', label: 'Minute' },
+  { value: 'hour', label: 'Hour' },
+  { value: 'day', label: 'Day' },
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+  { value: 'quarter', label: 'Quarter' },
+  { value: 'year', label: 'Year' },
+]
+
+export const chartArgumentAxisLabelDisplayModeListOptions = [
+  { value: 'rotate', label: 'Rotate' },
+  { value: 'stagger', label: 'Stagger' },
+  { value: 'standard', label: 'Standard' },
+]
+
+export const chartArgumentAxisLabelOverlappingBehaviorListOptions = [
+  { value: 'none', label: 'None' },
+  { value: 'hide', label: 'Hide' },
+  { value: 'standard', label: 'Standard' },
+  { value: 'stagger', label: 'Stagger' },
+]
+
+export const chartLegendOrientationListOptions = [
+  { value: 'horizontal', label: 'Horizontal' },
+  { value: 'vertical', label: 'Vertical' },
+]
+
+export const chartLegendPositionListOptions = [
+  { value: 'inside', label: 'Inside' },
+  { value: 'outside', label: 'Outside' },
+]
+
+export const chartTitleVerticalAlignmentListOptions = [
+  { value: 'bottom', label: 'Bottom' },
+  { value: 'top', label: 'Top' },
+]
+
+export const chartTitleHorizantalAlignmentListOptions = [
+  { value: 'center', label: 'Center' },
+  { value: 'left', label: 'Left' },
+  { value: 'right', label: 'Right' },
+]
+
+export const chartTitleTextOverFlowListOptions = [
+  { value: 'none', label: 'None' },
+  { value: 'ellipsis', label: 'Ellipsis' },
+  { value: 'hide', label: 'Hide' },
+]
+
+export const chartTitleWordWrapListOptions = [
+  { value: 'none', label: 'None' },
+  { value: 'normal', label: 'Normal' },
+  { value: 'breakWord', label: 'Break Word' },
+]
+
+export const chartTooltipLocationListOptions = [
+  { value: 'center', label: 'Center' },
+  { value: 'edge', label: 'Edge' },
+]
+
+export const chartZoomAndPanAxisOptions = [
+  { value: 'none', label: 'None' },
+  { value: 'edge', label: 'Both' },
+  { value: 'pan', label: 'Pan' },
+  { value: 'zoom', label: 'Zoom' },
+]
+
+export const chartZoomAndPanKeyOptions = [
+  { value: 'alt', label: 'Alt' },
+  { value: 'ctrl', label: 'Ctrl' },
+  { value: 'meta', label: 'Meta' },
+  { value: 'shift', label: 'Shift' },
+]
+
+export const chartAnnotationTypeListOptions = [
+  { value: 'text', label: 'Text' },
+  { value: 'image', label: 'Image' },
+  { value: 'custom', label: 'Custom' },
+]
+
+export const chartWordWrapListOptions = [
+  { value: 'none', label: 'None' },
+  { value: 'normal', label: 'Normal' },
+  { value: 'breakWord', label: 'Break Word' },
+]
+
+export const chartBreakStyleLineListOptions = [
+  { value: 'straight', label: 'Straight' },
+  { value: 'waved', label: 'Waved' },
+]
+
 export const dbSourceTypeOptions = enumToList(DbTypeEnum)
 export const dataSourceTypeOptions = enumToList(DataSourceTypeEnum)
 export const selectCommandTypeOptions = enumToList(SelectCommandTypeEnum)