New line options (#67)

* update dependencies

* add new options for line

* fix error: replace let with const

* update synatx + default value for graphType

Author: ShahriarKh

package.json

@@ -33,7 +33,7 @@
     "yaml": "^2.1.3"
   },
   "dependencies": {
-    "function-plot": "^1.22.9-0",
-    "obsidian": "0.12.2"
+    "function-plot": "^1.23.1",
+    "obsidian": "^0.16.3"
   }
 }

src/app/CreatePlotModal.ts

@@ -2,7 +2,7 @@ import { Chart } from "function-plot";
 import { FunctionPlotDatum } from "function-plot/dist/types";
 import { Editor, Modal, Setting } from "obsidian";
 import { DEFAULT_PLOT_OPTIONS, rendererOptions } from "../common/defaults";
-import { PlotOptions, rendererType } from "../common/types";
+import { PlotOptions, rendererType, Line } from "../common/types";
 import type ObsidianFunctionPlot from "../main";
 import { createPlot, renderPlotAsInteractive } from "../common/utils";
 
@@ -34,11 +34,17 @@ export default class CreatePlotModal extends Modal {
     this.plot.options.yAxis.domain = this.options.bounds.slice(2, 4);
     this.plot.options.grid = this.options.grid;
     this.plot.options.data = this.options.functions.map(
-      (f): FunctionPlotDatum => {
-        return {
-          fn: f.split("=")[1],
-          graphType: "polyline",
-        };
+      (line): FunctionPlotDatum => {
+        // use polyline by default
+        const lineProperties: Line = {graphType: "polyline"};
+
+        line.split("@").forEach((property) => {
+          const tup = property.split("=");
+          const value = tup[1].trim()
+          lineProperties[tup[0].trim()] = value.startsWith("[") ? JSON.parse(value) : value;
+        });
+
+        return lineProperties;
       }
     );
     // redirect errors within function-plot to debug

src/common/types.ts

@@ -11,6 +11,18 @@ export type rendererType = "interactive"; //| "image";
  */
 export type chartType = Chart & EventEmitter;
 
+/**
+ * An interface specifying the properties of a line.
+ */
+export interface Line {
+  fn?: string;
+  graphType?: "polyline" | "interval" | "scatter";
+  nSamples?: number;
+  range?: [number, number];
+  closed?: boolean
+  color?: string
+}
+
 /**
  * An interface specifying the options for a plot.
  */

src/common/utils.ts

@@ -1,6 +1,6 @@
 import { Editor, parseYaml } from "obsidian";
 import type ObsidianFunctionPlot from "../main";
-import { PlotOptions } from "./types";
+import { PlotOptions, Line } from "./types";
 import { type FunctionPlotOptions } from "function-plot/dist/types";
 import createStylingPlugin from "../plugins/styling";
 import functionPlot, { Chart } from "function-plot";
@@ -73,7 +73,17 @@ export async function createPlot(
         label: options.yLabel,
       },
       data: options.functions.map((line) => {
-        return { fn: line.split("=")[1], graphType: "polyline" };
+        // use polyline by default
+        const lineProperties: Line = {graphType: "polyline"};
+
+        line.split("@").forEach((property) => {
+          const tup = property.split("=");
+          const value = tup[1].trim()
+          // Using JSON.parse here to convert "range" value from string to real array
+          lineProperties[tup[0].trim()] = value.startsWith("[") ? JSON.parse(value) : value;
+        });
+
+        return lineProperties;
       }),
     };
     const plot = functionPlot(fPlotOptions);