Integrate the MongoDB API with the Columns Ai API

import mongodb from 'mongodb'

export default defineComponent({
  props: {
    mongodb: {
      type: "app",
      app: "mongodb",
    },
    collection: {
      type: "string"
    },
    filter: {
      type: "object"
    }
  },
  async run({steps, $}) {
    const MongoClient = mongodb.MongoClient
    
    const {
      database,
      hostname,
      username,
      password,
    } = this.mongodb.$auth
    
    const url = `mongodb+srv://${username}:${password}@${hostname}/test?retryWrites=true&w=majority`
    const client = await MongoClient.connect(url, { 
      useNewUrlParser: true, 
      useUnifiedTopology: true 
    })
    
    const db = client.db(database)

    const results = await db.collection(this.collection).find(this.filter).toArray();
    $.export('results', results);
    
    await client.close()
  },
})

import { ChartType } from 'columns-graph-model';
import { Columns } from 'columns-sdk';

export default defineComponent({
  props: {
    columns_ai: {
      type: "app",
      app: "columns_ai",
    }
  },
  async run({steps, $}) {    
    const rows = [{
        "value": 312,
        "state": "WA",
        "parent": "US"
      }];// rows is an example data set where you should organize your data in a similar way.

    //Instantiates a Columns SDK object with your API Key.  
    const columns = new Columns(this.columns_ai.$auth.api_key);
    const data = columns.data(['state'], ['value'], rows);
    const graph = columns.graph(data);

    // switch to different chart types: BAR, PIE, DOUGHGUT, LINE, AREA, SCATTER, etc.
    graph.type = ChartType.COLUMN;

    // customise the graph (lots of options in its data model)
    graph.settings.general.palette = ['#ff0000', '#00ff00', '#0000ff'];
    graph.settings.general.background = '#00000002';
    
    return graph;          
  },
})