"use strict";(self.webpackChunknocobase=self.webpackChunknocobase||[]).push([[6920,95],{10095:function(s,n,e){e.r(n),e.d(n,{JSBlockRunJSContext:function(){return o}});var r=e(72004),a=e.n(r),l=e(12444),_=e.n(l),d=e(31996),i=e.n(d),c=e(26037),u=e.n(c),m=e(67946),o=function(b){i()(t,b);var h=u()(t);function t(){return _()(this,t),h.apply(this,arguments)}return a()(t)}(m.Uo);o.define({label:"RunJS context",properties:{element:{description:`ElementProxy instance providing a safe DOM container.
      Supports innerHTML, append, and other DOM manipulation methods.
      Use this to render content in the JS block.`,detail:"ElementProxy",properties:{innerHTML:"Set or read the HTML content of the container element."}},record:`Current record data object (read-only).
      Available when the JS block is within a data block or detail view context.`,value:"Current value of the field or component, if available in the current context.",React:"React library",antd:"Ant Design library"},methods:{onRefReady:`Wait for container DOM element to be ready before executing callback.
      Parameters: (ref: React.RefObject, callback: (element: HTMLElement) => void, timeout?: number) => void
      Example: ctx.onRefReady(ctx.ref, (el) => { el.innerHTML = "Ready!" })`,requireAsync:"Load external library: `const lib = await ctx.requireAsync(url)`",importAsync:"Dynamically import an ESM module by URL: `const mod = await ctx.importAsync(url)`.\nNote: if the module has only a default export, ctx.importAsync returns that default value directly (no `.default`)."}}),o.define({label:"RunJS \u4E0A\u4E0B\u6587",properties:{element:{description:"ElementProxy\uFF0C\u5B89\u5168\u7684 DOM \u5BB9\u5668\uFF0C\u652F\u6301 innerHTML/append \u7B49",detail:"ElementProxy",properties:{innerHTML:"\u8BFB\u53D6\u6216\u8BBE\u7F6E\u5BB9\u5668\u7684 HTML \u5185\u5BB9"}},record:"\u5F53\u524D\u8BB0\u5F55\uFF08\u53EA\u8BFB\uFF0C\u7528\u4E8E\u6570\u636E\u533A\u5757/\u8BE6\u60C5\u7B49\u573A\u666F\uFF09",value:"\u5F53\u524D\u503C\uFF08\u82E5\u5B58\u5728\uFF09",React:"React \u5E93",antd:"Ant Design \u5E93"},methods:{onRefReady:"\u5BB9\u5668 ref \u5C31\u7EEA\u56DE\u8C03\uFF1A\n```js\nctx.onRefReady(ctx.ref, el => { /* ... */ })\n```",requireAsync:"\u52A0\u8F7D\u5916\u90E8\u5E93\uFF1A`const lib = await ctx.requireAsync(url)`",importAsync:"\u6309 URL \u52A8\u6001\u5BFC\u5165 ESM \u6A21\u5757\uFF1A`const mod = await ctx.importAsync(url)`\u3002\n\u6CE8\u610F\uFF1A\u5F53\u6A21\u5757\u53EA\u6709 default \u4E00\u4E2A\u5BFC\u51FA\u65F6\uFF0Cctx.importAsync \u4F1A\u76F4\u63A5\u8FD4\u56DE default \u503C\uFF08\u65E0\u9700\u518D\u5199 `.default`\uFF09\u3002"}},{locale:"zh-CN"})},96920:function(s,n,e){e.r(n);var r=e(10095),a={contexts:[r.JSBlockRunJSContext],prefix:"sn-jsb-chartjs",label:"Render Chart.js bar chart",description:"Load Chart.js from CDN and render a basic bar chart inside the block",locales:{"zh-CN":{label:"\u6E32\u67D3 Chart.js \u67F1\u72B6\u56FE",description:"\u901A\u8FC7 CDN \u5F15\u5165 Chart.js \u5E76\u5728\u533A\u5757\u4E2D\u6E32\u67D3\u57FA\u7840\u67F1\u72B6\u56FE"}},content:`
const wrapper = document.createElement('div');
wrapper.style.padding = '16px';
wrapper.style.background = '#fff';
wrapper.style.borderRadius = '8px';
wrapper.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';

const canvas = document.createElement('canvas');
canvas.width = 480;
canvas.height = 320;
wrapper.appendChild(canvas);
ctx.render(wrapper);

async function renderChart() {
  const loaded = await ctx.requireAsync('chart.js@4.4.0/dist/chart.umd.min.js');
  const Chart = loaded?.Chart || loaded?.default?.Chart || loaded?.default;
  if (!Chart) {
    throw new Error('Chart.js is not available');
  }

  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
  const data = [12, 18, 9, 15, 22];

  new Chart(canvas.getContext('2d'), {
    type: 'bar',
    data: {
      labels,
      datasets: [
        {
          label: ctx.t('Daily visits'),
          data,
          backgroundColor: 'rgba(24, 144, 255, 0.6)',
          borderColor: '#1890ff',
          borderWidth: 1,
        },
      ],
    },
    options: {
      plugins: {
        legend: { display: true },
        title: {
          display: true,
          text: ctx.t('Weekly overview'),
        },
      },
    },
  });
}

renderChart().catch((error) => {
  console.error('[RunJS] failed to render chart', error);
  wrapper.innerHTML = '<div style="color:#c00;">' + (error?.message || ctx.t('Chart initialization failed')) + '</div>';
});
`};n.default=a}}]);
