contentoh-components-library 21.6.63 → 21.6.64

package/dist/components/organisms/DashboardMetric/index.js

@@ -43,31 +43,34 @@ var DashboardMetric = function DashboardMetric(_ref) {
       borderColor = _ref.borderColor,
       total = _ref.total,
       totalFiltered = _ref.totalFiltered;
+  // Chart.js coloca la leyenda por opción, no por CSS. Se mide el panel y no
+  // la ventana, porque el ancho real depende también del menú de la app: a
+  // 828px de ventana el panel queda en 331 y la leyenda de lado sale cortada.
+  var containerRef = (0, _react.useRef)(null);
 
-  // Chart.js coloca la leyenda por opción, no por CSS: en pantallas angostas
-  // va abajo, porque a un lado deja la gráfica en nada.
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isNarrow = _useState2[0],
       setIsNarrow = _useState2[1];
 
   (0, _react.useEffect)(function () {
-    var media = window.matchMedia("(max-width: 600px)");
-
-    var update = function update() {
-      return setIsNarrow(media.matches);
-    };
-
-    update();
-    media.addEventListener("change", update);
+    var node = containerRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return undefined;
+    var observer = new ResizeObserver(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+          entry = _ref3[0];
+
+      return setIsNarrow(entry.contentRect.width < 420);
+    });
+    observer.observe(node);
     return function () {
-      return media.removeEventListener("change", update);
+      return observer.disconnect();
     };
   }, []);
