Dashboard Plugin: Build Beautiful Dashboards for Your Cakes

Dashboard for CakePHP

Build beautiful dashboards for your cakes!

This is an unstable repository and should be treated as an alpha.

sample

Requirements

  • CakePHP 3.0.0 or greater.
  • PHP 5.4.16 or greater
  • SQLite or another database driver that CakePHP can talk to (defaults to SQLite).

Install

composer require gourmet/dashboard:*

or by adding this package to your project's composer.json:

"require": {
    "gourmet/dashboard": "*"
}

Now, enable the plugin in your bootstrap.php (including bootstrap and routes):

Plugin::load('Gourmet/Dashboard', ['bootstrap' => true, 'routes' => true]);

You will also need to symlink the assets:

FromTo
plugins/Gourmet/Dashboard/webroot/assets/dashboard.csswebroot/assets/dashboard.css
plugins/Gourmet/Dashboard/webroot/assets/dashboard.jswebroot/assets/dashboard.js
plugins/Gourmet/Dashboard/webroot/fontwebroot/font/dashboard

To preview the sample dashboard, you will need to also copy some sample widgets to your app:

FromTo
plugins/Gourmet/Dashboard/samplessrc/DashboardWidget

That's it! You can now access the sample dashboard at: http://localhost/gourmet/dashboard/index

Documentation

Database Configuration

By default, Dashboard will store event data into a SQLite database in your application's tmp directory. If you cannot install pdo_sqlite, you can configure Dashboard to use a different database by defining a gourmet_dashboard connecting in your config/app.php file.

Widgets

Built-in Widgets

There are several built-in widgets, they are:

  • Clock
  • Comments
  • Graph
  • Iframe
  • Image
  • List
  • Meter
  • Number
  • Text

Configuration

There is no configuration at this time. Options will be coming soon.

Developing Your Own Widgets

You can create your own custom widgets for Gourmet/Dashboard. Until this is better documented, please refer to the sample widgets included.

Credits

Author: Gourmet
Source Code: https://github.com/gourmet/dashboard 
License: MIT license

#php #dashboard #cakephp 

Dashboard Plugin: Build Beautiful Dashboards for Your Cakes
Logan  Anderson

Logan Anderson

1654102800

How to Create A Dashboard App with React Based on A Figma Design

Learn how to create a Dashboard App with React based on a Figma Design. We'll be using TypeScript, CSS Modules, Recharts and GitHub Pages to deploy the app.
0:00:00 Intro
0:00:34 Configuration
0:07:52 Sidebar
0:35:06 Expenses Page
2:02:18 Deployment

👨‍💻️ Resources 

Figma Design: https://bit.ly/3C4QR0w 

Snippets: https://bit.ly/3fkHQ9z 
 

#figma #design-pattern #dashboard #typescript 

How to Create A Dashboard App with React Based on A Figma Design
Gordon  Taylor

Gordon Taylor

1653678060

Jest-dashboard: Command Line Dashboard for Jest

jest-dashboard

A command line dashboard for jest      

Purpose

When you run tests in jest, you probably see this sort of output:

image

While that is helpful, it can get quite hard to parse through the noise. The jest-dashboard simplifies this.

screenshot 2018-01-07 21 34 45

Install

npm install -D jest-dashboard

NPM

Usage

You can use jest-dashboard in two ways:

1). Specify the jest-dashboard reporter as a command line parameter

jest --reporters jest-dashboard

OR

2). Modify your jest configuration file with the following:

"reporters": ["jest-dashboard"]

and run:

jest --config <jest.config.json>

Press Escape to quit

Hot Keys

<TAB> - Switch focus between Table View and Log View

<ESC> - Quit Dashboard

    t - Toggle table view to display Test Files or Test Cases
    
    q - Quit Dashboard

Contribution

This is a work-in-progress and we would like your help. Please consider contributing to this project on one of the following:

  • Dashboard Improvements
  • Integration with Mocha
  • Test Cases
  • Examples

Author: Theoutlander
Source Code: https://github.com/theoutlander/jest-dashboard 
License: MIT license

#javascript #dashboard #jest #testing 

Jest-dashboard: Command Line Dashboard for Jest
Hermann  Frami

Hermann Frami

1653059580

Serverless CloudWatch Dashboards Plugin

Serverless CloudWatch Dashboards Plugin

Serverless plugin to generate AWS CloudWatch dashboard for deployed lambdas

Requirements:

  • Serverless v1.12.x or higher
  • AWS provider

Setup

Installation

Install via npm in the root of your Serverless service:

npm install serverless-plugin-cloudwatch-dashboard

Add the plugin to the plugins array of your Serverless service in serverless.yml:

plugins:
  - serverless-plugin-cloudwatch-dashboard

Configuration

The plugin can be configured by adding a property called dashboard to the custom properties of the Serverless service. Following dashboards are currently supported:

Lambda Dashboards

The configuration can specify the lambda metrics together with the stats of the metrics to be added. The plugin will then generate one dashboard for each metric, with each dashboard containing the specified statistics for each lambda function.

Lambda dashboards can be globally activated/deactivated for all functions by adding an enabled flag to the configuration.

This is the minimum required configuration:

dashboard:
  lambda:
    enabled: true

The default configuration looks like this:

dashboard:
  lambda:
    metrics: [ Duration, Errors, Invocations, Throttles ]
    stats: [p99, p95, p90, p50]
    enabled: true

To gain maximum control over which functions to be included, you can disable lambda dashboards globally,

dashboard:
  lambda:
    enabled: false

and enable it only for specific functions, by setting the dashboard flag for those functions to true:

functions:
    myFunction:
      handler: some_handler
      dashboard: true

DynamoDB Dashboards

The configuration can specify the metrics for DynamoDB Tables and GlobalSecondaryIndexes to be added. The plugin will then generate a new dashboard containing one widget for each metric.

DynamoDB dashboards can be globally activated/deactivated for all tables by adding an enabled flag to the configuration.

This is the minimum required configuration:

dashboard:
  dynamoDB:
    enabled: true

The default configuration looks like this:

dashboard:
  dynamoDB:
    enabled: true
    metrics:
      - ProvisionedReadCapacityUnits
      - ConsumedReadCapacityUnits
      - ProvisionedWriteCapacityUnits
      - ConsumedWriteCapacityUnits

Contribute

Any contribution is more than welcome.

  • Clone the code
  • Install the dependencies with npm install
  • Create a feature branch git checkout -b new_feature
  • Lint with standard npm run lint
  • Create a pull request

Author: Codecentric
Source Code: https://github.com/codecentric/serverless-plugin-cloudwatch-dashboard 
License: MIT license

#serverless #aws #cloudwatch #dashboard 

Serverless CloudWatch Dashboards Plugin

Flake8 Dashboard: A Flake8 Plugin to Generate an HTML Dashboard

flake8-dashboard

A flake8 plugin to generate a responsive HTML dashboard summarizing all the flake8 violations. The resulting dashboard has an easy-to-read format across a variety of devices and web browsers.

Installation

If flake8 is not installed, run:

$ pip install flake8

Finally, to install the latest release of the plugin from the Python Package Index, run:

$ pip install flake8-dashboard

Alternatively, to install the latest development version (master branch), run:

$ pip install git+https://github.com/aperezhortal/flake8-dashboard

Usage

Run flake8 with the --format=dashboard option to create a nice-looking dashboard.

Options:

  • --outputdir=<output_dir>: Directory to save the HTML output ("./flake8_dashboard" by default).
  • --debug: Write additional debugging information as csv format (flake8 violations and aggregations).
  • --title=<title>: Set the dashboard's title. No title by default.

Simple usage example:

$ flake8 --format=dashboard --outputdir=flake-report --title="My dashboard"

Demo

Check a demo here!

Credits

Author: aperezhortal
Source Code: https://github.com/aperezhortal/flake8-dashboard
License: View license

#python #dashboard 

Flake8 Dashboard: A Flake8 Plugin to Generate an HTML Dashboard

Best Free VueJS Admin Templates 2022

Are you looking for some of the best free VueJS admin dashboard templates? Look! In this blog, we give you a list of the best of them from 2022.

Admin dashboards are advantageous to any company. A Vue dashboard allows you to easily see how your company is performing. You may, for example, easily monitor and measure performance and metrics in real-time. Furthermore, it will help you build your business without spending time.

These new free templates include the ability to configure your dashboard. With all of the necessities. So, instead of wasting time creating your own, check out these free ones and get started on your next out-of-the-box admin dashboard.

Read more… 👇😊

 

#vue #vuejs #admin #templates #dashboard #opensource #GitHub 

Best Free VueJS Admin Templates 2022
Oral  Brekke

Oral Brekke

1651814580

Dashboard: A Standalone Application for Viewing A NodeCG Dashboard

Standalone NodeCG Dashboard

A standalone application for displaying a NodeCG Dashboard.

screenshot

Motivation

There was a brief period of time where NodeCG versions prior to 0.7 did not work in the latest version of Chrome. In an attempt to resolve this issue, the NodeCG team simultaneously worked on two separate solutions:

  1. Find a working Object.observe polyfill that was compatible with NodeCG's use case.
  2. Create a standalone electron application pinned to Chrome 49, the last version to support Object.observe.

We wound up having success with finding a working polyfill, and this standalone application ended up not being necessary. For the time being, this standalone app will remain on Chrome 49. At some point in the future, we may decide to drop support for these old versions of NodeCG which don't have the Object.observe polyfill. Since 0.7, NodeCG has used Proxy instead of Object.observe, and works natively in Chrome 49 and newer.

Installation

Check the Releases page to grab the latest installer for your operating system. Once installed, the application will autoupdate.

Credits

Developed by Alex Van Camp
Designed by Chris Hanel

Author: Nodecg
Source Code: https://github.com/nodecg/dashboard 
License: MIT license

#node #dashboard 

DeFiダッシュボードを構築する方法

分散化は、ブロックチェーンの一般的なユースケースとして、テクノロジーの世界でゆっくりと、しかし着実に勢いを増しています。そのアクセシビリティと耐久性のために、アプリケーションは徐々に分散化に向かっています。金融テクノロジー(FinTech)もブロックチェーンに移行し始めており、その結果、DeFi、つまり分散型ファイナンスの概念が生まれました。

