Эта статья поможет вам создать график в стиле github для представления данных о покупках из вашего приложения. С помощью простой модификации вы можете представить действия пользователя и т. д. в этом формате.
Что такое стиль Github?
Изображение стоит тысячи слов!
Увеличьте количество оттенков зеленого, если пользователь внес больше вкладов. Самый темный зеленый цвет является лучшим.
Теперь давайте получим аналогичный график, показывающий заказы, сделанные в течение 2017 года. Показать простые сведения о покупках при наведении курсора на ячейку, предназначенную для определенного дня.
Как это полезно?
- С первого взгляда получите представление о заказах. Показать цвет в зависимости от общей суммы заказа в день.
- Вы поймете, хорошо ли работают ваши кампании, если во время кампании и позже вы увидите всплеск активности.
Как будет выглядеть окончательный проект?
Давайте посмотрим, как мы этого добьемся
Шаг 1: Загрузите данные в Mongo.
Вы можете использовать данные из своего источника данных. Для целей этой статьи я создал несколько случайных данных и поместил их в базу данных mlab. Mlab — это облачная база данных mongo. Подробнее для начала здесь.
Шаг 2: агрегируйте значения из базы данных, чтобы получить общую сумму заказа за день.
Orders.aggregate(
[
{
'$project': {
createdOn: {'$dateToString': {format: '%Y-%m-%d', date: '$Date'}},
price:1
}
},
{
$group: {
_id: "$createdOn",
totalprice: { $sum: "$price" }
}
}
]
Спроецируйте дату с измененным форматом даты и используйте ее для агрегирования общей суммы заказа.
Обработайте результаты для сохранения в объекте javascript, чтобы мы могли искать общую сумму заказа за каждый день. Используя десятичные значения из mongodb, используйте parseFloat, чтобы получить значение для использования.
datesTable[obj._id] = (parseFloat(obj.totalprice));
Передайте это в файл index.pug, который отображает график. Остальная часть обработки происходит на стороне клиента.
Шаг 3: Файл index.pug.
Здесь мы сортируем общую стоимость заказа за день и находим квантили. Для каждого порога мы назначаем цвет. класс цвета, определяемый значением, добавляется как класс в ячейку сетки.
var domainArray = [d3.quantile(dataArray, 0.25),d3.quantile(dataArray, 0.5),d3.quantile(dataArray, 0.65),d3.quantile(dataArray, 0.75),d3.quantile(dataArray, 0.85),d3.quantile(dataArray, 0.95),d3.quantile(dataArray, 1)];
var formatColor = d3.scaleThreshold().domain(domainArray).range(d3.range(NUMBER_OF_COLORS).map((d) => `color${d}`));
Код стиля github сильно адаптирован из https://github.com/vinnyoodles/reddit-heatmap.
Пожалуйста, просмотрите весь код, чтобы получить больше информации. Вот ссылка на github.
Надеюсь, эта статья оказалась для вас полезной. Если это так, пожалуйста, похлопайте в ладоши.
Подпишитесь на меня, чтобы получать больше статей о Node n Javascript, которые, безусловно, будут вам полезны.
Если вам понравилась эта статья ..вам может быть интересно
