Plots2: サブスクリプション統計を表示する方法を探る

これはどのように ？

@dewanhimanshu提案に感謝しますが、 https： //publiclab.org/stats/subscriptionsを見ると、たくさんのタグがあり、各行にタグがあると、ページが非常に長くなります。 そう思いませんか？ 多分あなたは別のアイデアを持っていますか？ ありがとう

これらの統計を単調ではなく、もう少し効率的に表示する方法については考えていますが、サイトのUIスキームとは異なる場合があります。 モックアップ@cesswairimuを見たいですか？

素晴らしい！ ええ@ IshaGupta18。 投稿してください

さて、ページの長さを無期限に長くしたくないので、0-5、5-10、10-15などの統計値のグループを作成することを考えました（クラスサイズはそれに応じて調整できます） ：

バブルをクリックすると、展開され、その統計値を持つタグが表示されます。

もう一度クリック/離すと元の形に戻ります。

これはどのように見えますか？ 少しクリエイティブで遊び心があり、スペースを減らすことができるのではないかと思いました。 @cesswairimuはどう思い

わお！ @ IshaGupta18私はこのアイデアが
また、ポップアップに特定のタグ値を追加できる場合もあります。たとえば、 balloon-mapping -1, mapknitter-2,は分析の目的に役立つ場合があります。 あなたはどう思いますか？

どうもありがとう
はい、 balloon-mapping -1, mapknitter-2を追加すると、分析に役立つため、すばらしいと思います。

素晴らしい。 これを実装することに興味がありますか？

はい、これを実装したいと思います！ また、おそらくデザインを改善する可能性のあるいくつかの小さな変更を加えた、別の同様のモックアップをお勧めします！

素晴らしい@ IshaGupta18。 ありがとう

@jywarren実装を開始する前に、ここで実装できるものが他にある場合に備えて、デザインを確認してほしいと思いました。

これはとてもクールです！ とてもクリエイティブ！

デザインに少し影響を与える可能性のあるいくつかの考え：

1. これがJavaScriptを使用して実装される場合（たとえば、p5js- https： //p5js.org/（
2. つまり、スタンドアロンのJS視覚化として開発し、JSONの元の表示をたとえば/stats/subscription.jsonまたは/stats/subscription/?format=json保持できることを意味します。
3. フォローする最も人気のあるタグが一番上になるように、降順で表示する必要がありますか？
4. 全体的なビューにタグ名の一部を表示することは素晴らしいことだと思います。そのため、データを「スキム」する方法がある可能性があります。 何か案は？ 多分これはわずかに異なるレイアウトを意味しますか？
5. 0〜5のように人気の低い括弧内には、大量のタグがある場合があります。 円に収まらないほど多すぎる場合は、どうすればよいですか？

私はサークルのアイデアが大好きです。 円の横にタグを表示し、ページを下に向かって大きな円から小さな円へと下降する円の線がある場合はどうなりますか？ または別のレイアウトのアイデア？ アイデアを受け入れましょう！

どうもありがとう

ただし、これで問題がより適切に解決されると思います。
円の横にいくつかのタグを表示できます（サイズの降順でページを下に移動します）。たとえば、3つとすると、バブルをクリックすると、すべてのタグが表示されます。 このようにして、ページをざっと読み、情報をそのまま維持することができます。

これはどのように聞こえますか？

素晴らしい、実装する前に別のモックアップを実行しますか？ アイデアはありましたか
これをどのように実装したいか、たとえば、CSSを使用してサークルを作成できます
border-radius、またはp5jsを使用できますか？ 私はそれをからロードすると思います
次のようなものを使用したJSONアドレス
$ .json（ '/ stats / subscriptions.json'）。onComplete（function（response）{...}）;
良いでしょう。 統計コントローラーにいくつかの小さな変更が必要になります。

12:54イシャーグプタで金、2019年2月8日に[email protected]書きました：

どうもありがとう：//github.com/jywarren ！ 私はすべてだと思います
アイデアは本当に良いです。 私でさえ、ポイント5で問題について言及していました。
それを解決するために、私はバブルを拡大することを考えていました
その間隔内のタグの数。

ただし、これで問題がより適切に解決されると思います。
円の横にいくつかのタグを表示できます（降順になります）
それらのサイズの順序、ページを下に行く）、それらのうちの3つを言ってから
バブルをクリックすると、すべてのタグが表示されます。 このように、私たちはスキミングすることができます
ページを介して、情報をそのまま保持します。

