@typeolymp/ui-components 2.2.5 → 2.2.7

package/build/components/organisms/Chart/index.d.ts

@@ -4,6 +4,8 @@ import { Period, ExerciseResult } from "./utils";
 declare type BasePropsType = {
     exerciseResults: ExerciseResult[];
     locale: Locale;
+    hideTitle?: boolean;
+    hidePeriod?: boolean;
     defaultPeriod?: Period;
     onChangePeriod?: (period: Period) => void;
 };

package/build/components/organisms/Chart/stories.d.ts

@@ -15,7 +15,10 @@ export declare const Multiple: () => JSX.Element;
 export declare const Playground: {
     (args: any): JSX.Element;
     args: {
+        type: string[];
         locale: Locale;
+        hideTitle: boolean;
+        hidePeriod: boolean;
         exerciseResults: ({
             _id: string;
             student: string;

package/build/index.es.js

@@ -48070,7 +48070,7 @@ var TimeChart = function (_a) {
 };
 
 var Chart = function (_a) {
-    var type = _a.type, locale = _a.locale, exerciseResults = _a.exerciseResults, _b = _a.defaultPeriod, defaultPeriod = _b === void 0 ? Period.TODAY : _b, onChangePeriod = _a.onChangePeriod, nExercisesInCourse = _a.nExercisesInCourse;
+    var type = _a.type, locale = _a.locale, hideTitle = _a.hideTitle, hidePeriod = _a.hidePeriod, exerciseResults = _a.exerciseResults, _b = _a.defaultPeriod, defaultPeriod = _b === void 0 ? Period.TODAY : _b, onChangePeriod = _a.onChangePeriod, nExercisesInCourse = _a.nExercisesInCourse;
     var _c = useState(defaultPeriod), period = _c[0], setPeriod = _c[1];
     useEffect(function () {
         setPeriod(defaultPeriod);
@@ -48107,20 +48107,20 @@ var Chart = function (_a) {
                 return jsx$1(TimeChart, __assign$2({}, props));
         }
     };
-    return (jsxs(Fragment$1, { children: [jsxs("div", __assign$2({ style: {
+    return (jsxs(Fragment$1, { children: [(!hideTitle || !hidePeriod) && (jsxs("div", __assign$2({ style: {
                     display: "flex",
                     gap: 20,
                     alignItems: "baseline",
-                    justifyContent: "space-between",
+                    justifyContent: "flex-end",
                     marginBottom: 10,
                     padding: "0 15px 0 5px",
-                } }, { children: [jsx$1(Heading, __assign$2({ type: "h3" }, { children: titles[type] })), jsx$1(Select, __assign$2({ defaultValue: period, onChange: function (value) {
+                } }, { children: [!hideTitle && (jsx$1("div", __assign$2({ style: { marginRight: "auto" } }, { children: jsx$1(Heading, __assign$2({ type: "h3" }, { children: titles[type] })) }))), !hidePeriod && (jsx$1(Select, __assign$2({ defaultValue: period, onChange: function (value) {
                             setPeriod(value);
                             onChangePeriod(value);
                         }, id: "period", name: "period" }, { children: periods.map(function (_a) {
                             var value = _a.value, label = _a.label;
                             return (jsx$1("option", __assign$2({ value: value }, { children: label }), value));
-                        }) }), period)] })), renderChart()] }));
+                        }) }), period))] }))), renderChart()] }));
 };
 
 var Container$5 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
@@ -48416,7 +48416,7 @@ var Form = forwardRef(function (props, ref) {
 });
 
 var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n  min-width: 720px;\n  width: 100%;\n  border-radius: 10px;\n  padding: 15px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 0 ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"], ["\n  min-width: 720px;\n  width: 100%;\n  border-radius: 10px;\n  padding: 15px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 0 ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
-var Row = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n  min-height: 40px;\n  height: 100%;\n  display: grid;\n  gap: 7px;\n"], ["\n  min-height: 40px;\n  height: 100%;\n  display: grid;\n  gap: 7px;\n"])));
+var Row = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n  min-height: 40px;\n  display: grid;\n  gap: 7px;\n"], ["\n  min-height: 40px;\n  display: grid;\n  gap: 7px;\n"])));
 var Row1 = styled(Row)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n  grid-template-columns: repeat(13, 1fr) 1.75fr;\n"], ["\n  grid-template-columns: repeat(13, 1fr) 1.75fr;\n"])));
 var Row2 = styled(Row)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n  grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n\n  > div:last-child {\n    border-radius: 6px 6px 0;\n  }\n"], ["\n  grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n\n  > div:last-child {\n    border-radius: 6px 6px 0;\n  }\n"])));
 var Row3 = styled(Row)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n  grid-template-columns: 2fr repeat(12, 1fr) 0.75fr;\n\n  > div:last-child {\n    margin-top: -11px;\n    border-top: none;\n    border-radius: 0 0 6px 6px;\n  }\n"], ["\n  grid-template-columns: 2fr repeat(12, 1fr) 0.75fr;\n\n  > div:last-child {\n    margin-top: -11px;\n    border-top: none;\n    border-radius: 0 0 6px 6px;\n  }\n"])));