常連

拍手喝采

自己紹介

Electronでアプリを作っています。browserWindowで開いている画面は全てローカルのhtmlで、httpはscriptやcss含めて一切使っておりません。
fpsが1桁台まで落ちてしまうのでdevtoolのPerformanceタブで何に時間がかかっているのか確認したのですが、何の処理も無い遊びの時間が大量に発生していました。
以下の画像で言うと、選択したフレームは313.4msかかり、3fpsしか出ていません。
![イメージ説明](1680a934f8f8b9ff4d09188aed623abb.png)

作っているアプリはcanvas数枚やthree.jsを使っているのですが、このmainプロセスの処理は全部合わせても20ms程度です。しかしピンク色の部分はmainもrasterもGPUも何もありません。

この部分は一体何をしているのでしょうか？
また、画像で言う所の1390msから1フレームが始まり1710msまで時間がかかっているのですが、ピンクの部分を待たずに1440msあたりでフレームを描画してもらうにはどうしたらよいでしょうか？

Electronでfpsが1桁まで下がってしまうが、devtoolのPerformanceタブを見ても原因が分からない時

任意のJavaScriptをC言語に変換したいです。なぜなら、[pequin](https://github.com/pepper-project/pequin)というCのライブラリで任意のJavaScriptの関数をゼロ知識証明できるようにしたいからです。
（今回実装したいゼロ知識証明は、Ethereumのzk-SNARKのように任意のコードを正しく実行したかをゼロ知識・非対話で証明するようなものです。このサイトのような感じです。https://zoom-blc.com/what-is-ethereum-zk-snark）
　もちろん、JavaScriptは動的型付け言語なのに対しC言語は静的型付け言語なので、実行しながら変換しても大丈夫です。
　
　お忙しいところすみませんが、ご回答よろしくお願いします。

JavascriptをC言語に変換する方法

js の　chart.js プラグインへの質問です。
ページ内に複数あるグラフの内、特定のグラフに絞ってツールチップ常時表示する方法を模索しています。

以下のように、ページ内にある全てのグラフにツールチップの表示をさせる事が実現できたのですが、

```ここに言語を入力
            var data = {
                labels: ['18/01', '18/02', '18/03', '18/04'],
                datasets: [
                    {
                        label: 'hoge',
                        fill: false,
                        backgroundColor: "#000",
                        borderColor: '#000',
                        pointBorderColor: '#000',
                        tension: 0,
                        data: [10, 15, 13, 12]
                    },
                    {
                        label: 'fuga',
                        fill: false,
                        backgroundColor: "#00f",
                        borderColor: '#00f',
                        pointBorderColor: '#00f',
                        tension: 0,
                        data: [12, 13, 16, 13]
                    },
                ]
            };

            Chart.pluginService.register({
                beforeRender: function (chart) {
                    console.log(chart);
                    if (chart.config.options.showAllTooltips) {
                        chart.pluginTooltips = [];
                        chart.config.data.datasets.forEach(function (dataset, i) {
                            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                                chart.pluginTooltips.push(new Chart.Tooltip({
                                    _chart: chart.chart,
                                    _chartInstance: chart,
                                    _data: chart.data,
                                    _options: chart.options,
                                    _active: [sector],
                                    no: i
                                }, chart));
                            });
                        });
                        chart.options.tooltips.enabled = false;
                    }
                },
                afterDraw: function (chart, easing) {
                    console.log(chart);
                    if (chart.config.options.showAllTooltips) {
                        if (!chart.allTooltipsOnce) {
                            if (easing !== 1)
                                return;
                            chart.allTooltipsOnce = true;
                        }
                        chart.options.tooltips.enabled = true;
                        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                            tooltip.initialize();
                            tooltip.update();
                            // we don't actually need this since we are not animating tooltips
                            tooltip.pivot();
                            tooltip.transition(easing).draw();
                        });
                        chart.options.tooltips.enabled = false;
                    }
                }
            })

            var ctx = $('#hogehoge').get(0).getContext('2d');

            var myChart = new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    showAllTooltips: true,
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: 'single',
                    },
                },
            });

            ctx = $('#fugafuga').get(0).getContext('2d');

            myChart = new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    showAllTooltips: true,
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: 'single',
                    },
                },
            });

```

hogehoge、fugafuga、両方のグラフにツールチップが表示されます。

以下のように個別プラグイン化することで、個別のグラフに対応できるのではと考えたのですが、
どうもプラグインへのアクセス自体が確認できないような状態です。

```ここに言語を入力
            var data = {
                labels: ['18/01', '18/02', '18/03', '18/04'],
                datasets: [
                    {
                        label: 'hoge',
                        fill: false,
                        backgroundColor: "#000",
                        borderColor: '#000',
                        pointBorderColor: '#000',
                        tension: 0,
                        data: [10, 15, 13, 12]
                    },
                    {
                        label: 'fuga',
                        fill: false,
                        backgroundColor: "#00f",
                        borderColor: '#00f',
                        pointBorderColor: '#00f',
                        tension: 0,
                        data: [12, 13, 16, 13]
                    },
                ]
            };

            var plugin = {
                beforeRender: function (chart) {
                    console.log(chart);
                    if (chart.config.options.showAllTooltips) {
                        chart.pluginTooltips = [];
                        chart.config.data.datasets.forEach(function (dataset, i) {
                            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                                chart.pluginTooltips.push(new Chart.Tooltip({
                                    _chart: chart.chart,
                                    _chartInstance: chart,
                                    _data: chart.data,
                                    _options: chart.options,
                                    _active: [sector],
                                    no: i
                                }, chart));
                            });
                        });
                        chart.options.tooltips.enabled = false;
                    }
                },
                afterDraw: function (chart, easing) {
                    if (chart.config.options.showAllTooltips) {
                        if (!chart.allTooltipsOnce) {
                            if (easing !== 1)
                                return;
                            chart.allTooltipsOnce = true;
                        }
                        chart.options.tooltips.enabled = true;
                        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                            tooltip.initialize();
                            tooltip.update();
                            tooltip.pivot();
                            tooltip.transition(easing).draw();
                        });
                        chart.options.tooltips.enabled = false;
                    }
                }
            }

            var ctx = $('#hogehoge').get(0).getContext('2d');

            var myChart = new Chart(ctx, {
                type: 'line',
                data: data,
                plugins: [plugin],
                options: {
                    showAllTooltips: true,
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: 'single',
                    },
                },
            });

            ctx = $('#fugafuga').get(0).getContext('2d');

            myChart = new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    showAllTooltips: true,
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: 'single',
                    },
                },
            });

```

そもそものアプローチが間違っていたりしますでしょうか。
ご存知の方、いらっしゃればアドバイスをいただけましたら幸いです。

chart.js v2 で特定のグラフにツールチップを表示する

###前提

railsで数量を振替する銀行みたいな機能を実装できたので、
全てのアカウントが持つ残高に対して増減（計算）を
定時処理(rakeタスク）したいと考えています。
例えば、「**毎月、残高の１％を回収します**（全ての口座は回収役の口座に残高の１％を支払う）」ということをやりたいと思っています。

ただ、振替処理には複数のモデルが動いている為
update_allで残高カラムのみを「一括的な更新処理」してしまうと
他のモデルとのデータの整合性が崩れてしまうので、
それぞれのモデルに対して「一括的な処理」をしなければならないと考えています。
![![イメージ説明](a9e929c3349e20071173e4d01e2ad381.png)]
現状では、この図のモデルを動かすことで振替処理を実行している。

###実現したいこと

ここからが本題です。
前置きが長くなりましたが、やりたいことを一言で言うと
「ほぼ全ての口座が、自動的な投稿を一斉に行う」ようにしたいのです。

Account（口座）モデルはAccountTransaction（取引）モデルを多数保有する1:多の関係になっていて、
Accoutモデルには、balance(残高）が記録され、
AccountTransactionモデルにはamount(取引額）と支払口座idと受取口座idを記録することになっています。

そこで、
AccountTransactionモデルに対して
・**他のモデルのカラムの値（Accountモデルのbalanceカラム)から１％分の額を計算して取引額として記録させ**、
・**各支払口座idを記録させ**、
・**ほぼ全ての口座で（回収役口座であるAccountモデルのidが19のレコードを除いて）一括で行う**
にはどうすればいいでしょうか？



###試しに書いたソースコード

lib/tasksのrakeファイルより抜粋。
```ここに言語を入力
		begin
			ActiveRecord::Base.transaction{

                #取引アカウントにレコードを一括作成したい
                AccountTransaction.where.not(id: 19).create(
                	withdrawal_account_id: ??????????,#支払側の口座id、
                	"deposit_account_id: 19",#回収役の口座id（受取側の口座id）
                	amount: ?????? #取引額
                	)

			}
		end
```



###補足情報(言語/FW/ツール等のバージョンなど)
Rails 5.1.3
ruby 2.4.1

railsで全てのアカウントに対して数値が絡む自動的な投稿を一斉に行いたい

今goaのジェネレータを作ろうとしておりましてgoの複雑にネストした構造体を眺めながら作業しています。
``github.com/k0kubun/pp`` をつかって標準出力に構造体の内容を出しながら動かしているのですが
いかんせん構造体のネストが複雑ですし毎回絞り込んで出力するのが面倒くさいです。

なにかGoの複雑なネストをしている構造体を効率よく眺める方法はないでしょうか
ただテキストに貼り付けるだとだとカラムが多すぎた場合にネスト状態がわかりづらいので上手いテクニックがあればご教授お願い致します。