@pixerate/editor-react 0.38.0 → 0.40.0

package/dist/chart/index.cjs

@@ -42,7 +42,8 @@ __export(chart_exports, {
   useChartDirector: () => useChartDirector,
   useChartEditor: () => useChartEditor,
   useChartState: () => useChartState,
-  useChartToolProvider: () => useChartToolProvider
+  useChartToolProvider: () => useChartToolProvider,
+  useOfficeChartToolProvider: () => useOfficeChartToolProvider
 });
 module.exports = __toCommonJS(chart_exports);
 
@@ -96,6 +97,29 @@ function useChartToolProvider(registry, controller, options = {}) {
     return registry.register((0, import_chart.createChartToolProvider)(controller, { ...rest, id, namespace, rasterize: rasterize === false ? void 0 : rasterize ?? (0, import_chart.createChartRasterizer)() }));
   }, [registry, controller, id, namespace]);
 }
+function useOfficeChartToolProvider(registry, options = {}) {
+  const latest = (0, import_react.useRef)(options);
+  latest.current = options;
+  const { id, namespace, controller } = options;
+  const hasFiles = !!options.files;
+  (0, import_react.useEffect)(() => {
+    if (!registry) return;
+    const current = latest.current;
+    return registry.register(
+      (0, import_chart.createOfficeChartToolProvider)({
+        ...current,
+        id,
+        namespace,
+        controller,
+        files: hasFiles ? () => latest.current.files?.() ?? [] : void 0,
+        readOnly: () => {
+          const r = latest.current.readOnly;
+          return (typeof r === "function" ? r() : r) ?? false;
+        }
+      })
+    );
+  }, [registry, id, namespace, controller, hasFiles]);
+}
 function useChartDirector(controller, options = {}) {
   const sceneRef = (0, import_react.useRef)(null);
   const ref = (0, import_react.useRef)(null);
@@ -435,7 +459,7 @@ function Toggle({ label, checked, onChange, name }) {
 function Select({ id, value, options, onChange, name, labels }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("select", { id, className: chartInputClass, value, "data-option": name, onChange: (e) => onChange(e.currentTarget.value), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o, children: labels?.[o] ?? cap(o) }, o)) });
 }
-function AxisSection({ controller, axis, value, idBase, horizontal, numeric = false }) {
+function AxisSection({ controller, axis, value, idBase, horizontal, numeric = false, scales = false }) {
   const set = (patch) => controller.setAxis(axis, patch);
   const setFormat = (patch) => set({ format: { ...value.format, ...patch } });
   const bound = (key2) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -468,9 +492,22 @@ function AxisSection({ controller, axis, value, idBase, horizontal, numeric = fa
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Title", htmlFor: `${idBase}-${axis}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartCommitInput, { id: `${idBase}-${axis}-title`, value: value.title, "data-option": `${axis}Axis.title`, className: chartInputClass, onCommit: (title) => void set({ title }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Grid lines", name: `${key}.gridlines`, checked: value.gridlines, onChange: (gridlines) => set({ gridlines }) }),
-      axis === "x" && !numeric && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Dates", name: "xAxis.kind", checked: value.kind === "date", onChange: (dates) => set({ kind: dates ? "date" : void 0 }) })
+      axis === "x" && !numeric && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Dates", name: "xAxis.kind", checked: value.kind === "date", onChange: (dates) => set({ kind: dates ? "date" : void 0 }) }),
+      scales && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Reverse", name: `${key}.reverse`, checked: !!value.reverse, onChange: (reverse) => set({ reverse }) }),
+      scales && valueAxis && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Log scale", name: `${key}.scale`, checked: value.scale === "log", onChange: (log) => set({ scale: log ? "log" : "linear" }) })
     ] }),
-    valueAxis && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Step", htmlFor: `${idBase}-${axis}-step`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    scales && valueAxis && value.scale === "log" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Log base", htmlFor: `${idBase}-${axis}-log-base`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ChartCommitInput,
+      {
+        id: `${idBase}-${axis}-log-base`,
+        value: String(value.logBase ?? 10),
+        inputMode: "decimal",
+        "data-option": `${key}.logBase`,
+        className: chartInputClass,
+        onCommit: (text) => set({ logBase: text.trim() === "" ? void 0 : Number(text) }).ok
+      }
+    ) }),
+    valueAxis && value.scale !== "log" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Step", htmlFor: `${idBase}-${axis}-step`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ChartCommitInput,
       {
         id: `${idBase}-${axis}-step`,
@@ -528,6 +565,44 @@ function AxisSection({ controller, axis, value, idBase, horizontal, numeric = fa
     ] })
   ] });
 }
