@tmf_ciclica/ciclicastorybook 1.0.0

package/src/components/IndicatorsList/IndicatorsList.stories.jsx

@@ -0,0 +1,263 @@
+import { IndicatorsList } from "./IndicatorsList"
+import Indicadores from "../../constants/indicators"
+export default {
+  title: "Components/IndicatorsList",
+  component: IndicatorsList,
+}
+
+export const Default = {
+  args: {
+    indicators: Indicadores,
+    // activeColor: "#f75321",
+    activeColor: "#F8A925",
+    defaultColor: "#605B56",
+    multiple: false,
+    onChange: (indicator) => {
+      console.log("onChange indicators: ", indicator)
+    },
+    defaultValue: {
+      ikey: 0, //ikey asociada al indicador
+      name: "indicators.us_prn.title", //título del indicador referenciado al archivo locales (traducción)
+      code: ["us_prn"], //código del indicador en el archivo json de las tiles
+      type: "cat", //tipo del indicador. Puede ser-> 'cat' (categorizado), 'abs' (valor absoluto), 'both' (indicador con las dos opciones), 'twoUnits' (indicator abs con 2 unidades distintas)
+      category: "Arq", //ERESE: Categoria a la que pertenece el indicador. Puede ser -> 'Arq' (Arquitectónica), 'Ene' (Energética), 'Eco' (Económica), 'Ide' (Identificación).
+      category_ods: "ODS_00", //ODS:
+      category_aue: "AUE_00", //AUE:
+      values: [
+        //por cada uno de los posibles valores o categorías creamos un objeto con el color asociado, el código o códigos (array) del archivo tiles y su título (referencia a locales)
+        {
+          fillColor: "#FEB740",
+          codename: ["Residencial", "VincViv"],
+          title: "indicators.us_prn.Residencial",
+        },
+        {
+          fillColor: "#033364",
+          codename: ["Público"],
+          title: "indicators.us_prn.Public",
+        },
+        {
+          fillColor: "#5190cb",
+          codename: ["EnseñanzaCultural"],
+          title: "indicators.us_prn.EnsenyamentCultural",
+        },
+        {
+          fillColor: "#18ae9a",
+          codename: ["Deportivo", "Piscinas"],
+          title: "indicators.us_prn.Esportiu",
+        },
+        {
+          fillColor: "#850d15",
+          codename: ["Comercial"],
+          title: "indicators.us_prn.Comercial",
+        },
+        {
+          fillColor: "#ee2e39",
+          codename: ["HoteleroRestauración"],
+          title: "indicators.us_prn.HotelerRestauracio",
+        },
+        {
+          fillColor: "#ed602e",
+          codename: ["Oficinas"],
+          title: "indicators.us_prn.Oficines",
+        },
+        {
+          fillColor: "#843059",
+          codename: ["Almacenaje"],
+          title: "indicators.us_prn.Emmagatzematge",
+        },
+        {
+          fillColor: "#CB719D",
+          codename: ["Industrial", "IndustrialResto"],
+          title: "indicators.us_prn.Industrial",
+        },
+        {
+          fillColor: "#7f7f7f",
+          codename: ["Aparcamiento"],
+          title: "indicators.us_prn.Aparcament",
+        },
+        {
+          fillColor: "#dadae3",
+          codename: [
+            "OtrosCal",
+            "OtrosNoCal",
+            "Común",
+            "Sin datos",
+            "",
+            "None",
+            "null",
+            "undefined",
+            " ",
+            "NoCodificado",
+          ],
+          title: "indicators.us_prn.None",
+        },
+      ],
+      time: false,
+    },
+  },
+}
+
+export const Multiple = {
+  args: {
+    indicators: Indicadores,
+    // activeColor: "#f75321",
+    activeColor: "#F8A925",
+    defaultColor: "#605B56",
+    multiple: true,
+    onChange: (indicator) => {
+      console.log("onChange indicators: ", indicator)
+    },
+    defaultValue: [
+      {
+        ikey: 6,
+        name: "indicators.cal.title",
+        code: ["demanda_cal_m2"],
+        type: "abs",
+        category: "Ene",
+        category_ods: "ODS_07",
+        category_aue: "AUE_04",
+        maxColor: "#EE2C3C",
+        midColor: "#FDB740",
+        minColor: "#00544A",
+        minValue: 1,
+        maxValue: 120,
+        minValueIndicador: "indicators.cal.minValueIndicador",
+        maxValueIndicador: "indicators.cal.maxValueIndicador",
+        unit: "indicators.cal.unit",
+        time: true,
+        values: [
+          {
+            fillColor: "#00544A",
+            codename: ["Menos de 20 kWh/m2"],
+            title: "indicators.demanda_cal_m2.<20",
+          },
+          {
+            fillColor: "#386A48",
+            codename: ["Entre 20 y 40 kWh/m2"],
+            title: "indicators.demanda_cal_m2.20-40",
+          },
+          {
+            fillColor: "#708046",
+            codename: ["Entre 40 y 60 kWh/m2"],
+            title: "indicators.demanda_cal_m2.40-60",
+          },
+          {
+            fillColor: "#A99643",
+            codename: ["Entre 60 y 80 kWh/m2"],
+            title: "indicators.demanda_cal_m2.60-80",
+          },
+          {
+            fillColor: "#E1AC41",
+            codename: ["Entre 80 y 100 kWh/m2"],
+            title: "indicators.demanda_cal_m2.80-100",
+          },
+          {
+            fillColor: "#FBA840",
+            codename: ["Entre 100 y 120 kWh/m2"],
+            title: "indicators.demanda_cal_m2.100-120",
+          },
+          {
+            fillColor: "#F8893F",
+            codename: ["Entre 120 y 140 kWh/m2"],
+            title: "indicators.demanda_cal_m2.120-140",
+          },
+          {
+            fillColor: "#F56A3E",
+            codename: ["Entre 140 y 160 kWh/m2"],
+            title: "indicators.demanda_cal_m2.140-160",
+          },
+          {
+            fillColor: "#F14B3D",
+            codename: ["Entre 160 y 180 kWh/m2"],
+            title: "indicators.demanda_cal_m2.160-180",
+          },
+          {
+            fillColor: "#EE2C3C",
+            codename: ["Más de 180 kWh/m2"],
+            title: "indicators.demanda_cal_m2.>180",
+          },
+        ],
+      },
+
+      {
+        ikey: 0, //ikey asociada al indicador
+        name: "indicators.us_prn.title", //título del indicador referenciado al archivo locales (traducción)
+        code: ["us_prn"], //código del indicador en el archivo json de las tiles
+        type: "cat", //tipo del indicador. Puede ser-> 'cat' (categorizado), 'abs' (valor absoluto), 'both' (indicador con las dos opciones), 'twoUnits' (indicator abs con 2 unidades distintas)
+        category: "Arq", //ERESE: Categoria a la que pertenece el indicador. Puede ser -> 'Arq' (Arquitectónica), 'Ene' (Energética), 'Eco' (Económica), 'Ide' (Identificación).
+        category_ods: "ODS_00", //ODS:
+        category_aue: "AUE_00", //AUE:
+        values: [
+          //por cada uno de los posibles valores o categorías creamos un objeto con el color asociado, el código o códigos (array) del archivo tiles y su título (referencia a locales)
+          {
+            fillColor: "#FEB740",
+            codename: ["Residencial", "VincViv"],
+            title: "indicators.us_prn.Residencial",
+          },
+          {
+            fillColor: "#033364",
+            codename: ["Público"],
+            title: "indicators.us_prn.Public",
+          },
+          {
+            fillColor: "#5190cb",
+            codename: ["EnseñanzaCultural"],
+            title: "indicators.us_prn.EnsenyamentCultural",
+          },
+          {
+            fillColor: "#18ae9a",
+            codename: ["Deportivo", "Piscinas"],
+            title: "indicators.us_prn.Esportiu",
+          },
+          {
+            fillColor: "#850d15",
+            codename: ["Comercial"],
+            title: "indicators.us_prn.Comercial",
+          },
+          {
+            fillColor: "#ee2e39",
+            codename: ["HoteleroRestauración"],
+            title: "indicators.us_prn.HotelerRestauracio",
+          },
+          {
+            fillColor: "#ed602e",
+            codename: ["Oficinas"],
+            title: "indicators.us_prn.Oficines",
+          },
+          {
+            fillColor: "#843059",
+            codename: ["Almacenaje"],
+            title: "indicators.us_prn.Emmagatzematge",
+          },
+          {
+            fillColor: "#CB719D",
+            codename: ["Industrial", "IndustrialResto"],
+            title: "indicators.us_prn.Industrial",
+          },
+          {
+            fillColor: "#7f7f7f",
+            codename: ["Aparcamiento"],
+            title: "indicators.us_prn.Aparcament",
+          },
+          {
+            fillColor: "#dadae3",
+            codename: [
+              "OtrosCal",
+              "OtrosNoCal",
+              "Común",
+              "Sin datos",
+              "",
+              "None",
+              "null",
+              "undefined",
+              " ",
+              "NoCodificado",
+            ],
+            title: "indicators.us_prn.None",
+          },
+        ],
+        time: false,
+      },
+    ],
+  },
+}

