@tmf_ciclica/ciclicastorybook 1.0.12 → 1.0.14

package/src/components/FiltersAmbit/TematicalFilters/TematicalFiltersInput/TematicalFiltersInput.jsx

@@ -1,267 +0,0 @@
-import {  useMemo, useState } from "react"
-import { CategoryCheckbox } from "./CategoryCheckbox/CategoryCheckbox"
-import { AbsoluteSlider } from "./AbsoluteSlider/AbsoluteSlider"
-import { DropdownList } from "../../../DropdownList/DropdownList"
-import PropTypes from "prop-types"
-import style from "./TematicalFiltersInput.module.scss"
-import { useAmbitStore } from "../../useAmbitStore"
-export const TematicalFiltersInput = ({
-  indicator,
-  //onChangeBothType
-}) => {
-  const [selectedType, setSelectedType] = useState()
-  const {
-    type: indicatorType,
-    name,
-    values,
-    minValue,
-    maxValue,
-    unit,
-  } = indicator || {}
-  const isTypeCat = useMemo(
-    () => indicatorType == "cat" || selectedType == "cat",
-    [selectedType, indicatorType]
-  )
-  const isTypeAbs = useMemo(
-    () => indicatorType == "abs" || selectedType == "abs",
-    [selectedType, indicatorType]
-  )
-
-  const {
-    tematicalFiltersSelected,
-    selectedIndicator,
-    fontColor,
-    inputsColor,
-  } = useAmbitStore((s) => s)
-
-  const onChangeInput = (indicatorValue) => {
-    if (indicatorValue) {
-      const { min, max, valueClicked, allValues } = indicatorValue || {}
-      const { code, type: indicatorType } = indicator || {}
-      const type = isTypeAbs ? "abs" : isTypeCat ? "cat" : "both"
-
-      //Code is an array. If type is both, we need to check if the value is for category or absolute.
-      //Code [1] is the category code, code[0] is the absolute code.
-      let newCode = code[0]
-      if (indicatorType == "both") {
-        newCode = type == "cat" ? code[1] : code[0]
-      }
-      //By default all categories are selected.
-      //When deselecting one category, We will send all the indexes of the values selected in the values array.
-      if (type == "cat") {
-        useAmbitStore.setState((actual) => {
-          let foundIndicator = actual.tematicalFiltersSelected.find(
-            (f) => f.code === newCode
-          )
-          if (foundIndicator) {
-            let newValues = [foundIndicator.values]
-            //If the indicator already exists, we will update the values array.
-            if (foundIndicator.values.includes(valueClicked)) {
-              //if the value
-              newValues = foundIndicator.values.filter(
-                (v) => v !== valueClicked
-              )
-              if (newValues.length < 1) {
-                //If there are no values left, we will remove the indicator from the actual. array.
-                return {
-                  tematicalFiltersSelected:
-                    actual.tematicalFiltersSelected.filter(
-                      (f) => f.code !== newCode
-                    ),
-                }
-              }
-            } else {
-              //If the value is not selected, we will add it to the values array.
-              newValues = [...foundIndicator.values, valueClicked]
-            }
-            //Update the existing filter with the new values.
-            return {
-              tematicalFiltersSelected: actual.tematicalFiltersSelected.map(
-                (f) => (f.code === newCode ? { ...f, values: newValues } : f)
-              ),
-            }
-          } else {
-            console.log("entra aqui: ", allValues, " ", valueClicked)
-            let allValuesIndexes = allValues.map((f, index) => index)
-            //If the indicator does not exist, we will add it to the filtersSelected array.
-            //We will send the values array without the valueClicked index.
-            return {
-              tematicalFiltersSelected: [
-                ...tematicalFiltersSelected,
-                {
-                  type: "cat",
-                  code: newCode,
-                  values: allValuesIndexes.filter((f) => f !== valueClicked),
-                },
-              ],
-            }
-          }
-        })
-        //If type is abs we will send the min and max values selected in the slider.
-      } else if (type == "abs") {
-        useAmbitStore.setState((actual) => {
-          let foundIndicator = actual.tematicalFiltersSelected.find(
-            (f) => f.code === newCode
-          )
-          if (foundIndicator) {
-            //If the indicator already exists, we will update the min and max values.
-            let updatedIndicator = { ...foundIndicator }
-            updatedIndicator.min = min
-            updatedIndicator.max = max
-
-            return {
-              tematicalFiltersSelected: actual.tematicalFiltersSelected.map(
-                (f) => (f.code === newCode ? updatedIndicator : f)
-              ),
-            }
-          } else {
-            //If the indicator does not exist, we will add it to the filtersSelected array.
-            return {
-              tematicalFiltersSelected: [
-                ...tematicalFiltersSelected,
-                { type: "abs", code: newCode, min, max },
-              ],
-            }
-          }
-        })
-      }
-    }
-  }
-
-  //Filters selected map is the filtersSelected array parsed
-  //to a json easy to access the value with {indicator.code: set of values}
-  const filtersSelectedMap = useMemo(() => {
-    const map = {}
-    if (tematicalFiltersSelected?.length > 0) {
-      for (const item of tematicalFiltersSelected) {
-        if (item.type === "cat") {
-          map[item.code] = new Set(item.values)
-        } else {
-          map[item.code] = [item.min, item.max]
-        }
-      }
-    }
-    return map
-  }, [tematicalFiltersSelected])
-
-  return (
-    <div className={style.tematicalFiltersInputContainer}>
-      <DropdownList
-        titleFontStyles={{ fontSize: 16, fontWeight: 400 }}
-        title={name}
-        isOpen={selectedIndicator == `id${name}`}
-        onClick={() =>
-          useAmbitStore.setState(() => ({
-            selectedIndicator:
-              selectedIndicator == `id${name}` ? "" : `id${name}`,
-          }))
-        }
-        showBottomBar={false}
-        height={38}
-        titleMarginChildren={14}
-        className={"tematicalFiltersInputContainer"}
-        color={fontColor}
-      >
-        {indicatorType == "both" && (
-          <div
-            className={style.inputTypeContainer}
-            style={{ color: fontColor }}
-          >
-            <label>
-              <input
-                type="radio"
-                name="tipo"
-                value="abs"
-                // checked={selectedType == "abs"}
-                onChange={() => {
-                  setSelectedType("abs")
-                  //onChangeBothType && onChangeBothType({ code: code[1] })
-                }}
-                style={{
-                  marginRight: 4,
-                  backgroundColor:
-                    selectedType == "abs" ? inputsColor : "white",
-                  border: `1.5px solid ${
-                    selectedType == "abs" ? inputsColor : fontColor
-                  }`,
-                }}
-              />
-              Absoluto
-            </label>
-
-            <label>
-              <input
-                type="radio"
-                name="tipo"
-                value="cat"
-                // checked={selectedType == "cat"}
-                onChange={() => {
-                  setSelectedType("cat")
-                  //onChangeBothType && onChangeBothType({ code: code[0] })
-                }}
-                style={{
-                  marginRight: 4,
-                  backgroundColor:
-                    selectedType == "cat" ? inputsColor : "white",
-                  border: `1.5px solid ${
-                    selectedType == "cat" ? inputsColor : fontColor
-                  }`,
-                }}
-              />
-              Categórico
-            </label>
-          </div>
-        )}
-        {isTypeCat && (
-          <div className={style.checkboxContainer}>
-            {values.map((indicatorValue, index) => (
-              <CategoryCheckbox
-                key={`checkbox-${index}`}
-                onClick={() =>
-                  onChangeInput({ valueClicked: index, allValues: values })
-                }
-                indicator={indicatorValue}
-                //Filters selected map is the filtersSelected array parsed
-                // to a json easy to access the value with {indicator.code: set of values}
-                value={
-                  filtersSelectedMap[
-                    indicator.code[indicatorType == "both" ? 1 : 0]
-                  ]?.has(index) ||
-                  !filtersSelectedMap[
-                    indicator.code[indicatorType == "both" ? 1 : 0]
-                  ]
-                }
-              />
-            ))}
-          </div>
-        )}
-        {isTypeAbs && (
-          <div className={style.absoluteSliderContainer}>
-            <AbsoluteSlider
-              onChange={onChangeInput}
-              min={minValue}
-              max={maxValue}
-              unit={unit}
-              value={filtersSelectedMap[indicator.code[0]]}
-            />
-          </div>
-        )}
-      </DropdownList>
-    </div>
-  )
-}
-
-TematicalFiltersInput.propTypes = {
-  indicator: PropTypes.shape({
-    name: PropTypes.string,
-    type: PropTypes.string,
-    code: PropTypes.arrayOf(PropTypes.string),
-    values: PropTypes.arrayOf(
-      PropTypes.shape({
-        codename: PropTypes.oneOfType(PropTypes.array, PropTypes.string),
-        title: PropTypes.string,
-      })
-    ),
-  }),
-  //onChangeBothType: PropTypes.func,
-}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFiltersInput/TematicalFiltersInput.module.scss

