Kendreactによる応答時間追跡ダッシュボード

すぐに反応するユーザーインターフェイスを作成するための優れたライブラリです.それでも、質問は、どのように正確にKendoreactは開発者を助けるのですか?それはアプリのための強力な、洗練された迅速なUIを構築するときに時間を節約できます.また、UIのルックアンドフィールの一貫性を保証します.
Kendoreactは、データグリッド、スケジューラ、リッチテキストエディタなどの複雑なものからボタンやチェックボックスにすべての方法のような複雑なものに至るまで、100以上のコンポーネントを使用して出荷する反応UIライブラリです.また、それを超えて、デザイナーの開発者のコラボレーションを改善する機能があります.このポストでは、我々は応答時間を追跡ダッシュボードの豊富な構築されます.

必要条件

このチュートリアルでは次のようにします.

V 16またはNewerに反応する

反応の基本的理解

テキストエディタ

始める

あなたはすでにNPXを使用して反応アプリをscaffoldingに精通している場合は、ポストのこの部分をスキップするが、されていない人のために、あなたのローカルマシン上で実行している反応アプリ開発サーバーを取得するには、以下の手順に従ってください.すぐに反応プロジェクトをセットアップするために、あなたの端末に以下のコマンドを入力してください.

    npx create-react-app kendo-ui-demo --use-npm
    cd kendo-ui-demo
    npm start

糸を使用する場合は、次のコマンドを使用します.

    yarn create react-app kendo-ui-demo
    cd kendo-ui-demo
    yarn start

さあ、アプリのコードを取り除きましょう.JSファイルはこのようになります.

    Import "./App.css"

    function App () {
      return <div className="App"></div>;
    }

    export default App;

次に、このプロジェクトのために使用するKendoreactパッケージを加えましょう.私はKendoReact Default theme このプロジェクトのために、他のオプションは、例えばKendoReact Bootstrap とKendoReact Material theme .

Note: KendoReact is a commercial UI component library, and as a part of this you will need to provide a license key when you use the components in your React projects. You can snag a license key through a free trial or by owning a commercial license. For more information, you can head over to the KendoReact Licensing page.

次のコマンドを実行して、KendoreACTのデフォルトテーマをインストールしましょう.

    npm install --save @progress/kendo-theme-default

The --save 上記のコマンドは、このパッケージがプロダクション依存であり、開発依存ではないことを示します依存関係の使用--save-dev .
糸を使用する場合は、次のコマンドを使用します.

    yarn add @progress/kendo-theme-default

上記のコマンドでは、デフォルトのテーマの前に@進捗が通知されますこれは、KendoreActが複数のNPMパッケージとして配布されていることを意味します.したがって、我々はKendoreactから他のパッケージをインストールするとき、これを大いに見ます.さあ、パッケージからCSSファイルをインポートしましょうsrc/App.js .
注意:既存のインポートを追加する前にApp.css インポート

    import '@progress/kendo-theme-default/dist/all.css';

Kendoreact UIコンポーネントは、しっかりと特定のテーマに結合されていないように設計されています.あなたは、なぜこれらの3つのテーマやカスタムテーマのいずれかを含める必要がありますか?まあ、これは、ルックアンドフィールを変更することによって、アプリケーションのSASSやCSSファイルを変更したり、アプリケーション全体を変更することで、テーマを交換することもできます.
必要に応じて、任意の追加のカスタムスタイルは、空のsrc/appに行くことができます.CSSファイル.

複数のKendoreactコンポーネントの統合

Kendoreactは多くのモジュラーコンポーネントの豊富なスイートです.前述のように、このデモでは、Kendoreactからインポートされた複数のコンポーネントを使用して、応答時間追跡ダッシュボードアプリケーションを構築します.始める前に、インストールしてインポートしましょう React Layout Library パッケージとその依存関係.

    npm install --save @progress/kendo-react-layout @progress/kendo-react-progressbars @progress/kendo-licensing @progress/kendo-react-intl

これで、プロジェクトにパッケージをインポートする時間です.アプリで次のコードを追加します.jsファイル

    import { Card, GridLayout, GridLayoutItem } from "@progress/kendo-react-layout";

下の画像は、我々が構築するプロジェクトデモの完成したコピーを示しています.

