Help us understand the problem. What is going on with this article?

芝の色分けを細分化

More than 3 years have passed since last update.

開発で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こんな感じ
スクリーンショット 2016-10-25 0.47.28.png
引用元: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;
}

こんな感じです。
スクリーンショット 2016-10-25 0.56.25.png

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


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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away