[Components] columns_ai - Added new action components (#14469)

components/columns_ai/actions/build-graph-from-scratch/build-graph-from-scratch.mjs

@@ -0,0 +1,152 @@
+import { ChartType } from "columns-graph-model";
+import app from "../../columns_ai.app.mjs";
+import utils from "../../common/utils.mjs";
+
+export default {
+  key: "columns_ai-build-graph-from-scratch",
+  name: "Build Graph From Scratch",
+  description: "Builds a graph object from scratch and publishes it. [See the documentation](https://github.com/varchar-io/vaas?tab=readme-ov-file#basic-usage)",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    app,
+    name: {
+      propDefinition: [
+        app,
+        "name",
+      ],
+    },
+    chartType: {
+      type: "string",
+      label: "Chart Type",
+      description: "The type of chart to construct",
+      async options() {
+        return [
+          {
+            label: "Bar",
+            value: ChartType.BAR,
+          },
+          {
+            label: "Pie",
+            value: ChartType.PIE,
+          },
+          {
+            label: "Doughnut",
+            value: ChartType.DOUGHNUT,
+          },
+          {
+            label: "Line",
+            value: ChartType.LINE,
+          },
+          {
+            label: "Area",
+            value: ChartType.AREA,
+          },
+          {
+            label: "Scatter",
+            value: ChartType.SCATTER,
+          },
+          {
+            label: "Bar Race",
+            value: ChartType.BAR_RACE,
+          },
+          {
+            label: "Boxplot",
+            value: ChartType.BOXPLOT,
+          },
+          {
+            label: "Column",
+            value: ChartType.COLUMN,
+          },
+          {
+            label: "Dot",
+            value: ChartType.DOT,
+          },
+          {
+            label: "Gauge",
+            value: ChartType.GAUGE,
+          },
+          {
+            label: "Map",
+            value: ChartType.MAP,
+          },
+          {
+            label: "Radar",
+            value: ChartType.RADAR,
+          },
+          {
+            label: "Summary",
+            value: ChartType.SUMMARY,
+          },
+          {
+            label: "Table",
+            value: ChartType.TABLE,
+          },
+          {
+            label: "Timeline",
+            value: ChartType.TIMELINE,
+          },
+          {
+            label: "Timeline Area",
+            value: ChartType.TIMELINE_AREA,
+          },
+          {
+            label: "Timeline Bar",
+            value: ChartType.TIMELINE_BAR,
+          },
+          {
+            label: "Tree",
+            value: ChartType.TREE,
+          },
+          {
+            label: "Wordcloud",
+            value: ChartType.WORDCLOUD,
+          },
+        ];
+      },
+    },
+    keys: {
+      propDefinition: [
+        app,
+        "keys",
+      ],
+    },
+    metrics: {
+      propDefinition: [
+        app,
+        "metrics",
+      ],
+    },
+    rows: {
+      propDefinition: [
+        app,
+        "rows",
+      ],
+    },
+  },
+  async run({ $ }) {
+    const {
+      app,
+      name,
+      chartType,
+      keys,
+      metrics,
+      rows,
+    } = this;
+
+    const graph = await app.createGraphFromScratch({
+      chartType,
+      keys,
+      metrics,
+      rows: utils.parseArray(rows),
+    });
+
+    const response = await app.publishGraph({
+      name,
+      graph,
+    });
+
+    $.export("$summary", "Successfully built and published the graph from scratch.");
+    return response;
+  },
+};

components/columns_ai/actions/build-graph-from-template/build-graph-from-template.mjs

@@ -0,0 +1,67 @@
+import app from "../../columns_ai.app.mjs";
+import utils from "../../common/utils.mjs";
+
+export default {
+  key: "columns_ai-build-graph-from-template",
+  name: "Build Graph From Template",
+  description: "Builds a graph object from a template and publishes it. [See the documentation](https://github.com/varchar-io/vaas?tab=readme-ov-file#basic-usage).",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    app,
+    name: {
+      propDefinition: [
+        app,
+        "name",
+      ],
+    },
+    visualId: {
+      type: "string",
+      label: "Visual ID",
+      description: "The ID of an existing graph template on Columns. Eg. `U6tALuJ3cTdPFw` wher it can be taken from the URL `https://columns.ai/visual/view/U6tALuJ3cTdPFw`.",
+    },
+    keys: {
+      propDefinition: [
+        app,
+        "keys",
+      ],
+    },
+    metrics: {
+      propDefinition: [
+        app,
+        "metrics",
+      ],
+    },
+    rows: {
+      propDefinition: [
+        app,
+        "rows",
+      ],
+    },
+  },
+  async run({ $ }) {
+    const {
+      app,
+      name,
+      visualId,
+      keys,
+      metrics,
+      rows,
+    } = this;
+
+    const graph = await app.createGraphFromTemplate({
+      visualId,
+      keys,
+      metrics,
+      rows: utils.parseArray(rows),
+    });
+
+    const response = await app.publishGraph({
+      name,
+      graph,
+    });
+
+    $.export("$summary", "Successfully built and published the graph from template.");
+    return response;
+  },
+};