package/src/components/LangSelector/LangSelector.jsx

@@ -0,0 +1,70 @@
+/*
+Menú de selección de idioma. Cambia el idioma de la aplicación usando la propiedad i18n
+Recibe: 
+Langs-> array de los idiomas, con code (código de i18n), title (título para el menú), titleSelected (título para cuando está seleccionado, si varía del title)
+arrow-> imagen de la flecha de despliegue del menú
+imgPrev-> imagen previa al texto de idioma seleccionado (opcional)
+Su css utiliza variables de la aplicación que habrá que incluirlas en el archivo variables.scss:
+$langColor
+$langBckColor
+$langSelectedColor;
+$langHoverColor
+$langHoverBckColor
+
+*/
+import PropTypes from "prop-types"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+//styles
+import style from "./LangSelector.module.scss"
+export const LangSelector = ({ langs, arrow, imgPrev }) => {
+  const [showMenu, setshowMenu] = useState(false)
+  const { i18n } = useTranslation()
+
+  const currentLang = langs.find((l) => l.code == i18n.language)
+  const handleClick = (code) => {
+    i18n.changeLanguage(code)
+    setshowMenu(false)
+  }
+  return (
+    <div className={style.langSelector}>
+      <div
+        className={style.currentLang}
+        onClick={() => {
+          setshowMenu(!showMenu)
+        }}
+      >
+        {imgPrev && <img className={style.prevImg} src={imgPrev} />}
+        {currentLang.titleSelected || currentLang.title}
+        <img src={arrow} className={style.arrow} />
+      </div>
+      {showMenu && (
+        <div className={style.langMenu}>
+          {langs.map((l) => (
+            <button
+              key={l.code}
+              className={currentLang.code == l.code ? style.active : ""}
+              onClick={() => handleClick(l.code)}
+            >
+              {l.title}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+LangSelector.propTypes = {
+  langs: PropTypes.arrayOf(
+    PropTypes.shape({
+      code: PropTypes.string,
+      title: PropTypes.string,
+      titleSelected: PropTypes.string,
+    })
+  ),
+  color: PropTypes.string,
+  bckColor: PropTypes.string,
+  hoverColor: PropTypes.string,
+  arrow: PropTypes.object,
+  imgPrev: PropTypes.object,
+}

package/src/components/LangSelector/LangSelector.module.scss

@@ -0,0 +1,41 @@
+.langSelector {
+    position: relative;
+    width: fit-content;
+}
+.currentLang {
+    color: $langSelectedColor;
+    cursor: pointer;
+    @include flex();
+    gap: 5px;
+    text-transform: capitalize;
+    .arrow {
+        width: 10px;
+    }
+    .prevImg {
+        width: 20px;
+    }
+}
+.langMenu {
+    position: absolute;
+    width: 80px;
+    background: $langBckColor !important;
+    border-radius: 8px;
+    button {
+        cursor: pointer;
+        background: $langBckColor !important;
+        color: $langColor;
+        width: 100%;
+        padding: 4px 8px;
+        text-align: left;
+        &:first-child {
+            border-radius: 8px 8px 0px 0px;
+        }
+        &:last-child {
+            border-radius: 0px 0px 8px 8px;
+        }
+        &:hover {
+            color: $langHoverColor;
+            background-color: $langHoverBckColor !important;
+        }
+    }
+}

package/src/components/LangSelector/LangSelector.stories.jsx

@@ -0,0 +1,27 @@
+import { LangSelector } from "./LangSelector"
+import arrow from "../../assets/img/arrowDown.svg"
+import world from "../../assets/img/world.svg"
+export default {
+  title: "Components/LangSelector",
+  component: LangSelector,
+}
+const Template = (args) => <LangSelector {...args} />
+
+export const CatEsWithPrev = Template.bind({})
+CatEsWithPrev.args = {
+  langs: [
+    { code: "ca", title: "Català" },
+    { code: "es", title: "Español" },
+  ],
+  arrow: arrow,
+  imgPrev: world,
+}
+export const NoImg = Template.bind({})
+NoImg.args = {
+  langs: [
+    { code: "eu", title: "Euskera" },
+    { code: "es", title: "Español" },
+    { code: "en", title: "English" },
+  ],
+  arrow: arrow,
+}

package/src/components/Legend/Legend.jsx

@@ -0,0 +1,132 @@
+/*
+Legend of the map
+*/
+import PropTypes from "prop-types"
+import { useTranslation } from "react-i18next"
+//styles
+import styles from "./Legend.module.scss"
+
+export const Legend = ({
+  //JSON with the styles of the container (optional)
+  containerStyles,
+  //Title on top of the legend
+  title,
+  //Array to display the info behind the title should have: [{title, value}, ...]
+  infoList,
+  //Array to display the items of the legend: [{title, color}, ...]
+  //color should be a string with hexadecimal value
+  legendList,
+  //If not passed it will read t("mainUser")
+  legendListTitle,
+  //Should be an object with {maxColor, minColor, maxValue, minValue}
+  //If this has is not null or undefined, the legendList values wont be displayed.
+  //It will display only the absolute value indicator.
+  absoluteValue,
+  //Function to be called when the button is clicked (optional).
+  //If this is null or undefined the button wont be displayed.
+  onClickMoreInfo,
+  //If not passed it will read t("moreInformation")
+  buttonTitle,
+  onClickClose,
+}) => {
+  
+  const { t } = useTranslation()
+
+  return (
+    <div
+      style={containerStyles ? { ...containerStyles } : {}}
+      className={`${styles.legendContainer}`}
+    >
+      <button className={styles.closeButton} onClick={onClickClose}></button>
+      {title && (
+        <div className={styles.titleContainer}>
+          <h2>{title}</h2>
+        </div>
+      )}
+
+      {infoList && infoList.length > 0 && (
+        <div className={styles.infoContainer}>
+          <ul>
+            {infoList.map(({ title: titleElement, value: valueElement }) => (
+              <li key={title}>
+                <h3 className={styles.title}>{`${titleElement}:`}</h3>
+                <span className={styles.value}>&nbsp; {valueElement}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <h3 className={styles.titleLegendList}>
+        {legendListTitle ? t(legendListTitle) : t("mainUse")}
+      </h3>
+      <div className={styles.legendListContainer}>
+        {absoluteValue ? (
+          <div className={styles.absoluteValueContainer}>
+            <div
+              className={styles.absoluteValueColor}
+              style={{
+                background: `linear-gradient(to bottom, ${absoluteValue.maxColor} 0%, ${absoluteValue.minColor} 100%)`,
+              }}
+            />
+            <div className={styles.absoluteValueText}>
+              <span>{absoluteValue.maxValue} {t(absoluteValue.unit)}</span>
+              <span>{absoluteValue.minValue} {t(absoluteValue.unit)}</span>
+            </div>
+          </div>
+        ) : (
+          legendList &&
+          legendList.length > 0 && (
+            <div className={styles.gridContainer}>
+              {legendList.map(
+                ({ title: titleElement, color: colorElement }) => (
+                  <div className={styles.elementLegendContainer} key={title}>
+                    <div
+                      className={styles.colorDot}
+                      style={{ backgroundColor: colorElement }}
+                    />
+                    <div className={styles.titleLegendElement}>
+                      {t(titleElement)}{" "}
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+          )
+        )}
+      </div>
+
+      {onClickMoreInfo && (
+        <button className={styles.moreInfoContainer} onClick={onClickMoreInfo}>
+          {buttonTitle ? buttonTitle : t("moreInformation")}
+        </button>
+      )}
+    </div>
+  )
+}
+
+Legend.propTypes = {
+  title: PropTypes.string,
+  containerStyles: PropTypes.object,
+  infoList: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    })
+  ),
+  legendList: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      color: PropTypes.string,
+    })
+  ),
+  legendListTitle: PropTypes.string,
+  absoluteValue: PropTypes.shape({
+    maxColor: PropTypes.string,
+    minColor: PropTypes.string,
+    maxValue: PropTypes.number,
+    minValue: PropTypes.number,
+  }),
+  onClickMoreInfo: PropTypes.func,
+  buttonTitle: PropTypes.string,
+  onClickClose: PropTypes.func,
+}

package/src/components/Legend/Legend.module.scss

@@ -0,0 +1,121 @@
+
+.legendContainer {
+  width: 402px;
+  background-color: #fdfdfd;
+  color: #605b56;
+  border: solid 1.5px #605b56;
+  border-radius: 10px;
+  @include flex($direction: column, $align: flexStart);
+  padding: 20px;
+  position: relative;
+
+  .closeButton {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .closeButton::before,
+  .closeButton::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 2px;
+    background-color: #333;
+  }
+
+  .closeButton::before {
+    transform: rotate(45deg);
+  }
+
+  .closeButton::after {
+    transform: rotate(-45deg);
+  }
+
+  .closeButton:hover::before,
+  .closeButton:hover::after {
+    // background-color: #e00;
+  }
+  .titleContainer {
+    border-bottom: solid 1.5px #605b56;
+    h2 {
+      padding-bottom: 16px;
+    }
+  }
+
+  .infoContainer {
+    padding-top: 20px;
+    ul {
+      li {
+        @include flex($justify: start, $align: center);
+      }
+    }
+  }
+  .titleLegendList {
+    font-size: 20px;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    margin-top: 30px;
+    border-bottom: solid 1.5px #605b56;
+  }
+  .legendListContainer {
+    .gridContainer {
+      display: grid;
+      grid-template-columns: auto; /* Dos columnas del mismo tamaño */
+      column-gap: 20px; /* Espacio horizontal entre columnas */
+      row-gap: 15px; /* Espacio vertical entre filas */
+      .elementLegendContainer {
+        //@include flex($direction: row, $justify: start, $align: center);
+        display: grid;
+        grid-template-columns: 23px auto;
+        align-items: center;
+        gap: 5px;
+        .colorDot {
+          width: 22px;
+          height: 22px;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+      }
+    }
+    .absoluteValueContainer {
+      position: relative;
+      .absoluteValueColor {
+        height: 130px;
+        width: 22px;
+        border-radius: 20px;
+      }
+      .absoluteValueText {
+        @include flex(
+          $direction: column,
+          $justify: space-between,
+          $align: flex-start
+        );
+        position: absolute;
+        left: 30px;
+        top: 0px;
+        height: 100%;
+      }
+    }
+  }
+  .moreInfoContainer {
+    margin-top: 30px;
+    padding-top: 8.5px;
+    padding-bottom: 8.5px;
+    padding-left: 20px;
+    padding-right: 20px;
+    @include flex();
+    border: 1.5px solid #605b56;
+    border-radius: 25px;
+    @include fontBaseSemi();
+  }
+}