Para quien no lo sepa, KarmaCracy es una startup nacida en Bilbao de mano de Alex Dolara y Jordi Martí pero ademaś es un acortador de Urls que en las últimas 24 horas ha generado 37.849 clicks válidos a través de 1.169 enlaces generados por 222 usuarios, nada mal ¿he?.

Recientemente han liberado bajo el amparo de la GPLv3 la primera versión del plugin que ellos mismos utilizan para mostrar las gráficas en detalle de los enlaces o kclicks que se generan en la plataforma.

Los mismos desarrolladores nos cuentan que decidieron crear un plugin ligero para jQuery que reemplazara las antiguas gráficas generadas con flash mediante FusionCharts.

Hemos podido hablar con Xabi Sáez de Ocariz y Alex Dolara programador JavaScript y Diseñador Gráfico respectivamente además de padres de la criatura que nos han explicado como funciona el plugin y como ha sido el proceso de desarrollo y liberación del código.

¿Cómo se usa?

Usar el plugin es muy sencillo, tan solo necesitamos un array de entrada de datos válido con el que alimentar al plugin y llamar a un simple método usando un selector de jQuery:

$(document).ready(function() {
    var data = [[[40,[“3”,“25\/11\/2011”]], [1,[“1”,“26\/11\/2011”]],
        [4,[“4”,“27\/11\/2011”]], [5,[“5”,“28\/11\/2011”]],
        [14,[“14”,“29\/11\/2011”]], [15,[“15”,“30\/11\/2011”]],
        [13,[“13”,“01\/12\/2011”]], [6,[“6”,“02\/12\/2011”]],
        [1,[“1”,“03\/12\/2011”]], [10,[“10”,“04\/12\/2011”]],
        [7,[“7”,“05\/12\/2011”]], [7,[“7”,“06\/12\/2011”]],
        [40,[“40”,“07\/12\/2011”]]];


    $(’#grafico’).karmicGraph(data, {
        ‘outLabel’: ‘Situa el cursor sobre un dato para descubrir su valor’,
        ‘color’: ‘blue’,
        ‘label’: ‘{0} puntos el día {1}’,
        ‘type’: ‘flatbars’,
        ‘freeColumn’ : 1
    });
});

El código anterior da como resultado lo que vemos en la siguiente imagen:

Como podéis comprobar su uso no es nada complicado.

¿Cómo funciona?

El plugin cuenta con una función llamada karmicGrahp, que se aplica sobre un elemento div. Esta función acepta tres parámetros:

• method: El método que se quiere invocar. Este parámetro es opcional y, de no ponerlo, se ejecuta el único método implementado por el momento: init.
• data: Array de datos del gráfico. Tiene la siguiente forma: [[valor1,[elementos del label]],[valor2,[elementos del label]],…]
• options: Objeto javascript con las opciones de configuración. Son las siguientes:
  • type: Tipo de gráfico. Actualmente hay dos estilos: flatbars, para el gráfico que se ve en el detalle de kcy y tinybars, para el que se ve en las estadísticas del usuario.
  • color: El color. Acepta: blue, red, green, yellow, orange, dark-orange, violet y gold.
  • showLabel: Si se muestra el label o no. true o false.
  • label: La cadena de texto que se muestra cuando se pone el cursor sobre una barra. Puede hacerse referencia al valor a través con {val} y a los elementos del label descritos en el array de datos con {0},{1}, haciendo referencia a su posición en dicho array.
  • outLabel: La cadena de texto que se muestra cuando el usuario no está posicionado encima de ninguna barra.
  • noLabel: La cadena de texto que se muestra cuando no hay valor definido para la barra sobre la que está el usuario.
  • freeColumn: Indica dónde se “anclan” las barras del gráfico. Si es menor o igual que 0, las barras sin datos se colocarán a la izquierda y la última barra del gráfico estará pegada a la derecha. Si es mayor que 0, las barras sin datos muestran a la derecha de las que sí los tienen y el principio del gráfico se ancla al extremo izquierdo.
  • width: La anchura, en píxeles, que queremos que tenga el gráfico.

¿Cómo se desarrolló y liberó?

Para construir el plugin siguieron las indicaciones y consejos de la página oficial de jQuery. En la versión actual, el plugin solo ofrece un método que inicializa el gráfico y genera el HTML adecuado pero la intención de Xabi es ofrecer otro método que realice una actualización de los datos desde una URL que se le pueda pasar como un parámetro configurable.

Para el desarrolo se ha seguido el modelo de implementación de varios métodos para un plugin que aconseja jQuery. Los métodos se agrupan en un objeto javascript y se llaman a través de la función principal, pasándole como parámetro una cadena de texto con el nombre del método en cuestión.

Esto se hace así para no saturar el espacio de nombres $.fn que es dónde se declaran las funciones plugin de jQuery. En el siguiente bloque de código podemos comprobar la gestión de la llamada a métodos:

$.fn.karmicGraph = function( method ) {	
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
		return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' +  method + ' does not exist on jQuery.karmicGraph' );
}    
}

A la hora de liberar el código se añadió una licencia GPLv3 para que toda la Comunidad pueda beneficiarse del código y se subió al repositorio público GitHub de Karmacracy.

Desde Genbeta Dev, y como siempre, les deseamos la mejor de las suertes a los chicos de Karmacracy y esperamos que en el futuro sigan liberando Software Libre de forma regular.

Más Información | Repositorio del proyecto
En Genbeta Dev |