How to use the can.Component function in can

// can.batch.start();
// console.log('pushing 0');
// vm.attr('data').push(0);
// can.batch.stop();

// can.batch.start();
// console.log('pushing 150');
// vm.attr('data').push(150);
// can.batch.stop();

// can.batch.start();
// vm.attr('graph').attr('xScale', d3.scale.linear().domain([0, 6]).range([0, 100]));
// vm.attr('graph').attr('yScale', d3.scale.linear().domain([0, 150]).range([100, 0]));
// can.batch.stop();

can.Component.extend({
    tag: "bit-series",
    viewModel: BitSeriesVM,
    events: {
        inserted: function() {
            var parentScope = this.element.parent().scope();
            this.scope.attr('graph', parentScope);
            parentScope.addSeries(this.scope);
        },
        removed: function() {
            this.element.parent().scope().removeSeries(this.scope);
        }
    }
});

export var BitGraphVM = can.Map.extend({
    define: {

// // console.log('pushing 0');
// // bs1.attr('data').push(0);
// // can.batch.stop();

// // // can.batch.start();
// // // console.log('pushing 500');
// // // bs2.attr('data').push(500);
// // // can.batch.stop();

// // can.batch.start();
// // console.log('pushing 7 and 8');
// // bs3.attr('data').push(7);
// // bs3.attr('data').push(8);
// // can.batch.stop();

can.Component.extend({
    tag: "bit-graph",
    template: template,
    viewModel: BitGraphVM,
    events: {
        inserted: function(scope, el) {
            // TODO select this based on a child of el
            var graphBaseElement = d3.select(document.getElementById('graph'))
            this.scope.renderBaseGraph(graphBaseElement);
        },
        // "{scope} xScale": function() {
        //     this.scope.refreshAxes();
        // },
        // "{scope} yScale": function() {
        //     this.scope.refreshAxes();
        // },
        "{scope} seriesSerialized": function() {

var can = require("can");
var Todo = require("./todo");

'use strict';

var ESCAPE_KEY = 27;

can.Component.extend({
	// Create this component on a tag  like ``.
	tag: 'todo-app',
	scope: {
		// Store the Todo model in the scope
		Todo: Todo,
		// A list of all Todos retrieved from LocalStorage
		todos: new Todo.List({}),
		// Edit a Todo
		edit: function (todo, el) {
			todo.attr('editing', true);
			el.parents('.todo').find('.edit').focus();
		},
		cancelEditing: function (todo, el, ev) {
			if (ev.which === ESCAPE_KEY) {
				el.val(todo.attr('text'));
				todo.attr('editing', false);

/* jshint ignore:end */
                }
            }, utils));
        }
    });

    /* jshint ignore:end */
};


/**
 * Options/Graphing UI
 **/

can.Component.extend({
    tag: 'benchmark-options',
    template: can.view('benchmark-options-template'),
    viewModel: {
        define: {
            options: {
                value: {
                    define: {
                        '*': {
                            type: 'boolean',
                            value: false
                        }
                    }
                }
            },
            running: {
                value: false