import { seriesLoadScripts, loadLinks, $$ } from '../../utils/util'
import { generateRandomKey, replaceHtml } from '../../utils/chartUtil'
import { getdatabyselection, getcellvalue } from '../../global/getdata';
import chartInfo from '../../store'
import formula from '../../global/formula';
import { luckysheet_getcelldata } from '../../function/func';
import { getSheetIndex, getRangetxt } from '../../methods/get'
import { rowLocation, colLocation, mouseposition } from '../../global/location'
import {
luckysheetMoveHighlightCell,
luckysheetMoveHighlightCell2,
luckysheetMoveHighlightRange,
luckysheetMoveHighlightRange2,
luckysheetMoveEndCell
} from '../../controllers/sheetMove';
import { isEditMode } from '../../global/validate';
import luckysheetsizeauto from '../../controllers/resize';
import { getvisibledatarow, getvisibledatacolumn, setluckysheet_scroll_status } from '../../methods/get'
let _rowLocation = rowLocation
let _colLocation = colLocation
// Dynamically load dependent scripts and styles
const dependScripts = [
'https://cdn.jsdelivr.net/npm/vue@2.6.11',
'https://unpkg.com/vuex@3.4.0',
'https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js',
'https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js',
'expendPlugins/chart/chartmix.umd.js'
// 'http://192.168.10.246:8000/chartmix.umd.js'
]
const dependLinks = [
'https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css',
'expendPlugins/chart/chartmix.css'
// 'http://192.168.10.246:8000/chartmix.css'
]
// Initialize the chart component
function chart(data) {
loadLinks(dependLinks);
seriesLoadScripts(dependScripts, null, function () {
const store = new Vuex.Store()
console.info('chartmix::', chartmix.default)
Vue.use(chartmix.default, { store })
let outDom = document.getElementById('luckysheet_info_detail')
chartmix.default.initChart(outDom, chartInfo.lang)
$('.chartSetting').css({
position: 'absolute',
right: 0,
width: '300px',
display: 'none',
background: '#fff',
paddingLeft: '10px',
border: '1px solid #ccc',
height: 'auto',
zIndex: 99999999
})
chartInfo.createChart = chartmix.default.createChart
chartInfo.highlightChart = chartmix.default.highlightChart
chartInfo.deleteChart = chartmix.default.deleteChart
chartInfo.resizeChart = chartmix.default.resizeChart
chartInfo.changeChartRange = chartmix.default.changeChartRange
chartInfo.changeChartCellData = chartmix.default.changeChartCellData
chartInfo.chart_selection = chart_selection()
chartInfo.chartparam.jfrefreshchartall = jfrefreshchartall
chartInfo.chartparam.changeChartCellData = chartmix.default.changeChartCellData
chartInfo.chartparam.renderChart = chartmix.default.renderChart
// 初始化渲染图表
for (let i = 0; i < data.length; i++) {
if (data[i].status == '1') {
renderCharts(data[i].chart)
}
}
});
}
// rendercharts
function renderCharts(chartLists) {
for (let i = 0; i < chartLists.length; i++) {
let chart = chartLists[i]
let chart_id_c = chart.chart_id + '_c'
let modelChartShowHTML =
''
let $t = $(
replaceHtml(modelChartShowHTML, {
id: chart_id_c,
addclass: 'luckysheet-data-visualization-chart',
title: '图表生成',
content: ''
})
).appendTo($('.luckysheet-cell-main'))
let container = document.getElementById(chart_id_c)
let { render, chart_json } = chartInfo.createChart($(`#${chart_id_c}`).children('.luckysheet-modal-dialog-content')[0], chartData, chart_id, rangeArray, rangeTxt)
chartInfo.currentChart = chart_json.chartOptions
console.dir(JSON.stringify(chart_json))
width = chart.width
height = chart.height
left = chart.left
top = chart.top
container.style.width = width + 'px'
container.style.height = height + 'px'
container.style.position = 'absolute'
container.style.background = '#fff'
container.style.left = left + 'px'
container.style.top = top + 'px'
render.style.width = '100%'
render.style.height = '100%'
container.style.zIndex = chartInfo.zIndex ? chartInfo.zIndex : 15
chartInfo.zIndex++
}
}
function jfrefreshchartall(flowdata1, r_st, r_ed, c_st, c_ed) {
let chart = chartInfo.currentChart
if (!chart) {
return
}
if (chart.rangeArray.length == 1) {
var row = chart.rangeArray[0].row;
var column = chart.rangeArray[0].column;
//不在范围内的不更新
if (
r_st > row[1] ||
r_ed < row[0] ||
c_st > column[1] ||
c_ed < column[0]
) {
return
}
//根据原有的范围取得数据
var luckysheetgetcellrange = formula.getcellrange(
chart.rangeTxt
);
var sheetIndex =
luckysheetgetcellrange.sheetIndex == -1
? 0
: luckysheetgetcellrange.sheetIndex; //sheetIndex为-1时，转化为0
var selection = {
row: luckysheetgetcellrange.row,
column: luckysheetgetcellrange.column,
dataSheetIndex: sheetIndex
}; //数组
var getcelldata = luckysheet_getcelldata(chart.rangeTxt);
if (
typeof getcelldata === "object" &&
getcelldata.length != 0 &&
getcelldata.data.length != null
) {
//getcelldata有值，且不为空数组 && getcelldata.data为二维数组
var chartData = getcelldata.data;
chartInfo.chartparam.changeChartCellData(chart.chart_id, chartData);
}
}
}
function chart_selection() {
return {
create: function () {
var chart_json = chartInfo.currentChart
if (chart_json.rangeArray.length > 1) {
return
}
$('#luckysheet-chart-rangeShow').empty()
$('#luckysheet-cell-selected-boxs').hide()
$('#luckysheet-cell-selected-focus').hide()
$('#luckysheet-rows-h-selected').hide()
$('#luckysheet-cols-h-selected').hide()
$('#luckysheet-row-count-show').hide()
$('#luckysheet-column-count-show').hide()
var st_r = chart_json.rangeArray[0].row[0]
var st_c = chart_json.rangeArray[0].column[0]
var rangeSplitArray = chart_json.rangeSplitArray
//首行是否标题
var rangeRowCheck = chart_json.rangeRowCheck
if (rangeRowCheck.exits) {
var chart_rowtitle_html = getRangeShowHtml(
'rowtitle',
rangeSplitArray.rowtitle.row[0] + st_r,
rangeSplitArray.rowtitle.row[1] + st_r,
rangeSplitArray.rowtitle.column[0] + st_c,
rangeSplitArray.rowtitle.column[1] + st_c
)
} else {
var chart_rowtitle_html = ''
}
//首列是否标题
var rangeColCheck = chart_json.rangeColCheck
if (rangeColCheck.exits) {
var chart_coltitle_html = getRangeShowHtml(
'coltitle',
rangeSplitArray.coltitle.row[0] + st_r,
rangeSplitArray.coltitle.row[1] + st_r,
rangeSplitArray.coltitle.column[0] + st_c,
rangeSplitArray.coltitle.column[1] + st_c
)
} else {
var chart_coltitle_html = ''
}
//内容块
var chart_content_html = getRangeShowHtml(
'content',
rangeSplitArray.content.row[0] + st_r,
rangeSplitArray.content.row[1] + st_r,
rangeSplitArray.content.column[0] + st_c,
rangeSplitArray.content.column[1] + st_c
)
$('#luckysheet-chart-rangeShow').append(
chart_rowtitle_html + chart_coltitle_html + chart_content_html
)
function getRangeShowHtml(type, r1, r2, c1, c2) {
var visibledatarow = getvisibledatarow()
var visibledatacolumn = getvisibledatacolumn()
var row = visibledatarow[r2],
row_pre = r1 - 1 == -1 ? 0 : visibledatarow[r1 - 1]
var col = visibledatacolumn[c2],
col_pre = c1 - 1 == -1 ? 0 : visibledatacolumn[c1 - 1]
if (type == 'rowtitle') {
var color = '#C65151'
}
if (type == 'coltitle') {
var color = '#9667C0'
}
if (type == 'content') {
var color = '#4970D1'
}
var html =
'' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'