EC-CUBE4の管理画面の売り上げグラフがChart.jsで実装されたのでカスタマイズしてみた

# 概要

EC-CUBE4の管理画面の売り上げグラフが実装されたのでカスタマイズしてみたメモ

[EC-CUBE4リポジトリ](https://github.com/EC-CUBE/ec-cube/tree/4.0)
[EC-CUBE4のドキュメント](http://doc3n.ec-cube.net/)
[Chart.js公式マニュアル](http://www.chartjs.org/docs/latest/)
[Chart.jsの日本語マニュアル](https://misc.0o0o.org/chartjs-doc-ja/)

# デフォルト

<img width="1002" alt="スクリーンショット 2018-08-07 15.42.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/206259/ef0e87e0-0169-b5ff-ea6b-0295efcf0577.png">

# グラフの左右にメモリを追加

https://github.com/okazy/ec-cube/commit/30efcc3febf9b1ee13c68a0e5361038af0530039

<img width="1078" alt="スクリーンショット 2018-08-07 15.26.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/206259/82ee4b4a-5cf4-5875-0ab2-19483cccbd74.png">

```javascript:/src/Eccube/Resource/template/admin/index.twigの78行目付近から
scales: {
    yAxes: [
        {
            id: 'y-axis-1',
            display: true, // trueに変更
            position: 'left', // 左に表示
            ticks: {
                beginAtZero: true,
                callback: function(label, index, labels) {
                    return '¥' + label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                }
            }
        },
        {
            id: 'y-axis-2',
            display: true, // trueに変更
            position: 'right', // 右に表示
            ticks: {
                beginAtZero: true,
                stepSize: 50,
                callback: function(label, index, labels) {
                    return label.toString();
                }
            },
            gridLines: { // 件数の横グリッドを消す
                drawOnChartArea: false
            }
        }
    ]
}
```

# ツールチップに数値に３桁ごとにカンマを打つ

https://github.com/okazy/ec-cube/commit/2f2e4dc063c83e3b6bd00f7fa962459a9f60bbb7

<img width="1085" alt="スクリーンショット 2018-08-07 15.28.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/206259/f77c9dda-1b68-4d8b-41df-6b23e11de444.png">

```javascript:/src/Eccube/Resource/template/admin/index.twigの70行目付近から
tooltips: {
    callbacks: {
        label: function(tooltipItem, data) {
            console.log(tooltipItem);
            return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
    }
},
```

# 月間のグラフで月初からではなく３０日間のデータを表示する

https://github.com/okazy/ec-cube/commit/dd9ad041e9ccfb3c13f02fd4b4779c11958fb822

<img width="1087" alt="スクリーンショット 2018-08-07 15.35.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/206259/2f5b0bb7-d17c-f076-adb4-ab9722f062e3.png">

```php:/Users/hideki_okajima/PhpstormProjects/ec-cube/src/Eccube/Controller/Admin/AdminController.phpの271行目付近
    public function sale(Request $request)
    {
        if (!($request->isXmlHttpRequest() && $this->isTokenValid())) {
            return $this->json(['status' => 'NG'], 400);
        }

        // 週間の売上金額
        $toDate = Carbon::now();
        $fromDate = Carbon::today()->subWeek();
        $rawWeekly = $this->getData($fromDate, $toDate, 'Y/m/d');

        // 月間の売上金額
        $fromDate = Carbon::today()->subMonth(); // ここを変更
        $rawMonthly = $this->getData($fromDate, $toDate, 'Y/m/d');

        // 年間の売上金額
        $fromDate = Carbon::now()->subYear()->startOfMonth();
        $rawYear = $this->getData($fromDate, $toDate, 'Y/m');

        $datas = [$rawWeekly, $rawMonthly, $rawYear];

        return $this->json($datas);
    }
```