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 './DisplayBox';
export * from './Divider';
export * from './DoughnutChart';
export * from './Figure';
export * from './Flag';
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
slug: i-counted-everything-i-own
date: 2022-01-25T19:34:18+01:00
updated: 2023-06-07
author: Stefan Imhoff
description: As a minimalist I’m interested in how much stuff I own. I counted all the things I own.
charts: true
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.
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.
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
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
{
"type": "doughnut",
"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"
}
}
}
}
```
<Figure caption="Things vs. Consumables" size="wide">
<DoughnutChart client:visible data={things} options={options} />
</Figure>
### Rooms
Most of my items are in the living room, followed by the bedroom, kitchen, cellar, corridor, bathroom, and balcony last.
```chart
{
"type": "doughnut",
"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"
}
}
}
}
```
<Figure caption="Rooms" size="wide">
<DoughnutChart client:visible data={rooms} options={options} />
</Figure>
### 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.
```chart
{
"type": "doughnut",
"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"
}
}
}
}
```
<Figure caption="Categories" size="wide">
<DoughnutChart client:visible data={categories} options={options} />
</Figure>
## 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',
},
},
};