これはどのように聞こえますか？

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/publiclab/plots2/issues/4603#issuecomment-461888974 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AABfJ15nyiYVcP-FiwUF4vfBccV5SQQfks5vLbmogaJpZM4Z8bqv
。

もちろん、別のモックアップを作成できると思います。 実装部分についてはあまり考えていなかったので、CSSと通常のJSを使うことを考えていましたが、p5jsでうまくいくと思ったら、それでいいのです！ 元のJSONアドレスを保持し、JSを使用してこのページをレンダリングできると思います。

基本的なJSとCSSを使用できる場合は、全体を含めるよりも試してみましょう。
新しいライブラリ。 しかし、p5jsを試すことに興味がある場合は、
そこにも何か...！

13:18イシャーグプタで金、2019年2月8日に[email protected]書きました：

もちろん、別のモックアップを作成できると思います。 私は本当に考えていませんでした
実装部分では、CSSと通常のJSを使用することを考えていましたが、
あなたはp5jsがうまくいくと思います、私たちはそれで行くことができます！ 保持できると思います
元のJSONアドレスであり、JSを使用してこのページをレンダリングします。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/publiclab/plots2/issues/4603#issuecomment-461895999 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AABfJ1K0MU_eBZJN35QyqnxC7EsI4kaBks5vLb8-gaJpZM4Z8bqv
。

はい、両方を調べて、どちらがディスプレイとサイトに適しているかを確認できると思います。 学期半ばの試験を終えたら、より良いペースでこれに取り組み始めるでしょう！ どうもありがとう！

あなたの試験で頑張ってください！

13:32イシャーグプタで金、2019年2月8日に[email protected]書きました：

はい、両方を調べて、どちらが適しているかを確認できると思います。
サイトだけでなくディスプレイも！ 私はより良いペースでこれに取り組み始めるでしょう
学期半ばの試験を終えたら！ どうもありがとう！

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/publiclab/plots2/issues/4603#issuecomment-461900313 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AABfJ-_qLbiGiTWACqsQ6EFlf3DD2OCyks5vLcKWgaJpZM4Z8bqv
。

更新されたデザインは次のとおりです。

バブルをクリックすると（タグの数に比例して展開できます）

これがどのように見えるか教えてください！

こんにちは@ IshaGupta18 、これはどうですか？ 何かお手伝いできることはありますか？ ありがとう

@jywarrenは、最終的なデザインを承認するために、私は待っていたのでちょっと、@cesswairimuは実際に私が意図的に作業を開始しませんでした。 現在、大学でいくつかの重要な試験が行われているので、このアイデアが完全に承認され、それらの試験が終了したらすぐに、これに取り組み始めます。 この遅れをお詫び申し上げます、私はそれを意図していませんでした。

心配いりません

これはとてもいいです！ これはバラバラに実装できると思います。 すべてのタグとサブスクライバーの数を右側のリストにリストするだけの静的な設計から始めて、後でインタラクティブな部分に取り組むことができます。 それはどのように聞こえますか、それを小さな断片に分割して1つずつ実行しますか？

あなたの試験がうまくいくことを願っていますIsha！

はい、それは素晴らしいことです！ 小さなPRから始めて、
あなたが提案したもの！ どうもありがとう！

水には、2019年3月6日、午前3時24分AMジェフリー・ウォーレン[email protected]
書きました：

これはとてもいいです！ これはバラバラに実装できると思います。 我々は出来た
すべてのタグと数をリストするだけの静的な設計から始めます
右側のリストのサブスクライバーは、後でインタラクティブに作業します
部品！ それはどのように聞こえますか、それをより小さな断片に分割して1つずつ実行します
一？

あなたの試験がうまくいくことを願っていますIsha！

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/publiclab/plots2/issues/4603#issuecomment-469873165 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/Am54Z8i6cuukmNb_5zNrAfwJXj4Jskesks5vTueogaJpZM4Z8bqv
。

@gettyorawoこれに取り組むことに興味がありますか？ /stats/subscriptionsでstatic design just listing all tags and the number of subscribers in the right-hand list PRを作成できます

ねえ@cesswairimuこれで活動しなかったことをとても残念に思います。 @GettyOrawoは、興味があれば小さなPRから始めて、インタラクティブな部分を引き受けることができるでしょうか。 このようにして、より効率的に作業できます。 私はとにかく助けるためにここにいます！ どうもありがとう！

ねえ@cesswairimuと@ IshaGupta18私はこれを取り上げます