の作成から始めましょうdata.json ファイル名src フォルダは、我々はこのデモのために使用される静的データを使用して、それを設定するこれは、サーバーまたは外部APIの必要性を排除します.

    touch data.json

    [
     {
      "id": 1,
      "on": "Work",
      "time": "32hrs",
      "lastWeek": "36hrs",
      "layoutColor": "hsl(15, 100%, 70%)",
      "row": "1",
      "col": "2"
     },
     {
      "id": 2,
      "on": "Play",
      "time": "10hrs",
      "lastWeek": "8hrs",
      "layoutColor": "hsl(195, 74%, 62%)",
      "row": "1",
      "col": "3"
     },
     {
      "id": 3,
      "on": "Study",
      "time": "4hrs",
      "lastWeek": "7hrs",
      "layoutColor": "hsl(348, 100%, 68%)",
      "row": "1",
      "col": "4"
     },
     {
      "id": 4,
      "on": "Exercise",
      "time": "4hrs",
      "lastWeek": "5hrs",
      "layoutColor": "hsl(145, 58%, 55%)",
      "row": "2",
      "col": "2"
     },
     {
      "id": 5,
      "on": "Social",
      "time": "5hrs",
      "lastWeek": "10hrs",
      "layoutColor": "hsl(264, 64%, 52%)",
      "row": "2",
      "col": "3"
     },
     {
      "id": 6,
      "on": "Self Care",
      "time": "2hrs",
      "lastWeek": "2hrs",
      "layoutColor": "hsl(43, 84%, 65%)",
      "row": "2",
      "col": "4"
     }
    ]

では、データをApp.js 以下のコマンドを使用したファイル

    import Data from "./data.json";

現在、我々は我々をつくって、輸入しますdata.json 開発を始めましょう.
にApp.js ファイルを作成しましょうApp と我々のデフォルトのエクスポートとして使用します.その後、コードエディターでこのように見えるものがあります.

    import { Card, GridLayout, GridLayoutItem } from "@progress/kendo-react-layout";
    import Data from "./data.json";
    import "@progress/kendo-theme-default/dist/all.css";
    import "./App.css";

    function App(){
    ...
    };
    export default App;

次に、関数に次のコードを貼り付けますApp .

     let paddingScreen = 20;
     if (window.innerWidth < 600) {
      let col = 0;
      let row = 3;
      paddingScreen = 5;
      Data.map((item) => {
       if (col > 1) {
        col = 1;
        row = row + 1;
       } else {
        col = col + 1;
       }
       item.col = col;
       item.row = row;
      });
     }
     return (
      <div
       style={{
        height: "100%",
        width: "100%",
        paddingBottom: "3em",
        backgroundColor: "hsl(226, 43%, 10%)",
       }}
      >
       <GridLayout
        gap={{
         rows: 175,
         cols: 30,
        }}
        rows={[
         {
          height: 50,
         },
         {
          height: 50,
         },
         {
          height: 50,
         },
         {
          height: 50,
         },
        ]}
        cols={[
         {
          width: 200,
         },
         {
          width: 200,
         },
         {
          width: 200,
         },
         {
          width: 200,
         },
        ]}
        style={{ padding: `10% 0 0 ${paddingScreen}%` }}
       >
        <GridLayoutItem
         row={1}
         col={1}
         rowSpan={2}
         style={{ marginBottom: "20em" }}
        >
         <Card style={{ backgroundColor: "rgba(0,0,0,0)", border: "none" }}>
          <div
           style={{
            backgroundColor: "hsl(235, 46%, 20%)",
            borderRadius: 10,
           }}
          >
           <div
            style={{
             borderRadius: 10,
             padding: "1em 1em 3em 1.7em",
             backgroundColor: "hsl(246, 80%, 60%)",
            }}
           >
            <img
             src={`${process.env.PUBLIC_URL}/WhatsApp Image 2021-10-31 at 12.18.47 AM.jpeg`}
             style={{
              width: 65,
              height: 65,
              objectFit: "cover",
              borderRadius: 60,
              border: "2px solid white",
             }}
            />
            <p style={{ color: "white", marginBottom: "-1.3em" }}>
             Report for
            </p>
            <h1
             style={{
              color: "white",
              fontSize: "2rem",
              fontWeight: 400,
             }}
            >
             Fatima Usman
            </h1>
           </div>
           <div className="dwm">
            <p>Daily</p>
            <p>Weekly</p>
            <p>Monthly</p>
           </div>
          </div>
         </Card>
        </GridLayoutItem>
        {Data.map((item) => {
         const { id, on, time, lastWeek, layoutColor, row, col } = item;
         return (
          <GridLayoutItem row={row} col={col} colSpan={1} rowSpan={1} id={id}>
           <Card
            style={{
             border: "none",
             borderRadius: 10,
             backgroundColor: "rgba(0,0,0,0)",
            }}
           >
            <div
             style={{
              backgroundColor: layoutColor,
              height: 50,
              borderRadius: 0,
             }}
            ></div>
            <div className="ttc">
             <p>{on}</p>
             <h1>{time}</h1>
             <p>Last Week - {lastWeek}</p>
            </div>
           </Card>
          </GridLayoutItem>
         );
        })}
       </GridLayout>
      </div>
     );

The React GridLayout component インポート@progress/kendo-react-layout ラッパーとして働くGridLayoutItem , 中GridLayoutItem 表示するデータのコンテナです.ここでは、その文を理解するための視覚的な援助です.

