@tmf_ciclica/ciclicastorybook 1.0.0

package/src/components/IndicatorsList/Indicator/Indicator.jsx

@@ -0,0 +1,180 @@
+/*
+Componente para cada indicador listado.
+Recibe las siguientes propiedades del propio indicador: name, ikey, type y values(solo en el caso de que sea type 'twoUnits')
+Recibe también activeColor (color indicador seleccionado) y defaultColor
+Lee del store mapState: 
+- activeIndicatorKey: ikey del indicador seleccionado
+- activeIndicatorType: type del indicador seleccionado (abs, cat, both, twoUnits)
+- activeIndicatorUnit: code de la unit seleccionada en caso de que el indicador seleccionado sea tipo 'twoUnits'
+Ejecuta las acciones del store mapState: setActiveIndicatorKey, setActiveIndicatorType, setActiveIndicatorUnit
+*/
+import PropTypes from "prop-types"
+import { useTranslation } from "react-i18next"
+
+// Styles
+import styles from "./Indicator.module.scss"
+import { useEffect, useState } from "react"
+
+export const Indicator = ({
+  indicator,
+  values = [],
+  activeColor,
+  defaultColor = "black",
+  activeIndicator,
+  onClickIndicator,
+  multiple = false,
+}) => {
+  const { t } = useTranslation()
+  const { name, ikey, type } = indicator
+
+  const [selected, setSelected] = useState(false)
+
+  useEffect(() => {
+    if (activeIndicator) {
+      if (!multiple) {
+        setSelected(activeIndicator.ikey == ikey)
+      } else {
+        setSelected(
+          activeIndicator.some(
+            (activeIndicatorElement) =>
+              activeIndicatorElement.ikey == String(ikey)
+          )
+        )
+      }
+    }
+  }, [activeIndicator])
+
+  const switchCatAbsComponent = () => {
+    return (
+      <div className={styles.switchExternalContainer}>
+        <div className={styles.switchType}>
+          <div className={styles.switchTypeOptions}>
+            <div
+              className={styles.optionContainer}
+              // onClick={() => dispatch(setActiveIndicatorType("cat"))}
+            >
+              <span
+                className={`${styles.customRadious}`}
+                // style={{
+                //   backgroundColor:
+                //     activeIndicatorType === "cat" ? activeColor : "transparent",
+                //   borderColor:
+                //     activeIndicatorType === "cat" ? activeColor : defaultColor,
+                // }}
+              />
+              <h4
+                className={styles.optionText}
+                // style={{
+                //   color:
+                //     activeIndicatorType === "cat" ? activeColor : defaultColor,
+                // }}
+              >
+                {t("indicators.cat")}
+              </h4>
+            </div>
+
+            <div
+              className={styles.optionContainer}
+              // onClick={() => dispatch(setActiveIndicatorType("abs"))}
+            >
+              <span
+                className={`${styles.customRadious}`}
+                // style={{
+                //   backgroundColor:
+                //     activeIndicatorType === "abs" ? activeColor : "transparent",
+                //   borderColor:
+                //     activeIndicatorType === "abs" ? activeColor : defaultColor,
+                // }}
+              />
+              <h4
+                className={styles.optionText}
+                // style={{
+                //   color:
+                //     activeIndicatorType === "abs" ? activeColor : defaultColor,
+                // }}
+              >
+                {t("indicators.abs")}
+              </h4>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  const switchUnitComponent = () => {
+    return (
+      <div className={styles.switchExternalContainer}>
+        <div className={styles.switchType}>
+          <div className={styles.switchTypeOptions}>
+            {values.map((val, i) => {
+              return (
+                <div
+                  className={styles.optionContainer}
+                  // onClick={() => dispatch(setActiveIndicatorUnit(val.codename))}
+                  key={i}
+                >
+                  <span
+                    className={styles.customRadious}
+                    // style={{
+                    //   backgroundColor:
+                    //     activeIndicatorUnit === val.codename
+                    //       ? activeColor
+                    //       : "transparent",
+                    //   borderColor:
+                    //     activeIndicatorUnit === val.codename
+                    //       ? activeColor
+                    //       : defaultColor,
+                    // }}
+                  />
+                  <h4>{t(val.unit)}</h4>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      onClick={() => onClickIndicator({ indicator })}
+      className={styles.indicatorContainer}
+    >
+      <div
+        style={{
+          border: selected
+            ? `1px solid ${activeColor}`
+            : `1px solid ${defaultColor}`,
+        }}
+        className={styles.dot}
+      ></div>
+      <h4
+        className={styles.indicatorName}
+        style={{ color: selected ? activeColor : defaultColor }}
+      >
+        {t(name)}
+      </h4>
+
+      {activeIndicator === ikey && type === "both" && (
+        <div>{switchCatAbsComponent()}</div>
+      )}
+      {activeIndicator === ikey && type === "twoUnits" && (
+        <div>{switchUnitComponent()}</div>
+      )}
+    </button>
+  )
+}
+Indicator.propTypes = {
+  indicator: PropTypes.shape({
+    name: PropTypes.string,
+    ikey: PropTypes.number,
+    type: PropTypes.string,
+  }),
+  values: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
+  activeColor: PropTypes.string,
+  defaultColor: PropTypes.string,
+  activeIndicator: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  multiple: PropTypes.bool,
+  onClickIndicator: PropTypes.func,
+}

package/src/components/IndicatorsList/Indicator/Indicator.module.scss

@@ -0,0 +1,46 @@
+.indicatorContainer {
+  @include flex($direction: row, $justify: start, $align: center);
+  gap: 10px;
+  .dot {
+    border-radius: 100px;
+    width: 16px;
+    height: 16px;
+  }
+  .indicatorName {
+    cursor: pointer;
+    font-weight: 400;
+    text-align: left;
+  }
+}
+
+.switchExternalContainer {
+  @include flex($direction: column, $justify: start, $align: start);
+  // gap: 20px;
+  margin: 20px 0 0 0;
+  .switchType {
+    // @include flex($direction: column, $justify: start, $align: start);
+    margin: 0;
+    width: 100%;
+
+    .switchTypeOptions {
+      gap: 20px;
+      @include flex($direction: column, $justify: start, $align: start);
+      margin-bottom: 20px;
+      margin: 0 0 20px 23px;
+
+      .optionContainer {
+        @include flex($direction: row, $justify: center, $align: center);
+        gap: 10px;
+        cursor: pointer;
+
+        .customRadious {
+          width: 16px;
+          height: 16px;
+          border-radius: 100px;
+          border: 1px solid;
+          padding: 0px;
+        }
+      }
+    }
+  }
+}

package/src/components/IndicatorsList/IndicatorSubCategory/IndicatorSubCategory.jsx

@@ -0,0 +1,76 @@
+import { useTranslation } from "react-i18next"
+import { Indicator } from "../Indicator/Indicator"
+import PropTypes from "prop-types"
+import { useEffect, useState } from "react"
+import { motion } from "framer-motion"
+import style from "./IndicatorSubCategory.module.scss"
+export const IndicatorSubCategory = ({
+  subcName,
+  indicators,
+  defaultColor,
+  activeColor,
+  activeSubCategory,
+  onClickSubCategory,
+  id,
+  activeIndicator,
+  onClickIndicator,
+  multiple,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    setOpen(activeSubCategory == id)
+  }, [activeSubCategory, id])
+
+  return (
+    <motion.div
+      className={style.indicatorsSubCategory}
+      initial={{ height: "43px" }}
+      animate={{ height: open ? "auto" : "43px" }}
+      transition={{ duration: 0.4 }}
+    >
+      <button onClick={() => onClickSubCategory(id)}>
+        <h3 style={{ color: open ? activeColor : defaultColor }}>
+          <span style={{ color: open ? activeColor : defaultColor }}>
+            {open ? "-" : "+"}
+          </span>
+          <span
+            style={{ marginLeft: 12, color: open ? activeColor : defaultColor }}
+          >
+            {t(subcName)}
+          </span>
+        </h3>
+      </button>
+      {indicators && (
+        <div className={style.list}>
+          {indicators?.map((indicator, id) => {
+            return (
+              <Indicator
+                indicator={indicator}
+                key={"indicator" + id}
+                defaultColor={defaultColor}
+                activeColor={activeColor}
+                activeIndicator={activeIndicator}
+                onClickIndicator={onClickIndicator}
+                multiple={multiple}
+              />
+            )
+          })}
+        </div>
+      )}
+    </motion.div>
+  )
+}
+IndicatorSubCategory.propTypes = {
+  subcName: PropTypes.string,
+  indicators: PropTypes.array,
+  activeColor: PropTypes.string,
+  defaultColor: PropTypes.string,
+  activeSubCategory: PropTypes.string,
+  id: PropTypes.string,
+  activeIndicator: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  multiple: PropTypes.bool,
+  onClickSubCategory: PropTypes.func,
+  onClickIndicator: PropTypes.func,
+}

package/src/components/IndicatorsList/IndicatorSubCategory/IndicatorSubCategory.module.scss

@@ -0,0 +1,12 @@
+.indicatorsSubCategory {
+  overflow: hidden;
+
+  h3 {
+    text-align: left;
+  }
+  .list {
+    @include flex($direction: column, $align: start);
+    margin: 20px 0px;
+    gap: 20px;
+  }
+}

package/src/components/IndicatorsList/IndicatorsCategory/IndicatorsCategory.jsx

@@ -0,0 +1,122 @@
+/*
+Componente para las categorías de Indicadores dentro del listado de Indicadores
+Recibe:
+- el objeto con toda la categoría
+- el valor Open si está desplegada o no
+- la función changeActive para desplegar o plegar la categoría
+- activeColor: color categoría Seleccionada
+- defaultColor
+Necesita el elemento motion de la librería 'framer-motion' | yarn add framer-motion |
+*/
+import PropTypes from "prop-types"
+import { useTranslation } from "react-i18next"
+import { motion } from "framer-motion"
+
+import style from "./IndicatorsCategory.module.scss"
+import { Indicator } from "../Indicator/Indicator"
+import { useEffect, useState } from "react"
+import { IndicatorSubCategory } from "../IndicatorSubCategory/IndicatorSubCategory"
+export const IndicatorsCategory = ({
+  cat,
+  id,
+  activeColor,
+  defaultColor,
+  onClickCategory,
+  activeCategory,
+  activeSubCategory,
+  onClickSubCategory,
+  activeIndicator,
+  onClickIndicator,
+  multiple,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  // const containsActive = (cat) => {
+  //   return cat.indicators.some((ind) => ind.ikey === activeKey)
+  // }
+
+  // useEffect(() => {
+  //   setActiveCat(indicators.findIndex((cat) => containsActive(cat)))
+  // }, [])
+  useEffect(() => {
+    setOpen(activeCategory === id)
+  }, [activeCategory, id])
+
+  return (
+    <motion.div
+      className={style.indicatorsCategory}
+      initial={{ height: "53px" }}
+      animate={{ height: open ? "auto" : "53px" }}
+      transition={{ duration: 0.4 }}
+      style={{
+        backgroundColor: "white",
+        borderBottom: open ? `1px solid ${activeColor}` : "0px",
+        marginBottom: open ? "20px" : "0px",
+      }}
+    >
+      <h2 className={`${style.title}`} onClick={() => onClickCategory(id)}>
+        <span style={{ color: open ? activeColor : defaultColor }}>
+          {open ? "-" : "+"}
+        </span>
+        <span
+          style={{ marginLeft: 12, color: open ? activeColor : defaultColor }}
+        >
+          {t(cat.name)}
+        </span>
+      </h2>
+      {cat.subcategories ? (
+        cat.subcategories.map(
+          (
+            { name: subcName, subcategory, indicators: subcIndicators },
+            idxSubc
+          ) => (
+            <IndicatorSubCategory
+              id={subcategory}
+              key={`subcKey ${idxSubc}`}
+              activeSubCategory={activeSubCategory}
+              subcName={subcName}
+              onClickSubCategory={onClickSubCategory}
+              activeIndicator={activeIndicator}
+              onClickIndicator={onClickIndicator}
+              multiple={multiple}
+              activeColor={activeColor}
+              defaultColor={defaultColor}
+              indicators={subcIndicators}
+            />
+          )
+        )
+      ) : (
+        <div className={style.list}>
+          {cat.indicators?.map((indicator, id) => {
+            return (
+              <Indicator
+                key={`indicator${id}`}
+                indicator={indicator}
+                values={indicator.type == "twoUnits" && indicator.values}
+                activeColor={activeColor}
+                defaultColor={defaultColor}
+                activeIndicator={activeIndicator}
+                onClickIndicator={onClickIndicator}
+                multiple={multiple}
+              />
+            )
+          })}
+        </div>
+      )}
+    </motion.div>
+  )
+}
+IndicatorsCategory.propTypes = {
+  cat: PropTypes.object,
+  id: PropTypes.string,
+  onChange: PropTypes.func,
+  onClickCategory: PropTypes.func,
+  activeCategory: PropTypes.string,
+  activeSubCategory: PropTypes.string,
+  onClickSubCategory: PropTypes.func,
+  onClickIndicator: PropTypes.func,
+  activeIndicator: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  multiple: PropTypes.bool,
+  activeColor: PropTypes.string,
+  defaultColor: PropTypes.string,
+}

package/src/components/IndicatorsList/IndicatorsCategory/IndicatorsCategory.module.scss

@@ -0,0 +1,20 @@
+.indicatorsCategory {
+  overflow: hidden;
+
+  .title {
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    margin-bottom: 25px;
+  }
+  .list {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: start;
+    flex-direction: column;
+    align-items: start;
+    width: 100%;
+    gap: 20px;
+    padding-bottom: 20px;
+  }
+}

package/src/components/IndicatorsList/IndicatorsList.jsx

@@ -0,0 +1,173 @@
+/*
+Componente para listar todas los indicadores clasificados en sus categorías
+Recibe el array de objetos que contiente todos los indicadores con esta estructura:
+[
+    {
+        category: 'codi',
+        name: 'locales.nomCategoria',
+        // Las subcategorias son opcionales
+        subcategories: [
+          {
+              subcategory: 'codi',
+              name: 'locales.nomSubcategoria',  
+              indicators: []
+          }
+        ]
+        indicators: [
+            {
+              ikey: number,
+              name: 'locales.nomIndicador',
+              code:['codi/s'],
+              type: 'cat/abs/both/twoUnits',
+              values: (si type cat, both o twoUnits),
+              maxColor: (si type abs o both),
+              midColor: (si type abs o both),
+              minColor: (si type abs o both),
+              maxValue: (si type abs o both),
+              minValue: (si type abs o both),
+              minValueIndicador: 'locales.indicador.minValueIndicador',
+              maxValueIndicador: 'locales.indicador.minValueIndicador',
+              unit: 'locales.unidadIndicador',
+              time: bool (si tiene que mostrarse el slider de tiempo)
+            }
+        ]
+    }
+]
+También recibe el activeColor para elementos seleccionados y defaultColor para los que no
+*/
+import PropTypes from "prop-types"
+import { useTranslation } from "react-i18next"
+//components
+import { IndicatorsCategory } from "./IndicatorsCategory/IndicatorsCategory"
+
+//styles
+import style from "./IndicatorsList.module.scss"
+import { useEffect, useState } from "react"
+
+export const IndicatorsList = ({
+  indicators,
+  activeColor,
+  defaultColor = "black",
+  // Función que se ejecuta al seleccionar un indicador, recibe el o los ikeys como parametro
+  onChange,
+  // Selección multiple
+  multiple = false,
+  // Si multiple es true, debe ser un array de strings, sino un string
+  defaultValue = null,
+}) => {
+  const { t } = useTranslation()
+  const [activeCategory, setActiveCategory] = useState()
+  const [activeSubCategory, setActiveSubCategory] = useState()
+  const [activeIndicator, setActiveIndicator] = useState()
+
+  const onClickCategory = (id) => {
+    setActiveCategory(activeCategory == id ? null : id)
+  }
+  const onClickSubCategory = (id) => {
+    setActiveSubCategory(activeSubCategory == id ? null : id)
+  }
+  const onClickIndicator = ({ indicator }) => {
+    updateActiveIndicator(indicator)
+  }
+  const updateActiveIndicator = (indicator) => {
+    if (!multiple) {
+      setActiveIndicator(
+        activeIndicator?.ikey == indicator.ikey ? null : indicator
+      )
+    } else {
+      let newActiveIndicator =
+        activeIndicator && activeIndicator.length > 0
+          ? [...activeIndicator]
+          : []
+      setActiveIndicator(
+        newActiveIndicator?.some(
+          (indicatorElement) => indicatorElement.ikey == indicator.ikey
+        )
+          ? newActiveIndicator.filter(
+              (ind) => ind.ikey != String(indicator.ikey)
+            )
+          : [...newActiveIndicator, indicator]
+      )
+    }
+  }
+  useEffect(() => {
+    if (onChange && typeof onChange === "function")
+      onChange({ activeIndicator })
+  }, [activeIndicator])
+
+  //Setea el valor por defecto si existe y no tenemos un indicador activo
+  //Busca el valor por defecto en el array de indicadores y setea también las categorias y subcategoirias activas
+  useEffect(() => {
+    if (defaultValue && !activeIndicator) {
+      if (multiple && defaultValue && Array.isArray(defaultValue)) {
+        let newActiveIndicator =
+          activeIndicator && activeIndicator.length > 0
+            ? [...activeIndicator]
+            : []
+        setActiveIndicator([...newActiveIndicator, ...defaultValue])
+        updateActiveCategoiriesOnChangeDefaultVal(defaultValue[0].ikey)
+      } else {
+        updateActiveIndicator(defaultValue)
+        updateActiveCategoiriesOnChangeDefaultVal(defaultValue.ikey)
+      }
+    }
+  }, [defaultValue])
+
+  const updateActiveCategoiriesOnChangeDefaultVal = (defaultValue) => {
+    const category = indicators.find((cat) => {
+      if (cat.subcategories) {
+        let subcategoryFound = cat.subcategories.find((subc) =>
+          subc.indicators.find((indSubc) => indSubc.ikey == defaultValue)
+        )
+        if (subcategoryFound) {
+          // console.log("subCategoryFound: ", subcategoryFound)
+          setActiveSubCategory(subcategoryFound.subcategory)
+          return subcategoryFound
+        }
+      } else {
+        return cat.indicators.some((ind) => ind.ikey == defaultValue)
+      }
+    })
+    // console.log("foundCategory: ", category)
+    if (category) {
+      setActiveCategory(category.category)
+    }
+  }
+
+  return (
+    <div className={style.indicatorsList}>
+      <h2 className={style.title} style={{ color: defaultColor }}>
+        {t("indicators.indicators")}
+      </h2>
+
+      {indicators.map((cat, id) => {
+        return (
+          <IndicatorsCategory
+            id={cat.category}
+            key={`categoryKey${id}`}
+            cat={cat}
+            onClickCategory={onClickCategory}
+            activeCategory={activeCategory}
+            onClickSubCategory={onClickSubCategory}
+            activeSubCategory={activeSubCategory}
+            onClickIndicator={onClickIndicator}
+            activeIndicator={activeIndicator}
+            activeColor={activeColor}
+            defaultColor={defaultColor}
+            multiple={multiple}
+            onChange={onChange}
+          />
+        )
+      })}
+    </div>
+  )
+}
+IndicatorsList.propTypes = {
+  indicators: PropTypes.arrayOf(PropTypes.object),
+  activeColor: PropTypes.string,
+  defaultColor: PropTypes.string,
+  onChange: PropTypes.func,
+  multiple: PropTypes.bool,
+  activeIndicator: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  defaultValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+}

package/src/components/IndicatorsList/IndicatorsList.module.scss

@@ -0,0 +1,10 @@
+pr.indicatorsList {
+  width: 100%;
+  padding-left: 30px;
+
+  .title {
+    border-bottom: 1px solid;
+    padding-bottom: 25px;
+    margin-bottom: 32px;
+  }
+}