セルの状態を使用すると、選択したセルの状態に応じてさまざまなスタイルを適用できます。 これは、リアルタイムのフィードバックが必要なアプリケーションに特に役立ちます。たとえば、注文リストの行にカーソルを合わせると詳細情報が表示される、ユーザーがデータを入力する必要があるセルを強調表示する、セルデータが間違っている場合にユーザーに知らせるなどです。
2つ以上の状態が重複する場合、最後に設定されたスタイルが優先され、他のスタイルと合成されます。セル状態の優先度は次のとおりです:
edit > hover > active > selected > invalid formula > dirty > invalid > readonly;
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet :dataSource="dataSource" :autoGenerateColumns="autoGenerateColumns">
<gc-column :dataField="'Film'" :width=120></gc-column>
<gc-column :dataField="'Genre'" :width=120></gc-column>
<gc-column :dataField="'Lead Studio'" :width=120></gc-column>
<gc-column :dataField="'Audience Score %'" :width=120></gc-column>
<gc-column :dataField="'Profitability'" :width=120></gc-column>
<gc-column :dataField="'Tating'" :width=120></gc-column>
<gc-column :dataField="'Worldwide Gross'" :width=120></gc-column>
<gc-column :dataField="'Year'" :width=120></gc-column>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<p>左のシートからセル範囲を選択後、以下のプロパティを変更し、[セルの状態を適用]ボタンを押してセルの状態を適用します。</p>
<p>例えば、[セルの状態の種類:]でhoverを選択した際にはマウスカーソルを上記のセル範囲にホバリングすることでセルの状態が変化します。</p>
<div>
<label>
<h4>セル範囲:</h4>
</label>
<div class="row-content">
<span>シートで選択した範囲は、セル状態の範囲として使用されます。</span>
</div>
</div>
<div class="row">
<label>
<h4>スタイル:</h4>
</label>
<div class="row-content">
<select class="row-select" id="style-list">
<option>20% - Accent1</option>
<option>20% - Accent2</option>
<option>20% - Accent3</option>
<option>20% - Accent4</option>
<option>20% - Accent5</option>
<option>20% - Accent6</option>
<option>40% - Accent1</option>
<option>40% - Accent2</option>
<option>40% - Accent3</option>
<option>40% - Accent4</option>
<option>40% - Accent5</option>
<option>40% - Accent6</option>
<option>60% - Accent1</option>
<option>60% - Accent2</option>
<option>60% - Accent3</option>
<option>60% - Accent4</option>
<option>60% - Accent5</option>
<option>60% - Accent6</option>
<option>Accent1</option>
<option>Accent2</option>
<option>Accent3</option>
<option>Accent4</option>
<option>Accent5</option>
<option>Accent6</option>
<option>Bad</option>
<option>Calculation</option>
<option>Check Cell</option>
<option>Comma</option>
<option>Comma [0]</option>
<option>Currency</option>
<option>Currency [0]</option>
<option>Explanatory Text</option>
<option>Good</option>
<option>Heading 1</option>
<option>Heading 2</option>
<option>Heading 3</option>
<option>Heading 4</option>
<option>Input</option>
<option>Linked Cell</option>
<option>Neutral</option>
<option>Normal</option>
<option>Note</option>
<option>Output</option>
<option>Percent</option>
<option>Title</option>
<option>Total</option>
<option>Warning Text</option>
</select>
</div>
</div>
<div class="row">
<label>
<h4>セルの状態の種類:</h4>
</label>
<div class="row-content">
<select id="cell-states-type" class="row-select">
<option value="1">hover</option>
<option value="2">invalid</option>
<option value="8">edit</option>
<option value="4">readonly</option>
<option value="16">active</option>
<option value="32">select</option>
<option value="64">dirty</option>
<option value="128">invalid formula</option>
</select>
<div id="style-list-dialog"></div>
</div>
</div>
<div class="row">
<label>
<h4>保護:</h4>
</label>
<div class="row-content">
<label class="protect-info"><input type="checkbox" id="protectSheet"
@change="protectSheet($event)" />シートを保護する</label>
<label class="protect-info"><input type="button" id="lockRange" value=" セル範囲をロック"
@click="lockRange($event)" /></label>
</div>
</div>
<div class="row">
<label>
<h4>Workbook Option:</h4>
</label>
<div class="row-content">
<label class="protect-info"><input type="checkbox" id="allowInvalidFormula"
@change="allowInvalidFormula($event)" />無効な数式を許可する</label>
</div>
</div>
<div class="row">
<label>
<h4> データ検証:</h4>
</label>
<div class="row-content">
<label class="protect-info"><input type="number" id="data-validation-from"
placeholder="Data Validation value1" /></label>
<label class="protect-info">
<select id="data-validation-op" class="row-select">
<option value="6" selected="">Between</option>
<option value="7">NotBetween</option>
<option value="0">EqualTo</option>
<option value="1">NotEqualTo</option>
<option value="2">GreaterThan</option>
<option value="4">LessThan</option>
<option value="3">GreaterThanOrEqualTo</option>
<option value="5">LessThanOrEqualTo</option>
</select>
</label>
<label class="protect-info"><input type="number" id="data-validation-to"
placeholder="Data Validation value2" /></label>
<label class="protect-info"><input type="button" id="data-validation-apply"
@click="dataValidationApply($event)" value="データ検証を追加"></label>
</div>
</div>
<div class="row">
<label><span></span></label>
<div class="row-content">
<input type="button" value="セルの状態を適用" id="apply-cell-state" @click="applyCellState($event)" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ja';
GC.Spread.Common.CultureManager.culture("ja-jp");
import { getData } from './data.js';
const autoGenerateColumns = ref(false);
const spread = ref(null);
const initSpread = (spreadInstance) => {
spread.value = spreadInstance;
spread.value.suspendPaint();
const sheet = spread.value.getActiveSheet();
sheet.defaults.rowHeight = 30;
addNameStyles(spread.value);
initPage(spread.value);
spread.value.resumePaint();
};
const getStyleNames = (spreadInstance) => {
const styles = spreadInstance.getNamedStyles();
return styles.map(style => style.name);
};
const initPage = (spreadInstance) => {
const $styleList = document.getElementById("style-list");
let styleListHtml = '';
const names = getStyleNames(spreadInstance);
names.forEach(name => {
styleListHtml += `<option>${name}</option>`;
});
$styleList.innerHTML = styleListHtml;
};
const addNameStyles = (spreadInstance) => {
let temp;
for (let i = 0, len = getData().nameStyles.length; i < len; i++) {
temp = new GC.Spread.Sheets.Style();
temp.fromJSON(getData().nameStyles[i]);
spreadInstance.addNamedStyle(temp);
}
};
const applyCellState = (e) => {
const sheet = spread.value.getActiveSheet();
const range = sheet.getSelections()[0];
const styleName = document.getElementById("style-list").value;
let style;
if (styleName) {
style = spread.value.getNamedStyle(styleName);
}
const cellStateType = parseInt(document.getElementById("cell-states-type").value, 10);
if (range && cellStateType !== undefined && style) {
sheet.cellStates.add(range, cellStateType, style);
}
};
const protectSheet = (e) => {
const protectSheetBtn = document.getElementById("protectSheet");
const checked = !!protectSheetBtn.checked;
const sheet = spread.value.getActiveSheet();
sheet.options.isProtected = checked;
};
const allowInvalidFormula = (e) => {
const invalidFormulaCheckbox = document.getElementById("allowInvalidFormula");
const checked = !!invalidFormulaCheckbox.checked;
spread.value.options.allowInvalidFormula = checked;
const sheet = spread.value.getActiveSheet();
changeInvalidFormulaCellState(sheet, !checked);
sheet.recalcAll();
};
const lockRange = (e) => {
const sheet = spread.value.getActiveSheet();
const range = sheet.getSelections()[0];
sheet.getRange(range.row, range.col, range.rowCount, range.colCount).locked(true);
};
const dataValidationApply = (e) => {
const value1 = parseInt(document.getElementById("data-validation-from").value, 10);
const value2 = parseInt(document.getElementById("data-validation-to").value, 10);
const op = parseInt(document.getElementById("data-validation-op").value);
if (value1 !== undefined && value2 !== undefined) {
const sheet = spread.value.getActiveSheet();
const range = sheet.getSelections()[0];
const dv = GC.Spread.Sheets.DataValidation.createNumberValidator(op, value1, value2);
sheet.setDataValidator(range.row, range.col, range.rowCount, range.colCount, dv);
}
};
const dataSource = computed(() => getData().dataSource);
const changeInvalidFormulaCellState = (sheet, isRemove) => {
const wholeRange = new GC.Spread.Sheets.Range(0, 0, sheet.getRowCount(), sheet.getColumnCount());
if (isRemove) {
sheet.cellStates.remove(wholeRange, GC.Spread.Sheets.CellStatesType.invalidFormula, GC.Spread.Sheets.SheetArea.viewport);
return;
}
const style = new GC.Spread.Sheets.Style();
const borderTop = new GC.Spread.Sheets.LineBorder('red', GC.Spread.Sheets.LineStyle.mediumDashed);
const borderBottom = new GC.Spread.Sheets.LineBorder('red', GC.Spread.Sheets.LineStyle.mediumDashed);
const borderLeft = new GC.Spread.Sheets.LineBorder('red', GC.Spread.Sheets.LineStyle.mediumDashed);
const borderRight = new GC.Spread.Sheets.LineBorder('red', GC.Spread.Sheets.LineStyle.mediumDashed);
style.borderTop = borderTop;
style.borderBottom = borderBottom;
style.borderLeft = borderLeft;
style.borderRight = borderRight;
sheet.cellStates.add(wholeRange, GC.Spread.Sheets.CellStatesType.invalidFormula, style, GC.Spread.Sheets.SheetArea.viewport);
};
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
box-sizing: border-box;
}
.options-container {
float: right;
width: 300px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
padding-bottom: 8px;
}
label {
padding-bottom: 4px;
display: block;
}
input {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
h4 {
margin: 0;
}
.row {
line-height: 30px;
}
.row>label {
width: 150px;
text-align: left;
padding: 0 5px;
}
.row-select {
width: 240px;
margin-left: 20px;
}
.protect-info {
width: 100%;
display: inline-block;
margin: 5px 0;
}
.protect-info input[type="checkbox"] {
width: auto;
}
.protect-info input[type="number"],
.protect-info input[type="text"],
.protect-info input[type="button"] {
width: 240px;
margin-left: 20px;
}
.protect-info input[type="button"] {
height: 30px;
line-height: 30px;
}
#apply-cell-state {
font-weight: bold;
margin-top: 15px;
}
</style>
<!DOCTYPE html>
<html lang="en" style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ja/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
let dataSource = [
{
"Film": "27 Dresses",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 71,
"Profitability": 5.34,
"Rating": 40,
"Worldwide Gross": 160.30,
"Year": 2008
},
{
"Film": "(500) Days of Summer",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 81,
"Profitability": 8.09,
"Rating": 87,
"Worldwide Gross": 60.72,
"Year": 2009
},
{
"Film": "A Dangerous Method",
"Genre": "Drama",
"Lead Studio": "Independent",
"Audience Score %": 89,
"Profitability": 0.44,
"Rating": 79,
"Worldwide Gross": 8.97,
"Year": 2011
},
{
"Film": "A Serious Man",
"Genre": "Drama",
"Lead Studio": "Universal",
"Audience Score %": 64,
"Profitability": 4.38,
"Rating": 89,
"Worldwide Gross": 30.68,
"Year": 2009
},
{
"Film": "Across the Universe",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 84,
"Profitability": 0.65,
"Rating": 54,
"Worldwide Gross": 29.36,
"Year": 2007
},
{
"Film": "Beginners",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 80,
"Profitability": 4.47,
"Rating": 84,
"Worldwide Gross": 14.31,
"Year": 2011
},
{
"Film": "Dear John",
"Genre": "Drama",
"Lead Studio": "Sony",
"Audience Score %": 66,
"Profitability": 4.5988,
"Rating": 29,
"Worldwide Gross": 114.97,
"Year": 2010
},
{
"Film": "Enchanted",
"Genre": "Comedy",
"Lead Studio": "Disney",
"Audience Score %": 80,
"Profitability": 4.00,
"Rating": 93,
"Worldwide Gross": 340.48,
"Year": 2007
},
{
"Film": "Fireproof",
"Genre": "Drama",
"Lead Studio": "Independent",
"Audience Score %": 51,
"Profitability": 66.93,
"Rating": 40,
"Worldwide Gross": 33.46,
"Year": 2008
},
{
"Film": "Four Christmases",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 52,
"Profitability": 2.02,
"Rating": 26,
"Worldwide Gross": 161.83,
"Year": 2008
},
{
"Film": "Ghosts of Girlfriends Past",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 47,
"Profitability": 2.0444,
"Rating": 27,
"Worldwide Gross": 102.22,
"Year": 2009
},
{
"Film": "Gnomeo and Juliet",
"Genre": "Animation",
"Lead Studio": "Disney",
"Audience Score %": 52,
"Profitability": 5.38,
"Rating": 56,
"Worldwide Gross": 193.96,
"Year": 2011
},
{
"Film": "Going the Distance",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 56,
"Profitability": 1.31,
"Rating": 53,
"Worldwide Gross": 42.05,
"Year": 2010
},
{
"Film": "Good Luck Chuck",
"Genre": "Comedy",
"Lead Studio": "Lionsgate",
"Audience Score %": 61,
"Profitability": 2.36,
"Rating": 3,
"Worldwide Gross": 59.19,
"Year": 2007
},
{
"Film": "He's Just Not That Into You",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 60,
"Profitability": 7.15,
"Rating": 42,
"Worldwide Gross": 178.84,
"Year": 2009
},
{
"Film": "High School Musical 3: Senior Year",
"Genre": "Comedy",
"Lead Studio": "Disney",
"Audience Score %": 76,
"Profitability": 22.91,
"Rating": 65,
"Worldwide Gross": 252.04,
"Year": 2008
},
{
"Film": "I Love You Phillip Morris",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 57,
"Profitability": 1.34,
"Rating": 71,
"Worldwide Gross": 20.1,
"Year": 2010
},
{
"Film": "It's Complicated",
"Genre": "Comedy",
"Lead Studio": "Universal",
"Audience Score %": 63,
"Profitability": 2.64,
"Rating": 56,
"Worldwide Gross": 224.6,
"Year": 2009
},
{
"Film": "Jane Eyre",
"Genre": "Romance",
"Lead Studio": "Universal",
"Audience Score %": 77,
"Profitability": null,
"Rating": 85,
"Worldwide Gross": 30.14,
"Year": 2011
},
{
"Film": "Just Wright",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 58,
"Profitability": 1.79,
"Rating": 45,
"Worldwide Gross": 21.56,
"Year": 2010
},
{
"Film": "Killers",
"Genre": "Action",
"Lead Studio": "Lionsgate",
"Audience Score %": 45,
"Profitability": 1.24,
"Rating": 11,
"Worldwide Gross": 93.4,
"Year": 2010
},
{
"Film": "Knocked Up",
"Genre": "Comedy",
"Lead Studio": "Universal",
"Audience Score %": 83,
"Profitability": 6.63,
"Rating": 91,
"Worldwide Gross": 219.00,
"Year": 2007
},
{
"Film": "Leap Year",
"Genre": "Comedy",
"Lead Studio": "Universal",
"Audience Score %": 49,
"Profitability": 1.71,
"Rating": 21,
"Worldwide Gross": 32.59,
"Year": 2010
},
{
"Film": "Letters to Juliet",
"Genre": "Comedy",
"Lead Studio": "Summit",
"Audience Score %": 62,
"Profitability": 2.639333333,
"Rating": 40,
"Worldwide Gross": 79.18,
"Year": 2010
},
{
"Film": "License to Wed",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 55,
"Profitability": 1.98,
"Rating": 8,
"Worldwide Gross": 69.30,
"Year": 2007
},
{
"Film": "Life as We Know It",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 62,
"Profitability": 2.53,
"Rating": 28,
"Worldwide Gross": 96.16,
"Year": 2010
},
{
"Film": "Love & Other Drugs",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 55,
"Profitability": 1.81,
"Rating": 48,
"Worldwide Gross": 54.53,
"Year": 2010
},
{
"Film": "Love Happens",
"Genre": "Drama",
"Lead Studio": "Universal",
"Audience Score %": 40,
"Profitability": 2.00,
"Rating": 18,
"Worldwide Gross": 36.08,
"Year": 2009
},
{
"Film": "Made of Honor",
"Genre": "Comedy",
"Lead Studio": "Sony",
"Audience Score %": 61,
"Profitability": 2.64,
"Rating": 13,
"Worldwide Gross": 105.96,
"Year": 2008
},
{
"Film": "Mamma Mia!",
"Genre": "Comedy",
"Lead Studio": "Universal",
"Audience Score %": 76,
"Profitability": 9.23,
"Rating": 53,
"Worldwide Gross": 609.47,
"Year": 2008
},
{
"Film": "Marley and Me",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 77,
"Profitability": 3.746781818,
"Rating": 63,
"Worldwide Gross": 206.073,
"Year": 2008
},
{
"Film": "Midnight in Paris",
"Genre": "Romance",
"Lead Studio": "Sony",
"Audience Score %": 84,
"Profitability": 8.74,
"Rating": 93,
"Worldwide Gross": 148.66,
"Year": 2011
},
{
"Film": "Miss Pettigrew Lives for a Day",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 70,
"Profitability": 0.25,
"Rating": 78,
"Worldwide Gross": 15.17,
"Year": 2008
},
{
"Film": "Monte Carlo",
"Genre": "Romance",
"Lead Studio": "20th Century Fox",
"Audience Score %": 50,
"Profitability": 1.98,
"Rating": 38,
"Worldwide Gross": 39.66,
"Year": 2011
},
{
"Film": "Music and Lyrics",
"Genre": "Romance",
"Lead Studio": "Warner Bros.",
"Audience Score %": 70,
"Profitability": 3.64,
"Rating": 63,
"Worldwide Gross": 145.89,
"Year": 2007
},
{
"Film": "My Week with Marilyn",
"Genre": "Drama",
"Lead Studio": "The Weinstein Company",
"Audience Score %": 84,
"Profitability": 0.82,
"Rating": 83,
"Worldwide Gross": 8.25,
"Year": 2011
},
{
"Film": "New Year's Eve",
"Genre": "Romance",
"Lead Studio": "Warner Bros.",
"Audience Score %": 48,
"Profitability": 2.53,
"Rating": 8,
"Worldwide Gross": 142.04,
"Year": 2011
},
{
"Film": "Nick and Norah's Infinite Playlist",
"Genre": "Comedy",
"Lead Studio": "Sony",
"Audience Score %": 67,
"Profitability": 3.35,
"Rating": 73,
"Worldwide Gross": 33.52,
"Year": 2008
},
{
"Film": "No Reservations",
"Genre": "Comedy",
"Lead Studio": "",
"Audience Score %": 64,
"Profitability": 3.30,
"Rating": 39,
"Worldwide Gross": 92.60,
"Year": 2007
},
{
"Film": "Not Easily Broken",
"Genre": "Drama",
"Lead Studio": "Independent",
"Audience Score %": 66,
"Profitability": 2.14,
"Rating": 34,
"Worldwide Gross": 10.7,
"Year": 2009
},
{
"Film": "One Day",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 54,
"Profitability": 3.68,
"Rating": 37,
"Worldwide Gross": 55.24,
"Year": 2011
},
{
"Film": "Our Family Wedding",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 49,
"Profitability": null,
"Rating": 14,
"Worldwide Gross": 21.37,
"Year": 2010
},
{
"Film": "Over Her Dead Body",
"Genre": "Comedy",
"Lead Studio": "New Line",
"Audience Score %": 47,
"Profitability": 2.07,
"Rating": 15,
"Worldwide Gross": 20.71,
"Year": 2008
},
{
"Film": "P.S. I Love You",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 82,
"Profitability": 5.10,
"Rating": 21,
"Worldwide Gross": 153.09,
"Year": 2007
},
{
"Film": "Penelope",
"Genre": "Comedy",
"Lead Studio": "Summit",
"Audience Score %": 74,
"Profitability": 1.38,
"Rating": 52,
"Worldwide Gross": 20.74,
"Year": 2008
},
{
"Film": "Rachel Getting Married",
"Genre": "Drama",
"Lead Studio": "Independent",
"Audience Score %": 61,
"Profitability": 1.38,
"Rating": 85,
"Worldwide Gross": 16.61,
"Year": 2008
},
{
"Film": "Remember Me",
"Genre": "Drama",
"Lead Studio": "Summit",
"Audience Score %": 70,
"Profitability": 3.49,
"Rating": 28,
"Worldwide Gross": 55.86,
"Year": 2010
},
{
"Film": "Sex and the City",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 81,
"Profitability": 7.22,
"Rating": 49,
"Worldwide Gross": 415.25,
"Year": 2008
},
{
"Film": "Sex and the City 2",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 49,
"Profitability": 2.88,
"Rating": 15,
"Worldwide Gross": 288.35,
"Year": 2010
},
{
"Film": "She's Out of My League",
"Genre": "Comedy",
"Lead Studio": "Paramount",
"Audience Score %": 60,
"Profitability": 2.44,
"Rating": 57,
"Worldwide Gross": 48.81,
"Year": 2010
},
{
"Film": "Something Borrowed",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": null,
"Profitability": 1.71,
"Rating": null,
"Worldwide Gross": 60.18,
"Year": 2011
},
{
"Film": "Tangled",
"Genre": "Animation",
"Lead Studio": "Disney",
"Audience Score %": 88,
"Profitability": 1.36,
"Rating": 89,
"Worldwide Gross": 355.08,
"Year": 2010
},
{
"Film": "The Back-up Plan",
"Genre": "Comedy",
"Lead Studio": "CBS",
"Audience Score %": 47,
"Profitability": 2.20,
"Rating": 20,
"Worldwide Gross": 77.09,
"Year": 2010
},
{
"Film": "The Curious Case of Benjamin Button",
"Genre": "Fantasy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 81,
"Profitability": 1.78,
"Rating": 73,
"Worldwide Gross": 285.43,
"Year": 2008
},
{
"Film": "The Duchess",
"Genre": "Drama",
"Lead Studio": "Paramount",
"Audience Score %": 68,
"Profitability": 3.20,
"Rating": 60,
"Worldwide Gross": 43.30,
"Year": 2008
},
{
"Film": "The Heartbreak Kid",
"Genre": "Comedy",
"Lead Studio": "Paramount",
"Audience Score %": 41,
"Profitability": 2.12,
"Rating": 30,
"Worldwide Gross": 127.76,
"Year": 2007
},
{
"Film": "The Invention of Lying",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 47,
"Profitability": 1.75,
"Rating": 56,
"Worldwide Gross": 32.4,
"Year": 2009
},
{
"Film": "The Proposal",
"Genre": "Comedy",
"Lead Studio": "Disney",
"Audience Score %": 74,
"Profitability": 7.86,
"Rating": 43,
"Worldwide Gross": 314.7,
"Year": 2009
},
{
"Film": "The Time Traveler's Wife",
"Genre": "Drama",
"Lead Studio": "Paramount",
"Audience Score %": 65,
"Profitability": 2.59,
"Rating": 38,
"Worldwide Gross": 101.33,
"Year": 2009
},
{
"Film": "The Twilight Saga: New Moon",
"Genre": "Drama",
"Lead Studio": "Summit",
"Audience Score %": 78,
"Profitability": 14.19,
"Rating": 27,
"Worldwide Gross": 709.82,
"Year": 2009
},
{
"Film": "The Ugly Truth",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 68,
"Profitability": 5.40,
"Rating": 14,
"Worldwide Gross": 205.3,
"Year": 2009
},
{
"Film": "Twilight",
"Genre": "Romance",
"Lead Studio": "Summit",
"Audience Score %": 82,
"Profitability": 10.18,
"Rating": 49,
"Worldwide Gross": 376.66,
"Year": 2008
},
{
"Film": "Twilight: Breaking Dawn",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 68,
"Profitability": 6.38,
"Rating": 26,
"Worldwide Gross": 702.17,
"Year": 2011
},
{
"Film": "Tyler Perry's Why Did I get Married",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 47,
"Profitability": 3.72,
"Rating": 46,
"Worldwide Gross": 55.862886,
"Year": 2007
},
{
"Film": "Valentine's Day",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 54,
"Profitability": 4.18,
"Rating": 17,
"Worldwide Gross": 217.57,
"Year": 2010
},
{
"Film": "Waiting For Forever",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 53,
"Profitability": 0.005,
"Rating": 6,
"Worldwide Gross": 0.025,
"Year": 2011
},
{
"Film": "Waitress",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 67,
"Profitability": 11.08,
"Rating": 89,
"Worldwide Gross": 22.17,
"Year": 2007
},
{
"Film": "WALL-E",
"Genre": "Animation",
"Lead Studio": "Disney",
"Audience Score %": 89,
"Profitability": 2.89,
"Rating": 96,
"Worldwide Gross": 521.28,
"Year": 2008
},
{
"Film": "Water For Elephants",
"Genre": "Drama",
"Lead Studio": "20th Century Fox",
"Audience Score %": 72,
"Profitability": 3.081421053,
"Rating": 60,
"Worldwide Gross": 117.094,
"Year": 2011
},
{
"Film": "What Happens in Vegas",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 72,
"Profitability": 6.26,
"Rating": 28,
"Worldwide Gross": 219.36,
"Year": 2008
},
{
"Film": "When in Rome",
"Genre": "Comedy",
"Lead Studio": "Disney",
"Audience Score %": 44,
"Profitability": 0,
"Rating": 15,
"Worldwide Gross": 43.04,
"Year": 2010
},
{
"Film": "You Will Meet a Tall Dark Stranger",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 35,
"Profitability": 1.21,
"Rating": 43,
"Worldwide Gross": 26.66,
"Year": 2010
},
{
"Film": "Youth in Revolt",
"Genre": "Comedy",
"Lead Studio": "The Weinstein Company",
"Audience Score %": 52,
"Profitability": 1.09,
"Rating": 68,
"Worldwide Gross": 19.62,
"Year": 2010
},
{
"Film": "Zack and Miri Make a Porno",
"Genre": "Romance",
"Lead Studio": "The Weinstein Company",
"Audience Score %": 70,
"Profitability": 1.74,
"Rating": 64,
"Worldwide Gross": 41.94,
"Year": 2008
}
]
let nameStyles = [{
"backColor": "Accent 1 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent1"
}, {
"backColor": "Accent 2 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent2"
}, {
"backColor": "Accent 3 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent3"
}, {
"backColor": "Accent 4 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent4"
}, {
"backColor": "Accent 5 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent5"
}, {
"backColor": "Accent 6 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent6"
}, {
"backColor": "Accent 1 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent1"
}, {
"backColor": "Accent 2 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent2"
}, {
"backColor": "Accent 3 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent3"
}, {
"backColor": "Accent 4 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent4"
}, {
"backColor": "Accent 5 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent5"
}, {
"backColor": "Accent 6 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent6"
}, {
"backColor": "Accent 1 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent1"
}, {
"backColor": "Accent 2 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent2"
}, {
"backColor": "Accent 3 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent3"
}, {
"backColor": "Accent 4 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent4"
}, {
"backColor": "Accent 5 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent5"
}, {
"backColor": "Accent 6 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent6"
}, {
"backColor": "Accent 1 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent1"
}, {
"backColor": "Accent 2 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent2"
}, {
"backColor": "Accent 3 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent3"
}, {
"backColor": "Accent 4 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent4"
}, {
"backColor": "Accent 5 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent5"
}, {
"backColor": "Accent 6 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent6"
}, {
"backColor": "#ffc7ce",
"foreColor": "#9c0006",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Bad"
}, {
"backColor": "#f2f2f2",
"foreColor": "#fa7d00",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#7f7f7f",
"style": 1
},
"borderTop": {
"color": "#7f7f7f",
"style": 1
},
"borderRight": {
"color": "#7f7f7f",
"style": 1
},
"borderBottom": {
"color": "#7f7f7f",
"style": 1
},
"name": "Calculation",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#a5a5a5",
"foreColor": "Background 1 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#3f3f3f",
"style": 6
},
"borderTop": {
"color": "#3f3f3f",
"style": 6
},
"borderRight": {
"color": "#3f3f3f",
"style": 6
},
"borderBottom": {
"color": "#3f3f3f",
"style": 6
},
"name": "Check Cell",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"formatter": "_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)",
"name": "Comma"
}, {
"backColor": null,
"formatter": "_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)",
"name": "Comma [0]"
}, {
"backColor": null,
"formatter": "_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)",
"name": "Currency"
}, {
"backColor": null,
"formatter": "_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)",
"name": "Currency [0]"
}, {
"backColor": null,
"foreColor": "#7f7f7f",
"font": "italic normal 14.7px Calibri",
"themeFont": "Body",
"name": "Explanatory Text"
}, {
"backColor": "#c6efce",
"foreColor": "#006100",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Good"
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 20px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 0",
"style": 5
},
"name": "Heading 1",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 17.3px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 50",
"style": 5
},
"name": "Heading 2",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 40",
"style": 2
},
"name": "Heading 3",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"name": "Heading 4"
}, {
"backColor": "#ffcc99",
"foreColor": "#3f3f76",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#7f7f7f",
"style": 1
},
"borderTop": {
"color": "#7f7f7f",
"style": 1
},
"borderRight": {
"color": "#7f7f7f",
"style": 1
},
"borderBottom": {
"color": "#7f7f7f",
"style": 1
},
"name": "Input",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "#fa7d00",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "#ff8001",
"style": 6
},
"name": "Linked Cell",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#ffeb9c",
"foreColor": "#9c6500",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Neutral"
}, {
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 16px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "Normal",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#ffffcc",
"borderLeft": {
"color": "#b2b2b2",
"style": 1
},
"borderTop": {
"color": "#b2b2b2",
"style": 1
},
"borderRight": {
"color": "#b2b2b2",
"style": 1
},
"borderBottom": {
"color": "#b2b2b2",
"style": 1
},
"name": "Note",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#f2f2f2",
"foreColor": "#3f3f3f",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#3f3f3f",
"style": 1
},
"borderTop": {
"color": "#3f3f3f",
"style": 1
},
"borderRight": {
"color": "#3f3f3f",
"style": 1
},
"borderBottom": {
"color": "#3f3f3f",
"style": 1
},
"name": "Output",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"formatter": "0%",
"name": "Percent"
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 24px Cambria",
"themeFont": "Headings",
"name": "Title"
}, {
"backColor": null,
"foreColor": "Text 1 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": {
"color": "Accent 1 0",
"style": 1
},
"borderRight": null,
"borderBottom": {
"color": "Accent 1 0",
"style": 6
},
"name": "Total",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "#ff0000",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Warning Text"
}
]
export function getData() {
return {
dataSource: dataSource,
nameStyles: nameStyles
}
}
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
