Sunday, March 12, 2017

A good start to learn Swift 3


I found Mac is much better to be used than windows system. The mouse is super good without wheel as the top part of mouse is actually touchable. To do copy/paste you need to use cmd key + C/V.

Following note are from what I learned for swift 3:

Swift simplified memory management using ARC - Automatic Reference Counting.

Using let for constant, var is used for variable:

let oneMillion = 1_000_000
You can use min and max properties for integer type to get maximum and minimum value.

// 定义类型别名 typealias
typealias AudioSample = UInt16 

// optional binding,只有当yyy是optional的时候才可以这样用。optional的yyy非空时为真,将yyy中的值取出赋给xxx,空时(nil)为假;

if let xxx = yyy {
     // do something
} else {
     // do other thing
}

// decompose一个tuple时,对于不想使用的元素用’_’接收
let http404Error = (404, "Not Found")
let (justTheStatusCode, _) = http404Error
println("The status code is \(justTheStatusCode)")
// prints "The status code is 404

let possibleNumber = "123"
let convertedNumber = possibleNumber.toInt()
// convertedNumber is inferred to be of type "Int?", or "optional Int”,因为toInt()可能会失败(比如“123a”)导致返回nil
!== and === are identity operators and are used to determine if two objects have the same reference.
var arr1 = [1, 2, 3]
var arr2 = arr1
arr2[0] = 10;
arr1     // [10, 2, 3]
arr2     // [10, 2, 3]
arr1 === arr2  // true


把《The Swift Programming Language》读薄

Introducing Firebase with Swift 3: Login and Sign Up

Monday, February 27, 2017

Chartjs V2 Add Custom Legend and Show/Hide Chart Data through Click

To add interactive feature for Chartjs version such as select/unselect group of data, you can use chart.metadata.hidden attribute. For doghnut chart, the hidden attribute can work with datasets and data both. However, for line and bar chart, only datasets.hidden is effective. To work with line and bar chart, you need to manually change data.

Following method can be used to add the interactive feature with Custom Legend for bar/line/doghnut charts:

//add custom legends
var addCustomLegends = function (canvas, data) {
    var legendLabel = canvas.replace('canvas', 'legendLabel');
    var legendNameBase = canvas.replace('canvas', 'legend');
    $('#' + canvas).before('<div id="' + legendLabel + '" style="width:100%;text-align:center;padding-left:25px;padding-right:25px;"></div>');
    var divWidth = 75 / data.labels.length;
    var innerHTMLStr = '';
    for (var i = 0; i < data.labels.length; i++) {
        var clickEvents = '';
        clickEvents += 'hideChartLabels(event,\'' + i + ',' + data.labels.length
            + ', \'#datalist\');'; //don't put space after comma inside the string presenting as array
    }
    innerHTMLStr += '<div style="display:inline-block; height:12px; text-align:center; vertical-align:middle; margin-right:5px; background:' + gbService.getColor('lightgray') + '; border:1px solid rgba(0, 0, 0, .2); width: '
        + '12px;"></div><div id="' + legendNameBase + i + '" style="display:inline-block; text-align:center; vertical-align:top; padding-right:10px; width=' + divWidth + '"% '
        + ' onclick ="' + clickEvents + '">'
        + data.labels[i] + '</div>';
    }
    document.getElementById(legendLabel).innerHTML = innerHTMLStr;
    if (legendStatus != null && legendStatus.length == data.labels.length) {
        for (var i = 0; i < data.labels.length; i++) {
            if (legendStatus[i] !== 'none') { //hidden the data
                $('#' + legendNameBase + i).click();
            }
        }
    }
}

var hideChartLabels = function (e, idName, index, length) {
    var idNameBase = idName;
    if (index < 10) {
        idNameBase = idNameBase.substring(0, idNameBase.length - 1);
    }
    else {
        idNameBase = idNameBase.substring(0, idNameBase.length - 2);
    }

    if (chart == null || chart == undefined) return;
    var data = chart.data;

    //draw the line-through to show the data is hidding
    if ($('#' + idNameBase + index).css("text-decoration") == "none") {
        $('#' + idNameBase + index).css({ "text-decoration": "line-through" });
    }
    else {
        $('#' + idNameBase + index).css({ "text-decoration": "none" });
    }

    //set hidden attribute for meta data
    for (var i = 0; i < data.datasets.length; i++) {
        updateChartDatasetItem(window[chart], i, index);
    }

    chart.update();
};

var updateChartDatasetItem = function (ci, index, elementIndex) {
    var meta = ci.getDatasetMeta(index);
    if (meta.dataset) {
        meta.hidden = !meta.hidden; //hidden whole dataset
    }
    else {
        meta.data[elementIndex].hidden = !meta.data[elementIndex].hidden;
    }
}

Reference:
https://github.com/chartjs/Chart.js/issues/2565