zhoukekestar/injectcode.js

## injectcode.js
const injectCSS = () => {
  var style = document.createElement('style');
  style.innerHTML = `
  table.public_table.table_column td > button {
      position: absolute;
      left: 0;
      background: rgba(0, 0, 0, 0.99);
      border: none;
      color: #fff;
      font-size: 12px;
      opacity: .1;
      border-radius: 3px;
      cursor: pointer;
  }
  table.public_table.table_column td > button:hover {
      opacity: 1;
  }
  .chart-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    z-index: 999;
    padding: 60px 40px;
    box-sizing: border-box;
    display: none;
  }
  .chart-dialog.open {
    display: block;
  }
  `;
  document.body.appendChild(style);
}

const injectComponent = () => {
    // import chart-js
  const link = document.createElement('link');
  link.rel = 'import';
  link.href = 'https://zhoukekestar.github.io/webcomponents/components/chart-js/chart-js.v2.html';
  document.body.appendChild(link);
}

if (location.host == 'data.stats.gov.cn') {

  injectCSS();

  injectComponent();

  // dialog & chartjs refs
  const chartDialog = document.createElement('div');
  chartDialog.classList.add('chart-dialog');
  chartDialog.onclick = function() {
    this.classList.remove('open');
  }
  document.body.appendChild(chartDialog);


  const showChart = (e) => {
    chartDialog.classList.add('open');
    chartDialog.innerHTML = `<chart-js></chart-js>`;
    const chartjs = chartDialog.querySelector('chart-js');

    console.log(e);
    const tr = e.target.closest('tr');
    const table = e.target.closest('table');
    const labels = Array.from(table.querySelectorAll('thead th + th')).map(th => th.textContent);
    const data = Array.from(tr.querySelectorAll('td + td')).map(td => +td.innerHTML);
    chartjs.singleLine(data.map((td, index) => {
      return {
        name: labels[index],
        value: td,
      }
    }).reverse());

  }

  const init = () => {
    const mainTable = document.querySelector('table.public_table.table_column');
    Array.from(mainTable.querySelectorAll('tbody tr')).map(tr => {
      const td = tr.querySelector('td:first-child');
      if (!td.querySelector('button')) {
        const btn = document.createElement('button');
        btn.innerHTML = '显示数据';
        btn.onclick = showChart;
        td.appendChild(btn);
      }
    });
  }

  setInterval(() => {
    init();
  }, 1000);
}
	const injectCSS = () => {
	var style = document.createElement('style');
	style.innerHTML = `
	table.public_table.table_column td > button {
	position: absolute;
	left: 0;
	background: rgba(0, 0, 0, 0.99);
	border: none;
	color: #fff;
	font-size: 12px;
	opacity: .1;
	border-radius: 3px;
	cursor: pointer;
	}
	table.public_table.table_column td > button:hover {
	opacity: 1;
	}
	.chart-dialog {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.92);
	z-index: 999;
	padding: 60px 40px;
	box-sizing: border-box;
	display: none;
	}
	.chart-dialog.open {
	display: block;
	}
	`;
	document.body.appendChild(style);
	}

	const injectComponent = () => {
	// import chart-js
	const link = document.createElement('link');
	link.rel = 'import';
	link.href = 'https://zhoukekestar.github.io/webcomponents/components/chart-js/chart-js.v2.html';
	document.body.appendChild(link);
	}

	if (location.host == 'data.stats.gov.cn') {

	injectCSS();

	injectComponent();

	// dialog & chartjs refs
	const chartDialog = document.createElement('div');
	chartDialog.classList.add('chart-dialog');
	chartDialog.onclick = function() {
	this.classList.remove('open');
	}
	document.body.appendChild(chartDialog);


	const showChart = (e) => {
	chartDialog.classList.add('open');
	chartDialog.innerHTML = `<chart-js></chart-js>`;
	const chartjs = chartDialog.querySelector('chart-js');

	console.log(e);
	const tr = e.target.closest('tr');
	const table = e.target.closest('table');
	const labels = Array.from(table.querySelectorAll('thead th + th')).map(th => th.textContent);
	const data = Array.from(tr.querySelectorAll('td + td')).map(td => +td.innerHTML);
	chartjs.singleLine(data.map((td, index) => {
	return {
	name: labels[index],
	value: td,
	}
	}).reverse());

	}

	const init = () => {
	const mainTable = document.querySelector('table.public_table.table_column');
	Array.from(mainTable.querySelectorAll('tbody tr')).map(tr => {
	const td = tr.querySelector('td:first-child');
	if (!td.querySelector('button')) {
	const btn = document.createElement('button');
	btn.innerHTML = '显示数据';
	btn.onclick = showChart;
	td.appendChild(btn);
	}
	});
	}

	setInterval(() => {
	init();
	}, 1000);
	}