fix up chromium m47 build error: unsupported reloc 42 against global symbol gmon_start

Error:
ld.gold: error: /usr/lib/gcc/x86_64-linux-gnu/5.3.1/../../../x86_64-linux-gnu/crti.o: unsupported reloc 42 against global symbol gmon_start

Solution:
export GYP_DEFINES="linux_use_bundled_gold=0"

bizcharts example: Line Chart

Chart UI

Codes

ChartComponent.js

import React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;

export class LineChart extends Component {
  render() {
    const { data, width, height } = this.props;
    if (!data || data.length <= 0)
      return null;
    const ytitle = {
      autoRotate: true,
      offset: -10,
      textStyle: {
        fontSize: '22',
        textAlign: 'left',
        fill: 'rgb(75,83,87)',
        rotate: 0
      },
      position: 'end',
    };
    const xtitle = {
      autoRotate: true,
      offset: -20,
      textStyle: {
        fontSize: '22',
        textAlign: 'center',
        fill: 'rgb(75,83,87)',
        rotate: 0
      },
      position: 'end',
    };
    const line = {
      stroke: 'rgb(197,197,200)',
      lineWidth: 2
    };
    const axis = [];
    let i = 0;
    for (let key in data[0]) {
      axis[i++] = key;
    }
    let cols = {};
    cols[axis[1]] = { min: 0};
    cols[axis[0]] = { range: [ 0, 1 ] };
    const position = axis[0] + '*' + axis[1];
    return (
      <div style={{width:width,height:height}}>
      <Chart width={width} height={height} data={data} scale={cols} padding='auto'>
        <Axis name={axis[0]} title={xtitle} tickLine={null} line={line} label={null}/>
        <Axis name={axis[1]} title={ytitle} tickLine={null} line={line} label={null}/>
        <Tooltip/>
        <Geom type="line" position={position} size={2} color='rgb(82,63,91)'/>
        <Geom type='point' position={position} size={4} shape={'circle'}
          color='rgb(236,142,91)' style={{ stroke: 'rgb(236,142,91)', lineWidth: 2}}>
        </Geom>
      </Chart>
      </div>
   )
  }
};

App.js

import React, { Component } from 'react';
import {LineChart} from './ChartComponent';
import './App.css';

class App extends Component {
  render() {
    const data = [];
    let i = 0;
    for (i = 0; i < 10; i++) {
      let time = 1000*Math.random();
      let score = 10*Math.random();
      data.push({'Timeline':time, 'Score':score});
    }
    return (
      <div className="App">
        <LineChart data={data} width={400} height={400}>
        </LineChart>
      </div>
    );
  }
}

export default App;

Dependences

yarn add bizcharts yarn add @antv/data-set

Refers

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clock
https://github.com/alibaba/BizCharts/tree/master/doc/tutorial

bizcharts example : Doughnut Chart

Chart UI

key codes explaintion:

<Coord type='theta' innerRadius={0.45} />
without 'innerRadius={0.45}', UI will looks like:

without below codes, UI will looks like:

<Geom select={[false,{}]} type='intervalStack' position='percent' 

  color={['type', ['rgba(255, 255, 255, 0)']]} 

  style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}> 

</Geom> 

Codes

ChartComponent.js

import React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;

export class ScoreChart extends Component {
  render() {
    const { width, height, score } = this.props;
    const scoreData = [
      { type: 'Score', value: score },
      { type: '', value: 10 - score },
    ];
    const scoreDv = new DataView();
    scoreDv.source(scoreData)
      .transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent'
    });
    const scoreColor = (type) => {
      if (type === 'Score')
        return 'rgb(152,191,182)';
      return 'white';
    };
    return (
      <Chart data={scoreDv} width={width} height={height} padding='auto'>
        <Coord type='theta' innerRadius={0.45} />
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', ['rgba(255, 255, 255, 0)']]}
          style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}>
        </Geom>
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', scoreColor]}>
        </Geom>
      </Chart>
    )
  }
};