DeFiダッシュボードは、ユーザーがDeFiアセットのライブストリームにアクセスして監視し、さまざまなメトリックを分析できるようにするプラットフォームです。これらのプラットフォームは、ブロックチェーンベースの金融システムとのやり取りを可能な限り簡単にすることを目的としています。

たとえば、暗号通貨と非代替トークン(NFT)は、現在、ブロックチェーンで最も人気のある交換形式です。DeFiダッシュボードは、最小限のプログラミング経験でアセットにアクセスし、それらのアセットで許可されたアクティビティを実行できるように設計されています。

既存のDeFiダッシュボードのいくつかの例は、Zapper、Apeboard、およびZerionです。

この記事では、DeFiダッシュボード、それらが作成される理由、および独自のダッシュボードを作成する方法について学習します。

このチュートリアルに従うために、必ず次のものを用意してください。

  • テキストエディタ
  • Node.jsがローカルにインストールされています
  • Reactの実用的な知識
  • ブロックチェーンがどのように機能するかについての実用的な知識
  • モラリスのアカウント

DeFiダッシュボードの利点は何ですか?

DeFiダッシュボードは、多数の分散型金融プラットフォームにわたる投資を簡単に追跡できるため、ブロックチェーンおよび暗号通貨のユーザーにとって特に重要です。DeFiダッシュボードは、ユーザーに次のものを提供します。

まず、DeFiアセットとサービスに簡単かつ迅速にアクセスするのに最適です。最も一般的なブロックチェーンアプリを使用することは、初心者にとってかなり難しいことがわかっています。DeFiアセットにアクセスし、それらのサービスを個別に使用するには、多くの時間とエネルギーが必要です。たとえば、マルチチェーンまたはクロスチェーンのDeFiダッシュボードは、ブロックチェーン間でアセットを変換するプロセスを高速化します。

2つ目は、DeFiコミュニティの成長です。DeFiダッシュボードは初心者にとって使いやすいため、DeFiコミュニティは、新しい人々をプロジェクトに参加させるために使用できます。

3つ目は、DeFiアクティビティの追跡とレポートです。ほとんどのDeFiプロジェクトは、プーリング、流動性提供、農業などのさまざまな活動に参加しています。これらすべてのアクションの追跡は困難になりますが、DeFiダッシュボードは、これらのアクティビティの追跡とレポート作成に役立ちます。

 

最後に、DeFiアクティビティの視覚化があります。ブロックチェーンは複雑であるため、DeFiアクティビティはあいまいであり、バックグラウンドで実行される特定のトランザクションの確認が必要になる場合があります。これらのアクティビティは、DeFiダッシュボードを使用して視覚化できます。

DeFiダッシュボードの構築

Webサイトの設計方法を知っているだけでは、Web開発者にとって十分ではありません。優れたDeFiダッシュボードを構築するには、さらにいくつかのトリックを学ぶ必要があります。

DeFiダッシュボードを構築するには、ブロックチェーンがどのように機能するか、値がどのように処理または変換されるか、ブロックチェーン暗号化などの知識が必要です。

次のセクションでは、 MoralisテストネットサーバーとReactを使用して基本的なDeFiダッシュボードを構築します。

Moralisテストネットサーバーのセットアップ

アプリケーションのMoralistestnetサーバーリソースにアクセスするには、新しいMoralisサーバーをセットアップする必要があります。

メインネット、テストネット、およびローカルdevchainサーバーは、Moralisによってサポートされるサーバーです。メインネットは生産に利用され、そこで行われる活動は本物であり、実際の資産に影響を与えます。Testnetサーバーは開発目的で使用されます。このサーバーでは、実際の資産を危険にさらすことなく、テストと実験を行うことができます。ローカルdevchainサーバーはtestnetサーバーに似ていますが、ローカルマシンでホストされているため、ローカルでの開発と使用にのみ使用できます。

Moralisテストネットサーバーを使用します。次の手順で作成します。

サーバーページの右上隅にある緑色の[ +新しいサーバーの作成]ボタンをクリックし、ドロップダウンメニューから[テストネットサーバー]を選択します。

モーダルが開き、サーバーのセットアップ設定が表示されます。必要な情報を入力し、サーバーで使用するチェーンを選択します。

使用するチェーンを選択したら、[インスタンスの追加]ボタンをクリックします。これにより、サーバーページに表示されるサーバーインスタンスが作成されます。

サーバーセクションの最後にある[情報の表示]ボタンを使用して、サーバー構成の詳細をプレビューできます。このモーダルの情報は非公開であるため、コンピューターから離れている間は開いたままにしないでください。また、アクセスできるユーザーを制限してください。

モーダルを閉じてドロップダウンメニューからサーバーアイテムを選択すると、[ダッシュボード]ボタンが表示され、以下に示すデータベースのようなダッシュボードに移動します。

このダッシュボードは、現在のサーバーで実行されるすべてのアクションを追跡します。サーバーはまだ新しいので、当分の間空になります。

Reactでのユーザーインターフェースの設定

Reactを使用してDeFiダッシュボードを作成します。この記事の目的ですでにテンプレートを作成しましたが、デザインのフロントエンドを自由に作成し、それにロジックを適用することができます。

作成済みのテンプレートを利用するには、次の手順に従ってください。
まず、指定したディレクトリのターミナルで以下のコマンドを実行して、Githubリポジトリのクローンを作成します。

git clone https://github.com/wolz-CODElife/DeFidash-template.git

次に、次のコマンドを実行して、ターミナルディレクトリをプロジェクトディレクトリに変更します。

cd DeFidash-template

package.jsonアプリケーションサーバーを起動する前に、ファイルにリストされている依存関係をインストールすることが重要です。

依存関係のインストール

プロジェクトのディレクトリ内のターミナルで次のコマンドを実行して、アプリケーションの依存関係をインストールします。

npm install

インストールが完了したら、次のパッケージが利用可能かどうかを確認します。

ターミナルで次のコマンドを実行して、このリストを取得します。

npm list

アプリケーションサーバーを起動すると、ブラウザにこれに似たものが表示されます。

アプリケーションでのMoralisの構成

ユーザーインターフェイスが稼働しているので、ユーザーインターフェイスにいくつかの機能を追加しましょう。まず、作成したMoralisアカウントからアプリケーションにMoralisサーバーのURLとアプリIDを提供する必要があります。

SERVER_URLとAPP_IDのラベルが付いた2つの定数があります/src/services/MoralisConfig.js:

export const APP_ID = "YOUR_MORALIS_APP_ID" 
export const SERVER_URL = "YOUR_MORALIS_SERVER_URL"

値を必要なMoralisアカウント値に置き換えます。これらの資格情報を取得したので、アプリケーションをラップしMoralisProviderます。これは、アプリケーションが起動されるとすぐにMoralisの初期化に役立ちます。

以下に示すように、インポートしてコンポーネントとしてファイルMoralisProviderに追加しindex.jsます。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { APP_ID, SERVER_URL } from './services/MoralisConfig';
ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider serverUrl={SERVER_URL} appId={APP_ID}>
      <App />
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

上記のコードスニペットのファイルからSERVER_URLとをインポートしました。テストアプリケーションを開発しているため、これは問題にならない可能性があります。APP_IDMoralisConfig.js

サーバーのURLとアプリIDは、公共で使用する環境変数または実際のデータを処理するアプリケーションとして保存することをお勧めします。リバースエンジニアはソースコードにアクセスできる可能性があり、特定の資格情報が見つかった場合は、それらを使用してプラットフォームを危険にさらす可能性があります。

DeFiダッシュボードでのユーザーの認証

すべてが計画どおりに進んだ場合、この時点で、アプリケーションからMoralisサーバーと対話および通信できるはずです。構築したい最初の機能はMoralis認証です。これは、ユーザーのアセットとトランザクションにアクセスするために、ユーザーのウォレットをアプリにリンクする必要があるためです。

