Merge branch 'master' into removing-uikit-05

# Conflicts: # packages/standard-components/dist/index.js.map
2020-09-04 21:45:33 +01:00 · 2020-09-04 21:45:33 +01:00 · a96df4d020
parent 414985e272 39830d42b5
commit a96df4d020
46 changed files with 997 additions and 394 deletions
--- a/.github/workflows/ecs_deploy.yml
+++ b/.github/workflows/ecs_deploy.yml
@ -0,0 +1,85 @@
+# This workflow will build and push a new container image to Amazon ECR,
+# and then will deploy a new task definition to Amazon ECS, when a release is created
+#
+# To use this workflow, you will need to complete the following set-up steps:
+#
+# 1. Create an ECR repository to store your images.
+#    For example: `aws ecr create-repository --repository-name my-ecr-repo --region us-east-2`.
+#    Replace the value of `ECR_REPOSITORY` in the workflow below with your repository's name.
+#    Replace the value of `aws-region` in the workflow below with your repository's region.
+#
+# 2. Create an ECS task definition, an ECS cluster, and an ECS service.
+#    For example, follow the Getting Started guide on the ECS console:
+#      https://us-east-2.console.aws.amazon.com/ecs/home?region=us-east-2#/firstRun
+#    Replace the values for `service` and `cluster` in the workflow below with your service and cluster names.
+#
+# 3. Store your ECS task definition as a JSON file in your repository.
+#    The format should follow the output of `aws ecs register-task-definition --generate-cli-skeleton`.
+#    Replace the value of `task-definition` in the workflow below with your JSON file's name.
+#    Replace the value of `container-name` in the workflow below with the name of the container
+#    in the `containerDefinitions` section of the task definition.
+#
+# 4. Store an IAM user access key in GitHub Actions secrets named `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`.
+#    See the documentation for each action used below for the recommended IAM policies for this IAM user,
+#    and best practices on handling the access key credentials.
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+name: Deploy to Amazon ECS
+
+jobs:
+  deploy:
+    name: deploy
+    runs-on: ubuntu-16.04
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: eu-west-1
+
+    - name: Download task definition
+      run: |
+        aws ecs describe-task-definition --task-definition ProdAppServerStackprodbudiapplbfargateserviceprodbudiappserverfargatetaskdefinition2EF7F1E7 --query taskDefinition > task-definition.json
+      
+    - name: Login to Amazon ECR
+      id: login-ecr
+      uses: aws-actions/amazon-ecr-login@v1
+
+    - name: Build, tag, and push image to Amazon ECR
+      id: build-image
+      env:
+        ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+        ECR_REPOSITORY: prod-budi-app-server
+        IMAGE_TAG: ${{ github.sha }}
+      run: |
+        # Build a docker container and
+        # push it to ECR so that it can
+        # be deployed to ECS
+        cd packages/server
+        docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+        docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
+        echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"
+    - name: Fill in the new image ID in the Amazon ECS task definition
+      id: task-def
+      uses: aws-actions/amazon-ecs-render-task-definition@v1
+      with:
+        task-definition: task-definition.json
+        container-name: prod-budi-app-server 
+        image: ${{ steps.build-image.outputs.image }}
+
+    - name: Deploy Amazon ECS task definition
+      uses: aws-actions/amazon-ecs-deploy-task-definition@v1
+      with:
+        task-definition: ${{ steps.task-def.outputs.task-definition }}
+        service: prod-budi-app-server-service
+        cluster: prod-budi-app-server
+        wait-for-service-stability: true
--- a/packages/builder/cypress/integration/createBinding.spec.js
+++ b/packages/builder/cypress/integration/createBinding.spec.js
@ -1,4 +1,4 @@
-context('Create a Binding', () => {
+xcontext('Create a Binding', () => {
    before(() => {
        cy.visit('localhost:4001/_builder')
        cy.createApp('Binding App', 'Binding App Description')
--- a/packages/builder/cypress/integration/createUser.spec.js
+++ b/packages/builder/cypress/integration/createUser.spec.js
@ -9,7 +9,7 @@ context('Create a User', () => {

    // https://on.cypress.io/interacting-with-elements
    it('should create a user', () => {
-        cy.createUser('bbuser', 'test', 'ADMIN')
+        cy.createUser('bbuser', 'test', 'POWER_USER')

        // Check to make sure user was created!
        cy.get("input[disabled]").should('have.value', 'bbuser')
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@ -54,7 +54,7 @@ context('Create a View', () => {
        expect($headers).to.have.length(7)
        const headers = $headers.map((i, header) => Cypress.$(header).text())
        expect(headers.get()).to.deep.eq([
-          "group",
+          "field",
          "sum",
          "min",
          "max",
@ -66,7 +66,7 @@ context('Create a View', () => {
      cy.get("tbody td").should(($values) => {
        const values = $values.map((i, value) => Cypress.$(value).text())
        expect(values.get()).to.deep.eq([
-          "null",
+          "age",
          "155",
          "20",
          "49",
--- a/packages/builder/cypress/integration/createWorkflow.spec.js
+++ b/packages/builder/cypress/integration/createWorkflow.spec.js
@ -1,4 +1,4 @@
-xcontext('Create a workflow', () => {
+context('Create a workflow', () => {

    before(() => {
        cy.server()
@ -9,7 +9,7 @@ xcontext('Create a workflow', () => {

    // https://on.cypress.io/interacting-with-elements
    it('should create a workflow', () => {
-        cy.createTable('dog', 'name', 'age')
+        cy.createTestTableWithData()

        cy.contains('workflow').click()
        cy.contains('Create New Workflow').click()
@ -23,21 +23,23 @@ xcontext('Create a workflow', () => {

        // Create action
        cy.get('[data-cy=SAVE_RECORD]').click()
-        cy.get(':nth-child(2) > .budibase__input').type('goodboy')
-        cy.get(':nth-child(3) > .budibase__input').type('11')
+        cy.get('.container input').first().type('goodboy')
+        cy.get('.container input').eq(1).type('11')

        // Save
        cy.contains('Save Workflow').click()

        // Activate Workflow
        cy.get('[data-cy=activate-workflow]').click()
-
+        cy.contains("Add Record").should("be.visible")
+        cy.get(".stop-button.highlighted").should("be.visible")
    })
-    xit('should add record when a new record is added', () => {
+
+    it('should add record when a new record is added', () => {
        cy.contains('backend').click()

-        cy.addRecord('bob', '15')
-
+        cy.addRecord(["Rover", 15])
+        cy.reload()
        cy.contains('goodboy').should('have.text', 'goodboy')

    })
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -57,12 +57,17 @@ Cypress.Commands.add("createApp", name => {
    })
 })

+Cypress.Commands.add("createTestTableWithData", () => {
+  cy.createTable("dog")
+  cy.addColumn("dog", "name", "Plain Text")
+  cy.addColumn("dog", "age", "Number")
+})
+
 Cypress.Commands.add("createTable", tableName => {
  // Enter model name
  cy.contains("Create New Table").click()
  cy.get("[placeholder='Table Name']").type(tableName)

-  // Add 'name' field
  cy.contains("Save").click()
  cy.contains(tableName).should("be.visible")
 })
@ -84,7 +89,7 @@ Cypress.Commands.add("addRecord", values => {
  cy.contains("Create New Row").click()

  for (let i = 0; i < values.length; i++) {
-    cy.get("input")
+    cy.get(".actions input")
      .eq(i)
      .type(values[i])
  }
@ -93,7 +98,7 @@ Cypress.Commands.add("addRecord", values => {
  cy.contains("Save").click()
 })

-Cypress.Commands.add("createUser", (username, password) => {
+Cypress.Commands.add("createUser", (username, password, accessLevel) => {
  // Create User
  cy.get(".toprightnav > .settings").click()
  cy.contains("Users").click()
@ -104,9 +109,12 @@ Cypress.Commands.add("createUser", (username, password) => {
  cy.get("[name=Password]")
    .first()
    .type(password)
+  cy.get("select")
+    .first()
+    .select(accessLevel)

  // Save
-  cy.get(".create-button").click()
+  cy.get(".create-button > button").click()
 })

 Cypress.Commands.add("addHeadlineComponent", text => {
--- a/packages/builder/cypress/support/cookies.js
+++ b/packages/builder/cypress/support/cookies.js
@ -1,3 +1,3 @@
 Cypress.Cookies.defaults({
-  whitelist: "builder:token",
+  preserve: "builder:token",
 })
--- a/packages/builder/cypress/videos/createApp.spec.js.mp4
+++ b/packages/builder/cypress/videos/createApp.spec.js.mp4
--- a/packages/builder/cypress/videos/createBinding.spec.js.mp4
+++ b/packages/builder/cypress/videos/createBinding.spec.js.mp4
--- a/packages/builder/cypress/videos/createComponents.spec.js.mp4
+++ b/packages/builder/cypress/videos/createComponents.spec.js.mp4
--- a/packages/builder/cypress/videos/createTable.spec.js.mp4
+++ b/packages/builder/cypress/videos/createTable.spec.js.mp4
--- a/packages/builder/cypress/videos/createUser.spec.js.mp4
+++ b/packages/builder/cypress/videos/createUser.spec.js.mp4
--- a/packages/builder/cypress/videos/createView.spec.js.mp4
+++ b/packages/builder/cypress/videos/createView.spec.js.mp4
--- a/packages/builder/cypress/videos/createWorkflow.spec.js.mp4
+++ b/packages/builder/cypress/videos/createWorkflow.spec.js.mp4
--- a/packages/builder/cypress/videos/screens.spec.js.mp4
+++ b/packages/builder/cypress/videos/screens.spec.js.mp4
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -57,7 +57,10 @@
  "eslintConfig": {
    "extends": [
      "plugin:cypress/recommended"
-    ]
+    ],
+    "rules": {
+      "cypress/no-unnecessary-waiting": "off"
+    }
  },
  "dependencies": {
    "@budibase/bbui": "^1.29.2",
@ -91,7 +94,7 @@
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/svelte": "^3.0.0",
    "babel-jest": "^24.8.0",
-    "cypress": "^4.8.0",
+    "cypress": "^5.1.0",
    "cypress-terminal-report": "^1.4.1",
    "eslint-plugin-cypress": "^2.11.1",
    "identity-obj-proxy": "^3.0.0",
@ -114,4 +117,4 @@
    "svelte-jester": "^1.0.6"
  },
  "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
+}
--- a/packages/builder/src/components/database/DataTable/Table.svelte
+++ b/packages/builder/src/components/database/DataTable/Table.svelte
@ -25,6 +25,7 @@
  let currentPage = 0

  $: columns = schema ? Object.keys(schema) : []
+
  $: paginatedData =
    data && data.length
      ? data.slice(
--- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
@ -32,7 +32,10 @@
  async function fetchViewData(name, field, groupBy) {
    const params = new URLSearchParams()

-    if (field) params.set("stats", true)
+    if (field) {
+      params.set("field", field)
+      params.set("stats", true)
+    }
    if (groupBy) params.set("group", groupBy)

    let QUERY_VIEW_URL = `/api/views/${name}?${params}`
--- a/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
@ -0,0 +1,25 @@
+<script>
+  import OptionSelect from "./OptionSelect.svelte"
+  import { backendUiStore } from "builderStore"
+  import { onMount } from "svelte"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let onChange = (val = {})
+
+  const models = $backendUiStore.models
+
+  let options = []
+
+  $: model = componentInstance.datasource
+    ? models.find(m => m._id === componentInstance.datasource.modelId)
+    : null
+
+  $: if (model) {
+    options = componentInstance.datasource.isModel
+      ? Object.keys(model.schema)
+      : Object.keys(model.views[componentInstance.datasource.name].schema)
+  }
+</script>
+
+<OptionSelect {value} {onChange} {options} />
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@ -0,0 +1,110 @@
+<script>
+  import { Button, Icon, DropdownMenu } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { backendUiStore } from "builderStore"
+
+  const dispatch = createEventDispatcher()
+  let anchor, dropdown
+
+  export let value = {}
+
+  function handleSelected(selected) {
+    dispatch("change", selected)
+    dropdown.hide()
+  }
+
+  const models = $backendUiStore.models.map(m => ({
+    label: m.name,
+    name: `all_${m._id}`,
+    modelId: m._id,
+    isModel: true,
+  }))
+
+  const views = $backendUiStore.models.reduce((acc, cur) => {
+    let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
+      label: key,
+      name: key,
+      ...value,
+    }))
+    return [...acc, ...viewsArr]
+  }, [])
+</script>
+
+<div bind:this={anchor}>
+  <Button secondary small on:click={dropdown.show}>
+    <span>{value.label ? value.label : 'Model / View'}</span>
+    <Icon name="arrowdown" />
+  </Button>
+</div>
+<DropdownMenu
+  bind:this={dropdown}
+  width="175px"
+  borderColor="#d1d1d1ff"
+  {anchor}
+  align="right">
+  <div class="model-view-container">
+    <p>Tables</p>
+
+    <ul>
+      {#each models as model}
+        <li
+          class:selected={value === model}
+          on:click={() => handleSelected(model)}>
+          {model.label}
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <p>Views</p>
+    <ul>
+      {#each views as view}
+        <li
+          class:selected={value === view}
+          on:click={() => handleSelected(view)}>
+          {view.label}
+        </li>
+      {/each}
+    </ul>
+  </div>
+</DropdownMenu>
+
+<style>
+  .model-view-container {
+    padding-bottom: 8px;
+    font: var(--smallheavybodytext);
+  }
+
+  p {
+    color: var(--grey-7);
+    margin: 0px;
+    padding: 8px;
+  }
+
+  span {
+    text-transform: capitalize;
+  }
+
+  hr {
+    margin: 10px 0px 5px 0px;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+  }
+
+  li {
+    cursor: pointer;
+    margin: 0px;
+    padding: 5px 8px;
+  }
+
+  .selected {
+    background-color: var(--grey-4);
+  }
+
+  li:hover {
+    background-color: var(--grey-4);
+  }
+</style>
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@ -2,6 +2,7 @@
  import { onMount, beforeUpdate, afterUpdate } from "svelte"
  import Portal from "svelte-portal"
  import { buildStyle } from "../../helpers.js"
+
  export let options = []
  export let value = ""
  export let styleBindingProperty
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@ -8,6 +8,7 @@
  import { onMount, getContext } from "svelte"

  export let label = ""
+  export let componentInstance = {}
  export let control = null
  export let key = ""
  export let value
@ -66,7 +67,11 @@
        innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
      }
    }
-    replaceBindings(innerVal)
+    if (typeof innerVal !== "object") {
+      replaceBindings(innerVal)
+    } else {
+      onChange(key, innerVal)
+    }
  }

  const safeValue = () => {
@ -101,6 +106,7 @@
  <div data-cy={`${key}-prop-control`} class="control">
    <svelte:component
      this={control}
+      {componentInstance}
      {...handlevalueKey(value)}
      on:change={val => handleChange(key, val)}
      onChange={val => handleChange(key, val)}
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@ -1,4 +1,5 @@
 <script>
+  import { isEmpty } from "lodash/fp"
  import PropertyControl from "./PropertyControl.svelte"
  import Input from "./PropertyPanelControls/Input.svelte"
  import { goto } from "@sveltech/routify"
@ -33,6 +34,15 @@
    { key: "favicon", label: "Favicon", control: Input },
  ]

+  const canRenderControl = (key, dependsOn) => {
+    let test = !isEmpty(componentInstance[dependsOn])
+
+    return (
+      propExistsOnComponentDef(key) &&
+      (!dependsOn || !isEmpty(componentInstance[dependsOn]))
+    )
+  }
+
  $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
  $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition

@ -101,12 +111,13 @@

 {#if panelDefinition && panelDefinition.length > 0}
  {#each panelDefinition as definition}
-    {#if propExistsOnComponentDef(definition.key)}
+    {#if canRenderControl(definition.key, definition.dependsOn)}
      <PropertyControl
        control={definition.control}
        label={definition.label}
        key={definition.key}
        value={componentInstance[definition.key]}
+        {componentInstance}
        {onChange}
        props={{ ...excludeProps(definition, ['control', 'label']) }} />
    {/if}
--- a/packages/builder/src/components/userInterface/pagesParsing/types.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/types.js
@ -21,6 +21,6 @@ export const TYPE_MAP = {
    },
  },
  models: {
-    default: [],
+    default: {},
  },
 }
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -2,6 +2,8 @@ import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"
+import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
+import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"

 import { all } from "./propertyCategories.js"
@ -260,7 +262,13 @@ export default {
          icon: "ri-file-list-line",
          properties: {
            design: { ...all },
-            settings: [{ label: "Table", key: "model", control: ModelSelect }],
+            settings: [
+              {
+                label: "Table",
+                key: "datasource",
+                control: ModelViewSelect,
+              },
+            ],
          },
          children: [],
        },
@ -488,7 +496,11 @@ export default {
          properties: {
            design: { ...all },
            settings: [
-              { label: "Model", key: "model", control: ModelSelect },
+              {
+                label: "Table",
+                key: "datasource",
+                control: ModelViewSelect,
+              },
              { label: "Stripe Color", key: "stripeColor", control: Input },
              { label: "Border Color", key: "borderColor", control: Input },
              { label: "TH Color", key: "backgroundColor", control: Input },
@ -570,8 +582,20 @@ export default {
                settings: [
                  {
                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
+                    key: "datasource",
+                    control: ModelViewSelect,
+                  },
+                  {
+                    label: "Name Field",
+                    key: "nameKey",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Value Field",
+                    key: "valueKey",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Animate Chart",
@ -608,16 +632,6 @@ export default {
                      "yellow",
                    ],
                  },
-                  {
-                    label: "Name Field",
-                    key: "nameKey",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Field",
-                    key: "valueKey",
-                    control: Input,
-                  },
                  {
                    label: "External Radius",
                    key: "externalRadius",
@ -662,18 +676,20 @@ export default {
                settings: [
                  {
                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
+                    key: "datasource",
+                    control: ModelViewSelect,
                  },
                  {
                    label: "Name Label",
                    key: "nameLabel",
-                    control: Input,
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Value Label",
                    key: "valueLabel",
-                    control: Input,
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Y Axis Label",
@ -774,8 +790,26 @@ export default {
                settings: [
                  {
                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
+                    key: "datasource",
+                    control: ModelViewSelect,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Group Label",
+                    key: "groupLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Color",
@ -815,16 +849,6 @@ export default {
                    control: OptionSelect,
                    options: ["vertical", "horizontal", "full"],
                  },
-                  {
-                    label: "Group Label",
-                    key: "groupLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    control: Input,
-                  },
                  {
                    label: "Value Label",
                    key: "valueLabel",
@ -869,8 +893,26 @@ export default {
                settings: [
                  {
                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
+                    key: "datasource",
+                    control: ModelViewSelect,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Topic Label",
+                    key: "topicLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Date Label",
+                    key: "dateLabel",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
                  },
                  {
                    label: "Colors",
@ -929,21 +971,6 @@ export default {
                    control: OptionSelect,
                    options: ["vertical", "horizontal", "full"],
                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Topic Label",
-                    key: "topicLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
                  {
                    label: "X Axis Label",
                    key: "xAxisLabel",
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
@ -3,6 +3,16 @@
  import { Input, Label } from "@budibase/bbui"

  export let value
+
+  function setParsedValue(evt, field) {
+    const fieldSchema = value.model.schema[field]
+    if (fieldSchema.type === "number") {
+      value[field] = parseInt(evt.target.value)
+      return
+    }
+
+    value[field] = evt.target.value
+  }
 </script>

 <div class="bb-margin-xl block-field">
@ -18,7 +28,11 @@
    <Label small forAttr={'fields'}>Fields</Label>
    {#each Object.keys(value.model.schema) as field}
      <div class="bb-margin-xl">
-        <Input bind:value={value[field]} label={field} />
+        <Input
+          thin
+          value={value[field]}
+          label={field}
+          on:change={e => setParsedValue(e, field)} />
      </div>
    {/each}
  </div>
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@ -44,7 +44,7 @@
    {:else if type === 'model'}
      <ModelSelector bind:value={workflowBlock.args[parameter]} />
    {:else if type === 'record'}
-      <RecordSelector bind:value={workflowBlock.args[parameter]} />
+      <RecordSelector value={workflowBlock.args[parameter]} />
    {:else if type === 'string'}
      <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
    {/if}
--- a/packages/builder/src/helpers.js
+++ b/packages/builder/src/helpers.js
@ -1,6 +1,5 @@
 import { last } from "lodash/fp"
 import { pipe } from "components/common/core"
-
 export const buildStyle = styles => {
  let str = ""
  for (let s in styles) {
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -691,7 +691,6 @@
 "@budibase/bbui@^1.29.1":
  version "1.29.1"
  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.1.tgz#edaa6c7ce43a71d94460f7a3669ade1d4523333e"
-  integrity sha512-t8zxP7IIHQ4CMT+CRZWUvMgD6NC01J/dwH+pBerR8lJPSygmCOmrDy3ySfSmqcIhzjCbPIVtk32UKnXFqHtzRQ==
  dependencies:
    sirv-cli "^0.4.6"

@ -706,7 +705,7 @@
    exec-sh "^0.3.2"
    minimist "^1.2.0"

-"@cypress/listr-verbose-renderer@0.4.1":
+"@cypress/listr-verbose-renderer@^0.4.1":
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a"
  dependencies:
@ -715,7 +714,7 @@
    date-fns "^1.27.2"
    figures "^1.7.0"

-"@cypress/request@2.88.5":
+"@cypress/request@^2.88.5":
  version "2.88.5"
  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.5.tgz#8d7ecd17b53a849cfd5ab06d5abe7d84976375d7"
  dependencies:
@ -740,7 +739,7 @@
    tunnel-agent "^0.6.0"
    uuid "^3.3.2"

-"@cypress/xvfb@1.2.4":
+"@cypress/xvfb@^1.2.4":
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
  dependencies:
@ -1187,11 +1186,11 @@
  dependencies:
    "@types/node" "*"

-"@types/sinonjs__fake-timers@6.0.1":
+"@types/sinonjs__fake-timers@^6.0.1":
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.1.tgz#681df970358c82836b42f989188d133e218c458e"

-"@types/sizzle@2.3.2":
+"@types/sizzle@^2.3.2":
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"

@ -1329,9 +1328,9 @@ anymatch@~3.1.1:
    normalize-path "^3.0.0"
    picomatch "^2.0.4"

-arch@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"
+arch@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.2.tgz#0c52bbe7344bb4fa260c443d2cbad9c00ff2f0bf"

 argparse@^1.0.7:
  version "1.0.10"
@ -1400,7 +1399,7 @@ async-limiter@~1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"

-async@^3.1.0:
+async@^3.2.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"

@ -1506,7 +1505,11 @@ bl@~0.8.1:
  dependencies:
    readable-stream "~1.0.26"

-bluebird@3.7.2:
+blob-util@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
+
+bluebird@3.7.2, bluebird@^3.7.2:
  version "3.7.2"
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"

@ -1679,7 +1682,7 @@ cache-base@^1.0.1:
    union-value "^1.0.0"
    unset-value "^1.0.0"

-cachedir@2.3.0:
+cachedir@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"

@ -1709,14 +1712,6 @@ caseless@~0.12.0:
  version "0.12.0"
  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"

-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@^1.0.0, chalk@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@ -1727,6 +1722,14 @@ chalk@^1.0.0, chalk@^1.1.3:
    strip-ansi "^3.0.0"
    supports-color "^2.0.0"

+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chalk@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
@ -1734,11 +1737,18 @@ chalk@^3.0.0:
    ansi-styles "^4.1.0"
    supports-color "^7.1.0"

+chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 cheap-watch@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/cheap-watch/-/cheap-watch-1.0.2.tgz#bfa648aea6bcd15e9fe4dce4ac760ab81cd0133c"

-check-more-types@2.24.0:
+check-more-types@2.24.0, check-more-types@^2.24.0:
  version "2.24.0"
  resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"

@ -1792,12 +1802,12 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0:
  dependencies:
    restore-cursor "^2.0.0"

-cli-table3@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.5.1.tgz#0252372d94dfc40dbd8df06005f48f31f656f202"
+cli-table3@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.0.tgz#b7b1bc65ca8e7b5cef9124e13dc2b21e2ce4faee"
  dependencies:
    object-assign "^4.1.0"
-    string-width "^2.1.1"
+    string-width "^4.2.0"
  optionalDependencies:
    colors "^1.1.2"

@ -1873,15 +1883,15 @@ commander@2, commander@^2.19.0:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"

-commander@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
+commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"

 commander@^5.0.0:
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"

-common-tags@1.8.0:
+common-tags@^1.8.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"

@ -2047,47 +2057,48 @@ cypress-terminal-report@^1.4.1:
    chalk "^3.0.0"
    methods "^1.1.2"

-cypress@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.8.0.tgz#8fe731db77f39310511d83e81439d06ae3388554"
+cypress@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.1.0.tgz#979e9ff3e0acd792eefd365bf104046479a9643b"
  dependencies:
-    "@cypress/listr-verbose-renderer" "0.4.1"
-    "@cypress/request" "2.88.5"
-    "@cypress/xvfb" "1.2.4"
-    "@types/sinonjs__fake-timers" "6.0.1"
-    "@types/sizzle" "2.3.2"
-    arch "2.1.1"
-    bluebird "3.7.2"
-    cachedir "2.3.0"
-    chalk "2.4.2"
-    check-more-types "2.24.0"
-    cli-table3 "0.5.1"
-    commander "4.1.0"
-    common-tags "1.8.0"
-    debug "4.1.1"
-    eventemitter2 "4.1.2"
-    execa "1.0.0"
-    executable "4.1.1"
-    extract-zip "1.7.0"
-    fs-extra "8.1.0"
-    getos "3.1.4"
-    is-ci "2.0.0"
-    is-installed-globally "0.1.0"
-    lazy-ass "1.6.0"
-    listr "0.14.3"
-    lodash "4.17.15"
-    log-symbols "3.0.0"
-    minimist "1.2.5"
-    moment "2.24.0"
-    ospath "1.2.2"
-    pretty-bytes "5.3.0"
-    ramda "0.26.1"
-    request-progress "3.0.0"
-    supports-color "7.1.0"
-    tmp "0.1.0"
-    untildify "4.0.0"
-    url "0.11.0"
-    yauzl "2.10.0"
+    "@cypress/listr-verbose-renderer" "^0.4.1"
+    "@cypress/request" "^2.88.5"
+    "@cypress/xvfb" "^1.2.4"
+    "@types/sinonjs__fake-timers" "^6.0.1"
+    "@types/sizzle" "^2.3.2"
+    arch "^2.1.2"
+    blob-util "2.0.2"
+    bluebird "^3.7.2"
+    cachedir "^2.3.0"
+    chalk "^4.1.0"
+    check-more-types "^2.24.0"
+    cli-table3 "~0.6.0"
+    commander "^4.1.1"
+    common-tags "^1.8.0"
+    debug "^4.1.1"
+    eventemitter2 "^6.4.2"
+    execa "^4.0.2"
+    executable "^4.1.1"
+    extract-zip "^1.7.0"
+    fs-extra "^9.0.1"
+    getos "^3.2.1"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.3.2"
+    lazy-ass "^1.6.0"
+    listr "^0.14.3"
+    lodash "^4.17.19"
+    log-symbols "^4.0.0"
+    minimist "^1.2.5"
+    moment "^2.27.0"
+    ospath "^1.2.2"
+    pretty-bytes "^5.3.0"
+    ramda "~0.26.1"
+    request-progress "^3.0.0"
+    supports-color "^7.1.0"
+    tmp "~0.2.1"
+    untildify "^4.0.0"
+    url "^0.11.0"
+    yauzl "^2.10.0"

 d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
  version "1.2.4"
@ -2492,6 +2503,10 @@ emoji-regex@^7.0.1:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"

+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+
 end-of-stream@^1.1.0:
  version "1.4.4"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@ -2591,9 +2606,9 @@ event-stream@=3.3.4:
    stream-combiner "~0.0.4"
    through "~2.3.1"

-eventemitter2@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-4.1.2.tgz#0e1a8477af821a6ef3995b311bf74c23a5247f15"
+eventemitter2@^6.4.2:
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.3.tgz#35c563619b13f3681e7eb05cbdaf50f56ba58820"

 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
  version "1.0.3"
@ -2606,18 +2621,6 @@ exec-sh@^0.3.2:
  version "0.3.4"
  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"

-execa@1.0.0, execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@3.4.0:
  version "3.4.0"
  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
@ -2633,7 +2636,33 @@ execa@3.4.0:
    signal-exit "^3.0.2"
    strip-final-newline "^2.0.0"

-executable@4.1.1:
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+execa@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+executable@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
  dependencies:
@ -2700,7 +2729,7 @@ extglob@^2.0.4:
    snapdragon "^0.8.1"
    to-regex "^3.0.1"

-extract-zip@1.7.0:
+extract-zip@^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
  dependencies:
@ -2828,7 +2857,6 @@ for-in@^1.0.2:
 foreach@~2.0.1:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
-  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=

 forever-agent@~0.6.1:
  version "0.6.1"
@ -2852,7 +2880,7 @@ from@~0:
  version "0.1.7"
  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"

-fs-extra@8.1.0, fs-extra@^8.1.0:
+fs-extra@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
  dependencies:
@ -2869,6 +2897,15 @@ fs-extra@^9.0.0:
    jsonfile "^6.0.1"
    universalify "^1.0.0"

+fs-extra@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^1.0.0"
+
 fs.realpath@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@ -2922,11 +2959,11 @@ get-value@^2.0.3, get-value@^2.0.6:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"

-getos@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.4.tgz#29cdf240ed10a70c049add7b6f8cb08c81876faf"
+getos@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
  dependencies:
-    async "^3.1.0"
+    async "^3.2.0"

 getpass@^0.1.1:
  version "0.1.7"
@ -2951,11 +2988,11 @@ glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
    once "^1.3.0"
    path-is-absolute "^1.0.0"

-global-dirs@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
+global-dirs@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.0.1.tgz#acdf3bb6685bcd55cb35e8a052266569e9469201"
  dependencies:
-    ini "^1.3.4"
+    ini "^1.3.5"

 globals@^11.1.0, globals@^11.12.0:
  version "11.12.0"
@ -3164,7 +3201,7 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1,
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"

-ini@^1.3.4:
+ini@^1.3.5:
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"

@ -3208,7 +3245,7 @@ is-callable@^1.1.4, is-callable@^1.1.5:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"

-is-ci@2.0.0, is-ci@^2.0.0:
+is-ci@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
  dependencies:
@ -3270,6 +3307,10 @@ is-fullwidth-code-point@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"

+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+
 is-generator-fn@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@ -3280,12 +3321,12 @@ is-glob@^4.0.1, is-glob@~4.0.1:
  dependencies:
    is-extglob "^2.1.1"

-is-installed-globally@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
+is-installed-globally@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
  dependencies:
-    global-dirs "^0.1.0"
-    is-path-inside "^1.0.0"
+    global-dirs "^2.0.1"
+    is-path-inside "^3.0.1"

 is-module@^1.0.0:
  version "1.0.0"
@ -3311,11 +3352,9 @@ is-observable@^1.1.0:
  dependencies:
    symbol-observable "^1.1.0"

-is-path-inside@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
-  dependencies:
-    path-is-inside "^1.0.1"
+is-path-inside@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"

 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
  version "2.0.4"
@ -3955,7 +3994,7 @@ kleur@^3.0.0, kleur@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"

-lazy-ass@1.6.0:
+lazy-ass@1.6.0, lazy-ass@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"

@ -4086,7 +4125,7 @@ listr-verbose-renderer@^0.5.0:
    date-fns "^1.27.2"
    figures "^2.0.0"

-listr@0.14.3:
+listr@^0.14.3:
  version "0.14.3"
  resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
  dependencies:
@ -4156,15 +4195,13 @@ lodash.sortby@^4.7.0:
  version "4.7.0"
  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"

-lodash@4.17.15, lodash@^4.17.13, lodash@^4.17.15:
+lodash@^4.17.13, lodash@^4.17.15:
  version "4.17.15"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"

-log-symbols@3.0.0, log-symbols@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
-  dependencies:
-    chalk "^2.4.2"
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"

 log-symbols@^1.0.2:
  version "1.0.2"
@ -4172,6 +4209,18 @@ log-symbols@^1.0.2:
  dependencies:
    chalk "^1.0.0"

+log-symbols@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
+  dependencies:
+    chalk "^2.4.2"
+
+log-symbols@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  dependencies:
+    chalk "^4.0.0"
+
 log-update@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
@ -4325,7 +4374,7 @@ minimatch@^3.0.4:
  dependencies:
    brace-expansion "^1.1.7"

-minimist@1.2.5, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
  version "1.2.5"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"

@ -4342,13 +4391,13 @@ mkdirp@^0.5.1, mkdirp@^0.5.4:
  dependencies:
    minimist "^1.2.5"

-moment@2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+moment@^2.27.0:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"

 mri@^1.1.0:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.5.tgz#ce21dba2c69f74a9b7cf8a1ec62307e089e223e0"
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"

 ms@2.0.0:
  version "2.0.0"
@ -4572,7 +4621,7 @@ optionator@^0.8.1:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/opts/-/opts-1.2.7.tgz#4de4721d592c96901dae623a438c988e9ea7779f"

-ospath@1.2.2:
+ospath@^1.2.2:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"

@ -4683,10 +4732,6 @@ path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"

-path-is-inside@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-
 path-key@^2.0.0, path-key@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
@ -4783,9 +4828,9 @@ prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"

-pretty-bytes@5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
+pretty-bytes@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"

 pretty-format@^24.9.0:
  version "24.9.0"
@ -4880,7 +4925,7 @@ querystring@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"

-ramda@0.26.1:
+ramda@~0.26.1:
  version "0.26.1"
  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"

@ -5034,7 +5079,7 @@ repeat-string@^1.6.1:
  version "1.6.1"
  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"

-request-progress@3.0.0:
+request-progress@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
  dependencies:
@ -5147,7 +5192,7 @@ rimraf@^2.5.4, rimraf@^2.6.3:
  dependencies:
    glob "^7.1.3"

-rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
  dependencies:
@ -5394,7 +5439,6 @@ shellwords@^0.1.1:
 shortid@^2.2.15:
  version "2.2.15"
  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
  dependencies:
    nanoid "^2.1.0"

@ -5616,6 +5660,14 @@ string-width@^3.0.0, string-width@^3.1.0:
    is-fullwidth-code-point "^2.0.0"
    strip-ansi "^5.1.0"

+string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
 string.prototype.trimend@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
@ -5680,6 +5732,12 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
  dependencies:
    ansi-regex "^4.1.0"

+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-bom@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@ -5698,12 +5756,6 @@ strip-indent@^3.0.0:
  dependencies:
    min-indent "^1.0.0"

-supports-color@7.1.0, supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@ -5720,6 +5772,12 @@ supports-color@^6.1.0:
  dependencies:
    has-flag "^3.0.0"

+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  dependencies:
+    has-flag "^4.0.0"
+
 svelte-jester@^1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/svelte-jester/-/svelte-jester-1.0.6.tgz#a95da31acdcdd339468745c05c63fd0b52acff93"
@ -5780,14 +5838,14 @@ through@2, through@~2.3, through@~2.3.1:
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"

 tinydate@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.2.0.tgz#36b4bb02715f89743f3ef9073d3573d005a28d0e"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"

-tmp@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
+tmp@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
  dependencies:
-    rimraf "^2.6.3"
+    rimraf "^3.0.0"

 tmpl@1.0.x:
  version "1.0.4"
@ -5931,7 +5989,7 @@ unset-value@^1.0.0:
    has-value "^0.3.1"
    isobject "^3.0.0"

-untildify@4.0.0:
+untildify@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"

@ -5945,7 +6003,7 @@ urix@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"

-url@0.11.0:
+url@^0.11.0:
  version "0.11.0"
  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
  dependencies:
@ -6195,7 +6253,7 @@ yargs@^13.3.0:
    y18n "^4.0.0"
    yargs-parser "^13.1.2"

-yauzl@2.10.0, yauzl@^2.10.0:
+yauzl@^2.10.0:
  version "2.10.0"
  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
  dependencies:
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@ -80,7 +80,7 @@ exports.save = async function(ctx) {

 exports.fetchView = async function(ctx) {
  const db = new CouchDB(ctx.user.instanceId)
-  const { stats, group } = ctx.query
+  const { stats, group, field } = ctx.query
  const response = await db.query(`database/${ctx.params.viewName}`, {
    include_docs: !stats,
    group,
@ -89,6 +89,7 @@ exports.fetchView = async function(ctx) {
  if (stats) {
    response.rows = response.rows.map(row => ({
      group: row.key,
+      field,
      ...row.value,
      avg: row.value.sum / row.value.count,
    }))
--- a/packages/server/src/api/controllers/view/tests/snapshots/viewBuilder.spec.js.snap
+++ b/packages/server/src/api/controllers/view/tests/snapshots/viewBuilder.spec.js.snap
@ -20,7 +20,7 @@ Object {
      "count": Object {
        "type": "number",
      },
-      "group": Object {
+      "field": Object {
        "type": "string",
      },
      "max": Object {
@ -66,7 +66,7 @@ Object {
    ],
    "groupBy": undefined,
    "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
-    "schema": undefined,
+    "schema": null,
  },
 }
 `;
@ -84,7 +84,7 @@ Object {
    "filters": Array [],
    "groupBy": "age",
    "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
-    "schema": undefined,
+    "schema": null,
  },
  "reduce": "_stats",
 }
--- a/packages/server/src/api/controllers/view/viewBuilder.js
+++ b/packages/server/src/api/controllers/view/viewBuilder.js
@ -9,11 +9,20 @@ const TOKEN_MAP = {
  OR: "||",
 }

+const GROUP_PROPERTY = {
+  group: {
+    type: "string",
+  },
+}
+
+const FIELD_PROPERTY = {
+  field: {
+    type: "string",
+  },
+}
+
 const SCHEMA_MAP = {
  stats: {
-    group: {
-      type: "string",
-    },
    sum: {
      type: "number",
    },
@ -91,13 +100,21 @@ function viewTemplate({ field, modelId, groupBy, filters = [], calculation }) {

  const reduction = field ? { reduce: "_stats" } : {}

+  let schema = null
+
+  if (calculation) {
+    schema = groupBy
+      ? { ...GROUP_PROPERTY, ...SCHEMA_MAP[calculation] }
+      : { ...FIELD_PROPERTY, ...SCHEMA_MAP[calculation] }
+  }
+
  return {
    meta: {
      field,
      modelId,
      groupBy,
      filters,
-      schema: SCHEMA_MAP[calculation],
+      schema,
      calculation,
    },
    map: `function (doc) {
--- a/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
+++ b/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
@ -14,9 +14,8 @@ module.exports = async function saveRecord({ args, context }) {
    user: { instanceId: context.instanceId },
  }

-  await recordController.save(ctx)
-
  try {
+    await recordController.save(ctx)
    return {
      record: ctx.body,
    }
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@ -172,6 +172,20 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

+"@budibase/client@^0.1.19":
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    bcryptjs "^2.4.3"
+    deep-equal "^2.0.1"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
 "@cnakazawa/watch@^1.0.3":
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@ -354,6 +368,10 @@
    path-to-regexp "1.x"
    urijs "^1.19.2"

+"@nx-js/compiler-util@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
+
 "@sendgrid/client@^7.1.1":
  version "7.1.1"
  resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f"
@ -811,6 +829,10 @@ array-equal@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"

+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+
 array-unique@^0.3.2:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@ -869,6 +891,12 @@ atomic-sleep@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"

+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sdk@^2.706.0:
  version "2.706.0"
  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
@ -980,8 +1008,8 @@ bindings@^1.5.0:
    file-uri-to-path "1.0.0"

 bl@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.3.tgz#12d6287adc29080e22a705e5764b2a9522cdc489"
  dependencies:
    buffer "^5.5.0"
    inherits "^2.0.4"
@ -1537,6 +1565,25 @@ decompress-response@^3.3.0:
  dependencies:
    mimic-response "^1.0.0"

+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@ -1863,6 +1910,51 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
    string.prototype.trimleft "^2.1.1"
    string.prototype.trimright "^2.1.1"

+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@ -2753,16 +2845,28 @@ is-accessor-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+
 is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"

+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+
 is-binary-path@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
  dependencies:
    binary-extensions "^2.0.0"

+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+
 is-buffer@^1.1.5:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@ -2771,6 +2875,10 @@ is-callable@^1.1.4, is-callable@^1.1.5:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"

+is-callable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+
 is-ci@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@ -2793,7 +2901,7 @@ is-data-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"

@ -2856,10 +2964,22 @@ is-installed-globally@^0.3.1:
    global-dirs "^2.0.1"
    is-path-inside "^3.0.1"

+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+
 is-npm@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"

+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+
 is-number@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@ -2890,10 +3010,24 @@ is-regex@^1.0.5:
  dependencies:
    has "^1.0.3"

+is-regex@^1.1.0, is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+
 is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"

+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+
 is-symbol@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@ -2908,10 +3042,27 @@ is-type-of@^1.0.0:
    is-class-hotfix "~0.0.6"
    isstream "~0.1.2"

+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"

+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -2932,6 +3083,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"

+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+
 isbinaryfile@^4.0.6:
  version "4.0.6"
  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@ -3871,6 +4026,10 @@ ltgt@~2.1.3:
  version "2.1.3"
  resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.1.3.tgz#10851a06d9964b971178441c23c9e52698eece34"

+lunr@^2.3.5:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
+
 make-dir@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@ -4035,6 +4194,10 @@ nan@^2.12.1:
  version "2.14.0"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"

+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+
 nanomatch@^1.2.9:
  version "1.2.13"
  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@ -4182,6 +4345,17 @@ object-inspect@^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"

+object-inspect@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+
+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@ -4828,6 +5002,17 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+
 regexpp@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@ -4996,10 +5181,14 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
  version "5.1.2"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"

-safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.2:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"

+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
 safe-regex@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@ -5119,6 +5308,19 @@ shellwords@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"

+shortid@^2.2.8:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  dependencies:
+    nanoid "^2.1.0"
+
+side-channel@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@ -5335,7 +5537,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.0"

-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
  dependencies:
@ -5358,7 +5560,7 @@ string.prototype.trimright@^2.1.1:
    es-abstract "^1.17.5"
    string.prototype.trimend "^1.0.0"

-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
  dependencies:
@ -5476,6 +5678,10 @@ supports-color@^7.1.0:
  dependencies:
    has-flag "^4.0.0"

+svelte@^3.9.2:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+
 symbol-tree@^3.2.2:
  version "3.2.4"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@ -5908,10 +6114,40 @@ whatwg-url@^7.0.0:
    tr46 "^1.0.1"
    webidl-conversions "^4.0.2"

+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"

+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
--- a/packages/standard-components/.gitignore
+++ b/packages/standard-components/.gitignore
@ -2,5 +2,4 @@
 node_modules
 yarn.lock
 package-lock.json
-dist/index.js
-dist/index.js.map
+dist/
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -210,7 +210,7 @@
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
-			"model": "models",
+			"datasource": "models",
 			"stripeColor": "string",
 			"borderColor": "string",
 			"backgroundColor": "string",
@ -256,7 +256,7 @@
 		"children": true,
 		"data": true,
 		"props": {
-			"model": "models"
+			"datasource": "models"
 		}
 	},
 	"stackedlist": {
@ -366,7 +366,8 @@
 		"description": "Donut Chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "string",
+			"data": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",
@ -406,7 +407,7 @@
 		"description": "Stacked Bar Chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "models",
 			"color": "string",
 			"height": "number",
 			"width": "number",
@ -507,7 +508,9 @@
 		"description": "Bar Chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "models",
+			"nameLabel": "string",
+			"valueLabel": "string",
 			"betweenBarsPadding": "number",
 			"gradient": "string",
 			"color": "string",
@ -518,9 +521,6 @@
 			"isHorizontal": "bool",
 			"labelNumberFormat": "number",
 			"locale": "string",
-			"nameLabel": "string",
-			"valueLabel": "string",
-			"numberLabel": "string",
 			"xAxisLabel": "string",
 			"yAxisLabel": "string",
 			"useLegend": "bool",
@ -532,7 +532,7 @@
 		"description": "Line Chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "models",
 			"width": "number",
 			"height": "number",
 			"axisTimeCombinations": "string",
@ -590,7 +590,9 @@
 		"description": "Groupedbar chart",
 		"data": true,
 		"props": {
-			"model": "string",
+			"datasource": "models",
+			"nameLabel": "string",
+			"valueLabel": "string",
 			"color": "string",
 			"height": "string",
 			"width": "string",
@ -599,8 +601,6 @@
 			"groupLabel": "string",
 			"isAnimated": "bool",
 			"isHorizontal": "bool",
-			"nameLabel": "string",
-			"valueLabel": "string",
 			"yTicks": "string",
 			"useLegend": "bool",
 			"tooltipTitle": "string"
--- a/packages/standard-components/dist/index.js.map
+++ b/packages/standard-components/dist/index.js.map
--- a/packages/standard-components/rollup.config.js
+++ b/packages/standard-components/rollup.config.js
@ -3,6 +3,8 @@ import resolve from "rollup-plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
 import postcss from "rollup-plugin-postcss"

+const lodash_fp_exports = ["isEmpty"]
+
 export default {
  input: "src/index.js",
  output: [
@ -23,6 +25,10 @@ export default {
    resolve({
      browser: true,
    }),
-    commonjs(),
+    commonjs({
+      namedExports: {
+        "lodash/fp": lodash_fp_exports,
+      },
+    }),
  ],
 }
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@ -6,7 +6,9 @@
    hasProp,
  } from "./utils.js"
  import britecharts from "britecharts"
+  import fetchData from "../fetchData.js"
  import { onMount } from "svelte"
+  import { isEmpty } from "lodash/fp"

  import { select } from "d3-selection"
  import shortid from "shortid"
@ -27,6 +29,7 @@
  export let customClick = null

  let data = []
+  export let datasource = null
  export let xAxisLabel = ""
  export let yAxisLabel = ""
  export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
@ -53,17 +56,10 @@
  export let yTicks = null
  export let percentageAxisToMaxRatio = null

-  export let useLegend = true
-
-  export let _bb
-  export let model
-
-  let store = _bb.store
-
  onMount(async () => {
-    if (model) {
-      await fetchData()
-      data = $store[model]
+    if (!isEmpty(datasource)) {
+      data = await fetchData(datasource)
+
      if (schemaIsValid()) {
        chartContainer = select(`.${chartClass}`)
        bindChartUIProps()
@ -80,20 +76,6 @@
    (hasProp(data, "name") || hasProp(data, nameLabel)) &&
    (hasProp(data, "value") || hasProp(data, valueLabel))

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  function bindChartUIProps() {
    chart.numberFormat(".0f")
    chart.labelsNumberFormat(".1f")
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@ -1,8 +1,10 @@
 <script>
  import { getColorSchema, notNull } from "./utils.js"
+  import fetchData from "../fetchData.js"
  import Legend from "./Legend.svelte"
  import britecharts from "britecharts"
  import { onMount } from "svelte"
+  import { isEmpty } from "lodash/fp"

  import { select } from "d3-selection"
  import shortid from "shortid"
@ -21,7 +23,6 @@
  let chartSvg = null

  export let _bb
-  export let model

  let store = _bb.store

@ -31,6 +32,8 @@
  export let orderingFunction = null

  let data = []
+  export let datasource = {}
+
  export let color = "britecharts"
  export let height = 200
  export let width = 200
@ -54,25 +57,11 @@
  export let legendWidth = null
  export let legendHeight = null

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  onMount(async () => {
    if (chart) {
-      if (model) {
-        await fetchData()
-        data = checkAndReformatData($store[model])
+      if (!isEmpty(datasource)) {
+        let _data = await fetchData(datasource)
+        data = checkAndReformatData(_data)
        if (data.length === 0) {
          console.error(
            "Donut - please provide a valid name and value field for the chart"
@ -95,11 +84,11 @@
  function checkAndReformatData(data) {
    let _data = [...data]

-    if (valueKey) {
+    if (valueKey && valueKey !== "quantity") {
      _data = reformatDataKey(_data, valueKey, "quantity")
    }

-    if (nameKey) {
+    if (nameKey && nameKey !== "name") {
      _data = reformatDataKey(_data, nameKey, "name")
    }

--- a/packages/standard-components/src/Chart/GroupedBar.svelte
+++ b/packages/standard-components/src/Chart/GroupedBar.svelte
@ -1,18 +1,15 @@
 <script>
  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
  import Tooltip from "./Tooltip.svelte"
+  import fetchData from "../fetchData.js"
  import britecharts from "britecharts"
  import { onMount } from "svelte"
  import { select } from "d3-selection"
  import shortid from "shortid"
+  import { isEmpty } from "lodash/fp"

  const _id = shortid.generate()

-  export let _bb
-  export let model
-
-  let store = _bb.store
-
  const chart = britecharts.groupedBar()
  const chartClass = `groupedbar-container-${_id}`
  const legendClass = `legend-container-${_id}`
@ -25,6 +22,7 @@
  export let customClick = null

  let data = []
+  export let datasource = {}
  export let color = "britecharts"
  export let height = 200
  export let width = 200
@ -50,9 +48,8 @@
    (hasProp(data, "value") || hasProp(data, valueLabel))

  onMount(async () => {
-    if (model) {
-      await fetchData()
-      data = $store[model]
+    if (!isEmpty(datasource)) {
+      data = await fetchData(datasource)
      if (schemaIsValid()) {
        chartContainer = select(`.${chartClass}`)
        bindChartUIProps()
@ -67,20 +64,6 @@
    }
  })

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  function bindTooltip() {
    tooltipContainer = select(`.${chartClass} .metadata-group`)
    tooltip.topicLabel("values")
@ -140,7 +123,11 @@
    if (notNull(yTickTextOffset)) {
      chart.yTickTextOffset(yTickTextOffset)
    }
-    tooltip.title(tooltipTitle || "Groupedbar Title")
+    if (notNull(tooltipTitle)) {
+      tooltip.title(tooltipTitle)
+    } else if (datasource.label) {
+      tooltip.title(datasource.label)
+    }
  }

  function bindChartEvents() {
--- a/packages/standard-components/src/Chart/Line.svelte
+++ b/packages/standard-components/src/Chart/Line.svelte
@ -1,17 +1,16 @@
 <script>
  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
+  import fetchData from "../fetchData.js"
  import britecharts from "britecharts"
  import { onMount } from "svelte"
+  import { isEmpty } from "lodash/fp"

  import { select } from "d3-selection"
  import shortid from "shortid"

  const _id = shortid.generate()

-  export let _bb
-  export let model
-
-  let store = _bb.store
+  export let datasource = {}

  const chart = britecharts.line()
  const chartClass = `line-container-${_id}`
@ -65,13 +64,23 @@
  export let tooltipTitle = ""

  onMount(async () => {
-    if (model) {
+    if (!isEmpty(datasource)) {
      data = await getAndPrepareData()
+
      if (data.dataByTopic.length > 0) {
        chartContainer = select(`.${chartClass}`)
        bindChartUIProps()
        bindChartEvents()
        chartContainer.datum(data).call(chart)
+
+        // X Axis Label gets cut off unless we do this 👇
+        const chartSvg = document.querySelector(`.${chartClass} .britechart`)
+        if (chartSvg) {
+          let height = chartSvg.getAttribute("height")
+          height = parseInt(height) + 35
+          chartSvg.setAttribute("height", height)
+        }
+
        bindTooltip()
      } else {
        console.error(
@ -89,20 +98,6 @@
    tooltipContainer.datum([]).call(tooltip)
  }

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  const schemaIsValid = data =>
    hasProp(data, valueLabel) &&
    hasProp(data, dateLabel) &&
@ -124,8 +119,7 @@
      dateLabel = "date"
    }

-    await fetchData()
-    _data = $store[model]
+    _data = await fetchData(datasource)

    if (schemaIsValid(_data)) {
      _data.forEach((data, idx, arr) => {
@ -220,8 +214,11 @@
    if (notNull(lines)) {
      chart.lines(lines)
    }
-
-    tooltip.title(tooltipTitle || "Line Tooltip")
+    if (notNull(tooltipTitle)) {
+      tooltip.title(tooltipTitle)
+    } else if (datasource.label) {
+      tooltip.title(datasource.label)
+    }
  }

  function bindChartEvents() {
@ -246,4 +243,4 @@
  $: chartGradient = getChartGradient(lineGradient)
 </script>

-<div bind:this={chartElement} class={chartClass} />
+<div bind this:👇={chartElement} class={chartClass} />
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@ -4,17 +4,17 @@
  import ArrowUp from "./icons/ArrowUp.svelte"
  import ArrowDown from "./icons/ArrowDown.svelte"
  import fsort from "fast-sort"
+  import fetchData from "./fetchData.js"
+  import { isEmpty } from "lodash/fp"

-  export let _bb
-  export let onLoad
-  export let model
  export let backgroundColor
  export let color
  export let stripeColor
  export let borderColor
+  export let datasource = {}

+  let data = []
  let headers = []
-  let store = _bb.store
  let sort = {}
  let sorted = []

@ -25,9 +25,16 @@
    borderColor,
  }

-  $: data = $store[model] || []
  $: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data
-  $: if (model) fetchData()
+
+  onMount(async () => {
+    if (!isEmpty(datasource)) {
+      data = await fetchData(datasource)
+      if (data) {
+        headers = Object.keys(data[0]).filter(shouldDisplayField)
+      }
+    }
+  })

  const shouldDisplayField = name => {
    if (name.startsWith("_")) return false
@ -39,24 +46,6 @@
    return true
  }

-  async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-
-      store.update(state => {
-        state[model] = json
-        return state
-      })
-
-      headers = Object.keys(json[0]).filter(shouldDisplayField)
-    } else {
-      throw new Error("Failed to fetch records.", response)
-    }
-  }
-
  function sortColumn(column) {
    if (column === sort.column) {
      sort = {
@ -71,10 +60,6 @@
      direction: "asc",
    }
  }
-
-  onMount(async () => {
-    await fetchData()
-  })
 </script>

 <table use:cssVars={cssVariables}>
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@ -1,34 +1,21 @@
 <script>
  import { onMount } from "svelte"
+  import fetchData from "./fetchData.js"
+  import { isEmpty } from "lodash/fp"

  export let _bb
-  export let model
+  export let datasource = []

-  let headers = []
-  let store = _bb.store
  let target

-  async function fetchData() {
-    if (!model || !model.length) return
-
-    const FETCH_RECORDS_URL = `/api/views/all_${model}`
-    const response = await _bb.api.get(FETCH_RECORDS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-
+  onMount(async () => {
+    if (!isEmpty(datasource)) {
+      const data = await fetchData(datasource)
      _bb.attachChildren(target, {
        hydrate: false,
-        context: json,
+        context: data,
      })
-    } else {
-      throw new Error("Failed to fetch records.", response)
    }
-  }
-
-  $: if (model) fetchData()
-
-  onMount(async () => {
-    await fetchData()
  })
 </script>

--- a/packages/standard-components/src/api.js
+++ b/packages/standard-components/src/api.js
@ -0,0 +1,26 @@
+const apiCall = method => async (url, body) => {
+  const headers = {
+    "Content-Type": "application/json",
+  }
+  const response = await fetch(url, {
+    method: method,
+    body: body && JSON.stringify(body),
+    headers,
+  })
+
+  return response
+}
+
+export const post = apiCall("POST")
+export const get = apiCall("GET")
+export const patch = apiCall("PATCH")
+export const del = apiCall("DELETE")
+export const put = apiCall("PUT")
+
+export default {
+  post: apiCall("POST"),
+  get: apiCall("GET"),
+  patch: apiCall("PATCH"),
+  delete: apiCall("DELETE"),
+  put: apiCall("PUT"),
+}
--- a/packages/standard-components/src/fetchData.js
+++ b/packages/standard-components/src/fetchData.js
@ -0,0 +1,35 @@
+import api from "./api"
+
+export default async function fetchData(datasource) {
+  const { isModel, name } = datasource
+
+  if (name) {
+    return isModel ? await fetchModelData() : await fetchViewData()
+  }
+
+  async function fetchModelData() {
+    if (!name.startsWith("all_")) {
+      throw new Error("Incorrect model convention - must begin with all_")
+    }
+    const modelsResponse = await api.get(`/api/views/${name}`)
+    return await modelsResponse.json()
+  }
+
+  async function fetchViewData() {
+    const { field, groupBy } = datasource
+    const params = new URLSearchParams()
+
+    if (field) {
+      params.set("field", field)
+      params.set("stats", true)
+    }
+    if (groupBy) params.set("group", groupBy)
+
+    let QUERY_VIEW_URL = field
+      ? `/api/views/${name}?${params}`
+      : `/api/views/${name}`
+
+    const response = await api.get(QUERY_VIEW_URL)
+    return await response.json()
+  }
+}