huangzhuolin

Create-react-app

Create React apps with no build configuration.

Thanks to create-react-app. It's saves a lot of my time. I remember several months ago I had to setup a lot just for a react app, webpack, babel, test environment and so on... Fortunately, everything becomes easy now. Though you have many choices of start boiler plate, you worth trying this.

React router

If you are build a SPA with react, you probably use react-router.

huangzhuolin

// ...

export class PanelCtrl {
  // ...
  
   addEditorTab(title, directiveFn, index?) {
    let editorTab = { title, directiveFn };
    if (_.isString(directiveFn)) {
      editorTab.directiveFn = function() {
        return { templateUrl: directiveFn };

huangzhuolin

constructor($scope, $injector) {
  this.$injector = $injector;
  this.$scope = $scope;
  // ...
  
  // access url params
  someFunc(){
    const routeParams = this.$injector.get("$routeParams");
    const searchParams = this.$injector.get("$location").search();
    // ...

huangzhuolin

# mac os
brew install graphviz
pip install pygraphviz
pip install django-extensions
python manage.py graph_models trees -o test.png

huangzhuolin

differences between iterables and iterators

iterables have an __iter__ method that instantiates a new iterator every time. iterators implement a __next__ method that returns individual items, and an __iter__ method that returns self.

Therefore, iterators are also iterable, but iterables are not iterators.

generator function

huangzhuolin

# sequential download script
import os
import time
import sys

import requests

POP20_CC = ('CN IN US ID BR PK NG BD RU JP '
            'MX PH VN ET EG DE IR TR CD FR').split()

huangzhuolin

Directives

refs

https://docs.angularjs.org/guide/directive

Definition

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

matching directives

1. `` element matches the ngModel directive

huangzhuolin

// ...

export class ComponentCtrl {
  // ...
  onClick() {
    // We can access outer scope function here with the binding name.
    this.outerHandleClick({param1: 1, param2: 2}) // We can also pass parameters to outer function.
  }
}

huangzhuolin

In grafana, when we click in the chart and drag, we can select the time range to display. The effect will be propagated to the whole dashboard, and every panel will be set to the specific time range.

Now we try to realize the same effect using React and Highcharts.

1. The highchart's option to enable the function that we can drag to select time range is below.

{
  chart: { zoomType: 'x' }
}

huangzhuolin

select case field_a
when '1' then 'cat'
when '2' then 'dog'
else 'unknown'
end 
from my_table;