define([
'require'
, 'jquery'
, 'nbextensions/visualpython/src/common/vpCommon'
, 'nbextensions/visualpython/src/common/constant'
, 'nbextensions/visualpython/src/common/StringBuilder'
, 'nbextensions/visualpython/src/common/vpFuncJS'
, 'nbextensions/visualpython/src/container/vpContainer'
, 'nbextensions/visualpython/src/pandas/common/pandasGenerator'
, 'nbextensions/visualpython/src/common/component/vpSuggestInputText'
], function (requirejs, $, vpCommon, vpConst, sb, vpFuncJS, vpContainer, pdGen, vpSuggestInputText) {
// 옵션 ì†ì„±
const funcOptProp = {
stepCount : 1
, funcName : "Import Matplotlib"
, funcID : "mp_importMatplotlib" // TODO: ID 규칙 ìƒì„± í•„ìš”
}
/**
* html load 콜백. ê³ ìœ id ìƒì„±í•˜ì—¬ 부과하며 js ê°ì²´ í´ëž˜ìŠ¤ ìƒì„±í•˜ì—¬ 컨테ì´ë„ˆë¡œ ì „ë‹¬
* @param {function} callback 호출ìž(컨테ì´ë„ˆ) ì˜ ì½œë°±í•¨ìˆ˜
*/
var optionLoadCallback = function(callback, meta) {
// document.getElementsByTagName("head")[0].appendChild(link);
// 컨테ì´ë„ˆì—ì„œ ì „ë‹¬ëœ callback 함수가 존재하면 실행.
if (typeof(callback) === 'function') {
var uuid = vpCommon.getUUID();
// 최대 10회 중복ë˜ì§€ ì•Šë„ë¡ ì²´í¬
for (var idx = 0; idx < 10; idx++) {
// ì´ë¯¸ ì‚¬ìš©ì¤‘ì¸ uuid ì¸ ê²½ìš° 다시 ìƒì„±
if ($(vpConst.VP_CONTAINER_ID).find("." + uuid).length > 0) {
uuid = vpCommon.getUUID();
}
}
$(vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.OPTION_GREEN_ROOM))).find(vpCommon.formatString(".{0}", vpConst.API_OPTION_PAGE)).addClass(uuid);
// 옵션 ê°ì²´ ìƒì„±
var mpPackage = new MatplotPackage(uuid);
mpPackage.metadata = meta;
// 옵션 ì†ì„± í• ë‹¹.
mpPackage.setOptionProp(funcOptProp);
// html ì„¤ì •.
mpPackage.initHtml();
callback(mpPackage); // 공통 ê°ì²´ë¥¼ callback ì¸ìžë¡œ ì „ë‹¬
}
}
/**
* html 로드.
* @param {function} callback 호출ìž(컨테ì´ë„ˆ) ì˜ ì½œë°±í•¨ìˆ˜
*/
var initOption = function(callback, meta) {
vpCommon.loadHtml(vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.OPTION_GREEN_ROOM)), "pandas/common/commonEmptyPage.html", optionLoadCallback, callback, meta);
}
/**
* 본 옵션 처리 위한 í´ëž˜ìŠ¤
* @param {String} uuid ê³ ìœ id
*/
var MatplotPackage = function(uuid) {
this.uuid = uuid; // Load html ì˜ì—ì˜ uuid.
this.package = {
code: [
'import matplotlib.pyplot as ${i0}'
, '%matplotlib ${magic}'
],
input: [
{
name: 'i0',
label: 'Matplotlib.pyplot as',
type: 'int',
value: 'plt'
},
{ name: 'magic' },
{ name: 'range' },
{ name: 'stylesheet' },
{ name: 'fontfamily' },
{ name: 'fontsize' }
]
}
}
/**
* vpFuncJS ì—ì„œ ìƒì†
*/
MatplotPackage.prototype = Object.create(vpFuncJS.VpFuncJS.prototype);
/**
* ìœ íš¨ì„± 검사
* @returns ìœ íš¨ì„± 검사 ê²°ê³¼. ì í•©ì‹œ true
*/
MatplotPackage.prototype.optionValidation = function() {
return true;
// 부모 í´ëž˜ìŠ¤ ìœ íš¨ì„± 검사 호출.
// vpFuncJS.VpFuncJS.prototype.optionValidation.apply(this);
}
/**
* html 내부 binding 처리
*/
MatplotPackage.prototype.initHtml = function() {
var that = this;
this.loadCss(Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "pandas/commonPandas.css");
this.showFunctionTitle();
// this.bindOptions();
var sbPageContent = new sb.StringBuilder();
var sbTagString = new sb.StringBuilder();
// TODO: 필수 옵션 í…Œì´ë¸” ë ˆì´ì•„웃
var tblLayoutRequire = this.createVERSimpleLayout("30%");
// 1. import matplotlib.pyplot as plt
sbTagString.clear();
sbTagString.appendFormatLine("", "plt");
tblLayoutRequire.addReqRow("Matplotlib.pyplot as", sbTagString.toString());
// FIXME: vpTableLayoutVerticalSimpleì— addDivider 추가 가능한지 확ì¸
tblLayoutRequire.addRow("", "
");
// 2. %matplotlib inline/notebook
sbTagString.clear();
sbTagString.appendFormatLine("", "inline", "inline");
sbTagString.appendFormatLine("", "notebook", "notebook");
var tempOptionTag = sbTagString.toString();
sbTagString.clear();
sbTagString.appendFormat('', "magic", tempOptionTag);
tblLayoutRequire.addReqRow("%matplotlib", sbTagString.toString());
// FIXME: vpTableLayoutVerticalSimpleì— addDivider 추가 가능한지 확ì¸
tblLayoutRequire.addRow("", "
");
// 3. plt.style.use('style')
sbTagString.clear();
sbTagString.appendFormatLine("", "all", "all");
sbTagString.appendFormatLine("", "part", "part");
tempOptionTag = sbTagString.toString();
sbTagString.clear();
sbTagString.appendFormat('', "range", tempOptionTag);
tblLayoutRequire.addRow("Style Range", sbTagString.toString());
sbTagString.clear();
sbTagString.appendFormat('', "stylesheet");
tblLayoutRequire.addRow("Style Sheet", sbTagString.toString());
// FIXME: vpTableLayoutVerticalSimpleì— addDivider 추가 가능한지 확ì¸
tblLayoutRequire.addRow("", "
");
// 4. rcParams
// #from matplotlib.pylab import rcParams
// #rcParams['font.family'] = 'Gulim'
// #rcParams['font.size'] = 10
// #rcParams['figure.figsize'] = 12, 8
// #rcParams['axes.grid'] = True
sbTagString.clear();
sbTagString.appendFormat('', "fontfamily", "'Gulim'");
tblLayoutRequire.addRow("System Font", sbTagString.toString());
sbTagString.clear();
sbTagString.appendFormat('', "fontsize");
tblLayoutRequire.addRow("Font Size", sbTagString.toString());
// 필수 옵션 ì˜ì— (아코디언 박스)
var accBoxRequire = this.createOptionContainer(vpConst.API_REQUIRE_OPTION_BOX_CAPTION);
accBoxRequire.setOpenBox(true);
accBoxRequire.appendContent(tblLayoutRequire.toTagString());
sbPageContent.appendLine(accBoxRequire.toTagString());
// 페ì´ì§€ì— 컨트롤 삽입 vpFuncJS ì—ì„œ ì œê³µ
$(this.wrapSelector()).append(sbPageContent.toString());
// ì´ë²¤íŠ¸ 처리
// e1. stylesheet autocomplete with SuggestInput
this.bindStylesheet();
// e2. system font autocomplete with SuggestInput
this.bindSystemfont();
}
/**
* ì„ íƒí•œ 패키지명 ìž…ë ¥
*/
MatplotPackage.prototype.showFunctionTitle = function() {
$(this.wrapSelector('.vp-funcNavi')).html(
`
Matplotlib > Import Matplotlib
`
)
// $(this.wrapSelector('.vp_functionName')).text('Import Matplotlib');
}
/**
* get metadata
* @param {String} id id
*/
MatplotPackage.prototype.getMetadata = function(id) {
if (this.metadata == undefined)
return "";
var len = this.metadata.options.length;
for (var i = 0; i < len; i++) {
var obj = this.metadata.options[i];
if (obj.id == id)
return obj.value;
}
return "";
}
/**
* stylesheet autocomplete
*/
MatplotPackage.prototype.bindStylesheet = function() {
var that = this;
// 사용가능한 ìŠ¤íƒ€ì¼ ì‹œíŠ¸ 조회
var stylesheetTag = $(this.wrapSelector('#stylesheet'));
// ìŠ¤íƒ€ì¼ ì‹œíŠ¸ 조회 코드
var code = new sb.StringBuilder();
code.appendLine('import matplotlib.pyplot as plt');
code.appendLine('import json');
// code.append(`print(json.dumps(plt.style.available))`);
code.append(`print(json.dumps([{ 'label': s, 'value': "'"+s+"'" } for s in plt.style.available]))`);
this.kernelExecute(code.toString(), function(result) {
// 사용가능한 ìŠ¤íƒ€ì¼ ì‹œíŠ¸ 목ë¡
var varList = JSON.parse(result);
var suggestInput = new vpSuggestInputText.vpSuggestInputText();
suggestInput.setComponentID('stylesheet');
suggestInput.addClass('vp-input');
// metadata check
var mdvalue = that.getMetadata('stylesheet');
if (mdvalue != undefined && mdvalue != '') {
suggestInput.setValue(mdvalue);
}
suggestInput.setSuggestList(function() { return varList; });
// suggestInput.setNormalFilter(false);
$(stylesheetTag).replaceWith(function() {
return suggestInput.toTagString();
});
});
};
/**
* font family autocomplete
*/
MatplotPackage.prototype.bindSystemfont = function() {
var that = this;
// 사용가능한 í°íŠ¸ ëª©ë¡ ì¡°íšŒ
var fontFamilyTag = $(this.wrapSelector('#fontfamily'));
// í°íŠ¸ 조회 코드
var code = new sb.StringBuilder();
code.appendLine('import json');
code.appendLine("import matplotlib.font_manager as fm");
code.appendLine("_ttflist = fm.fontManager.ttflist");
code.append(`print(json.dumps([{"label": f.name, "value":("'" + f.name + "'")} for f in _ttflist]))`);
this.kernelExecute(code.toString(), function(result) {
// 사용가능한 í°íŠ¸ 목ë¡
var varList = JSON.parse(result);
var suggestInput = new vpSuggestInputText.vpSuggestInputText();
suggestInput.setComponentID('fontfamily');
suggestInput.addClass('vp-input');
// metadata check
var mdvalue = that.getMetadata('fontfamily');
if (mdvalue != undefined && mdvalue != '') {
suggestInput.setValue(mdvalue);
} else {
suggestInput.setValue("'Gulim'");
}
suggestInput.setSuggestList(function() { return varList; });
// suggestInput.setNormalFilter(false);
$(fontFamilyTag).replaceWith(function() {
return suggestInput.toTagString();
});
});
};
/**
* 코드 ìƒì„±
* @param {boolean} exec 실행여부
*/
MatplotPackage.prototype.generateCode = function(addCell, exec) {
try {
var sbCode = new sb.StringBuilder();
// 코드 ìƒì„±
// 필수 ìž…ë ¥ í•ëª©
sbCode.appendFormatLine('import matplotlib.pyplot as {0}', $(this.wrapSelector('#i0')).val());
sbCode.appendFormatLine('%matplotlib {0}', $(this.wrapSelector('#magic')).val());
// style range, sheet
var stylerange = $(this.wrapSelector('#range')).val();
var stylesheet = $(this.wrapSelector('#stylesheet')).val();
if (stylesheet != '') {
if (stylerange == 'all') {
// ì „ì²´ 범위 코드 구성
sbCode.appendFormat("plt.style.use('{0}')", stylesheet);
} else {
// ì¼ë¶€ 범위 코드 구성
sbCode.appendFormatLine("with plt.style.context({0}):", stylesheet);
sbCode.append(" pass");
}
}
// font family, size
var fontfamily = $(this.wrapSelector('#fontfamily')).val();
var fontsize = $(this.wrapSelector('#fontsize')).val();
sbCode.appendLine('');
sbCode.appendLine("from matplotlib.pylab import rcParams");
if (fontfamily != '') {
sbCode.appendFormatLine("rcParams['font.family'] = {0}", fontfamily);
}
if (fontsize != '') {
sbCode.appendFormatLine("rcParams['font.size'] = {0}", fontsize);
}
sbCode.appendLine("#rcParams['figure.figsize'] = 12, 8");
sbCode.appendLine("#rcParams['axes.grid'] = True");
// 코드 추가 ë° ì‹¤í–‰
if (addCell) this.cellExecute(sbCode.toString(), exec);
} catch (exmsg) {
// ì—러 표시
vpCommon.renderAlertModal(exmsg);
return "BREAK_RUN"; // 코드 ìƒì„± 중 오류 ë°œìƒ
}
return sbCode.toString();
}
return {
initOption: initOption
};
});