Autor: David Miró

Página 1/101

Cómo imprimir una lista de forma más agradable en Python por línea de comandos

A menudo en Python necesitamos imprimir una lista por la línea de comandos. La manera mas habitual y sencilla es imprimir los elementos de la lista separados por comas. Por ejemplo:

Código

fruit_list = ['Albaricoque', 'Cereza', 'Ciruela', 'Higo', 'Kaki', 'Manzana', 'Melocoton', 'Nectarina',
              'Nispero', 'Pera', 'Uva', 'Aguacate', 'Carambola', 'Chirimoya', 'Coco', 'Datil', 'Fresa',
              'Fruta de la pasion', 'Kiwi', 'Litchi', 'Mango', 'Papaya', 'Platano', 'Grosella negra']

print ','.join(fruit_list)

fruit_list = ['Albaricoque', 'Cereza', 'Ciruela', 'Higo', 'Kaki', 'Manzana', 'Melocoton', 'Nectarina',

'Nispero', 'Pera', 'Uva', 'Aguacate', 'Carambola', 'Chirimoya', 'Coco', 'Datil', 'Fresa',

'Fruta de la pasion', 'Kiwi', 'Litchi', 'Mango', 'Papaya', 'Platano', 'Grosella negra']

print ','.join(fruit_list)

Resultado

Aguacate, Albaricoque, Carambola, Cereza, Chirimoya, Ciruela,.....

1	Aguacate, Albaricoque, Carambola, Cereza, Chirimoya, Ciruela,.....

Pero yo encuentro que no es muy legible para el usuario. Voy a dejar aquí una pequeña función que imprime por línea de comandos la lista formateada en columnas, ordenando los elementos alfabéticamente. A la función se le pasa por parámetro la lista (obvio) y el número de columnas que deseas. Como parámetro opcional (con un valor por defecto de 2) se puede indicar el espacio entre columnas. Para un ajuste óptimo, la función calcula el espacio que necesita para cada una de las columnas.

Código

def print_sorted_list(data, columns, gap=2):
    if data:
        gap = 2
        ljusts = {}
        for count, item in enumerate(sorted(data), 1):
            column = count % columns
            ljusts[column] = len(item) if (column not in ljusts) else max(ljusts[column], len(item))

        for count, item in enumerate(sorted(data), 1):
            print item.ljust(ljusts[count % columns] + gap),
            if (count % columns == 0) or (count == len(data)):
                print

def print_sorted_list(data, columns, gap=2):

if data:

gap = 2

ljusts = {}

for count, item in enumerate(sorted(data), 1):

column = count % columns

ljusts[column] = len(item) if (column not in ljusts) else max(ljusts[column], len(item))

for count, item in enumerate(sorted(data), 1):

print item.ljust(ljusts[count % columns] + gap),

if (count % columns == 0) or (count == len(data)):

Demo

fruit_list = ['Albaricoque', 'Cereza', 'Ciruela', 'Higo', 'Kaki', 'Manzana', 'Melocoton', 'Nectarina',
              'Nispero', 'Pera', 'Uva', 'Aguacate', 'Carambola', 'Chirimoya', 'Coco', 'Datil', 'Fresa',
              'Fruta de la pasion', 'Kiwi', 'Litchi', 'Mango', 'Papaya', 'Platano', 'Grosella negra']

print_sorted_list(fruit_list, columns=3)

fruit_list = ['Albaricoque', 'Cereza', 'Ciruela', 'Higo', 'Kaki', 'Manzana', 'Melocoton', 'Nectarina',

'Nispero', 'Pera', 'Uva', 'Aguacate', 'Carambola', 'Chirimoya', 'Coco', 'Datil', 'Fresa',

'Fruta de la pasion', 'Kiwi', 'Litchi', 'Mango', 'Papaya', 'Platano', 'Grosella negra']

print_sorted_list(fruit_list, columns=3)

Resultado

Aguacate             Albaricoque      Carambola
Cereza               Chirimoya        Ciruela
Coco                 Datil            Fresa
Fruta de la pasion   Grosella negra   Higo
Kaki                 Kiwi             Litchi
Mango                Manzana          Melocoton
Nectarina            Nispero          Papaya
Pera                 Platano          Uva

Aguacate Albaricoque Carambola

Cereza Chirimoya Ciruela

Coco Datil Fresa

Fruta de la pasion Grosella negra Higo

Kaki Kiwi Litchi

Mango Manzana Melocoton

Nectarina Nispero Papaya

Pera Platano Uva

Saludos.

Tecnologia

Chart.js: grafica de tipo donut con múltiples anillos