@@ -1,31 +0,0 @@
-.tematicalFiltersInputContainer {
-  .inputTypeContainer {
-    @include flex($direction: column, $align: flex-start);
-    gap: 14px;
-    padding-bottom: 14px;
-    label,
-    input {
-      cursor: pointer;
-      font-size: 14px;
-    }
-    input[type="radio"] {
-      appearance: none;
-      -webkit-appearance: none;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%; // redondo como un radio
-      background-color: white;
-      transition: background-color 0.2s ease;
-      cursor: pointer;
-      vertical-align: middle;
-    }
-  }
-  .checkboxContainer {
-    @include flex($direction: column, $align: flex-start);
-    gap: 14px;
-  }
-  .absoluteSliderContainer {
-    width: 100%;
-    @include flex($align: flex-start, $justify: flex-start);
-  }
-}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFiltersSubcat/TematicalFiltersSubcat.jsx

@@ -1,58 +0,0 @@
-import { DropdownList } from "../../../DropdownList/DropdownList"
-import { TematicalFiltersInput } from "../TematicalFiltersInput/TematicalFiltersInput"
-import PropTypes from "prop-types"
-import { useAmbitStore } from "../../useAmbitStore"
-import { useEffect } from "react"
-
-//Needs DropdownList component to be used
-export const TematicalFiltersSubcat = ({
-  subcategory,
-  fontColor,
-  //onChangeBothType,
-}) => {
-  const { activeSubcategory } = useAmbitStore((s) => s)
-
-
-  const { name, indicators } = subcategory || {}
-  return (
-    <DropdownList
-      title={name}
-      isOpen={activeSubcategory == `id${name}`}
-      onClick={() => {
-        useAmbitStore.setState((s) => {
-          return {
-            activeSubcategory:
-              s.activeSubcategory === `id${name}` ? "" : `id${name}`,
-          }
-        })
-      }}
-      titleFontStyles={{ fontSize: 16, fontWeight: 400 }}
-      showBottomBar={false}
-      titleMarginChildren={20}
-      height={49}
-      color={fontColor}
-    >
-      {indicators?.map((indicator, key) => (
-        <TematicalFiltersInput
-          indicator={indicator}
-          key={`indicatorSub-${key}`}
-          fontColor={fontColor}
-          //onChangeBothType={onChangeBothType}
-        />
-      ))}
-    </DropdownList>
-  )
-}
-
-TematicalFiltersSubcat.propTypes = {
-  subcategory: PropTypes.shape({
-    name: PropTypes.string,
-    indicators: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string,
-        value: PropTypes.string,
-      })
-    ),
-  }),
-  //onChangeBothType: PropTypes.func,
-}

