slidev-theme-oqtopus/docs/assets/md-CTE-USd-.js

Slidev theme for OQTOPUS presentations

import{r as S,z as m,f as s,o as a,g as t,i as _,t as c,F as d,aj as v,n as I,k as g,b as T,w as V,e as P,ad as C,v as z,x as w,T as k}from"./modules/vue-m8pkr6j7.js";import{u as x,f as N}from"./slidev/context-DVBmw4Sk.js";import{_ as Q}from"./index-rxBs4b9Q.js";import{I as j}from"./default-BPZUhb-i.js";import"./modules/shiki-DLbbKDLo.js";import"./SlideLayout-Dz7TN6RJ.js";import"./OqtopusLogo-Dbu4SNa4.js";import"./OqtopusSymbol-dDKLCRNZ.js";const A={class:"chart-container"},F={class:"chart-header"},L={class:"chart-type-selector"},M=["onClick"],q={class:"chart-content"},G={key:0,class:"bar-chart"},R={class:"chart-grid"},U=["title"],Y={class:"bar-label"},H={class:"line-chart"},J={viewBox:"0 0 400 200",class:"line-svg"},K=["points"],O=["cx","cy"],W={class:"line-labels"},X={class:"pie-chart"},Z={class:"pie-visual"},tt={class:"pie-legend"},et={class:"chart-footer"},at={class:"chart-stats"},lt={__name:"DataChart",props:{title:{type:String,default:"Data Visualization"},data:{type:Array,default:()=>[{label:"Q1",value:85},{label:"Q2",value:120},{label:"Q3",value:95},{label:"Q4",value:150}]},type:{type:String,default:"bar"}},setup(u){x();const i=u,p=S(i.type),f=["bar","line","pie"],n=m(()=>Math.max(...i.data.map(r=>r.value))),h=m(()=>i.data.reduce((r,o)=>r+o.value,0)),B=m(()=>i.data.map((o,e)=>{const l=e/(i.data.length-1)*380+10,y=180-o.value/n.value*160+10;return`${l},${y}`}).join(" ")),$=m(()=>i.data.map((r,o)=>({x:o/(i.data.length-1)*380+10,y:180-r.value/n.value*160+10}))),b=r=>{const o=["#2B6CB0","#E53E3E","#38A169","#D69E2E"];return o[r%o.length]},D=(r,o)=>{const e=r.value/h.value*100,l=i.data.slice(0,o).reduce((y,E)=>y+E.value/h.value*360,0);return{background:`conic-gradient(${b(o)} 0deg ${e*3.6}deg, transparent ${e*3.6}deg)`,transform:`rotate(${l}deg)`}};return(r,o)=>(a(),s("div",A,[t("div",F,[t("h3",null,c(u.title),1),t("div",L,[(a(),s(d,null,v(f,e=>t("button",{key:e,onClick:l=>p.value=e,class:I([{active:p.value===e},"chart-btn"])},c(e),11,M)),64))])]),t("div",q,[_(" Bar Chart "),p.value==="bar"?(a(),s("div",G,[t("div",R,[(a(!0),s(d,null,v(u.data,(e,l)=>(a(),s("div",{key:l,class:"bar-item"},[t("div",{class:"bar",style:g({height:`${e.value/n.value*100}%`}),title:`${e.label}: ${e.value}`},null,12,U),t("div",Y,c(e.label),1)]))),128))])])):p.value==="line"?(a(),s(d,{key:1},[_(" Line Chart (simplified) "),t("div",H,[(a(),s("svg",J,[t("polyline",{points:B.value,fill:"none",stroke:"url(#gradient)","stroke-width":"3","stroke-linecap":"round"},null,8,K),o[0]||(o[0]=t("defs",null,[t("linearGradient",{id:"gradient",x1:"0%",y1:"0%",x2:"100%",y2:"0%"},[t("stop",{offset:"0%",style:{"stop-color":"#2B6CB0","stop-opacity":"1"}}),t("stop",{offset:"100%",style:{"stop-color":"#E53E3E","stop-opacity":"1"}})])],-1)),(a(!0),s(d,null,v($.value,(e,l)=>(a(),s("circle",{key:l,cx:e.x,cy:e.y,r:"4",fill:"#2B6CB0",class:"data-point"},null,8,O))),128))])),t("div",W,[(a(!0),s(d,null,v(u.data,(e,l)=>(a(),s("span",{key:l},c(e.label),1))),128))])])],2112)):p.value==="pie"?(a(),s(d,{key:2},[_(" Pie Chart (CSS-based) "),t("div",X,[t("div",Z,[(a(!0),s(d,null,v(u.data.slice(0,4),(e,l)=>(a(),s("div",{key:l,class:"pie-slice",style:g(D(e,l))},null,4))),128))]),t("div",tt,[(a(!0),s(d,null,v(u.data.slice(0,4),(e,l)=>(a(),s("div",{key:l,class:"legend-item"},[t("div",{class:"legend-color",style:g({background:b(l)})},null,4),t("span",null,c(e.label)+": "+c(e.value),1)]))),128))])])],2112)):_("v-if",!0)]),_(" Chart Footer "),t("div",et,[t("div",at,[t("span",null,"Total: "+c(h.value),1),t("span",null,"Max: "+c(n.value),1),t("span",null,"Items: "+c(u.data.length),1)])])]))}},st=Q(lt,[["__scopeId","data-v-a86ca01c"]]),vt={__name:"example.md__slidev_9",setup(u){const{$clicksContext:i,$frontmatter:p}=x();return i.setup(),(f,n)=>{const h=st;return a(),T(j,z(w(k(N)(k(p),8))),{default:V(()=>[n[0]||(n[0]=t("h1",null,"Data Chart Component",-1)),n[1]||(n[1]=t("h2",null,"Visualize Your Data Easily",-1)),n[2]||(n[2]=t("p",null,[C("Use the "),t("code",null,"<DataChart>"),C(" component to display various types of charts.")],-1)),P(h,{title:"Sample Data Trends",data:[{label:"Item A",value:50},{label:"Item B",value:75},{label:"Item C",value:60},{label:"Item D",value:90}],type:"bar"}),n[3]||(n[3]=t("div",{class:"oqtopus-badge mt-4"}," Try changing 'type' to 'line' or 'pie'!",-1))]),_:1,__:[0,1,2,3]},16)}}};export{vt as default};