Ce que vous obtenez
- Un composant React de heatmap sans dépendance, avec props typées
- Le même calendrier en un seul fichier HTML avec un bloc de données JSON
- Un script qui agrège git log, CSV ou JSON en comptes quotidiens
- Totaux, séries, navigation au clavier et affichage en direct des valeurs
- En option : illustration d’en-tête ou de carte de partage par PopNow, avec devis préalable
Idéal pour
- Historique de commits, d’écriture ou d’études sur une page de profil
- Suivi d’habitudes, d’entraînements et de séries
- Ventes, inscriptions ou volume de tickets quotidiens dans un rapport
Pas fait pour
- Comparer plusieurs séries sur un même graphique
- Tendances par heure de la journée ou historiques très courts
- Lire des valeurs exactes, où un tableau est plus lisible
Comment l’utiliser
Dans Claude ou ChatGPT
Utilisez le skill PopNow « Calendrier heatmap d’activité » (activity-heatmap-calendar) pour ceci : Affichez mes commits de ce dépôt sur l’année écoulée dans la page À propos de mon portfolio.
Dans un agent de code
/popnow-activity-heatmap-calendar Affichez mes commits de ce dépôt sur l’année écoulée dans la page À propos de mon portfolio.
Puis essayez
Utilisez des paliers fixes : 1, 3 et 6 commits.
Créez un fond de carte de partage pour cette section et indiquez-moi d’abord les crédits.
À préparer
- Vos relevés ou la commande qui les exporte
- Ce que représente une unité, par exemple un commit ou une commande
- La plage de dates et si la semaine commence le lundi
Skills similaires
Tout voir →Créateur d’avatar 3D
+3Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
Modèle de landing page SaaS IA
+3Papier sable et filets fins autour d’un tableau kanban où un assistant planifie les tâches.
Section hero animée
+3Un hero de landing page avec un mot de titre qui change en douceur, deux boutons et un large cadre d’image.
Modèle de site d’agence créative à shader
+3Héros shader orange vivant, déclaration en bas, navigation en pilules et grille d’études de cas décalée.
Landing page SaaS sombre
+3Un site marketing sombre et très animé pour un logiciel, livré en un seul fichier HTML autonome.
Site portfolio de designer
+3Six cartes inclinées autour d’un titre qui s’estompe, une carte portrait rouge, des études de cas éditoriales.
Site portfolio de développeur
+3Un site personnel sombre pour développeurs, avec études de cas, articles, conférences, CV et formulaire de contact.
Site SaaS éditorial
+3Héros scindé bleu marine, titre serif sur cinq lignes, photo documentaire, bandeaux inclinés et accent cobalt.
Modèle de site glassmorphism
+3Verre dépoli sur fond noir, grand titre serif à un mot en italique, et inscription par e-mail.
Site web de produit matériel
+3Noms de modèles fins et géants sur studio argenté, cartes de fiches et gamme à l’échelle réelle.
Diagramme d’architecture interactif
+3Un schéma système cliquable et hors ligne, construit à partir d’un modèle JSON vérifié, avec les preuves derrière chaque bloc.
Héros à grille interactive
+3Grille sombre de fins filaments qui se courbe vers le curseur et envoie un anneau à chaque clic.
Explorateur de graphe de connaissances
+3Transformez vos notes de projet en graphe consultable hors ligne, où chaque affirmation renvoie à sa ligne source.
Modèle de tableau de bord KPI
+3Quatre indicateurs avec variations, courbe lumineuse, répartition et objectifs, sur papier chaud.
Landing page à partir de maquettes IA
+3Voyez trois maquettes de page complète, choisissez-en une, et votre agent la code proprement.
Modèle de site web magazine
+3Un site de magazine digne de l’imprimé, avec articles, rubriques, petite boutique et abonnements, en un seul fichier HTML.
Héros à animation de particules
+3Texte sur papier chaud, à côté d’une sphère de points qui change à chaque idée.
Site de marque personnelle
+3Portrait fondu dans du papier chaud sous un fin crochet, affirmations de chaque côté.
Page de lancement produit cinématique
+3Page presque noire façon cinéma : titre serif, scène de nuit encadrée, formulaire de réservation.
Modèle de dashboard admin
+3Une console de back-office fonctionnelle avec graphiques, tableaux, kanban et calendrier, en un seul fichier HTML hors ligne.
Modèle de landing page SaaS
+3Un site marketing clair et apaisé pour un logiciel, avec console produit fonctionnelle, tarifs et inscription.
Site CV portfolio façon scrapbook
+3Un CV en ligne sur plusieurs pages fait d’objets en papier, avec études de cas et CV imprimable.
Modèle de site e-commerce de sneakers
+3Une boutique complète de chaussures ou de vêtements avec catalogue, fiches produit, panier et paiement de démo, en un fichier HTML.
Modèle de page d’automatisation de workflows
+3Page graphite au titre court, avec un graphe de nœuds vivant qui s’exécute et relance les étapes.
Questions
D’où viennent les données ?
De tout ce qui a une date par enregistrement. Le script fourni lit la sortie de git log, les fichiers CSV avec une colonne de date, les tableaux JSON ou de simples listes d’horodatages, et écrit un compte par jour.
Faut-il une bibliothèque de graphiques ?
Non. La version React n’a besoin que de React et la version HTML de rien du tout. Les deux dessinent la grille avec de simples éléments et fonctionnent en mode clair comme en mode sombre.
Comment les niveaux de couleur sont-ils fixés ?
Par défaut, à partir des quartiles de vos jours non vides, pour qu’une année calme utilise quand même toute la gamme. Vous pouvez définir des seuils fixes quand les chiffres ont une signification précise.
Pourquoi ne pas laisser le modèle d’images dessiner mes statistiques ?
Les modèles d’images peuvent se tromper sur les chiffres. Le skill génère avec PopNow un fond sans texte et place par-dessus, en HTML, vos vrais totaux et séries.