@GettyOrawoは、助けが必要な場合は私に知らせてください！ 実際には、タグを各間隔に取得するためのロジックを記述し、次にそれを表示するための別のPRを記述するなど、さらに小さなPRに分割することができます。 これにより、確認が容易になります。 どう思いますか？

心配はいりません

どうもありがとうございました@ IshaGupta18行き詰まったときはいつでも連絡します

そして、デザインの良い仕事。 彼らは素晴らしいです！

ちょっと@ IshaGupta18と@cesswairimuは、ループを維持するために、まだ2D物理エンジンを理解していて、これを設定するために必要ないくつかの基本を学んでいます。 私は正しい方向に進んでいることを願っていますか、それとも最初に別のPRでデータをグループ化することから始めるべきですか？

ねえ@GettyOrawo私はあなたがそれをする必要はないと信じています。 おそらく行うことは、この行https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8を削除して、データの表示方法を定義できるようにすることです。 テンプレートはhttps://github.com/publiclab/plots2/blob/master/app/views/stats/subscriptions.html.erbですでに作成されてい@tagsは、ペアキーがtag name 、値がsubscriptions countハッシュです。 まず、これをhttps://publiclab.org/tagsに似た単純なリストに表示し

さて、これは完全に理にかなっています。 ありがとう@cesswairimu

これを見逃してすみません。 はい、これがやらなければならないことだと思います。
最初は非常にシンプルに保つようにしてください。タグ名をいくつか付けてください。
ページの片側！ どうもありがとう！

金、2019年3月15日には、6：50 PM GettyOrawoの[email protected]は書きました：

さて、これは完全に理にかなっています。 ありがとう@cesswairimu
https://github.com/cesswairimu

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/publiclab/plots2/issues/4603#issuecomment-473283169 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/Am54ZyexnFJY3eTE9mj-9ZxHxlpPeD67ks5vW540gaJpZM4Z8bqv
。

ねえ@GettyOrawo ！ これで作業はどのように進んでいますか。チェックインして、助けが必要かどうかを確認してください。

ねえ@ IshaGupta18私はちょうど開始PRを上げました。 統計を簡単な表にまとめることができました。 stats_controllerの空の
次に、すべてのテストで機能することを確認するために、同じテストを作成する必要があります。

申し訳ありませんが@GettyOrawoこれがあなたの最初の問題であるため、私はあなたに十分な指示を与えません@tagsはハッシュとして提供されるため、これを行う必要はありません。 <strong i="7">@tags</strong> = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}}ここでできることは、この行https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8を削除することです
次に、 table inline-gridを使用してテーブルのスタイルを設定できるこの素晴らしいテーブルクラスが表示されます。 したがって、ビューにはこのコードが含まれる可能性があります

<br>
    <table class="table inline-grid">
        <tr>
            <th> Tag </th>
            <th> Number of Subscribers </th>
        </tr>
        <% @tags.each do |tag, tag_count| %>
            <tr>
                <td> <%= tag %> </td>
                <td> <%= tag_count %></td>
            </tr>
        <% end %>
    </table>

それなら私たちは良いはずだと思います

テストに関しては、すべて、ブログ、テストなど、いくつかのタグのデータをシードしました...ユーザーにこれらのタグのいくつかをサブスクライブさせることができ、 /stats/subscriptionsいくつかのデータが表示されます。 ユーザー名は、admin、moderator、userです。 すべてのパスワードはpasswordです。
テストに十分でない場合は、このコマンドgit push -f https://github.com/publiclab/plots2.git HEAD:unstable実行してブランチを不安定にすることができます。他の人のテストに干渉しないように、gitterチャネルで不安定にプッシュしていることを忘れないでください。 コードは、約20分後にhttp://unstable.publiclab.org/から入手できるはずです。
ご不明な点がございましたら、以下にコメントしてください。
ありがとう

そうそう、完全に理にかなっています。
このコードは、サブスクリプション番号とともに名前を表示します。

<br>
    <table class="table inline-grid">
        <tr>
            <th> Tag </th>
            <th> Number of Subscribers </th>
        </tr>
        <% @tags.each do |tag, tag_count| %>
            <tr>
                <td> <%= tag %> </td>
                <td> <%= tag_count %></td>
            </tr>
        <% end %>
    </table>

お気に入り：

コントローラーの非常に醜いコードの場合：
<strong i="42">@tags</strong> = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}}

