{curl 4.0 applet}
{curl-file-attributes character-encoding = "euc-kr"}
{applet manifest = "manifest.mcurl",
    {compiler-directives careful? = true,
        allow-any-calls? = true 
    }
}

{document-style PlainDocument}

{import * from COIN.CHART}
{import * from CURL.GUI.SHAPES}


||--{let vb:VBox = {VBox
||--                   width={make-elastic},height={make-elastic}
||--                   background="white"
||--               }
||--}


         
{value
    let sample-records:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField "Name", domain = String},
                {RecordField "Age", domain = int},
                {RecordField "Score", domain = int}
            },
            {RecordData Name = "John", Age = 25, Score = 22},
            {RecordData Name = "Julie",  Age = 12, Score = 13},
            {RecordData Name = "Jethro", Age = 58, Score = 32},
            {RecordData Name = "Jeremy", Age = 16, Score = 6},
            {RecordData Name = "Jessica", Age = 13, Score = 9},
            {RecordData Name = "Toms", Age = 18, Score = 19},
            {RecordData Name = "Ami", Age = 15, Score = 21},
            {RecordData Name = "Olivia", Age = 21, Score = 17},
            {RecordData Name = "Rome", Age = 15, Score = 10}
        }
    
||--    {for i:int=0 to 200 do
||--        {sample-records.append
||--            {RecordData Name = "John" & {String i}, Age = 26 + i mod 2, Score = 22 + i mod 5}
||--        }
||--    }
    
    let field-names:StringArray={StringArray}
    
    {for i:int=0 below sample-records.fields.size do
        {field-names.append
            {String {sample-records.fields.get-by-index i}.name}
        }
    }
    
    let chart:TChart = {TChart
                           sample-records,
                           "Name",
                           {StringArray "Age","Score"},
                           chart-type="line",
                           title = "[SAMPLE Chart]",
                           title-halign="center",
                           title-font-color="#4F4E60",
                           ||legend-location="right",
                           width = 450pt,
                           height = 9.5cm,
                           line-width =3pt,
                           line-style ="arrow",
                           ||blink-field="Age",
                           ||x-title="TEST X",
                           ||x-title-visible?=false,
                           y-title="TEST Y  unit:ea",
                           ||y-title-visible?=false,
                           chart-v-margin = 0pt,
                           ||animation?=false,
                           plot-major-color="#9E9BC0"
                       }
    
    let y-fields:StringArray={StringArray}
    let model:DefaultListModel = {DefaultListModel}
    
    let y-field-list:ListBox = {ListBox
                                   ui-object={TFlatBorderListBoxUI},
                                   data-model = model,
                                   width=150px,
                                   enabled?=false,
                                   style="checkbutton",
                                   {on ValueFinished at this: ListBox do
                                   }
                               }
    
    
    let x-field:DropdownList = {DropdownList
                                   ui-object={TFlatBorderDropdownListUI},
                                   {splice field-names},
                                   width=150px,
                                   value=field-names[0],
                                   enabled?=false,
                                   {on ValueFinished at this:DropdownList do
                                       {y-fields.clear}
                                       {model.clear}
                                       {for i:int=0 below field-names.size do
                                           {if this.value != field-names[i]then
                                               let rf:RecordField = {sample-records.fields.get field-names[i]}
                                               ||popup-message rf.domain.type.name}
                                               {if rf.domain.type.name !="String" then 
                                                   {y-fields.append field-names[i]}
                                                   {model.append field-names[i]}
                                                   {y-field-list.select-index model.size - 1}
                                               }
                                               
                                           }
                                       }     
                                       ||{y-field-list.select-all-items}
                                       set chart.x-axis-field = this.value asa String
                                       set chart.y-axis-fields = y-fields
                                       {chart.refresh-controls}
                                   }
                               }

    {for i:int=0 below field-names.size do
        {if x-field.value != field-names[i]then
            {y-fields.append field-names[i]}
            {model.append field-names[i]}
        }
    }
    {y-field-list.select-all-items}
    
    let y-field-text:TextField = {TextField
                                     ui-object={TFlatBorderTextFieldUI},
                                     width=150px,
                                     {on PointerEnter at this:TextField do
                                         set y-field-list.visible? = true
                                     }
                                 }    

    let width:TextField = {TextField
                              ui-object={TFlatBorderTextFieldUI},
                              width=150px,
                              value="550px",
                              {on ValueFinished at this:TextField do
                                  set chart.width = {this.value.to-int} * {any-to-Distance 1px}
                              }
                          }

    let height:TextField = {TextField
                               ui-object={TFlatBorderTextFieldUI},
                               width=150px,
                               value="370px",
                               {on ValueFinished at this:TextField do
                                   set chart.height = {this.value.to-int} * {any-to-Distance 1px}
                               }
                           }
    
    let chart-type:DropdownList = {DropdownList
                                      ui-object={TFlatBorderDropdownListUI},
                                      "Line","Bar","Scatter","Bubble","Stackable","Area","Pie",
                                      width=150px,
                                      value="Line",
                                      {on ValueFinished at this:DropdownList do
                                          {chart.set-chart-type this.value asa String}
                                      }
                                  }
    
    let chart-color:ColorDropdown = {ColorDropdown
                                        ui-object={TFlatBorderDropdownListUI},
                                        width={any-to-Distance 150px},
                                        {on ValueFinished at this:ColorDropdown do
                                            {chart.set-chart-color this.value asa String}
                                        }
                                    }
    let legend-loc:DropdownList =  {DropdownList
                                       ui-object={TFlatBorderDropdownListUI},
                                       "none","left","right","top","bottom",
                                       width=150px,
                                       value="right",
                                       {on ValueFinished at this:DropdownList do
                                           {chart.set-legend-location this.value asa String}
                                       }
                                   }
    
    let field-list:DropdownList = {DropdownList
                                      ui-object={TFlatBorderDropdownListUI},
                                      {splice y-fields},
                                      value = "Age",
                                      width = 80px
                                  }
        
    let field-color:ColorDropdown = {ColorDropdown
                                        ui-object={TFlatBorderDropdownListUI},
                                        width={any-to-Distance 150px},
                                        {on ValueFinished at this:ColorDropdown do
                                            {if field-list.value == "Age" then 
                                                {chart.set-series-color 0,this.value asa String}
                                             else
                                                {chart.set-series-color 1,this.value asa String}
                                            }
                                        }
                                    }
    
    let antialias:DropdownList = {DropdownList
                                     ui-object={TFlatBorderDropdownListUI},
                                     "off","low","high",
                                     width=150px,
                                     value="off",
                                     {on ValueFinished at this:DropdownList do
                                         set chart.antialias = this.value asa String
                                     }
                                 }
    
    let v-line:DropdownList = {DropdownList
                                  ui-object={TFlatBorderDropdownListUI},
                                  "true","false",
                                  width=150px,
                                  value="true",
                                  {on ValueFinished at this:DropdownList do
                                      let visible?:bool = true
                                      {if this.value == "false" then
                                          set visible? = false
                                      }
                                      set chart.plot-h-line? = visible?
                                  }
                              }
    
    let h-line:DropdownList ={DropdownList
                                 ui-object={TFlatBorderDropdownListUI},
                                 "true","false",
                                 width=150px,
                                 value="true",
                                 {on ValueFinished at this:DropdownList do
                                     let visible?:bool = true
                                     {if this.value == "false" then
                                         set visible? = false
                                     }
                                     set chart.plot-v-line? = visible?
                                 }
                             }    
    
    let value-display:DropdownList = {DropdownList
                                         ui-object={TFlatBorderDropdownListUI},
                                         "None","tooltip","mark",
                                         width=150px,
                                         value="tooltip",
                                         {on ValueFinished at this:DropdownList do
                                             {chart.set-value-display this.value asa String}
                                         }
                                     }
    
    let animate:DropdownList = {DropdownList
                                   ui-object={TFlatBorderDropdownListUI},
                                   "true","false",
                                   width=150px,
                                   value="true",
                                   {on ValueFinished at this:DropdownList do
                                       let enabled?:bool = true
                                       {if this.value == "false" then
                                           set enabled? = false
                                       }
                                       {chart.set-animation enabled?}
                                   }
                               }
    
    let animate-type:DropdownList = {DropdownList
                                        ui-object={TFlatBorderDropdownListUI},
                                        {splice {StringArray "Left","Bottom","Left+Bottom"}},
                                        value = "Left",
                                        width = 150px,
                                        {on ValueFinished at this:DropdownList do
                                            let type:String=this.value asa String
                                            {if this.selected-index == 2 then
                                                set type = "Combo"
                                            }
                                            {chart.set-animation-type type}
                                        }                        
                                    }    
    
    let title:TextField= {TextField
                             ui-object={TFlatBorderTextFieldUI},
                             width=150px,
                             value="[SAMPLE Chart]",
                             {on ValueFinished at this:TextField do
                                 set chart.title =  this.value asa String
                             }
                         }
    let title-align:DropdownList = {DropdownList
                                        ui-object={TFlatBorderDropdownListUI},
                                        "left","center","right",
                                        width=150px,
                                        value="center",
                                        {on ValueFinished at this:DropdownList do
                                            {chart.set-title-halign this.value asa String}
                                        }
                                   }      
    let title-font-size:TextField = {TextField
                                        ui-object={TFlatBorderTextFieldUI},
                                        width=150px,
                                        value="12pt",
                                        {on ValueFinished at this:TextField do
                                            let width:Distance = {this.value.to-int} * 1pt
                                            {chart.set-title-font-size width}
                                        }
                                    }
    let title-font-color:ColorDropdown = {ColorDropdown
                                             ui-object={TFlatBorderDropdownListUI},  
                                             width={any-to-Distance 150px},
                                             {on ValueFinished at this do
                                                 {chart.set-title-font-color this.value asa String}
                                             }
                                         }    
    let title-font-family:DropdownList = {TFontDropdown 
                                             ui-object={TFlatBorderDropdownListUI},  
                                             width=150px,
                                             {on ValueFinished at this:DropdownList do
                                                 {chart.set-title-font-family this.value asa String}
                                             }
                                         }
    
    let axis-font-size:TextField =  {TextField
                                        ui-object={TFlatBorderTextFieldUI},
                                        width=150px,
                                        value="10pt",
                                        {on ValueFinished at this:TextField do
                                            let width:Distance = {this.value.to-int} * 1pt
                                            {chart.set-axis-font-size width}
                                        }
                                    }    
    
    let axis-font-color:ColorDropdown = {ColorDropdown
                                            ui-object={TFlatBorderDropdownListUI},  
                                            width={any-to-Distance 150px},
                                            {on ValueFinished at this:ColorDropdown do
                                                {chart.set-axis-font-color this.value asa String}
                                            }
                                        }
    
    let axis-font-family:DropdownList = {TFontDropdown 
                                            ui-object={TFlatBorderDropdownListUI},  
                                            width=150px,
                                            {on ValueFinished at this:DropdownList do
                                                {chart.set-axis-font-family this.value asa String}
                                            }
                                        }
    
    let left-axis-label-type:DropdownList = {DropdownList
                                                ui-object={TFlatBorderDropdownListUI},
                                                "None","square","ellipse",
                                                width=150px,
                                                value="None",
                                                {on ValueFinished at this:DropdownList do
                                                    set chart.left-axis-label-type = this.value asa String
                                                }
                                            }      
    
    let left-axis-label-color:ColorDropdown = {ColorDropdown
                                                  ui-object={TFlatBorderDropdownListUI},  
                                                  width={any-to-Distance 150px},
                                                  {on ValueFinished at this:ColorDropdown do
                                                      set chart.left-axis-label-color = this.value asa String
                                                  }
                                              }    
    
    let left-axis-label-rotate:TextField = {TextField
                                               ui-object={TFlatBorderTextFieldUI},
                                               width=150px,
                                               value="0deg",
                                               {on ValueFinished at this:TextField do
                                                   set chart.left-axis-label-rotate= {evaluate this.value} asa Angle
                                                   ||let val:String = this.value asa String                                                   
                                                   ||set val = {val.replace-clone "deg", ""}
                                                   ||set chart.left-axis-label-rotate= {val.to-int} * 1deg
                                               }
                                           }    
    
    let bottom-axis-label-type:DropdownList = {DropdownList
                                                  ui-object={TFlatBorderDropdownListUI},
                                                  "None","square","ellipse",
                                                  width=150px,
                                                  value="None",
                                                  {on ValueFinished at this:DropdownList do
                                                      set chart.bottom-axis-label-type = this.value asa String
                                                  }
                                              }      
    
    let bottom-axis-label-color:ColorDropdown = {ColorDropdown
                                                    ui-object={TFlatBorderDropdownListUI},  
                                                    width={any-to-Distance 150px},
                                                    {on ValueFinished at this:ColorDropdown do
                                                        set chart.bottom-axis-label-color = this.value asa String
                                                    }
                                                }   
    
    let bottom-axis-label-rotate:TextField = {TextField
                                                 ui-object={TFlatBorderTextFieldUI},
                                                 width=150px,
                                                 value="0deg",
                                                 {on ValueFinished at this:TextField do
                                                     set chart.bottom-axis-label-rotate= {evaluate this.value} asa Angle
                                                     ||let val:String = this.value asa String
                                                     ||set val = {val.replace-clone "deg", ""}
                                                     ||set chart.bottom-axis-label-rotate= {val.to-int} * 1deg
                                                 }
                                             }       
    
    let line-width:TextField = {TextField
                                   ui-object={TFlatBorderTextFieldUI},
                                   width=150px,
                                   value="2px",
                                   {on ValueFinished at this:TextField do
                                       let width:Distance = {this.value.to-int} * 1pt
                                       {chart.set-line-width width}
                                   }
                               }
    
    let line-type:DropdownList = {DropdownList
                                     ui-object={TFlatBorderDropdownListUI},
                                     "normal","arrow",
                                     width=150px,
                                     value="arrow",
                                     {on ValueFinished at this:DropdownList do
                                         {chart.set-line-style this.value asa String}
                                     }
                                 }
    
    let line-with-point:DropdownList = {DropdownList
                                           ui-object={TFlatBorderDropdownListUI},
                                           "true","false",
                                           width=150px,
                                           value="true",
                                           {on ValueFinished at this:DropdownList do
                                               let visible?:bool = true
                                               {if this.value == "false" then
                                                   set visible? = false
                                               }
                                               {chart.set-line-point visible?}
                                           }
                                       }    
    
    let bar-width:TextField = {TextField
                                  ui-object={TFlatBorderTextFieldUI},
                                  width=150px,
                                  value="2px",
                                  {on ValueFinished at this:TextField do
                                      let width:Distance = {this.value.to-int} * 1pt
                                      ||{chart.set-bar-width width}
                                  }
                              }
    
    let bar-border-color:ColorDropdown = {ColorDropdown
                                             ui-object={TFlatBorderDropdownListUI},  
                                             width={any-to-Distance 150px},
                                             {on ValueFinished at this:ColorDropdown do
                                                 ||set chart.bottom-axis-label-color = this.value asa String
                                             }
                                         }  
    
    let line-highlight-field:DropdownList = {DropdownList
                                                ui-object={TFlatBorderDropdownListUI},
                                                {splice {StringArray "None","Age","Score"}},
                                                value = "None",
                                                width = 150px,
                                                {on ValueFinished at this:DropdownList do
                                                    let f-name:String=this.value asa String
                                                    {if this.value == "None" then
                                                        set f-name = ""
                                                    }
                                                    {chart.set-highlight-field f-name}
                                                }                        
                                           }
    
    let bar-highlight-field:DropdownList = {DropdownList
                                               ui-object={TFlatBorderDropdownListUI},
                                               {splice {StringArray "None","Age","Score"}},
                                               value = "None",
                                               width = 150px,
                                               {on ValueFinished at this:DropdownList do
                                                   let f-name:String=this.value asa String
                                                   {if this.value == "None" then
                                                       set f-name = ""
                                                   }
                                                   {chart.set-highlight-field f-name}
                                               }                        
                                           }
    
    let bar-highlight-type:DropdownList= {DropdownList
                                             ui-object={TFlatBorderDropdownListUI},
                                             width=150px,
                                             "blink", "grow",
                                             value= "blink",
                                             {on ValueFinished at this:DropdownList do
                                                 {chart.set-highlight-type this.value asa String}
                                             }
                                         }  
    
    let s-highlight-field:DropdownList = {DropdownList
                                             ui-object={TFlatBorderDropdownListUI},
                                             {splice {StringArray "None","Age","Score"}},
                                             value = "None",
                                             width = 150px,
                                             {on ValueFinished at this:DropdownList do
                                                 let f-name:String=this.value asa String
                                                 {if this.value == "None" then
                                                     set f-name = ""
                                                 }
                                                 {chart.set-highlight-field f-name}
                                             }                        
                                         }
    
    let s-highlight-type:DropdownList= {DropdownList
                                           ui-object={TFlatBorderDropdownListUI},
                                           width=150px,
                                           "blink", "circle",
                                           value= "blink",
                                           {on ValueFinished at this:DropdownList do
                                               {chart.set-highlight-type this.value asa String}
                                           }
                                       }  
    
    let cb:TBoxWithChild = 
        {TBoxWithChild user-data=false, child-show?=true, spacing=5pt,
            {VBox spacing=5pt,
||--                {HBox spacing=5px, valign="center",
||--                    {TextFlowBox color="#0020B0", font-weight="bold", "Properties"}
||--                },
                {HBox spacing=5px, valign="center",
                    {Fill width=10px},
                    {TArrowFrame child-show?=true,
                        {on Action at this:TArrowFrame do
                            {if this.child-show? then
                                {cb.show-child}
                             else
                                {cb.hide-child}
                            }
                        }
                    },
                    "General"
                }
            },
            child =
                {HBox 
                    font-family="Vernada", font-size=9pt,
                    {Fill width=14pt},
                    {VBox 
                        border-width=1px, border-color="#C0C0C0",
                        background="white",
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px,
                                color="black", "x field"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            x-field
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center", height=40px,
                            {Frame
                                width = 90px,
                                color="black", "y fields"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            y-field-list
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px,
                                color="black", "width"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            width
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px,
                                color="black", "height"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            height
                            
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px,
                                color="black", font-weight="bold","chart-type"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            chart-type
                            
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px,
                                color="black","chart-color"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            chart-color
                            
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px,
                                color="black","legend location"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            legend-loc
                        },  
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "v-Line visible"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            v-line
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                 "h-Line visible"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            h-line
                        },                        
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px, height=18px,
                                color="black",
                                "Field Color"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            ""
                        },
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px,
                                color="black",
                                field-list
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            field-color
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center", 
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "value display"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            value-display
                        },                        
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                 "antialias"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            antialias
                        }
                                                    
                    }
                }
        }                  
    
    let cb2:TBoxWithChild = 
        {TBoxWithChild user-data=false, child-show?=false, spacing=5pt,
            {VBox spacing=5pt,
                {HBox spacing=5px, valign="center",
                    {Fill width=10px},
                    {TArrowFrame child-show?=false,
                        {on Action at this:TArrowFrame do
                            {if this.child-show? then
                                {cb2.show-child}
                             else
                                {cb2.hide-child}
                            }
                        }
                    },
                    "Animation"
                }
            },
            child =
                {HBox 
                    font-family="Vernada", font-size=9pt,
                    {Fill width=14pt},
                    {VBox 
                        border-width=1px, border-color="#C0C0C0",
                        background="white",
                        {HBox spacing=5px, valign="center",
                            {Frame
                                width = 90px,
                                color="black", "enalbled"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            animate
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "type"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            animate-type 
                        }
||--                        
||--                        {Fill height=1px, background= "#C0C0C0"}, 
||--                        {HBox spacing=5px, valign="center",
||--                            {Frame
||--                                valign="center",
||--                                width = 90px, height=18px,
||--                                color="black",
||--                                "Highlight Field"
||--                            },
||--                            {Fill width=1px, background= "#C0C0C0"}, 
||--                            highlight-field  
||--                        }                        
                    }
                }
        }
    
||--    let cb3:TBoxWithChild = 
||--        {TBoxWithChild user-data=false, child-show?=false, spacing=5pt,
||--            {VBox spacing=5pt,
||--                {HBox spacing=5px, valign="center",
||--                    {Fill width=10px},
||--                    {TArrowFrame child-show?=false,
||--                        {on Action at this:TArrowFrame do
||--                            {if this.child-show? then
||--                                {cb3.show-child}
||--                             else
||--                                {cb3.hide-child}
||--                            }
||--                        }
||--                    },
||--                    "Highlight"
||--                }
||--            },
||--            child =
||--                {HBox 
||--                    font-family="Vernada", font-size=9pt,
||--                    {Fill width=14pt},
||--                    {VBox 
||--                        border-width=1px, border-color="#C0C0C0",
||--                        background="white",
||--                        {HBox spacing=5px, valign="center",
||--                            {Frame
||--                                valign="center",
||--                                width = 90px, height=18px,
||--                                color="black",
||--                                "highlight Field"
||--                            },
||--                            {Fill width=1px, background= "#C0C0C0"}, 
||--                            highlight-field1 
||--                        }                        
||--                    }
||--                }
||--        }
    
    let cb4:TBoxWithChild = 
        {TBoxWithChild user-data=false, child-show?=false, spacing=5pt,
            {VBox spacing=5pt,
                {HBox spacing=5px, valign="center",
                    {Fill width=10px},
                    {TArrowFrame child-show?=false,
                        {on Action at this:TArrowFrame do
                            {if this.child-show? then
                                {cb4.show-child}
                             else
                                {cb4.hide-child}
                            }
                        }
                    },
                    "Title"
                }
            },
            child =
                {HBox 
                    font-family="Vernada", font-size=9pt,
                    {Fill width=14pt},
                    {VBox 
                        border-width=1px, border-color="#C0C0C0",
                        background="white",
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "title"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            title
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "align"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            title-align 
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "font-size"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            title-font-size 
                        }, 
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "font-family"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            title-font-family 
                        },    
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "font-color"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            title-font-color 
                        }                                                
                    }
                }
        }
    
    let cb5:TBoxWithChild = 
        {TBoxWithChild user-data=false, child-show?=false, spacing=5pt,
            {VBox spacing=5pt,
                {HBox spacing=5px, valign="center",
                    {Fill width=10px},
                    {TArrowFrame child-show?=false,
                        {on Action at this:TArrowFrame do
                            {if this.child-show? then
                                {cb5.show-child}
                             else
                                {cb5.hide-child}
                            }
                        }
                    },
                    "Axis"
                }
            },
            child =
                {HBox 
                    font-family="Vernada", font-size=9pt,
                    {Fill width=14pt},
                    {VBox 
                        border-width=1px, border-color="#C0C0C0",
                        background="white",
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "font-size"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            axis-font-size 
                        }, 
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "font-family"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            axis-font-family 
                        },    
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "font-color"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            axis-font-color 
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "left shape"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            left-axis-label-type 
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "left shape color"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            left-axis-label-color 
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "left rotation"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            left-axis-label-rotate 
                        },                        
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "bottom shape"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            bottom-axis-label-type 
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",height=30px,
                            {Frame
                                valign="center",
                                width = 90px, ||height=18px,
                                color="black",
                                "bottom shape color"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            bottom-axis-label-color 
                        },
                        {Fill height=1px, background= "#C0C0C0"}, 
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "bottom rotation"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            bottom-axis-label-rotate 
                        }
                     
                    }
                }
        }
    
    
    let cb6:TBoxWithChild = 
        {TBoxWithChild user-data=false, child-show?=true, spacing=5pt,
            {VBox spacing=5pt,
                {HBox spacing=5px, valign="center",
                    {Fill width=10px},
                    {TArrowFrame child-show?=true,
                        {on Action at this:TArrowFrame do
                            {if this.child-show? then
                                {cb6.show-child}
                             else
                                {cb6.hide-child}
                            }
                        }
                    },
                    "Line/Area Chart"
                }
            },
            child =
                {HBox 
                    font-family="Vernada", font-size=9pt,
                    {Fill width=14pt},
                    {VBox 
                        border-width=1px, border-color="#C0C0C0",
                        background="white",
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "line width"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            line-width
                        }, 
                        {Fill height=1px, background= "#C0C0C0"},
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "line type"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            line-type
                        },
                        {Fill height=1px, background= "#C0C0C0"},
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "with point"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            line-with-point
                        },
                        {Fill height=1px, background= "#C0C0C0"},
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "highlight"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            line-highlight-field
                        }
                    }
                }
        }
    
    let cb7:TBoxWithChild = 
        {TBoxWithChild user-data=false, child-show?=true, spacing=5pt,
            {VBox spacing=5pt,
                {HBox spacing=5px, valign="center",
                    {Fill width=10px},
                    {TArrowFrame child-show?=true,
                        {on Action at this:TArrowFrame do
                            {if this.child-show? then
                                {cb7.show-child}
                             else
                                {cb7.hide-child}
                            }
                        }
                    },
                    "Bar/Stackable Chart"
                }
            },
            child =
                {HBox 
                    font-family="Vernada", font-size=9pt,
                    {Fill width=14pt},
                    {VBox 
                        border-width=1px, border-color="#C0C0C0",
                        background="white",
||--                        {HBox spacing=5px, valign="center",
||--                            {Frame
||--                                valign="center",
||--                                width = 90px, height=18px,
||--                                color="black",
||--                                "bar width"
||--                            },
||--                            {Fill width=1px, background= "#C0C0C0"}, 
||--                            bar-width
||--                        }, 
||--                        {Fill height=1px, background= "#C0C0C0"},
||--                        {HBox spacing=5px, valign="center",
||--                            {Frame
||--                                valign="center",
||--                                width = 90px, height=18px,
||--                                color="black",
||--                                "border color"
||--                            },
||--                            {Fill width=1px, background= "#C0C0C0"}, 
||--                            bar-border-color
||--                        },
                        {Fill height=1px, background= "#C0C0C0"},
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "highlight"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            bar-highlight-field
                        },
                        {Fill height=1px, background= "#C0C0C0"},
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "highlight type"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            bar-highlight-type
                        }
                    }
                }
        }
    
    let cb8:TBoxWithChild = 
        {TBoxWithChild user-data=false, child-show?=true, spacing=5pt,
            {VBox spacing=5pt,
                {HBox spacing=5px, valign="center",
                    {Fill width=10px},
                    {TArrowFrame child-show?=true,
                        {on Action at this:TArrowFrame do
                            {if this.child-show? then
                                {cb8.show-child}
                             else
                                {cb8.hide-child}
                            }
                        }
                    },
                    "Scatter/Bubble Chart"
                }
            },
            child =
                {HBox 
                    font-family="Vernada", font-size=9pt,
                    {Fill width=14pt},
                    {VBox 
                        border-width=1px, border-color="#C0C0C0",
                        background="white",
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "highlight"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            s-highlight-field
                        },
                        {Fill height=1px, background= "#C0C0C0"},
                        {HBox spacing=5px, valign="center",
                            {Frame
                                valign="center",
                                width = 90px, height=18px,
                                color="black",
                                "highlight type"
                            },
                            {Fill width=1px, background= "#C0C0C0"}, 
                            s-highlight-type
                        }
                    }
                }
        }  
    let rg:RecordGrid = {RecordGrid 
                            record-source=sample-records
                        }
   
    let tab:TabContainer = {TabContainer
                               width=300px, height={make-elastic},
                               {TabPane
                                   label =  {TextFlowBox color="#0020B0", font-weight="bold", "Properties(I)"},
                                   {ScrollBox
                                       width=300px, 
                                       hscroll?=false,
                                       {Frame 
                                           horigin="left",vorigin="top",
                                           border-spec={BorderSpec top-margin = 10px},
                                           width=300px,|| height={make-elastic},
                                           {Frame
                                               width=300px,|| height={make-elastic},
                                               ||background="#C0C0C0",
                                               {VBox
                                                   ||width={make-elastic},|| height={make-elastic},
                                                   cb,
                                                   {Fill height=10pt},
                                                   cb4,
                                                   {Fill height=10pt},
                                                   cb5,
                                                   {Fill height=10pt},                
                                                   cb2,
                                                   ||{Fill height=10pt},
                                                   ||cb3,
                                                   {Fill}
                                               }
                                           }
                                       }
                                   }
                               },
                               {TabPane
                                   label =  {TextFlowBox color="#0020B0", font-weight="bold", "Properties(II)"},
                                   {ScrollBox
                                       width=300px, 
                                       hscroll?=false,
                                       {Frame 
                                           horigin="left",vorigin="top",
                                           border-spec={BorderSpec top-margin = 10px},
                                           width=300px,|| height={make-elastic},
                                           {Frame
                                               width=300px,|| height={make-elastic},
                                               ||background="#C0C0C0",
                                               {VBox
                                                   ||width={make-elastic},|| height={make-elastic},
                                                   cb6,
                                                   {Fill height=10pt},
                                                   cb7,
                                                   {Fill height=10pt},
                                                   cb8,
                                                   {Fill}
                                               }
                                           }
                                       }
                                   }
                               },
                               {TabPane
                                   label =  {TextFlowBox color="#0020B0", font-weight="bold", "Data"},
                                   {Frame 
                                       valign="top",
                                       border-spec={BorderSpec top-margin = 10px},
                                       width={make-elastic}, height={make-elastic},
                                       rg
                                   }
                               }
                           }
    {HBox
        {Frame
            width={make-elastic}, height={make-elastic},
            valign="center", halign="center",
            chart
        },
        tab
||--        {Frame
||--            width=300px, height={make-elastic},
||--            background="#EBE7D3",
||--            {VBox
||--                width={make-elastic}, height={make-elastic},
||--                cb,
||--                {Fill height=10pt},
||--                cb4,
||--                {Fill height=10pt},
||--                cb5,
||--                {Fill height=10pt},                
||--                cb2,
||--                {Fill height=10pt},
||--                cb3,
||--                {Fill}
||--            }
||--        }
    }
}