feat(editor): support radar chart and multiple series for other chart types (#10824)

packages/excalidraw/components/PasteChartDialog.tsx

@@ -1,35 +1,57 @@
 import React, { useLayoutEffect, useRef, useState } from "react";
 
+import { newTextElement } from "@excalidraw/element";
+
 import type { ChartType } from "@excalidraw/element/types";
 
 import { trackEvent } from "../analytics";
-import { renderSpreadsheet } from "../charts";
+import { isSpreadsheetValidForChartType, renderSpreadsheet } from "../charts";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
 
+import { useUIAppState } from "../context/ui-appState";
+
 import { useApp } from "./App";
 import { Dialog } from "./Dialog";
 
 import "./PasteChartDialog.scss";
 
+import { bucketFillIcon } from "./icons";
+
 import type { ChartElements, Spreadsheet } from "../charts";
-import type { UIAppState } from "../types";
+
+type OnPlainTextPaste = (rawText: string) => void;
 
 type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;
 
+const getChartTypeLabel = (chartType: ChartType) => {
+  switch (chartType) {
+    case "bar":
+      return t("labels.chartType_bar");
+    case "line":
+      return t("labels.chartType_line");
+    case "radar":
+      return t("labels.chartType_radar");
+    default:
+      return chartType;
+  }
+};
+
 const ChartPreviewBtn = (props: {
   spreadsheet: Spreadsheet | null;
   chartType: ChartType;
-  selected: boolean;
+  colorSeed: number;
   onClick: OnInsertChart;
 }) => {
   const previewRef = useRef<HTMLDivElement | null>(null);
   const [chartElements, setChartElements] = useState<ChartElements | null>(
     null,
   );
+  const { theme } = useUIAppState();
 
   useLayoutEffect(() => {
     if (!props.spreadsheet) {
+      setChartElements(null);
       return;
     }
 
@@ -38,7 +60,13 @@ const ChartPreviewBtn = (props: {
       props.spreadsheet,
       0,
       0,
+      props.colorSeed,
     );
+    if (!elements) {
+      setChartElements(null);
+      previewRef.current?.replaceChildren();
+      return;
+    }
     setChartElements(elements);
     let svg: SVGSVGElement;
     const previewNode = previewRef.current!;
@@ -49,6 +77,7 @@ const ChartPreviewBtn = (props: {
         {
           exportBackground: false,
           viewBackgroundColor: "#fff",
+          exportWithDarkMode: theme === "dark",
         },
         null, // files
         {
@@ -58,42 +87,108 @@ const ChartPreviewBtn = (props: {
       svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);
-
-      if (props.selected) {
-        (previewNode.parentNode as HTMLDivElement).focus();
-      }
     })();
 
     return () => {
       previewNode.replaceChildren();
     };
-  }, [props.spreadsheet, props.chartType, props.selected]);
+  }, [props.spreadsheet, props.chartType, props.colorSeed, theme]);
+
+  const chartTypeLabel = getChartTypeLabel(props.chartType);
 
   return (
     <button
       type="button"
       className="ChartPreview"
+      aria-label={chartTypeLabel}
       onClick={() => {
         if (chartElements) {
           props.onClick(props.chartType, chartElements);
         }
       }}
     >
-      <div ref={previewRef} />
+      <div className="ChartPreview__canvas" ref={previewRef} />
+      <div className="ChartPreview__label">{chartTypeLabel}</div>
+    </button>
+  );
+};
+
+const PlainTextPreviewBtn = (props: {
+  rawText: string;
+  onClick: OnPlainTextPaste;
+}) => {
+  const previewRef = useRef<HTMLDivElement | null>(null);
+  const { theme } = useUIAppState();
+
+  useLayoutEffect(() => {
+    if (!props.rawText) {
+      return;
+    }
+
+    const textElement = newTextElement({
+      text: props.rawText,
+      x: 0,
+      y: 0,
+    });
+
+    const previewNode = previewRef.current!;
+
+    (async () => {
+      const svg = await exportToSvg(
+        [textElement],
+        {
+          exportBackground: false,
+          viewBackgroundColor: "#fff",
+          exportWithDarkMode: theme === "dark",
+        },
+        null,
+        {
+          skipInliningFonts: true,
+        },
+      );
+      svg.querySelector(".style-fonts")?.remove();
+      previewNode.replaceChildren();
+      previewNode.appendChild(svg);
+    })();
+
+    return () => {
+      previewNode.replaceChildren();
+    };
+  }, [props.rawText, theme]);
+
+  return (
+    <button
+      type="button"
+      className="ChartPreview"
+      aria-label={t("labels.chartType_plaintext")}
+      onClick={() => {
+        props.onClick(props.rawText);
+      }}
+    >
+      <div className="ChartPreview__canvas" ref={previewRef} />
+      <div className="ChartPreview__label">
+        {t("labels.chartType_plaintext")}
+      </div>
     </button>
   );
 };
 
 export const PasteChartDialog = ({
-  setAppState,
-  appState,
+  data,
+  rawText,
   onClose,
 }: {
-  appState: UIAppState;
+  data: Spreadsheet;
+  rawText: string;
   onClose: () => void;
-  setAppState: React.Component<any, UIAppState>["setState"];
 }) => {
-  const { onInsertElements } = useApp();
+  const { onInsertElements, focusContainer } = useApp();
+  const [colorSeed, setColorSeed] = useState(Math.random());
+
+  const handleReshuffleColors = React.useCallback(() => {
+    setColorSeed(Math.random());
+  }, []);
+
   const handleClose = React.useCallback(() => {
     if (onClose) {
       onClose();
@@ -103,36 +198,72 @@ export const PasteChartDialog = ({
   const handleChartClick = (chartType: ChartType, elements: ChartElements) => {
     onInsertElements(elements);
     trackEvent("paste", "chart", chartType);
-    setAppState({
-      currentChartType: chartType,
-      pasteDialog: {
-        shown: false,
-        data: null,
-      },
+    onClose();
+    focusContainer();
+  };
+
+  const handlePlainTextClick = (rawText: string) => {
+    const textElement = newTextElement({
+      text: rawText,
+      x: 0,
+      y: 0,
     });
+    onInsertElements([textElement]);
+    trackEvent("paste", "chart", "plaintext");
+    onClose();
+    focusContainer();
   };
 
   return (
     <Dialog
-      size="small"
+      size="regular"
       onCloseRequest={handleClose}
-      title={t("labels.pasteCharts")}
+      title={
+        <div className="PasteChartDialog__title">
+          <div className="PasteChartDialog__titleText">
+            {t("labels.pasteCharts")}
+          </div>
+          <div
+            className="PasteChartDialog__reshuffleBtn"
+            onClick={handleReshuffleColors}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handleReshuffleColors();
+              }
+            }}
+          >
+            {bucketFillIcon}
+          </div>
+        </div>
+      }
       className={"PasteChartDialog"}
       autofocus={false}
     >
       <div className={"container"}>
-        <ChartPreviewBtn
-          chartType="bar"
-          spreadsheet={appState.pasteDialog.data}
-          selected={appState.currentChartType === "bar"}
-          onClick={handleChartClick}
-        />
-        <ChartPreviewBtn
-          chartType="line"
-          spreadsheet={appState.pasteDialog.data}
-          selected={appState.currentChartType === "line"}
-          onClick={handleChartClick}
-        />
+        {(["bar", "line", "radar"] as const).map((chartType) => {
+          if (!isSpreadsheetValidForChartType(data, chartType)) {
+            return null;
+          }
+
+          return (
+            <ChartPreviewBtn
+              key={chartType}
+              chartType={chartType}
+              spreadsheet={data}
+              colorSeed={colorSeed}
+              onClick={handleChartClick}
+            />
+          );
+        })}
+        {rawText && (
+          <PlainTextPreviewBtn
+            rawText={rawText}
+            onClick={handlePlainTextClick}
+          />
+        )}
       </div>
     </Dialog>
   );