components/columns_ai/columns_ai.app.mjs

@@ -1,11 +1,65 @@
+import { ChartType } from "columns-graph-model";
+import { Columns } from "columns-sdk";
+
 export default {
   type: "app",
   app: "columns_ai",
-  propDefinitions: {},
+  propDefinitions: {
+    name: {
+      type: "string",
+      label: "Graph Name",
+      description: "The name of the graph",
+    },
+    keys: {
+      type: "string[]",
+      label: "Keys",
+      description: "An array of keys for the data rows.",
+    },
+    metrics: {
+      type: "string[]",
+      label: "Metrics",
+      description: "An array of metrics for the data rows.",
+    },
+    rows: {
+      type: "string[]",
+      label: "Rows",
+      description: "An array of data objects, where each object should be a JSON string. Eg. `{ \"metric\": 4000, \"key\": \"US\", \"parent\": null }`.",
+    },
+  },
   methods: {
-    // this.$auth contains connected account data
-    authKeys() {
-      console.log(Object.keys(this.$auth));
+    getColumns() {
+      return new Columns(this.$auth.api_key);
+    },
+    async createGraphFromScratch({
+      keys = [], metrics = [], rows = [], chartType = ChartType.COLUMN,
+    } = {}) {
+      const columns = this.getColumns();
+      const data = columns.data(keys, metrics, rows);
+      const graph = columns.graph(data);
+
+      graph.type = chartType;
+
+      return graph;
+    },
+    async createGraphFromTemplate({
+      visualId, keys = [], metrics = [], rows = [],
+    } = {}) {
+      const columns = this.getColumns();
+      const graph = await columns.template(visualId);
+
+      if (!graph) {
+        throw new Error(`Failed to load template from Columns: ${visualId}`);
+      }
+
+      graph.data = columns.data(keys, metrics, rows);
+
+      return graph;
+    },
+    publishGraph({
+      name, graph,
+    } = {}) {
+      const columns = this.getColumns();
+      return columns.publish(name, graph);
     },
   },
 };

components/columns_ai/common/utils.mjs

@@ -0,0 +1,51 @@
+import { ConfigurationError } from "@pipedream/platform";
+
+const parseJson = (input) => {
+  const parse = (value) => {
+    if (typeof(value) === "string") {
+      try {
+        return parseJson(JSON.parse(value));
+      } catch (e) {
+        return value;
+      }
+    } else if (typeof(value) === "object" && value !== null) {
+      return Object.entries(value)
+        .reduce((acc, [
+          key,
+          val,
+        ]) => Object.assign(acc, {
+          [key]: parse(val),
+        }), {});
+    }
+    return value;
+  };
+
+  return parse(input);
+};
+
+function parseArray(value) {
+  try {
+    if (!value) {
+      return [];
+    }
+
+    if (Array.isArray(value)) {
+      return value;
+    }
+
+    const parsedValue = JSON.parse(value);
+
+    if (!Array.isArray(parsedValue)) {
+      throw new Error("Not an array");
+    }
+
+    return parsedValue;
+
+  } catch (e) {
+    throw new ConfigurationError("Make sure the custom expression contains a valid array object");
+  }
+}
+
+export default {
+  parseArray: (value) => parseArray(value).map(parseJson),
+};

components/columns_ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/columns_ai",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Pipedream Columns Ai Components",
   "main": "columns_ai.app.mjs",
   "keywords": [
@@ -11,5 +11,9 @@
   "author": "Pipedream <support@pipedream.com> (https://pipedream.com/)",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "columns-graph-model": "^1.1.4",
+    "columns-sdk": "^0.0.6"
   }
-}
+}