Hover Style: SpreadJS supports the following hover style customizations:
the color and transparency
Border: color, transparency, width, dash style
Symbol: color, transparency
Symbol Border: color, transparency, width, dash style
You can customize the hover style using the following code:
Hover Animation: Hover animation can help to improve the user experience when interacting with the chart. You can use the useAnimation() API to set whether or not to apply animation to the chart.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
function _getBoolean(e) {
return e.target.checked;
}
function _getFloat(e) {
return parseFloat(e.target.value);
}
function _getValue(e) {
return parseInt(e.target.value);
}
function _getText(e) {
return e.target.value;
}
let spread = null;
export function AppFunc() {
const [hoverInfo, setHoverInfo] = React.useState({
useAnimation: true,
color: "#FF0000",
transparency: 0.7,
borderColor: "#00FF00",
borderWidth: 1,
borderTransparency: 1,
borderDashStyle: "0",
symbolColor: "orange",
symbolTransparency: 0.7,
symbolBorderColor: "rgb(255,0,255)",
symbolBorderWidth: 1,
symbolBorderTransparency: 0.7,
symbolBorderDashStyle: "0"
});
const initSpread = (currSpread) => {
spread = currSpread;
spread.setSheetCount(2);
let sheet = spread.getSheet(0);
sheet.suspendPaint();
let dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158],
["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192],
["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
let chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 494, 0, 480, 270, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns);
chart.title({ text: "HoverStyle with markers" });
let seriesItem = chart.series().get(0);
seriesItem.symbol.size = 20;
chart.series().set(0, seriesItem);
let hoverStyle = {
color: "orange",
transparency: 0.1,
borderStyle: {
transparency: 0.1,
color: '#FF0000',
width: 3,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
},
symbolStyle: {
color: "yellow",
transparency: 0.1,
borderStyle: {
transparency: 0.1,
color: 'rgb(0, 0, 255)',
width: 9,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
}
}
};
chart.hoverStyle(hoverStyle);
let chart2 = sheet.charts.add('Chart2', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 494, 275, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns);
chart2.title({ text: "Default HoverStyle" });
let chart3 = sheet.charts.add('Chart3', GC.Spread.Sheets.Charts.ChartType.pie, 494, 270, 480, 270, 'A1:H2');
chart3.title({ text: "HoverStyle with Animation" });
chart3.useAnimation(true);
let hoverStyle3 = {
color: "orange",
transparency: 0.6,
borderStyle: {
transparency: 0.1,
color: '#FF0000',
width: 9,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
}
};
chart3.hoverStyle(hoverStyle3);
initEvent(spread);
readSetting(chart);
sheet.resumePaint();
};
const initEvent = () => {
spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function () {
let sheet = spread.getActiveSheet();
let chart = getActiveChart(sheet);
if (chart) {
readSetting(chart);
}
});
};
const readSetting = (chart) => {
let useAnimation = chart.useAnimation();
let hoverStyle = chart.hoverStyle();
if (!hoverStyle) {
return;
}
setHoverInfo({
...hoverInfo,
useAnimation: useAnimation,
color: hoverStyle.color || "",
transparency: hoverStyle.transparency,
borderColor: hoverStyle.borderStyle.color || "",
borderWidth: hoverStyle.borderStyle.width || 0,
borderTransparency: hoverStyle.borderStyle.transparency,
borderDashStyle: hoverStyle.borderStyle.dashStyle,
symbolColor: hoverStyle.symbolStyle.color || "",
symbolTransparency: hoverStyle.symbolStyle.transparency,
symbolBorderColor: hoverStyle.symbolStyle.borderStyle.color || "",
symbolBorderWidth: hoverStyle.symbolStyle.borderStyle.width || 0,
symbolBorderTransparency: hoverStyle.symbolStyle.borderStyle.transparency,
symbolBorderDashStyle: hoverStyle.symbolStyle.borderStyle.dashStyle,
});
}
const applySetting = (setting) => {
let sheet = spread.getActiveSheet();
let chart = getActiveChart(sheet);
if (!chart) {
return;
}
chart.useAnimation(setting.useAnimation);
let hoverStyle = {
color: setting.color,
transparency: setting.transparency,
borderStyle: {
color: setting.borderColor,
width: setting.borderWidth,
transparency: setting.borderTransparency,
dashStyle: setting.borderDashStyle,
},
symbolStyle: {
color: setting.symbolColor,
transparency: setting.symbolTransparency,
borderStyle: {
color: setting.symbolBorderColor,
width: setting.symbolBorderWidth,
transparency: setting.symbolBorderTransparency,
dashStyle: setting.symbolBorderDashStyle,
}
}
}
chart.hoverStyle(hoverStyle);
}
const getActiveChart = (sheet) => {
let activeChart = null;
sheet.charts.all().forEach(function (chart) {
if (chart.isSelected()) {
activeChart = chart;
}
});
return activeChart;
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet />
</SpreadSheets>
</div>
<Panel applySetting={(e) => { applySetting(e) }} setting={hoverInfo} />
</div>);
}
function Panel(props) {
const [setting, setSetting] = React.useState(props.setting);
React.useEffect(() => {
if (props.setting !== setting) {
setSetting(props.setting);
}
}, [props.setting]);
return (
<div class="options-container">
<div class="option-row">
<label for="useAnimation">useAnimation</label>
<input type="checkbox" id="useAnimation" checked={setting.useAnimation} onClick={(e) => setSetting({ ...setting, useAnimation: _getBoolean(e) })} />
</div>
<div class="option-row" id="">
<label for="color">Color:</label>
<input type="text" id="color" value={setting.color} onChange={(e) => setSetting({ ...setting, color: _getText(e) })} />
</div>
<div class="option-row" id="">
<label for="transparency">Transparency:</label>
<input type="number" id="transparency" step="0.1" min="0" max="1" value={setting.transparency} onChange={(e) => setSetting({ ...setting, transparency: _getFloat(e) })} />
</div>
<div class="option-row" id="">
<label for="border-color">Border Color:</label>
<input type="text" id="border-color" value={setting.borderColor} onChange={(e) => setSetting({ ...setting, borderColor: _getText(e) })} />
</div>
<div class="option-row" id="">
<label for="border-width">Border Width:</label>
<input type="number" id="border-width" step="1" min="0" max="100" value={setting.borderWidth} onChange={(e) => setSetting({ ...setting, borderWidth: _getValue(e) })} />
</div>
<div class="option-row" id="">
<label for="border-transparency">Border Transparency:</label>
<input type="number" id="border-transparency" step="0.1" min="0" max="1" value={setting.borderTransparency} onChange={(e) => setSetting({ ...setting, borderTransparency: _getFloat(e) })} />
</div>
<div class="option-row" id="">
<label for="border-dashStyle">Border DashStyle:</label>
<select id="border-dashStyle" value={setting.borderDashStyle} onChange={(e) => setSetting({ ...setting, borderDashStyle: _getValue(e) })}>
<option value="0" selected="selected">solid</option>
<option value="1">dot</option>
<option value="2">dash</option>
<option value="3">lgDash</option>
<option value="4">dashDot</option>
<option value="5">lgDashDot</option>
<option value="6">lgDashDotDot</option>
<option value="7">sysDash</option>
<option value="8">sysDot</option>
<option value="9">sysDashDot</option>
<option value="10">sysDashDotDot</option>
</select>
</div>
<hr />
<div class="option-row" id="">
<label for="symbol-color">Symbol Color:</label>
<input type="text" id="symbol-color" value={setting.symbolColor} onChange={(e) => setSetting({ ...setting, symbolColor: _getText(e) })} />
</div>
<div class="option-row" id="">
<label for="symbol-transparency">Symbol Transparency:</label>
<input type="number" id="symbol-transparency" step="0.1" min="0" max="1" value={setting.symbolTransparency} onChange={(e) => setSetting({ ...setting, symbolTransparency: _getFloat(e) })} />
</div>
<div class="option-row" id="">
<label for="symbol-border-color">Symbol Border Color:</label>
<input type="text" id="symbol-border-color" value={setting.symbolBorderColor} onChange={(e) => setSetting({ ...setting, symbolBorderColor: _getText(e) })} />
</div>
<div class="option-row" id="">
<label for="symbol-border-width">Symbol Border Width:</label>
<input type="number" id="symbol-border-width" step="1" min="0" max="100" value={setting.symbolBorderWidth} onChange={(e) => setSetting({ ...setting, symbolBorderWidth: _getValue(e) })} />
</div>
<div class="option-row" id="">
<label for="symbol-border-transparency">Symbol Border Transparency:</label>
<input type="number" id="symbol-border-transparency" step="0.1" min="0" max="1" value={setting.symbolBorderTransparency} onChange={(e) => setSetting({ ...setting, symbolBorderTransparency: _getFloat(e) })} />
</div>
<div class="option-row" id="">
<label for="symbol-border-dashStyle">Symbol Border DashStyle:</label>
<select id="symbol-border-dashStyle" value={setting.symbolBorderDashStyle} onChange={(e) => setSetting({ ...setting, symbolBorderDashStyle: _getValue(e) })}>
<option value="0">solid</option>
<option value="1">dot</option>
<option value="2">dash</option>
<option value="3">lgDash</option>
<option value="4">dashDot</option>
<option value="5">lgDashDot</option>
<option value="6">lgDashDotDot</option>
<option value="7">sysDash</option>
<option value="8">sysDot</option>
<option value="9">sysDashDot</option>
<option value="10">sysDashDotDot</option>
</select>
</div>
<div class="option-row">
<input type="button" id="apply" value="Set" onClick={(e) => { props.applySetting(setting) }} />
</div>
</div>
)
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
const Component = React.Component;
function _getBoolean (e) {
return e.target.checked;
}
function _getFloat(e) {
return parseFloat(e.target.value);
}
function _getValue(e) {
return parseInt(e.target.value);
}
function _getText(e) {
return e.target.value;
}
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
useAnimation: true,
color: "#FF0000",
transparency: 0.7,
borderColor: "#00FF00",
borderWidth: 1,
borderTransparency: 1,
borderDashStyle: "0",
symbolColor: "orange",
symbolTransparency: 0.7,
symbolBorderColor: "rgb(255,0,255)",
symbolBorderWidth: 1,
symbolBorderTransparency: 0.7,
symbolBorderDashStyle: "0"
}
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet />
</SpreadSheets>
</div>
<Panel applySetting={(e) => { this.applySetting(e) }} setting= {this.state}/>
</div>);
}
initSpread(spread) {
this.spread = spread;
spread.setSheetCount(2);
let sheet = spread.getSheet(0);
sheet.suspendPaint();
let dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158],
["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192],
["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
let chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 494, 0, 480, 270, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns);
chart.title({ text: "HoverStyle with markers" });
let seriesItem = chart.series().get(0);
seriesItem.symbol.size = 20;
chart.series().set(0, seriesItem);
let hoverStyle = {
color: "orange",
transparency: 0.1,
borderStyle: {
transparency: 0.1,
color: '#FF0000',
width: 3,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
},
symbolStyle: {
color: "yellow",
transparency: 0.1,
borderStyle: {
transparency: 0.1,
color: 'rgb(0, 0, 255)',
width: 9,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
}
}
};
chart.hoverStyle(hoverStyle);
let chart2 = sheet.charts.add('Chart2', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 494, 275, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns);
chart2.title({ text: "Default HoverStyle" });
let chart3 = sheet.charts.add('Chart3', GC.Spread.Sheets.Charts.ChartType.pie, 494, 270, 480, 270, 'A1:H2');
chart3.title({ text: "HoverStyle with Animation" });
chart3.useAnimation(true);
let hoverStyle3 = {
color: "orange",
transparency: 0.6,
borderStyle: {
transparency: 0.1,
color: '#FF0000',
width: 9,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
}
};
chart3.hoverStyle(hoverStyle3);
this.initEvent(spread);
this.readSetting(chart);
sheet.resumePaint();
};
initEvent() {
let self = this;
self.spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function () {
let sheet = self.spread.getActiveSheet();
let chart = self.getActiveChart(sheet);
if (chart) {
self.readSetting(chart);
}
});
};
readSetting(chart) {
let useAnimation = chart.useAnimation();
let hoverStyle = chart.hoverStyle();
if (!hoverStyle) {
return;
}
this.setState({
useAnimation: useAnimation,
color: hoverStyle.color || "",
transparency: hoverStyle.transparency,
borderColor: hoverStyle.borderStyle.color || "",
borderWidth: hoverStyle.borderStyle.width || 0,
borderTransparency: hoverStyle.borderStyle.transparency,
borderDashStyle: hoverStyle.borderStyle.dashStyle,
symbolColor: hoverStyle.symbolStyle.color || "",
symbolTransparency: hoverStyle.symbolStyle.transparency,
symbolBorderColor: hoverStyle.symbolStyle.borderStyle.color || "",
symbolBorderWidth: hoverStyle.symbolStyle.borderStyle.width || 0,
symbolBorderTransparency: hoverStyle.symbolStyle.borderStyle.transparency,
symbolBorderDashStyle: hoverStyle.symbolStyle.borderStyle.dashStyle,
})
}
applySetting(setting) {
let sheet = this.spread.getActiveSheet();
let chart = this.getActiveChart(sheet);
if (!chart) {
return;
}
chart.useAnimation(setting.useAnimation);
let hoverStyle = {
color: setting.color,
transparency: setting.transparency,
borderStyle: {
color: setting.borderColor,
width: setting.borderWidth,
transparency: setting.borderTransparency,
dashStyle: setting.borderDashStyle,
},
symbolStyle: {
color: setting.symbolColor,
transparency: setting.symbolTransparency,
borderStyle: {
color: setting.symbolBorderColor,
width: setting.symbolBorderWidth,
transparency: setting.symbolBorderTransparency,
dashStyle: setting.symbolBorderDashStyle,
}
}
}
chart.hoverStyle(hoverStyle);
}
getActiveChart(sheet) {
let activeChart = null;
sheet.charts.all().forEach(function (chart) {
if (chart.isSelected()) {
activeChart = chart;
}
});
return activeChart;
}
}
class Panel extends Component {
constructor(props) {
super(props);
this.state = this.props.setting;
}
componentWillReceiveProps(nextProps) {
this.setState(nextProps.setting);
}
render() {
return (
<div class="options-container">
<div class="option-row">
<label for="useAnimation">useAnimation</label>
<input type="checkbox" id="useAnimation" checked={this.state.useAnimation} onClick={(e) =>this.setState({useAnimation: _getBoolean(e)})} />
</div>
<div class="option-row" id="">
<label for="color">Color:</label>
<input type="text" id="color" value={this.state.color} onChange={(e) =>this.setState({color: _getText(e)})} />
</div>
<div class="option-row" id="">
<label for="transparency">Transparency:</label>
<input type="number" id="transparency" step="0.1" min="0" max="1" value={this.state.transparency} onChange={(e) =>this.setState({transparency: _getFloat(e)})} />
</div>
<div class="option-row" id="">
<label for="border-color">Border Color:</label>
<input type="text" id="border-color" value={this.state.borderColor} onChange={(e) =>this.setState({borderColor: _getText(e)})}/>
</div>
<div class="option-row" id="">
<label for="border-width">Border Width:</label>
<input type="number" id="border-width" step="1" min="0" max="100" value={this.state.borderWidth} onChange={(e) =>this.setState({borderWidth: _getValue(e)})} />
</div>
<div class="option-row" id="">
<label for="border-transparency">Border Transparency:</label>
<input type="number" id="border-transparency" step="0.1" min="0" max="1" value={this.state.borderTransparency} onChange={(e) =>this.setState({borderTransparency: _getFloat(e)})} />
</div>
<div class="option-row" id="">
<label for="border-dashStyle">Border DashStyle:</label>
<select id="border-dashStyle" value={this.state.borderDashStyle} onChange={(e) =>this.setState({borderDashStyle: _getValue(e)})}>
<option value="0" selected="selected">solid</option>
<option value="1">dot</option>
<option value="2">dash</option>
<option value="3">lgDash</option>
<option value="4">dashDot</option>
<option value="5">lgDashDot</option>
<option value="6">lgDashDotDot</option>
<option value="7">sysDash</option>
<option value="8">sysDot</option>
<option value="9">sysDashDot</option>
<option value="10">sysDashDotDot</option>
</select>
</div>
<hr/>
<div class="option-row" id="">
<label for="symbol-color">Symbol Color:</label>
<input type="text" id="symbol-color" value={this.state.symbolColor} onChange={(e) =>this.setState({symbolColor: _getText(e)})}/>
</div>
<div class="option-row" id="">
<label for="symbol-transparency">Symbol Transparency:</label>
<input type="number" id="symbol-transparency" step="0.1" min="0" max="1" value={this.state.symbolTransparency} onChange={(e) =>this.setState({symbolTransparency: _getFloat(e)})} />
</div>
<div class="option-row" id="">
<label for="symbol-border-color">Symbol Border Color:</label>
<input type="text" id="symbol-border-color" value={this.state.symbolBorderColor} onChange={(e) =>this.setState({symbolBorderColor: _getText(e)})} />
</div>
<div class="option-row" id="">
<label for="symbol-border-width">Symbol Border Width:</label>
<input type="number" id="symbol-border-width" step="1" min="0" max="100" value={this.state.symbolBorderWidth} onChange={(e) =>this.setState({symbolBorderWidth: _getValue(e)})} />
</div>
<div class="option-row" id="">
<label for="symbol-border-transparency">Symbol Border Transparency:</label>
<input type="number" id="symbol-border-transparency" step="0.1" min="0" max="1" value={this.state.symbolBorderTransparency} onChange={(e) =>this.setState({symbolBorderTransparency: _getFloat(e)})} />
</div>
<div class="option-row" id="">
<label for="symbol-border-dashStyle">Symbol Border DashStyle:</label>
<select id="symbol-border-dashStyle" value={this.state.symbolBorderDashStyle} onChange={(e) =>this.setState({symbolBorderDashStyle: _getValue(e)})}>
<option value="0">solid</option>
<option value="1">dot</option>
<option value="2">dash</option>
<option value="3">lgDash</option>
<option value="4">dashDot</option>
<option value="5">lgDashDot</option>
<option value="6">lgDashDotDot</option>
<option value="7">sysDash</option>
<option value="8">sysDot</option>
<option value="9">sysDashDot</option>
<option value="10">sysDashDotDot</option>
</select>
</div>
<div class="option-row">
<input type="button" id="apply" value="Set" onClick={(e)=>{this.props.applySetting(this.state)}}/>
</div>
</div>
)
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
}
.option-row {
padding-bottom: 5px;
}
label {
display:inline-block;
}
input{
padding: 1px 8px;
box-sizing: border-box;
width: 100%;
}
select{
width: 100%;
}
input[type=checkbox] {
display: inline-block;
width: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
