kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: create DoughnutChart component and replace old implementation

Browse Source
This commit is contained in:
Stefan Imhoff
2023-06-07 12:53:19 +02:00
parent 3fc125ea80
commit 02fc11ec13
4 changed files with 116 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/DoughnutChart.tsx Normal file
View File

@@ -0,0 +1,30 @@
import deepmerge from 'deepmerge';
import { ArcElement, Chart as ChartJS, Legend, Tooltip } from 'chart.js';
import autocolors from 'chartjs-plugin-autocolors';
import { Doughnut } from 'react-chartjs-2';
ChartJS.register(ArcElement, Tooltip, Legend, autocolors);
type DoughnutChartProps = {
data: any;
options?: any;
};
const defaultOptions = {
plugins: {
autocolors: {
mode: 'data',
} as any,
},
};
export const DoughnutChart = ({ data, options }: DoughnutChartProps) => {
const mergedOptions = deepmerge(defaultOptions, options);
return (
<div>
<Doughnut data={data} options={mergedOptions} />
</div>
);
};

1
src/components/index.ts
View File

@@ -8,6 +8,7 @@ export * from './ColorStack';
export * from './ColorSwatch'; export * from './ColorSwatch';
export * from './DisplayBox'; export * from './DisplayBox';
export * from './Divider'; export * from './Divider';
export * from './DoughnutChart';
export * from './Figure'; export * from './Figure';
export * from './Flag'; export * from './Flag';
export * from './Headline'; export * from './Headline';

173
src/content/journal/2022/i-counted-everything-i-own.mdx
View File

