いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた

Nuxt.jsで開発している[Webサービス](https://tsundoku.site)で、
棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。

[vue-chartjs](https://vue-chartjs.org/)を使うと、いい感じのグラフが簡単にできた(*´ω｀*)

## こんな感じで使ってます!!

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/061cfd7c-d18e-bbc5-37bc-77e191d3f034.png" width="720" />

登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!!
色も文字も変えられて、いい感じに(*´ω｀*)

---

## vue-chartjsの使い方

全体の流れはこんな感じ。
1. インストール
2. コンポーネントを作る
3. コンポーネントを配置する

### 1. インストール

まずはインストール

```console
$ npm install vue-chartjs chart.js --save
```


### 2. コンポーネントを作る

```html
<!-- Template Tag can not be merged... -->

<script lang="ts">
import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator";
import Chart from "chart.js";
import VueChart from "vue-chartjs";
const Line = VueChart.Line;
const reactiveProp = VueChart.mixins.reactiveProp;

@Component
export default class ChartLine extends mixins(Line, reactiveProp) {
  @Prop({ default: {} }) chartData: Chart.ChartData;
  @Prop({ default: {} }) options: Chart.ChartOptions;

  mounted() {
    this.renderChart(this.chartData, this.options);
  }
}
</script>
```

**注意点としては、以下の3つ**

1. `vue-chartjs`が生成するので、`<template>`タグをつけない
2. `mixins`が重複するので、`import Chart from "chart.js";`
3. データのProp名はreactivePropで決まってるので`chartData`にする  
   参考: [src/mixins/index.js | Github](https://github.com/apertureless/vue-chartjs/blob/18f11350a2e505014c2c4d1a9b68a92bfe8cd394/src/mixins/index.js#L89-L94)

この例は折れ線グラフのため、`Line`をextendsしてるけど、
ほかのチャートは、それぞれコンポーネントを用意すればOK

棒グラフの場合はこんな感じ。

```html
<!-- Template Tag can not be merged... -->

<script lang="ts">
import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator";
import Chart from "chart.js";
import VueChart from "vue-chartjs";
// 棒グラフの場合は、Barを使う
const Bar = VueChart.Bar;
const reactiveProp = VueChart.mixins.reactiveProp;

@Component
// mixinsもBarに変更
export default class ChartLine extends mixins(Bar, reactiveProp) {
  @Prop({ default: {} }) chartData: Chart.ChartData;
  @Prop({ default: {} }) options: Chart.ChartOptions;

  mounted() {
    this.renderChart(this.chartData, this.options);
  }
}
</script>
```

### 3. コンポーネントを配置する

2.で作成したコンポーネントChartLineとChartBarを配置する。
チャートのデータ(chartData)やオプション、スタイルをpropで設定。

```html
<template>
  <div class="chart-container">
    <ChartLine :chartData="chartData" :options="chartOption" :styles="chartStyles" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "nuxt-property-decorator";
import { ChartData, ChartOptions } from "chart.js";
import ChartLine from "~/components/ChartLine.vue";
import ChartBar from "~/components/ChartBar.vue";

@Component({ components: { ChartLine, ChartBar } })
export default class ChartPage extends Vue {
  // チャートのデータ
  private chartData: ChartData = {
    // 横軸のラベル
    labels: ["A", "B", "C", "D", "E"],
    // データのリスト
    datasets: [
      {
        label: "Data One", // データのラベル
        data: [1, 5, 3, 4, 3] // データの値。labelsと同じサイズ
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30]
      }
    ]
  };
  
  // チャートのオプション
  private chartOption: ChartOptions = {
    // アスペクト比を固定しないように変更
    maintainAspectRatio: false
  };
  
  // チャートのスタイル: <canvas>のstyle属性として設定
  private chartStyles = {
    height: "100%",
    width: "100%"
  };
}
</script>

<style lang="scss">
.chart-container {
  /**
   * vue-chartjsで生成する<canvas>がabsoluteのため、
   * relateveを設定
   */
  position: relative;
  
  /**
   * chartStylesを設定しているので、
   * height/wightが有効になる
   */
  height: 40vh;
  width: 80vw;
  margin: 0 auto;
}
</style>
```

こんな感じでチャートデータを渡すと、こんな感じに(*´ω｀*)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/038debbe-9a52-876a-a28c-d8d9de6cfb08.png" width="720"/>


**注意: ハマったポイント**

グラフ描画だけであれば、データを渡すだけなので簡単(*´ω｀*)
ただ、サイズを変えるのは一苦労...

注意するのは3つ。

1. `chartOption`で`maintainAspectRatio: false`を指定
2. `chartStyles`でチャートのheight/widthを100%に設定
3. 親要素(`.chart-container`)に`position: relative;`

vue-chartjsには`chartStyles`以外にもpropがあるので、
ほかは[公式ドキュメント](https://vue-chartjs.org/api/#props)を参照

---

## いろいろ設定を変えてみる

色や形を変えるなどチャート自体の設定は、
chart.jsの[公式ドキュメント](https://www.chartjs.org/docs/latest/)を見ていく感じっぽい。

困ったら、公式ドキュメントをみれば、だいたい行けた感じ(*´ω｀*)
ここからは、実際に使ってみた設定例を紹介。

長いので、目次を見て好きなのを見るのがオススメ。

### dataset関連

参考: [Charts · Chart.js documentation](https://www.chartjs.org/docs/latest/charts/)
ここに載ってる、それぞれのグラフを見るといい感じ♪

#### 線の色を変える: `borderColor`

```javascript
  private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Data One",
        data: [1, 5, 3, 4, 3],
        borderColor: "green" // 線の色
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30],
        borderColor: "red"
      }
    ]
  };
```

![スクリーンショット 2019-09-21 18.15.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/9c199225-d605-26fa-8035-64f9d6a7f46e.png)

線の色を変えても、棒グラフの色は変わらない。。

#### 塗りつぶしの色を変える: `backgroundColor`

```javascript
  private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Data One",
        data: [1, 5, 3, 4, 3],
        borderColor: "green", // 線の色
        backgroundColor: "rgba(0, 255, 0, 0.4)" // 塗りつぶしの色
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30],
        borderColor: "red",
        backgroundColor: "rgba(255, 0, 0, 0.4)"
      }
    ]
  };
```

![スクリーンショット 2019-09-21 18.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/7419cb4a-19f5-47a9-e2c0-1222c7a2dd70.png)

いい感じになったけど、折れ線グラフの場合は、点の背景色も変わるので、透過しないほうが良いかも。

色関連の値には、rgbaも使える。

#### 塗りつぶしをしない: `fill`

```javascript
  private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Data One",
        data: [1, 5, 3, 4, 3],
        borderColor: "green",
        backgroundColor: "rgba(0, 255, 0, 0.4)", 
        fill: false // 折れ線グラフの塗りつぶしを無効化
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30],
        borderColor: "red",
        backgroundColor: "rgba(255, 0, 0, 0.4)",
        fill: false
      }
    ]
  };
```

![スクリーンショット 2019-09-21 18.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/5965d143-2f58-f876-c84a-8c904448431a.png)

#### 線を真っ直ぐにする: `tension`

```javascript
  private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Data One",
        data: [1, 5, 3, 4, 3],
        borderColor: "green",
        backgroundColor: "rgba(0, 255, 0, 0.4)", 
        fill: false,
        tension: 0 // 線を真っ直ぐにする
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30],
        borderColor: "red",
        backgroundColor: "rgba(255, 0, 0, 0.4)",
        fill: false,
        tension: 0
      }
    ]
  };
```

![スクリーンショット 2019-09-21 18.20.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/75f69804-de7c-6996-5723-9a0a6368d035.png)

折れ線ぽっくなった(*´ω｀*)

#### 折れ線グラフの点の大きさを変える: `radius` / `hoverRadius`

```javascript
  private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Data One",
        data: [1, 5, 3, 4, 3],
        borderColor: "green",
        backgroundColor: "rgba(0, 255, 0, 0.4)", 
        fill: false,
        tension: 0,
        radius: 8, // 点の大きさ
        hoverRadius: 20 // 点の大きさ(マウスホバー時)
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30],
        borderColor: "red",
        backgroundColor: "rgba(255, 0, 0, 0.4)",
        fill: false,
        tension: 0,
        radius: 8,
        hoverRadius: 20
      }
    ]
  };
```

![スクリーンショット 2019-09-21 18.23.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/362e525a-bf91-1fe9-cfe1-e58235dc739c.png)

#### グラフを組み合わせる(複合グラフ): `type`

```javascript
  private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Data One",
        data: [1, 5, 3, 4, 3],
        borderColor: "green",
        backgroundColor: "rgba(0, 255, 0, 0.4)", 
        fill: false,
        tension: 0,
        radius: 8,
        hoverRadius: 20,
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30],
        borderColor: "red",
        backgroundColor: "rgba(255, 0, 0, 0.4)",
        fill: false,
        tension: 0,
        radius: 8,
        hoverRadius: 20,
        type: "line" // 折れ線グラフで表示
      }
    ]
  };
```

![スクリーンショット 2019-09-21 18.29.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/c191c6ea-341f-be05-127c-ee9ec8c0ac83.png)

Barのときにチャートの`type`を指定すると変更できる。

参考: [Mixed · Chart.js documentation](https://www.chartjs.org/docs/latest/charts/mixed.html)
参考: [chart.js で複数軸の複合グラフを描く - Qiita](https://qiita.com/kd9951/items/aece80abe0bd42b3b5d3)

### options関連

参考: [Configuration · Chart.js documentation](https://www.chartjs.org/docs/latest/configuration/)
このあたりを見ていくといい感じ。

それぞれの例がわかりくくいけど、このあたりに`option`のどこに書けばいいか書いてある。

<img width="800" alt="スクリーンショット_2019-09-21_19_15_19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/169fd02c-5828-18de-2f65-f5af4a4f7668.png">

また、Y軸関連は、こっち。

参考: [Axes · Chart.js documentation](https://www.chartjs.org/docs/latest/axes/)

#### 凡例の位置を変える: `legend`

```javascript
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
    legend: { position: "bottom" }, // 凡例の位置を変える
  }
```

![スクリーンショット 2019-09-21 18.34.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/40c5924f-89e3-f999-9c26-c6ea1a3644f3.png)

参考: [Legend · Chart.js documentation](https://www.chartjs.org/docs/latest/configuration/legend.html)

#### 折れ線グラフの点の大きさなどを全体で設定: `elements`

```javascript
 private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Data One",
        data: [1, 5, 3, 4, 3],
        borderColor: "green",
        backgroundColor: "rgba(0, 255, 0, 0.4)"
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30],
        borderColor: "red",
        backgroundColor: "rgba(255, 0, 0, 0.4)",
        type: "line"
      }
    ]
  };

  // チャートのオプション
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
    legend: { position: "bottom" },
    elements: {
      point: {
        radius: 8, // 点の大きさ
        hoverRadius: 20 // 点の大きさ(マウスホバー時)
      },
      line: {
        tension: 0, // 線を真っ直ぐにする
        fill: false // 折れ線グラフの塗りつぶしを無効化
      }
    }
  };
```

![スクリーンショット 2019-09-21 18.38.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/4c258ed8-30fd-a507-a765-f5d61b7375df.png)

参考: [Elements · Chart.js documentation](https://www.chartjs.org/docs/latest/configuration/elements.html)


#### Y軸を2つにする: `scales.yAxes`

```javascript
 private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Data One",
        data: [1, 5, 3, 4, 3],
        borderColor: "green",
        backgroundColor: "rgba(0, 255, 0, 0.4)"
      },
      {
        label: "Data Two",
        data: [10, 50, 30, 40, 30],
        borderColor: "red",
        backgroundColor: "rgba(255, 0, 0, 0.4)",
        type: "line",
        yAxisID: "y-axis-2" // Y軸のIDを指定
      }
    ]
  };

  // チャートのオプション
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
    legend: { position: "bottom" },
    elements: {
      point: { radius: 8, hoverRadius: 20 },
      line: { tension: 0, fill: false }
    },
    scales: {
      yAxes: [
        { 
          // 左の軸。設定はデフォルトのまま
        },
        {
          id: "y-axis-2",
          position: "right" // 右に表示する
        }
      ]
    }
  };
```

![スクリーンショット 2019-09-21 18.43.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d43c6ab7-0ae1-0fc1-3d4d-01a74b71bd78.png)

参考: [Axes · Chart.js documentation](https://www.chartjs.org/docs/latest/axes/)

### Y軸のラベルを変える: `scales.yAxes.ticks`

```javascript
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
    legend: { position: "bottom" },
    elements: {
      point: { radius: 8, hoverRadius: 20 },
      line: { tension: 0, fill: false }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            // 左の軸は、先頭に'¥'をつける
            callback: (label, index, labels) => "¥" + label.toLocaleString()
          }
        },
        {
          id: "y-axis-2",
          position: "right",
          ticks: {
             // 右の軸は、末尾に'冊'をつける
            callback: (label, index, labels) => label.toLocaleString() + "冊"
          }
        }
      ]
    }
  };
```

![スクリーンショット 2019-09-21 18.46.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/b9918ea8-982f-b453-ae63-424243606006.png)

ただ、このままだとホバーしたときのツールチップの値は変わらない。。
後述する`tooltips.callbacks.label`を使って変更が必要。

参考: [Axes · Chart.js documentation](https://www.chartjs.org/docs/latest/axes/)
参考: [コピペでOK！Chart.js の数字を３桁カンマで表示する方法 – console dot log](https://blog.capilano-fw.com/?p=235)

### 横軸を非表示にする: `scales.yAxes.display`

```javascript
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
    legend: { position: "bottom" },
    elements: {
      point: { radius: 8, hoverRadius: 20 },
      line: { tension: 0, fill: false }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            callback: (label, index, labels) => "¥" + label.toLocaleString()
          }
        },
        {
          id: "y-axis-2",
          position: "right",
          display: false, // 右の軸を非表示にする
          ticks: {
            callback: (label, index, labels) => label.toLocaleString() + "冊"
          }
        }
      ]
    },
  }
```

![スクリーンショット 2019-09-21 18.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d4ec8fe1-73ca-27a1-5efd-690faefd13bc.png)

参考: [Axes · Chart.js documentation](https://www.chartjs.org/docs/latest/axes/)

### ホバー時のツールチップで両方表示にする: `tooltips.mode`

```javascript
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
    legend: { position: "bottom" },
    elements: {
      point: { radius: 8, hoverRadius: 20 },
      line: { tension: 0, fill: false }
    },
    scales: {
      yAxes: [
        { ticks: { callback: (label, index, labels) => "¥" + label.toLocaleString() } },
        {
          id: "y-axis-2",
          position: "right",
          ticks: { callback: (label, index, labels) => label.toLocaleString() + "冊" }
        }
      ]
    },
    tooltips: { // ツールチップの設定
      mode: "index" // 全データを表示する
    }
  };
```

![スクリーンショット 2019-09-21 18.50.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/57b8249c-2389-5860-a1b9-9904f733ae41.png)

参考: [Tooltip · Chart.js documentation](https://www.chartjs.org/docs/latest/configuration/tooltip.html)

### ツールチップの表示を変える: `tooltips.callbacks.label`

```javascript
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
    legend: { position: "bottom" },
    elements: {
      point: { radius: 8, hoverRadius: 20 },
      line: { tension: 0, fill: false }
    },
    scales: {
      yAxes: [
        { ticks: { callback: (label, index, labels) => "¥" + label.toLocaleString() } },
        {
          id: "y-axis-2",
          position: "right",
          ticks: { callback: (label, index, labels) => label.toLocaleString() + "冊" }
        }
      ]
    },
    tooltips: { // ツールチップの設定
      mode: "index",
      callbacks: {
        label: function(tooltipItem, data) { // ラベルの表示変更
          // データが'Data One'か'Data Two'かのインデックスを取得
          const index = tooltipItem.datasetIndex;
          if (index === 0) {
            // 凡例にあるラベルを取得
            var label = data.datasets[index].label || "";
            if (label) label += ": ";
            // 該当データを取得して、先頭に'¥'をつける
            label += "¥" + tooltipItem.yLabel.toLocaleString();
            return label;
          } else {
            var label = data.datasets[index].label || "";
            if (label) label += ": ";
            label += tooltipItem.yLabel.toLocaleString() + "冊";
            return label;
          }
        }
      }
    }
  };
```

![スクリーンショット 2019-09-21 18.53.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/cec3e36f-e681-9f8f-9085-e8d9b0428036.png)

参考: [Tooltip · Chart.js documentation](https://www.chartjs.org/docs/latest/configuration/tooltip.html)
参考: [コピペでOK！Chart.js の数字を３桁カンマで表示する方法 – console dot log](https://blog.capilano-fw.com/?p=235)

## その他の便利関数

### 画面サイズを判定する

`window.matchMedia().matches`でメディアクエリがJavaScriptで使えるらしい。。
以下のような関数を作っておけば、

```javascript
private isDesktop() {
  return window.matchMedia("screen and (min-width:768px)").matches;
}
```

画面サイズなどによって、

1. 横軸ラベルの表示/非表示を切り替えたり、
2. 適用するスタイルを変えたり、
3. 点の大きさを変えたり
4. 
できる。

参考: [Chart.js でレスポンシブ指定をするとサイズが自由に変更できなくなる - 約束の地](https://obel.hatenablog.jp/entry/20160626/1466937585)

### カラーコードのHEXをRGBAに変換する

こんな感じで、HEXカラーコードとopacityからRGBAに変換できる。

```javascript
private convertHex(hex: string, opacity: number) {
  const arr = hex.replace("#", "");
  const r = parseInt(arr.substring(0, 2), 16);
  const g = parseInt(arr.substring(2, 4), 16);
  const b = parseInt(arr.substring(4, 6), 16);

  return "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
}
```

RGBで入力するのは大変なので、これがあると便利(*´ω｀*)
こんな感じで使えます(*´ω｀*)

```javascript
{
  label: "Data Two",
  data: [10, 50, 30, 40, 30],
  borderColor: "red",
  backgroundColor: this.convertHex("#FF0000", 0.4),
}
```

参考: [Hex 2 rgba converter - JSFiddle](https://jsfiddle.net/subodhghulaxe/t568u/)

## おわりに

[vue-chartjs](https://vue-chartjs.org/)をつかえば、
TypeScriptなNuxt.jsでも簡単にいろんなグラフが表示できる(*´ω｀*)

## こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
[積読ハウマッチ](https://tsundoku.site)は、Nuxt.js+Firebaseで開発してます!

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/>

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

こんな感じで、積読本・読了本の総数でどこまでいけるか表示したりしています♪
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">なんかつけてる(*´ω｀*)<br>月までは遠いので、まずは近いところから(*´ω｀*) <a href="https://t.co/JMHoFbv5cg">pic.twitter.com/JMHoFbv5cg</a></p>&mdash; 積読ハウマッチ📚きらぷか (@kira_puka) <a href="https://twitter.com/kira_puka/status/1175076203599785984?ref_src=twsrc%5Etfw">September 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

要望・感想・アドバイスなどあれば、
公式アカウント([@MemoryLoverz](https://twitter.com/MemoryLoverz))や開発者([@kira_puka](https://twitter.com/kira_puka))まで


# 参考にしたサイト
- [📈 vue-chartjs](https://vue-chartjs.org/)
- [Chart.js · Chart.js documentation](https://www.chartjs.org/docs/latest/)
- [NuxtでChart.jsを利用する - Qiita](https://qiita.com/kattoon/items/a76caa684261956c900b)
- [Nuxt.js使って個人開発やってみた　〜時間割を円グラフで表示するサービスをリリースした話〜 - Qiita](https://qiita.com/mitsudaman/items/b30b5e905ff348bf35bc)
- [vue-chartjs馴れ初め - Qiita](https://qiita.com/muramasawani/items/6086ecfcb92034774599)
- [Vue.js(ts)でvue-chartjsを使う - Qiita](https://qiita.com/is_ryo/items/1609dcee76aa5df93e2a)
- [chart.js で複数軸の複合グラフを描く - Qiita](https://qiita.com/kd9951/items/aece80abe0bd42b3b5d3)
- [Chart.js でレスポンシブ指定をするとサイズが自由に変更できなくなる - 約束の地](https://obel.hatenablog.jp/entry/20160626/1466937585)
- [Hex 2 rgba converter - JSFiddle](https://jsfiddle.net/subodhghulaxe/t568u/)