package/src/components/FiltersAmbit/useAmbitStore.jsx

@@ -1,10 +0,0 @@
-import { create } from "zustand"
-
-export const useAmbitStore = create((set) => ({
-  activeCategory: "",
-  activeSubCategory: "",
-  selectedIndicator: "",
-  tematicalFiltersSelected: [],
-  fontColor: "#605B56",
-  inputsColor: "#605B56",
-}))

package/src/components/Graphic/BarChart/BarChart.jsx

@@ -1,146 +0,0 @@
-import { useMemo } from "react"
-import * as d3 from "d3"
-import style from "./BarChart.module.scss"
-import PropTypes from "prop-types"
-import { useTranslation } from "react-i18next"
-export const BarChart = ({
-  data,
-  width = 700,
-  barHeight = 25,
-  gap = 23,
-  fontColor = "#605B56",
-  verticalPaddign = 10,
-  horizontalPaddign = 20,
-  leftPadding = 200,
-  numberOfDivisions = 7,
-
-  maxValue = null,
-}) => {
-  const { t } = useTranslation()
-  const { xScale, ticks, height } = useMemo(() => {
-    if (data && data.length > 0) {
-      const height = data?.length * (barHeight + gap) + verticalPaddign * 2
-      const dataMaxValue = d3.max(data, (d) => d.value) || 1
-      const xScale = d3
-        .scaleLinear()
-        .domain([0, maxValue ? maxValue : dataMaxValue])
-        .range([0, width - leftPadding])
-
-      const ticks = Array.from({ length: numberOfDivisions + 1 }, (_, i) => {
-        if (maxValue) return (maxValue / numberOfDivisions) * i
-        else return (dataMaxValue / numberOfDivisions) * i
-      })
-      return {
-        xScale,
-        ticks,
-        height,
-        width,
-        verticalPaddign,
-        horizontalPaddign,
-      }
-    } else {
-      return { xScale: null, ticks: [], height: 0 }
-    }
-  }, [
-    data,
-    width,
-    numberOfDivisions,
-    barHeight,
-    gap,
-    horizontalPaddign,
-    verticalPaddign,
-    maxValue,
-  ])
-
-  return (
-    <div className={style.barChartContainer}>
-      <svg width={width + horizontalPaddign * 2} height={height}>
-        <g transform={`translate(0,${gap})`}>
-          {/*Ejes verticales*/}
-          <g transform={`translate(${leftPadding + horizontalPaddign}, 0)`}>
-            {ticks.map((tick, i) => {
-              const x = xScale(tick)
-              return (
-                <g key={i} transform={`translate(${x}, 0)`}>
-                  <line
-                    y1={0}
-                    y2={height - gap * 2}
-                    stroke="#ccc"
-                    // strokeDasharray="2,2"
-                  />
-                  <text
-                    y={height - gap}
-                    textAnchor="middle"
-                    fontSize={10}
-                    fill={fontColor}
-                  >
-                    {parseInt(tick)}
-                  </text>
-                </g>
-              )
-            })}
-          </g>
-          {/*Barras*/}
-          {data &&
-            data.length > 0 &&
-            data?.map((d, i) => {
-              const barWidth = xScale(d.value)
-              const y = i * (barHeight + gap)
-
-              return (
-                <g
-                  key={i}
-                  transform={`translate(${
-                    leftPadding + horizontalPaddign
-                  }, ${y})`}
-                >
-                  <text
-                    x={-24}
-                    y={barHeight / 2 + 5}
-                    textAnchor="end"
-                    fill={fontColor}
-                    //   fontSize={12}
-                    //   fontFamily="sans-serif"
-                  >
-                    {t(d.title)}
-                  </text>
-                  <rect
-                    width={barWidth}
-                    height={barHeight}
-                    fill={d.color}
-                    rx={0}
-                  />
-                  {/* <text
-              x={barWidth - 8}
-              y={barHeight / 2 + 5}
-              textAnchor="end"
-              fill="white"
-              fontSize={12}
-              fontFamily="sans-serif"
-            >
-              {d.value} */}
-                  {/* </text> */}
-                </g>
-              )
-            })}
-        </g>
-      </svg>
-    </div>
-  )
-}
-BarChart.propTypes = {
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      value: PropTypes.number,
-      color: PropTypes.string,
-    })
-  ),
-  width: PropTypes.number,
-  barHeight: PropTypes.number,
-  gap: PropTypes.number,
-  verticalPaddign: PropTypes.number,
-  horizontalPaddign: PropTypes.number,
-  numberOfDivisions: PropTypes.number,
-  fontColor: PropTypes.string,
-}

