and field name encoding and ci status

README.md

@@ -1,5 +1,7 @@
 # chart-builder
 
+[![CircleCI](https://circleci.com/gh/datadotworld/chart-builder.svg?style=svg)](https://circleci.com/gh/datadotworld/chart-builder)
+
 This is an app to generate Vega-Lite visualizations using data from a data.world query.
 
 ### Getting started

src/util/Store.js

@@ -1,7 +1,7 @@
 // @flow
 import { types } from 'mobx-state-tree'
 import sparqlTypeToVegaType from './sparqlTypeToVegaType'
-import { parseParams } from './util'
+import { parseParams, encodeFieldName } from './util'
 import type {
   EncodingChannel,
   EncodingType,
@@ -214,7 +214,7 @@ export const ChartConfig = types
               : sortOrder
 
           const enc = {
-            field: e.field.name,
+            field: encodeFieldName(e.field.name),
             type: e.appliedType,
             bin: e.bin || undefined,
             aggregate: e.aggregate === null ? undefined : e.aggregate,

src/util/__test__/util.spec.js

@@ -1,4 +1,9 @@
-import { parseParams, createParams, getDownloadName } from '../util'
+import {
+  parseParams,
+  createParams,
+  getDownloadName,
+  encodeFieldName
+} from '../util'
 
 describe('parseParams', () => {
   it('works', () => {
@@ -29,3 +34,17 @@ describe('getDownloadName', () => {
     expect(getDownloadName('base-name', 'png')).toMatchSnapshot()
   })
 })
+
+describe('encodeFieldName', () => {
+  const specs = [
+    [`normal.foo`, `normal\\.foo`],
+    [`normal.[]foo`, `normal\\.\\[\\]foo`],
+    [`normal`, `normal`]
+  ]
+
+  specs.forEach(([input, expected]) => {
+    it(`works for ${input}`, () => {
+      expect(encodeFieldName(input)).toBe(expected)
+    })
+  })
+})

src/util/util.js

@@ -23,3 +23,7 @@ export function getDownloadName(baseName: string, extension: string) {
   const dateStr = new Date().toISOString().replace(/[.:]/g, '-')
   return `${baseName}-${dateStr}.${extension}`
 }
+
+export function encodeFieldName(name: string) {
+  return name.replace(/([.\[\]])/g, '\\$1')
+}