<template>
	<div ref="mainDiv" class="l-layout">
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="center" no-gutters>
						<v-col :cols="2">
							<component
								:is="'SelectBox'"
								ref="SelectBox1"
								:propsValue="selectValue01"
								:itemList="selectValueList01"
								:label="'FAB'"
								@update:propsValue="selectValue01 = $event"
							/>
						</v-col>
						<v-col :cols="2">
							<component
								:is="'SelectBox'"
								ref="SelectBox2"
								:propsValue="selectValue02"
								:itemList="selectValueList02"
								:label="'설비종류'"
								@update:propsValue="selectValue02 = $event"
							/>
						</v-col>
						<v-col :cols="2">
							<component
								:is="'SelectBox'"
								ref="SelectBox3"
								:propsValue="selectValue03"
								:itemList="selectValueList03"
								:label="'설비그룹'"
								@update:propsValue="selectValue03 = $event"
							/>
						</v-col>
						<v-col :cols="2">
							<component
								:is="'SelectBox'"
								ref="SelectBox4"
								:propsValue="selectValue04"
								:itemList="selectValueList04"
								:label="'설비'"
								@update:propsValue="selectValue04 = $event"
							/>
						</v-col>
						<v-col :cols="1">
							<component
								:is="'SelectCmCycle'"
								:parentPrgmId="myPrgmId"
								:labelCols="5"
								:textCols="7"
								:label="'구분'"
							/>
						</v-col>
						<v-col :cols="2">
							<component
								:is="'DatePicker'"
								:label="'대상년월'"
								:parentPrgmId="myPrgmId"
								:isRangeOption="false"
							/>
						</v-col>
						<v-col :cols="1" class="text-right">
							<v-btn :ripple="false" @click="search()">조회</v-btn>
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents" style="height: calc(100vh - 230px)">
			<v-col :cols="12" style="height: 100%;">
				<v-row class="pa-1" style="height:33%; width:100%">
					<v-card class="pa-1" style="height: 100%; width:100%">
						<div style="height: 100%">
							<div style="height:25%">
								<v-card-title
									class="d-flex align-center justify-space-between pa-5"
								>
									<span class="tit ft-size_20 ft-weight_600"
										>주요가이드 지표</span
									>
								</v-card-title>
							</div>
							<div style="height:75%; ">
								<v-row style="height:100%; overflow: auto;">
									<v-col
										:cols="3"
										style="height:100%;"
										v-for="(value, key, index) in contentData01"
										:key="'key1' + index"
									>
										<div
											class="v-box"
											style="height: 100%; padding:3px; margin:2px"
										>
											<v-col :cols="12" style="height:100%">
												<div style="height:20%">
													{{ value['gdIdxNm'] }}
												</div>
												<div style="height:80%">
													<component
														class="w100 h100"
														:is="loadChart ? 'Chart' : null"
														:parentPrgmId="myPrgmId"
														:chartName="'chartGroup01_' + value['gdIdxId']"
														:ref="'chartGroup01_' + value['gdIdxId']"
													/>
												</div>
											</v-col>
										</div>
									</v-col>
								</v-row>
							</div>
						</div>
					</v-card>
				</v-row>
				<v-row class="pa-1" style="height:33%; width:100%">
					<v-card class="pa-1" style="height: 100%; width:100%">
						<div style="height : 25%">
							<v-card-title
								class="d-flex align-center justify-space-between pa-5"
							>
								<span class="tit ft-size_20 ft-weight_600"
									>가이드 알람정보</span
								>
							</v-card-title>
						</div>
						<div ref="gridParent01" style="height : 75%">
							<component
								:ref="gridName01"
								:is="loadGrid01 ? 'Grid' : null"
								:gridName="gridName01"
								:parentPrgmId="myPrgmId"
							/>
						</div>
					</v-card>
				</v-row>
				<v-row class="pa-1" style="height:34%; width:100%">
					<div style="height: 100%; width:100%">
						<v-row style="height: 100%">
							<v-col :cols="5" class="">
								<v-card class="pa-1" style="height: 100%; width:100%">
									<div style="height: 25%">
										<v-card-title
											class="d-flex align-center justify-space-between pa-5"
										>
											<span class="tit ft-size_20 ft-weight_600"
												>설비 상세 정보</span
											>
										</v-card-title>
									</div>
									<div ref="gridParent02" style="height: 75%">
										<component
											:ref="gridName02"
											:is="loadGrid02 ? 'Grid' : null"
											:gridName="gridName02"
											:parentPrgmId="myPrgmId"
											@getRowsData="getRowData02"
										/>
									</div>
								</v-card>
							</v-col>
							<v-col :cols="7" class="">
								<v-card class="pa-1" style="height: 100%; width:100%">
									<div style="height: 25%">
										<v-card-title
											class="d-flex align-center justify-space-between pa-5"
										>
											<span class="tit ft-size_20 ft-weight_600"
												>시간별 TREND 정보</span
											>
										</v-card-title>
									</div>
									<div ref="trendChartParent" style="height: 75%">
										<component
											class="w100 h100"
											:is="loadTrendChart ? 'Chart' : null"
											:parentPrgmId="myPrgmId"
											:chartName="'trendChart'"
										/>
									</div>
								</v-card>
							</v-col>
						</v-row>
					</div>
				</v-row>
			</v-col>
		</v-row>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
