@particle-academy/fancy-slides 0.1.3 → 0.1.5

package/dist/{chart-host-VIGM3J5Q.js → chart-host-BHP6GUWO.js}

@@ -1,11 +1,13 @@
-import { EChart } from '@particle-academy/fancy-echarts';
+import { registerAll, registerBuiltinThemes, EChart } from '@particle-academy/fancy-echarts';
 import { jsx } from 'react/jsx-runtime';
 
 // src/registry/element-renderers/chart-host.tsx
+registerAll();
+registerBuiltinThemes();
 function ChartHost({ element }) {
   return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option: element.option, theme: element.chartTheme }) });
 }
 
 export { ChartHost as default };
-//# sourceMappingURL=chart-host-VIGM3J5Q.js.map
-//# sourceMappingURL=chart-host-VIGM3J5Q.js.map
+//# sourceMappingURL=chart-host-BHP6GUWO.js.map
+//# sourceMappingURL=chart-host-BHP6GUWO.js.map

package/dist/chart-host-BHP6GUWO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/element-renderers/chart-host.tsx"],"names":[],"mappings":";;;;AAYA,WAAA,EAAY;AACZ,qBAAA,EAAsB;AAEP,SAAR,SAAA,CAA2B,EAAE,OAAA,EAAQ,EAAoD;AAC5F,EAAA,2BACK,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,KAAA,EAAO,QAAQ,MAAA,EAAQ,MAAA,EAAO,EACxC,QAAA,kBAAA,GAAA,CAAC,UAAO,MAAA,EAAQ,OAAA,CAAQ,QAAkD,KAAA,EAAO,OAAA,CAAQ,YAAY,CAAA,EACzG,CAAA;AAER","file":"chart-host-BHP6GUWO.js","sourcesContent":["import { EChart, registerAll, registerBuiltinThemes } from \"@particle-academy/fancy-echarts\";\nimport type { ChartElement } from \"../../types\";\n\n// fancy-echarts ships its chart types as opt-in tree-shake-friendly modules,\n// so the consumer normally calls `registerAll()` somewhere global. The\n// registry subpath here is the natural spot to wire it: this module only\n// loads when a deck actually contains a chart element (defaultElementRegistry\n// is React.lazy), so the registration cost is paid by chart-using hosts\n// only — non-chart consumers never even import this file.\n//\n// `registerAll()` is idempotent on echarts' side, so re-imports across\n// chunks are safe.\nregisterAll();\nregisterBuiltinThemes();\n\nexport default function ChartHost({ element }: { element: ChartElement; slideWidthPx: number }) {\n    return (\n        <div style={{ width: \"100%\", height: \"100%\" }}>\n            <EChart option={element.option as Parameters<typeof EChart>[0][\"option\"]} theme={element.chartTheme} />\n        </div>\n    );\n}\n"]}

package/dist/index.cjs

@@ -1115,6 +1115,90 @@ function reduce(deck, op) {
       };
   }
 }
+
+// src/utils/chart-presets.ts
+var QUARTERS = ["Q1", "Q2", "Q3", "Q4"];
+var REVENUE = [24e3, 38e3, 31e3, 47e3];
+function chartStarterOption(kind) {
+  switch (kind) {
+    case "bar":
+      return {
+        grid: { top: 24, left: 56, right: 16, bottom: 32 },
+        tooltip: { trigger: "axis" },
+        xAxis: { type: "category", data: [...QUARTERS] },
+        yAxis: { type: "value" },
+        series: [{ type: "bar", name: "Revenue", data: [...REVENUE] }]
+      };
+    case "line":
+      return {
+        grid: { top: 24, left: 56, right: 16, bottom: 32 },
+        tooltip: { trigger: "axis" },
+        xAxis: { type: "category", data: [...QUARTERS] },
+        yAxis: { type: "value" },
+        series: [{ type: "line", name: "Revenue", smooth: true, data: [...REVENUE] }]
+      };
+    case "area":
+      return {
+        grid: { top: 24, left: 56, right: 16, bottom: 32 },
+        tooltip: { trigger: "axis" },
+        xAxis: { type: "category", data: [...QUARTERS] },
+        yAxis: { type: "value" },
+        series: [
+          {
+            type: "line",
+            name: "Revenue",
+            smooth: true,
+            areaStyle: {},
+            data: [...REVENUE]
+          }
+        ]
+      };
+    case "pie":
+      return {
+        tooltip: { trigger: "item" },
+        legend: { bottom: 0 },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            name: "Segment",
+            data: [
+              { value: 1048, name: "Direct" },
+              { value: 735, name: "Search" },
+              { value: 580, name: "Email" }
+            ]
+          }
+        ]
+      };
+    case "scatter":
+      return {
+        grid: { top: 24, left: 48, right: 16, bottom: 32 },
+        tooltip: { trigger: "item" },
+        xAxis: { type: "value" },
+        yAxis: { type: "value" },
+        series: [
+          {
+            type: "scatter",
+            name: "Points",
+            symbolSize: 12,
+            data: [
+              [10, 8.04],
+              [8, 6.95],
+              [13, 7.58],
+              [9, 8.81],
+              [11, 8.33],
+              [14, 9.96],
+              [6, 7.24],
+              [4, 4.26],
+              [12, 10.84],
+              [7, 4.82],
+              [5, 5.68]
+            ]
+          }
+        ]
+      };
+  }
+}
 function SlideRail({
   slides,
   selectedId,
@@ -1240,7 +1324,16 @@ function EditorToolbar({
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertShape?.("arrow"), children: "Arrow" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tooltip, { content: "Insert chart", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { variant: "ghost", size: "sm", icon: "bar-chart", onClick: onInsertChart, disabled, "aria-label": "Insert chart" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Dropdown, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { variant: "ghost", size: "sm", icon: "bar-chart", iconTrailing: "chevron-down", disabled, "aria-label": "Insert chart" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Dropdown.Items, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("bar"), children: "Bar chart" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("line"), children: "Line chart" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("area"), children: "Area chart" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("pie"), children: "Pie chart" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("scatter"), children: "Scatter" })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tooltip, { content: "Insert code", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { variant: "ghost", size: "sm", icon: "code", onClick: onInsertCode, disabled, "aria-label": "Insert code" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tooltip, { content: "Insert table", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { variant: "ghost", size: "sm", icon: "table", onClick: onInsertTable, disabled, "aria-label": "Insert table" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Separator, { orientation: "vertical" }),
@@ -1620,17 +1713,13 @@ function DeckEditor({
     [insert]
   );
   const insertChart = react.useCallback(
-    () => insert({
+    (kind = "bar") => insert({
       type: "chart",
       x: 0.1,
       y: 0.2,
       w: 0.8,
       h: 0.6,
-      option: {
-        xAxis: { type: "category", data: ["Q1", "Q2", "Q3", "Q4"] },
-        yAxis: { type: "value" },
-        series: [{ type: "bar", data: [24, 38, 31, 47] }]
-      }
+      option: chartStarterOption(kind)
     }),
     [insert]
   );
@@ -1771,6 +1860,7 @@ exports.SlideViewer = SlideViewer;
 exports.SpeakerNotes = SpeakerNotes;
 exports.TextElementRenderer = TextElementRenderer;
 exports.builtinThemes = builtinThemes;
+exports.chartStarterOption = chartStarterOption;
 exports.darkTheme = darkTheme;
 exports.deckId = deckId;
 exports.defaultTheme = defaultTheme;