<commit_before>function(args) {
/*
is_app(true)
component_type("VB")
display_name("Dropdown control")
description("This will return the dropdown control")
base_component_id("chart_control")
load_once_from_file(true)
visibility("PRIVATE")
read_only(true)
properties(
    [
        {
            id:     "text",
            name:   "Text",
            type:   "String"
        }
        ,
        {
            id:     "background_color",
            name:   "Background color",
            type:   "String"
        }
        ,
        {
            id:         "items",
            name:       "Items",
            type:       "Array",
            default:    [],
            editor:     "detail_editor"
        }
        ,

        {
            id:         "has_details_ui",
            name:       "Has details UI?",
            type:       "Boolean",
            default:    true,
            hidden:     true
        }
        ,
        {
            id:     "changed_event",
            name:   "Changed event",
            type:   "Event"
        }
        ,
        {
            id:     "default_selection",
            name:   "Default Selection",
            type:   "String",
            default: ""
        }
        ,
        {
            id:     "mainData",
            name:   "Data",
            type:   "String",
            textarea: true,
            default: ""
        }

    ]
)//properties
logo_url("/driver_icons/chart.png")
*/



    Vue.component("chart_control",{
      props: ["meta","name","args","refresh","design_mode"]
      ,
      template:
`<div   v-bind:style='"width:100%;overflow-y:auto;height:100%"
        v-bind:refresh='refresh'>

    <div v-bind:style='"height:100%;width:100%; border: 0px;color:black;"'
         v-if='design_mode == "detail_editor"'>

         <div class="form-group">
             <label for="usr">Display:</label>
             <input v-model="new_text" type="text" class="form-control" id="usr">
         </div>
         <div class="form-group">
             <label for="usr">Value:</label>
             <input v-model="new_value" type="text" class="form-control" id="usr">
         </div>
         <div    class="btn btn-sm btn-info"
                 v-on:click="items.push({value: new_value, text:new_text});new_value='';new_text='';"
                 style="margin-bottom: 30px;"
         >
                 Add
         </div>


        <table class="table">
          <thead class="thead-dark">
            <tr>
              <th scope="col">Display</th>
              <th scope="col">Value</th>
              <th scope="col"></th>
              <th scope="col">Delete</th>
            </tr>
          </thead>



          <tbody  v-bind:refresh='refresh'
                  v-for='(child_item,index)  in  items'>

             <tr v-if='child_item && isValidObject(child_item)'
                     v-bind:refresh='refresh'>

               <th scope="row">{{child_item.text}}</th>

               <td>{{child_item.value}}</td>

               <td>
                   <div    class='btn btn-info'
                           v-bind:refresh='refresh'
                           v-on:click='var x = items[index];items.splice(index, 1);items.splice(index - 1, 0, x);changedFn();'
                           v-if='child_item'
                           v-bind:style='"box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;padding:0px; z-index: 21474836;opacity:1;"  +
                           "width: 60px; height: 20px; line-height:20px;text-align: center;vertical-align: middle;margin-left: 20px;"'>
                           UP

                   </div>
                   <div    class='btn btn-info'
                           v-bind:refresh='refresh'
                           v-on:click='var x = items[index];items.splice(index, 1);items.splice(index + 1, 0, x);changedFn();'
                           v-if='child_item'
                           v-bind:style='"box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;padding:0px; z-index: 21474836;opacity:1;"  +
                           "width: 60px; height: 20px; line-height:20px;text-align: center;vertical-align: middle;margin-left: 20px;"'>
                           DOWN

                   </div>
               </td>

               <td>
                   <div    class='btn btn-danger'
                           v-bind:refresh='refresh'
                           v-if='child_item'
                           v-on:click='items.splice(index, 1);changedFn();'
                           v-bind:style='"box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;padding:0px; z-index: 21474836;opacity:1;"  +
                           "width: 20px; height: 20px; line-height:20px;text-align: center;vertical-align: middle;margin-left: 20px;"'>
                           X
                   </div>
               </td>

             </tr>



       </tbody>
     </table>

     </div>

    <div v-bind:style='"height:100%;width:100%; border: 0px;" +
                       "background-color: "+    args["background_color"]  +  ";"'
         v-else>

         <canvas    v-bind:id='canvasId'
                    width="400" height="400"
                    v-if='!design_mode'>
         </canvas>
    </div>




</div>`
      ,
      data: function() {
       return {
         value:             null,
         selected_index:    null,
         items:             [],
         new_value:         "",
         new_text:          "",
         canvasId:           uuidv4()
       }
     }
     ,
     watch: {
       // This would be called anytime the value of the input changes
       refresh: function(newValue, oldValue) {
           //console.log("refresh: " + this.args.text)
           if (isValidObject(this.args)) {
               this.value = this.args.value
               this.items = this.args.items<commit_msg>Added a chart editor<commit_after>function(args) {
/*
is_app(true)
component_type("VB")
display_name("Dropdown control")
description("This will return the dropdown control")
base_component_id("chart_control")
load_once_from_file(true)
visibility("PRIVATE")
read_only(true)
properties(
    [
        {
            id:     "text",
            name:   "Text",
            type:   "String"
        }
        ,
        {
            id:     "background_color",
            name:   "Background color",
            type:   "String"
        }
        ,
        {
            id:         "items",
            name:       "Items",
            type:       "Array",
            default:    [],
            editor:     "detail_editor"
        }
        ,

        {
            id:         "has_details_ui",
            name:       "Has details UI?",
            type:       "Boolean",
            default:    true,
            hidden:     true
        }
        ,
        {
            id:     "changed_event",
            name:   "Changed event",
            type:   "Event"
        }
        ,
        {
            id:     "default_selection",
            name:   "Default Selection",
            type:   "String",
            default: ""
        }
        ,
        {
            id:     "mainData",
            name:   "Data",
            type:   "String",
            textarea: true,
            default: ""
        }

    ]
)//properties
logo_url("/driver_icons/chart.png")
*/



    Vue.component("chart_control",{
      props: ["meta","name","args","refresh","design_mode"]
      ,
      template:
`<div   v-bind:style='"width:100%;overflow-y:auto;height:100%"
        v-bind:refresh='refresh'>

    <div v-bind:style='"height:100%;width:100%; border: 0px;color:black;"'
         v-if='design_mode == "detail_editor"'>


         <label for="usr">Data:</label>
         <textarea style="font-family:monospace; height:80%"
                   v-model="args.mainData"
                   type="" class="form-control" id="usr"
                   cols="50"

                   >
         </textarea>


     </div>

    <div v-bind:style='"height:100%;width:100%; border: 0px;" +
                       "background-color: "+    args["background_color"]  +  ";"'
         v-else>

         <canvas    v-bind:id='canvasId'
                    width="400" height="400"
                    v-if='!design_mode'>
         </canvas>

         <div       width="400"
                    height="400"
                    v-if='design_mode'>

                    Chart - {{args.name}}
         </div>
    </div>




</div>`
      ,
      data: function() {
       return {
         value:             null,
         selected_index:    null,
         items:             [],
         new_value:         "",
         new_text:          "",
         canvasId:           uuidv4()
       }
     }
     ,
     watch: {
       // This would be called anytime the value of the input changes
       refresh: function(newValue, oldValue) {
           //console.log("refresh: " + this.args.text)
           if (isValidObject(this.args)) {
               this.value = this.args.value
               this.items = this.args.items
{'fraction_non_alphanumeric': 0.140748031496063, 'fraction_numerical': 0.020450568678915135, 'mean_word_length': 1.2833957553058677, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6528393', 'n_tokens_mistral': 2876, 'n_tokens_neox': 2643, 'n_words': 483}