<div class="board-tool-section chart-tool-section " id="chartartsPannel"
     style="display: none"
>
    <div class="board-tool-wrapper ">
        <button class="main-tool board-tool-btn" onclick="showMenus('chartartsPannel')" id="charts_panel_close_btn">
            <svg class="left-tool-close" xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 129.94 129.94">
                <g data-name="Layer 2">
                    <g data-name="Layer 1">
                        <path
                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                    </g>
                </g>
            </svg>
            <svg class="left-tool-button" xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 109.13 109.13">
                <g data-name="Layer 2">
                    <g data-name="Layer 1">
                        <path
                            d="M109.13,109.13H0v-11H109.13ZM0,0V89.88H14.88V20.05H33.17V89.88H45.42V42.55H63.71V89.88H76V61.35H94.25V89.88h14.88V0Z"/>
                    </g>
                </g>
            </svg>
        </button>
        <ul class="chart-options">
            <li onclick="createNewChart('bar')" data-tippy-content="Bar Chart"><img
                    src="{{asset('img/frontend/icons/graph_bar.svg')}}" alt=""></li>
            <li onclick="createNewChart('line')" data-tippy-content="Line Chart"><img
                    src="{{asset('img/frontend/icons/graph_line.svg')}}" alt=""></li>
            <li onclick="createNewChart('pie')" data-tippy-content="Pie Chart"><img
                    src="{{asset('img/frontend/icons/graph_pie.svg')}}" alt=""></li>
            <li onclick="createNewChart('scatter')" data-tippy-content="Scatter Chart"><img
                    src="{{asset('img/frontend/icons/graph_scatter.svg')}}" alt=""></li>
        </ul>
        <div class="d-flex">
            <div class="p-2">
                {{--                    Chart preview--}}
                <div class="chart-section  chart-section-top">
                    <h3 class="chart-heading">Preview</h3>
                    <div class="chart-preview-image">
                        <canvas id="chartPreviewNew" height="200" width="200"></canvas>
                    </div>
                    <button type="button" class="chart-insert-btn" id="insertChart">Insert Chart
                    </button>
                </div>