@@ -2,12 +2,21 @@
title: I Counted Everything I Own title: I Counted Everything I Own
slug: i-counted-everything-i-own slug: i-counted-everything-i-own
date: 2022-01-25T19:34:18+01:00 date: 2022-01-25T19:34:18+01:00
updated: 2023-06-07
author: Stefan Imhoff author: Stefan Imhoff
description: As a minimalist I’m interested in how much stuff I own. I counted all the things I own. description: As a minimalist I’m interested in how much stuff I own. I counted all the things I own.
charts: true charts: true
tags: ["minimalism", "personal"] tags: ["minimalism", "personal"]
--- ---
import { DoughnutChart } from "../../../components";
import {
things,
rooms,
categories,
options,
} from "../../../data/journal/i-counted-everything-i-own.ts";
When I started to be interested in [Minimalism](/minimalism/) in 2017, I decided to count all my stuff. When I started to be interested in [Minimalism](/minimalism/) in 2017, I decided to count all my stuff.
The average European citizen owns 10,000 items and I wanted to know how much I own. I counted 2,490 items five years ago. The average European citizen owns 10,000 items and I wanted to know how much I own. I counted 2,490 items five years ago.
@@ -31,173 +40,33 @@ Back in 2017, I counted way too strict, I even counted each dental brush as one
Matt D’Avella counted 1,641 items in his home (together with his wife); 1363 things, and 278 consumables which is not a lot. He owns 498 items, his wife the rest. Matt D’Avella counted 1,641 items in his home (together with his wife); 1363 things, and 278 consumables which is not a lot. He owns 498 items, his wife the rest.
After counting my flat and cellar on the weekend the results are finally in. I own **2541** items, including 162 consumables. _Matt won_. After counting my flat and cellar on the weekend the results are finally in. I own **2749** items, including 397 consumables. _Matt won_.
I still own 652 books and way too many coffee cups (I don’t even drink coffee) 🤷‍♂️ And I still have way too many clothes, but even though I don’t wear my dress shirts very often, I still love them too much to get rid of them. I still own 659 books and way too many coffee cups (I don’t even drink coffee) 🤷‍♂️ And I still have way too many clothes, but even though I don’t wear my dress shirts very often, I still love them too much to get rid of them.
### Things vs. Consumables ### Things vs. Consumables
I did the same as Matt and checked all my items if they are a thing or consumable. 339 items are consumables, the rest are things. I did the same as Matt and checked all my items if they are a thing or consumable. 397 items are consumables, the rest are things.
```chart <Figure caption="Things vs. Consumables" size="wide">
{ <DoughnutChart client:visible data={things} options={options} />
"type": "doughnut", </Figure>
"data": {
"labels": ["Things", "Consumables"],
"datasets": [
{
"label": "Things vs. Consumables",
"data": [2257, 361],
"backgroundColor": ["#D7B98E", "#0C0C0C"]
}
]
},
"options": {
"plugins": {
"title": {
"display": true,
"text": "Things vs. Consumables",
"font": {
"family": "SecuelaVariable, Arial, sans-serif",
"size": "18",
"weight": "900"
}
},
"legend": {
"position": "right"
}
}
}
}
```
### Rooms ### Rooms
Most of my items are in the living room, followed by the bedroom, kitchen, cellar, corridor, bathroom, and balcony last. Most of my items are in the living room, followed by the bedroom, kitchen, cellar, corridor, bathroom, and balcony last.
```chart <Figure caption="Rooms" size="wide">
{ <DoughnutChart client:visible data={rooms} options={options} />
"type": "doughnut", </Figure>
"data": {
"labels": [
"Living Room",
"Bedroom",
"Kitchen/Dining Room",
"Cellar",
"Corridor",
"Bathroom",
"Balcony"
],
"datasets": [
{
"label": "Rooms",
"data": [1199, 760, 305, 127, 137, 77, 10],
"backgroundColor": [
"#FAD689",
"#939650",
"#DC9FB4",
"#91AD70",
"#2EA9DF",
"#77428D",
"#3C2F41"
]
}
]
},
"options": {
"plugins": {
"title": {
"display": true,
"text": "Rooms",
"font": {
"family": "SecuelaVariable, Arial, sans-serif",
"size": "18",
"weight": "900"
}
},
"legend": {
"position": "right"
}
}
}
}
```
### Categories ### Categories
My top category is “books”, even though I recently gave 150 books away. Followed by kitchen tools … I need to get rid of my coffee mugs and the dozens of Asian noodle bowls. Then clothes, probably because I recently bought a bunch of socks. My top category is “books”, even though I recently gave 150 books away. Followed by kitchen tools … I need to get rid of my coffee mugs and the dozens of Asian noodle bowls. Then clothes, probably because I recently bought a bunch of socks.
```chart <Figure caption="Categories" size="wide">
{ <DoughnutChart client:visible data={categories} options={options} />
"type": "doughnut", </Figure>
"data": {
"labels": [
"Books",
"Kitchen",
"Clothing",
"Electronics",
"Entertainment",
"Stationery",
"Survival Gear",
"Furniture",
"Personal Care",
"Decor",
"Organization",
"Sports Equipment",
"Paper/Documents",
"Clearning Supplies",
"Plants/Plant Accessories",
"Tools",
"Medicine",
"Travel"
],
"datasets": [
{
"label": "Categories",
"data": [
655, 272, 262, 208, 180, 176, 171, 138, 114, 96, 74, 64, 48, 46, 40, 36, 26, 12
],
"backgroundColor": [
"#CB4042",
"#B9887D",
"#B07736",
"#B1B479",
"#3A8FB7",
"#6E75A4",
"#CB1B45",
"#F6C555",
"#BEC23F",
"#986DB2",
"#FFBA84",
"#967249",
"#26453D",
"#77969A",
"#005CAF",
"#535953",
"#9F353A",
"#ECB88A"
]
}
]
},
"options": {
"plugins": {
"title": {
"display": true,
"text": "Categories",
"font": {
"family": "SecuelaVariable, Arial, sans-serif",
"size": "18",
"weight": "900"
}
},
"legend": {
"position": "right"
}
}
}
}
```
## Conclusion ## Conclusion

64
src/data/journal/i-counted-everything-i-own.ts Normal file
View File

@@ -0,0 +1,64 @@
export const things = {
labels: ['Things', 'Consumables'],
datasets: [
{
label: 'Things vs. Consumables',
data: [2352, 397],
},
],
};
export const rooms = {
labels: [
'Living Room',
'Bedroom',
'Kitchen/Dining Room',
'Cellar',
'Corridor',
'Bathroom',
'Balcony',
],
datasets: [
{
label: 'Rooms',
data: [1262, 806, 312, 127, 150, 77, 12],
},
],
};
export const categories = {
labels: [
'Books',
'Kitchen',
'Clothing',
'Electronics',
'Entertainment',
'Stationery',
'Survival Gear',
'Furniture',
'Personal Care',
'Decor',
'Organization',
'Sports Equipment',
'Paper/Documents',
'Clearning Supplies',
'Plants/Plant Accessories',
'Tools',
'Medicine',
'Travel',
],
datasets: [
{
label: 'Categories',
data: [659, 274, 301, 242, 180, 202, 172, 150, 114, 96, 75, 64, 48, 49, 40, 45, 26, 12],
},
],
};
export const options = {
plugins: {
legend: {
position: 'right',
},
},
};