GraphライブラリNivo#01の使用

23557 ワード
React Nivo 履歴書 Graph テキストリンク
Riot APIを使って面白いものを作っています.
メンバーの取引量をグラフで表示するために、以前から面白いと思っていたグラフライブラリNivoを使いました.
この記事では、Nivoに関する様々な情報ではなく、私が使っている部分だけを紹介します.
Nivoホームページが接続されている場合は、別のグラフィックを選択できます.
Nivoの様々なグラフでもbar形式のグラフを使いました.

Nivoインストール

yarn add @nivo/core @nivo/bar

Nivo Barコード

import { ResponsiveBar } from '@nivo/bar'

// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.
const MyResponsiveBar = ({ data /* see data tab */ }) => (
    <ResponsiveBar
        data={data}
        keys={[
            'hot dog',
            'burger',
            'sandwich',
            'kebab',
            'fries',
            'donut'
        ]}
        indexBy="country"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        valueScale={{ type: 'linear' }}
        indexScale={{ type: 'band', round: true }}
        colors={{ scheme: 'nivo' }}
        defs={[
            {
                id: 'dots',
                type: 'patternDots',
                background: 'inherit',
                color: '#38bcb2',
                size: 4,
                padding: 1,
                stagger: true
            },
            {
                id: 'lines',
                type: 'patternLines',
                background: 'inherit',
                color: '#eed312',
                rotation: -45,
                lineWidth: 6,
                spacing: 10
            }
        ]}
        fill={[
            {
                match: {
                    id: 'fries'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'sandwich'
                },
                id: 'lines'
            }
        ]}
        borderColor={{
            from: 'color',
            modifiers: [
                [
                    'darker',
                    1.6
                ]
            ]
        }}
        axisTop={null}
        axisRight={null}
        axisBottom={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: 'country',
            legendPosition: 'middle',
            legendOffset: 32
        }}
        axisLeft={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: 'food',
            legendPosition: 'middle',
            legendOffset: -40
        }}
        labelSkipWidth={12}
        labelSkipHeight={12}
        labelTextColor={{
            from: 'color',
            modifiers: [
                [
                    'darker',
                    1.6
                ]
            ]
        }}
        legends={[
            {
                dataFrom: 'keys',
                anchor: 'bottom-right',
                direction: 'column',
                justify: false,
                translateX: 120,
                translateY: 0,
                itemsSpacing: 2,
                itemWidth: 100,
                itemHeight: 20,
                itemDirection: 'left-to-right',
                itemOpacity: 0.85,
                symbolSize: 20,
                effects: [
                    {
                        on: 'hover',
                        style: {
                            itemOpacity: 1
                        }
                    }
                ]
            }
        ]}
        role="application"
        ariaLabel="Nivo bar chart demo"
        barAriaLabel={function(e){return e.id+": "+e.formattedValue+" in country: "+e.indexValue}}
    />
)
この形式のプリセットを提供します.
素子が追加されていましたが、ここではどうすればいいのか分からず、いろいろ触ってしまいました.
まず
const MyResponsiveBar = ({ data /* see data tab */ }) => (
    <ResponsiveBar
        data={data}
        keys={[
            'hot dog',
            'burger',
            'sandwich',
            'kebab',
            'fries',
            'donut'
        ]}
この部分からデータは誰が見ても最も重要であることがわかります.
そこで、どのような形でデータを受信するかを分解しました.
export interface BarDatum {
    [key: string]: string | number;
}
export interface DataProps<RawDatum extends BarDatum> {
    data: RawDatum[];
}
タイプスクリプトを使用してプロジェクトを実行しています.インタフェースを生成する必要があります.

export interface UserDamageInfo {
  [key: string]: string | number;
}

let userDamage: object[] = [];
/// map
userDamage[i] = { [user.championName]: user.totalDamageDealtToChampions };


///Nivo Bar Graph Component
type UserProps = {
  data: UserDamageInfo[];
};

/// [key: string]: string | number;
export const DealGraph = ({ data }: UserProps) => {

  const dataKeys = data.map((key: object) => {
    return Object.keys(key);
  });

  return (
    <ResponsiveBar
      data={data}
      keys={[dataKeys[0]]}

乾杯.ジョンニーの取引量が出た.次の文章では、他のチャンピオンの取引量を同時に表示し、設計を修正します.
アプリをストアから削除する手順（iOS、Android）
を使用したマイクロサービスの構築