{{--                <div class="chart-section chart-section-top">--}}
{{--                    <h3 class="chart-heading">Chart Options</h3>--}}
{{--                    <input type="text" class="chart-input" placeholder="Title" id="chart_title" name="title"--}}
{{--                           onkeyup="updateChartOptions(this)">--}}
{{--                    <input type="text" class="chart-input" placeholder="X Axis" id="x_axis" name="xaxis"--}}
{{--                           onkeyup="updateChartOptions(this)">--}}
{{--                    <input type="text" class="chart-input" placeholder="Y Axis" id="y_axis" name="yaxis"--}}
{{--                           onkeyup="updateChartOptions(this)">--}}
{{--                    <div class="grid-action-container">--}}
{{--                        <h4 class="chart-heading chart-heading-mini">Legend Position</h4>--}}
{{--                        <div class="edit_role_option">--}}
{{--                            <h6 class="plan_content_detail">--}}
{{--                                None--}}
{{--                            </h6>--}}
{{--                            <span class="filter_dropdown dropdown role-dropdown float-end">--}}
{{--                                                                <button data-toggle="dropdown" aria-haspopup="true"--}}
{{--                                                                        aria-expanded="true"--}}
{{--                                                                        class="folder-btn ">--}}
{{--                                                                    <svg xmlns="http://www.w3.org/2000/svg"--}}
{{--                                                                         viewBox="0 0 22 16">--}}
{{--                                                                        <path id="Polygon_5" data-name="Polygon 5"--}}
{{--                                                                              d="M9.352,2.4a2,2,0,0,1,3.3,0l7.2,10.47A2,2,0,0,1,18.2,16H3.8a2,2,0,0,1-1.648-3.133Z"--}}
{{--                                                                              fill="#dcdcdc"></path>--}}
{{--                                                                    </svg>--}}
{{--                                                                </button>--}}
{{--                                                                <div class="dropdown-menu" x-placement="top-start"--}}
{{--                                                                     style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, -66px, 0px);">--}}
{{--                                                                    <label style="width: 100%"><input type="checkbox"--}}
{{--                                                                                                      name="chart_legend_position"--}}
{{--                                                                                                      id="chart_legend_position_top"--}}
{{--                                                                                                      value="top"--}}
{{--                                                                                                      style="display: none;"> Top</label>--}}
{{--                                                                    <label><input type="checkbox"--}}
{{--                                                                                  name="chart_legend_position"--}}
{{--                                                                                  value="bottom"--}}
{{--                                                                                  id="chart_legend_position_bottom"--}}
{{--                                                                                  style="display: none"> Bottom</label>--}}
{{--                                                                     <button type="button" class="role-remove-btn"--}}
{{--                                                                             onclick="removeUser(1,132,this)">--}}
{{--                                                                        <svg xmlns="http://www.w3.org/2000/svg"--}}
{{--                                                                             viewBox="0 0 129.94 129.94"><g--}}
{{--                                                                                data-name="Layer 2"><g--}}
{{--                                                                                    data-name="Layer 1"><path--}}
{{--                                                                                        d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path></g></g></svg>--}}
{{--                                                                        Remove--}}
{{--                                                                    </button>--}}
{{--                                                                </div>--}}
{{--                                                            </span>--}}

{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <label class="grid-show">Show Gridlines--}}
{{--                        <input type="checkbox" name="chart_gridlines" id="chart_gridlines"--}}
{{--                               onchange="updateChartOptions(this)">--}}
{{--                        <span class="grid-checkmark"></span>--}}
{{--                    </label>--}}
{{--                </div>--}}
            </div>
            <div class="p-2">
                <div class="chart-section chart-section-top">
                    <h3 class="chart-heading">Chart Options</h3>
                    <input type="text" class="chart-input" placeholder="Title" id="chart_title" name="title"
                           onkeyup="updateChartOptions(this)">
                    <input type="text" class="chart-input" placeholder="X Axis" id="x_axis" name="xaxis"
                           onkeyup="updateChartOptions(this)">
                    <input type="text" class="chart-input" placeholder="Y Axis" id="y_axis" name="yaxis"
                           onkeyup="updateChartOptions(this)">
                    <div class="grid-action-container">
                        <h4 class="chart-heading chart-heading-mini">Legend Position</h4>
                        <div class="edit_role_option">
                            <h6 class="plan_content_detail">
                                None
                            </h6>
                            <span class="filter_dropdown dropdown role-dropdown float-end">
                                                                <button data-toggle="dropdown" aria-haspopup="true"
                                                                        aria-expanded="true"
                                                                        class="folder-btn ">
                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                         viewBox="0 0 22 16">
                                                                        <path id="Polygon_5" data-name="Polygon 5"
                                                                              d="M9.352,2.4a2,2,0,0,1,3.3,0l7.2,10.47A2,2,0,0,1,18.2,16H3.8a2,2,0,0,1-1.648-3.133Z"
                                                                              fill="#dcdcdc"></path>
                                                                    </svg>
                                                                </button>
                                                                <div class="dropdown-menu" x-placement="top-start"
                                                                     style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, -66px, 0px);">
                                                                    <label style="width: 100%"><input type="checkbox"
                                                                                                      name="chart_legend_position"
                                                                                                      id="chart_legend_position_top"
                                                                                                      value="top"
                                                                                                      style="display: none;"> Top</label>
                                                                    <label><input type="checkbox"
                                                                                  name="chart_legend_position"
                                                                                  value="bottom"
                                                                                  id="chart_legend_position_bottom"
                                                                                  style="display: none"> Bottom</label>
                                                                     <button type="button" class="role-remove-btn"
                                                                             onclick="removeUser(1,132,this)">
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                             viewBox="0 0 129.94 129.94"><g
                                                                                data-name="Layer 2"><g
                                                                                    data-name="Layer 1"><path
                                                                                        d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path></g></g></svg>
                                                                        Remove
                                                                    </button>
                                                                </div>
                                                            </span>

                        </div>
                    </div>
                    <label class="grid-show">Show Gridlines
                        <input type="checkbox" name="chart_gridlines" id="chart_gridlines"
                               onchange="updateChartOptions(this)">
                        <span class="grid-checkmark"></span>
                    </label>
                </div>
                <div class="chart-section chart-section-bottom">

                    <div class="chart-section-bottom_section">
                        <h3 class="chart-heading">Data</h3>

                        <div class="chart-table-container">
                            <table id="chart_data_table" class="table table-bordered">
                                <tbody>
                                <tr style="padding-left: 5px">
                                    <td class="color-by-cell">
                                        <label class="color-by"><input type="checkbox" name="chart_colour"
                                                                       id="colorBy" checked value="category"
                                                                       onchange="changeDataColour()">Color
                                            By <span class="color-arrow"><svg
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 16"><path
                                                        id="Polygon_5" data-name="Polygon 5"
                                                        d="M9.352,2.4a2,2,0,0,1,3.3,0l7.2,10.47A2,2,0,0,1,18.2,16H3.8a2,2,0,0,1-1.648-3.133Z"
                                                        fill="#dcdcdc"></path></svg></span></label>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label-cell chart-label-cell" data-row="1" data-col="0">
                                        <div class="row no-gutters chart-color-shell">
                                            <div data-row="1" data-col="0"
                                                 class=" input-group chart-colorpicker colorpicker-category col">
                                                <input data-type="colour" type="text"
                                                       class="form-control input-lg"
                                                       style="display: none" value="#337AB7"/>
                                                <span class="input-group-append">
                                                                                <span
                                                                                    class="input-group-text colorpicker-input-addon">
                                                                                    <i></i></span>
                                                                            </span>
                                            </div>
                                            <input class="col" data-row="1" data-col="0" type="text"
                                                   value="Category 1">
{{--                                            <span data-row="1" data-col="0"--}}
{{--                                                  onclick="removeDataRow(true,this)"--}}
{{--                                                  class="chart-cell-dlt"></span>--}}
                                        </div>
                                    </td>

                                </tr>
                                </tbody>
                            </table>
                            <button type="button" onclick="addDataRow(true, true)"
                                    class="add-cell-btn add-cell-btn_row">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153.3 153.3">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M145.41,51.71H101.59V7.89A7.88,7.88,0,0,0,93.71,0H59.6a7.89,7.89,0,0,0-7.89,7.89V51.71H7.89A7.88,7.88,0,0,0,0,59.59V93.7a7.89,7.89,0,0,0,7.89,7.89H51.71v43.82a7.89,7.89,0,0,0,7.89,7.89H93.71a7.88,7.88,0,0,0,7.88-7.89V101.59h43.82a7.89,7.89,0,0,0,7.89-7.89V59.59A7.88,7.88,0,0,0,145.41,51.71Z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <button type="button" onclick="addDataRow(true, true)"
                                    class="add-cell-btn add-cell-btn_row">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153.3 153.3">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M145.41,51.71H101.59V7.89A7.88,7.88,0,0,0,93.71,0H59.6a7.89,7.89,0,0,0-7.89,7.89V51.71H7.89A7.88,7.88,0,0,0,0,59.59V93.7a7.89,7.89,0,0,0,7.89,7.89H51.71v43.82a7.89,7.89,0,0,0,7.89,7.89H93.71a7.88,7.88,0,0,0,7.88-7.89V101.59h43.82a7.89,7.89,0,0,0,7.89-7.89V59.59A7.88,7.88,0,0,0,145.41,51.71Z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <button type="button" onclick="removeDataRow(true, true)"
                                    class="remove-cell-btn remove-cell-btn_row">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153 153">
                                    <defs/>
                                    <g data-name="Layer 2">
                                        <path d="M145 52H8c-4 0-8 3-8 8v34c0 4 4 8 8 8h137c5 0 8-4 8-8V60c0-5-3-8-8-8z" data-name="Layer 1" style="display:inline"/>
                                    </g>
                                </svg>
                            </button>
                            <button type="button" onclick="addDataCol(true)"
                                    class="add-cell-btn add-cell-btn_coloumn">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153.3 153.3">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M145.41,51.71H101.59V7.89A7.88,7.88,0,0,0,93.71,0H59.6a7.89,7.89,0,0,0-7.89,7.89V51.71H7.89A7.88,7.88,0,0,0,0,59.59V93.7a7.89,7.89,0,0,0,7.89,7.89H51.71v43.82a7.89,7.89,0,0,0,7.89,7.89H93.71a7.88,7.88,0,0,0,7.88-7.89V101.59h43.82a7.89,7.89,0,0,0,7.89-7.89V59.59A7.88,7.88,0,0,0,145.41,51.71Z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <button type="button" onclick="removeDataCol(true, true)"
                                    class="remove-cell-btn remove-cell-btn_coloumn">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153 153">
                                    <defs/>
                                    <g data-name="Layer 2">
                                        <path d="M145 52H8c-4 0-8 3-8 8v34c0 4 4 8 8 8h137c5 0 8-4 8-8V60c0-5-3-8-8-8z" data-name="Layer 1" style="display:inline"/>
                                    </g>
                                </svg>
                            </button>
                        </div>
                    </div>
{{--                    <button class="chart-expand">--}}
{{--                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"--}}
{{--                             width="60" height="84" viewBox="0 0 60 84">--}}
{{--                            <defs>--}}
{{--                                <clipPath id="clip-path">--}}
{{--                                    <rect id="Rectangle_1614" data-name="Rectangle 1614" width="60"--}}
{{--                                          height="84" transform="translate(3887 -887)" fill="#fff"--}}
{{--                                          stroke="#707070" stroke-width="1"/>--}}
{{--                                </clipPath>--}}
{{--                                <filter id="Path_1859" x="-16" y="-6.107" width="77.768" height="96.308"--}}
{{--                                        filterUnits="userSpaceOnUse">--}}
{{--                                    <feOffset dy="4" input="SourceAlpha"/>--}}
{{--                                    <feGaussianBlur stdDeviation="5" result="blur"/>--}}
{{--                                    <feFlood flood-opacity="0.22"/>--}}
{{--                                    <feComposite operator="in" in2="blur"/>--}}
{{--                                    <feComposite in="SourceGraphic"/>--}}
{{--                                </filter>--}}
{{--                            </defs>--}}
{{--                            <g id="Mask_Group_61" data-name="Mask Group 61" transform="translate(-3887 887)"--}}
{{--                               clip-path="url(#clip-path)">--}}
{{--                                <g transform="matrix(1, 0, 0, 1, 3887, -887)" filter="url(#Path_1859)">--}}
{{--                                    <g id="Path_1859-2" data-name="Path 1859" transform="translate(-0.64 5)"--}}
{{--                                       fill="#fff">--}}
{{--                                        <path--}}
{{--                                            d="M 27.8012752532959 65.7012939453125 L 0.1656907200813293 65.7012939453125 C 0.236053466796875 63.45684814453125 0.405313104391098 52.59973907470703 0.2638479173183441 0.3995976448059082 L 28.96909332275391 0.3995976448059082 L 28.98262214660645 0.3995976448059082 L 28.99613380432129 0.3988676369190216 C 28.99692344665527 0.3988276422023773 29.11261367797852 0.3928476572036743 29.30675315856934 0.3928476572036743 C 30.03762245178223 0.3928476572036743 31.87444305419922 0.4751876294612885 33.14243316650391 1.23791766166687 C 34.72722244262695 2.191197633743286 35.5074348449707 4.271307468414307 35.51513290405273 4.292207717895508 L 35.51833343505859 4.300887584686279 L 35.52184295654297 4.309447765350342 L 45.97451400756836 29.75146675109863 L 45.97857284545898 29.7613468170166 L 45.98305130004883 29.77104759216309 C 45.99224472045898 29.7909984588623 46.91208267211914 31.80803680419922 46.91208267211914 33.50082778930664 C 46.91208267211914 35.18126678466797 45.53120422363281 37.73043823242188 45.51726150512695 37.75599670410156 L 45.50828170776367 37.77243804931641 L 45.50057220458984 37.78949737548828 L 34.88263320922852 61.26394653320313 C 34.87214279174805 61.28727722167969 33.88922119140625 63.44352722167969 32.16523361206055 64.50128936767578 C 30.47125625610352 65.54064178466797 27.97547912597656 65.69198608398438 27.8012752532959 65.7012939453125 Z"--}}
{{--                                            stroke="none"/>--}}
{{--                                        <path--}}
{{--                                            d="M 29.30675315856934 0.8928451538085938 C 29.12889862060547 0.8928451538085938 29.02313995361328 0.8981399536132813 29.02315139770508 0.8981399536132813 C 29.02315139770508 0.8981399536132813 29.02315139770508 0.8981399536132813 29.02315330505371 0.8981399536132813 L 28.99614334106445 0.89959716796875 L 28.96909332275391 0.89959716796875 L 0.7652015686035156 0.89959716796875 C 0.8950767517089844 49.25656127929688 0.7589950561523438 61.89871215820313 0.6788864135742188 65.2012939453125 L 27.7910213470459 65.2012939453125 C 28.49833106994629 65.16730499267578 30.55327033996582 64.90370941162109 31.90373229980469 64.07511901855469 C 33.49059295654297 63.10148620605469 34.41682434082031 61.08056640625 34.42706298828125 61.05788803100586 L 45.04500198364258 37.58343505859375 L 45.06044387817383 37.54930877685547 L 45.07838439941406 37.51643753051758 C 45.44934463500977 36.83684539794922 46.41207122802734 34.79066848754883 46.41207122802734 33.50082778930664 C 46.41207122802734 31.92146682739258 45.53751373291016 29.99896621704102 45.52910232543945 29.98063659667969 L 45.5201416015625 29.96123886108398 L 45.51202392578125 29.94147872924805 L 35.05935287475586 4.499446868896484 L 35.05321502685547 4.484725952148438 L 35.04681396484375 4.467357635498047 C 35.03957366943359 4.447998046875 34.30599212646484 2.521308898925781 32.88470458984375 1.666374206542969 C 31.69150161743164 0.9486312866210938 29.84443283081055 0.8928451538085938 29.30675315856934 0.8928451538085938 M 29.30675506591797 -0.1071548461914063 C 30.08120155334473 -0.1071548461914063 32.0246467590332 -0.01795196533203125 33.40016174316406 0.8094558715820313 C 35.15398406982422 1.864418029785156 35.98433303833008 4.119426727294922 35.98433303833008 4.119426727294922 L 46.43700408935547 29.56145858764648 C 46.43700408935547 29.56145858764648 47.41207122802734 31.67337799072266 47.41207122802734 33.50082778930664 C 47.41207122802734 35.32828521728516 45.95613479614258 37.99555969238281 45.95613479614258 37.99555969238281 L 35.33819198608398 61.47000885009766 C 35.33819198608398 61.47000885009766 34.30997467041016 63.77196884155273 32.42670440673828 64.92746734619141 C 30.54343223571777 66.08296966552734 27.81378364562988 66.2012939453125 27.81378364562988 66.2012939453125 L -0.3557167053222656 66.2012939453125 C -0.3557167053222656 66.2012939453125 -0.06133651733398438 64.33545684814453 -0.237518310546875 -0.10040283203125 L 28.96909332275391 -0.10040283203125 C 28.96909332275391 -0.10040283203125 29.0937671661377 -0.1071548461914063 29.30675506591797 -0.1071548461914063 Z"--}}
{{--                                            stroke="none" fill="#dcdcdc"/>--}}
{{--                                    </g>--}}
{{--                                </g>--}}
{{--                            </g>--}}
{{--                        </svg>--}}
{{--                    </button>--}}
                </div>
            </div>
        </div>


    </div>
</div>
