@tmf_ciclica/ciclicastorybook 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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