統計を共通のサブスクリプション番号にグループ化しようとしました。たとえば、1の統計は["amanda-1"、 "grace-1"]になり、43の統計は["cess-43"、 "isha-43"になります。 ]共通のサブスクリプション番号を持つすべての統計が一緒になるようにします。 ただし、多くのリファクタリングが必要です。これが、私がそれらを出力することを考えていた方法です。

最初、 @ tagsは、キーをタグとして、値をそのタグのサブスクリプション数として持つハッシュです。
私の質問：このコードをビューに埋め込む必要がありますか、それともこの方法で並べ替えることができるようにコントローラーアクションに含める必要がありますか？

ああすごい！ 私はあなたのディスプレイがとても良く見えるのを見ます：balloon:。 後でリファクタリングできます。 ありがとう

ここで行われた素晴らしい仕事@GettyOrawo ！ お気軽にご相談ください！ @cesswairimuこれが

よろしくお願いします。進捗状況を更新します。

ちょっと@cesswairimu、@ IshaGupta18と私は私が、私はそれを永遠に服用することができることを心配しているので、以下のプル要求にこの問題にでてるところ私が提出した@jywarren：

https://github.com/publiclab/plots2/pull/5224

指定されたモックアップとして統計を表示する方法を学ぶのに少し時間がかかると感じています。 私はp2.jsとmatter.jsに関する記事とチュートリアルを読み終えました。 実際には実行可能ですが、思ったよりもかなり時間がかかります。 これをマージして、将来的にはディスプレイをより良く作成することは可能ですか？

Outreachyの申請期限に間に合わせるのに苦労しているので、それは圧倒的なことですが、これが私の最初の問題です。 あなたたちはこれについてどう思いますか？

これは私がこれまでに持っているものです：

ねえ@GettyOrawo見栄えが良く、後で改善できることは確かです...コード気候の問題を修正できれば、私たちは良いはずです。 これに取り組んでくれてありがとう。

はい、絶対に、これは素晴らしい仕事です！ そして、これについてはあまり心配しないでください
今、あなたのアプリケーションに焦点を合わせてください、これは本当に十分です！ どうもありがとう！

木、2019年3月21日には、午前9時05 PM目的税[email protected]は書きました：

ねえ@GettyOrawohttps ： //github.com/GettyOrawo見栄えが良く、
ええ、後で改善できることを確認してください...コードクライメートを修正できれば
私たちが良いはずの問題。 これに取り組んでくれてありがとう。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/publiclab/plots2/issues/4603#issuecomment-475279958 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/Am54Zw8RlXPdFHli6JdffNyk2CjxyeWNks5vY6aygaJpZM4Z8bqv
。

すごいありがとうございます。 それを修正しましょう。

了解しました。すべてのテストに合格しました。 ：slightly_smiling_face：

@cesswairimuと@ IshaGupta18別の問題に取り組むことはできますか？ または、修正して問題を作成するためのバグを探す必要がありますか？

これはEPICの最初のPRです！ わお！！！ おめでとうございます。そうです、私たちは常に最初の単純なプロジェクトを実行し、フォローアップPRの複雑さを構築することをサポートしています！ わあ、今レビューさせてください。 ありがとうございました！！！！ そしてすべての人に素晴らしい仕事を！

ありがとう@jywarren ！ ：笑顔：

ねえ@ jywarren @ cesswairimuインタラクティブなバブルを作るために、これにはまだ作業が残っています。 すぐにフォローアップします。 フォローアップの問題でも作業を続けることができますが、しばらくの間、これを開いたままにしておく必要があります。 皆さんはどう思いますか？ どうもありがとう@GettyOrawo ！

うん、素晴らしい！ ありがとう@ IshaGupta18 !!!

15:55イシャーグプタで月、2019年3月25日に[email protected]書きました：

ねえ@jywarrenhttps ： //github.com/jywarren @cesswairimu
https://github.com/cesswairimuこれにはまだ作業が残っています
インタラクティブな泡を作ります。 すぐにフォローアップします。 私たちはできる
フォローアップの問題でも作業を続けますが、これを維持する必要があります
私が思うに、1つはしばらく開いています。 皆さんはどう思いますか？ どうもありがとう
素晴らしい仕事@GettyOrawohttps ：//github.com/GettyOrawo ！

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/publiclab/plots2/issues/4603#issuecomment-476352685 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AABfJ9Vf5E1FxwrysJH1AKDsjnUgsGBcks5vaSmOgaJpZM4Z8bqv
。

これを締めくくる...私たちはより良い表示にあり、同じ議論がここhttps://github.com/publiclab/plots2/issues/5260で行われてい