Added basic legend support

Added a basic legend proof of concept. Should probably make the legend placement and layout auto adjusting.

Author: hrrs01

src/common/defaults.ts

@@ -84,6 +84,7 @@ export const DEFAULT_CONSTANT_INPUTS: ConstantInputs = {
  */
 export const DEFAULT_PLOT_INPUTS: PlotInputs = {
   constants: {},
+  legends: false,
   xAxis: {
     label: undefined,
     domain: {

src/common/types.ts

@@ -18,6 +18,7 @@ export type DeepNonNullable<T> = {
 
 export interface FunctionInputs {
   id?: string;
+  name?: string;
   scope: { [_: string]: number };
   fnType: "linear" | "vector" | "polar";
   fn?: string;
@@ -52,6 +53,7 @@ export interface ConstantInputs {
 export interface PlotInputs {
   data: FunctionInputs[];
   constants: { [_: string]: ConstantInputs };
+  legends: boolean;
   xAxis: {
     label?: string;
     domain: {

src/common/utils.ts

@@ -1,5 +1,6 @@
 import { Editor, parseYaml } from "obsidian";
 import type ObsidianFunctionPlot from "../main";
+import type { Selection } from "d3";
 import type {
   FunctionInputs,
   PlotInputs,
@@ -18,6 +19,7 @@ import type {
   FunctionPlotOptions,
 } from "function-plot/dist/types";
 import { FunctionPlot } from "../fnplot";
+import type { Chart } from "function-plot";
 
 export function gcd(a: number, b: number): number {
   return !b ? a : gcd(b, a % b);
@@ -104,6 +106,23 @@ export function toFunctionPlotOptions(
         options.yAxis.domain.max ?? FALLBACK_PLOT_INPUTS.yAxis.domain.max,
       ],
     },
+    plugins: [(chart: Chart) => {
+      if(!options.legends) return;
+      chart.root.append("text").attr("class", "top-left-legend");
+      let text_color = "#00ff00";
+      let legends: {name: string, color: string}[] = [];
+      chart.options.data?.forEach((datum, index, arr) => {
+        legends.push({name: (options.data[index].name) || "", color: datum.color || ""});
+      })
+      const tll: any = chart.root.select(".top-left-legend");
+      console.log(legends);
+      tll.selectAll("tspan").remove();
+      legends.forEach((legend, index, arr) => {
+        tll.attr("y", (chart.meta.margin?.top || 20) / 2)
+           .attr("x", chart.meta.margin?.left || 10)
+        tll.append("tspan").attr('fill', legend.color).text("█ " + legend.name + "\n");;
+      }) 
+    }],
     grid: options.grid ?? undefined,
     disableZoom: options.disableZoom ?? undefined,
   };
@@ -230,6 +249,7 @@ export function parseYAMLCodeBlock(content: string): PlotInputs {
   return {
     constants: {},
     title: header.title ?? DEFAULT_PLOT_INPUTS.title,
+    legends: false,
     xAxis: {
       label: header.xLabel ?? FALLBACK_PLOT_INPUTS.xAxis.label,
       domain: header.bounds

src/components/PlotModal/Function.svelte

@@ -33,6 +33,8 @@
     <option value="vector">vector</option>
   </Dropdown>
 
+  <TextInput placeholder="Name" width="10ch" bind:value={datum.name} />
+
   {#if datum.fnType === "linear"}
     <TextInput placeholder="f(x)=" width="20ch" bind:value={datum.fn} />
   {/if}
@@ -112,8 +114,8 @@
 <style lang="scss">
   .functionplot-item-data {
     display: inline-grid;
-    grid-template-columns: min-content auto repeat(3, min-content);
-    column-gap: 1em;
+    grid-template-columns: repeat(6, min-content);
+    column-gap: 0.5em;
     place-items: center start;
     width: 100%;
     padding: 0.5em;
@@ -125,7 +127,7 @@
   .functionplot-nums-inputs {
     display: flex;
     flex-direction: row;
-    column-gap: 0.6em;
+    column-gap: 0.5em;
     width: min-content;
   }
 </style>

src/components/PlotModal/PlotModal.svelte

@@ -145,6 +145,9 @@
           <SettingItem name="Disable Zoom">
             <Switch bind:checked={options.disableZoom} />
           </SettingItem>
+          <SettingItem name="Show Legends">
+            <Switch bind:checked={options.legends} />
+          </SettingItem>
           <SettingItem name="Show Grid">
             <Switch bind:checked={options.grid} />
           </SettingItem>