-  var labels = type === "doughnut" ? Object.entries(dataObject).map(function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-        key = _ref3[0],
-        value = _ref3[1];
+  var labels = type === "doughnut" ? Object.entries(dataObject).map(function (_ref4) {
+    var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        key = _ref5[0],
+        value = _ref5[1];
 
     return key !== "NS" && "".concat((0, _dashboardMetricUtils.getFullStatus)(key), " (").concat(value, ")");
   }) : Object.keys(dataObject);
@@ -97,11 +100,11 @@ var DashboardMetric = function DashboardMetric(_ref) {
     plugins: {
       tooltip: {
         callbacks: {
-          label: function label(_ref4) {
+          label: function label(_ref6) {
             var _dataset$data;
 
-            var dataset = _ref4.dataset,
-                element = _ref4.element;
+            var dataset = _ref6.dataset,
+                element = _ref6.element;
             var sum = dataset === null || dataset === void 0 ? void 0 : (_dataset$data = dataset.data) === null || _dataset$data === void 0 ? void 0 : _dataset$data.reduce(function (accumulator, value) {
               return accumulator + value;
             }, 0);
@@ -136,6 +139,8 @@ var DashboardMetric = function DashboardMetric(_ref) {
     showTooltips: true
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    ref: containerRef,
+    className: isNarrow ? "is-narrow" : "",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "text-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {

package/dist/components/organisms/DashboardMetric/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding: 24px;\n  position: relative;\n\n  @media (max-width: 600px) {\n    padding: 12px;\n\n    .graphic-cotainer {\n      padding: 5px;\n    }\n\n    /* Va rotada y fuera del recuadro; con el padding chico se encima. */\n    > p.y-label {\n      display: none;\n    }\n  }\n\n  .text-container {\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 17px;\n\n      &:last-of-type {\n        font-size: 12px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 5px;\n      }\n    }\n\n    & + * {\n      margin-top: 15px;\n    }\n  }\n\n  .select-container {\n    display: flex;\n\n    .select {\n      flex: 0.1 1 30%;\n\n      select {\n        width: 100%;\n      }\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .graphic-cotainer {\n    height: 350px;\n    border: 1px solid ", ";\n    padding: 10px;\n    border-radius: 5px;\n\n    div {\n      height: fill-available;\n    }\n  }\n\n  & > p {\n    font-family: ", ";\n    color: ", ";\n    font-size: 17px;\n\n    &.x-label {\n      position: absolute;\n      left: 50%;\n      transform: translate(-50%);\n      bottom: 4px;\n    }\n\n    &.y-label {\n      position: absolute;\n      transform: rotate(-90deg);\n      left: -28px;\n      top: 50%;\n    }\n\n    &.center-label {\n      position: absolute;\n      top: 52%;\n      right: 58%;\n      font-size: 28px;\n      color: #000;\n      font-feature-settings: \"pnum\", \"lnum\";\n      font-family: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.GlobalColors.s4, _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding: 24px;\n  position: relative;\n\n  @media (max-width: 600px) {\n    padding: 12px;\n\n    .graphic-cotainer {\n      padding: 5px;\n    }\n\n    /* Va rotada y fuera del recuadro; con el padding chico se encima. */\n    > p.y-label {\n      display: none;\n    }\n  }\n\n  .text-container {\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 17px;\n\n      &:last-of-type {\n        font-size: 12px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 5px;\n      }\n    }\n\n    & + * {\n      margin-top: 15px;\n    }\n  }\n\n  .select-container {\n    display: flex;\n\n    .select {\n      flex: 0.1 1 30%;\n\n      select {\n        width: 100%;\n      }\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  /* Con la leyenda abajo, Chart.js le da un m\xE1ximo de la altura del recuadro\n     y descarta las entradas que no caben; por eso crece junto con ella. */\n  &.is-narrow .graphic-cotainer {\n    height: 500px;\n  }\n\n  .graphic-cotainer {\n    height: 350px;\n    border: 1px solid ", ";\n    padding: 10px;\n    border-radius: 5px;\n\n    div {\n      height: fill-available;\n    }\n  }\n\n  & > p {\n    font-family: ", ";\n    color: ", ";\n    font-size: 17px;\n\n    &.x-label {\n      position: absolute;\n      left: 50%;\n      transform: translate(-50%);\n      bottom: 4px;\n    }\n\n    &.y-label {\n      position: absolute;\n      transform: rotate(-90deg);\n      left: -28px;\n      top: 50%;\n    }\n\n    &.center-label {\n      position: absolute;\n      top: 52%;\n      right: 58%;\n      font-size: 28px;\n      color: #000;\n      font-feature-settings: \"pnum\", \"lnum\";\n      font-family: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.GlobalColors.s4, _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600);
 
 exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.63",
+  "version": "21.6.64",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/organisms/DashboardMetric/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Container } from "./styles";
 import { Graphic } from "../../atoms/Graphic";
 import {
@@ -21,15 +21,19 @@ export const DashboardMetric = ({
   total,
   totalFiltered,
 }) => {
-  // Chart.js coloca la leyenda por opción, no por CSS: en pantallas angostas
-  // va abajo, porque a un lado deja la gráfica en nada.
+  // Chart.js coloca la leyenda por opción, no por CSS. Se mide el panel y no
+  // la ventana, porque el ancho real depende también del menú de la app: a
+  // 828px de ventana el panel queda en 331 y la leyenda de lado sale cortada.
+  const containerRef = useRef(null);
   const [isNarrow, setIsNarrow] = useState(false);
   useEffect(() => {
-    const media = window.matchMedia("(max-width: 600px)");
-    const update = () => setIsNarrow(media.matches);
-    update();
-    media.addEventListener("change", update);
-    return () => media.removeEventListener("change", update);
+    const node = containerRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(([entry]) =>
+      setIsNarrow(entry.contentRect.width < 420)
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
   }, []);
 
   const labels =
@@ -113,7 +117,7 @@ export const DashboardMetric = ({
   };
 
   return (
-    <Container>
+    <Container ref={containerRef} className={isNarrow ? "is-narrow" : ""}>
       <div className="text-container">
         <p>{label}</p>
         <p>{description}</p>

package/src/components/organisms/DashboardMetric/styles.js

@@ -61,6 +61,12 @@ export const Container = styled.div`
     }
   }
 
+  /* Con la leyenda abajo, Chart.js le da un máximo de la altura del recuadro
+     y descarta las entradas que no caben; por eso crece junto con ella. */
+  &.is-narrow .graphic-cotainer {
+    height: 500px;
+  }
+
   .graphic-cotainer {
     height: 350px;
     border: 1px solid ${GlobalColors.s3};