@typeolymp/ui-components 1.19.1 → 1.19.2

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

@@ -1,9 +1,11 @@
 import { FC } from "react";
 import { Locale } from "@typeolymp/utils/enums";
-import { ExerciseResult } from "./utils";
+import { Period, ExerciseResult } from "./utils";
 declare type BasePropsType = {
     exerciseResults: ExerciseResult[];
     locale: Locale;
+    defaultPeriod?: Period;
+    onChangePeriod?: (period: Period) => void;
 };
 export declare type PropsType = (BasePropsType & {
     type: "accuracy" | "hits" | "results" | "speed" | "time";

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

@@ -11,6 +11,7 @@ export declare const Progress: () => JSX.Element;
 export declare const Results: () => JSX.Element;
 export declare const Speed: () => JSX.Element;
 export declare const Time: () => JSX.Element;
+export declare const Multiple: () => JSX.Element;
 export declare const Playground: {
     (args: any): JSX.Element;
     args: {

package/build/index.es.js

@@ -47822,8 +47822,11 @@ var TimeChart = function (_a) {
 };
 
 var Chart = function (_a) {
-    var type = _a.type, locale = _a.locale, exerciseResults = _a.exerciseResults, nExercisesInCourse = _a.nExercisesInCourse;
-    var _b = useState(Period.TODAY), period = _b[0], setPeriod = _b[1];
+    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 _c = useState(defaultPeriod), period = _c[0], setPeriod = _c[1];
+    useEffect(function () {
+        setPeriod(defaultPeriod);
+    }, [defaultPeriod]);
     var periods = [
         { value: Period.TODAY, label: translations[locale]["Today"] },
         { value: Period.LAST_7_DAYS, label: translations[locale]["Last 7 days"] },
@@ -47863,10 +47866,13 @@ var Chart = function (_a) {
                     justifyContent: "space-between",
                     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) { return setPeriod(value); }, id: "period", name: "period" }, { children: periods.map(function (_a) {
+                } }, { children: [jsx$1(Heading, __assign$2({ type: "h3" }, { children: titles[type] })), 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));
-                        }) }))] })), renderChart()] }));
+                        }) }), period)] })), renderChart()] }));
 };
 
 var StyledTextarea = styled.textarea(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {