Skip to content

Commit

Permalink
chart.jsを自動的に取り込むように修正する #1545
Browse files Browse the repository at this point in the history
  • Loading branch information
@kujirahand
kujirahand committed Oct 17, 2023
1 parent 9139a5e commit a6d4dfa
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 59 deletions.
9 changes: 3 additions & 6 deletions demo/index.html
View file
Expand Up @@ -104,20 +104,17 @@ <h4>「↓」ボタンについて</h4>
</div>
</div>

<!-- editor script -->
<!--React.jsのスクリプトはHTMLの末尾で読み込む-->
<!-- なでしこ-->
<!-- なでしこ(必須の宣言) -->
<script src="../release/wnako3.js"></script>
<!-- なでしこ(エディタを使うための宣言) -->
<script src="../release/editor.js"></script>
<script src="../release/version.js"></script>
<!-- なでしこ(オプションプラグインの宣言) -->
<script src="../release/plugin_markup.js"></script>
<script src="../release/plugin_kansuji.js"></script>
<script src="../release/plugin_turtle.js"></script>
<script src="../release/plugin_caniuse.js"></script>
<script src="../release/plugin_webworker.js"></script>
<script src="../release/nako_gen_async.js"></script>
<!-- Chart.js -->
<script defer src="extlib/chart.js@3.2.1/chart.min.js"></script>
<script>
// 部品スキル実装 #1033
(function(){
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "nadesiko3",
"version": "3.4.21",
"version": "3.4.22",
"description": "Japanese Programming Language",
"type": "module",
"main": "src/index.mjs",
Expand Down
4 changes: 2 additions & 2 deletions src/plugin_browser.mjs
View file
Expand Up @@ -43,9 +43,9 @@ const PluginBrowser = {
type: 'const',
value: {
pluginName: 'plugin_browser',
pluginVersion: '3.2.24',
pluginVersion: '3.4.22',
nakoRuntime: ['wnako'],
nakoVersion: '^3.2.24' // 要求なでしこバージョン
nakoVersion: '^3.4.22' // 要求なでしこバージョン
}
},
'初期化': {
Expand Down
4 changes: 2 additions & 2 deletions src/plugin_browser.mts
View file
Expand Up @@ -45,9 +45,9 @@ const PluginBrowser = {
type: 'const',
value: {
pluginName: 'plugin_browser', // プラグインの名前
pluginVersion: '3.2.24', // プラグインのバージョン
pluginVersion: '3.4.22', // プラグインのバージョン
nakoRuntime: ['wnako'], // 対象ランタイム
nakoVersion: '^3.2.24' // 要求なでしこバージョン
nakoVersion: '^3.4.22' // 要求なでしこバージョン
}
},
'初期化': {
Expand Down
67 changes: 43 additions & 24 deletions src/plugin_browser_chart.mjs
View file
Expand Up @@ -3,15 +3,21 @@ export default {
'グラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
// Chart.jsが使えるかチェック
const win = sys.__v0.WINDOW;
if (typeof win === 'undefined') {
throw new Error('『グラフ描画』のエラー。ブラウザで実行してください。');
}
// Chart.jsがないので自動的に取り込む
if (typeof win.Chart === 'undefined') {
console.log('try to load chart.js');
await loadScript('https://cdn.jsdelivr.net/npm/chart.js@4.4.0');
console.log('loaded chart.js');
}
if (typeof win.Chart === 'undefined') {
throw new Error('『グラフ描画』のエラー。Chart.jsを取り込んでください。');
throw new Error('『グラフ描画』のエラー。Chart.jsを取り込みに失敗しました。');
}
const Chart = win.Chart;
// Canvasが有効？
Expand Down Expand Up @@ -41,8 +47,8 @@ export default {
'線グラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
data = sys.__exec('二次元グラフデータ変形', ['line', data, sys]);
const d = {
type: 'line',
Expand All @@ -55,8 +61,8 @@ export default {
'棒グラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
// グラフオプションの差分作成
const gopt = Object.assign({}, sys.__v0['グラフオプション'], { 'indexAxis': 'x' });
data = sys.__exec('二次元グラフデータ変形', ['bar', data, sys]);
Expand All @@ -65,14 +71,15 @@ export default {
data,
options: gopt
};
return sys.__exec('グラフ描画', [d, sys]);
return await sys.__exec('グラフ描画', [d, sys]);
}
},
'横棒グラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
// グラフオプションの差分作成
const gopt = Object.assign({}, sys.__v0['グラフオプション'], { 'indexAxis': 'y' });
data = sys.__exec('二次元グラフデータ変形', ['bar', data, sys]);
Expand All @@ -87,8 +94,8 @@ export default {
'積上棒グラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
// グラフオプションの差分作成
const gopt = Object.assign({}, sys.__v0['グラフオプション'], {
'indexAxis': 'x',
Expand All @@ -109,8 +116,8 @@ export default {
'積上横棒グラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
// グラフオプションの差分作成
const gopt = Object.assign({}, sys.__v0['グラフオプション'], {
'indexAxis': 'y',
Expand All @@ -131,8 +138,8 @@ export default {
'散布図描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
// グラフオプションの差分作成
const gopt = Object.assign({}, sys.__v0['グラフオプション'], {});
data = sys.__exec('二次元グラフデータ変形', ['scatter', data, sys]);
Expand All @@ -147,8 +154,8 @@ export default {
'円グラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
data = sys.__exec('二次元グラフデータ変形', ['pie', data, sys]);
const d = {
type: 'pie',
Expand All @@ -161,8 +168,8 @@ export default {
'ドーナツグラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
data = sys.__exec('二次元グラフデータ変形', ['pie', data, sys]);
const d = {
type: 'doughnut',
Expand All @@ -175,8 +182,8 @@ export default {
'ポーラーグラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
data = sys.__exec('二次元グラフデータ変形', ['pie', data, sys]);
const d = {
type: 'polarArea',
Expand All @@ -189,8 +196,8 @@ export default {
'レーダーグラフ描画': {
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data, sys) {
asyncFn: true,
fn: async function (data, sys) {
data = sys.__exec('二次元グラフデータ変形', ['bar', data, sys]);
const d = {
type: 'radar',
Expand All @@ -203,7 +210,6 @@ export default {
'二次元グラフデータ変形': {
type: 'func',
josi: [['の'], ['を']],
pure: true,
fn: function (t, dataOrg, sys) {
// データを破壊的に変更してしまうので最初にデータをコピー (#1416)
const data = JSON.parse(JSON.stringify(dataOrg));
Expand Down Expand Up @@ -297,3 +303,16 @@ export default {
}
}
};
// scriptタグを追加して外部ライブラリを読み込む
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = resolve;
script.onerror = () => {
reject(new Error(`Failed to load script at url: ${url}`));
};
document.getElementsByTagName('head')[0].appendChild(script);
});
}
68 changes: 44 additions & 24 deletions src/plugin_browser_chart.mts
View file
Expand Up @@ -3,15 +3,21 @@ export default {
'グラフ描画': { // @ Chart.jsを利用して、DATAのグラフを描画 // @ぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
// Chart.jsが使えるかチェック
const win: any = sys.__v0.WINDOW
if (typeof win === 'undefined') {
throw new Error('『グラフ描画』のエラー。ブラウザで実行してください。')
}
// Chart.jsがないので自動的に取り込む
if (typeof win.Chart === 'undefined') {
console.log('try to load chart.js')
await loadScript('https://cdn.jsdelivr.net/npm/chart.js@4.4.0')
console.log('loaded chart.js')
}
if (typeof win.Chart === 'undefined') {
throw new Error('『グラフ描画』のエラー。Chart.jsを取り込んでください。')
throw new Error('『グラフ描画』のエラー。Chart.jsを取り込みに失敗しました。')
}
const Chart = win.Chart
// Canvasが有効？
Expand All @@ -35,8 +41,8 @@ export default {
'線グラフ描画': { // @ 線グラフを描画 // @せんぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
data = sys.__exec('二次元グラフデータ変形', ['line', data, sys])
const d = {
type: 'line',
Expand All @@ -49,8 +55,8 @@ export default {
'棒グラフ描画': { // @ 棒グラフを描画 // @ぼうぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
// グラフオプションの差分作成
const gopt = Object.assign({},
sys.__v0['グラフオプション'],
Expand All @@ -61,14 +67,15 @@ export default {
data,
options: gopt
}
return sys.__exec('グラフ描画', [d, sys])
return await sys.__exec('グラフ描画', [d, sys])
}
},
'横棒グラフ描画': { // @ 横棒グラフを描画 // @よこぼうぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
// グラフオプションの差分作成
const gopt = Object.assign({},
sys.__v0['グラフオプション'],
Expand All @@ -85,8 +92,8 @@ export default {
'積上棒グラフ描画': { // @ 複数列のデータがある場合積み上げ棒グラフを描画 // @つみあげぼうぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
// グラフオプションの差分作成
const gopt = Object.assign({},
sys.__v0['グラフオプション'],
Expand All @@ -109,8 +116,8 @@ export default {
'積上横棒グラフ描画': { // @ 複数列のデータがある場合積み上げ棒グラフを描画 // @つみあげよこぼうぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
// グラフオプションの差分作成
const gopt = Object.assign({},
sys.__v0['グラフオプション'],
Expand All @@ -133,8 +140,8 @@ export default {
'散布図描画': { // @ 散布図を描画 // @さんぷず
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
// グラフオプションの差分作成
const gopt = Object.assign({},
sys.__v0['グラフオプション'],
Expand All @@ -151,8 +158,8 @@ export default {
'円グラフ描画': { // @ 円グラフを描画 // @えんぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
data = sys.__exec('二次元グラフデータ変形', ['pie', data, sys])
const d = {
type: 'pie',
Expand All @@ -165,8 +172,8 @@ export default {
'ドーナツグラフ描画': { // @ 円グラフ（ドーナツ）を描画 // @ドーナツぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
data = sys.__exec('二次元グラフデータ変形', ['pie', data, sys])
const d = {
type: 'doughnut',
Expand All @@ -179,8 +186,8 @@ export default {
'ポーラーグラフ描画': { // @ 円グラフ（鶏頭グラフ/ポーラーエリアチャート）を描画 // @ぽーらーぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
data = sys.__exec('二次元グラフデータ変形', ['pie', data, sys])
const d = {
type: 'polarArea',
Expand All @@ -193,8 +200,8 @@ export default {
'レーダーグラフ描画': { // @ レーダーチャートを描画 // @れーだーぐらふびょうが
type: 'func',
josi: [['を', 'で', 'の']],
pure: true,
fn: function (data: any, sys: any) {
asyncFn: true,
fn: async function (data: any, sys: any) {
data = sys.__exec('二次元グラフデータ変形', ['bar', data, sys])
const d = {
type: 'radar',
Expand All @@ -207,7 +214,6 @@ export default {
'二次元グラフデータ変形': { // @ 二次元配列をXXグラフ描画の形式に整形する。種類TとDATAを指定。 // @にじげんぐらふでーたへんけい
type: 'func',
josi: [['の'], ['を']],
pure: true,
fn: function (t: any, dataOrg: any, sys: any) {
// データを破壊的に変更してしまうので最初にデータをコピー (#1416)
const data = JSON.parse(JSON.stringify(dataOrg))
Expand Down Expand Up @@ -298,3 +304,17 @@ export default {
}
}
}

// scriptタグを追加して外部ライブラリを読み込む
function loadScript (url: string) {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
script.onload = resolve
script.onerror = () => {
reject(new Error(`Failed to load script at url: ${url}`))
}
document.getElementsByTagName('head')[0].appendChild(script)
});
}

0 comments on commit a6d4dfa

Please sign in to comment.