En un artículo anterior expliqué cómo añadir texto dentro de una grafica de tipo donut. Hoy te voy a mostrar cómo crear una gráfica tipo donut con múltiples anillos.

Extra! tambien veremos cómo modificar la información que aparece al pasar el ratón por encima de cada uno de los datos de la gŕafica.

Básicamente tenemos que declarar varios conjuntos de datos, donde cada conjunto de datos es un anillo. Hasta aqui todo bien. Si queremos mostrar una etiqueta «personalizada» para cada uno de los datos, tenemos que añadir las etiquetas en cada conjunto de datos y sobreescribir la función encargada de mostrar la información que aparece al pasar el ratón por encima. Ademas, ya de paso, hemos aprovechado para calcular el porcentage.

Código HTML

 <div id="mychart-holder">
    <canvas id="mychart"/>
 </div>

</div>

Código Javascript

var data = {
    labels: [],
    datasets: [
        {
            data: [2, 3, 8, 3, 4],
            backgroundColor: ["orange", "red", "green", "violet", "lightgreen"],
            labels: ["naranjas", "mandarinas", "manzanas", "berenjenas", "calabacines"]
        },
        {
            data: [2 + 3 + 8,  3 + 4],
            backgroundColor: ["springgreen", "lightblue"],
            labels: ["frutas", "hortalizas"],
        },
        {
            data: [2 + 3 + 8 + 3 + 4],
            backgroundColor: ["lightgray"],
            labels: ["total"],
        }
    ]
};

var myChart = new Chart(document.getElementById('mychart'), {
    type: 'doughnut',
    data: data,
    options: {
        cutoutPercentage: 20,
        maintainAspectRatio: true,
        responsive: true,
        legend: {
            display: false
        },
        animation: {
            animateScale: true,
            animateRotate: true
        },
        tooltips: {
             /* activa esta funcion si deseas no mostrar alguna de las etiquetas
            filter: function (item, data) {
                if (item.datasetIndex == 1) {
                if (item.index == 1) {
                   return false;
                  }
                }
                return true;
            },
            */            callbacks: {
                label: function(item, data) {
                    // get label and data
                    var labels = data.datasets[item.datasetIndex].labels;
                    var dataset = data.datasets[item.datasetIndex].data;
                    
                    var currentLabel = labels[item.index];
                    var currentValue = dataset[item.index];
                    
                    // calc percentage
                    var total = dataset.reduce(function(previousValue, currentValue, currentIndex, array) {
                        return previousValue + currentValue;
                    });
                    var percentage = ((currentValue/total) * 100);

                    // put label
                    return " " + currentLabel + ": " + currentValue + " (" + percentage.toFixed(1) + "%)";
                     
                }
            }
        },
    }
});