package/src/components/Graphic/BarChart/BarChart.module.scss

@@ -1,5 +0,0 @@
-.barChartContainer {
-  height: 100%;
-  width: 100%;
-  @include flex();
-}

package/src/components/Graphic/BarChart/BarChart.stories.jsx

@@ -1,18 +0,0 @@
-import { BarChart } from "./BarChart"
-export default {
-  title: "Components/BarChart",
-  component: BarChart,
-}
-
-export const Default = {
-  args: {
-    data: [
-      { color: "red", value: 100, title: "Title 1" },
-      { color: "blue", value: 200, title: "Title 2" },
-      { color: "green", value: 300, title: "Title 3" },
-    ],
-    fontColor: "#605B56",
-    width: 700,
-    barHeight: 45,
-  },
-}

package/src/components/Graphic/Graphic.jsx

@@ -1,55 +0,0 @@
-import PropTypes from "prop-types"
-import { BarChart } from "./BarChart/BarChart"
-import styles from "./Graphic.module.scss"
-import { useTranslation } from "react-i18next"
-export const Graphic = ({
-  data,
-  graphWidth = 700,
-  containerStyle,
-  borderColor = "#605B56",
-  title = "Graphic Title",
-  fontColor = "#605B56",
-  maxValue = null,
-  numberOfDivisions = 7,
-  leftPadding = 200,
-}) => {
-  const { t } = useTranslation()
-  return (
-    <div
-      className={styles.graphicContainer}
-      style={{
-        ...(containerStyle || {}),
-        border: `1.5px solid ${borderColor}`,
-      }}
-    >
-      <div className={styles.titleContainer}>
-        <h2>{t(title)}</h2>
-      </div>
-      <BarChart
-        data={data}
-        width={graphWidth}
-        fontColor={fontColor}
-        maxValue={maxValue}
-        numberOfDivisions={numberOfDivisions}
-        leftPadding={leftPadding}
-      />
-    </div>
-  )
-}
-Graphic.propTypes = {
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      color: PropTypes.string.isRequired,
-      value: PropTypes.number.isRequired,
-      title: PropTypes.string.isRequired,
-    })
-  ),
-  borderColor: PropTypes.string,
-  title: PropTypes.string,
-  graphWidth: PropTypes.number,
-  containerStyle: PropTypes.object,
-  fontColor: PropTypes.string,
-  maxValue: PropTypes.number,
-  numberOfDivisions: PropTypes.number,
-  leftPadding: PropTypes.number,
-}

package/src/components/Graphic/Graphic.module.scss

@@ -1,12 +0,0 @@
-.graphicContainer {
-  @include flex($direction: column);
-  width: 100%;
-  border: 1.5px solid black;
-  padding: 33px 50px;
-  border-radius: 20px;
-  .titleContainer {
-    @include flex();
-    justify-content: center;
-    margin-bottom: 83px;
-  }
-}

package/src/components/Graphic/Graphic.stories.jsx

@@ -1,25 +0,0 @@
-import { color } from "d3"
-import { Graphic } from "./Graphic"
-export default {
-  title: "Components/Graphic",
-  component: Graphic,
-}
-
-export const Default = {
-  args: {
-    data: [
-      { color: "#FEB641", value: 100, title: "Residential" },
-      { color: "#013365", value: 200, title: "Administration" },
-      { color: "#508BC7", value: 300, title: "Educational" },
-    ],
-    title: "Main use: Number of dwelling",
-    containerStyle: {
-      color: "#605B56",
-    },
-    graphWidth: 900,
-    fontColor: "#605B56",
-    maxValue: 500,
-    numberOfDivisions: 7,
-    leftPadding: 200,
-  },
-}