1 line
15 KiB
JavaScript
Executable File
1 line
15 KiB
JavaScript
Executable File
function shuffleArray(t){for(let e=t.length-1;0<e;e--){var o=Math.floor(Math.random()*(e+1)),r=t[e];t[e]=t[o],t[o]=r}return t}new CustomApexChart({selector:"#basic-column",options:()=>({chart:{height:350,type:"bar",toolbar:{show:!1}},plotOptions:{bar:{endingShape:"flat",columnWidth:"65%",borderRadius:6,borderRadiusApplication:"end"}},dataLabels:{enabled:!1},stroke:{show:!0,width:2,colors:["transparent"]},colors:[ins("primary"),ins("secondary"),ins("info")],series:[{name:"Net Profit",data:[44,55,57,56,61,58,63,60,66]},{name:"Revenue",data:[76,85,101,98,87,105,91,114,94]},{name:"Free Cash Flow",data:[35,41,36,26,45,48,52,53,41]}],xaxis:{categories:["Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"]},legend:{offsetY:5},yaxis:{title:{text:"$ (thousands)",offsetX:0,style:{fontSize:"14px",fontWeight:500}},labels:{offsetX:-7}},fill:{opacity:1},grid:{row:{colors:["transparent","transparent"],opacity:.2},borderColor:[ins("border-color")],padding:{top:-20,right:0,bottom:-5,left:5}},tooltip:{y:{formatter:function(e){return"$ "+e+" thousands"}}}})}),new CustomApexChart({selector:"#datalabels-column",options:()=>({chart:{height:350,type:"bar",toolbar:{show:!1}},plotOptions:{bar:{borderRadius:10,dataLabels:{position:"top"}}},dataLabels:{enabled:!0,formatter:function(e){return e+"%"},offsetY:-25,style:{fontSize:"12px",colors:[ins("body-color")]}},colors:[ins("secondary")],legend:{show:!0,horizontalAlign:"center",offsetX:0,offsetY:-5},series:[{name:"Inflation",data:[2.3,3.1,4,10.1,4,3.6,3.2,2.3,1.4,.8,.5,.2]}],xaxis:{categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],position:"top",labels:{offsetY:0},axisBorder:{show:!1},axisTicks:{show:!1},tooltip:{enabled:!0,offsetY:-10}},yaxis:{axisBorder:{show:!1},axisTicks:{show:!1},labels:{show:!1,formatter:function(e){return e+"%"}}},title:{text:"Monthly Inflation in Argentina, 2025",floating:!0,offsetY:330,align:"center",style:{color:ins("body-color"),fontSize:"14px",fontWeight:500}},grid:{row:{colors:["transparent","transparent"],opacity:.2},borderColor:[ins("border-color")]}})}),new CustomApexChart({selector:"#stacked-column",options:()=>({chart:{height:350,type:"bar",stacked:!0,toolbar:{show:!1}},plotOptions:{bar:{horizontal:!1,columnWidth:"50%"}},series:[{name:"iPhone 16",data:[65,59,80,81,56,55,40,72]},{name:"iPhone 16 Pro",data:[28,48,40,19,86,27,90,50]},{name:"iPhone 15",data:[35,29,50,45,60,33,38,47]}],xaxis:{categories:["2023 Q1","2023 Q2","2023 Q3","2023 Q4","2024 Q1","2024 Q2","2024 Q3","2024 Q4"]},yaxis:{labels:{offsetX:-10}},colors:[ins("primary"),ins("secondary"),ins("info"),ins("danger")],fill:{opacity:1},legend:{offsetY:7},tooltip:{y:{formatter:function(e){return+e+" Orders"}}},grid:{row:{colors:["transparent","transparent"],opacity:.2},borderColor:[ins("border-color")],padding:{top:-20,right:0,bottom:-5,left:0}}})}),new CustomApexChart({selector:"#full-stacked-column",options:()=>({chart:{height:350,type:"bar",stacked:!0,stackType:"100%",toolbar:{show:!1}},plotOptions:{bar:{columnWidth:"50%"}},series:[{name:"iPhone 16",data:[44,55,41,67,22,43,21,49]},{name:"iPhone 16 Pro",data:[13,23,20,8,13,27,33,12]},{name:"iPhone 15",data:[11,17,15,15,21,14,15,13]}],xaxis:{categories:["2023 Q1","2023 Q2","2023 Q3","2023 Q4","2024 Q1","2024 Q2","2024 Q3","2024 Q4"]},yaxis:{labels:{offsetX:-10}},fill:{opacity:1},tooltip:{y:{formatter:function(e){return+e+" Orders"}}},legend:{offsetY:7},colors:[ins("success"),ins("info"),ins("warning")],grid:{row:{colors:["transparent","transparent"],opacity:.2},borderColor:[ins("border-color")],padding:{top:-20,right:0,bottom:-5,left:0}}})}),new CustomApexChart({selector:"#grouped-stacked-column",options:()=>({series:[{name:"Q1 Budget",group:"budget",data:[44e3,55e3,41e3,67e3,22e3,43e3]},{name:"Q1 Actual",group:"actual",data:[48e3,5e4,4e4,65e3,25e3,4e4]},{name:"Q2 Budget",group:"budget",data:[13e3,36e3,2e4,8e3,13e3,27e3]},{name:"Q2 Actual",group:"actual",data:[2e4,4e4,25e3,1e4,12e3,28e3]}],chart:{type:"bar",height:350,stacked:!0},stroke:{width:1,colors:["#fff"]},dataLabels:{formatter:e=>e/1e3+"K"},plotOptions:{bar:{horizontal:!1}},xaxis:{categories:["Online advertising","Sales Training","Print advertising","Catalogs","Meetings","Public relations"]},fill:{opacity:1},colors:[ins("primary-rgb",.7),ins("primary"),ins("secondary-rgb",.7),ins("secondary")],yaxis:{labels:{formatter:e=>e/1e3+"K",offsetX:-10}},legend:{position:"top",horizontalAlign:"center",offsetY:-8},grid:{borderColor:[ins("border-color")],padding:{top:-20,right:-30,bottom:-5,left:5}}})}),new CustomApexChart({selector:"#dumbbell-chart",options:()=>({series:[{data:[{x:"2019",y:[2400,4300]},{x:"2020",y:[3e3,4800]},{x:"2021",y:[3200,7200]},{x:"2022",y:[3500,5100]},{x:"2023",y:[4e3,5300]},{x:"2024",y:[4700,6700]},{x:"2025",y:[4200,6e3]}]}],chart:{height:350,type:"rangeBar",zoom:{enabled:!1}},plotOptions:{bar:{isDumbbell:!0,columnWidth:3,dumbbellColors:[[ins("secondary"),ins("success")]]}},legend:{show:!0,offsetY:-8,showForSingleSeries:!0,position:"top",horizontalAlign:"center",customLegendItems:["Product A","Product B"]},fill:{type:"gradient",gradient:{type:"vertical",gradientToColors:[ins("success")],inverseColors:!0,stops:[0,100]}},grid:{xaxis:{lines:{show:!0}},yaxis:{lines:{show:!1}},borderColor:[ins("border-color")],padding:{top:-20,right:0,bottom:-15,left:5}},colors:[ins("primary"),ins("secondary")],xaxis:{tickPlacement:"on",axisBorder:{show:!0,color:ins("border-color")},axisTicks:{show:!0,color:ins("border-color")}},yaxis:{labels:{offsetX:-10}}})}),new CustomApexChart({selector:"#column-with-markers",options:()=>({series:[{name:"Actual",data:[{x:"2018",y:1292,goals:[{name:"Expected",value:1400,strokeHeight:5,strokeColor:ins("secondary")}]},{x:"2029",y:4432,goals:[{name:"Expected",value:5400,strokeHeight:5,strokeColor:ins("secondary")}]},{x:"2020",y:5423,goals:[{name:"Expected",value:5200,strokeHeight:5,strokeColor:ins("secondary")}]},{x:"2021",y:6653,goals:[{name:"Expected",value:6500,strokeHeight:5,strokeColor:ins("secondary")}]},{x:"2022",y:8133,goals:[{name:"Expected",value:6600,strokeHeight:13,strokeWidth:0,strokeLineCap:"round",strokeColor:ins("secondary")}]},{x:"2023",y:7132,goals:[{name:"Expected",value:7500,strokeHeight:5,strokeColor:ins("secondary")}]},{x:"2024",y:7332,goals:[{name:"Expected",value:8700,strokeHeight:5,strokeColor:ins("secondary")}]},{x:"2025",y:6553,goals:[{name:"Expected",value:7300,strokeHeight:2,strokeDashArray:2,strokeColor:ins("secondary")}]}]}],chart:{height:350,type:"bar"},plotOptions:{bar:{columnWidth:"60%"}},colors:[ins("primary"),ins("secondary")],dataLabels:{enabled:!1},yaxis:{labels:{offsetX:-10}},tooltip:{y:{formatter:function(e){return e+" Sales"}}},legend:{show:!0,showForSingleSeries:!0,customLegendItems:["Actual","Expected"],markers:{fillColors:[ins("primary"),ins("secondary")]}},grid:{borderColor:[ins("border-color")],padding:{top:-20,right:0,bottom:-5,left:0}}})}),dayjs.extend(window.dayjs_plugin_quarterOfYear),new CustomApexChart({selector:"#column-with-group-label",options:()=>({series:[{name:"Sales",data:[{x:"2024/01/01",y:400},{x:"2024/04/01",y:430},{x:"2024/07/01",y:448},{x:"2024/10/01",y:470},{x:"2025/01/01",y:540},{x:"2025/04/01",y:580},{x:"2025/07/01",y:690},{x:"2025/10/01",y:690}]}],chart:{type:"bar",height:350,toolbar:{show:!1}},plotOptions:{bar:{horizontal:!1,columnWidth:"45%"}},colors:[ins("secondary")],xaxis:{type:"category",labels:{formatter:function(e){return"Q"+dayjs(e).quarter()},style:{fontSize:"12px",fontWeight:600}},group:{style:{fontSize:"12px",fontWeight:700},groups:[{title:"2024",cols:4},{title:"2025",cols:4}]}},yaxis:{labels:{offsetX:-10}},tooltip:{x:{formatter:function(e){return"Q"+dayjs(e).quarter()+" "+dayjs(e).format("YYYY")}}},grid:{borderColor:[ins("border-color")],padding:{top:-20,right:0,bottom:-15,left:0}}})}),new CustomApexChart({selector:"#rotate-labels-column",options:()=>({annotations:{points:[{x:"Bananas",seriesIndex:0,label:{borderColor:ins("secondary"),offsetY:0,style:{color:"#fff",background:ins("secondary")},text:"Bananas are good"}}]},chart:{height:350,type:"bar",toolbar:{show:!1}},plotOptions:{bar:{columnWidth:"50%",borderRadius:10}},dataLabels:{enabled:!1},stroke:{width:2},colors:[ins("primary")],series:[{name:"Servings",data:[44,55,41,67,22,43,21,33,45,31,87,65,35]}],grid:{borderColor:[ins("border-color")],padding:{top:0,right:-2,bottom:-35,left:10}},xaxis:{labels:{rotate:-45},categories:["Apples","Oranges","Strawberries","Pineapples","Mangoes","Bananas","Blackberries","Pears","Watermelons","Cherries","Pomegranates","Tangerines","Papayas"]},yaxis:{title:{text:"Servings",style:{fontSize:"14px",fontWeight:500}},labels:{offsetX:-10}},fill:{type:"gradient",gradient:{shade:"light",type:"horizontal",shadeIntensity:.25,gradientToColors:void 0,inverseColors:!0,opacityFrom:.85,opacityTo:.85,stops:[50,0,100]}}})}),new CustomApexChart({selector:"#negative-value-column",options:()=>({chart:{height:350,type:"bar",toolbar:{show:!1}},plotOptions:{bar:{colors:{ranges:[{from:-100,to:-46,color:ins("danger")},{from:-45,to:0,color:ins("warning")}]},columnWidth:"80%",borderRadius:6,borderRadiusApplication:"end"}},dataLabels:{enabled:!1},colors:[ins("primary")],series:[{name:"Cash Flow",data:[1.45,5.42,5.9,-.42,-12.6,-18.1,-18.2,-14.16,-11.1,-6.09,.34,3.88,13.07,5.8,2,7.37,8.1,13.57,15.75,17.1,19.8,-27.03,-54.4,-47.2,-43.3,-18.6,-48.6,-41.1,-39.6,-37.6,-29.4,-21.4,-2.4]}],yaxis:{title:{text:"Growth",style:{fontSize:"14px",fontWeight:500}},labels:{formatter:function(e){return e.toFixed(0)+"%"},offsetX:-10}},xaxis:{categories:["2011-01-01","2011-02-01","2011-03-01","2011-04-01","2011-05-01","2011-06-01","2011-07-01","2011-08-01","2011-09-01","2011-10-01","2011-11-01","2011-12-01","2012-01-01","2012-02-01","2012-03-01","2012-04-01","2012-05-01","2012-06-01","2012-07-01","2012-08-01","2012-09-01","2012-10-01","2012-11-01","2012-12-01","2013-01-01","2013-02-01","2013-03-01","2013-04-01","2013-05-01","2013-06-01","2013-07-01","2013-08-01","2013-09-01"],labels:{rotate:-90}},grid:{borderColor:[ins("border-color")],padding:{top:-20,right:10,bottom:-25,left:10}}})}),new CustomApexChart({selector:"#distributed-column",options:()=>({chart:{height:350,type:"bar",toolbar:{show:!1},events:{click:function(e,t,o){console.log(e,t,o)}}},colors:[ins("primary"),ins("secondary"),ins("info"),ins("danger"),ins("success"),ins("warning"),ins("purple"),ins("orange")],plotOptions:{bar:{columnWidth:"45%",distributed:!0}},dataLabels:{enabled:!1},series:[{data:[21,22,10,28,16,21,13,30]}],xaxis:{categories:["John","Joe","Jake","Amber","Peter","Mary","David","Lily"],labels:{style:{fontSize:"14px"}}},yaxis:{labels:{offsetX:-10}},legend:{offsetY:7},grid:{borderColor:[ins("border-color")],padding:{top:-20,right:10,bottom:-8,left:10}}})}),new CustomApexChart({selector:"#range-column",options:()=>({chart:{height:350,type:"rangeBar"},plotOptions:{bar:{horizontal:!1}},dataLabels:{enabled:!0},legend:{offsetY:7},yaxis:{labels:{offsetX:-10}},grid:{borderColor:[ins("border-color")],padding:{top:-20,right:0,bottom:-5,left:0}},colors:[ins("primary"),ins("secondary")],series:[{name:"Product A",data:[{x:"Team A",y:[1,5]},{x:"Team B",y:[4,6]},{x:"Team C",y:[5,8]},{x:"Team D",y:[3,11]}]},{name:"Product B",data:[{x:"Team A",y:[2,6]},{x:"Team B",y:[1,3]},{x:"Team C",y:[7,8]},{x:"Team D",y:[5,9]}]}]})}),Apex={chart:{toolbar:{show:!1}},tooltip:{shared:!1},legend:{show:!1}};let arrayData=[{y:400,quarters:[{x:"Q1",y:120},{x:"Q2",y:90},{x:"Q3",y:100},{x:"Q4",y:90}]},{y:430,quarters:[{x:"Q1",y:120},{x:"Q2",y:110},{x:"Q3",y:90},{x:"Q4",y:110}]},{y:448,quarters:[{x:"Q1",y:70},{x:"Q2",y:100},{x:"Q3",y:140},{x:"Q4",y:138}]},{y:470,quarters:[{x:"Q1",y:150},{x:"Q2",y:60},{x:"Q3",y:190},{x:"Q4",y:70}]},{y:540,quarters:[{x:"Q1",y:120},{x:"Q2",y:120},{x:"Q3",y:130},{x:"Q4",y:170}]},{y:580,quarters:[{x:"Q1",y:170},{x:"Q2",y:130},{x:"Q3",y:120},{x:"Q4",y:160}]}];function makeData(){var e=shuffleArray([...arrayData]);let o=["primary","secondary","info","danger","warning","success"];return e.map((e,t)=>({x:String(2019+t),y:e.y,colorToken:o[t],quarters:e.quarters}))}function updateQuarterChart(e,t){var o=e.w.globals.selectedDataPoints[0];let r=e.w.config.series[0],a=[],s=[];o?.forEach(e=>{e=r.data[e];a.push({name:e.x,data:e.quarters}),s.push(ins(e.colorToken))}),ApexCharts.exec(t,"updateOptions",{series:a,colors:s,fill:{colors:s}})}let getYearlyOptions=()=>{var e=makeData(),t=e.map(e=>ins(e.colorToken));return{series:[{data:e}],chart:{id:"barYear",height:400,width:"100%",type:"bar",events:{dataPointSelection:function(e,t,o){var r=document.querySelector("#chart-quarter"),a=document.querySelector("#chart-year");1!==o.selectedDataPoints[0].length||r.classList.contains("active")||(a.classList.add("chart-quarter-activated"),r.classList.add("active")),updateQuarterChart(t,"barQuarter"),0===o.selectedDataPoints[0].length&&(a.classList.remove("chart-quarter-activated"),r.classList.remove("active"))},updated:function(e){updateQuarterChart(e,"barQuarter")}}},plotOptions:{bar:{distributed:!0,horizontal:!0,barHeight:"75%",dataLabels:{position:"bottom"}}},dataLabels:{enabled:!0,textAnchor:"none",style:{colors:["#fff"]},formatter:(e,t)=>t.w.globals.labels[t.dataPointIndex],offsetX:10,dropShadow:{enabled:!0}},colors:t,states:{normal:{filter:{type:"desaturate"}},active:{allowMultipleDataPointsSelection:!0,filter:{type:"darken",value:1}}},tooltip:{x:{show:!1},y:{title:{formatter:(e,t)=>t.w.globals.labels[t.dataPointIndex]}}},title:{text:"Yearly Results",offsetX:5,style:{fontSize:"14px",fontWeight:700}},subtitle:{text:"(Click on bar to see details)",offsetX:5,style:{fontSize:"12px",fontWeight:500}},xaxis:{axisBorder:{show:!1}},yaxis:{labels:{show:!1}},grid:{borderColor:ins("border-color"),padding:{top:-10,right:0,bottom:-15,left:0}}}},getQuarterlyOptions=()=>({series:[{data:[]}],chart:{id:"barQuarter",height:400,width:"100%",type:"bar",stacked:!0},plotOptions:{bar:{columnWidth:"50%",horizontal:!1}},legend:{show:!1},grid:{yaxis:{lines:{show:!1}},xaxis:{lines:{show:!0}}},xaxis:{axisBorder:{show:!1}},yaxis:{labels:{show:!1}},title:{text:"Quarterly Results",offsetX:10,style:{fontSize:"14px",fontWeight:700}},tooltip:{x:{formatter:function(e,t){return t.w.globals.seriesNames[t.seriesIndex]}},y:{title:{formatter:function(e,t){return t.w.globals.labels[t.dataPointIndex]}}}}}),yearChart=document.getElementById("chart-year"),quarterChart=document.getElementById("chart-quarter");if(yearChart&&quarterChart){let t=new ApexCharts(yearChart,getYearlyOptions()),e=(t.render(),new ApexCharts(quarterChart,getQuarterlyOptions())),o=(e.render(),t.addEventListener("dataPointSelection",function(e,t,o){var r=document.querySelector("#chart-quarter"),a=document.querySelector("#chart-year");1!==o.selectedDataPoints[0].length||r.classList.contains("active")||(a.classList.add("chart-quarter-activated"),r.classList.add("active")),updateQuarterChart(t,"barQuarter"),0===o.selectedDataPoints[0].length&&(a.classList.remove("chart-quarter-activated"),r.classList.remove("active"))}),t.addEventListener("updated",function(e){updateQuarterChart(e,"barQuarter")}),document.querySelector("#model").addEventListener("change",function(e){t.updateSeries([{data:makeData()}])}),new MutationObserver(()=>{let e=t.w.globals.selectedDataPoints?.[0]||[];t.updateOptions(getYearlyOptions()),setTimeout(()=>{0<e.length?(e.forEach(e=>t.toggleDataPointSelection(e)),updateQuarterChart(t,"barQuarter"),document.querySelector("#chart-year").classList.add("chart-quarter-activated"),document.querySelector("#chart-quarter").classList.add("active")):(document.querySelector("#chart-year").classList.remove("chart-quarter-activated"),document.querySelector("#chart-quarter").classList.remove("active"))},100)}));o.observe(document.documentElement,{attributes:!0,attributeFilter:["data-skin","data-bs-theme"]})} |