@tmf_ciclica/ciclicastorybook 1.0.12 → 1.0.14

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

@@ -1,180 +0,0 @@
-/*
-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

@@ -1,46 +0,0 @@
-.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

@@ -1,76 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,122 +0,0 @@
-/*
-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

@@ -1,20 +0,0 @@
-.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

@@ -1,173 +0,0 @@
-/*
-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

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