Edited at

芝の色分けを細分化

More than 1 year has 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こんな感じ



引用元: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;
}


こんな感じです。

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


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