Merge pull request #36 from Ameciclo/nova-IDV-ideciclo

Aplicação da IDV da IDECICLO
Ameciclo · Aug 16, 2024 · 73d9e8d · 73d9e8d
2 parents 7ea091e + c972139
commit 73d9e8d
Show file tree

Hide file tree

Showing 52 changed files with 214,611 additions and 67 deletions.
diff --git a/app/components/Breadcrumb.tsx b/app/components/Breadcrumb.tsx
@@ -5,9 +5,10 @@ const baseCrumb = {
   label: "Plataforma de Dados",
   slug: "/",
   route: "/",
+  customColor: "bg-gray-400",
 };
 
-export const Breadcrumb = ({ routes, label, slug }) => {
+export const Breadcrumb = ({ routes, label, slug, customColor = "bg-ameciclo" }) => {
   let crumb = routes.map((route, i) => {
     if (route === "/") return { ...baseCrumb, lastItem: false };
     if (i === routes.length - 1)
@@ -16,8 +17,8 @@ export const Breadcrumb = ({ routes, label, slug }) => {
   });
 
   return (
-    <div className="bg-ameciclo text-white p-4 items-center uppercase w-full">
-      <nav className="bg-grey-light rounded font-sans w-full ">
+    <div className={`p-4 items-center uppercase w-full ${customColor ? customColor : "bg-ameciclo"} text-white`}>
+      <nav className="bg-grey-light rounded font-sans w-full">
         <ol className="inline-flex list-none p-0 max-w-full">
           {crumb.map((c, i) => (
             <Crumb {...c} key={i} />

diff --git a/app/components/ExplanationBoxIdeciclo.tsx b/app/components/ExplanationBoxIdeciclo.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+
+interface Box {
+  title: string;
+  description: string;
+}
+
+export const ExplanationBoxesIdeciclo = ({ boxes }: { boxes: Box[] }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [svgCount, setSvgCount] = useState(0);
+  const svgWidth = 68; // Width of the SVG in pixels
+
+  useEffect(() => {
+    const updateSvgCount = () => {
+      const screenWidth = window.innerWidth;
+      setSvgCount(Math.ceil(screenWidth / svgWidth));
+    };
+
+    updateSvgCount();
+    window.addEventListener('resize', updateSvgCount);
+    return () => window.removeEventListener('resize', updateSvgCount);
+  }, []);
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % boxes.length);
+  };
+
+  const handleDotClick = (index: number) => {
+    setCurrentIndex(index);
+  };
+
+  return (
+    <section className="relative w-100">
+      <section className="relative z-[1] container mx-auto lg:w-4/6 my-5 md:my-6 rounded p-12 overflow-auto">
+        {/* Title and buttons */}
+        <div className="flex p-6 justify-between items-center mb-4">
+          {/* Title */}
+          <div className="relative inline-flex items-center justify-center">
+            <h1 className="relative inline-flex items-center justify-center px-4 md:px-8 py-2 md:py-4 gap-4 rounded-full bg-[#5AC2E1] shadow-lg text-[#334454] text-center font-lato text-xl md:text-3xl font-black leading-normal z-[0]">
+              {boxes[currentIndex].title}
+            </h1>
+            {/* SVG Background */}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 341 80"
+              className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 w-[120%] flex-shrink-0  z-[-1]"
+              style={{ fill: '#EFC345', filter: 'drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25))' }}
+            >
+              <path d="M9.80432 49.4967C9.04999 36.8026 8.77685 25.0274 8.03552 12.6779C7.94931 11.6804 8.02121 10.6478 8.23907 9.75347C8.45697 8.85917 8.80762 8.15768 9.23206 7.76683C10.6514 6.75694 12.1036 5.98883 13.5761 5.46925C16.9707 4.55021 20.4043 3.88966 23.8249 3.71734C50.045 2.36751 76.2522 0.845359 102.498 3.31526C124.258 5.29693 146.069 5.12462 167.828 7.04884C194.035 9.40387 220.203 13.08 246.384 15.952C265.122 18.0198 283.859 19.8387 302.597 21.4088C310.647 22.098 318.724 21.8683 326.775 22.1842C328.283 22.1842 329.792 22.615 331.535 22.9883C332.011 23.2229 332.427 23.8582 332.694 24.7593C332.961 25.6604 333.059 26.756 332.966 27.8133L331.522 59.7497C331.509 60.5938 331.376 61.4076 331.143 62.077C330.91 62.7465 330.587 63.2382 330.221 63.4833C329.538 63.838 328.841 64.0591 328.14 64.1439C299.878 64.8331 271.616 66.3553 243.367 65.9245C212.504 65.465 181.627 63.3971 150.764 61.6739C135.04 60.8123 119.328 58.802 103.604 58.0265C85.6556 57.2224 67.6813 57.8542 49.7199 56.9926C37.2601 56.4182 24.3841 54.5227 11.274 53.0867C10.878 52.9603 10.5143 52.5324 10.246 51.8769C9.97766 51.2214 9.82144 50.3795 9.80432 49.4967Z" />
+            </svg>
+          </div>
+
+          {/* Buttons */}
+          <div className="flex items-center">
+            {/* Blue and yellow circles */}
+            {boxes.map((_, index) => (
+              <div
+                key={index}
+                className={`w-5 h-5 rounded-full mx-1 cursor-pointer ${
+                  index === currentIndex ? 'bg-sky-500' : 'bg-amber-400'
+                }`}
+                onClick={() => handleDotClick(index)}
+              />
+            ))}
+            {/* Next button */}
+            <button
+              onClick={handleNext}
+              className=" p-4 rounded-full ml-2 text-lg font-bold leading-none shadow-sm transform scale-y-150">
+              {'>'}
+            </button>
+
+          </div>
+        </div>
+        <div className="relative z-[-2] top-[-50px] text-gray-800 p-12 py-24 mx-auto bg-gray-100 shadow-2xl">
+          <p className="text-justify">{boxes[currentIndex].description}</p>
+        </div>
+      </section>
+      {/* SVG row array behind the secondary section */}
+      <div className="absolute bottom-0 md:top-0 left-0 w-full z-0 ">
+        <div className="flex mx-2 md:mx-12  md:translate-y-full" >
+          {Array.from({ length: svgCount }).map((_, svgIndex) => (
+            <svg
+              key={svgIndex}
+              xmlns="http://www.w3.org/2000/svg"
+              width="68"
+              height="268"
+              viewBox="0 0 68 268"
+              fill="none"
+              className="px-2"
+            >
+              <path
+                d="M67.6863 246.015C67.833 250.383 66.2783 254.644 63.3332 257.946C60.388 261.248 56.2693 263.348 51.8002 263.826C39.4054 265.011 28.312 266.055 17.2806 267.2C6.6004 268.324 2.07628 260.152 1.37391 247.24C0.56825 232.642 0.113775 217.983 0.0931153 203.345C-0.0308293 144.898 -0.0308266 86.4448 0.0931231 27.9848C0.0931233 24.6515 0.361678 21.3182 0.692207 18.0652C0.988921 15.0779 2.07236 12.2152 3.83812 9.75323C5.60387 7.29125 7.99237 5.31295 10.7733 4.00907C20.0281 -0.288083 25.6678 -0.569205 44.7558 1.49905C48.8752 1.98753 52.6892 3.86075 55.5375 6.79441C58.3859 9.72807 60.0892 13.5375 60.3527 17.5632C66.3642 91.418 65.8271 166.578 67.6863 246.015Z"
+                fill="#69BFAF"
+              />
+            </svg>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/app/components/Maps/MapLayersPanel.tsx b/app/components/Maps/MapLayersPanel.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export const MapLayersPanel = ({ layersConf }) => {
   return (
-    <div className="absolute bottom-0 right-0 bg-white border rounded p-4 mb-2 shadow">
+    <div className="absolute bottom-0 right-0 bg-white border rounded p-4 m-2 shadow-md">
       <h3 className="font-bold mb-2">Legenda</h3>
       {layersConf.map((control) => {
         const color = control.paint["line-color"];
@@ -11,7 +11,7 @@ export const MapLayersPanel = ({ layersConf }) => {
             className="flex items-center mb-1 uppercase font-bold"
             key={control.id}
           >
-            <span className="ml-2 text-sm font-medium" style={{ color: color }}>
+            <span className="ml-2 text-sm font-bold" style={{ color: color }}>
               {control.id}
             </span>
           </div>

diff --git a/app/components/NavCoverIdeciclo.tsx b/app/components/NavCoverIdeciclo.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export const NavCoverIdeciclo = ({ title, src = "" }) => {
+  return (
+    <>
+      {src == "" ? (
+        <div className="flex flex-col align-middle h-no-cover pt-24 md:pt-0 bg-ameciclo text-white text-center justify-center">
+          <h1 className="text-4xl font-bold">
+            {/**no futuro aqui pode ter uma imagem padrão e o título ficar por cima*/}
+            {title}
+          </h1>
+        </div>
+      ) : (
+        <div
+          className="bg-cover bg-center bg-no-repeat object-fill h-cover w-full px-10 py-24 text-black"
+          style={{ backgroundImage: `url('${src}')` }}
+        />
+      )}
+    </>
+  );
+};
diff --git a/app/components/NumberCardsIdeciclo.tsx b/app/components/NumberCardsIdeciclo.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { MultipleSelectionFiltersIdeciclo } from "./SelectionFilterMenuIdeciclo";
+import {
+  IntlNumberMin1Max3Digits,
+  IntlNumber1Digit,
+  IntlNumberMax1Digit,
+  IntlPercentil,
+  IntlNumber3Digit,
+} from "../../utils"; // Import as needed
+
+
+// Ideciclo styled
+export const NumberCardIdeciclo = ({
+  city,
+  selected,
+  changeFunction,
+  onClickFnc,
+  options = { type: "default" },
+}) => {
+  const value = city.value;
+  const unit = city.unit;
+
+  let formattedValue;
+  switch (options.type) {
+    case "max1digit":
+      formattedValue = IntlNumberMax1Digit(value);
+      break;
+    case "percentual":
+      formattedValue = IntlPercentil(value);
+      break;
+    case "max3digits":
+      formattedValue = IntlNumberMin1Max3Digits(value);
+      break;
+    case "3digits":
+      formattedValue = IntlNumber3Digit(value);
+      break;
+    default:
+      formattedValue = value; // Default format
+  }
+
+  const label = city.label?.replace("/", " ");
+
+  return (
+    <div
+      className={`flex flex-col rounded-[40px] shadow-[0px_6px_8px_rgba(0,0,0,0.25)] h-full mx-3 ld:mx-0 p-3 justify-center align-center ${
+        selected ? "bg-[#6DBFAC] text-gray-700" : "bg-white text-gray-700"
+      } h-42 hover:bg-[#EFC345] hover:text-gray-700`}
+    >
+      <button
+        onClick={() => {
+          changeFunction(city.id);
+          onClickFnc();
+        }}
+      >
+        <div className="flex center justify-center">
+          <h3 className="text-center text-5xl font-bold">{formattedValue}</h3>
+          {unit != undefined && (
+            <p className="uppercase font-semibold tracking-widest ">{unit}</p>
+          )}
+        </div>
+        <div className="p-3">
+          <h3 className="uppercase tracking-widest ">{label}</h3>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export const NumberCardsIdeciclo = ({ cards, data, selected, options }) => {
+  return (
+    <section className="mx-auto container">
+      <div className="mx-auto text-center my-12 md:my-24 md:mb-6">
+        <MultipleSelectionFiltersIdeciclo {...data} />
+        <section className="container mx-auto gap-8 my-5 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+          {cards.map((city) => (
+            <NumberCardIdeciclo
+              key={city.id}
+              city={city}
+              selected={city.id === selected}
+              changeFunction={options.changeFunction}
+              onClickFnc={() => {}}
+              options={options}
+            />
+          ))}
+        </section>
+      </div>
+    </section>
+  );
+};
diff --git a/app/components/SelectionFilterMenuIdeciclo.tsx b/app/components/SelectionFilterMenuIdeciclo.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+// Ranking das cidades 
+export function MultipleSelectionFiltersIdeciclo({ title = "", filters }) {
+  return (
+    <section className="flex gap-2 relative justify-center mb-10 mx-auto w-full 2xl:w-3/4 ">
+      <svg className="relative z-[1]" xmlns="http://www.w3.org/2000/svg" width="225" height="264" viewBox="0 0 225 264" fill="none">
+        <path d="M217.255 111.903C209.361 106.913 201.28 101.892 192.762 97.2537C175.867 88.0527 157.942 79.726 140.47 71.0154C121.391 61.5052 102.202 52.0696 83.2635 42.4315C71.7817 36.6102 60.5962 30.5118 49.3796 24.4453C37.383 17.9524 25.8387 11.0543 13.4989 4.89183C7.58635 1.94922 3.71747 0.467246 0.207397 0.445923L0.207397 263.543C2.51437 263.198 4.65903 262.465 6.44752 261.411C22.0478 253.628 38.3034 246.282 52.1721 236.889C55.6509 234.544 71.9845 226.612 75.5725 224.33C107.179 204.147 139.097 184.189 170.937 164.166C175.29 161.437 179.783 158.782 184.01 155.967C195.601 148.238 207.239 140.54 218.534 132.629L218.674 132.522C220.581 131.111 222.059 129.455 223.021 127.651C223.983 125.846 224.411 123.928 224.279 122.01C224.147 120.091 223.458 118.209 222.252 116.474C221.046 114.739 219.347 113.185 217.255 111.903Z" fill="#EFC345"/>
+      </svg>
+      <div className="mx-auto flex flex-col justify-center align-middle gap-2 md:gap-5 relative z-[2]">
+        <h1 className="text-4xl md:text-5xl font-bold text-gray-700 pb-8 bg-[#F5BDBF] mx-auto px-7 py-6 rounded-[40px]">
+          {title}
+        </h1>
+        <div className="flex flex-wrap align-baseline gap-0 md-gap-10 justify-center flex-grow mx-auto">
+          {filters.length > 0 &&
+            filters.map((filter: any, index) => (
+              <SelectionFilterIdeciclo key={index} {...filter} />
+            ))}
+        </div>
+      </div>
+      <svg className="relative z-[1]" xmlns="http://www.w3.org/2000/svg" width="236" height="229" viewBox="0 0 236 229" fill="none">
+        <path d="M236 229L236 14.1282C226.709 10.9305 217.347 7.94763 207.915 5.17949C182.03 -2.37835 155.574 -0.89542 129.658 4.69881C113.314 8.13405 97.9542 15.0096 84.6729 24.836C80.3447 28.0473 75.8155 30.9723 71.6354 34.3779C55.1376 47.6732 41.8886 63.2286 34.2481 82.9465C30.9441 91.7266 27.0558 100.291 22.6076 108.586C11.066 129.199 3.62167 151.719 0.659843 174.98C-0.0181506 179.902 -0.174172 184.878 0.194221 189.83C1.1572 200.61 2.87154 211.307 3.90861 222.097C4.13083 224.428 4.43772 226.719 4.80811 229L236 229Z" fill="#5AC2E1"/>
+      </svg>
+      {/* Background */}
+      <div className="absolute lg:translate-y-[-65px] translate-y-[0] z-[0] ">
+        <svg className="scale-y-[2] sm:scale-y-[1] w-full" xmlns="http://www.w3.org/2000/svg" width="847" height="373" viewBox="0 0 847 373" fill="none">
+          <g filter="url(#filter0_d_36_344)">
+            <path d="M103.281 309.45C103.281 309.45 152.031 354.45 218.401 356.64C246.931 357.58 354.301 353.83 370.021 354.43C385.741 355.03 409.101 353.65 427.961 352.83C446.821 352.01 570.141 353.96 583.021 354.43C607.191 355.33 641.131 360.28 668.741 356.79C692.371 353.79 711.351 351.07 740.301 324.35L777.581 294.11C786.558 283.956 794.037 272.571 799.791 260.3L817.211 214.77C830.881 185.6 840.211 162.99 838.051 130.85L833.291 98.3801C832.656 88.3983 829.957 78.6566 825.367 69.7702C820.777 60.8837 814.394 53.0454 806.621 46.7501C788.621 32.2501 760.561 15.0801 721.801 6.19009C646.971 -10.9599 432.001 31.5101 279.621 9.74009C170.621 -5.80991 89.0913 33.2401 51.5113 56.7301C37.1216 65.7505 26.5972 79.7961 21.9813 96.1401L21.7513 96.9401C14.5713 122.26 5.62128 145.94 8.58128 171.94C10.4813 188.61 8.00128 248.13 54.8113 282.15L103.281 309.45Z" fill="#E4E8EA"/>
+          </g>
+        </svg>
+      </div>
+    </section>
+  );
+}
+
+// "por estado" e "por população"
+export function SelectionFilterIdeciclo({ title, value, name, onChange, items }) {
+  return (
+    <div className="relative rounded-lg mx-4 m-4 xl:m-8 max-w-md">
+      {/* SVG Background */}
+      <div className="absolute inset-0 z-0">
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          width="100%" 
+          height="100%" 
+          viewBox="0 0 288 101" 
+          preserveAspectRatio="none" 
+          fill="none"
+          className="drop-shadow-lg"
+          style={{ filter: 'drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.25))' }}
+        >
+          <path d="M285.958 85.6596C285.958 97.0472 264.411 99.8347 240.981 99.8347H232.428L172.037 99.7969C171.18 99.7969 170.316 99.7969 169.459 99.8313L127.684 100.664C113.961 101.411 93.838 100.743 81.8009 100.292L47.4172 100.141C46.3518 100.138 45.2877 100.103 44.2309 100.038L26.1893 98.9055C7.94247 98.3033 3.02849 93.3993 3.02849 84.3931L4.93319 52.808C5.01108 51.545 4.93319 50.2854 4.77742 49.0224L0.090017 16.219C-0.082714 15.1743 -0.00668366 14.1235 0.316598 13.0873C1.39526 9.91218 4.75836 7.0263 9.80661 4.94393C14.8549 2.86156 21.2603 1.71797 27.8816 1.71693L76.0301 0.182065C81.6947 0.00311224 87.3804 -0.0439203 93.0874 0.0409676L202.859 1.71693H265.962C270.357 1.71664 274.59 2.52244 277.815 3.97327C281.04 5.42411 283.02 7.41309 283.359 9.54268C283.451 10.1484 283.593 10.754 283.791 11.3529L285.582 16.7077C287.864 23.5415 288.534 30.4794 287.579 37.3871L284.619 58.9233C284.53 59.6116 284.504 60.2919 284.541 60.9641L285.958 85.6596Z" fill="#6DBFAC"/>
+        </svg>
+      </div>
+      {/* Content */}
+      <div className="relative z-10 text-white font-bold rounded px-4 pb-6 pt-2 mx-4">
+        <label htmlFor={value}>{title}</label>
+        <select
+          className="block appearance-none text-black font-bold w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+          value={value}
+          name={name}
+          onChange={onChange}
+        >
+          {items.map((s: any) => (
+            <option value={s.value} key={s.value}>{s.label}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}