From e74484fbc2a61b8cc38401cc910667ec61828965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Sat, 27 Sep 2025 02:40:39 +0300
Subject: [PATCH] =?UTF-8?q?listForm=20ve=20Chart=20birle=C5=9Ftirildi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ListForms/ListFormAutoMapperProfile.cs    |   3 +-
 api/src/Kurs.Platform.Domain/Queries/Break.cs |  17 +-
 .../Queries/BreakStyle.cs                     |  17 +-
 .../Queries/ChartAxisGrid.cs                  |  20 +-
 .../Kurs.Platform.Domain/Queries/ChartFont.cs |   3 +
 .../Queries/ChartLabel.cs                     |   3 +
 .../Queries/ChartSeries.cs                    |  25 +-
 .../Queries/ChartValueAxis.cs                 |  72 +--
 ui/src/proxy/admin/charts/models.ts           |   4 +-
 ui/src/proxy/admin/list-form/models.ts        |   4 +-
 ui/src/store/admin.model.ts                   |   2 +-
 .../listForm/edit/ChartTabAnnotations.tsx     |  15 +-
 .../admin/listForm/edit/ChartTabAxis.tsx      |   8 +-
 .../admin/listForm/edit/ChartTabPanes.tsx     |  10 +-
 .../admin/listForm/edit/ChartTabSeries.tsx    |   8 +-
 .../form-fields/FormFieldTabPivotSetting.tsx  |   1 -
 .../JsonRowOpDialogAnnotation.tsx             | 432 +++++++++---------
 .../JsonRowOpDialogAxis.tsx                   |  37 +-
 .../JsonRowOpDialogPane.tsx                   |   6 +-
 .../JsonRowOpDialogSeries.tsx                 |  36 +-
 20 files changed, 426 insertions(+), 297 deletions(-)

diff --git a/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs b/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
index e40f53bf..a192b93b 100644
--- a/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
@@ -28,7 +28,8 @@ public class ListFormAutoMapperProfile : Profile
         CreateMap<ExtraFilterEditDto, ExtraFilterDto>()
             .ForMember(dest => dest.Items, opt => opt.MapFrom(src => src.Items));
         CreateMap<ExtraFilterEditDto, ExtraFilter>().ReverseMap();
-        CreateMap<ChartSeriesDto, ChartSeries>();
+        CreateMap<ChartSeriesDto, ChartSeries>().ReverseMap();
+        CreateMap<ChartLabelDto, ChartLabel>();
 
         CreateMap<ChartValueAxisDto, ChartValueAxis>();
         CreateMap<ChartAxisGridDto, ChartAxisGrid>();
diff --git a/api/src/Kurs.Platform.Domain/Queries/Break.cs b/api/src/Kurs.Platform.Domain/Queries/Break.cs
index 8144124d..e5c98bc0 100644
--- a/api/src/Kurs.Platform.Domain/Queries/Break.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/Break.cs
@@ -1,16 +1,25 @@
 using System.Collections.Generic;
+using System.Text.Json.Serialization;
 using Volo.Abp.Domain.Values;
 
 namespace Kurs.Platform.Queries;
 
+/// <summary>
+/// Break tanımı
+/// </summary>
 public class Break : ValueObject
 {
-    public int EndValue { get; set; }
-    public int StartValue { get; set; }
+    [JsonPropertyName("StartValue")]
+    public int StartValue { get; private set; }
+
+    [JsonPropertyName("EndValue")]
+    public int EndValue { get; private set; }
+
+    protected Break() { } // Json buradan set edecek
 
     protected override IEnumerable<object> GetAtomicValues()
     {
-        yield return EndValue;
         yield return StartValue;
+        yield return EndValue;
     }
-}
+}
\ No newline at end of file
diff --git a/api/src/Kurs.Platform.Domain/Queries/BreakStyle.cs b/api/src/Kurs.Platform.Domain/Queries/BreakStyle.cs
index bcddc75c..983e0208 100644
--- a/api/src/Kurs.Platform.Domain/Queries/BreakStyle.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/BreakStyle.cs
@@ -1,13 +1,24 @@
 using System.Collections.Generic;
+using System.Text.Json.Serialization;
 using Volo.Abp.Domain.Values;
 
 namespace Kurs.Platform.Queries;
 
