diff --git a/public/index.html b/public/index.html
index 10d9343..fd291d6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
-
+
@@ -25,7 +25,6 @@
-
Git Statistics
diff --git a/src/index.tsx b/src/index.tsx
index 7b49ba7..827f73a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import localization from 'ts/helpers/Localization';
@@ -45,14 +45,16 @@ function renderReactApplication() {
printStore.endPrint();
};
- render(
+ const container = document.getElementById('root');
+ if (!container) return;
+
+ createRoot(container).render(
,
- document.getElementById('root'),
);
}
diff --git a/src/ts/components/DataLoader/store/index.ts b/src/ts/components/DataLoader/store/index.ts
index 95c714d..e59b12d 100644
--- a/src/ts/components/DataLoader/store/index.ts
+++ b/src/ts/components/DataLoader/store/index.ts
@@ -86,6 +86,7 @@ export class DataLoaderStore implements IDataLoaderStore {
loadMore: action,
showAll: action,
updateSort: action,
+ updateWatchedValue: action,
canSendRequest: computed,
});
}
diff --git a/src/ts/components/LineSVG/helpers/index.ts b/src/ts/components/LineSVG/helpers/index.ts
new file mode 100644
index 0000000..9d1f7ed
--- /dev/null
+++ b/src/ts/components/LineSVG/helpers/index.ts
@@ -0,0 +1,29 @@
+function polarToCartesian(x: number, y: number, r: number, degrees: number) {
+ const radians = degrees * Math.PI / 180;
+ return [
+ x + (r * Math.cos(radians)),
+ y + (r * Math.sin(radians)),
+ ];
+}
+
+export function getSegmentPath(
+ x: number,
+ y: number,
+ r0: number,
+ r1: number,
+ d0: number,
+ d1: number,
+) {
+ const arc = Math.abs(d0 - d1) > 180 ? 1 : 0;
+ const point = (radius: number, degree: number) =>
+ polarToCartesian(x, y, radius, degree)
+ .map(n => n.toPrecision(5))
+ .join(',');
+ return [
+ `M${point(r0, d0)}`,
+ `A${r0},${r0},0,${arc},1,${point(r0, d1)}`,
+ `L${point(r1, d1)}`,
+ `A${r1},${r1},0,${arc},0,${point(r1, d0)}`,
+ 'Z',
+ ].join('');
+}
diff --git a/src/ts/components/LineSVG/index.module.scss b/src/ts/components/LineSVG/index.module.scss
new file mode 100644
index 0000000..f859dc0
--- /dev/null
+++ b/src/ts/components/LineSVG/index.module.scss
@@ -0,0 +1,12 @@
+@import 'src/styles/variables';
+
+.pie_svg {
+ display: inline-block;
+ height: 100%;
+
+ &_sector {
+ fill: transparent;
+ stroke: var(--color-black);
+ stroke-width: 2px;
+ }
+}
diff --git a/src/ts/components/LineSVG/index.svg b/src/ts/components/LineSVG/index.svg
new file mode 100644
index 0000000..1ce62f9
--- /dev/null
+++ b/src/ts/components/LineSVG/index.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/src/ts/components/LineSVG/index.tsx b/src/ts/components/LineSVG/index.tsx
new file mode 100644
index 0000000..c6fcefa
--- /dev/null
+++ b/src/ts/components/LineSVG/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { IOptions, ISubLine } from 'ts/components/LineChart/interfaces';
+import { getSegmentPath } from './helpers';
+import style from './index.module.scss';
+
+interface ILineSVGProps {
+ options: IOptions;
+ parts: ISubLine[];
+ center?: number;
+}
+
+const ROTATE = -90;
+
+function LineSVG({
+ options,
+ parts,
+ center,
+}: ILineSVGProps): React.ReactElement | null {
+ const centerRadius = 49 * ((center || 72) / 100);
+
+ let prev = 0;
+ const paths = parts.map((item: ISubLine) => {
+ const stroke = options.color.get(item.title).first;
+ const angle = 360 * item.width / 100;
+ const next = Math.min(prev + angle, 360);
+ const d = getSegmentPath(50, 50, centerRadius, 50, prev + ROTATE, next + ROTATE);
+ prev += angle;
+
+ return (
+
+ );
+ });
+
+ return (
+
+ );
+}
+
+LineSVG.defaultProps = {
+ className: '',
+};
+
+export default LineSVG;
diff --git a/src/ts/components/Recommendations/index.tsx b/src/ts/components/Recommendations/index.tsx
index 0da9adc..10ba8a6 100644
--- a/src/ts/components/Recommendations/index.tsx
+++ b/src/ts/components/Recommendations/index.tsx
@@ -12,7 +12,12 @@ import style from './styles/index.module.scss';
function addBannerInRandomIndex(list: any[]) {
const className = `${styleCard.recommendations_card} ${styleCard.recommendations_card_banner}`;
- const item = ();
+ const item = (
+
+ );
const index = Math.floor(Math.random() * list.length);
const last = list.splice(index);
@@ -32,12 +37,12 @@ function Recommendations({
.filter(item => item)
.map((recommendation) => (mode === 'print' ? (
) : (
{
recommendationStore.open(recommendation);
diff --git a/src/ts/components/UiKit/components/Select.tsx b/src/ts/components/UiKit/components/Select.tsx
index d0ec73d..5624f5c 100644
--- a/src/ts/components/UiKit/components/Select.tsx
+++ b/src/ts/components/UiKit/components/Select.tsx
@@ -21,22 +21,20 @@ function UiKitSelect({
options,
onChange,
}: IUiKitSelectProps) {
- const items = (options || [])
- .map((option: any, index: number) => {
- const formattedOption = typeof option !== 'object'
- ? ({ id: option, title: option })
- : option;
+ const formattedOptions = (options || []).map((option: any) => (
+ typeof option !== 'object'
+ ? ({ id: option, title: option })
+ : option
+ ));
- return (
-
- );
- });
+ const items = formattedOptions.map((option: any, index: number) => (
+
+ ));
return (