Support CSV graphs and improve the look and feel (#2495)

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/analytics.ts

@@ -9,6 +9,7 @@ export const EVENT_LIBRARY = "library";
 export const EVENT_LOAD = "load";
 export const EVENT_SHAPE = "shape";
 export const EVENT_SHARE = "share";
+export const EVENT_MAGIC = "magic";
 
 export const trackEvent = window.gtag
   ? (category: string, name: string, label?: string, value?: number) => {

src/charts.ts

@@ -1,28 +1,26 @@
+import { EVENT_MAGIC, trackEvent } from "./analytics";
+import colors from "./colors";
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from "./constants";
+import { newElement, newTextElement, newLinearElement } from "./element";
 import { ExcalidrawElement } from "./element/types";
-import { newElement, newTextElement } from "./element";
+import { randomId } from "./random";
-import { AppState } from "./types";
+
-import { t } from "./i18n";
+const BAR_WIDTH = 32;
-import { DEFAULT_VERTICAL_ALIGN } from "./constants";
+const BAR_GAP = 12;
+const BAR_HEIGHT = 256;
 
 export interface Spreadsheet {
-  yAxisLabel: string | null;
+  title: string | null;
   labels: string[] | null;
   values: number[];
 }
 
 export const NOT_SPREADSHEET = "NOT_SPREADSHEET";
-export const MALFORMED_SPREADSHEET = "MALFORMED_SPREADSHEET";
 export const VALID_SPREADSHEET = "VALID_SPREADSHEET";
 
 type ParseSpreadsheetResult =
-  | {
+  | { type: typeof NOT_SPREADSHEET }
-      type: typeof NOT_SPREADSHEET;
+  | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet };
-    }
-  | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
-  | {
-      type: typeof MALFORMED_SPREADSHEET;
-      error: string;
-    };
 
 const tryParseNumber = (s: string): number | null => {
   const match = /^[$€£¥₩]?([0-9]+(\.[0-9]+)?)$/.exec(s);
@@ -32,17 +30,14 @@ const tryParseNumber = (s: string): number | null => {
   return parseFloat(match[1]);
 };
 
-const isNumericColumn = (lines: string[][], columnIndex: number) => {
+const isNumericColumn = (lines: string[][], columnIndex: number) =>
-  return lines
+  lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
-    .slice(1)
-    .every((line) => tryParseNumber(line[columnIndex]) !== null);
-};
 
 const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
   const numCols = cells[0].length;
 
   if (numCols > 2) {
-    return { type: MALFORMED_SPREADSHEET, error: t("charts.tooManyColumns") };
+    return { type: NOT_SPREADSHEET };
   }
 
   if (numCols === 1) {
@@ -62,7 +57,7 @@ const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
     return {
       type: VALID_SPREADSHEET,
       spreadsheet: {
-        yAxisLabel: hasHeader ? cells[0][0] : null,
+        title: hasHeader ? cells[0][0] : null,
         labels: null,
         values: values as number[],
       },
@@ -72,10 +67,7 @@ const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
   const valueColumnIndex = isNumericColumn(cells, 0) ? 0 : 1;
 
   if (!isNumericColumn(cells, valueColumnIndex)) {
-    return {
+    return { type: NOT_SPREADSHEET };
-      type: MALFORMED_SPREADSHEET,
-      error: t("charts.noNumericColumn"),
-    };
   }
 
   const labelColumnIndex = (valueColumnIndex + 1) % 2;
@@ -89,7 +81,7 @@ const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
   return {
     type: VALID_SPREADSHEET,
     spreadsheet: {
-      yAxisLabel: hasHeader ? cells[0][valueColumnIndex] : null,
+      title: hasHeader ? cells[0][valueColumnIndex] : null,
       labels: rows.map((row) => row[labelColumnIndex]),
       values: rows.map((row) => tryParseNumber(row[valueColumnIndex])!),
     },
@@ -105,28 +97,35 @@ const transposeCells = (cells: string[][]) => {
     }
     nextCells.push(nextCellRow);
   }
-
   return nextCells;
 };
 
 export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
-  // copy/paste from excel, in-browser excel, and google sheets is tsv
+  // Copy/paste from excel, spreadhseets, tsv, csv.
-  // for now we only accept 2 columns with an optional header
+  // For now we only accept 2 columns with an optional header
-  const lines = text
+
+  // Check for tab separeted values
+  let lines = text
     .trim()
     .split("\n")
     .map((line) => line.trim().split("\t"));
 
+  // Check for comma separeted files
+  if (lines.length && lines[0].length !== 2) {
+    lines = text
+      .trim()
+      .split("\n")
+      .map((line) => line.trim().split(","));
+  }
+
   if (lines.length === 0) {
     return { type: NOT_SPREADSHEET };
   }
 
   const numColsFirstLine = lines[0].length;
-  const isASpreadsheet = lines.every(
+  const isSpreadsheet = lines.every((line) => line.length === numColsFirstLine);
-    (line) => line.length === numColsFirstLine,
-  );
 
-  if (!isASpreadsheet) {
+  if (!isSpreadsheet) {
     return { type: NOT_SPREADSHEET };
   }
 
@@ -141,131 +140,140 @@ export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
   return result;
 };
 
-const BAR_WIDTH = 32;
+// For the maths behind it https://excalidraw.com/#json=6320864370884608,O_5xfD-Agh32tytHpRJx1g
-const BAR_SPACING = 12;
-const BAR_HEIGHT = 192;
-const LABEL_SPACING = 3 * BAR_SPACING;
-const Y_AXIS_LABEL_SPACING = LABEL_SPACING;
-const ANGLE = 5.87;
-
 export const renderSpreadsheet = (
-  appState: AppState,
   spreadsheet: Spreadsheet,
   x: number,
   y: number,
 ): ExcalidrawElement[] => {
-  const max = Math.max(...spreadsheet.values);
+  const values = spreadsheet.values;
-  const min = Math.min(0, ...spreadsheet.values);
+  const max = Math.max(...values);
-  const range = max - min;
+  const chartHeight = BAR_HEIGHT + BAR_GAP * 2;
+  const chartWidth = (BAR_WIDTH + BAR_GAP) * values.length + BAR_GAP;
+  const maxColors = colors.elementBackground.length;
+  const bgColors = colors.elementBackground.slice(2, maxColors);
+
+  // Put all the common properties here so when the whole chart is selected
+  // the properties dialog shows the correct selected values
+  const commonProps = {
+    backgroundColor: bgColors[Math.floor(Math.random() * bgColors.length)],
+    fillStyle: "hachure",
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontSize: DEFAULT_FONT_SIZE,
+    groupIds: [randomId()],
+    opacity: 100,
+    roughness: 1,
+    strokeColor: colors.elementStroke[0],
+    strokeSharpness: "sharp",
+    strokeStyle: "solid",
+    strokeWidth: 1,
+    verticalAlign: "middle",
+  } as const;
 
   const minYLabel = newTextElement({
-    x,
+    ...commonProps,
-    y: y + BAR_HEIGHT,
+    x: x - BAR_GAP,
-    strokeColor: appState.currentItemStrokeColor,
+    y: y - BAR_GAP,
-    backgroundColor: appState.currentItemBackgroundColor,
+    text: "0",
-    fillStyle: appState.currentItemFillStyle,
+    textAlign: "right",
-    strokeWidth: appState.currentItemStrokeWidth,
-    strokeStyle: appState.currentItemStrokeStyle,
-    roughness: appState.currentItemRoughness,
-    opacity: appState.currentItemOpacity,
-    strokeSharpness: appState.currentItemStrokeSharpness,
-    text: min.toLocaleString(),
-    fontSize: 16,
-    fontFamily: appState.currentItemFontFamily,
-    textAlign: appState.currentItemTextAlign,
-    verticalAlign: DEFAULT_VERTICAL_ALIGN,
   });
 
   const maxYLabel = newTextElement({
-    x,
+    ...commonProps,
-    y,
+    x: x - BAR_GAP,
-    strokeColor: appState.currentItemStrokeColor,
+    y: y - BAR_HEIGHT - minYLabel.height / 2,
-    backgroundColor: appState.currentItemBackgroundColor,
-    fillStyle: appState.currentItemFillStyle,
-    strokeWidth: appState.currentItemStrokeWidth,
-    strokeStyle: appState.currentItemStrokeStyle,
-    roughness: appState.currentItemRoughness,
-    opacity: appState.currentItemOpacity,
-    strokeSharpness: appState.currentItemStrokeSharpness,
     text: max.toLocaleString(),
-    fontSize: 16,
+    textAlign: "right",
-    fontFamily: appState.currentItemFontFamily,
-    textAlign: appState.currentItemTextAlign,
-    verticalAlign: DEFAULT_VERTICAL_ALIGN,
   });
 
-  const bars = spreadsheet.values.map((value, index) => {
+  const xAxisLine = newLinearElement({
-    const valueBarHeight = value - min;
+    type: "line",
-    const percentBarHeight = valueBarHeight / range;
+    x,
-    const barHeight = percentBarHeight * BAR_HEIGHT;
+    y,
-    const barX = index * (BAR_WIDTH + BAR_SPACING) + LABEL_SPACING;
+    startArrowhead: null,
-    const barY = BAR_HEIGHT - barHeight;
+    endArrowhead: null,
+    points: [
+      [0, 0],
+      [chartWidth, 0],
+    ],
+    ...commonProps,
+  });
+
+  const yAxisLine = newLinearElement({
+    type: "line",
+    x,
+    y,
+    startArrowhead: null,
+    endArrowhead: null,
+    points: [
+      [0, 0],
+      [0, -chartHeight],
+    ],
+    ...commonProps,
+  });
+
+  const maxValueLine = newLinearElement({
+    type: "line",
+    x,
+    y: y - BAR_HEIGHT - BAR_GAP,
+    startArrowhead: null,
+    endArrowhead: null,
+    ...commonProps,
+    strokeStyle: "dotted",
+    points: [
+      [0, 0],
+      [chartWidth, 0],
+    ],
+  });
+
+  const bars = values.map((value, index) => {
+    const barHeight = (value / max) * BAR_HEIGHT;
     return newElement({
+      ...commonProps,
       type: "rectangle",
-      x: barX + x,
+      x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP,
-      y: barY + y,
+      y: y - barHeight - BAR_GAP,
       width: BAR_WIDTH,
       height: barHeight,
-      strokeColor: appState.currentItemStrokeColor,
-      backgroundColor: appState.currentItemBackgroundColor,
-      fillStyle: appState.currentItemFillStyle,
-      strokeWidth: appState.currentItemStrokeWidth,
-      strokeStyle: appState.currentItemStrokeStyle,
-      roughness: appState.currentItemRoughness,
-      opacity: appState.currentItemOpacity,
-      strokeSharpness: appState.currentItemStrokeSharpness,
     });
   });
 
   const xLabels =
     spreadsheet.labels?.map((label, index) => {
-      const labelX =
-        index * (BAR_WIDTH + BAR_SPACING) + LABEL_SPACING + BAR_SPACING;
-      const labelY = BAR_HEIGHT + BAR_SPACING;
       return newTextElement({
+        ...commonProps,
         text: label.length > 8 ? `${label.slice(0, 5)}...` : label,
-        x: x + labelX,
+        x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP * 2,
-        y: y + labelY,
+        y: y + BAR_GAP / 2,
-        strokeColor: appState.currentItemStrokeColor,
-        backgroundColor: appState.currentItemBackgroundColor,
-        fillStyle: appState.currentItemFillStyle,
-        strokeWidth: appState.currentItemStrokeWidth,
-        strokeStyle: appState.currentItemStrokeStyle,
-        roughness: appState.currentItemRoughness,
-        opacity: appState.currentItemOpacity,
-        strokeSharpness: appState.currentItemStrokeSharpness,
-        fontSize: 16,
-        fontFamily: appState.currentItemFontFamily,
-        textAlign: "center",
-        verticalAlign: DEFAULT_VERTICAL_ALIGN,
         width: BAR_WIDTH,
-        angle: ANGLE,
+        angle: 5.87,
+        fontSize: 16,
+        textAlign: "center",
+        verticalAlign: "top",
       });
     }) || [];
 
-  const yAxisLabel = spreadsheet.yAxisLabel
+  const title = spreadsheet.title
     ? newTextElement({
-        text: spreadsheet.yAxisLabel,
+        ...commonProps,
-        x: x - Y_AXIS_LABEL_SPACING,
+        text: spreadsheet.title,
-        y: y + BAR_HEIGHT / 2 - 10,
+        x: x + chartWidth / 2,
-        strokeColor: appState.currentItemStrokeColor,
+        y: y - BAR_HEIGHT - BAR_GAP * 2 - maxYLabel.height,
-        backgroundColor: appState.currentItemBackgroundColor,
+        strokeSharpness: "sharp",
-        fillStyle: appState.currentItemFillStyle,
+        strokeStyle: "solid",
-        strokeWidth: appState.currentItemStrokeWidth,
-        strokeStyle: appState.currentItemStrokeStyle,
-        roughness: appState.currentItemRoughness,
-        opacity: appState.currentItemOpacity,
-        strokeSharpness: appState.currentItemStrokeSharpness,
-        fontSize: 20,
-        fontFamily: appState.currentItemFontFamily,
         textAlign: "center",
-        verticalAlign: DEFAULT_VERTICAL_ALIGN,
-        width: BAR_WIDTH,
-        angle: ANGLE,
       })
     : null;
 
-  return [...bars, yAxisLabel, minYLabel, maxYLabel, ...xLabels].filter(
+  trackEvent(EVENT_MAGIC, "chart", "bars", bars.length);
-    (element) => element !== null,
+  return [
-  ) as ExcalidrawElement[];
+    title,
+    ...bars,
+    ...xLabels,
+    xAxisLine,
+    yAxisLine,
+    maxValueLine,
+    minYLabel,
+    maxYLabel,
+  ].filter((element) => element !== null) as ExcalidrawElement[];
 };

src/clipboard.ts

@@ -5,12 +5,7 @@ import {
 import { getSelectedElements } from "./scene";
 import { AppState } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
-import {
+import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
-  tryParseSpreadsheet,
-  Spreadsheet,
-  VALID_SPREADSHEET,
-  MALFORMED_SPREADSHEET,
-} from "./charts";
 import { canvasToBlob } from "./data/blob";
 
 const TYPE_ELEMENTS = "excalidraw/elements";
@@ -82,8 +77,6 @@ const parsePotentialSpreadsheet = (
   const result = tryParseSpreadsheet(text);
   if (result.type === VALID_SPREADSHEET) {
     return { spreadsheet: result.spreadsheet };
-  } else if (result.type === MALFORMED_SPREADSHEET) {
-    return { errorMessage: result.error };
   }
   return null;
 };

src/components/App.tsx

@@ -990,7 +990,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         this.setState({ errorMessage: data.errorMessage });
       } else if (data.spreadsheet) {
         this.addElementsFromPasteOrLibrary(
-          renderSpreadsheet(this.state, data.spreadsheet, cursorX, cursorY),
+          renderSpreadsheet(data.spreadsheet, cursorX, cursorY),
         );
       } else if (data.elements) {
         this.addElementsFromPasteOrLibrary(data.elements);

src/element/newElement.ts

@@ -217,11 +217,12 @@ export const newLinearElement = (
     type: ExcalidrawLinearElement["type"];
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
+    points?: ExcalidrawLinearElement["points"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawLinearElement> => {
   return {
     ..._newElementBase<ExcalidrawLinearElement>(opts.type, opts),
-    points: [],
+    points: opts.points || [],
     lastCommittedPoint: null,
     startBinding: null,
     endBinding: null,

src/element/types.ts

@@ -1,7 +1,15 @@
 import { Point } from "../types";
 import { FONT_FAMILY } from "../constants";
 
+export type FillStyle = "hachure" | "cross-hatch" | "solid";
+export type FontFamily = keyof typeof FONT_FAMILY;
+export type FontString = string & { _brand: "fontString" };
 export type GroupId = string;
+export type PointerType = "mouse" | "pen" | "touch";
+export type StrokeSharpness = "round" | "sharp";
+export type StrokeStyle = "solid" | "dashed" | "dotted";
+export type TextAlign = "left" | "center" | "right";
+export type VerticalAlign = "top" | "middle";
 
 type _ExcalidrawElementBase = Readonly<{
   id: string;
@@ -9,10 +17,10 @@ type _ExcalidrawElementBase = Readonly<{
   y: number;
   strokeColor: string;
   backgroundColor: string;
-  fillStyle: string;
+  fillStyle: FillStyle;
   strokeWidth: number;
-  strokeStyle: "solid" | "dashed" | "dotted";
+  strokeStyle: StrokeStyle;
-  strokeSharpness: "round" | "sharp";
+  strokeSharpness: StrokeSharpness;
   roughness: number;
   opacity: number;
   width: number;
@@ -102,11 +110,3 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
   }>;
-
-export type PointerType = "mouse" | "pen" | "touch";
-
-export type TextAlign = "left" | "center" | "right";
-export type VerticalAlign = "top" | "middle";
-
-export type FontFamily = keyof typeof FONT_FAMILY;
-export type FontString = string & { _brand: "fontString" };

src/locales/en.json

@@ -215,10 +215,6 @@
   "encrypted": {
     "tooltip": "Your drawings are end-to-end encrypted so Excalidraw's servers will never see them."
   },
-  "charts": {
-    "noNumericColumn": "You pasted a spreadsheet without a numeric column.",
-    "tooManyColumns": "You pasted a spreadsheet with more than two columns."
-  },
   "stats": {
     "angle": "Angle",
     "element": "Element",

src/types.ts

@@ -52,7 +52,7 @@ export type AppState = {
   shouldAddWatermark: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
-  currentItemFillStyle: string;
+  currentItemFillStyle: ExcalidrawElement["fillStyle"];
   currentItemStrokeWidth: number;
   currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
   currentItemRoughness: number;