import SelectCmCycle from '@/components/common/select/SelectCmCycle';
import DatePicker from '@/components/common/Datepicker';
import Grid from '~/components/common/Grid';
import Chart from '~/components/common/Chart';

let myTitle;
let myPrgmId;
let paramKey;

export default {
	mixins: [mixinGlobal, resize],
	async asyncData(context) {
		const myState = context.store.state;
		myPrgmId = context.route.query.prgmId;
		await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
		myTitle = await myState.activeMenuInfo.menuNm;
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		Utility,
		SelectBox,
		SelectCmCycle,
		DatePicker,
		Grid,
		Chart,
	},
	data() {
		return {
			myPrgmId: myPrgmId,

			initedFlag: false,
			queryParams: null,

			selectValueList01: [],
			selectValueList02: [],
			selectValueList03: [],
			selectValueList04: [],

			selectValue01: null,
			selectValue02: null,
			selectValue03: null,
			selectValue04: null,

			contentData01: {},

			loadGrid01: false,
			loadGrid02: false,
			gridName01: 'grid01',
			gridName02: 'grid02',

			loadTrendChart: false,
		};
	},
	computed: {
		...mapState({
			pageData: state => state.pageData[myPrgmId],
		}),
		fromDt() {
			return this.pageData.fromDt;
		},
	},
	watch: {
		async $route(to, from) {
			if (to.query.prgmId == myPrgmId) {
				if (to.params.key) {
					document.getElementById('refresh').click();
				}
			}
		},
		async selectValue01(value) {
			if (this.initedFlag) {
				// await this.search();
				await this.getSelectValueList04();
			}
		},
		async selectValue02(value) {
			if (this.initedFlag) {
				await this.getSelectValueList03();
			}
		},
		async selectValue03(value) {
			if (this.initedFlag) {
				await this.getSelectValueList04();
			}
		},
		async selectValue04(value) {
			if (this.initedFlag) {
				await this.search();
			}
		},
		async fromDt(value) {
			if (this.initedFlag) {
				await this.search();
			}
		},
	},
	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	created() {},
	mounted() {
		this.init();
	},
	beforeDestroy() {
		this.initedFlag = false;
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapMutations({
			setChartOption: 'setChartOption',
		}),
		async init() {
			await this.getSelectValueList();
			await this.setQueryParams();
			await this.search();

			this.initedFlag = true;
		},
		async setQueryParams() {
			this.queryParams = null;

			if (paramKey == this.$route.params.key) {
				return;
			}
			if (this.$route.params.key) {
				paramKey = this.$route.params.key;
				this.queryParams = this.$route.params;
			}

			if (this.queryParams && typeof this.queryParams == 'object') {
				this.setPageData({
					dateInitedFlag: true,
				});
				this.selectValue01 = this.queryParams['fabId'];
				this.selectValue02 = this.queryParams['eqpmKindId'];
				await this.getSelectValueList03();
				this.selectValue03 = this.queryParams['eqpmGrpId'];
				await this.getSelectValueList04();
				this.selectValue04 = this.queryParams['eqpmId'];

				this.setPageData({
					fromDt: this.queryParams['fromDt'],
					cmCycle: this.queryParams['cmCycle'],
				});
			}
		},
		async getSelectValueList() {
			await this.getSelectValueList01();
			await this.getSelectValueList02();
			await this.getSelectValueList03();
			await this.getSelectValueList04();
		},
		async getSelectValueList01() {
			let res = await this.postApiReturn({
				apiKey: 'selectFabCodeList',
				resKey: 'fabCodeLists',
				sendParam: {},
			});
			if (res.length > 0) {
				this.selectValueList01 = await res.map(item => {
					return {
						text: item.eccNm,
						value: item.eccId,
					};
				});
				this.selectValue01 = this.selectValueList01[0].value;
			} else {
				this.selectValueList01 = [];
				this.selectValue01 = null;
			}
		},
		async getSelectValueList02() {
			var res = await this.postApiReturn({
				apiKey: 'selectEmsEqpmKindList',
				resKey: 'eqpmGrpPysclQtyMngData',
				sendParam: {},
			});

			if (res.length > 0) {
				this.selectValueList02 = await res.map(item => {
					return {
						text: item.eqpmKindNm,
						value: item.eqpmKindId,
						data: {
							...item,
						},
					};
				});
				this.selectValue02 = this.selectValueList02[0].value;
			} else {
				this.selectValueList02 = [];
				this.selectValue02 = null;
			}
		},
		async getSelectValueList03() {
			var res = await this.postApiReturn({
				apiKey: 'selectEmsEqpmGrpList',
				resKey: 'eqpmGrpPysclQtyMngData',
				sendParam: {
					eqpmKindId: this.selectValue02,
				},
			});

			if (res.length > 0) {
				this.selectValueList03 = await res.map(item => {
					return {
						text: item.eqpmGrpNm,
						value: item.eqpmGrpId,
						data: {
							...item,
						},
					};
				});
				this.selectValue03 = this.selectValueList03[0].value;
			} else {
				this.selectValueList03 = [];
				this.selectValue03 = null;
			}
		},
		async getSelectValueList04() {
			var res = await this.postApiReturn({
				apiKey: 'selectFabEqpmList',
				resKey: 'enrgUseEqpmDetlMntrData',
				sendParam: {
					fabId: this.selectValue01,
					eqpmGrpId: this.selectValue03,
				},
			});

			if (res.length > 0) {
				this.selectValueList04 = await res.map(item => {
					return {
						text: item.eqpmNm,
						value: item.eqpmId,
						data: {
							...item,
						},
					};
				});
				this.selectValue04 = this.selectValueList04[0].value;
			} else {
				this.selectValueList04 = [];
				this.selectValue04 = null;
			}
		},
		async search() {
			// console.log('search ...');
			// console.log('selectValue01 : ', this.selectValue01);
			// console.log('selectValue02 : ', this.selectValue02);
			// console.log('selectValue03 : ', this.selectValue03);
			// console.log('selectValue04 : ', this.selectValue04);
			// console.log('cmCycle : ', this.pageData.cmCycle);
			// console.log('fromDt : ', this.fromDt);

			await this.setContentData();

			this.setPageData({
				dateInitedFlag: false,
			});
		},
		async setContentData() {
			await this.setContentData01();
			await this.setContentData02();
			await this.setContentData03();
			// await this.setContentData04();
		},
		async setContentData01() {
			var apiKey = null;
			var res = null;

			this.contentData01 = {};

			if (this.pageData.cmCycle == 'CYC_DAY') {
				apiKey = 'selectDailyEnrgUseMainGuideIdx';
			} else if (this.pageData.cmCycle == 'CYC_MONTH') {
				apiKey = 'selectMonthlyEnrgUseMainGuideIdx';
			}

			res = await this.postApiReturn({
				apiKey: apiKey,
				resKey: 'enrgUseEqpmDetlMntrData',
				sendParam: {
					eqpmGrpId: this.selectValue03,
					eqpmId: this.selectValue04,
					fromDt: this.fromDt,
				},
			});

			this.contentData01 = await this.makeContentData01(res);
			this.setChartGroup01(this.contentData01);
		},
		async setContentData02() {
			const _this = this;
			const myOptions = {
				columnOptions: {
					resizable: true,
				},
			};
			const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
			var columnList = [
				{ header: 'NO', name: 'no', width: 40, align: 'center' },
				{ header: 'gdIdxId', name: 'gdIdxId', hidden: true },
				{ header: 'totDttm', name: 'totDttm', hidden: true },
				{ header: '발생일', name: 'totDt', width: 150, align: 'center' },
				{ header: '발생시간대', name: 'totTm', width: 100, align: 'center' },
				{ header: '가이드지표명', name: 'gdIdxNm', width: 200 },
				{ header: '가이드값', name: 'totVal', hidden: true },
				{ header: '주의값', name: 'caseStndVal', hidden: true },
				{ header: '경고값', name: 'warnStndVal', hidden: true },
				{ header: '알람종류', name: 'alrmKind', hidden: true },
				{ header: '알람내용', name: 'alrmMsg' },
			];
			var res = [];
			var newRes = [];

			this.loadGrid01 = false;

			res = await this.postApiReturn({
				apiKey: 'selectEnrgUseGuideAlarmInfo',
				resKey: 'enrgUseEqpmDetlMntrData',
				sendParam: {
					cmCycle: this.pageData.cmCycle,
					eqpmId: this.selectValue04,
					fromDt: this.fromDt,
					alrmKind: ['WARN', 'CARE'],
				},
			});

			for (var i = 0; i < res.length; i++) {
				newRes.push({
					...res[i],
					no: i + 1,
				});
			}

			this.setGridOption({
				gridKey: this.gridName01,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridName01,
				value: columnList,
			});
			this.setGridData({
				gridKey: this.gridName01,
				value: newRes,
			});

			this.loadGrid01 = true;
		},
		async setContentData03() {
			const _this = this;
			const myOptions = {
				columnOptions: {
					resizable: true,
				},
			};
			const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
			var columnList = [
				{ header: 'NO', name: 'no', align: 'center', width: 40 },
				{ header: '물리량ID', name: 'pysclQtyId', width: 100, align: 'center' },
				{ header: '물리량코드', name: 'pysclQtyCd' },
				{ header: '물리량명', name: 'pysclQtyNm', width: 190 },
				{ header: '물리량타입', name: 'pysclQtyTp', width: 100 },
			];
			var res = [];
			var newRes = [];

			this.loadGrid02 = false;

			res = await this.postApiReturn({
				apiKey: 'selectEnrgUseEqpmDescInfo',
				resKey: 'enrgUseEqpmDetlMntrData',
				sendParam: {
					eqpmGrpId: this.selectValue03,
				},
			});

			for (var i = 0; i < res.length; i++) {
				newRes.push({
					...res[i],
					no: i + 1,
				});
			}

			this.setGridOption({
				gridKey: this.gridName02,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridName02,
				value: columnList,
			});
			this.setGridData({
				gridKey: this.gridName02,
				value: newRes,
			});

			this.loadGrid02 = true;

			await this.$nextTick();
			this.$refs[this.gridName02].focus({
				rowKey: 0,
				columnName: 'no',
				setScroll: true,
			});
		},
		async setContentData04(selectedData) {
			var res = null;
			var _this = this;
			var xAxisData = null;
			var seriesData = null;
			var sliderHandleSize = 100;

			this.loadTrendChart = false;

			xAxisData = this.makeTrendChartXaxisData();

			if (this.pageData.cmCycle == 'CYC_MONTH') {
				sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
			}

			res = await this.postApiReturn({
				apiKey: 'selectEnrgUseHourlyTrendInfo',
				resKey: 'enrgUseEqpmDetlMntrData',
				sendParam: {
					pysclQtyId: selectedData.pysclQtyId,
					eqpmId: this.selectValue04,
					fromDt: this.fromDt,
					cmCycle: this.pageData.cmCycle,
				},
			});

			seriesData = new Array(xAxisData.length).fill(NaN);

			for (var i = 0; i < res.length; i++) {
				if (this.pageData.cmCycle == 'CYC_MONTH') {
					seriesData[res[i]['monthCnt']] = res[i]['totVal'];
				} else if (this.pageData.cmCycle == 'CYC_DAY') {
					seriesData[res[i]['dayCnt']] = res[i]['totVal'];
				}
			}

			var chartOption = {
				grid: {
					top: '3%',
					bottom: '25%',
				},
				tooltip: {
					axisPointer: {
						label: {
							formatter: function(value) {
								value = value.value;
								return (
									value.substring(5, 7) +
									'월 ' +
									value.substring(8, 10) +
									'일 ' +
									value.substring(11, 13) +
									'시'
								);
							},
						},
					},
				},
				xAxis: {
					data: xAxisData,
					axisLabel: {
						formatter: function(value) {
							return value.substring(11, 13) + '시';
						},
					},
					axisTick: {
						interval: 23,
					},
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						type: 'line',
						data: seriesData,
					},
				],
				dataZoom: [
					{
						type: 'slider',
						// zoomLock: true,
						zoomLock: false,
						brushSelect: false,
						start: 0, // 0-100 %
						end: sliderHandleSize, // 0-100 %
					},
					{
						type: 'inside',
						zoomOnMouseWheel: false,
						moveOnMouseMove: false,
						moveOnMouseWheel: true,
					},
				],
			};

			this.setChartOption({ chartKey: 'trendChart', value: chartOption });
			this.loadTrendChart = true;
		},
		async getRowData02(selectedData) {
			await this.setContentData04(selectedData);
		},
		async makeContentData01(data) {
			var result = {};

			for (var i = 0; i < data.length; i++) {
				if (!result.hasOwnProperty(data[i]['gdIdxId'])) {
					result[data[i]['gdIdxId']] = {
						gdIdxId: data[i]['gdIdxId'],
						gdIdxNm: data[i]['gdIdxNm'],
						data: [],
					};

					result[data[i]['gdIdxId']]['data'].push({
						...data[i],
					});
				} else {
					result[data[i]['gdIdxId']]['data'].push({
						...data[i],
					});
				}
			}

			var idxData = await this.postApiReturn({
				apiKey: 'selectEnrgUseMainIdxDesc',
				resKey: 'eqpmIndMntrData',
				sendParam: {
					eqpmGrpId: this.selectValue03,
				},
			});

			for (var i = 0; i < idxData.length; i++) {
				if (!result.hasOwnProperty(idxData[i]['gdIdxId'])) {
					result[idxData[i]['gdIdxId']] = {
						gdIdxId: idxData[i]['gdIdxId'],
						gdIdxNm: idxData[i]['gdIdxNm'],
						data: [],
					};
				}
			}

			return result;
		},
		async setChartGroup01(data) {
			this.loadChart = false;
			await this.$nextTick();
			this.initChartGroup01(data);
			this.setChartGroup01Data(data);
			this.loadChart = true;
		},
		initChartGroup01(data) {
			var dataKeyList = Object.keys(data);
			var currentChartData = null;
			var chartKey = null;

			for (var i = 0; i < dataKeyList.length; i++) {
				currentChartData = data[dataKeyList[i]];
				chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];

				this.setPageData({
					[chartKey]: this.getGroup01ChartOption(),
				});
			}
		},
		setChartGroup01Data(data) {
			var dataKeyList = Object.keys(data);
			var currentChartData = null;
			var chartKey = null;
			var xAxisData = null;
			var seriesData = null;

			xAxisData = this.makeChartGroup01XaxisData();

			for (var i = 0; i < dataKeyList.length; i++) {
				seriesData = new Array(xAxisData.length).fill(NaN);

				currentChartData = data[dataKeyList[i]];
				chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];

				for (var j = 0; j < currentChartData['data'].length; j++) {
					seriesData[currentChartData['data'][j]['dataNum']] =
						currentChartData['data'][j]['totVal'];
				}

				this.$store.state.pageData[myPrgmId][chartKey]['xAxis'][
					'data'
				] = xAxisData;
				this.$store.state.pageData[myPrgmId][chartKey]['series'][0][
					'data'
				] = seriesData;
			}
		},
		getGroup01ChartOption() {
			var chartOption = Utility.defaultChartOption(true);

			chartOption['series'][0]['type'] = 'line';
			chartOption['grid']['bottom'] = '3%';

			// console.log('chartOption : ', chartOption);

			return chartOption;
		},
		makeChartGroup01XaxisData() {
			var result = [];
			var paramsDt = this.fromDt;

			if (this.pageData.cmCycle == 'CYC_MONTH') {
				var tempDate = new Date(
					paramsDt.substring(0, 4) +
						'-' +
						paramsDt.substring(4, 6) +
						'-01 00:00',
				);
				var lastDayOfMonth = getLastDayOfMonth(tempDate);

				for (var i = 1; i <= lastDayOfMonth; i++) {
					result.push(i);
				}
			} else if (this.pageData.cmCycle == 'CYC_DAY') {
				for (var i = 0; i < 24; i++) {
					result.push(i);
				}
			}

			return result;
		},
		makeTrendChartXaxisData() {
			var result = [];
			var paramsDt = this.fromDt;
			var timezoneOffset = new Date().getTimezoneOffset() * 60000;

			if (this.pageData.cmCycle == 'CYC_MONTH') {
				var tempDate = new Date(
					paramsDt.substring(0, 4) +
						'-' +
						paramsDt.substring(4, 6) +
						'-01 00:00',
				);
				var lastDayOfMonth = getLastDayOfMonth(tempDate);

				tempDate = new Date(tempDate - timezoneOffset);
				result.push(tempDate.toISOString());

				for (var i = 0; i < 24 * lastDayOfMonth - 1; i++) {
					tempDate = addHours(1, tempDate);
					result.push(tempDate.toISOString());
				}
			} else if (this.pageData.cmCycle == 'CYC_DAY') {
				var tempDate = new Date(
					paramsDt.substring(0, 4) +
						'-' +
						paramsDt.substring(4, 6) +
						'-' +
						paramsDt.substring(6, 8) +
						' 00:00',
				);

				tempDate = new Date(tempDate - timezoneOffset);
				result.push(tempDate.toISOString());

				for (var i = 0; i < 23; i++) {
					tempDate = addHours(1, tempDate);
					result.push(tempDate.toISOString());
				}
			}

			return result;
		},
	},
};

function addHours(h, date) {
	date.setTime(date.getTime() + h * 60 * 60 * 1000);

	return date;
}

function getLastDayOfMonth(date) {
	return new Date(
		new Date(date.getFullYear(), date.getMonth() + 1, 1) - 1,
	).getDate();
}

const defaultData = {
	dateInitedFlag: false,
	cmCycle: 'CYC_MONTH',
	cmCycleList: [
		{ idx: 0, text: '월', value: 'CYC_MONTH' },
		{ idx: 1, text: '일', value: 'CYC_DAY' },
	],
	defaultRange: {
		CYC_MONTH: 1,
		CYC_DAY: 1,
	},
	fromDt: Utility.setFormatDate(new Date(), 'YYYYMM'), // 조회 시작일

	grid01: {
		data: [],
		column: [],
		option: {},
	},

	grid02: {
		data: [],
		column: [],
		option: {},
	},

	trendChart: Utility.defaultChartOption(true),
};
</script>
