{
 "slug": "chartpanel",
 "mode": "scenarios",
 "curated": true,
 "examples": [
  {
   "id": "chartpanel-ex-1",
   "title": "刷新",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button class=\"kole-chartpanel-tool\" id=\"refresh\">刷新</button>",
   "preview": {
    "show": [
     [
      0,
      0,
      1,
      0
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      1
     ],
     [
      0,
      0,
      0
     ],
     [
      0,
      0,
      1,
      1
     ],
     [
      0,
      0,
      1,
      2
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"kole-chartpanel-tool\">刷新</button>",
    "jsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nfunction handleRefresh() {\n  console.log('刷新图表');\n}\n\n<KoleChartPanel title=\"访问趋势\" onRefresh={handleRefresh}>\n  图表区域（可放置折线/柱状/饼图）\n</KoleChartPanel>",
    "vue3": "<template>\n  <KoleChartPanel title=\"访问趋势\" @refresh=\"handleRefresh\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script setup>\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nfunction handleRefresh() {\n  console.log('刷新图表');\n}\n</script>",
    "vue2": "<template>\n  <KoleChartPanel title=\"访问趋势\" @refresh=\"handleRefresh\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script>\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleChartPanel },\n  methods: {\n    handleRefresh() {\n      console.log('刷新图表');\n    }\n  }\n};\n</script>",
    "tsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nexport default function KoleChartPanelDemo(): JSX.Element {\n  function handleRefresh() {\n    console.log('刷新图表');\n  }\n  return (\n    <KoleChartPanel title=\"访问趋势\" onRefresh={handleRefresh}>\n      图表区域（可放置折线/柱状/饼图）\n    </KoleChartPanel>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleChartPanel title=\"访问趋势\" @refresh=\"handleRefresh\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('刷新');\nfunction handleRefresh() {\n  console.log('刷新图表');\n}\n</script>",
    "vue2ts": "<template>\n\n  <KoleChartPanel title=\"访问趋势\" @refresh=\"handleRefresh\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleChartPanel },\n  methods: {\n    handleRefresh(): void {\n      console.log('刷新图表');\n    }\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ChartPanel.html:14 标题「访问趋势」与 :16 id=refresh「刷新」按钮的 onclick（:29 alert('刷新图表')）；prop/事件取自 frameworks/ChartPanel.jsx:4 与 ChartPanel.vue3.vue:22"
   ]
  },
  {
   "id": "chartpanel-ex-2",
   "title": "导出",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button class=\"kole-chartpanel-tool\" id=\"export\">导出</button>",
   "preview": {
    "show": [
     [
      0,
      0,
      1,
      1
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      1
     ],
     [
      0,
      0,
      0
     ],
     [
      0,
      0,
      1,
      0
     ],
     [
      0,
      0,
      1,
      2
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"kole-chartpanel-tool\">导出</button>",
    "jsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nfunction handleExport() {\n  console.log('导出图表');\n}\n\n<KoleChartPanel title=\"访问趋势\" onExport={handleExport}>\n  图表区域（可放置折线/柱状/饼图）\n</KoleChartPanel>",
    "vue3": "<template>\n  <KoleChartPanel title=\"访问趋势\" @export=\"handleExport\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script setup>\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nfunction handleExport() {\n  console.log('导出图表');\n}\n</script>",
    "vue2": "<template>\n  <KoleChartPanel title=\"访问趋势\" @export=\"handleExport\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script>\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleChartPanel },\n  methods: {\n    handleExport() {\n      console.log('导出图表');\n    }\n  }\n};\n</script>",
    "tsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nexport default function KoleChartPanelDemo(): JSX.Element {\n  function handleExport() {\n    console.log('导出图表');\n  }\n  return (\n    <KoleChartPanel title=\"访问趋势\" onExport={handleExport}>\n      图表区域（可放置折线/柱状/饼图）\n    </KoleChartPanel>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleChartPanel title=\"访问趋势\" @export=\"handleExport\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('导出');\nfunction handleExport() {\n  console.log('导出图表');\n}\n</script>",
    "vue2ts": "<template>\n\n  <KoleChartPanel title=\"访问趋势\" @export=\"handleExport\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleChartPanel },\n  methods: {\n    handleExport(): void {\n      console.log('导出图表');\n    }\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ChartPanel.html:17 id=export「导出」按钮与 :30 alert('导出图表')；事件名 export 取自 frameworks/ChartPanel.vue3.vue:22"
   ]
  },
  {
   "id": "chartpanel-ex-3",
   "title": "图表面板 ChartPanel 示例 3",
   "titleSrc": "",
   "desc": "",
   "html": "<button class=\"kole-chartpanel-tool kole-chartpanel-caret\" id=\"toggle\">▾</button>",
   "preview": {
    "show": [
     [
      0,
      0,
      1,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      1
     ],
     [
      0,
      0,
      0
     ],
     [
      0,
      0,
      1,
      0
     ],
     [
      0,
      0,
      1,
      1
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"kole-chartpanel-tool kole-chartpanel-caret\">▾</button>",
    "jsx": "import { KoleChartPanel } from 'kole-ui/react';\n\n<KoleChartPanel title=\"访问趋势\" collapsible collapsed={false}>\n  图表区域（可放置折线/柱状/饼图）\n</KoleChartPanel>",
    "vue3": "<template>\n  <KoleChartPanel title=\"访问趋势\" collapsible :collapsed=\"false\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script setup>\nimport { KoleChartPanel } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleChartPanel title=\"访问趋势\" collapsible :collapsed=\"false\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script>\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default { components: { KoleChartPanel } };\n</script>",
    "tsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nexport default function KoleChartPanelDemo(): JSX.Element {\n  return (\n    <KoleChartPanel title=\"访问趋势\" collapsible collapsed={false}>\n      图表区域（可放置折线/柱状/饼图）\n    </KoleChartPanel>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleChartPanel title=\"访问趋势\" collapsible :collapsed=\"false\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('图表面板 ChartPanel 示例 3');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleChartPanel title=\"访问趋势\" collapsible :collapsed=\"false\">\n    图表区域（可放置折线/柱状/饼图）\n  </KoleChartPanel>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default { components: { KoleChartPanel },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ChartPanel.html:18 的 kole-chartpanel-caret「▾」折叠按钮与 :28 classList.toggle('is-collapsed')；collapsible/collapsed 取自 frameworks/ChartPanel.jsx:4"
   ]
  }
 ]
}