芝の色分けを細分化

開発でgithubの芝みたいなのをさらに値ごとに細分化して表示するっていうのをやりました。

react-calendar-heatmapを使いました

ソースコードはこちらです。
https://github.com/patientslikeme/react-calendar-heatmap

<CalendarHeatmap
  values={[
    { date: '2016-01-01', count: 1 },
    { date: '2016-01-03', count: 4 },
    { date: '2016-01-06', count: 2 },
    // ...and so on
  ]}
  classForValue={(value) => {
    if (!value) {
      return 'color-empty';
    }
    return `color-scale-${value.count}`;
  }}
/>

.react-calendar-heatmap .color-scale-1 { fill: #d6e685; }
.react-calendar-heatmap .color-scale-2 { fill: #8cc665; }
.react-calendar-heatmap .color-scale-3 { fill: #44a340; }
.react-calendar-heatmap .color-scale-4 { fill: #1e6823; }

ここまでだとgithubこんな感じ

引用元：http://patientslikeme.github.io/react-calendar-heatmap/

これをさらに変数を二つにして、
二段階に色分けを細分化します。

fruits-color.js

<CalendarHeatmap
  values={[
    { date: '2016-10-01', fruit: "apple", color: "red" },
    { date: '2016-10-03', fruit: "apple", color: "blue" },
    { date: '2016-10-06', fruit: "apple", color: "orange" },
    { date: '2016-10-10', fruit: "grape", color: "perple" },
    { date: '2016-10-09', fruit:"grape", color: "green" },
    { date: '2016-10-07', fruit: "apple", color:"red" },
    { date: '2016-09-15', fruit: "apple", color: "blue" },
    // ...and so on
  ]}
  classForValue={(value) => {
    if (!value) {
      return 'color-empty';
    }
    return `color-${value.fruit}-${value.color}`;
  }}
/>

fruits-color.css

.react-calendar-heatmap .color-apple-red{
  fill: #FD151B;
}
.react-calendar-heatmap .color-apple-blue{
  fill: #1B2CC1;
}
.react-calendar-heatmap .color-apple-orange{
  fill: #FE7F2D;
}

.react-calendar-heatmap .color-grape-perple{
  fill: #8661C1;
}
.react-calendar-heatmap .color-grape-green{
  fill: #98CE00;
}

こんな感じです。

実際の開発では、基本的な色とその濃淡で色分けしました。

---

本当はこれの２列分で隙間なくきれいに１日分で表示するのをやりたいのですが、模索中です。