上記のコードでは、GridLayoutのプロップとして渡されたGAP、Rows、COLSが表示されます.GridLayoutは、そのセクション全体にまたがる行と行の数を定義します.The gap propは行とcolの間のギャップを定義します.したがって、グリッドレイアウトはグリッドシステムを定義しますが、GridLayoutEtemはこのグリッドシステムに従って、各項目の行、col、rowspan、colspanの数を割り当てます.( rowspanとcolspanは、特定のGridLayoutItemがどれだけの行を割り当てているかを定義します.
The React Card component カード内のアイテムのdivラッパーとして動作します.カードコンポーネントについては何も変わったことはありませんが、あなたのUIデザインによっては、私がしたようにスタイル変更をする必要はありません.
また、我々はまた、剣道UIによって提供されるコンポーネントにスタイル小道具を渡さ気づいた必要があります.Kendoreactは定義済みのスタイルのセットが付属していますが、我々はまた、フィットを参照してください、これらのコンポーネントを変更することができます.あなたの個人的な好みに応じて、インラインスタイルや外部スタイルシートまたは両方を使用することができますので、Kendoreact両方のスタイルの小道具とクラス名小道具をすることができます.
今、アプリを空に.CSSファイルsrc 次に、次のスタイルをコピーしてペーストします.

    .dwm {
     margin-top: 1.5em;
    }
    .dwm p {
     cursor: pointer;
     margin-left: 1em;
     width: fit-content;
     color: hsl(235, 45%, 61%);
    }
    .dwm p:hover {
     color: hsl(236, 100%, 87%);
    }
    .ttc {
     background-color: hsl(235, 46%, 20%);
     color: white;
     margin-top: -1.2em;
     padding-left: 1em;
     border-radius: 10px;
    }
    .ttc h1 {
     font-size: 3rem;
     font-weight: 400;
     margin-bottom: -0.2em;
    }
    .ttc :first-child {
     margin-bottom: -2em;
    }

上記のコードでは、スタイルは、プロジェクトのための快適でモダンなUIを作成することです.Kendoreactのおかげで、我々は彼らの定義済みのスタイルだけに制限されません.
GridLayoutはオブジェクトとしてプロップギャップの項目を取ります.一方、prop行とcolは配列として項目を取ります.また、配列の各項目は、単一の行またはcolを表します.たとえば、次のように配列を渡します.

    cols={[
      {
       width: 200,
      },
      {
       width: 200,
      },
      {
       width: 200,
      },
      {
       width: 200,
      },
    ]}

配列の各項目はGridLayoutItemに渡された各colを表します.したがって、列1は配列の最初のインデックスです.列2は配列の2番目のインデックスです.
最後に、関数の一番上のセクションの条件付きロジックに気づくでしょうApp .

    if (window.innerWidth < 600) {
      let col = 0;
      let row = 3;
      paddingScreen = 5;
      Data.map((item) => {
       if (col > 1) {
        col = 1;
        row = row + 1;
       } else {
        col = col + 1;
       }
       item.col = col;
       item.row = row;
      });
    }

このロジックは、CSSでのメディアクエリと同様に、グリッドシステムが画面幅によってどのようにレンダリングされるかを変更するのに役立ちます.この場合、我々はアプリケーション内のすべてのロジックを実行している.これは、各GridLayoutItemの行と行を変更できる唯一の方法です.
それで、我々がしたすべては、データのcolと行データを調節することでした.JSONファイルは、画面幅に合わせてGridLayoutItemを変更しました.すべての手順を実行した後、以下のイメージと同じ結果を持つ必要があります.


親切に、両方のデスクトップとモバイルビューの画面幅を変更した後、レイアウトの変更を表示するページをリロードします.それでも、メディア問合せのようなダイナミックな反応性を望む人々のために、あなたはaddEventListener Windows Resizingの場合、イベントリスナーに渡されたコールバックからそのロジックを実行します.

結論

デモでは、1つのモジュールからすべてのコンポーネントをインポートします.それでも、大きなプロジェクトのためにKendoreACTを使用するとき、あなたはあなたが好きであるように多くのモジュールとして使用することができて、あなたがゼロ規制で欲しいどんなモジュールからでも望むように、多くの構成要素として輸入します.以下に例を示します.

    npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-data-tools @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-treeview

次に、次のようにプロジェクトにインポートします.

    import { process } from '@progress/kendo-data-query';
    import { Grid, GridColumn } from '@progress/kendo-react-grid';
    import { DropDownList } from '@progress/kendo-react-dropdowns';
    import { Window } from '@progress/kendo-react-dialogs';

あなたは、彼らの計画が何であるかについて見つけることができますKendoReact pricing page . また、すべてのKendoreactライセンスは、より良い開発者の経験を支援顧客サポートが付属しています.