認証を実装するには、次のコードを変更します/src/pages/ConnectWallet.js。

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components'
import { useMoralis } from "react-moralis";
const ConnectWallet = ({connected, setConnected}) => {
    const navigate = useNavigate()
    const { authenticate, isAuthenticated } = useMoralis();
    useEffect(() => {
        if(connected){
            navigate("/dashboard")        
        }
    }, [connected, navigate])
    const HandleMetaMask = () => {
        if (!isAuthenticated) {
            authenticate({signingMessage: "Log in using Moralis" })
            .then((user) => {
                if(user){
                    setConnected(true)
                }
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
    const HandleWalletConnect = () => {
        if (!isAuthenticated) {
            authenticate({signingMessage: "Log in using Moralis", provider: "walletconnect", chainId: 56 })
            .then((user) => {
                if(user) {
                    setConnected(true)
                }
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
  return (
    <SigninForm>
        <div className="title">
            <h1>Connect your wallet</h1>
            <p>Connect your wallet and know everything about NFT👉</p>
        </div>
        <div className="wallets">
            <button onClick={HandleMetaMask}>
                <img src="https://i.postimg.cc/C1v3V2Zp/image.png" alt="Meta Mask" />
                <h2>MetaMask</h2>
            </button>
            <button onClick={HandleWalletConnect}>
                <img src="https://i.postimg.cc/tChHs2wW/image.png" alt="Meta Mask" />
                <h2>Wallet Connect</h2>
            </button>
            <a href="https://metamask.io/download" target="_blank" rel="noopener noreferrer">I don't have a wallet</a>
        </div>
    </SigninForm>
  )
}
export default ConnectWallet

const SigninForm = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px;
    @media screen and (max-width: 648px) {
        padding: 100px 50px;
    }
    @media screen and (max-width: 420px) {
        padding: 100px 25px;
    }
    .title {
        text-align: center;
        p {
            font-size: 18px;
        }
    }
    .wallets {
        display: flex;
        flex-direction: column;
        margin-top: 56px;
        button {
            height: 72px;
            width: 452px;
            padding: 24px;
            border: 1px solid #D7D9F2;
            display: flex;
            flex-direction: row;
            align-items: center;
            background: none;
            margin-bottom: 16px;
            border-radius: 14px;
            cursor: pointer;
            transition: all ease 0.4s;
            @media screen and (max-width: 550px) {
                width: 350px;
                padding: 15px;
            }
            @media screen and (max-width: 410px) {
                width: 250px;
                h2 {
                    font-size: 15px;
                }
            }
            img {
                width: 48px;
                height: 48px;
                margin: 0px 48px;
                @media screen and (max-width: 550px) {
                    margin: 0px;
                    margin-right: 20px;
                }
            }
            &:hover {
                border: 1px solid #5A66F9;
                background: #F7FAFA;
            }
        }
        a {
            text-decoration: none;
            color: #111119;
            flex: 1;
            text-align: center;
            font-size: 18px;
            margin: 24px 0px;
            &:hover {
                color: #8A92FF;
            }
        }
    }
`

ConnectWalletコードの抜粋には、 2つの小道具をconnected受け取るReactコンポーネントが含まれてsetConnectedいます。これらは、ユーザーが自分のウォレットをアプリにリンクしたかどうかを検出する状態ハンドラーです。

navigateコンポーネントのフックの関数としてuseNavigate()定数を定義しConnectWallet、ユーザーが接続されていない場合は、この関数を使用してユーザーを再ルーティングします。

useMoralis()また、フックに2つの定数を定義しました。authenticatedこれはユーザーを認証するための関数でありisAuthenticated、はユーザーが認証されているかどうかをテストするブール値です。

次に、コンポーネントがマウントされるたびにuseEffect、ユーザーがまだ接続されているかどうかを確認します。/dashboardユーザーが接続している場合、プログラムはルートに移動します。

ウォレット接続を処理する方法も2つあります。1つはMoralisプロバイダーHandleMetaMaskを使用して認証を管理し、もう1つはMoralisプロバイダーを使用して認証を処理します。MetaMaskHandleWalletConnectwalletconnect

次に、コンポーネントは、コンポーネントSigninFormのHTML構造を含むと呼ばれる定型化されたコンポーネントを生成しConnectWalletます。

DeFiダッシュボードでのライブデータのストリーミング

ユーザーが承認された後、Moralisサーバーからユーザーの情報を取得したいと考えています。これを実現するには、次のコードを変更します/src/pages/Dashboard.js。

import React, { useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components'
import History from '../Layouts/History'
import Portfolio from '../Layouts/Portfolio'
import { IconCopy, LogosEthereum } from '../services/icons'
import { useMoralisWeb3Api, useMoralis } from "react-moralis";
import { APP_ID, SERVER_URL } from '../services/MoralisConfig'

const Dashboard = ({connected, setConnected}) => {
  const [address, setAddress] = useState("")
  const addressInput = useRef(null)
  const [nativeBal, setNativeBal] = useState("")
  const [activeTab, setActiveTab] = useState('Portfolio')
  const tabs = ["Portfolio", "History"]
  const navigate = useNavigate()
  const Web3Api = useMoralisWeb3Api();
  const { user, logout, Moralis } = useMoralis();


  useEffect(() => {
    Moralis.start({serverUrl: SERVER_URL, appId: APP_ID})
    if(!connected){
        navigate("/connectwallet")        
    }
    else{
      setAddress(user.get("ethAddress"))
      fetchNativeBalances()
    }
    // eslint-disable-next-line
}, [connected, navigate, user])
  const handleCopy = () => {
    let text = addressInput.current.value
    navigator.clipboard.writeText(text).then(() => {
      alert('Copied address to clipboard!');
    }, function(err) {
      console.error('Async: Could not copy text: ', err);
    });
  }
  const fetchNativeBalances = async () => {
    let options = {
      chain: "ropsten"
    }
    Web3Api.account.getNativeBalance(options).then(balance => {
      console.log(balance);
      let newNativeBalance = parseFloat(Moralis.Units.FromWei(balance.balance)).toFixed(2)
      setNativeBal(newNativeBalance)
    })
  };
  const HandleDisconnectWallet = () => {
    logout().then(() => {
      setConnected(false)
    })
  }
  return (
    <DashContainer>
      <h1 className='overview'>Overview <button onClick={HandleDisconnectWallet}>Disconnect Wallet</button></h1>
      <div className="header">
        <img src="https://i.postimg.cc/VsGFzCqn/image.png" alt="fakeqr" />
        <span>{address.slice(0, 5) + "..." + address.slice(-4)}</span>
        <button onClick={handleCopy}><IconCopy /></button>
        <input type="hidden" defaultValue={address} ref={addressInput} />
      </div>
      <div className="sub_header">
        <LogosEthereum />
        <h1>{nativeBal || 0} ETH</h1>
      </div>
      <div className="tabs">
        <div className="head">
          {tabs.map(menu => (
            <button key={menu} className={activeTab === menu? "active" : ""} onClick={() => setActiveTab(menu)}>{menu}</button>
          ))}
        </div>
        <div className="body">
          {activeTab === tabs[0] ?
            <Portfolio />
            :
            <History />
          }
        </div>
      </div>
    </DashContainer>
  )
}
export default Dashboard

const DashContainer = styled.div`
    padding: 100px;
    @media screen and (max-width: 768px) {
      padding: 100px 50px;
    }
    @media screen and (max-width: 498px) {
      padding: 100px 25px;
    }

    .overview {
      display: flex;
      align-items: center;
      justify-content: space-between;

      button {
        background: none;
        border: 1px solid #FF0000A6;
        padding: 8px 15px;
        border-radius: 6px;
        cursor: pointer;

        @media screen and (max-width: 498px) {
          transform: scale(0.8);  
        }
        &:hover {
          background: #FF0000A6;
          color: #FFFFFF;
          border: none;
        }
      }
    }
    .header {
      display: flex;
      align-items: center;
      img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      span {
        color: #8a8a8a;
        font-size: 15px;
      }
      button {
        color: #8a8a8a;
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        svg {
          width: 15px;
          height: 15px;
        }
      }
    }
    .sub_header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20px 0px;
    }
    .tabs {
      margin: 30px 0px;
      box-shadow: 2px 2px 20px #D7D9F2C0;
      border-radius: 10px;

      .head {
        background: #FFFFFF;
        border-radius: 10px 10px 0px 0px;

        button {
          border: none;
          outline: none;
          cursor: pointer;
          padding: 10px 15px;
          background: none;
          &:hover {
            border-bottom: 2px solid #5A66F960;
          }
          &.active {
            border-bottom: 2px solid #5A66F9;
          }
        }
      }

      .body {
        background: #FFFFFFA5;
        padding: 20px;
        border-radius: 0px 0px 10px 10px;
      }
    }
`

上記のコードスニペットには、と呼ばれるReactコンポーネントが含まれています。このコンポーネントはDashboard、コンポーネントと同様にConnectWallet、2つの小道具connectedとを受け取りsetConnectedます。

次に、データを処理するための一連の状態を定義します。Portfolioまた、とというタブのリストを作成しますHistory。これは、ユーザーのポートフォリオとトランザクション履歴のプレビューを切り替えるために使用されます。

また、特定のMoralisユーティリティを定義します。Web3Apiフックから名前が付けられたメソッドの新しいオブジェクトを作成し、、、およびフックからuseMoralisWeb3Api()定義します。userlogoutMoralisuseMoralis()

リソースを構成した後、を実行しuseEffectてユーザーが接続されているかどうかを確認し、fetchNativeBalances()メソッドを使用してユーザーのネイティブバランスを取得します。ユーザーが接続していない場合、アプリケーションは/connectwalletルートに移動する必要があります。

handleCopyまた、ユーザーのイーサリアムアドレスをコピーする方法fetchNativeBalances、ropstenテストネットで現在のユーザーのネイティブバランスを取得する方法(チェーンを変更してそのチェーンのネイティブバランスを確認することもできます)、およびHandleDisconnectWalletユーザーをログアウトする方法も実装しました。

最後に、コンポーネントは、ユーザーのネイティブバランスと、ユーザーのポートフォリオとトランザクション履歴を表示するための2つのタブを表示するスタイル付きコンポーネントをDashboard返します。DashContainer

Portfolioコンポーネントは、デフォルトで表示されるダッシュボードの最初のタブです。このコンポーネントには、ユーザーのウォレットのETHチェーン上のトークンバランスの表形式のリストが含まれています。

ポートフォリオタブを実装するには、次のコードを変更します/src/Layouts/Portfolio.js。

import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { useMoralisWeb3Api, useMoralis } from "react-moralis";
import { LogosEthereum } from '../services/icons'
import { APP_ID, SERVER_URL } from '../services/MoralisConfig';
const Portfolio = () => {
  const Web3Api = useMoralisWeb3Api();
  const { Moralis } = useMoralis()
  const [tokenBal, setTokenBal] = useState([])
  useEffect(() => {
    Moralis.start({serverUrl: SERVER_URL, appId: APP_ID})
    fetchTokenBalances()

    // eslint-disable-next-line
  }, [])
  const fetchTokenBalances = () => {
    Web3Api.account.getTokenBalances().then(balances => {
    let newBalances = []
    balances.map(bal => (
      newBalances.push({
        token_name: bal.symbol,
        token_logo: bal.logo,
        balance: parseFloat(Moralis.Units.FromWei(bal.balance)).toFixed(2)
      })
      ))
      setTokenBal(newBalances)
    })
  }

  return (
    <PortfolioContainer>
      <div className="table_responsive">
        <table>
          <thead>
            <tr>
              <th>Token</th>
              <th>Balance</th>
            </tr>
          </thead>
          {/* Table body */}
          <tbody>
            {tokenBal.length > 0?
              tokenBal.map(bal => (
                <tr key={bal.token_name}>
                  <td className='token_name'>{bal.token_logo && <img src={bal.token_logo} alt={bal.token_name} />} {bal.token_name}</td>
                  <td>{bal.balance} ETH</td>
                </tr>
              ))
            :
            <tr>
              <td colSpan="2">No token found</td>
            </tr>
            }
          </tbody>
        </table>
      </div>
    </PortfolioContainer>
  )
}
export default Portfolio
const PortfolioContainer = styled.div`
  .table_responsive {
    width: 100%;
    overflow-x: auto;
    .header {
      display: flex;
      align-items: center;
      svg {
        margin-right: 10px;
        width: 40px;
        height: 40px;
      }
    }
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 20px 0px;
    }
    td, th {
      border: 1px solid #5A66F965;
      text-align: left;
      padding: 8px;
    }
    .token_name {
      display: flex;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 15px;
      }
    }
    tr:nth-child(even) {
      background-color: #5A66F940;
    }
  }
`

上記Portfolioのコードサンプルのコンポーネントには、現在のユーザーのトークンバランスの行を条件付きでレンダリングするテーブルがあります。ユーザーがropstenチェーンにトークンを持っていない場合、「トークンが見つかりません」の行がレンダリングされます。

コンポーネントがマウントされると、メソッドuseEffectを実行するがトリガーされます。を使用して現在のユーザーのトークン残高を取得し、状態を更新する前にそれぞれをリストに追加します。fetchTokenBalances()fetchTokenBalances()Web3ApinewBalancestokenBal

ポートフォリオタブを設定したら、ユーザーの取引履歴を表示するタブを設定する必要があります。

[履歴]タブを追加するには、コードを次のように変更します/src/Layouts/History.js。

import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { useMoralisWeb3Api, useMoralis } from "react-moralis";
import { APP_ID, SERVER_URL } from '../services/MoralisConfig';
import { IconCopy } from '../services/icons';
const History = () => {
  const Web3Api = useMoralisWeb3Api();
  const { Moralis } = useMoralis()
  const [transactions, setTransactions] = useState([])
  useEffect(() => {
    Moralis.start({serverUrl: SERVER_URL, appId: APP_ID})
    fetchTransactionHistory()
    // eslint-disable-next-line
  }, [])
  const fetchTransactionHistory = async () => {
    let options = {
      chain: "testnet",
    }
    Web3Api.account.getTransactions(options).then(transacts => {
      if(transacts.result.length > 0) {
        let newTransactions = []
        transacts.result.map(transaction => {
          newTransactions.push({
            hash: transaction.hash,
            sender: transaction.from_address,
            receiver: transaction.to_address,
            value: parseFloat(Moralis.Units.FromWei(transaction.value)).toFixed(3),
            status: transaction.receipt_status,
            timestamp: transaction.block_timestamp
          })  
        })
        setTransactions(newTransactions)
      }
    })
  };
  const handleCopy = (address) => {
    navigator.clipboard.writeText(address).then(() => {
      alert('Copied address to clipboard!');
    }, function(err) {
      console.error('Async: Could not copy text: ', err);
    });
  }

  return (
    <HistoryContainer>
      <div className="table_responsive">
        <table>
          <thead>
            <tr>
              <th>Transaction Hash</th>
              <th>Sender Address</th>
              <th>Receiver Address</th>
              <th>Amount</th>
              <th>Status</th>
              <th>Timestamp</th>
            </tr>
          </thead>
          {/* Table body */}
          <tbody>
            {transactions.length > 0?
              transactions.map(transaction => (
                <tr key={transaction.hash + transaction.timestamp}>
                  <td>
                    <div className='trans_address'>
                      {transaction.hash.slice(0, 6) + "..." + transaction.hash.slice(-4)} 
                      <button onClick={() => handleCopy(transaction.hash)}><IconCopy /></button>
                    </div>
                  </td>
                  <td>
                    <div className='trans_address'>
                      {transaction.sender.slice(0, 6) + "..." + transaction.sender.slice(-4)} 
                      <button onClick={() => handleCopy(transaction.sender)}><IconCopy /></button>
                    </div>
                  </td>
                  <td>
                    <div className='trans_address'>
                      {transaction.receiver.slice(0, 6) + "..." + transaction.receiver.slice(-4)} 
                      <button onClick={() => handleCopy(transaction.receiver)}><IconCopy /></button>
                    </div>
                  </td>
                  <td>{transaction.value} ETH</td>
                  <td>{transaction.status === "1"? <span className='success'>Successful</span> : <span className='pending'>Pending</span> }</td>
                  <td>{new Date(transaction.timestamp).toUTCString()}</td>
                </tr>
              ))
            :
            <tr>
              <td colSpan="6">No transactions found</td>
            </tr>
            }
          </tbody>
        </table>
      </div>
    </HistoryContainer>
  )
}
export default History
const HistoryContainer = styled.div`
  .table_responsive {
    width: 100%;
    overflow-x: auto;
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 20px 0px;
    }
    td, th {
      border: 1px solid #5A66F965;
      text-align: left;
      padding: 8px;
      min-width: 150px;
    }

    .trans_address {
      display: flex;
      button {
        color: #8a8a8a;
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        svg {
          width: 15px;
          height: 15px;
        }
      }
    }

    .success {
      font-size: 10px;
      background: #00aa0060;
      border-radius: 20px;
      padding: 3px 7px;
    }

    .pending {
      font-size: 10px;
      background: #aaaa0060;
      border-radius: 20px;
      padding: 3px 7px;
    }
    tr:nth-child(even) {
      background-color: #5A66F940;
    }
  }

上記のコードでは、コンポーネントは。Historyというスタイルのコンポーネントを返しますHistoryContainer。コンポーネントは、マウントされるとすぐに、ユーティリティを使用してユーザーのウォレットのテストネットチェーン上のトランザクションを収集するfetchTransactionHistory()メソッドも呼び出します。Web3Api

必要なファイルを前述のコードスニペットに編集した後、アプリケーションは完全に機能し、展開の準備ができている必要があります。

アプリケーションのデプロイ

パブリックアクセスの場合、任意のホスティングプラットフォームでアプリケーションをホストすることを選択できます。私はFirebaseに私のものをデプロイすることを選択しました。

デプロイされたアプリケーションはここで確認できます。

結論

この記事を読んだ後、読者はDeFiダッシュボードとは何か、なぜそれらが作成されるのか、そして最初から作成する方法を理解する必要があります。

Zapperクローンを設計して、DeFiダッシュボード構築スキルをテストすることができます。下記のコメント欄で、お気軽にご質問・ご提案ください。

ソース:https ://blog.logrocket.com/building-defi-dashboard-developers-guide/

  #defi #dashboard #web-development 

DeFiダッシュボードを構築する方法

Cómo Construir Un Tablero De DeFi

La descentralización está ganando terreno lenta pero constantemente en el mundo de la tecnología como un caso de uso popular para la cadena de bloques. Debido a su accesibilidad y durabilidad, las aplicaciones se están orientando gradualmente hacia la descentralización. La tecnología financiera (FinTech) también ha comenzado a migrar a blockchain, dando como resultado el concepto de DeFi o finanzas descentralizadas.

Un tablero DeFi es una plataforma que permite a los usuarios acceder y monitorear transmisiones en vivo de activos DeFi y analizar varias métricas. Estas plataformas están destinadas a hacer que la interacción con los sistemas financieros basados ​​en blockchain sea lo más simple posible.

Por ejemplo, las criptomonedas y los tokens no fungibles (NFT) son ahora las formas de intercambio más populares en la cadena de bloques. Los tableros de DeFi están diseñados para ayudar a alguien con una experiencia mínima en programación a acceder a los activos y ejecutar actividades autorizadas en esos activos.

Algunos ejemplos de paneles DeFi existentes son Zapper , Apeboard y Zerion .

En este artículo, aprenderemos sobre los paneles DeFi, por qué se crean y cómo crear uno propio.

Para seguir este tutorial, asegúrese de tener lo siguiente:

  • un editor de texto
  • Node.js instalado localmente
  • Conocimiento práctico de React
  • Conocimiento práctico de cómo funciona la cadena de bloques.
  • Una cuenta en Moralis

¿Cuáles son los beneficios de los paneles DeFi?

Los tableros de DeFi son particularmente importantes para los usuarios de blockchain y criptomonedas porque permiten un fácil seguimiento de las inversiones en numerosas plataformas financieras descentralizadas. Los paneles de DeFi proporcionan lo siguiente para sus usuarios:

Primero, son excelentes para un acceso fácil y rápido a los activos y servicios de DeFi. Se ha descubierto que usar la mayoría de las aplicaciones típicas de blockchain es bastante desafiante para los novatos, y acceder a los activos de DeFi y usar sus servicios individualmente implica mucho tiempo y energía. Los tableros DeFi multi o de cadena cruzada, por ejemplo, aceleran el proceso de conversión de activos a través de blockchains.

En segundo lugar está el crecimiento de la comunidad DeFi. Debido a que los tableros de DeFi son más fáciles de usar para los novatos, las comunidades DeFi pueden usarlos para incorporar nuevas personas a sus proyectos.

El tercero es el seguimiento y la generación de informes de la actividad de DeFi. La mayoría de los proyectos DeFi participan en una variedad de actividades, como la agrupación, el suministro de liquidez, la agricultura, etc. El seguimiento de todas estas acciones se vuelve un desafío, pero los tableros de DeFi pueden ayudar a realizar un seguimiento e informar sobre estas actividades.

 

Finalmente, está la visualización de las actividades de DeFi. Debido a la complejidad de la cadena de bloques, las actividades de DeFi pueden ser ambiguas y requieren confirmación para ciertas transacciones que se ejecutan en segundo plano. Estas actividades se pueden visualizar utilizando paneles DeFi.

Creación de un panel de DeFi

Saber cómo diseñar sitios web no es suficiente para un desarrollador web. Para construir un buen tablero DeFi, deberá aprender algunos trucos más.

La creación de tableros de DeFi requiere conocimiento de cómo funcionan las cadenas de bloques, cómo se manejan o convierten los valores, la criptografía de la cadena de bloques, etc.

En las siguientes secciones, construiremos un panel básico de DeFi usando el servidor de testnet de Moralis y React.

Configuración de un servidor de testnet de Moralis

Deberá configurar un nuevo servidor Moralis para acceder a los recursos del servidor de testnet de Moralis en su aplicación.

Los servidores Mainnet, testnet y devchain local son los servidores compatibles con Moralis. Mainnet se utiliza para la producción, y las actividades que se realizan en ella son activos genuinos y efectivos. Los servidores de Testnet se utilizan con fines de desarrollo; este servidor permite probar y experimentar sin poner en riesgo los activos reales. Los servidores locales devchain son similares a los servidores de testnet, excepto que están alojados en una máquina local, lo que los hace disponibles exclusivamente para el desarrollo y uso local.

Usaremos el servidor de testnet de Moralis. Siga los siguientes pasos para crear uno:

En la esquina superior derecha de la página de servidores, haga clic en el botón verde + Crear un nuevo servidor y seleccione Servidor Testnet en el menú desplegable.

Se abrirá un modal que muestra la configuración de configuración del servidor. Complete la información requerida y seleccione las cadenas que desea que utilice el servidor.

Haga clic en el botón Agregar instancia después de seleccionar las cadenas que desea usar. Esto crea una instancia de servidor que aparece en la página de servidores.

El botón Ver información al final de la sección del servidor se puede usar para obtener una vista previa de los detalles de configuración del servidor. Debido a que la información en este modal es privada, no la mantenga abierta mientras no está en su computadora y restrinja quién tiene acceso a ella.

Cuando descarta el modal y selecciona el elemento del servidor en el menú desplegable, aparece un botón Panel , que lo lleva al panel similar a una base de datos que se ve a continuación.

Este panel realiza un seguimiento de todas las acciones que tienen lugar en el servidor actual. Debido a que el servidor aún es nuevo, estará vacante por el momento.

Configuración de una interfaz de usuario en React

Usaremos React para crear nuestro tablero DeFi. Ya creé una plantilla para los fines de este artículo, pero puede crear una interfaz para su diseño y aplicarle la lógica.

Siga estos pasos para hacer uso de la plantilla que ya he creado.
Primero, ejecute el siguiente comando en una terminal en un directorio específico para clonar el repositorio de Github:

git clone https://github.com/wolz-CODElife/DeFidash-template.git

Luego, ejecute este comando para cambiar el directorio de la terminal al directorio del proyecto:

cd DeFidash-template

Es fundamental instalar las dependencias enumeradas en el package.jsonarchivo antes de iniciar el servidor de aplicaciones.

Instalación de dependencias

Ejecute el siguiente comando en una terminal en el directorio del proyecto para instalar las dependencias de la aplicación:

npm install

Cuando finalice la instalación, verifique si los siguientes paquetes están disponibles:

Ejecute el siguiente comando en la terminal para obtener esta lista:

npm list

Cuando inicie el servidor de aplicaciones, debería ver algo similar a esto en su navegador.

Configurando Moralis en tu aplicación

Agreguemos algunas funciones a nuestra interfaz de usuario ahora que está en funcionamiento. Para comenzar, debemos proporcionar la URL del servidor de Moralis y el ID de la aplicación de la cuenta de Moralis que creamos en nuestra aplicación.

Hay dos constantes etiquetadas SERVER_URLy APP_IDen /src/services/MoralisConfig.js:

export const APP_ID = "YOUR_MORALIS_APP_ID" 
export const SERVER_URL = "YOUR_MORALIS_SERVER_URL"

Reemplace los valores con los valores necesarios de la cuenta de Moralis. Queremos envolver nuestra aplicación MoralisProviderahora que tenemos estas credenciales. Esto ayudará en la inicialización de Moralis tan pronto como se inicie la aplicación.

Importarlo MoralisProvidery agregarlo al index.jsarchivo como un componente, como se ve a continuación:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { APP_ID, SERVER_URL } from './services/MoralisConfig';
ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider serverUrl={SERVER_URL} appId={APP_ID}>
      <App />
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Importamos el SERVER_URLy APP_IDdel MoralisConfig.jsarchivo en el fragmento de código anterior; esto puede no ser un problema porque estamos desarrollando una aplicación de prueba.

Se recomienda almacenar la URL del servidor y el ID de la aplicación como variables de entorno para uso público o aplicaciones que manejen datos reales. Los ingenieros inversos pueden acceder a los códigos fuente y, si se encuentran credenciales particulares, pueden usarse para comprometer la plataforma.

Autenticación de usuarios en su tablero de DeFi

Si todo va según lo planeado, deberíamos poder interactuar y comunicarnos con el servidor Moralis desde nuestra aplicación en este punto. La primera función que nos gustaría crear es la autenticación de Moralis, porque necesitamos vincular las billeteras de los usuarios a la aplicación para que pueda acceder a sus activos y transacciones.

Para implementar la autenticación, cambie el siguiente código en /src/pages/ConnectWallet.js:

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components'
import { useMoralis } from "react-moralis";
const ConnectWallet = ({connected, setConnected}) => {
    const navigate = useNavigate()
    const { authenticate, isAuthenticated } = useMoralis();
    useEffect(() => {
        if(connected){
            navigate("/dashboard")        
        }
    }, [connected, navigate])
    const HandleMetaMask = () => {
        if (!isAuthenticated) {
            authenticate({signingMessage: "Log in using Moralis" })
            .then((user) => {
                if(user){
                    setConnected(true)
                }
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
    const HandleWalletConnect = () => {
        if (!isAuthenticated) {
            authenticate({signingMessage: "Log in using Moralis", provider: "walletconnect", chainId: 56 })
            .then((user) => {
                if(user) {
                    setConnected(true)
                }
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
  return (
    <SigninForm>
        <div className="title">
            <h1>Connect your wallet</h1>
            <p>Connect your wallet and know everything about NFT👉</p>
        </div>
        <div className="wallets">
            <button onClick={HandleMetaMask}>
                <img src="https://i.postimg.cc/C1v3V2Zp/image.png" alt="Meta Mask" />
                <h2>MetaMask</h2>
            </button>
            <button onClick={HandleWalletConnect}>
                <img src="https://i.postimg.cc/tChHs2wW/image.png" alt="Meta Mask" />
                <h2>Wallet Connect</h2>
            </button>
            <a href="https://metamask.io/download" target="_blank" rel="noopener noreferrer">I don't have a wallet</a>
        </div>
    </SigninForm>
  )
}
export default ConnectWallet

const SigninForm = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px;
    @media screen and (max-width: 648px) {
        padding: 100px 50px;
    }
    @media screen and (max-width: 420px) {
        padding: 100px 25px;
    }
    .title {
        text-align: center;
        p {
            font-size: 18px;
        }
    }
    .wallets {
        display: flex;
        flex-direction: column;
        margin-top: 56px;
        button {
            height: 72px;
            width: 452px;
            padding: 24px;
            border: 1px solid #D7D9F2;
            display: flex;
            flex-direction: row;
            align-items: center;
            background: none;
            margin-bottom: 16px;
            border-radius: 14px;
            cursor: pointer;
            transition: all ease 0.4s;
            @media screen and (max-width: 550px) {
                width: 350px;
                padding: 15px;
            }
            @media screen and (max-width: 410px) {
                width: 250px;
                h2 {
                    font-size: 15px;
                }
            }
            img {
                width: 48px;
                height: 48px;
                margin: 0px 48px;
                @media screen and (max-width: 550px) {
                    margin: 0px;
                    margin-right: 20px;
                }
            }
            &:hover {
                border: 1px solid #5A66F9;
                background: #F7FAFA;
            }
        }
        a {
            text-decoration: none;
            color: #111119;
            flex: 1;
            text-align: center;
            font-size: 18px;
            margin: 24px 0px;
            &:hover {
                color: #8A92FF;
            }
        }
    }
`

El extracto del código incluye un componente React llamado ConnectWalletque toma dos accesorios: connectedy setConnected, que son controladores de estado que detectan si un usuario ha vinculado o no su billetera a la aplicación.

Definimos una constante navigatecomo una función del Hook useNavigate()en el ConnectWalletcomponente, y usamos la función para redirigir al usuario si él o ella no está conectado.

También definimos dos constantes en el useMoralis()Hook: authenticated, que es una función para autenticar usuarios, y isAuthenticated, que es un booleano que prueba si el usuario está autenticado.

Luego, cada vez que se monta el componente, se useEffectcomprueba si el usuario sigue conectado. El programa navega a la /dashboardruta si el usuario está conectado.

También tenemos dos métodos para manejar las conexiones de billetera: HandleMetaMask, que maneja la autenticación usando el MetaMaskproveedor de Moralis, y HandleWalletConnect, que maneja la autenticación usando el walletconnectproveedor de Moralis.

Luego, el componente produce un componente estilizado llamado SigninFormque contiene la estructura HTML del ConnectWalletcomponente.

Transmisión de datos en vivo en su tablero de DeFi

Queremos obtener la información del usuario del servidor de Moralis después de que hayan sido autorizados. Para lograr esto, cambie el siguiente código en /src/pages/Dashboard.js:

import React, { useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components'
import History from '../Layouts/History'
import Portfolio from '../Layouts/Portfolio'
import { IconCopy, LogosEthereum } from '../services/icons'
import { useMoralisWeb3Api, useMoralis } from "react-moralis";
import { APP_ID, SERVER_URL } from '../services/MoralisConfig'

const Dashboard = ({connected, setConnected}) => {
  const [address, setAddress] = useState("")
  const addressInput = useRef(null)
  const [nativeBal, setNativeBal] = useState("")
  const [activeTab, setActiveTab] = useState('Portfolio')
  const tabs = ["Portfolio", "History"]
  const navigate = useNavigate()
  const Web3Api = useMoralisWeb3Api();
  const { user, logout, Moralis } = useMoralis();


  useEffect(() => {
    Moralis.start({serverUrl: SERVER_URL, appId: APP_ID})
    if(!connected){
        navigate("/connectwallet")        
    }
    else{
      setAddress(user.get("ethAddress"))
      fetchNativeBalances()
    }
    // eslint-disable-next-line
}, [connected, navigate, user])
  const handleCopy = () => {
    let text = addressInput.current.value
    navigator.clipboard.writeText(text).then(() => {
      alert('Copied address to clipboard!');
    }, function(err) {
      console.error('Async: Could not copy text: ', err);
    });
  }
  const fetchNativeBalances = async () => {
    let options = {
      chain: "ropsten"
    }
    Web3Api.account.getNativeBalance(options).then(balance => {
      console.log(balance);
      let newNativeBalance = parseFloat(Moralis.Units.FromWei(balance.balance)).toFixed(2)
      setNativeBal(newNativeBalance)
    })
  };
  const HandleDisconnectWallet = () => {
    logout().then(() => {
      setConnected(false)
    })
  }
  return (
    <DashContainer>
      <h1 className='overview'>Overview <button onClick={HandleDisconnectWallet}>Disconnect Wallet</button></h1>
      <div className="header">
        <img src="https://i.postimg.cc/VsGFzCqn/image.png" alt="fakeqr" />
        <span>{address.slice(0, 5) + "..." + address.slice(-4)}</span>
        <button onClick={handleCopy}><IconCopy /></button>
        <input type="hidden" defaultValue={address} ref={addressInput} />
      </div>
      <div className="sub_header">
        <LogosEthereum />
        <h1>{nativeBal || 0} ETH</h1>
      </div>
      <div className="tabs">
        <div className="head">
          {tabs.map(menu => (
            <button key={menu} className={activeTab === menu? "active" : ""} onClick={() => setActiveTab(menu)}>{menu}</button>
          ))}
        </div>
        <div className="body">
          {activeTab === tabs[0] ?
            <Portfolio />
            :
            <History />
          }
        </div>
      </div>
    </DashContainer>
  )
}
export default Dashboard

const DashContainer = styled.div`
    padding: 100px;
    @media screen and (max-width: 768px) {
      padding: 100px 50px;
    }
    @media screen and (max-width: 498px) {
      padding: 100px 25px;
    }

    .overview {
      display: flex;
      align-items: center;
      justify-content: space-between;

      button {
        background: none;
        border: 1px solid #FF0000A6;
        padding: 8px 15px;
        border-radius: 6px;
        cursor: pointer;

        @media screen and (max-width: 498px) {
          transform: scale(0.8);  
        }
        &:hover {
          background: #FF0000A6;
          color: #FFFFFF;
          border: none;
        }
      }
    }
    .header {
      display: flex;
      align-items: center;
      img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      span {
        color: #8a8a8a;
        font-size: 15px;
      }
      button {
        color: #8a8a8a;
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        svg {
          width: 15px;
          height: 15px;
        }
      }
    }
    .sub_header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20px 0px;
    }
    .tabs {
      margin: 30px 0px;
      box-shadow: 2px 2px 20px #D7D9F2C0;
      border-radius: 10px;

      .head {
        background: #FFFFFF;
        border-radius: 10px 10px 0px 0px;

        button {
          border: none;
          outline: none;
          cursor: pointer;
          padding: 10px 15px;
          background: none;
          &:hover {
            border-bottom: 2px solid #5A66F960;
          }
          &.active {
            border-bottom: 2px solid #5A66F9;
          }
        }
      }

      .body {
        background: #FFFFFFA5;
        padding: 20px;
        border-radius: 0px 0px 10px 10px;
      }
    }
`

El fragmento de código anterior incluye un componente de React llamado Dashboard, que, al igual que el ConnectWalletcomponente, recibe las dos propiedades connectedy setConnected.

Luego, definimos un conjunto de estados para el manejo de datos. También creamos una lista de pestañas llamadas Portfolioy History, que se usarán para alternar entre la cartera del usuario y las vistas previas del historial de transacciones.

También definimos ciertas utilidades de Moralis; construimos un nuevo objeto de métodos nombrados Web3Apidesde el useMoralisWeb3Api()Hook, y definimos user, logouty Moralisdesde el useMoralis()Hook.

Después de configurar los recursos, ejecutamos useEffectpara ver si el usuario está conectado y luego usamos el fetchNativeBalances()método para obtener el saldo nativo del usuario. Si el usuario no está conectado, la aplicación debe navegar a la /connectwalletruta.

También implementamos los métodos handleCopypara copiar la dirección Ethereum del usuario, fetchNativeBalancespara obtener el saldo nativo del usuario actual en la red de prueba de ropsten (puede cambiar la cadena para ver el saldo nativo de esa cadena) y HandleDisconnectWalletpara cerrar la sesión del usuario.

Finalmente, el Dashboardcomponente devuelve un DashContainercomponente con estilo que muestra el saldo nativo del usuario, así como dos pestañas para mostrar la cartera del usuario y el historial de transacciones.

El Portfoliocomponente es la primera pestaña del panel que se muestra de forma predeterminada. Este componente contiene una lista tabular de saldos de tokens en la cadena ETH de la billetera del usuario.

Para implementar la pestaña de cartera, cambie el siguiente código en /src/Layouts/Portfolio.js:

import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { useMoralisWeb3Api, useMoralis } from "react-moralis";
import { LogosEthereum } from '../services/icons'
import { APP_ID, SERVER_URL } from '../services/MoralisConfig';
const Portfolio = () => {
  const Web3Api = useMoralisWeb3Api();
  const { Moralis } = useMoralis()
  const [tokenBal, setTokenBal] = useState([])
  useEffect(() => {
    Moralis.start({serverUrl: SERVER_URL, appId: APP_ID})
    fetchTokenBalances()

    // eslint-disable-next-line
  }, [])
  const fetchTokenBalances = () => {
    Web3Api.account.getTokenBalances().then(balances => {
    let newBalances = []
    balances.map(bal => (
      newBalances.push({
        token_name: bal.symbol,
        token_logo: bal.logo,
        balance: parseFloat(Moralis.Units.FromWei(bal.balance)).toFixed(2)
      })
      ))
      setTokenBal(newBalances)
    })
  }

  return (
    <PortfolioContainer>
      <div className="table_responsive">
        <table>
          <thead>
            <tr>
              <th>Token</th>
              <th>Balance</th>
            </tr>
          </thead>
          {/* Table body */}
          <tbody>
            {tokenBal.length > 0?
              tokenBal.map(bal => (
                <tr key={bal.token_name}>
                  <td className='token_name'>{bal.token_logo && <img src={bal.token_logo} alt={bal.token_name} />} {bal.token_name}</td>
                  <td>{bal.balance} ETH</td>
                </tr>
              ))
            :
            <tr>
              <td colSpan="2">No token found</td>
            </tr>
            }
          </tbody>
        </table>
      </div>
    </PortfolioContainer>
  )
}
export default Portfolio
const PortfolioContainer = styled.div`
  .table_responsive {
    width: 100%;
    overflow-x: auto;
    .header {
      display: flex;
      align-items: center;
      svg {
        margin-right: 10px;
        width: 40px;
        height: 40px;
      }
    }
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 20px 0px;
    }
    td, th {
      border: 1px solid #5A66F965;
      text-align: left;
      padding: 8px;
    }
    .token_name {
      display: flex;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 15px;
      }
    }
    tr:nth-child(even) {
      background-color: #5A66F940;
    }
  }
`

El Portfoliocomponente del ejemplo de código anterior tiene una tabla que representa de manera condicional filas de saldos de tokens para el usuario actual. Se mostrará una fila con "No se encontró ningún token" si el usuario no tiene ningún token en la cadena ropsten.

Cuando se monta el componente, desencadena un useEffectque ejecuta el fetchTokenBalances()método. fetchTokenBalances()usa el Web3Apipara recuperar los saldos de tokens del usuario actual y agrega cada uno a una lista newBalancesantes de actualizar el tokenBalestado.

Una vez que hayamos configurado la pestaña de cartera, necesitaremos configurar una pestaña para mostrar el historial de transacciones del usuario.

Para agregar la pestaña de historial, cambie el código /src/Layouts/History.jsa esto:

import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { useMoralisWeb3Api, useMoralis } from "react-moralis";
import { APP_ID, SERVER_URL } from '../services/MoralisConfig';
import { IconCopy } from '../services/icons';
const History = () => {
  const Web3Api = useMoralisWeb3Api();
  const { Moralis } = useMoralis()
  const [transactions, setTransactions] = useState([])
  useEffect(() => {
    Moralis.start({serverUrl: SERVER_URL, appId: APP_ID})
    fetchTransactionHistory()
    // eslint-disable-next-line
  }, [])
  const fetchTransactionHistory = async () => {
    let options = {
      chain: "testnet",
    }
    Web3Api.account.getTransactions(options).then(transacts => {
      if(transacts.result.length > 0) {
        let newTransactions = []
        transacts.result.map(transaction => {
          newTransactions.push({
            hash: transaction.hash,
            sender: transaction.from_address,
            receiver: transaction.to_address,
            value: parseFloat(Moralis.Units.FromWei(transaction.value)).toFixed(3),
            status: transaction.receipt_status,
            timestamp: transaction.block_timestamp
          })  
        })
        setTransactions(newTransactions)
      }
    })
  };
  const handleCopy = (address) => {
    navigator.clipboard.writeText(address).then(() => {
      alert('Copied address to clipboard!');
    }, function(err) {
      console.error('Async: Could not copy text: ', err);
    });
  }

  return (
    <HistoryContainer>
      <div className="table_responsive">
        <table>
          <thead>
            <tr>
              <th>Transaction Hash</th>
              <th>Sender Address</th>
              <th>Receiver Address</th>
              <th>Amount</th>
              <th>Status</th>
              <th>Timestamp</th>
            </tr>
          </thead>
          {/* Table body */}
          <tbody>
            {transactions.length > 0?
              transactions.map(transaction => (
                <tr key={transaction.hash + transaction.timestamp}>
                  <td>
                    <div className='trans_address'>
                      {transaction.hash.slice(0, 6) + "..." + transaction.hash.slice(-4)} 
                      <button onClick={() => handleCopy(transaction.hash)}><IconCopy /></button>
                    </div>
                  </td>
                  <td>
                    <div className='trans_address'>
                      {transaction.sender.slice(0, 6) + "..." + transaction.sender.slice(-4)} 
                      <button onClick={() => handleCopy(transaction.sender)}><IconCopy /></button>
                    </div>
                  </td>
                  <td>
                    <div className='trans_address'>
                      {transaction.receiver.slice(0, 6) + "..." + transaction.receiver.slice(-4)} 
                      <button onClick={() => handleCopy(transaction.receiver)}><IconCopy /></button>
                    </div>
                  </td>
                  <td>{transaction.value} ETH</td>
                  <td>{transaction.status === "1"? <span className='success'>Successful</span> : <span className='pending'>Pending</span> }</td>
                  <td>{new Date(transaction.timestamp).toUTCString()}</td>
                </tr>
              ))
            :
            <tr>
              <td colSpan="6">No transactions found</td>
            </tr>
            }
          </tbody>
        </table>
      </div>
    </HistoryContainer>
  )
}
export default History
const HistoryContainer = styled.div`
  .table_responsive {
    width: 100%;
    overflow-x: auto;
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 20px 0px;
    }
    td, th {
      border: 1px solid #5A66F965;
      text-align: left;
      padding: 8px;
      min-width: 150px;
    }

    .trans_address {
      display: flex;
      button {
        color: #8a8a8a;
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        svg {
          width: 15px;
          height: 15px;
        }
      }
    }

    .success {
      font-size: 10px;
      background: #00aa0060;
      border-radius: 20px;
      padding: 3px 7px;
    }

    .pending {
      font-size: 10px;
      background: #aaaa0060;
      border-radius: 20px;
      padding: 3px 7px;
    }
    tr:nth-child(even) {
      background-color: #5A66F940;
    }
  }

En el código anterior, el Historycomponente devuelve un componente con estilo llamado HistoryContainer. El componente también llama al fetchTransactionHistory()método, que utiliza la Web3Apiutilidad para recopilar transacciones en la cadena de testnet de la billetera del usuario, tan pronto como se monta.

La aplicación debería funcionar completamente y estar lista para su implementación después de editar los archivos necesarios en los fragmentos de código antes mencionados.

Implementación de la aplicación

Para el acceso público, puede optar por alojar la aplicación en cualquier plataforma de alojamiento ; Elegí implementar el mío en Firebase .

Puede ver mi aplicación implementada aquí .

Conclusión

Después de leer este artículo, los lectores deben comprender qué es un tablero DeFi, por qué se crean y cómo crear uno desde cero.

Puede diseñar un clon de Zapper para poner a prueba sus habilidades de creación de paneles DeFi. En el área de comentarios a continuación, no dude en hacer preguntas o sugerencias.

Fuente: https://blog.logrocket.com/building-defi-dashboard-developers-guide/

#defi #dashboard #web-development 

Cómo Construir Un Tablero De DeFi
Coding  Life

Coding Life

1647751015

How to Create a Data Dashboard by Date Range with C#, SQL Server

In this tutorial I will teach you how to create a Data Dashboard by Date Range, either by This Month, Today, Last 7 Days, Last 30 Days or a Custom Date, with C#, SQL Server, Windows Forms and Object Oriented Programming (OOP).
 
Contents:
00:00 Introduction
01:22 Create database
02:03 Database connection 
04:00 Dashboard Model (Data Access & Business Logic)
29:01 Form design
32:15 Form code

Download Source Code & Data Base:
https://rjcodeadvance.com/crear-panel-de-datos-dashboard-c-sql-server-winforms-poo/ 

Subscribe: https://www.youtube.com/c/RJCodeAdvanceEN/featured 

#dashboard   #csharp    #vb-net  #visualstudio  #sql 

How to Create a Data Dashboard by Date Range with C#, SQL Server
Excel  Tutorial

Excel Tutorial

1647095191

Excel Profits & Loss Dashboard with Creative Slicer and Dynamic Indicator [ Part 2 ]

In this video tutorial we will build profit & loss dashboard in Excel with ad cutter and alarm indicator.

Excel is a spreadsheet program from Microsoft and a component of its Office product group for business applications. Microsoft Excel enables users to format, organize and calculate data in a spreadsheet. Excel is a spreadsheet program from Microsoft and a component of its Office product group for business applications. Microsoft Excel enables users to format, organize and calculate data in a spreadsheet.

Chapters:
00:00, Dashboard Features & contents Overview 
1:21, Create Dynamic Indecator
8:03 Bubble cards design
16:37 Expenses & Income total values
22:51 Expenses & Income per month
24:39 Operating Expenses
26:57 Protect the dashboard
28:08 Maintain the dashboard view

Part 1 : https://morioh.com/p/107339789088

Download our Templates / Get Free Datasets
Visit our online store https://www.other-levels.com 
Contact us for business contact@other-levels.com

Subscribe: https://www.youtube.com/c/OtherLevel%E2%80%99s/featured 
 

#excel  #dashboard  

Excel Profits & Loss Dashboard with Creative Slicer and Dynamic Indicator [ Part 2 ]
Excel  Tutorial

Excel Tutorial

1647094781

Excel Profits & Loss Dashboard with Creative Slicer and Dynamic Indicator [ Part 1 ]

In this video tutorial we will build profit & loss dashboard in Excel with ad cutter and alarm indicator.

Excel is a spreadsheet program from Microsoft and a component of its Office product group for business applications. Microsoft Excel enables users to format, organize and calculate data in a spreadsheet. Excel is a spreadsheet program from Microsoft and a component of its Office product group for business applications. Microsoft Excel enables users to format, organize and calculate data in a spreadsheet.

Chapters:
0:00, Dashboard Features & contents Overview 
1:20, Database content
1:51, Dashboard background
3:21, Add title and logo
4:35, Net Revenue
9:30, Total Debts
12:21, Corporate Tax
15:51, Admin Image & Last update date
17:35, Create Slicer
19:26, Slicer in the windows version 
19:35, Modify the slicer
21:30, Business Information's 
26:55, Gross profits line chart

Part 2 : https://morioh.com/p/b3f2af47babb 

Download our Templates / Get Free Datasets
Visit our online store https://www.other-levels.com 
Contact us for business contact@other-levels.com

Subscribe: https://www.youtube.com/c/OtherLevel%E2%80%99s/featured 

#excel  #dashboard  

Excel Profits & Loss Dashboard with Creative Slicer and Dynamic Indicator [ Part 1 ]
Excel  Tutorial

Excel Tutorial

1647055439

Build Dynamic & Interactive Dashboard in EXCEL with PivotTable & Charts [ Part 2 ]

Learn how to build dynamic & interactive dashboard in EXCEL with Pivot Tables&Charts

Excel is a spreadsheet program from Microsoft and a component of its Office product group for business applications. Microsoft Excel enables users to format, organize and calculate data in a spreadsheet. Excel is a spreadsheet program from Microsoft and a component of its Office product group for business applications. Microsoft Excel enables users to format, organize and calculate data in a spreadsheet.

Part 1 : https://morioh.com/p/d31ae46d1e61 

Download our Templates / Get Free Datasets
Visit our online store https://www.other-levels.com 
Contact us for business contact@other-levels.com 

Subscribe: https://www.youtube.com/c/OtherLevel%E2%80%99s/featured 
#excel  #dashboard  

Build Dynamic & Interactive Dashboard in EXCEL with PivotTable & Charts [ Part 2 ]

Termdash: Go Terminal Dashboard Based on Termbox-go & inspired

Termdash is a cross-platform customizable terminal based dashboard.

termdashdemo

The feature set is inspired by the gizak/termui project, which in turn was inspired by yaronn/blessed-contrib.

This rewrite focuses on code readability, maintainability and testability, see the design goals. It aims to achieve the following requirements. See the high-level design for more details.

Public API and status

The public API surface is documented in the wiki.

Private packages can be identified by the presence of the /private/ directory in their import path. Stability of the private packages isn't guaranteed and changes won't be backward compatible.

There might still be breaking changes to the public API, at least until the project reaches version 1.0.0. Any breaking changes will be published in the changelog.

Current feature set

  • Full support for terminal window resizing throughout the infrastructure.
  • Customizable layout, widget placement, borders, margins, padding, colors, etc.
  • Dynamic layout changes at runtime.
  • Binary tree and Grid forms of setting up the layout.
  • Focusable containers and widgets.
  • Processing of keyboard and mouse events.
  • Periodic and event driven screen redraw.
  • A library of widgets, see below.
  • UTF-8 for all text elements.
  • Drawing primitives (Go functions) for widget development with character and sub-character resolution.

Installation

To install this library, run the following:

go get -u github.com/mum4k/termdash
cd github.com/mum4k/termdash

Usage

The usage of most of these elements is demonstrated in termdashdemo.go. To execute the demo:

go run termdashdemo/termdashdemo.go

Documentation

Please refer to the Termdash wiki for all documentation and resources.

Implemented Widgets

The Button

Allows users to interact with the application, each button press runs a callback function. Run the buttondemo.

go run widgets/button/buttondemo/buttondemo.go

buttondemo

The TextInput

Allows users to interact with the application by entering, editing and submitting text data. Run the textinputdemo.

go run widgets/textinput/textinputdemo/textinputdemo.go

textinputdemo

Can be used to create text input forms that support keyboard navigation:

go run widgets/textinput/formdemo/formdemo.go

formdemo

The Gauge

Displays the progress of an operation. Run the gaugedemo.

go run widgets/gauge/gaugedemo/gaugedemo.go

gaugedemo

The Donut

Visualizes progress of an operation as a partial or a complete donut. Run the donutdemo.

go run widgets/donut/donutdemo/donutdemo.go

donutdemo

The Text

Displays text content, supports trimming and scrolling of content. Run the textdemo.

go run widgets/text/textdemo/textdemo.go
textdemo

The SparkLine

Draws a graph showing a series of values as vertical bars. The bars can have sub-cell height. Run the sparklinedemo.

go run widgets/sparkline/sparklinedemo/sparklinedemo.go

sparklinedemo

The BarChart

Displays multiple bars showing relative ratios of values. Run the barchartdemo.

go run widgets/barchart/barchartdemo/barchartdemo.go

barchartdemo

The LineChart

Displays series of values on a line chart, supports zoom triggered by mouse events. Run the linechartdemo.

go run widgets/linechart/linechartdemo/linechartdemo.go

linechartdemo

The SegmentDisplay

Displays text by simulating a 16-segment display. Run the segmentdisplaydemo.

go run widgets/segmentdisplay/segmentdisplaydemo/segmentdisplaydemo.go

segmentdisplaydemo

Contributing

If you are willing to contribute, improve the infrastructure or develop a widget, first of all Thank You! Your help is appreciated.

Please see the CONTRIBUTING.md file for guidelines related to the Google's CLA, and code review requirements.

As stated above the primary goal of this project is to develop readable, well designed code, the functionality and efficiency come second. This is achieved through detailed code reviews, design discussions and following of the design guidelines. Please familiarize yourself with these before contributing.

If you're developing a new widget, please see the widget development section.

Termdash uses this branching model. When you fork the repository, base your changes off the devel branch and the pull request should merge it back to the devel branch. Commits to the master branch are limited to releases, major bug fixes and documentation updates.

Similar projects in Go

Projects using Termdash

  • datadash: Visualize streaming or tabular data inside the terminal.
  • grafterm: Metrics dashboards visualization on the terminal.
  • perfstat: Analyze and show tips about possible bottlenecks in Linux systems.
  • gex: Cosmos SDK explorer in-terminal.
  • ali: ALI HTTP load testing tool with realtime analysis.

Disclaimer

This is not an official Google product.

Author: Mum4k
Source Code: https://github.com/mum4k/termdash 
License: Apache-2.0 License

#go #golang #dashboard 

Termdash: Go Terminal Dashboard Based on Termbox-go & inspired

Las 14 Mejores Bibliotecas De Paneles De React

Los tableros muestran métricas importantes de manera visual, lo que brinda a los propietarios y administradores de aplicaciones empresariales modernas información compartible que puede ser útil para monitorear el rendimiento, detectar tendencias e identificar problemas.

Hay muchas opciones disponibles para crear una aplicación de tablero y la elección del marco suele ser el factor más importante. En mi opinión, no puedes equivocarte con React. Es el marco de interfaz de usuario más popular y versátil disponible.

React ofrece una integración perfecta con múltiples herramientas y paquetes de interfaz de terceros, lo que permite manipular y visualizar grandes cantidades de datos (por ejemplo, cuadros, gráficos y cuadrículas de datos) con facilidad. Pero usar React para crear un tablero desde cero puede llevar mucho tiempo y esfuerzo. Lo mismo ocurre con otras tecnologías frontend.

En este artículo, compartiré una lista seleccionada de las mejores plantillas de panel de control gratuitas y de código abierto que son lo suficientemente sofisticadas como para ser bibliotecas independientes y que se pueden configurar y modificar fácilmente para proyectos según sea necesario.

Reaccionar-administrador

El primero en la lista es React-admin, una biblioteca integral de código abierto para crear paneles de administración basados ​​en datos.

React-admin is based on the React framework and is powered by popular UI, data management, and routing technologies such as Material UI, Redux, React Final Form, and React Router. This library uses data providers to easily adapt to several backend architectures like GraphQL, REST, and SOAP.

React-admin’s loosely coupled design makes it very easy to replace any of its core systems. For example, you could use Bootstrap instead of the default Material Designs. This library can be integrated into an existing project or used as a standalone project with either JavaScript or TypeScript.

Features:

  • Data validation
  • Internationalization (i18n)
  • Theming
  • Authentication (OAuth and more)
  • WYSIWYG editor

Quick start:
Install via npm:

npm install react-admin

Install via Yarn:

yarn add react-admin

Stats:

Ant Design Pro

Ant Design Pro is a free, open source UI library for scaffolding production-ready admin interface solutions for enterprise applications.

The library is based on the React Umi and Ant Design UI library, so it’s highly customizable, well documented, and has an easy learning curve.

Ant Design Pro is maintained by the Ant Group and Alibaba, a large ecommerce corporation. The library is regularly updated and well maintained. Ant Design Pro provides developers the option to choose between JavaScript or TypeScript for development.

Features:

  • Responsiveness
  • Theming
  • Internationalization (i18n)
  • UI testing

Quick start:
Clone the repo:

git clone https://github.com/ant-design/ant-design-pro.git --depth=1

Stats:

React Dashboard

React Dashboard is an admin library created by Flatonic, a company that offers free and premium templates for various JavaScript frameworks. React Dashboard is a free admin dashboard built with React, Bootstrap, React Router, Redux, and GraphQL.

This library comes with a working Node.js backend integration, allowing for easy data visualization and authentication.

Features:

  • Authentication
  • Responsiveness
  • Flatlogic CSS set
  • CRUD operations

Quick start:
Clone the repo:

git clone -o react-dashboard -b master --single-branch \ https://github.com/flatlogic/react-dashboard.git

Stats:

Reacción del tablero de materiales

Material Design React es una biblioteca de panel de administración fácil de usar para desarrolladores basada en Material Design (MUI) y React de Google.

Esta biblioteca viene con bloques de diseño prediseñados que garantizan un proceso de desarrollo sin problemas. También ofrece más de 70 elementos individuales de frontend, como botones, entradas y tarjetas que se pueden modificar fácilmente usando la API de estilo de MUI y sx prop (estilo personalizado).

Inicio rápido :
Instalar a través de npm:

npm i material-dashboard-react

Clonar el repositorio:

git clone https://github.com/creativetimofficial/material-dashboard-react.git

Estadísticas :

Volt React Dashboard

Volt React Dashboard is a free, open source React dashboard library based on Bootstrap 5 and Sass frontend technologies. This library is built upon React components using React Hooks and a data-driven methodology that ensures an improved developer experience.

Volt’s structural design makes it easy to visualize data obtained from backend technologies. The library passes data between pre-made components with an array of objects that can be easily integrated into pre-made components such as form elements and other UI elements.

Quick start:
Install via npm:

npm i @themesberg/volt-react-dashboard

Clone the repo:

git clone https://github.com/themesberg/volt-react-dashboard.git

Stats:

Airframe React

Airframe React is an admin dashboard library with minimalistic design and innovative light UI for building large-scale dashboard applications.

This library is made up of a large collection of pre-made components that can be used to set up all types of custom data visualization web apps, such as admin panels and data analytics.

Airframe is based on React, Bootstrap, React Router, and Reactstrap.

Quick start:
Install via npm:

npm i react-airframe

Clone the repo:

git clone https://github.com/0wczar/airframe-react.git

Stats:

N.B., Airframe React hasn’t been updated since 2020. Nonetheless, it is still a better option than building dashboards from scratch.

Core UI React

Core UI React is a lightweight MIT licensed open source dashboard library built on Bootstrap 5 and React with TypeScript.

Core UI React is made up of styled components from the core UI CSS library, which acts as an extension of Bootstrap that adds extra functionalities to the library.

This library’s transparent code and lack of redundant dependencies make it light enough to offer the ultimate user experience.

Quick start:
Install via npm:

npm i @coreui/react

Clone the repo:

git clone https://github.com/coreui/coreui-free-react-admin-template.git

Stats:

Shards React

Shards React is one of the best dashboard libraries for manipulating data chunks from blogging platforms. It has an easy-to-use React UI toolkit that is based on Material Design and Font Awesome.

This library includes customizable components for managing and visualizing data from any blogging platform. These components include tables, forms, blog dashboards, blog post stats, and more.

Quick start:
Install via npm:

npm i shards-react

Install via Yarn:

yarn add shards-react

Stats:

N.B., Shards React hasn’t been updated since 2020.

React Reduction

React Reduction is a library built with React and Bootstrap 4. It provides numerous components, cards, charts, and widgets for creating sleek and professional dashboards.

Quick start:
Clone the repo:

git clone https://github.com/reduction-admin/react-reduction.git

Stats:

N.B., React Reduction hasn’t been updated since 2020.

Argon Dashboard React

Argon Dashboard React is based on Bootstrap 4 and Reactstrap. It is a free, open source library that comes with fully coded components, providing the freedom to choose and combine different variations to create amazing web apps.

This library also offers several pre-built examples, making the development process seamless.

Quick start:
Install via npm:

npm i argon-dashboard-react

Install with Bower:

bower install argon-dashboard-react.

Clone the repo:

git clone https://github.com/creativetimofficial/argon-dashboard-react.git.

Stats:

Mosaic Lite

Mosaic Lite is an open source library built with Tailwind CSS and React. It is a responsive dashboard template with pre-coded charts and widgets for building user interfaces for SaaS products and modern web apps.

Quick start:
Clone the repo:

git clone https://github.com/cruip/tailwind-dashboard-template.git

Stats:

Paper Dashboard React

Paper Dashboard React is a colorful dashboard library based on Bootstrap 4. It comes with a large number of components designed to look neat and well organized.

This library is made up of the right amount of dependencies with just enough features for easy usage.

Quick start:
Install via npm:

npm i paper-dashboard-react

Clone the repo:

git clone https://github.com/creativetimofficial/paper-dashboard-react.git

Stats:

Azia

Azia is yet another incredible React dashboard library based on the Bootstrap framework. The library is packed with a lot of UI elements, components, and pre-made sample pages that will get your projects up and running in no time.

Quick start:
Clone the repo:

git clone https://github.com/BootstrapDash/azia-admin-react.git

Stats:

Reacción del administrador estrella

Star Admin React es una poderosa biblioteca de paneles con varios elementos de interfaz de usuario esenciales incorporados.

Star Admin React se basa en la biblioteca de interfaz de usuario de Bootstrap y ofrece opciones de personalización ilimitadas para visualizar datos y crear aplicaciones web únicas.

Inicio rápido :
clonar el repositorio:

git clone https://github.com/BootstrapDash/StarAdmin-Free-React-Admin-Template.git

Estadísticas :

Conclusión

En este artículo, revisamos las 14 mejores soluciones gratuitas para crear paneles profesionales y aplicaciones web de panel de administración con React.

Con estas bibliotecas, no tiene que perder tiempo ni esfuerzo creando un tablero desde cero. Estas bibliotecas de React están cargadas con herramientas esenciales, kits de interfaz de usuario y documentación completa que garantiza una experiencia de desarrollador productiva y sin estrés. 

Enlace: https://blog.logrocket.com/top-react-dashboard-libraries/

#react #dashboard 

Las 14 Mejores Bibliotecas De Paneles De React