Ko.Mapping Graph Data

by Admiral Potato

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div data-bind="foreach: {data: graphs, as: 'graph'}">
    <svg class="chart" data-bind="attr: { viewBox: '0 0 ' + graph.viewBox.x + ' ' + graph.viewBox.y }" preserveAspectRatio="none">
        <g data-bind="foreach: { data: graph.chartLines, as: 'line' }">
            <path data-bind="attr: { class: $root.getCall(line.well).toLowerCase() + ($root.isSelectedWell(line.well) ? ' selected' : '') + ($root.isCurrentWell(line.well) ? ' current' : ''),
             d: line.d, well: line.well },
            event: { mouseover: $root.onTestMouseOver, mouseout: $root.onTestMouseOut, click: $root.onLineClick }">
            </path>
        </g>
        <g id="static-elements">
            <path data-bind="attr: { d: graph.chartAxis }"></path>
        </g>
        <g data-bind="foreach: { data: graph.axislabels, as: 'label' }">
            <text data-bind="text: label.text, attr: {x: label.x, y: label.y, 'text-anchor': label.textanchor, transform: label.transform}" font-size="10"></text>
        </g>
    </svg>
</div>

JavaScript

var WorkListItem = function (data, vm) {
    data = data || {};
    var test = komapping.fromJS(data, {}, this);
    test.vm = vm;
    //WorkListItems won't come down with a 'well' property, but it does need to be displayed in the list
    test.well = ko.observable(data.well || false);
    test.active = ko.observable(false);
    test.displayComments = ko.observable(false);
    test.processGraphData();
};
WorkListItem.prototype = {
    select: function(item) {
        var result = !item.active();
        item.active(result);
        //console.log('WorkListItem.prototype.select:', result, action);
        //console.log(vm.workListSelection());
    },
    toggleComments: function(item, event) {
        var result = !item.displayComments();
        item.displayComments(result);
        event.stopPropagation();
        event.preventDefault();
    },
    getPrimitiveData: function(){
        var test = this,
            output = {},
            propertyName;
        for(propertyName in test){
            if(
                test.hasOwnProperty(propertyName)
                && propertyName !== '__ko_mapping__'
                && propertyName !== 'vm'
                && propertyName !== 'active'
                && propertyName !== 'displayComments'
            ){
                output[propertyName] = test[propertyName]();
            }
        }
        return output;
    },
    processGraphData: function(){
        var test =  this,
            graphs = WorklListItem.graphs();
        if(!test.graphData){return;}
    }
};
WorkListItem.mapping = {
    create: function(options) {
        //console.log(options);
        return new WorkListItem(options.data, options.parent.vm);
    }
};
    
var ViewModel = function(){
    var vm = this;
    vm.testList = ko.observableArray([]);
    vm.graphs = ko.observableArray({});
    WorkListItem.graphs = vm.graphs;
};
ViewModel.prototype = {
    setData: function(data){
        var vm = this;
        ko.mapping(
            {
       ...