+/// <summary>
+/// Break style tanımı
+/// </summary>
 public class BreakStyle : ValueObject
 {
-    public string Color { get; private set; } = "#ababab";
-    public string Line { get; private set; } = "waved";
-    public int Width { get; private set; } = 5;
+    [JsonPropertyName("Color")]
+    public string Color { get; private set; }
+
+    [JsonPropertyName("Line")]
+    public string Line { get; private set; }
+
+    [JsonPropertyName("Width")]
+    public int Width { get; private set; }
+
+    protected BreakStyle() { }
 
     protected override IEnumerable<object> GetAtomicValues()
     {
diff --git a/api/src/Kurs.Platform.Domain/Queries/ChartAxisGrid.cs b/api/src/Kurs.Platform.Domain/Queries/ChartAxisGrid.cs
index b58b3091..08cdecf2 100644
--- a/api/src/Kurs.Platform.Domain/Queries/ChartAxisGrid.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/ChartAxisGrid.cs
@@ -1,22 +1,24 @@
 using System.Collections.Generic;
+using System.Text.Json.Serialization;
 using Volo.Abp.Domain.Values;
 
 namespace Kurs.Platform.Queries;
 
+/// <summary>
+/// Grid tanımı
+/// </summary>
 public class ChartAxisGrid : ValueObject
 {
-    public string Color { get; private set; } = "#d3d3d3";
+    [JsonPropertyName("Color")]
+    public string Color { get; private set; }
+
+    [JsonPropertyName("Visible")]
     public bool Visible { get; private set; }
-    public int Width { get; private set; } = 1;
 
-    private ChartAxisGrid() { } // EF Core için gerekli
+    [JsonPropertyName("Width")]
+    public int Width { get; private set; }
 
-    public ChartAxisGrid(string color, bool visible, int width)
-    {
-        Color = string.IsNullOrWhiteSpace(color) ? "#d3d3d3" : color;
-        Visible = visible;
-        Width = width > 0 ? width : 1;
-    }
+    protected ChartAxisGrid() { }
 
     protected override IEnumerable<object> GetAtomicValues()
     {
diff --git a/api/src/Kurs.Platform.Domain/Queries/ChartFont.cs b/api/src/Kurs.Platform.Domain/Queries/ChartFont.cs
index c26d7b42..5613e094 100644
--- a/api/src/Kurs.Platform.Domain/Queries/ChartFont.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/ChartFont.cs
@@ -10,6 +10,9 @@ public class ChartFont : ValueObject
     public int Size { get; private set; } = 12;
     public int Weight { get; private set; } = 400;
 
+    // EF Core + JSON için korumalı ctor
+    protected ChartFont() { }
+
     protected override IEnumerable<object> GetAtomicValues()
     {
         yield return Color;
diff --git a/api/src/Kurs.Platform.Domain/Queries/ChartLabel.cs b/api/src/Kurs.Platform.Domain/Queries/ChartLabel.cs
index 978f0879..31660d0a 100644
--- a/api/src/Kurs.Platform.Domain/Queries/ChartLabel.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/ChartLabel.cs
@@ -11,6 +11,9 @@ public class ChartLabel : ValueObject
     public bool Visible { get; private set; }
     public string Format { get; private set; }
 
+    // EF Core + JSON için korumalı ctor
+    protected ChartLabel() { }
+
     protected override IEnumerable<object> GetAtomicValues()
     {
         yield return BackgroundColor;
diff --git a/api/src/Kurs.Platform.Domain/Queries/ChartSeries.cs b/api/src/Kurs.Platform.Domain/Queries/ChartSeries.cs
index f1cfd69b..a683e23d 100644
--- a/api/src/Kurs.Platform.Domain/Queries/ChartSeries.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/ChartSeries.cs
@@ -1,32 +1,55 @@
 using System.Collections.Generic;
+using System.Text.Json.Serialization;
 using Volo.Abp.Domain.Values;
 
 namespace Kurs.Platform.Queries;
 
 public class ChartSeries : ValueObject
 {
+    [JsonPropertyName("ArgumentField")]
     public string ArgumentField { get; private set; } = "arg";
+    [JsonPropertyName("Axis")]
     public string Axis { get; private set; }
+    [JsonPropertyName("BarOverlapGroup")]
     public string BarOverlapGroup { get; private set; }
+    [JsonPropertyName("BarPadding")]
     public int BarPadding { get; private set; }
+    [JsonPropertyName("BarWidth")]
     public int BarWidth { get; private set; }
+    [JsonPropertyName("Color")]
     public string Color { get; private set; }
+    [JsonPropertyName("CornerRadius")]
     public int CornerRadius { get; private set; } = 0;
+    [JsonPropertyName("DashStyle")]
     public string DashStyle { get; private set; } = "solid";
+    [JsonPropertyName("IgnoreEmptyPoints")]
     public bool IgnoreEmptyPoints { get; private set; } = false;
+    [JsonPropertyName("Name")]
     public string Name { get; private set; }
+    [JsonPropertyName("Pane")]
     public string Pane { get; private set; }
+    [JsonPropertyName("RangeValue1Field")]
     public string RangeValue1Field { get; private set; } = "val1";
+    [JsonPropertyName("RangeValue2Field")]
     public string RangeValue2Field { get; private set; } = "val2";
+    [JsonPropertyName("SelectionMode")]
     public string SelectionMode { get; private set; } = "none";
+    [JsonPropertyName("ShowInLegend")]
     public bool ShowInLegend { get; private set; } = true;
+    [JsonPropertyName("Type")]
     public string Type { get; private set; }
+    [JsonPropertyName("ValueField")]
     public string ValueField { get; private set; }
+    [JsonPropertyName("Visible")]
     public bool Visible { get; private set; } = true;
+    [JsonPropertyName("Width")]
     public int Width { get; private set; } = 2;
-
+    [JsonPropertyName("Label")]
     public ChartLabel Label { get; private set; }
 
+    // EF Core + JSON için korumalı ctor
+    public  ChartSeries() { }
+
     protected override IEnumerable<object> GetAtomicValues()
     {
         yield return ArgumentField;
diff --git a/api/src/Kurs.Platform.Domain/Queries/ChartValueAxis.cs b/api/src/Kurs.Platform.Domain/Queries/ChartValueAxis.cs
index ab377462..40977f61 100644
--- a/api/src/Kurs.Platform.Domain/Queries/ChartValueAxis.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/ChartValueAxis.cs
@@ -1,53 +1,61 @@
 using System.Collections.Generic;
 using System.Linq;
+using System.Text.Json.Serialization;
 using Volo.Abp.Domain.Values;
 
 namespace Kurs.Platform.Queries;
 
 public class ChartValueAxis : ValueObject
 {
+    [JsonPropertyName("Grid")]
     public ChartAxisGrid Grid { get; private set; }
+
+    [JsonPropertyName("Name")]
     public string Name { get; private set; }
-    public string Position { get; private set; } = "left";
+
+    [JsonPropertyName("Position")]
+    public string Position { get; private set; }
+
+    [JsonPropertyName("Title")]
     public string Title { get; private set; }
-    public string ValueType { get; private set; } = "numeric";
-    public bool Visible { get; private set; } = true;
-    public int Width { get; private set; } = 1;
+
+    [JsonPropertyName("ValueType")]
+    public string ValueType { get; private set; }
+
+    [JsonPropertyName("Visible")]
+    public bool Visible { get; private set; }
+
+    [JsonPropertyName("Width")]
+    public int Width { get; private set; }
+
+    [JsonPropertyName("Breaks")]
     public IReadOnlyCollection<Break> Breaks { get; private set; }
+
+    [JsonPropertyName("BreakStyle")]
     public BreakStyle BreakStyle { get; private set; }
+
+    [JsonPropertyName("Type")]
     public string Type { get; private set; }
-    public bool AutoBreaksEnabled { get; private set; } = true;
-    public int MaxAutoBreakCount { get; private set; } = 2;
 
-    public ChartValueAxis(
-        ChartAxisGrid grid,
-        string name,
-        string position,
-        string title,
-        string valueType,
-        bool visible,
-        int width,
-        IEnumerable<Break> breaks,
-        BreakStyle breakStyle,
-        string type,
-        bool autoBreaksEnabled,
-        int maxAutoBreakCount)
+    [JsonPropertyName("AutoBreaksEnabled")]
+    public bool AutoBreaksEnabled { get; private set; }
+
+    [JsonPropertyName("MaxAutoBreakCount")]
+    public int MaxAutoBreakCount { get; private set; }
+
+    // 🔑 Bunu bırak yeterli
+    [JsonConstructor]
+    protected ChartValueAxis()
     {
-        Grid = grid;
-        Name = name;
-        Position = position ?? "left";
-        Title = title;
-        ValueType = valueType ?? "numeric";
-        Visible = visible;
-        Width = width > 0 ? width : 1;
-        Breaks = breaks?.ToList() ?? [];
-        BreakStyle = breakStyle;
-        Type = type;
-        AutoBreaksEnabled = autoBreaksEnabled;
-        MaxAutoBreakCount = maxAutoBreakCount;
+        Breaks = [];
+        Position = "left";
+        ValueType = "numeric";
+        Visible = true;
+        Width = 1;
+        AutoBreaksEnabled = true;
+        MaxAutoBreakCount = 2;
     }
 
-
     protected override IEnumerable<object> GetAtomicValues()
     {
         yield return Grid;
diff --git a/ui/src/proxy/admin/charts/models.ts b/ui/src/proxy/admin/charts/models.ts
index 0efeaa22..47aa7382 100644
--- a/ui/src/proxy/admin/charts/models.ts
+++ b/ui/src/proxy/admin/charts/models.ts
@@ -257,7 +257,7 @@ export interface ChartFontDto {
 export interface ChartLabelDto {
   backgroundColor?: string
   customizeText?: string
-  font: ChartFontDto
+  font?: ChartFontDto | null
   visible: boolean
   format?: string
 }
@@ -285,9 +285,9 @@ export interface ChartOptionsRequestDto {
 }
 
 export interface ChartPanesDto {
+  name: string
   backgroundColor?: string
   height: number
-  name?: string
 }
 
 export interface ChartScrollBarDto {
diff --git a/ui/src/proxy/admin/list-form/models.ts b/ui/src/proxy/admin/list-form/models.ts
index 26aeaac5..ca33a1ef 100644
--- a/ui/src/proxy/admin/list-form/models.ts
+++ b/ui/src/proxy/admin/list-form/models.ts
@@ -47,8 +47,8 @@ export interface ListFormJsonRowDto {
   itemExtraFilter?: ExtraFilterEditDto
 
   itemChartAnnotation?: ChartAnnotationDto
-  itemChartPane?: ChartPanesDto
-  itemChartSerie?: ChartSeriesDto
+  itemChartPanes?: ChartPanesDto
+  itemChartSeries?: ChartSeriesDto
   itemChartValueAxis?: ChartValueAxisDto
 }
 
diff --git a/ui/src/store/admin.model.ts b/ui/src/store/admin.model.ts
index 18ee9511..13fdd032 100644
--- a/ui/src/store/admin.model.ts
+++ b/ui/src/store/admin.model.ts
@@ -12,7 +12,7 @@ export interface AdminStoreActions {
   setListFormValues: Action<AdminStoreModel, GridOptionsEditDto>
   setJsonValue: Action<
     AdminStoreModel,
-    { field: keyof GridOptionsEditDto; data: FieldsDefaultValueDto[] }
+    { field: keyof GridOptionsEditDto; data: any[] }
   >
   getListFormValues: Thunk<AdminStoreActions, string | undefined, Injections>
   // onSetLang: ThunkOn<AdminModel, Injections, StoreModel>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx b/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
index 1c2dade8..89fe41c9 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
@@ -33,6 +33,7 @@ import {
 import { ChartSeriesDto } from '@/proxy/admin/charts/models'
 import { JsonRowDialogData } from './json-row-operations/types'
 import { useState } from 'react'
+import JsonRowOpDialogAnnotation from './json-row-operations/JsonRowOpDialogAnnotation'
 
 const schema = object().shape({
   name: string().required(),
@@ -93,7 +94,7 @@ function ChartTabAnnotations(props: FormEditProps) {
                               setJsonRowOpModalData({
                                 tabName: ListFormEditTabs.ChartAnnotations.GeneralJsonRow,
                                 operation: 'create',
-                                id: values.id ?? '',
+                                id: listFormValues.id ?? '',
                                 index: -1,
                               })
                               setIsJsonRowOpDialogOpen(true)
@@ -124,9 +125,9 @@ function ChartTabAnnotations(props: FormEditProps) {
                                   setJsonRowOpModalData({
                                     tabName: ListFormEditTabs.ChartAnnotations.GeneralJsonRow,
                                     operation: 'update',
-                                    id: values.id ?? '',
+                                    id: listFormValues.id ?? '',
                                     index,
-                                    chartAnnotationValues: values.annotationsDto[index],
+                                    chartAnnotationValues: listFormValues.annotationsDto[index],
                                   })
                                   setIsJsonRowOpDialogOpen(true)
                                 }}
@@ -142,7 +143,7 @@ function ChartTabAnnotations(props: FormEditProps) {
                                   setJsonRowOpModalData({
                                     tabName: ListFormEditTabs.ChartAnnotations.GeneralJsonRow,
                                     operation: 'delete',
-                                    id: values.id ?? '',
+                                    id: listFormValues.id ?? '',
                                     index,
                                   })
                                   setIsJsonRowOpDialogOpen(true)
@@ -161,6 +162,12 @@ function ChartTabAnnotations(props: FormEditProps) {
                     </TBody>
                   </Table>
                 </Card>
+                <JsonRowOpDialogAnnotation
+                  isOpen={isJsonRowOpDialogOpen}
+                  setIsOpen={setIsJsonRowOpDialogOpen}
+                  data={jsonRowOpModalData}
+                  setData={setJsonRowOpModalData}
+                />
               </TabContent>
               <TabContent value="annotations_common">
                 <Card className="my-2">
diff --git a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
index 8edf5bd1..99eb9822 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
@@ -87,7 +87,7 @@ function ChartTabAxis(props: FormEditProps) {
                               setJsonRowOpModalData({
                                 tabName: ListFormEditTabs.ChartAxis.ValueAxisJsonRow,
                                 operation: 'create',
-                                id: values.id ?? '',
+                                id: listFormValues.id ?? '',
                                 index: -1,
                               })
                               setIsJsonRowOpDialogOpen(true)
@@ -118,9 +118,9 @@ function ChartTabAxis(props: FormEditProps) {
                                   setJsonRowOpModalData({
                                     tabName: ListFormEditTabs.ChartAxis.ValueAxisJsonRow,
                                     operation: 'update',
-                                    id: values.id ?? '',
+                                    id: listFormValues.id ?? '',
                                     index,
-                                    chartValueAxisValues: values.valueAxisDto[index],
+                                    chartValueAxisValues: listFormValues.valueAxisDto[index],
                                   })
                                   setIsJsonRowOpDialogOpen(true)
                                 }}
@@ -136,7 +136,7 @@ function ChartTabAxis(props: FormEditProps) {
                                   setJsonRowOpModalData({
                                     tabName: ListFormEditTabs.ChartAxis.ValueAxisJsonRow,
                                     operation: 'delete',
-                                    id: values.id ?? '',
+                                    id: listFormValues.id ?? '',
                                     index,
                                   })
                                   setIsJsonRowOpDialogOpen(true)
diff --git a/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx b/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
index f354af7d..6b696666 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
@@ -16,6 +16,8 @@ import { useState } from 'react'
 import JsonRowOpDialogPane from './json-row-operations/JsonRowOpDialogPane'
 
 const schema = object().shape({
+  height: string().required('Height Required'),
+  name: string().required('Name Required'),
   backgroundColor: string().notRequired(),
 })
 
@@ -75,7 +77,7 @@ function ChartTabPanes(props: FormEditProps) {
                           setJsonRowOpModalData({
                             tabName: ListFormEditTabs.ChartPanes.PanesJsonRow,
                             operation: 'create',
-                            id: values.id ?? '',
+                            id: listFormValues.id ?? '',
                             index: -1,
                           })
                           setIsJsonRowOpDialogOpen(true)
@@ -103,9 +105,9 @@ function ChartTabPanes(props: FormEditProps) {
                               setJsonRowOpModalData({
                                 tabName: ListFormEditTabs.ChartPanes.PanesJsonRow,
                                 operation: 'update',
-                                id: values.id ?? '',
+                                id: listFormValues.id ?? '',
                                 index,
-                                chartPaneValues: values.panesDto[index],
+                                chartPaneValues: listFormValues.panesDto[index],
                               })
                               setIsJsonRowOpDialogOpen(true)
                             }}
@@ -121,7 +123,7 @@ function ChartTabPanes(props: FormEditProps) {
                               setJsonRowOpModalData({
                                 tabName: ListFormEditTabs.ChartPanes.PanesJsonRow,
                                 operation: 'delete',
-                                id: values.id ?? '',
+                                id: listFormValues.id ?? '',
                                 index,
                               })
                               setIsJsonRowOpDialogOpen(true)
diff --git a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
index ec75a3dc..aedf6af2 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
@@ -101,7 +101,7 @@ function ChartTabSeries(props: FormEditProps) {
                               setJsonRowOpModalData({
                                 tabName: ListFormEditTabs.ChartSeries.GeneralJsonRow,
                                 operation: 'create',
-                                id: values.id ?? '',
+                                id: listFormValues.id ?? '',
                                 index: -1,
                               })
                               setIsJsonRowOpDialogOpen(true)
@@ -132,9 +132,9 @@ function ChartTabSeries(props: FormEditProps) {
                                   setJsonRowOpModalData({
                                     tabName: ListFormEditTabs.ChartSeries.GeneralJsonRow,
                                     operation: 'update',
-                                    id: values.id ?? '',
+                                    id: listFormValues.id ?? '',
                                     index,
-                                    chartSeriesValues: values.seriesDto[index],
+                                    chartSeriesValues: listFormValues.seriesDto[index],
                                   })
                                   setIsJsonRowOpDialogOpen(true)
                                 }}
@@ -150,7 +150,7 @@ function ChartTabSeries(props: FormEditProps) {
                                   setJsonRowOpModalData({
                                     tabName: ListFormEditTabs.ChartSeries.GeneralJsonRow,
                                     operation: 'delete',
-                                    id: values.id ?? '',
+                                    id: listFormValues.id ?? '',
                                     index,
                                   })
                                   setIsJsonRowOpDialogOpen(true)
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
index 1e477ec9..3e7ee1b6 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
@@ -45,7 +45,6 @@ function FormFieldTabPivotSetting({
         initialValues={initialValues}
         validationSchema={schema}
         onSubmit={async (values, formikHelpers) => {
-          //console.log(values)
           await onSubmit(ListFormFieldEditTabs.PivotSettingsForm, values, formikHelpers)
         }}
       >
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
index c7533420..2a88fd45 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
@@ -79,7 +79,7 @@ function JsonRowOpDialogAnnotation({
 
     if (data) {
       const resp = await getListFormJsonRow(data.id, data.tabName)
-      setJsonValue({ field: 'panesDto', data: resp.data })
+      setJsonValue({ field: 'annotationsDto', data: resp.data })
     }
 
     setData(undefined)
@@ -92,7 +92,7 @@ function JsonRowOpDialogAnnotation({
 
   return (
     <Dialog
-      id="paneOperation"
+      id="annotationOperation"
       isOpen={isOpen}
       preventScroll={true}
       onClose={handleClose}
@@ -182,234 +182,252 @@ function JsonRowOpDialogAnnotation({
                         <TabNav value="annotations_border">Border</TabNav>
                       </TabList>
                       <TabContent value="annotations_general">
-                        <FormItem
-                          label="Tooltip Enabled"
-                          invalid={errors.tooltipEnabled && touched.tooltipEnabled}
-                          errorMessage={errors.tooltipEnabled}
-                        >
-                          <Field name="tooltipEnabled" component={Checkbox} />
-                        </FormItem>
+                        <div className="p-2">
+                          <FormItem
+                            label="Tooltip Enabled"
+                            invalid={errors.tooltipEnabled && touched.tooltipEnabled}
+                            errorMessage={errors.tooltipEnabled}
+                          >
+                            <Field name="tooltipEnabled" component={Checkbox} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Type"
-                          invalid={errors.type && touched.type}
-                          errorMessage={errors.type}
-                        >
-                          <Field type="text" name="type">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartAnnotationTypeListOptions}
-                                isClearable={true}
-                                value={chartAnnotationTypeListOptions.filter(
-                                  (option) => option.value === values.type,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
+                          <FormItem
+                            label="Type"
+                            invalid={errors.type && touched.type}
+                            errorMessage={errors.type}
+                          >
+                            <Field type="text" name="type">
+                              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                                <Select
+                                  field={field}
+                                  form={form}
+                                  options={chartAnnotationTypeListOptions}
+                                  isClearable={true}
+                                  value={chartAnnotationTypeListOptions.filter(
+                                    (option) => option.value === values.type,
+                                  )}
+                                  onChange={(option) =>
+                                    form.setFieldValue(field.name, option?.value)
+                                  }
+                                />
+                              )}
+                            </Field>
+                          </FormItem>
 
-                        <FormItem
-                          label="Series"
-                          invalid={errors.series && touched.series}
-                          errorMessage={errors.series}
-                        >
-                          <Field type="text" name="type">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                isClearable={true}
-                                // options={SeriesList()}
-                                // value={SeriesList()?.find(
-                                //   (option) => option.value === values.series,
-                                // )}
-                                // onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
+                          <FormItem
+                            label="Series"
+                            invalid={errors.series && touched.series}
+                            errorMessage={errors.series}
+                          >
+                            <Field type="text" name="type">
+                              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                                <Select
+                                  field={field}
+                                  form={form}
+                                  isClearable={true}
+                                  // options={SeriesList()}
+                                  // value={SeriesList()?.find(
+                                  //   (option) => option.value === values.series,
+                                  // )}
+                                  // onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                                />
+                              )}
+                            </Field>
+                          </FormItem>
 
-                        <FormItem
-                          label="Name"
-                          invalid={errors.name && touched.name}
-                          errorMessage={errors.name}
-                        >
-                          <Field type="text" name="name" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Name"
+                            invalid={errors.name && touched.name}
+                            errorMessage={errors.name}
+                          >
+                            <Field type="text" name="name" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Text"
-                          invalid={errors.text && touched.text}
-                          errorMessage={errors.text}
-                        >
-                          <Field type="text" name="text" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Text"
+                            invalid={errors.text && touched.text}
+                            errorMessage={errors.text}
+                          >
+                            <Field type="text" name="text" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Value"
-                          invalid={errors.value && touched.value}
-                          errorMessage={errors.value}
-                        >
-                          <Field type="text" name="value" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Value"
+                            invalid={errors.value && touched.value}
+                            errorMessage={errors.value}
+                          >
+                            <Field type="text" name="value" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Argument"
-                          invalid={errors.argument && touched.argument}
-                          errorMessage={errors.argument}
-                        >
-                          <Field name="argument" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Argument"
+                            invalid={errors.argument && touched.argument}
+                            errorMessage={errors.argument}
+                          >
+                            <Field name="argument" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Color"
-                          invalid={errors.color && touched.color}
-                          errorMessage={errors.color}
-                        >
-                          <Field type="text" name="color" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Color"
+                            invalid={errors.color && touched.color}
+                            errorMessage={errors.color}
+                          >
+                            <Field type="text" name="color" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Word Wrap"
-                          invalid={errors.wordWrap && touched.wordWrap}
-                          errorMessage={errors.wordWrap}
-                        >
-                          <Field type="text" name="wordWrap">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartTitleWordWrapListOptions}
-                                isClearable={true}
-                                value={chartTitleWordWrapListOptions.filter(
-                                  (option) => option.value === values.wordWrap,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
+                          <FormItem
+                            label="Word Wrap"
+                            invalid={errors.wordWrap && touched.wordWrap}
+                            errorMessage={errors.wordWrap}
+                          >
+                            <Field type="text" name="wordWrap">
+                              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                                <Select
+                                  field={field}
+                                  form={form}
+                                  options={chartTitleWordWrapListOptions}
+                                  isClearable={true}
+                                  value={chartTitleWordWrapListOptions.filter(
+                                    (option) => option.value === values.wordWrap,
+                                  )}
+                                  onChange={(option) =>
+                                    form.setFieldValue(field.name, option?.value)
+                                  }
+                                />
+                              )}
+                            </Field>
+                          </FormItem>
 
-                        <FormItem
-                          label="Description"
-                          invalid={errors.description && touched.description}
-                          errorMessage={errors.description}
-                        >
-                          <Field type="text" name="description" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Description"
+                            invalid={errors.description && touched.description}
+                            errorMessage={errors.description}
+                          >
+                            <Field type="text" name="description" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Image"
-                          invalid={errors.image && touched.image}
-                          errorMessage={errors.image}
-                        >
-                          <Field type="text" name="image" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Image"
+                            invalid={errors.image && touched.image}
+                            errorMessage={errors.image}
+                          >
+                            <Field type="text" name="image" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Width"
-                          invalid={errors.width && touched.width}
-                          errorMessage={errors.width}
-                        >
-                          <Field type="number" name="width" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Width"
+                            invalid={errors.width && touched.width}
+                            errorMessage={errors.width}
+                          >
+                            <Field type="number" name="width" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Height"
-                          invalid={errors.height && touched.height}
-                          errorMessage={errors.height}
-                        >
-                          <Field type="number" name="height" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Height"
+                            invalid={errors.height && touched.height}
+                            errorMessage={errors.height}
+                          >
+                            <Field type="number" name="height" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Padding Left/Right"
-                          invalid={errors.paddingLeftRight && touched.paddingLeftRight}
-                          errorMessage={errors.paddingLeftRight}
-                        >
-                          <Field type="number" name="paddingLeftRight" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Padding Left/Right"
+                            invalid={errors.paddingLeftRight && touched.paddingLeftRight}
+                            errorMessage={errors.paddingLeftRight}
+                          >
+                            <Field type="number" name="paddingLeftRight" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Padding Top/Bottom"
-                          invalid={errors.paddingTopBottom && touched.paddingTopBottom}
-                          errorMessage={errors.paddingTopBottom}
-                        >
-                          <Field type="number" name="paddingTopBottom" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Padding Top/Bottom"
+                            invalid={errors.paddingTopBottom && touched.paddingTopBottom}
+                            errorMessage={errors.paddingTopBottom}
+                          >
+                            <Field type="number" name="paddingTopBottom" component={Input} />
+                          </FormItem>
 
-                        <FormItem label="X" invalid={errors.x && touched.x} errorMessage={errors.x}>
-                          <Field type="number" name="x" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="X"
+                            invalid={errors.x && touched.x}
+                            errorMessage={errors.x}
+                          >
+                            <Field type="number" name="x" component={Input} />
+                          </FormItem>
 
-                        <FormItem label="Y" invalid={errors.y && touched.y} errorMessage={errors.y}>
-                          <Field type="number" name="y" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Y"
+                            invalid={errors.y && touched.y}
+                            errorMessage={errors.y}
+                          >
+                            <Field type="number" name="y" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="OffsetX"
-                          invalid={errors.offsetX && touched.offsetX}
-                          errorMessage={errors.offsetX}
-                        >
-                          <Field type="number" name="offsetX" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="OffsetX"
+                            invalid={errors.offsetX && touched.offsetX}
+                            errorMessage={errors.offsetX}
+                          >
+                            <Field type="number" name="offsetX" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="OffsetY"
-                          invalid={errors.offsetY && touched.offsetY}
-                          errorMessage={errors.offsetY}
-                        >
-                          <Field type="number" name="offsetY" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="OffsetY"
+                            invalid={errors.offsetY && touched.offsetY}
+                            errorMessage={errors.offsetY}
+                          >
+                            <Field type="number" name="offsetY" component={Input} />
+                          </FormItem>
+                        </div>
                       </TabContent>
                       <TabContent value="annotations_border">
-                        <FormItem
-                          label="Visible"
-                          invalid={errors.border?.visible && touched.border?.visible}
-                          errorMessage={errors.border?.visible}
-                        >
-                          <Field name="border.visible" component={Checkbox} />
-                        </FormItem>
+                        <div className="p-2">
+                          <FormItem
+                            label="Visible"
+                            invalid={errors.border?.visible && touched.border?.visible}
+                            errorMessage={errors.border?.visible}
+                          >
+                            <Field name="border.visible" component={Checkbox} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Color"
-                          invalid={errors.border?.color && touched.border?.color}
-                          errorMessage={errors.border?.color}
-                        >
-                          <Field type="text" name="border.color" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Color"
+                            invalid={errors.border?.color && touched.border?.color}
+                            errorMessage={errors.border?.color}
+                          >
+                            <Field type="text" name="border.color" component={Input} />
+                          </FormItem>
 
-                        <FormItem
-                          label="Dash Style"
-                          invalid={errors.border?.dashStyle && touched.border?.dashStyle}
-                          errorMessage={errors.border?.dashStyle}
-                        >
-                          <Field type="text" name="border.dashStyle">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartSeriesDashStyleOptions}
-                                isClearable={true}
-                                value={chartSeriesDashStyleOptions.filter(
-                                  (option) => option.value === values.border.dashStyle,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
+                          <FormItem
+                            label="Dash Style"
+                            invalid={errors.border?.dashStyle && touched.border?.dashStyle}
+                            errorMessage={errors.border?.dashStyle}
+                          >
+                            <Field type="text" name="border.dashStyle">
+                              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                                <Select
+                                  field={field}
+                                  form={form}
+                                  options={chartSeriesDashStyleOptions}
+                                  isClearable={true}
+                                  value={chartSeriesDashStyleOptions.filter(
+                                    (option) => option.value === values.border.dashStyle,
+                                  )}
+                                  onChange={(option) =>
+                                    form.setFieldValue(field.name, option?.value)
+                                  }
+                                />
+                              )}
+                            </Field>
+                          </FormItem>
 
-                        <FormItem
-                          label="Width"
-                          invalid={errors.border?.width && touched.border?.width}
-                          errorMessage={errors.border?.width}
-                        >
-                          <Field type="number" name="border.width" component={Input} />
-                        </FormItem>
+                          <FormItem
+                            label="Width"
+                            invalid={errors.border?.width && touched.border?.width}
+                            errorMessage={errors.border?.width}
+                          >
+                            <Field type="number" name="border.width" component={Input} />
+                          </FormItem>
+                        </div>
                       </TabContent>
                     </Tabs>
                   </div>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
index 39ccefe7..7f27039b 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
@@ -14,9 +14,9 @@ import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreActions } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, FieldArray, FieldProps, Form, Formik, FormikProps } from 'formik'
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import { getIn, number, object, string } from 'yup'
+import { Field, FieldArray, FieldProps, Form, Formik, FormikProps, getIn } from 'formik'
+import { Dispatch, SetStateAction } from 'react'
+import * as Yup from 'yup'
 import { JsonRowDialogData } from './types'
 import {
   deleteListFormJsonRow,
@@ -36,10 +36,30 @@ import {
 } from '../options'
 import { BreakDto } from '@/proxy/admin/charts/models'
 
-const schema = object().shape({
-  name: string().required('Name Required'),
-  backgroundColor: string().notRequired(),
-  height: number().notRequired(),
+const schema = Yup.object().shape({
+  visible: Yup.boolean().notRequired(),
+  valueType: Yup.string().notRequired(),
+  type: Yup.string().notRequired(),
+  position: Yup.string().notRequired(),
+  name: Yup.string().required('Name Required'),
+  title: Yup.string().notRequired(),
+  width: Yup.number().min(0, 'Width must be greater than or equal to 0').notRequired(),
+  grid: Yup.object().shape({
+    color: Yup.string().notRequired(),
+    visible: Yup.boolean().notRequired(),
+    width: Yup.number().min(0, 'Width must be greater than or equal to 0').notRequired(),
+  }),
+  breakStyle: Yup.object().shape({
+    color: Yup.string().notRequired(),
+    line: Yup.string().notRequired(),
+    width: Yup.number().min(0, 'Width must be greater than or equal to 0').notRequired(),
+  }),
+  breaks: Yup.array().of(
+    Yup.object().shape({
+      startValue: Yup.number().required(),
+      endValue: Yup.number().required(),
+    }),
+  ),
 })
 
 function JsonRowOpDialogAxis({
@@ -63,7 +83,8 @@ function JsonRowOpDialogAxis({
 
     if (data) {
       const resp = await getListFormJsonRow(data.id, data.tabName)
-      setJsonValue({ field: 'axisDto', data: resp.data })
+
+      setJsonValue({ field: 'valueAxisDto', data: resp.data })
     }
 
     setData(undefined)
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
index 2f69c85c..1e749ef8 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
@@ -10,7 +10,6 @@ import {
   toast,
 } from '@/components/ui'
 import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
-import { SelectBoxOption } from '@/shared/types'
 import { useStoreActions, useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, Form, Formik } from 'formik'
@@ -76,20 +75,19 @@ function JsonRowOpDialogPane({
           <Formik
             initialValues={
               data.chartPaneValues ?? {
+                name: '',
                 backgroundColor: '',
                 height: 200,
-                name: '',
               }
             }
             validationSchema={schema}
             onSubmit={async (values, { setSubmitting }) => {
-              console.log('submit', values)
               setSubmitting(true)
               try {
                 const input: ListFormJsonRowDto = {
                   index: data.index,
                   fieldName: data.tabName,
-                  itemChartPane: values,
+                  itemChartPanes: values,
                 }
                 if (data.index === -1) {
                   await postListFormJsonRow(data.id, input)
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
index cbbc279a..3215b555 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
@@ -16,7 +16,7 @@ import { useStoreActions } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import { number, object, string } from 'yup'
+import { boolean, number, object, string } from 'yup'
 import { JsonRowDialogData } from './types'
 import {
   deleteListFormJsonRow,
@@ -32,7 +32,33 @@ import {
 } from '../options'
 
 const schema = object().shape({
+  visible: boolean().notRequired(),
+  showInLegend: boolean().notRequired(),
+  ignoreEmptyPoints: boolean().notRequired(),
+  type: string().notRequired(),
   name: string().required('Name Required'),
+  argumentField: string().notRequired(),
+  valueField: string().notRequired(),
+  axis: string().notRequired(),
+  pane: string().notRequired(),
+  dashStyle: string().notRequired(),
+  color: string().notRequired(),
+  selectionMode: string().notRequired(),
+  width: number().notRequired(),
+  cornerRadius: number().notRequired(),
+  label: object().shape({
+    visible: boolean().notRequired(),
+    backgroundColor: string().notRequired(),
+    customizeText: string().notRequired(),
+    format: string().notRequired(),
+    font: object().notRequired(),
+  }),
+
+  barOverlapGroup: string().notRequired(),
+  barPadding: number().notRequired(),
+  barWidth: number().notRequired(),
+  rangeValue1Field: string().notRequired(),
+  rangeValue2Field: string().notRequired(),
   backgroundColor: string().notRequired(),
   height: number().notRequired(),
 })
@@ -58,7 +84,7 @@ function JsonRowOpDialogSeries({
 
     if (data) {
       const resp = await getListFormJsonRow(data.id, data.tabName)
-      setJsonValue({ field: 'panesDto', data: resp.data })
+      setJsonValue({ field: 'seriesDto', data: resp.data })
     }
 
     setData(undefined)
@@ -104,7 +130,6 @@ function JsonRowOpDialogSeries({
           <Formik
             initialValues={
               data.chartSeriesValues ?? {
-                id: '',
                 argumentField: '',
                 axis: '',
                 barOverlapGroup: '',
@@ -137,11 +162,10 @@ function JsonRowOpDialogSeries({
             onSubmit={async (values, { setSubmitting }) => {
               setSubmitting(true)
               try {
-                console.log(values)
                 const input: ListFormJsonRowDto = {
                   index: data.index,
                   fieldName: data.tabName,
-                  itemChartSerie: values,
+                  itemChartSeries: values,
                 }
                 if (data.index === -1) {
                   await postListFormJsonRow(data.id, input)
@@ -280,7 +304,7 @@ function JsonRowOpDialogSeries({
                     </FormItem>
 
                     <FormItem
-                      label="Type"
+                      label="Dash Style"
                       invalid={errors.dashStyle && touched.dashStyle}
                       errorMessage={errors.dashStyle}
                     >