JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

===
Input
===

Anything columnar*

* Hopefully

===
Namespace.data.types.raw
===

---
validate
---

{
'key': string or number
, 'value':  //zero-based indexed array or object w/unique id keys
//e.g. indexed array:
//zero-based index
//[ [ 1, 2, 3, 4 ], [ 5, 6, 7, 8 ], [ 9, 10, 11, 12 ] ]; 
//e.g. unique_ids
//unique id
//{ 'row_1': [ 1, 2, 3, 4 ], 'row_2': [ 5, 6, 7, 8 ], 'row_3': [ 9, 10, 11, 12 ] };


}, 'meta': { 'string': mixed }
, 'timestamp': GMT date
}

---
translate
---

//Raw to CSV
//Raw to Table

==
Namespace.data.types.csv
==

---
validate
---

//comma seperated values of strings or numbers

---
translate
---

//CSV to Raw
//CSV to Table (convenience: CSV->Raw, Raw->Table)

===
Namespace.data.types.table
===

----
validate
----

Format of Google Library Data Table JavaScript Literal
via
http://code.google.com/apis/chart/interactive/docs/reference.html#dataparam

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
        ],
  rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}]},
         {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}]},
         {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}]}
        ],
  p: {foo: 'hello', bar: 'world!'}
}
   row is a zero-based row index
   column is either a zero-based column index or a unique ID

---
transform 
---

//Table to raw
//Table to CSV (convenience: Table->Raw, Raw->CSV)



===
Example input
===

//scalars
var ex3 = {
'one': 1
, 'two': 2
, 'three': 3
};

//Scalars are recast to single element arrays,
//Object ex3 is the same as:
var ex6 = {
'one': [ 1 ]
, 'two': [ 2 ]
, 'three': [ 3 ]
};

var ex4 = [ 1, 2, 3 ];

//Object ex4 is the same as (recast to):
var ex5 = { 0: [ 1 ], 1: [ 2 ], 2: [ 3 ] };

//unique id
var ex1 = { 'row_1': [ 1, 2, 3, 4 ]
  ,...

JavaScript

/* Data Zip */
/* Goal: 1) Transform semi-structured JS objects into CSV and the standard Google Data Table object format, making it usable w/the Google Chart API. 2) Use the ChartWrapper class to create standard chart types (http://code.google.com/apis/chart/interactive/docs/reference.html#chartwrapperobject)
*/
var Namespace = {};
Namespace.cache = Namespace.cache || {};
Namespace.utils = Namespace.utils || {};
Namespace.data = Namespace.data || {};
Namespace.data.utils = Namespace.data.utils || {};
Namespace.data.type = Namespace.data.type || {};
Namespace.data.types = Namespace.data.types || {};
Namespace.data.value = Namespace.data.value || {};
Namespace.data.values = Namespace.data.values || {};
Namespace.data.table = Namespace.data.table || {};
Namespace.data.row = Namespace.data.row || {};
Namespace.data.column = Namespace.data.column || {};
Namespace.data.cell = Namespace.data.cell || {};
Namespace.chart = Namespace.chart || {};
Namespace.charts = Namespace.charts || {};

/* CONFIG */

/* Data Types */

Namespace.data.types = {
    'table': {
        'transform': {
            'raw': function() {},
        },
        'validate': function() {}
    },
    'input': {
        'transform': {
            'raw': function() {},
        },
        'validate': function() {}
    },
    'raw': {
        'transform': {
            'table': function() {},
            'csv': function() {}
        },
        'validate': function() {}
    },
    'csv': {
        'transform': {
            'raw': function() {},
        },
        'validate': function() {}
    }
};

Namespace.data.types.raw.transform.table = function(obj) {
    var newobj = obj;

    
    return newobj;
};

Namespace.data.types.raw.transform.csv = function(obj) {

};

Namespace.data.types.raw.transform.filter = function(obj) {
    var newobj = (null !== obj && 'undefined' !== typeof obj) ? obj : {},
        objlen = obj.length,
        x, current, attr;
    if (Namespace.utils.isArray(obj)) {
       ...