animations, graphs etc

package.json

@@ -14,7 +14,8 @@
     "@emotion/styled": "^11.10.6",
     "framer-motion": "^10.12.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-minimal-pie-chart": "^8.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/components/MapOverlay/index.module.css

@@ -3,3 +3,28 @@
   top: 0;
   left: 0;
 }
+.animatedTitle {
+  animation: titleBadgeIn 0.5s ease;
+}
+.animatedBadge {
+  animation: badgeIn 0.5s ease;
+}
+
+@keyframes titleBadgeIn {
+  from {
+    clip-path: inset(0 50% 0 50%);
+  }
+  to {
+    clip-path: inset(0 0% 0 0%);
+  }
+}
+@keyframes badgeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/components/MapOverlay/index.tsx

@@ -4,12 +4,13 @@ import style from './index.module.css';
 import { Badge, Stack } from '@chakra-ui/react';
 import { useAppState } from '../StateManager';
 import { type JsonData } from '../../types/json';
+import { PieChart } from 'react-minimal-pie-chart';
 
 const getStat = (index: number, v: JsonData['voivodeships'][number]): ReactNode => {
   switch (index) {
     case 0:
       return (
-        <Badge fontSize={'md'}>
+        <Badge className={style.animatedBadge} fontSize={'md'}>
           {(v.stopaBezrobocia / 100).toLocaleString('pl-PL', {
             style: 'percent',
             minimumFractionDigits: 1,
@@ -19,7 +20,7 @@ const getStat = (index: number, v: JsonData['voivodeships'][number]): ReactNode
       );
     case 1:
       return (
-        <Badge fontSize={'md'}>
+        <Badge className={style.animatedBadge} bg={v.urbanizacja < 50 ? 'yellow.300' : undefined} fontSize={'md'}>
           {(v.urbanizacja / 100).toLocaleString('pl-PL', {
             style: 'percent',
             minimumFractionDigits: 1,
@@ -28,38 +29,65 @@ const getStat = (index: number, v: JsonData['voivodeships'][number]): ReactNode
         </Badge>
       );
     case 2:
-      return <Badge fontSize={'md'}>{v.liczbaLudnosci.toLocaleString('pl-PL', { style: 'decimal' })}</Badge>;
+      return (
+        <Badge className={style.animatedBadge} fontSize={'md'}>
+          {v.liczbaLudnosci.toLocaleString('pl-PL', { style: 'decimal' })}
+        </Badge>
+      );
     case 3:
-      return <Badge fontSize={'md'}>{v.liczbaMiast.toLocaleString('pl-PL', { style: 'decimal' })}</Badge>;
+      return (
+        <Badge className={style.animatedBadge} fontSize={'md'}>
+          {v.liczbaMiast.toLocaleString('pl-PL', { style: 'decimal' })}
+        </Badge>
+      );
     case 4:
-      return <Badge fontSize={'md'}>{v.liczbaGmin.toLocaleString('pl-PL', { style: 'decimal' })}</Badge>;
+      return (
+        <Badge className={style.animatedBadge} fontSize={'md'}>
+          {v.liczbaGmin.toLocaleString('pl-PL', { style: 'decimal' })}
+        </Badge>
+      );
     case 5:
-      return <Badge fontSize={'md'}>{v.liczbaPowiatow.toLocaleString('pl-PL', { style: 'decimal' })}</Badge>;
+      return (
+        <Badge className={style.animatedBadge} fontSize={'md'}>
+          {v.liczbaPowiatow.toLocaleString('pl-PL', { style: 'decimal' })}
+        </Badge>
+      );
     case 6:
       return (
         <Badge
+          className={style.animatedBadge}
           bg={v.przyrostNaturalny < 0 ? 'red.300' : 'green.300'}
           fontSize={'md'}
         >{`${v.przyrostNaturalny.toLocaleString('pl-PL', { style: 'decimal' })} osób`}</Badge>
       );
     case 7:
       return (
-        <Badge bg={v.saldoMigracji < 0 ? 'red.300' : 'green.300'} fontSize={'md'}>{`${v.saldoMigracji.toLocaleString(
-          'pl-PL',
-          {
-            style: 'decimal',
-          }
-        )} osób`}</Badge>
+        <Badge
+          className={style.animatedBadge}
+          bg={v.saldoMigracji < 0 ? 'red.300' : 'green.300'}
+          fontSize={'md'}
+        >{`${v.saldoMigracji.toLocaleString('pl-PL', {
+          style: 'decimal',
+        })} osób`}</Badge>
       );
     case 8:
       return (
-        <Badge fontSize={'md'}>{`${v.gestoscZaludnienia.toLocaleString('pl-PL', {
+        <Badge className={style.animatedBadge} fontSize={'md'}>{`${v.gestoscZaludnienia.toLocaleString('pl-PL', {
           style: 'decimal',
         })} osób/km²`}</Badge>
       );
     case 9:
-      // Return v.strukturaZatrudnienia;
-      return '';
+      return (
+        <PieChart
+          animate
+          style={{ width: '100px', height: '60px' }}
+          data={[
+            { title: 'Rolnictwo', value: v.strukturaZatrudnienia.rolnictwo, color: '#f5fa61' },
+            { title: 'Przemysł', value: v.strukturaZatrudnienia.przemysl, color: '#6192fa' },
+            { title: 'Usługi', value: v.strukturaZatrudnienia.uslugi, color: '#565a61' },
+          ]}
+        />
+      );
     default:
       return <></>;
   }
@@ -77,8 +105,10 @@ const VoivoidshipOverlay: FC<{ name: string; top: number; left: number }> = ({ n
   return (
     <div style={{ top: `${top}%`, left: `${left}%` }} className={style.overlay}>
       <Stack align={'center'}>
-        <Badge fontSize={'lg'}>{voivoidship.nazwa}</Badge>
-        {getStat(selectedView, voivoidship) as string}
+        <Badge className={style.animatedTitle} fontSize={'lg'}>
+          {voivoidship.nazwa}
+        </Badge>
+        <div key={selectedView}>{getStat(selectedView, voivoidship) as string}</div>
       </Stack>
     </div>
   );
@@ -91,7 +121,7 @@ export const MapOverlay: FC = () => {
   return (
     <>
       <VoivoidshipOverlay name='Zachodniopomorskie' left={4} top={16} />
-      <VoivoidshipOverlay name='Pomorskie' left={33} top={9} />
+      <VoivoidshipOverlay name='Pomorskie' left={33} top={7} />
       <VoivoidshipOverlay name='Warmińsko-mazurskie' left={54} top={12} />
       <VoivoidshipOverlay name='Podlaskie' left={80} top={21} />
       <VoivoidshipOverlay name='Lubuskie' left={6} top={40} />

yarn.lock

@@ -1402,6 +1402,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
   integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
 
+"@types/svg-path-parser@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz#659aca2e886071e5c593e06206b6254bcb811202"
+  integrity sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q==
+
 "@typescript-eslint/eslint-plugin@^5.59.0":
   version "5.59.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.0.tgz#c0e10eeb936debe5d1c3433cf36206a95befefd0"
@@ -2939,6 +2944,13 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-minimal-pie-chart@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz#c784dd3dffa9aee5c5396c0cb8ece814fd02e0e8"
+  integrity sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==
+  dependencies:
+    "@types/svg-path-parser" "^1.1.3"
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"