+function ErrorBarFields({ controller, series, which, idBase }) {
+  const bars = series[which];
+  const key = `series.${which}`;
+  const id = `${idBase}-${which}`;
+  const values = which === "xErrorBars" ? series.x ?? [] : series.values;
+  const set = (next) => controller.updateSeries(series.id, { [which]: next });
+  const patch = (p) => bars && set({ ...bars, ...p });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1.5", "data-section": which === "errorBars" ? "error-bars" : "x-error-bars", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: which === "errorBars" ? "Error bars" : "X error bars", htmlFor: `${id}-type`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("select", { id: `${id}-type`, className: chartInputClass, value: bars?.type ?? "", "data-option": `${key}.type`, onChange: (e) => set((0, import_chart4.chartErrorBarsOfType)(e.currentTarget.value, bars, values)), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "None" }),
+      import_chart4.CHART_ERROR_BAR_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: t, children: import_chart4.CHART_ERROR_BAR_LABELS[t] }, t))
+    ] }) }),
+    bars && (bars.type === "fixed" || bars.type === "percent" || bars.type === "stddev") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: bars.type === "percent" ? "Percent" : bars.type === "stddev" ? "Deviations" : "Amount", htmlFor: `${id}-value`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartCommitInput, { id: `${id}-value`, value: String(bars.value ?? (0, import_chart4.defaultChartErrorBarValue)(bars.type)), inputMode: "decimal", "data-option": `${key}.value`, className: chartInputClass, onCommit: (text) => !!patch({ value: text.trim() === "" ? void 0 : Number(text) })?.ok }) }),
+    bars?.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Plus", htmlFor: `${id}-plus`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartCommitInput, { id: `${id}-plus`, value: (0, import_chart4.formatChartAmountList)(bars.plus), placeholder: "1, 2, -, 0.5", "data-option": `${key}.plus`, className: chartInputClass, onCommit: (text) => !!patch({ plus: (0, import_chart4.parseChartAmountList)(text) })?.ok }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Minus", htmlFor: `${id}-minus`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ChartCommitInput,
+        {
+          id: `${id}-minus`,
+          value: (0, import_chart4.formatChartAmountList)(bars.minus),
+          placeholder: "Same as plus",
+          "data-option": `${key}.minus`,
+          className: chartInputClass,
+          onCommit: (text) => {
+            const next = { ...bars };
+            if (text.trim()) next.minus = (0, import_chart4.parseChartAmountList)(text);
+            else delete next.minus;
+            return set(next).ok;
+          }
+        }
+      ) })
+    ] }),
+    bars && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("select", { className: `${chartInputClass} flex-1`, "aria-label": "Error bar direction", value: bars.direction ?? "both", "data-option": `${key}.direction`, onChange: (e) => patch({ direction: e.currentTarget.value }), children: import_chart4.CHART_ERROR_BAR_DIRECTIONS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: d, children: d === "both" ? "Both ways" : d === "plus" ? "Plus only" : "Minus only" }, d)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Caps", name: `${key}.cap`, checked: bars.cap !== false, onChange: (cap2) => patch({ cap: cap2 }) })
+    ] })
+  ] });
+}
 function ChartInspector({ controller, sections, className }) {
   const { spec, selectedSeries } = useChartState(controller);
   const idBase = (0, import_react4.useId)();
@@ -541,6 +616,7 @@ function ChartInspector({ controller, sections, className }) {
   const hasBars = cartesian && types.includes("bar");
   const hasLines = cartesian && types.some((t) => t === "line" || t === "area");
   const seriesIndex = selectedSeries ? spec.series.findIndex((s) => s.id === selectedSeries.id) : -1;
+  const scales = family === "cartesian" || family === "xy";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `space-y-3 text-xs ${className ?? ""}`, "data-chart-inspector": "", children: [
     show("type") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: chartSectionClass, "data-section": "type", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-3 gap-0.5 rounded-md bg-muted p-0.5", role: "radiogroup", "aria-label": "Chart type", children: import_chart4.CHART_TYPES.map((type) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", role: "radio", "aria-checked": spec.type === type, "data-chart-type": type, className: chartSegmentClass(spec.type === type), onClick: () => controller.setType(type), children: import_chart4.CHART_TYPE_LABELS[type] }, type)) }) }),
     show("style") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: chartSectionClass, "data-section": "style", children: [
@@ -611,9 +687,9 @@ function ChartInspector({ controller, sections, className }) {
       spec.legend.show && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: import_chart4.CHART_LEGEND_POSITIONS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", "aria-pressed": spec.legend.position === p, "data-option": `legend.${p}`, className: chartSegmentClass(spec.legend.position === p), onClick: () => controller.setLegend({ position: p }), children: cap(p) }, p)) })
     ] }),
     show("axes") && hasAxes && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      family !== "box" && family !== "histogram" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "x", value: spec.xAxis, idBase, horizontal: spec.orientation === "horizontal", numeric: family === "xy" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "y", value: spec.yAxis, idBase, horizontal: spec.orientation === "horizontal" }),
-      usesSecondary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "y2", value: spec.yAxis2, idBase, horizontal: spec.orientation === "horizontal" })
+      family !== "box" && family !== "histogram" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "x", value: spec.xAxis, idBase, horizontal: spec.orientation === "horizontal", numeric: family === "xy", scales }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "y", value: spec.yAxis, idBase, horizontal: spec.orientation === "horizontal", scales }),
+      usesSecondary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "y2", value: spec.yAxis2, idBase, horizontal: spec.orientation === "horizontal", scales })
     ] }),
     show("series") && selectedSeries && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: chartSectionClass, "data-section": "series", "data-series-id": selectedSeries.id, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "text-xs font-semibold text-foreground", children: "Series" }),
@@ -662,6 +738,8 @@ function ChartInspector({ controller, sections, className }) {
           ]
         }
       ) }),
+      scales && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorBarFields, { controller, series: selectedSeries, which: "errorBars", idBase }),
+      family === "xy" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorBarFields, { controller, series: selectedSeries, which: "xErrorBars", idBase }),
       (0, import_chart4.chartSupportsTrendlines)(spec.type, spec.stacking) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1", "data-section": "trendlines", children: [
         (selectedSeries.trendlines ?? []).map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", "data-trendline": i, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1 truncate text-muted-foreground", children: (0, import_chart4.chartTrendlineName)(t, selectedSeries.name) }),
@@ -801,6 +879,7 @@ function ChartSparkline({ values, width = 80, height = 20, label, className, ...
   useChartDirector,
   useChartEditor,
   useChartState,
-  useChartToolProvider
+  useChartToolProvider,
+  useOfficeChartToolProvider
 });
 //# sourceMappingURL=index.cjs.map