| import * as $ from 'jquery'; |
| import Handsontable from 'handsontable'; |
| import * as echarts from 'echarts'; |
| |
| const headerLength = 2; |
| |
| let chart: echarts.ECharts; |
| const data = [ |
| ["Name", "Ford", "Tesla", "Toyota", "Honda"], |
| ["Color", "", "", "", ""], |
| ["2017", 10, 11, 12, 13], |
| ["2018", 20, 11, 14, 13], |
| ["2019", 30, 15, 12, 13] |
| ]; |
| |
| function initTable() { |
| for (let i = 0; i < data.length; ++i) { |
| for (let j = data[i].length; j < 50; ++j) { |
| data[i].push(''); |
| } |
| } |
| for (let i = data.length; i < 100; ++i) { |
| const row = []; |
| for (let j = 0; j < 50; ++j) { |
| row.push(''); |
| } |
| data.push(row); |
| } |
| |
| // function colorRenderer(instance, td, row, col) { |
| // //- console.log(instance); |
| |
| // } |
| |
| const container = document.getElementById('table-panel') as Element; |
| console.log(container) |
| |
| const table = new Handsontable(container, { |
| data: data, |
| rowHeaders: true, |
| colHeaders: true, |
| filters: true, |
| dropdownMenu: true, |
| // cell: [{ |
| // row: 0, |
| // col: 0, |
| // readOnly: true |
| // }, { |
| // row: 1, |
| // col: 0, |
| // readOnly: true |
| // }], |
| //- cells: function (row, col) { |
| //- if (row === 1) { |
| //- return { |
| //- renderer: colorRenderer |
| //- } |
| //- } |
| //- else { |
| //- return {}; |
| //- } |
| //- } |
| }); |
| table.updateSettings({ |
| afterChange: function () { |
| run(); |
| } |
| }); |
| |
| chart = echarts.init($('#bar-race-preview')[0]); |
| run(); |
| } |
| |
| const timeoutHandlers: number[] = []; |
| |
| function clearTimeoutHandlers() { |
| for (let i = 0; i < timeoutHandlers.length; ++i) { |
| clearTimeout(timeoutHandlers[i]); |
| timeoutHandlers.splice(i, 1); |
| } |
| } |
| function removeTimeoutHandlers(handler: number) { |
| for (let i = 0; i < timeoutHandlers.length; ++i) { |
| if (timeoutHandlers[i] === handler) { |
| timeoutHandlers.splice(i, 1); |
| } |
| } |
| } |
| |
| function initEvents() { |
| $('.form-group').change(function () { |
| run(); |
| }); |
| } |
| |
| |
| function run() { |
| clearTimeoutHandlers(); |
| |
| const title = $('#input-title').val(); |
| const max = $('#input-max').val(); |
| chart.setOption({ |
| title: [{ |
| text: getDataName(0), |
| textStyle: { |
| fontFamily: 'monospace', |
| fontSize: 80, |
| color: 'rgba(100, 100, 100, 0.2)' |
| }, |
| bottom: 60, |
| right: 20 |
| }, { |
| text: title |
| }], |
| grid: { |
| right: 20 |
| }, |
| yAxis: { |
| type: 'category', |
| data: getYData(), |
| inverse: true, |
| max: max, |
| animationDuration: 0, |
| animationDurationUpdate: 0 |
| }, |
| xAxis: {}, |
| series: [{ |
| type: 'bar', |
| data: getChartData(0), |
| realtimeSort: true, |
| colorBy: 'item', |
| label: { |
| show: true, |
| position: 'insideRight' |
| } |
| }], |
| animationDurationUpdate: 5000, |
| animationEasing: 'linear', |
| animationEasingUpdate: 'linear' |
| }, true); |
| |
| const rows = trimRows(); |
| for (let i = 1; i < rows.length; ++i) { |
| (function (i) { |
| var dataRow = getChartData(i); |
| let timeout: number; |
| const timeoutCb = function () { |
| chart.setOption({ |
| title: [{ |
| text: getDataName(i) |
| }], |
| yAxis: { |
| animationDuration: 300, |
| animationDurationUpdate: 300, |
| }, |
| series: [{ |
| type: 'bar', |
| data: dataRow |
| }] |
| }); |
| removeTimeoutHandlers(timeout); |
| }; |
| timeout = window.setTimeout(timeoutCb, (i - 1) * 5000); |
| timeoutHandlers.push(timeout); |
| })(i); |
| } |
| } |
| |
| const trimColumns = function (rowData: (string | number)[]) { |
| for (let i = rowData.length - 1; i > 0; --i) { |
| if (rowData[i] && rowData[i] !== '') { |
| return rowData.slice(1, i + 1); |
| } |
| } |
| return []; |
| }; |
| |
| const trimRows = function () { |
| if (data.length <= headerLength) { |
| return []; |
| } |
| for (let i = data.length - 1; i >= headerLength; --i) { |
| let isEmpty = true; |
| for (let j = 1; j < data[i].length; ++j) { |
| if (data[i][j] && data[i][j] !== '') { |
| isEmpty = false; |
| break; |
| } |
| } |
| if (!isEmpty) { |
| return data.slice(headerLength, i + 1); |
| } |
| } |
| return []; |
| }; |
| |
| const getYData = function () { |
| if (data.length <= headerLength) { |
| return []; |
| } |
| return trimColumns(data[0]); |
| }; |
| |
| const getChartData = function (id: number) { |
| if (data.length <= id + headerLength) { |
| return []; |
| } |
| return trimColumns(data[id + headerLength]); |
| }; |
| |
| const getDataName = function (id: number) { |
| if (data.length <= id + headerLength) { |
| return ''; |
| } |
| else { |
| return data[id + headerLength][0]; |
| } |
| } |
| |
| function download() { |
| // saveFile() |
| } |
| |
| function saveFile(name: string, type: string) { |
| // if (isSafari()) { |
| // window.open('data:text/plain;charset=utf-8,' + encodeURIComponent(data)); |
| // } else { |
| // try { |
| // var file = new Blob([data], {type: type}); |
| // saveAs(file, name); |
| // } catch(e) { |
| // console.error(e); |
| // window.open('data:text/plain;charset=utf-8,' + encodeURIComponent(data)); |
| // } |
| // } |
| } |
| |
| function isSafari() { |
| return navigator.userAgent.indexOf('Safari') > 0 && |
| navigator.userAgent.indexOf('Chrome') < 0; |
| } |
| |
| export default {initTable}; |