vuepress-plugin-md-enhance/lib/client/components/ChartJS.js

Markdown enhancement plugin for vuepress

import{useDarkMode as p,decodeData as _,LoadingIcon as m}from"@vuepress/helper/client";import{watchImmediate as g}from"@vueuse/core";import{defineComponent as h,shallowRef as l,ref as S,computed as v,h as a,onMounted as y,onUnmounted as j}from"vue";import"../styles/chartjs.scss";const w=(e,t)=>t==="json"?JSON.parse(e):new Function(`let config,__chart_js_config__;
{
${e}
__chart_js_config__=config;
}
return __chart_js_config__;`)();var C=h({name:"ChartJS",props:{config:{type:String,required:!0},id:{type:String,required:!0},title:String,type:{type:String,default:"json"}},setup(e){const t=p(),s=l(),i=l(),n=S(!0),c=v(()=>_(e.config));let o;const u=async()=>{if(__VUEPRESS_SSR__)return;const[{default:r}]=await Promise.all([import("chart.js/auto")]);r.defaults.borderColor=t.value?"#ccc":"#36A2EB",r.defaults.color=t.value?"#fff":"#000",r.defaults.maintainAspectRatio=!1;const d=w(c.value,e.type),f=i.value.getContext("2d");o?.destroy(),o=new r(f,d),n.value=!1};return y(()=>{g(t,()=>u(),{flush:"post"})}),j(()=>{o?.destroy(),o=null}),()=>[e.title?a("div",{class:"chartjs-title"},decodeURIComponent(e.title)):null,n.value?a(m,{class:"chartjs-loading",height:192}):null,a("div",{ref:s,class:"chartjs-wrapper",id:e.id,style:{display:n.value?"none":"block"}},a("canvas",{ref:i,height:400}))]}});export{C as default};
//# sourceMappingURL=ChartJS.js.map