smart-webcomponents-angular/source/smart.grid.chart.js

[](https://jqwidgets.com/license/)

/* Smart UI v25.0.4 (2025-11-28) 
Copyright (c) 2011-2024 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart.Utilities.Assign("Grid.Chart",class{_getChartDataFields(t){const e=this,n=t[0];let r,i=!0,a=[];for(let t in n)"$"!==t&&("string"===e.dataSource.dataFields.find((e=>e.name===t)).dataType?0===e.columns.findIndex((e=>e.dataField===t))&&(r=t):(i=!1,a.push({dataField:t,displayText:t})));return{xAxisDataField:r,series:a,stringOnly:i}}getChart(t,e){const n=this,r=n.getSelection(),i=r.rows,a=r.columns,o=r.cells,s=document.createElement("smart-chart"),c=[],l={};let d,h=[],g=[];if(o&&o.length>1&&o.forEach((t=>{-1===h.indexOf(t.row.index)&&h.push(t.row.index),-1===g.indexOf(t.dataField)&&g.push(t.dataField)})),e)c.concat(e);else for(let t=0;t<n.dataSource.length;t++){const e={};if(i){if(!i.find((e=>e.row.index===t)))continue}else{if(a){a.forEach((r=>{e[r.dataField]=n.dataSource[t][r.dataField]})),c.push(e);continue}if(o&&o.length>1){if(-1===h.indexOf(t))continue;g.forEach((r=>{e[r]=n.dataSource[t][r]})),c.push(e);continue}}n.columns.forEach((r=>e[r.dataField]=n.dataSource[t][r.dataField])),c.push(e)}const m=n._getChartDataFields(c);if(!m.stringOnly){if(d=m.series,s.caption="",s.description="",s.clip=!1,s.showLegend=!0,s.showBorderLine=!1,s.padding={left:5,top:10,right:5,bottom:5},s.dataSource=c,s.theme=n.theme||(document.body.hasAttribute("theme")&&"dark"===document.body.getAttribute("theme")?"dark":"")||"",s.xAxis={dataField:m.xAxisDataField,gridLines:{visible:!0}},s.valueAxis={displayValueAxis:!0,description:n.charting.description,axisSize:"auto",formatSettings:n.charting.formatSettings},this.charting.xAxisPosition&&(s.xAxis.position="top"),this.charting.yAxisPosition&&(s.valueAxis.position="right"),this.charting.caption&&(s.caption=this.charting.caption),this.charting.padding&&(s.padding.left=s.padding.right=s.padding.top=s.padding.bottom=this.charting.padding),this.charting.xAxisTitle&&(s.xAxis.title.text=this.charting.xAxisTitle),this.charting.yAxisTitle&&(s.valueAxis.title.text=this.charting.yAxisTitle),this.charting.description&&(s.description=this.charting.description),s.colorScheme=n.charting.colorScheme,s.seriesGroups=[l],l.formatSettings=n.charting.formatSettings,l.series=d,"line"===t||"stackedline"===t||"stackedline100"===t)d.forEach((function(t){t.symbolSize=8,t.symbolType="square"}));else if("pie"===t){const t=d[0].dataField;delete l.formatSettings,l.formatFunction=function(t,e){return isNaN(t)&&"object"==typeof t?e:t},l.showLabels=!0,d.length=0,d.push({dataField:t,displayText:m.xAxisDataField,initialAngle:0,radius:"60%"})}else if("donut"===t){const t=d[0].dataField;delete l.formatSettings,l.formatFunction=function(t,e){return isNaN(t)&&"object"==typeof t?e:t},l.showLabels=!0,d.length=0,d.push({dataField:t,displayText:m.xAxisDataField,initialAngle:0,radius:"60%",innerRadius:"30%"})}else if("bar"===t)t="column",l.orientation="horizontal",s.xAxis.textRotationAngle=90,s.valueAxis.textRotationAngle=30,s.valueAxis.flip=!0;else if("stackedbar"===t)t="stackedcolumn",l.orientation="horizontal",s.xAxis.textRotationAngle=90,s.valueAxis.textRotationAngle=30,s.valueAxis.flip=!0;else if("stackedbar100"===t)t="stackedcolumn100",l.orientation="horizontal",s.xAxis.textRotationAngle=90,s.valueAxis.textRotationAngle=30,s.valueAxis.flip=!0;else if("area"===t||"stackedarea"===t||"stackedarea100"===t){let t=1;for(let e=0;e<d.length;e++)d[e].opacity=t,t-=.2,t=Math.max(.3,t)}else"pyramid"===t?(t="stackedcolumn",l.columnsTopWidthPercent=0,l.columnsBottomWidthPercent=100,l.columnsGapPercent=50,l.seriesGapPercent=0):"funnel"===t&&(t="stackedcolumn",l.columnsTopWidthPercent=100,l.columnsBottomWidthPercent=30,l.columnsGapPercent=50,l.seriesGapPercent=0);return l.type=t,n.onChartInit&&n.onChartInit(s),s}if(n.header.visible&&n.$.header.firstElementChild){const e=n.enableShadowDOM?n.shadowRoot.getElementById(t):n.querySelector("#"+t);n.$.header.firstElementChild.classList.add("warning"),e&&e.classList.add("warning"),setTimeout((function(){n.$.header.firstElementChild.classList.remove("warning"),e&&e.classList.remove("warning")}),1e3)}}createChart(t,e){const n=this;n.charting.type=t;const r=n.getChart(t,e);if(n.charting.appendTo){const t="string"===n.charting.appendTo?document.querySelector(n.charting.appendTo):n.charting.appendTo;t&&t.appendChild(r)}else n._openChartDialog(r,t)}_openChartDialog(t,e){const n=this;if(!n.charting.dialog.enabled)return!1;const r=n._dialogChart||n._createDialog(n.charting.dialog),i=e.substring(0,1).toUpperCase()+e.substring(1),a="{{message}}"===n.charting.dialog.header?n.localize("dialogChartHeader",{value:i}):n.charting.dialog.header;t.style.width="100%",t.style.height="100%",r.header.innerHTML=a;const o=document.createElement("div");r.header.appendChild(o),o.classList.add("smart-icon-button","smart-icon-expand","smart-dialog-expand-button"),r.content.innerHTML="",r.content.style.width="100%",r.content.style.height="100%",r.btnCancel.classList.add("smart-hidden"),r.btnToggle.classList.add("show"),r.edit=()=>{void 0===r.edit?r.edit=!0:r.edit=!r.edit},n._resizable(r,r,"bottom-right-top-left",400,400),n._dialogChart||(r.modal=!0,r.onOpen=function(){n.charting.dialog.visible=!0},r.onClose=function(){n.charting.dialog.visible=!1},r.btnConfirm.onclick=function(){r.close()},r.btnClose.onclick=function(){r.close()},r.onkeydown=function(t){"Escape"===t.key&&r.close()},n._dialogChart=r),r.open(),setTimeout((function(){r.btnConfirm.focus(),r.content.innerHTML='\n            <style>\n             .smart-grid-chart-container {\n                display: flex;\n                width: 100%;\n                height: 100%;\n                box-sizing: border-box;\n                gap: 20px;\n                font-size: var(--smart-font-size);\n                overflow: hidden;\n                color: var(--smart-background-color);\n                background: var(--smart-background);\n            }\n\n            .smart-grid-chart-main-content {\n                flex: 3;\n                display: flex;\n            }\n\n            .smart-icon-download {\n               height: 20px;\n               align-self: end;\n               color:var(--smart-primary);\n            }\n\n            .smart-grid-chart-sidebar {\n                flex: 1;\n                width: 190px;\n                max-width: 190px;\n                display: flex;\n                flex-direction: column;\n            }\n\n            .smart-grid-chart-categoy-container {\n                overflow: auto;\n            }\n            @media (max-width: 768px) {\n                .smart-grid-chart-container {\n                    flex-direction: column;\n                }\n\n                .smart-grid-chart-sidebar {\n                    margin-left: 0;\n                    margin-top: 20px;\n                    padding: 10px;\n                }\n            }\n         </style>\n            </style>\n            <div class="smart-grid-chart-container">\n                <main class="smart-grid-chart-main-content">\n                \n                </main>\n                <aside class="smart-grid-chart-sidebar">\n                 \n                </aside>\n            </div>\n            ';const e=r.content.querySelector(".smart-grid-chart-main-content");e.appendChild(t);const i=document.createElement("span");e.appendChild(i),i.classList.add("smart-grid-icon","show","smart-icon-download"),i.title=n.localize("download"),i.onclick=()=>{t.saveAsPNG(t.caption||"chart")};const a=r.content.querySelector(".smart-grid-chart-sidebar"),o=`\n                <style>\n                     .smart-grid-chart-category {\n                       margin-bottom: 10px;\n                    }\n                    .smart-grid-chart-icons {\n                        display: flex;\n                        flex-wrap: wrap;\n                        gap: 5px;\n                    }\n                    .smart-grid-chart-icon-container {\n                        display: flex;\n                        flex-direction: column;\n                        align-items: center;\n                        text-align: center;          \n                    }\n                    .smart-grid-chart-icon-container svg:hover {\n                      transform: scale(1.1);\n                    }\n                    .smart-grid-chart-icon-container.selected svg {\n                    border: 2px solid var(--smart-border);\n                    }\n                    \n                    .smart-grid-chart-icon-container svg {\n                        width: 48px;\n                        height: 48px;\n                        margin-bottom: 10px;\n                        transition: transform 0.3s ease;\n                        cursor: pointer;\n                    }\n                    .smart-grid-chart-color-selector {\n                        bottom: 20px;\n                        left: 50%;\n                        padding: 10px;\n                        border-radius: 20px;\n                        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n                        display: flex;\n                        align-items: center;\n                        width: 100%;\n                        height: 44px;\n                    }\n                    .smart-grid-chart-scroll-button {\n                        border: none;\n                        border-radius: 50%;\n                        width: 12px;\n                        height: 12px;\n                        cursor: pointer;\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                        font-size: 16px;\n                        transition: background-color 0.3s;\n                    }\n                    .smart-grid-chart-scroll-button:hover {\n                     background-color: var(--smart-surface);\n                    }\n                    .smart-grid-chart-scroll-button:disabled {\n                        cursor: not-allowed;\n                    }\n                    .smart-grid-chart-color-container {\n                        display: flex;\n                        gap: 10px;\n                        overflow-x: auto;\n                        scroll-behavior: smooth;\n                        flex-grow: 1;\n                        padding: 0 10px;\n                        scrollbar-width: none;\n                        -ms-overflow-style: none;\n                    }\n                    .smart-grid-chart-color-container::-webkit-scrollbar {\n                       display: none;\n                    }\n                    .smart-grid-chart-color-circle {\n                        width: 12px;\n                        height: 12px;\n                        border-radius: 50%;\n                        cursor: pointer;\n                        border: 2px solid transparent;\n                        transition: border-color 0.3s ease;\n                        flex-shrink: 0;\n                    }\n                    .smart-grid-chart-color-circle:hover,\n                    .smart-grid-chart-color-circle.selected {\n                      border-color: var(--smart-border);\n                    }\n\n                    .smart-grid-chart-tab {\n                        width: 50%;\n                        padding: 5px 10px;\n                        cursor: pointer;\n                        transition: background-color 0.3s, color 0.3s;\n                        border-bottom: 2px solid transparent;\n                        text-align: center;\n                    }\n                    .smart-grid-chart-tab-content {\n                        padding: 10px;\n                        overflow: auto;\n                    }\n                    .smart-grid-chart-tabs {\n                        display: flex;\n                        border-bottom: 2px solid var(--smart-border);\n                        background-color: var(--smart-surface);\n                    }\n                    .smart-grid-chart-tab.active {\n                        background-color: var(--smart-background);\n                        color: var(--smart-primary);\n                        border-bottom: 2px solid  var(--smart-primary);\n                    }\n                    .smart-grid-chart-setting {\n                        display: flex;\n                        flex-direction: column;\n                    }\n                </style>\n                <div class="smart-flex smart-grid-chart-tabs">\n                    <div class="active smart-grid-chart-tab">\n                        ${n.localize("dialogAddColumnType")}\n                    </div>\n                    <div class="smart-grid-chart-tab">\n                        ${n.localize("commandBarCustomize")}\n                    </div>\n                </div>\n                <div class="smart-grid-chart-tab-content smart-grid-chart-categoy-container">\n                \x3c!-- Column Charts --\x3e\n                <div class="smart-grid-chart-category">\n                    <label>Column</h2>\n                    <div class="smart-grid-chart-icons">\n                    <div type="column" title="Clustered" class="smart-grid-chart-icon-container">\n                        \x3c!-- Column Clustered --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Column clustered">\n                        <rect x="12" y="28" width="8" height="22" rx="1.5" class="color1"/>\n                        <rect x="22" y="22" width="8" height="28" rx="1.5" class="color2"/>\n                        <rect x="32" y="18" width="8" height="32" rx="1.5" class="color3"/>\n                        </svg>\n                    </div>\n                    <div type="stackedcolumn" title="Stacked" class="smart-grid-chart-icon-container">\n                        \x3c!-- Stacked Column --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Stacked column">\n                        <rect x="12" y="38" width="8" height="12" class="color1"/>\n                        <rect x="12" y="28" width="8" height="10" class="color2"/>\n                        <rect x="12" y="18" width="8" height="10" class="color3"/>\n                        <rect x="24" y="34" width="8" height="16" class="color1"/>\n                        <rect x="24" y="24" width="8" height="10" class="color2"/>\n                        <rect x="24" y="14" width="8" height="10" class="color3"/>\n                        <rect x="36" y="30" width="8" height="20" class="color1"/>\n                        <rect x="36" y="20" width="8" height="10" class="color2"/>\n                        <rect x="36" y="12" width="8" height="8" class="color3"/>\n                        </svg>\n                    </div>\n                    <div type="stackedcolumn100" title="100% Stacked" class="smart-grid-chart-icon-container">\n                        \x3c!-- 100% Stacked Column --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="100% stacked column">\n                        <rect x="12" y="40" width="8" height="10" class="color1"/>\n                        <rect x="12" y="28" width="8" height="12" class="color2"/>\n                        <rect x="12" y="18" width="8" height="10" class="color3"/>\n                        <rect x="24" y="40" width="8" height="10" class="color1"/>\n                        <rect x="24" y="28" width="8" height="12" class="color2"/>\n                        <rect x="24" y="18" width="8" height="10" class="color3"/>\n                        <rect x="36" y="40" width="8" height="10" class="color1"/>\n                        <rect x="36" y="28" width="8" height="12" class="color2"/>\n                        <rect x="36" y="18" width="8" height="10" class="color3"/>\n                        </svg>\n                    </div>\n                    </div>\n                </div>\n\n                \x3c!-- Bar Charts --\x3e\n                <div class="smart-grid-chart-category">\n                    <label>Bar</label>\n                    <div class="smart-grid-chart-icons">\n                    <div type="bar" title="Grouped" class="smart-grid-chart-icon-container">\n                        \x3c!-- Bar Grouped --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Bar grouped">\n                        <rect x="10" y="14" width="44" height="6" rx="3" class="color1"/>\n                        <rect x="10" y="28" width="36" height="6" rx="3" class="color2"/>\n                        <rect x="10" y="42" width="30" height="6" rx="3" class="color3"/>\n                        </svg>\n                    </div>\n                    <div type="stackedbar" title="Stacked" class="smart-grid-chart-icon-container">\n                        \x3c!-- Stacked Bar --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Stacked bar">\n                        <rect x="10" y="14" width="16" height="6" class="color1"/>\n                        <rect x="26" y="14" width="14" height="6" class="color2"/>\n                        <rect x="40" y="14" width="14" height="6" class="color3"/>\n                        <rect x="10" y="28" width="20" height="6" class="color1"/>\n                        <rect x="30" y="28" width="12" height="6" class="color2"/>\n                        <rect x="42" y="28" width="14" height="6" class="color3"/>\n                        <rect x="10" y="42" width="24" height="6" class="color1"/>\n                        <rect x="34" y="42" width="10" height="6" class="color2"/>\n                        <rect x="44" y="42" width="16" height="6" class="color3"/>\n                        </svg>\n                    </div>\n                    <div type="stackedbar100" title="100% Stacked" class="smart-grid-chart-icon-container">\n                        \x3c!-- 100% Stacked Bar --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="100% stacked bar">\n                        <rect x="10" y="14" width="20" height="6" class="color1"/>\n                        <rect x="30" y="14" width="14" height="6" class="color2"/>\n                        <rect x="44" y="14" width="10" height="6" class="color3"/>\n                        <rect x="10" y="28" width="20" height="6" class="color1"/>\n                        <rect x="30" y="28" width="14" height="6" class="color2"/>\n                        <rect x="44" y="28" width="10" height="6" class="color3"/>\n                        <rect x="10" y="42" width="20" height="6" class="color1"/>\n                        <rect x="30" y="42" width="14" height="6" class="color2"/>\n                        <rect x="44" y="42" width="10" height="6" class="color3"/>\n                        </svg>\n                    </div>\n                    </div>\n                </div>\n\n                \x3c!-- Line Charts --\x3e\n                <div class="smart-grid-chart-category">\n                    <label>Line</label>\n                    <div class="smart-grid-chart-icons">\n                    <div type="line" title="Multi" class="smart-grid-chart-icon-container">\n                        \x3c!-- Multi Line --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Line multi">\n                        <polyline style="fill: none;" points="8,44 18,34 30,38 44,22 56,28" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="color1"/>\n                        <polyline style="fill: none;" points="8,36 18,28 30,30 44,20 56,24" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="color2"/>\n                        <polyline style="fill: none;" points="8,48 18,40 30,30 44,34 56,38" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="color3"/>\n                        </svg>\n                    </div>\n                    \n                    <div type="stackedline" title="Stacked" class="smart-grid-chart-icon-container">\n                        \x3c!-- Stacked Line --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Stacked line">\n                        <polyline style="fill: none;" points="8,48 18,40 30,42 44,32 56,36" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="color1"/>\n                        <polyline style="fill: none;" points="8,44 18,36 30,38 44,26 56,30" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="color2"/>\n                        <polyline style="fill: none;" points="8,40 18,32 30,34 44,20 56,24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="color3"/>\n                        </svg>\n                    </div>\n                    <div type="stackedline100" title="100% Stacked" class="smart-grid-chart-icon-container">\n                        \x3c!-- 100% Stacked Line --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="100% stacked line">\n                        <polyline style="fill: none;" points="8,48 18,42 30,44 44,36 56,40" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="color1"/>\n                        <polyline style="fill: none;" points="8,36 18,32 30,34 44,28 56,32" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="color2"/>\n                        <polyline style="fill: none;" points="8,24 18,22 30,24 44,20 56,24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="color3"/>\n                        </svg>\n                    </div>\n                    </div>\n                </div>\n\n                \x3c!-- Area Charts --\x3e\n                <div class="smart-grid-chart-category">\n                    <label>Area</label>\n                    <div class="smart-grid-chart-icons">\n                    <div type="area" title="Area" class="smart-grid-chart-icon-container">\n                        \x3c!-- Area --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">\n                        <polygon points="8,52 8,42 20,34 32,38 44,28 56,32 56,52" class="color1" opacity="0.9"/>\n                        <polygon points="8,52 8,46 20,38 32,42 44,34 56,36 56,52" class="color2" opacity="0.75"/>\n                        <polygon points="8,52 8,48 20,42 32,46 44,40 56,44 56,52" class="color3" opacity="0.6"/>\n                        </svg>\n                    </div>\n                    <div type="stackedarea" title="Stacked" class="smart-grid-chart-icon-container">\n                        \x3c!-- Stacked Area --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">\n                        <polygon points="8,52 8,42 20,34 32,38 44,28 56,32 56,52" class="color1" opacity="0.9"/>\n                        <polygon points="8,52 8,46 20,38 32,42 44,34 56,36 56,52" class="color2" opacity="0.75"/>\n                        <polygon points="8,52 8,48 20,42 32,46 44,40 56,44 56,52" class="color3" opacity="0.6"/>\n                        </svg>\n                    </div>\n                    <div type="stackedarea100" title="100% Stacked" class="smart-grid-chart-icon-container">\n                        \x3c!-- 100% Stacked Area --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">\n                        <polygon points="8,52 8,44 20,36 32,40 44,32 56,36 56,52" class="color1" opacity="0.9"/>\n                        <polygon points="8,44 8,36 20,30 32,34 44,28 56,30 56,44" class="color2" opacity="0.75"/>\n                        <polygon points="8,36 8,28 20,24 32,28 44,24 56,28 56,36" class="color3" opacity="0.6"/>\n                        </svg>\n                    </div>\n                    </div>\n                </div>\n\n                \x3c!-- Pie Charts --\x3e\n                <div class="smart-grid-chart-category">\n                    <label>Pie</label>\n                    <div class="smart-grid-chart-icons">\n                    <div type="pie" title="Pie" class="smart-grid-chart-icon-container">\n                        \x3c!-- Pie Chart --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">\n                        <path d="M32 32 L32 12 A20 20 0 0 1 52 32 Z" class="color1"/>\n                        <path d="M32 32 L52 32 A20 20 0 0 1 24 50 Z" class="color2"/>\n                        <path d="M32 32 L24 50 A20 20 0 0 1 32 12 Z" class="color3"/>\n                        </svg>\n                    </div>\n                    <div type="donut" title="Donut" class="smart-grid-chart-icon-container">\n                        \x3c!-- Donut Chart --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">\n                        <path d="M32,12 A20,20 0 0 1 52,32 L42,32 A10,10 0 0 0 32,22 Z" class="color1"/>\n                        <path d="M52,32 A20,20 0 0 1 24,50 L29,41 A10,10 0 0 0 42,32 Z" class="color2"/>\n                        <path d="M24,50 A20,20 0 0 1 32,12 L32,22 A10,10 0 0 0 29,41 Z" class="color3"/>\n                        </svg>\n                    </div>\n                    </div>\n                </div>\n\n                \x3c!-- Scatter/Bubble Charts --\x3e\n                <div class="smart-grid-chart-category">\n                    <label>Scatter / Bubble</label>\n                    <div class="smart-grid-chart-icons">\n                    <div type="scatter" title="Scatter" class="smart-grid-chart-icon-container">\n                        \x3c!-- Scatter --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Scatter">\n                        <circle cx="12" cy="44" r="3" class="color1"/>\n                        <circle cx="24" cy="34" r="3" class="color1"/>\n                        <circle cx="36" cy="38" r="3" class="color1"/>\n                        <circle cx="16" cy="28" r="3" class="color2"/>\n                        <circle cx="28" cy="24" r="3" class="color2"/>\n                        <circle cx="40" cy="30" r="3" class="color2"/>\n                        <circle cx="20" cy="50" r="3" class="color3"/>\n                        <circle cx="32" cy="40" r="3" class="color3"/>\n                        <circle cx="44" cy="44" r="3" class="color3"/>\n                        </svg>\n                    </div>\n                    <div type="bubble" title="Bubble" class="smart-grid-chart-icon-container">\n                        \x3c!-- Bubble --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Bubble chart">\n                        \n                        <circle cx="12" cy="44" r="3" class="color1"/>\n                        <circle cx="24" cy="34" r="5" class="color1"/>\n                        <circle cx="36" cy="38" r="4" class="color1"/>\n                        <circle cx="16" cy="28" r="4" class="color2"/>\n                        <circle cx="28" cy="24" r="3" class="color2"/>\n                        <circle cx="40" cy="30" r="5" class="color2"/>\n                        <circle cx="20" cy="50" r="5" class="color3"/>\n                        <circle cx="32" cy="40" r="3" class="color3"/>\n                        <circle cx="44" cy="44" r="4" class="color3"/>\n                        </svg>\n                    </div>\n                    </div>\n                </div>\n\n                \x3c!-- Funnel / Pyramid Charts --\x3e\n                <div class="smart-grid-chart-category">\n                    <label>Funnel / Pyramid</label>\n                    <div class="smart-grid-chart-icons">\n                    <div type="funnel" title="Funnel" class="smart-grid-chart-icon-container">\n                        \x3c!-- Funnel Chart --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Funnel chart">\n                        \n                        <polygon points="12,12 52,12 44,24 20,24" class="color1"/>\n                        <polygon points="20,24 44,24 38,36 26,36" class="color2"/>\n                        <polygon points="26,36 38,36 34,48 30,48" class="color3"/>\n                        </svg>\n                    </div>\n                    <div type="pyramid" title="Pyramid" class="smart-grid-chart-icon-container">\n                        \x3c!-- Pyramid Chart --\x3e\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-label="Pyramid chart">\n                        \n                        <polygon points="12,48 52,48 52,44 12,44" class="color1"/>\n                        <polygon points="20,40 44,40 44,36 20,36" class="color2"/>\n                        <polygon points="28,32 36,32 36,28 28,28" class="color3"/>\n                        </svg>\n                    </div>\n                    </div>\n                </div>\n                </div>\n                <div class="smart-grid-chart-tab-content">\n                    <div class="smart-grid-chart-setting">\n                        Padding\n                        <input type="number" class="smart-input smart-grid-chart-padding" min="0" max="100" step="1" value="5"/>\n                    </div>\n                    <div class="smart-grid-chart-setting" style="margin-top: 10px;">\n                        Title\n                        <input type="text" class="smart-input smart-grid-chart-title" value=""/>\n                    </div>\n                    <div class="smart-grid-chart-setting"  style="margin-top: 10px;">\n                        Description\n                        <input type="text" class="smart-input smart-grid-chart-description" value=""/>\n                    </div>\n                    <div class="smart-grid-chart-setting" style="margin-top: 10px;">\n                        X Axis Title\n                        <input type="text" class="smart-input smart-grid-chart-x-title" value=""/>\n                    </div>\n                    <div class="smart-grid-chart-setting"  style="margin-top: 10px;">\n                        Y Axis Title\n                        <input type="text" class="smart-input smart-grid-chart-y-title" value=""/>\n                    </div>\n                    <div class="smart-grid-chart-setting"  style="margin-top: 10px;">\n                        Flip X Axis\n                        <div class="flip-x-axis"><div></div></div>\n                    </div>\n                    <div class="smart-grid-chart-setting" style="margin-top: 10px;">\n                        Flip Value Axis\n                        <div class="flip-y-axis"><div></div></div>\n                    </div>\n                    <div class="smart-grid-chart-setting" style="margin-top: 10px;">\n                        Legend\n                        <div class="show-legend"><div></div></div>\n                    </div>\n                </div>\n                \x3c!-- Color Scheme Selector --\x3e\n                <div class="smart-grid-chart-color-selector">\n                    <button class="smart-grid-chart-scroll-button">←</button>\n                    <div class="smart-grid-chart-color-container"></div>\n                    <button class="smart-grid-chart-scroll-button">→</button>\n                </div>`;a.innerHTML=o;const s=[{name:"scheme01",colors:["#307DD7","#AA4643","#89A54E","#71588F","#4198AF"]},{name:"scheme02",colors:["#7FD13B","#EA157A","#FEB80A","#00ADDC","#738AC8"]},{name:"scheme03",colors:["#E8601A","#FF9639","#F5BD6A","#599994","#115D6E"]},{name:"scheme04",colors:["#D02841","#FF7C41","#FFC051","#5B5F4D","#364651"]},{name:"scheme05",colors:["#25A0DA","#309B46","#8EBC00","#FF7515","#FFAE00"]},{name:"scheme06",colors:["#0A3A4A","#196674","#33A6B2","#9AC836","#D0E64B"]},{name:"scheme07",colors:["#CC6B32","#FFAB48","#FFE7AD","#A7C9AE","#888A63"]},{name:"scheme08",colors:["#3F3943","#01A2A6","#29D9C2","#BDF271","#FFFFA6"]},{name:"scheme09",colors:["#1B2B32","#37646F","#A3ABAF","#E1E7E8","#B22E2F"]},{name:"scheme10",colors:["#5A4B53","#9C3C58","#DE2B5B","#D86A41","#D2A825"]},{name:"scheme11",colors:["#993144","#FFA257","#CCA56A","#ADA072","#949681"]},{name:"scheme12",colors:["#105B63","#EEEAC5","#FFD34E","#DB9E36","#BD4932"]},{name:"scheme13",colors:["#BBEBBC","#F0EE94","#F5C465","#FA7642","#FF1E54"]},{name:"scheme14",colors:["#60573E","#F2EEAC","#BFA575","#A63841","#BFB8A3"]},{name:"scheme15",colors:["#444546","#FFBB6E","#F28D00","#D94F00","#7F203B"]},{name:"scheme16",colors:["#583C39","#674E49","#948658","#F0E99A","#564E49"]},{name:"scheme17",colors:["#142D58","#447F6E","#E1B65B","#C8782A","#9E3E17"]},{name:"scheme18",colors:["#4D2B1F","#635D61","#7992A2","#97BFD5","#BFDCF5"]},{name:"scheme19",colors:["#844341","#D5CC92","#BBA146","#897B26","#55591C"]},{name:"scheme20",colors:["#56626B","#6C9380","#C0CA55","#F07C6C","#AD5472"]},{name:"scheme21",colors:["#96003A","#FF7347","#FFBC7B","#FF4154","#642223"]},{name:"scheme22",colors:["#5D7359","#E0D697","#D6AA5C","#8C5430","#661C0E"]},{name:"scheme23",colors:["#16193B","#35478C","#4E7AC7","#7FB2F0","#ADD5F7"]},{name:"scheme24",colors:["#7B1A25","#BF5322","#9DA860","#CEA457","#B67818"]},{name:"scheme25",colors:["#0081DA","#3AAFFF","#99C900","#FFEB3D","#309B46"]},{name:"scheme26",colors:["#0069A5","#0098EE","#7BD2F6","#FFB800","#FF6800"]},{name:"scheme27",colors:["#FF6800","#A0A700","#FF8D00","#678900","#0069A5"]}];function c(e){const r=`\n        .color1 { fill: ${e.colors[0]}; stroke: ${e.colors[0]}; }\n        .color2 { fill: ${e.colors[1]}; stroke: ${e.colors[1]}; }\n        .color3 { fill: ${e.colors[2]}; stroke: ${e.colors[2]}; }\n      `;let i=a.querySelector("#colorSchemeStyle");i||(i=document.createElement("style"),i.id="colorSchemeStyle",document.head.appendChild(i)),i.textContent=r,t.animation="none",t.colorScheme=e.name,n.charting.colorScheme=e.name}function l(){const t=a.querySelector(".smart-grid-chart-color-container"),e=a.querySelector(".smart-grid-chart-scroll-button"),n=a.querySelector(".smart-grid-chart-scroll-button:nth-of-type(2)");0===t.scrollLeft?e.classList.add("smart-hidden"):e.classList.remove("smart-hidden"),t.scrollLeft+t.clientWidth>=t.scrollWidth?n.classList.add("smart-hidden"):n.classList.remove("smart-hidden")}c(s.find((t=>t.name===n.charting.colorScheme))||s[0]),function(){const t=a.querySelector(".smart-grid-chart-color-container");s.forEach(((e,n)=>{const r=document.createElement("div");r.className="smart-grid-chart-color-circle",r.style.backgroundColor=e.colors[0],r.dataset.scheme=e.name,r.title=e.name,0===n&&r.classList.add("selected"),r.addEventListener("click",(()=>{a.querySelectorAll(".smart-grid-chart-color-circle").forEach((t=>t.classList.remove("selected"))),r.classList.add("selected"),c(e)})),t.appendChild(r)}))}(),function(){const t=a.querySelector(".smart-grid-chart-color-container"),e=a.querySelector(".smart-grid-chart-scroll-button"),n=a.querySelector(".smart-grid-chart-scroll-button:nth-of-type(2)");e.addEventListener("click",(()=>{t.scrollBy({left:-100,behavior:"smooth"}),setTimeout(l,300)})),n.addEventListener("click",(()=>{t.scrollBy({left:100,behavior:"smooth"}),setTimeout(l,300)})),t.addEventListener("scroll",l),l()}();const d=a.querySelectorAll(".smart-grid-chart-tab"),h=a.querySelectorAll(".smart-grid-chart-tab-content");d.forEach(((t,e)=>{t.onclick=()=>{d.forEach((t=>t.classList.remove("active"))),t.classList.add("active"),h.forEach((t=>t.style.display="none")),h[e].style.display="block";const n=a.querySelector(".smart-grid-chart-color-selector");n.style.display=1===e?"none":"flex"}})),h.forEach(((t,e)=>t.style.display=0===e?"block":"none")),h[0].querySelectorAll(".smart-grid-chart-icon-container").forEach((e=>{e.getAttribute("type")===n.charting.type&&e.classList.add("selected"),e.onclick=()=>{const r=e.getAttribute("type");n.charting.type=r,h[0].querySelectorAll(".smart-grid-chart-icon-container").forEach((t=>t.classList.remove("selected"))),e.classList.add("selected");const i=n.getChart(r);i&&(i.animation="none",i.colorScheme=t.colorScheme,i.caption=t.caption,i.description=t.description,i.padding=t.padding),i.style.width="100%",i.style.height="100%",t.parentElement.replaceChild(i,t),t=i}}));const g=h[1].querySelector(".flip-x-axis"),m=h[1].querySelector(".flip-y-axis"),p=h[1].querySelector(".show-legend");n._createColumnBooleanEditor(g.firstElementChild,{value:"bottom"!==t.xAxis.position},g,g.parentElement,document.createElement("span")),n._createColumnBooleanEditor(m.firstElementChild,{value:"left"!==t.valueAxis.position},m,m.parentElement,document.createElement("span")),n._createColumnBooleanEditor(p.firstElementChild,{value:t.showLegend},p,p.parentElement,document.createElement("span"));const x=h[1].querySelector(".smart-grid-chart-padding");x.onchange=x.oninput=()=>{t.padding.left=n.charting.padding=t.padding.top=t.padding.right=t.padding.bottom=Math.max(0,Math.min(parseInt(x.value),100)),t.refresh()},x.value=n.charting.padding||5;const v=h[1].querySelector(".smart-grid-chart-title");v.value=t.caption,v.onchange=()=>{t.caption=v.value,n.charting.dialog.header=t.caption,r.header.innerHTML=t.caption,n.charting.caption=t.caption},v.value=n.charting.caption||"";const u=h[1].querySelector(".smart-grid-chart-description");u.onchange=()=>{t.description=u.value,n.charting.description=t.description},u.value=n.charting.description||"";const y=h[1].querySelector(".smart-grid-chart-x-title");y.onchange=()=>{t.xAxis.title.text=y.value,n.charting.xAxisTitle=y.value},y.value=n.charting.xAxisTitle||"";const w=h[1].querySelector(".smart-grid-chart-y-title");w.onchange=()=>{t.valueAxis.title.text=w.value,n.charting.yAxisTitle=w.value},w.value=n.charting.yAxisTitle||"",g.firstElementChild.onchange=e=>{t.xAxis.position=e?"top":"bottom",n.charting.xAxisPosition=e,t.refresh()},!1===n.charting.xAxisPosition&&(g.firstElementChild.setAttribute("checked",""),g.firstElementChild.value=!0),m.firstElementChild.onchange=e=>{t.valueAxis.position=e?"right":"left",n.charting.yAxisPosition=e,t.refresh()},!1===n.charting.yAxisPosition&&(m.firstElementChild.setAttribute("checked",""),m.firstElementChild.value=!0),p.firstElementChild.onchange=e=>{t.showLegend=e,n.charting.showLegend=e},!1===n.charting.showLegend&&(p.firstElementChild.removeAttribute("checked"),p.firstElementChild.value=!1)}),100)}});