From 02fc11ec13ffe229b7fbbb7c9abde992e67a5721 Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Wed, 7 Jun 2023 12:53:19 +0200 Subject: [PATCH] feat: create DoughnutChart component and replace old implementation --- src/components/DoughnutChart.tsx | 30 +++ src/components/index.ts | 1 + .../2022/i-counted-everything-i-own.mdx | 173 +++--------------- .../journal/i-counted-everything-i-own.ts | 64 +++++++ 4 files changed, 116 insertions(+), 152 deletions(-) create mode 100644 src/components/DoughnutChart.tsx create mode 100644 src/data/journal/i-counted-everything-i-own.ts diff --git a/src/components/DoughnutChart.tsx b/src/components/DoughnutChart.tsx new file mode 100644 index 0000000..4ff475b --- /dev/null +++ b/src/components/DoughnutChart.tsx @@ -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 ( +
+ +
+ ); +}; diff --git a/src/components/index.ts b/src/components/index.ts index 7c01e31..a261582 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -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'; diff --git a/src/content/journal/2022/i-counted-everything-i-own.mdx b/src/content/journal/2022/i-counted-everything-i-own.mdx index 8f404a0..1aba44c 100644 --- a/src/content/journal/2022/i-counted-everything-i-own.mdx +++ b/src/content/journal/2022/i-counted-everything-i-own.mdx @@ -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" - } - } - } -} -``` +
+ +
### 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" - } - } - } -} -``` +
+ +
### 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" - } - } - } -} -``` +
+ +
## Conclusion diff --git a/src/data/journal/i-counted-everything-i-own.ts b/src/data/journal/i-counted-everything-i-own.ts new file mode 100644 index 0000000..0b9bb2d --- /dev/null +++ b/src/data/journal/i-counted-everything-i-own.ts @@ -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', + }, + }, +};