export class StarChart extends Component {
  render() {
    let { width, height, situation, action, task, result } = this.props;
    if (width < 200)
      width = 200;
    if (height < 200)
      height = 200;
    const starData = [
      { type: 'Situation', value: situation },
      { type: 'Action', value: action },
      { type: 'Task', value: task },
      { type: 'Result', value: result },
    ];
    const starDv = new DataView();
    starDv.source(starData)
      .transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent'
    });
    const starColor = (type) => {
      if (type === 'Situation')
        return 'rgb(208,210,211)';
      if (type === 'Action')
        return 'rgb(151,191,182)';
      if (type === 'Task')
        return 'rgb(236,142,91)';
      if (type === 'Result')
        return 'rgb(64,43,74)';
      return 'transparent';
    };
    return (
      <Chart data={starDv} width={width} height={height} padding={['10%', '22%']}>
        <Coord type='theta' innerRadius={0.45} />
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', starColor]}>
          <Label content='type' offset={20}/>
        </Geom>
      </Chart>
    )
  }
}

App.js

import React, { Component } from 'react';
import {ScoreChart, StarChart} from './ChartComponent';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <StarChart width={200} height={200}
          situation={20} action={40} task={40} result={20}>
        </StarChart>
        <ScoreChart width={120} height={120}
          score={7}>
        </ScoreChart>
      </div>
    );
  }
}

export default App;

Dependences

yarn add bizcharts yarn add @antv/data-set 

Refers

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clock
https://github.com/alibaba/BizCharts/tree/master/doc/tutorial

sed replace shell variable which include slash ('/')

Test content

cat test-sed.txt
aaa/bbb/ccc/ddd/eee
fff/ggg/ss

replace "ccc/ddd" to "CCC/DDD" via sed

NEW_STRING="CCC/DDD"
sed -i "s:ccc/ddd:${NEW_STRING}:" test-sed.txt

Notes:

1. use ':' as seperate char rather than '/', which is default
2. use "" include the replace command

Await is a reserved word error

Solution:

In order to use await, the function directly enclosing it needs to be async.
example codes:

async tryGetUserName() {   let session = await Auth.currentSession();   ...... } 

async should be there, otherwise you will get the error.

Fix up: Can't Load URL: The domain of this URL isn't included in the app's domains.

Issue

Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

Scenario

1. create a facebook app to get an appid
2. use that appid in website to initialized the facebook javascript SDK
3. use FB.ui to share content to facebook

full source codes

<!-- init facebook js sdk via your appid -->
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'yourappid',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.1'
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<script>
function share() {
    // use FB.ui() to share content to facebook
    FB.ui(
      {
        method: 'share',
        href: 'urlyouwanttoshare',
      },
      // callback
      function(response) {
        if (response && !response.error_message) {
          alert('Posting completed.');
        } else {
          alert('Error while posting.');
        }
      }
    );
}
</script>

<button onclick="share()">share</button>

Solution

1.Go to your app in facebook developers page(Settings->Basic)
2.Scroll down and Click on Add platform, choose Web sites

3.Input your website domain
if you are testing via http://localhost:8080 then input http://localhost:8080
4.Save the changes
Then test again. you will find everything goes well.

Notes

App Domains is not working for web site share to facebook.
That might be used for mobile apps.

connect shadowsocks server on ubuntu via ss-local

#Server config
[Set up your own shadowsocks server](https://errong.win/2018/06/05/setup-shadowsocks-on-ubuntu-16-04/) or found/buy one.
You should have a shadowsocks server with below informations:
* server ip
* server port
* password
* method

#install
~~~
sudo apt-get install software-properties-common -y
sudo add-apt-repository ppa:max-c-lv/shadowsocks-libev -y
sudo apt-get update
sudo apt install shadowsocks-libev
~~~

#configure
match to the server's info.
~~~
sudo vim /etc/shadowsocks-libev/config.json
{
    "server":"xx.xx.xx.xx", // server IP
    "server_port":8911,
    "local_port":1008, // local port
    "password":"jesuslove",
    "timeout":60,
    "method":"chacha20-ietf-poly1305"
}
~~~

#run ss-local
```sudo ss-local -c  /etc/shadowsocks-libev/config.json```

#export socks proxy system wide
~~~
export http_proxy=socks5://127.0.0.1:1008
export https_proxy=socks5://127.0.0.1:1008
~~~

#use proxy extension set for chrome/firefox browser
config your proxy extension in your browser to use socks5 proxy
127.0.0.1:1008