こんにちは、ISSUEの寒河江です。
ISSUEではユーザーの稼働時間を可視化するために、稼働量をグラフで表示しています。
そのグラフを作成する時に遭遇したエラーの修正がなかなか大変でした。

# エラー
先日、とあるテストデータを作成してから、以下のエラーが発生し、
修正に苦労しました。

![img](/mosaic-code.jpg)

![image](https://user-images.githubusercontent.com/29432081/161472237-56261f0a-23ce-4a2a-b803-9daeda68e7e2.png)

# 原因

datasetsに用いる label の名前が他の配列の要素と重複すると発生するようです。
今回は同じ名前のユーザーを2つ作ってしまい、エラーが発生しました。
ですので、labelには重複しない一意な文字列を渡すようにしましょう。

![img](/mosaic-code.jpg)

こんにちは、ISSUEの寒河江です。
ISSUEではユーザーの稼働時間を可視化するために、稼働量をグラフで表示しています。
そのグラフを作成する時に遭遇したエラーの修正がなかなか大変でした。

# エラー
先日、とあるテストデータを作成してから、以下のエラーが発生し、
修正に苦労しました。

```js
Cannot read properties of undefined (reading 'controller')
```

![image](https://user-images.githubusercontent.com/29432081/161472237-56261f0a-23ce-4a2a-b803-9daeda68e7e2.png)

# 原因

datasetsに用いる label の名前が他の配列の要素と重複すると発生するようです。
今回は同じ名前のユーザーを2つ作ってしまい、エラーが発生しました。
ですので、labelには重複しない一意な文字列を渡すようにしましょう。

```js
const datasets = users.map(async (user, i) => {
    return {
      label: getUserName(user), # ここ
      data,
      fill: true,
      backgroundColor: backgroundColors[i],
      borderColor: borderColors[i],
      tension: 0.4,
      borderCapStyle: 'round',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'square',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#eee',
      pointBorderWidth: 10,
      pointHoverRadius: 10,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 1,
      pointRadius: 1,
      pointHitRadius: 50,
})
```

エラー

続きを読むには単価診断を受けてください（30秒）