@particle-academy/fancy-slides 0.1.4 → 0.1.5

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;