var data = {

labels: [],

datasets: [

{

data: [2, 3, 8, 3, 4],

backgroundColor: ["orange", "red", "green", "violet", "lightgreen"],

labels: ["naranjas", "mandarinas", "manzanas", "berenjenas", "calabacines"]

{

data: [2 + 3 + 8, 3 + 4],

backgroundColor: ["springgreen", "lightblue"],

labels: ["frutas", "hortalizas"],

{

data: [2 + 3 + 8 + 3 + 4],

backgroundColor: ["lightgray"],

labels: ["total"],

}

]

};

var myChart = new Chart(document.getElementById('mychart'), {

type: 'doughnut',

data: data,

options: {

cutoutPercentage: 20,

maintainAspectRatio: true,

responsive: true,

legend: {

display: false

animation: {

animateScale: true,

animateRotate: true

tooltips: {

/* activa esta funcion si deseas no mostrar alguna de las etiquetas

filter: function (item, data) {

if (item.datasetIndex == 1) {

if (item.index == 1) {

return false;

}

return true;

callbacks: {

label: function(item, data) {

// get label and data

var labels = data.datasets[item.datasetIndex].labels;

var dataset = data.datasets[item.datasetIndex].data;

var currentLabel = labels[item.index];

var currentValue = dataset[item.index];

// calc percentage

var total = dataset.reduce(function(previousValue, currentValue, currentIndex, array) {

return previousValue + currentValue;

});

var percentage = ((currentValue/total) * 100);

// put label

return " " + currentLabel + ": " + currentValue + " (" + percentage.toFixed(1) + "%)";

}

});

Aqui dejo el jsfiddle

Tecnologia

Chart.js: cómo añadir texto dentro de una grafica de tipo donut

A continuación te muestro cómo añadir texto dentro de una grafica de tipo donut en Chart.js

Chart.js es una libreria open source para crear gráficos en javascript basados en HTML5. Entre la amplia lista de gráficos disponibles de esta fantástica librería tenemos el donut (doughnut). Que básicamente es un gráfico de torta pero con un agujero en el centro … sorprendidos ¿verdad? 😉

Yo lo que quiero es aprovechar ese agujero del centro para añadir información, ya sea un simple texto o el total. Algo asi como los pop dots 😉

cómo añadir texto dentro de una grafica de tipo donut

Básicamente esto se consigue añadiendo un plugin e implementando el evento beforedraw. En mi ejemplo muestro el total pero podeis modificar el código para mostrar otra información.

Código HTML

<div id="mychart-holder">
    <canvas id="mychart"/>
</div>

</div>

Código Javascript

var data = {
    labels: ["Error", "Failure", "Success", "Skip", "Unknown"],
    datasets: [
        {
            data: [10, 5, 20, 2, 1],
            backgroundColor: ["red", "orange", "green", "blue", "violet"],
        }
    ]
};

var myChart = new Chart(document.getElementById('mychart'), {
    type: 'doughnut',
    data: data,
    options: {
        //cutoutPercentage: 50,
        maintainAspectRatio: true,
        responsive: true,
        legend: {
            display: false
        },
        animation: {
            animateScale: true,
            animateRotate: true
        },
    },
    plugins: [{
        id: 'total',
        beforeDraw: function(chart) {
            const width = chart.chart.width;
            const height = chart.chart.height;
            const ctx = chart.chart.ctx;
            ctx.restore();
            const fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + "em sans-serif";
            ctx.textBaseline = 'middle';
            var total = data.datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
                return previousValue + currentValue;
            });
            const text = total;
            const textX = Math.round((width - ctx.measureText(text).width) / 2);
            const textY = height / 2;
            ctx.fillText(text, textX, textY);
            ctx.save();
        }
    }]
});

var data = {

labels: ["Error", "Failure", "Success", "Skip", "Unknown"],

datasets: [

{

data: [10, 5, 20, 2, 1],

backgroundColor: ["red", "orange", "green", "blue", "violet"],

}

]

};

var myChart = new Chart(document.getElementById('mychart'), {

type: 'doughnut',

data: data,

options: {

//cutoutPercentage: 50,

maintainAspectRatio: true,

responsive: true,

legend: {

display: false

animation: {

animateScale: true,

animateRotate: true

plugins: [{

id: 'total',

beforeDraw: function(chart) {

const width = chart.chart.width;

const height = chart.chart.height;

const ctx = chart.chart.ctx;

ctx.restore();

const fontSize = (height / 114).toFixed(2);

ctx.font = fontSize + "em sans-serif";

ctx.textBaseline = 'middle';

var total = data.datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {

return previousValue + currentValue;

});

const text = total;

const textX = Math.round((width - ctx.measureText(text).width) / 2);

const textY = height / 2;

ctx.fillText(text, textX, textY);

ctx.save();

}

}]

});

Aquí el código en jsfiddle

Si lo que queremos es utilizar el plugin en varias gráficas, entonces podemos registrar el plugin

Código Javascript (2)

var data = {
    labels: ["Error", "Failure", "Success", "Skip", "Unknown"],
    datasets: [
        {
            data: [10, 5, 20, 2, 1],
            backgroundColor: ["red", "orange", "green", "blue", "violet"],
        }
    ]
};

Chart.Chart.pluginService.register({
    beforeDraw: function(chart) {
        const width = chart.chart.width;
        const height = chart.chart.height;
        const ctx = chart.chart.ctx;
        ctx.restore();
        const fontSize = (height / 114).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = 'middle';
        var total = chart.data.datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
                return previousValue + currentValue;
        });
        const text = total;
        const textX = Math.round((width - ctx.measureText(text).width) / 2);
        const textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
    },
});

var myChart = new Chart(document.getElementById('mychart'), {
    type: 'doughnut',
    data: data,
    options: {
        //cutoutPercentage: 50,
        maintainAspectRatio: true,
        responsive: true,
        legend: {
            display: false
        },
        animation: {
            animateScale: true,
            animateRotate: true
        },
    }
});

var data = {

labels: ["Error", "Failure", "Success", "Skip", "Unknown"],

datasets: [

{

data: [10, 5, 20, 2, 1],

backgroundColor: ["red", "orange", "green", "blue", "violet"],

}

]

};

Chart.Chart.pluginService.register({

beforeDraw: function(chart) {

const width = chart.chart.width;

const height = chart.chart.height;

const ctx = chart.chart.ctx;

ctx.restore();

const fontSize = (height / 114).toFixed(2);

ctx.font = fontSize + "em sans-serif";

ctx.textBaseline = 'middle';

var total = chart.data.datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {

return previousValue + currentValue;

});

const text = total;

const textX = Math.round((width - ctx.measureText(text).width) / 2);

const textY = height / 2;

ctx.fillText(text, textX, textY);

ctx.save();

});

var myChart = new Chart(document.getElementById('mychart'), {

type: 'doughnut',

data: data,

options: {

//cutoutPercentage: 50,

maintainAspectRatio: true,

responsive: true,

legend: {

display: false

animation: {

animateScale: true,

animateRotate: true

}

});

Aquí el código en jsfiddle

Tecnologia

Bootstrap: cómo agregar estado checked a los elementos de un menu dropdown

A continuación te muestro cómo agregar estado checked a los elementos de un menu dropdown de Bootstrap

Bootstrap es un framework Open Source creado por Twitter que facilita el diseño web. En la lista de componentes facilitados por este genial framework tenemos el dropdown. Un dropdown permite mostrar una lista de opciones en un desplegable. El problema es que bootstrap no permite indicar si una opcion de la lista está checked (activada) o unchecked (desactivada). Para conseguir esto por nuestra cuenta vamos a necesitar un poco de css y javascript:

La clase dropdown-item-checked añade un símbolo ‘✓’ a la izquierda de la opción, esto se consigue con CSS.
Con HTML asociamos cada una de las opciones del dropdown a la clase option que nos servirá para capturar el evento click y añadimos la clase dropdown-item-checked a las opciones que queremos a checked por defecto.
Javascript captura el evento click sobre las opciones y conmuta la clase dropdown-item-checked de la opcion sobre la que hemos hecho click. Cuando la opción no tiene la clase dropdown-item-checked el símbolo ‘✓’ desaparece y viceversa, cuando la opción tiene la clase dropdown-item-checked el símbolo ‘✓’ aparece de nuevo.

Código HTML

<div class="btn-toolbar">
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" id="menu">
        <li><a href="#" id="option-one" class="option dropdown-item-checked">My option one</a></li>
        <li><a href="#" id="option-two" class="option">My option two</a></li>
        <li><a href="#" id="option-three" class="option dropdown-item-checked">My option three</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#" id="option-five" class="option">My option five</a></li>
      </ul>
    </div>
  </div>
</div>

</button>

<li><a href="#" id="option-one" class="option dropdown-item-checked">My option one</a></li>

<li><a href="#" id="option-two" class="option">My option two</a></li>

<li><a href="#" id="option-three" class="option dropdown-item-checked">My option three</a></li>

<li><a href="#" id="option-five" class="option">My option five</a></li>

</ul>

</div>

Código CSS

.dropdown-item-checked::before {
   position: absolute;
   left: .4rem;
   content: '✓';
   font-weight: 600;
}

.dropdown-item-checked::before {

position: absolute;

left: .4rem;

content: '✓';

font-weight: 600;

}

Código Javascript

$(".option").click(function(event){
  event.preventDefault();
  var id = $(this).attr('id');
  $(this).toggleClass("dropdown-item-checked");
  var isChecked = $(this).hasClass("dropdown-item-checked");
  if (id == 'option-one') {
   if (isChecked) {
     // bla bla bla 
     }
  } else if (id == 'option-two') {
  // bla bla bla
  } else if (id == 'option-three') {
  // bla bla bla
  } else if (id == 'option-four') {
  // bla bla bla
  }
});

$(".option").click(function(event){

event.preventDefault();

var id = $(this).attr('id');

$(this).toggleClass("dropdown-item-checked");

var isChecked = $(this).hasClass("dropdown-item-checked");

if (id == 'option-one') {

if (isChecked) {

// bla bla bla

}

} else if (id == 'option-two') {

// bla bla bla

} else if (id == 'option-three') {

// bla bla bla

} else if (id == 'option-four') {

// bla bla bla

}

});

Aqui el código en jsfiddle

...

101

3ENGINE

Programación y otros cachivaches

Autor: David Miró

Cómo imprimir una lista de forma más agradable en Python por línea de comandos

Código

Resultado

Código

Demo

Resultado

Chart.js: grafica de tipo donut con múltiples anillos

Código HTML

Código Javascript

Chart.js: cómo añadir texto dentro de una grafica de tipo donut

Código HTML

Código Javascript

Código Javascript (2)

Bootstrap: cómo agregar estado checked a los elementos de un menu dropdown

Código HTML

Código CSS

Código Javascript

Acerca 3Engine

Categorías

Etiquetas

Archivos