function randomData(){return now=new Date(+now+oneDay),value=value+21*Math.random()-10,{name:now.toString(),value:[[now.getFullYear(),now.getMonth()+1,now.getDate()].join("/"),Math.round(value)]}}new CustomEChart({selector:"#chart-line",options:()=>({grid:{left:"0%",right:"0%",bottom:"0%",top:"4%",containLabel:!0},xAxis:{type:"category",data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],axisLine:{lineStyle:{color:theme("body-secondary-color")}}},yAxis:{type:"value",axisLine:{lineStyle:{color:"#858d98"}},splitLine:{lineStyle:{color:"rgba(133, 141, 152, 0.1)"}}},tooltip:{trigger:"axis",padding:[5,0],backgroundColor:theme("secondary-bg"),borderColor:theme("border-color"),textStyle:{color:theme("light-text-emphasis")},borderWidth:1,transitionDuration:.125,axisPointer:{type:"none"},shadowBlur:2,shadowColor:"rgba(76, 76, 92, 0.15)",shadowOffsetX:0,shadowOffsetY:1,formatter:function(e){var t=e[0].name;let o=`<div style="font-size: 14px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid ${theme("border-color")}; margin-bottom: 8px; padding: 3px 10px 8px;">${t}</div>`;return e.forEach(e=>{o+=`<div style="margin-top: 4px; padding: 3px 15px;">
                            <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${e.color};"></span>
                            ${e.seriesName} : <strong>${e.value}</strong>
                        </div>`}),o}},series:[{data:[150,180,120,190,110,170,130],type:"line",areaStyle:{opacity:.2,color:theme("chart-primary")},lineStyle:{color:theme("chart-primary")},symbol:"circle",symbolSize:6}],textStyle:{fontFamily:getComputedStyle(document.body).fontFamily},color:[theme("chart-primary")]})}),new CustomEChart({selector:"#chart-line-stacked",options:()=>({textStyle:{fontFamily:getComputedStyle(document.body).fontFamily},tooltip:{trigger:"axis",padding:[5,0],backgroundColor:theme("secondary-bg"),borderColor:theme("border-color"),textStyle:{color:theme("light-text-emphasis")},borderWidth:1,transitionDuration:.125,axisPointer:{type:"none"},shadowBlur:2,shadowColor:"rgba(76, 76, 92, 0.15)",shadowOffsetX:0,shadowOffsetY:1,formatter:function(e){var t=e[0].name;let o=`<div style="font-size: 14px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid ${theme("border-color")}; margin-bottom: 8px; padding: 3px 10px 8px;">${t}</div>`;return e.forEach(e=>{o+=`<div style="margin-top: 4px; padding: 3px 15px;">
                            <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${e.color};"></span>
                            ${e.seriesName} : <strong>${e.value}</strong>
                        </div>`}),o}},xAxis:{type:"category",data:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],boundaryGap:!1,axisLine:{lineStyle:{color:theme("tertiary-bg"),type:"dashed"}},axisTick:{show:!1},axisLabel:{color:theme("body-color"),margin:15},splitLine:{show:!1}},yAxis:{type:"value",splitLine:{lineStyle:{color:theme("border-color"),type:"dashed"}},boundaryGap:!1,axisLabel:{show:!0,color:theme("body-color"),margin:15},axisTick:{show:!1},axisLine:{show:!1}},series:[{name:"Matcha Latte",type:"line",symbolSize:6,itemStyle:{color:theme("chart-delta"),borderColor:theme("chart-delta"),borderWidth:2},areaStyle:{opacity:.2,color:theme("chart-delta")},lineStyle:{color:theme("chart-delta")},symbol:"circle",stack:"product",data:[120,132,101,134,90,230,210]},{name:"Milk Tea",type:"line",symbolSize:10,itemStyle:{color:theme("chart-alpha"),borderColor:theme("chart-alpha"),borderWidth:2},areaStyle:{opacity:.2,color:theme("chart-alpha")},lineStyle:{color:theme("chart-alpha")},symbol:"circle",stack:"product",data:[220,182,191,234,290,330,310]},{name:"Cheese Cocoa",type:"line",symbolSize:10,itemStyle:{color:theme("chart-beta"),borderColor:theme("chart-beta"),borderWidth:2},areaStyle:{opacity:.2,color:theme("chart-alpha")},lineStyle:{color:theme("chart-beta")},symbol:"circle",stack:"product",data:[150,232,201,154,190,330,410]},{name:"Cheese Brownie",type:"line",symbolSize:10,itemStyle:{color:theme("chart-gamma"),borderColor:theme("chart-gamma"),borderWidth:2},areaStyle:{opacity:.2,color:theme("chart-beta")},lineStyle:{color:theme("chart-gamma")},symbol:"circle",stack:"product",data:[320,332,301,334,390,330,320]},{name:"Matcha Cocoa",type:"line",symbolSize:10,itemStyle:{color:theme("chart-primary"),borderColor:theme("chart-primary"),borderWidth:2},lineStyle:{color:theme("chart-primary")},symbol:"circle",stack:"product",data:[820,932,901,934,1290,1330,1320]}],grid:{right:22,left:5,bottom:5,top:8,containLabel:!0}})}),new CustomEChart({selector:"#chart-line-marker",options:()=>({textStyle:{fontFamily:getComputedStyle(document.body).fontFamily},color:[theme("chart-primary"),theme("chart-gamma")],tooltip:{trigger:"axis",padding:[5,0],backgroundColor:theme("secondary-bg"),borderColor:theme("border-color"),textStyle:{color:theme("light-text-emphasis")},borderWidth:1,transitionDuration:.125,axisPointer:{type:"none"},shadowBlur:2,shadowColor:"rgba(76, 76, 92, 0.15)",shadowOffsetX:0,shadowOffsetY:1,formatter:function(e){var t=e[0].name;let o=`<div style="font-size: 14px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid ${theme("border-color")}; margin-bottom: 8px; padding: 3px 10px 8px;">${t}</div>`;return e.forEach(e=>{o+=`<div style="margin-top: 4px; padding: 3px 15px;">
                            <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${e.color};"></span>
                            ${e.seriesName} : <strong>${e.value}</strong>
                        </div>`}),o}},xAxis:{type:"category",data:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],boundaryGap:!1,axisLine:{lineStyle:{color:theme("tertiary-bg"),type:"solid"}},axisTick:{show:!1},axisLabel:{color:theme("body-color"),margin:15},splitLine:{show:!1}},yAxis:{type:"value",splitLine:{lineStyle:{color:theme("border-color")}},boundaryGap:!1,axisLabel:{show:!0,color:theme("body-color"),margin:15},axisTick:{show:!1},axisLine:{show:!1}},series:[{name:"Max",type:"line",data:[10,11,13,11,12,9,12],symbolSize:10,areaStyle:{opacity:.2,color:theme("chart-primary")},lineStyle:{color:theme("chart-primary")},symbol:"circle",markPoint:{itemStyle:{color:theme("chart-primary")},label:{color:"#fff"},data:[{type:"max",name:"Max"},{type:"min",name:"Min"}]},markLine:{lineStyle:{color:theme("chart-primary")},label:{color:theme("body-color")},data:[{type:"average",name:"average"}]}},{name:"Min",type:"line",data:[1,-2,2,5,3,2,0],symbolSize:10,itemStyle:{color:theme("chart-beta"),borderColor:theme("chart-beta"),borderWidth:2},areaStyle:{opacity:.2,color:theme("chart-alpha")},lineStyle:{color:theme("chart-beta")},symbol:"circle",markPoint:{itemStyle:{color:theme("chart-beta")},label:{color:"#fff"},data:[{name:"Weekly lowest",value:-2,xAxis:1,yAxis:-1.5}]},markLine:{lineStyle:{color:theme("chart-beta")},label:{color:theme("body-color")},data:[{type:"average",name:"average"},[{symbol:"none",x:"90%",yAxis:"max"},{symbol:"circle",label:{position:"start",formatter:"Max"},type:"max",name:"Highest point"}]]}}],grid:{right:"5%",left:"5%",bottom:"10%",top:"15%"}})});let data=[],now=new Date(2023,9,3),oneDay=864e5,value=100*Math.random();for(let e=0;e<1e3;e++)data.push(randomData());let dynamicChart=new CustomEChart({selector:"#chart-dynamic-line",options:()=>({textStyle:{fontFamily:getComputedStyle(document.body).fontFamily},color:[theme("chart-zeta")],tooltip:{trigger:"axis",formatter:function(e){e=e[0];var t=new Date(e.name);return t.getDate()+` ${t.toLocaleString("default",{month:"long"})}, ${t.getFullYear()} : `+e.value[1]},axisPointer:{animation:!1,type:"none"},padding:[12,16],backgroundColor:theme("secondary-bg"),borderColor:theme("border-color"),textStyle:{color:theme("light-text-emphasis")},borderWidth:1,transitionDuration:.125,shadowBlur:2,shadowColor:"rgba(76, 76, 92, 0.15)",shadowOffsetX:0,shadowOffsetY:1},xAxis:{type:"time",splitLine:{show:!1},axisLine:{lineStyle:{color:theme("tertiary-bg"),type:"solid"}},axisLabel:{color:theme("body-color"),margin:15}},yAxis:{type:"value",boundaryGap:[0,"100%"],axisLabel:{show:!0,color:theme("body-color"),margin:15},splitLine:{lineStyle:{color:"rgba(133, 141, 152, 0.1)"}}},grid:{right:"5%",left:"7%",bottom:"10%",top:"5%"},series:[{name:"Fake Data",type:"line",showSymbol:!1,data:data,areaStyle:{opacity:.2},lineStyle:{width:3}}]})});setInterval(function(){for(let e=0;e<5;e++)data.shift(),data.push(randomData());dynamicChart.chart.setOption({series:[{data:data}]})},1e3),new CustomEChart({selector:"#chart-step-line",options:()=>({tooltip:{trigger:"axis",padding:[12,16],backgroundColor:theme("secondary-bg"),borderColor:theme("border-color"),textStyle:{color:theme("light-text-emphasis")},borderWidth:1,transitionDuration:.125,axisPointer:{type:"none"},shadowBlur:2,shadowColor:"rgba(76, 76, 92, 0.15)",shadowOffsetX:0,shadowOffsetY:1},legend:{data:["Step Start","Step Middle","Step End"],textStyle:{color:"#858d98"}},grid:{left:"0%",right:"0%",bottom:"0%",containLabel:!0},xAxis:{type:"category",data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],axisLine:{lineStyle:{color:theme("tertiary-bg"),type:"dashed"}},axisLabel:{color:theme("body-color"),margin:15}},yAxis:{type:"value",axisLine:{lineStyle:{color:"#858d98"}},splitLine:{lineStyle:{color:"rgba(133, 141, 152, 0.1)"}}},textStyle:{fontFamily:getComputedStyle(document.body).fontFamily},color:[theme("chart-zeta"),theme("chart-beta"),theme("chart-alpha")],series:[{name:"Step Start",type:"line",areaStyle:{opacity:.2},step:"start",data:[120,132,101,134,90,230,210]},{name:"Step Middle",type:"line",areaStyle:{opacity:.2},step:"middle",data:[220,282,201,234,290,430,410]},{name:"Step End",type:"line",step:"end",data:[450,432,401,454,590,530,510]}]})});