From b5c0fd7167f0756a6a6d7fbae4830d392775604f Mon Sep 17 00:00:00 2001 From: bakhirev Date: Tue, 1 Oct 2024 10:15:15 +0300 Subject: [PATCH] update --- public/index.html | 3 +- src/index.tsx | 8 ++- src/ts/components/DataLoader/store/index.ts | 1 + src/ts/components/LineSVG/helpers/index.ts | 29 ++++++++++ src/ts/components/LineSVG/index.module.scss | 12 ++++ src/ts/components/LineSVG/index.svg | 4 ++ src/ts/components/LineSVG/index.tsx | 56 +++++++++++++++++++ src/ts/components/Recommendations/index.tsx | 11 +++- src/ts/components/UiKit/components/Select.tsx | 29 +++++----- src/ts/helpers/DataGrip/components/author.ts | 2 +- src/ts/helpers/DataGrip/components/scope.ts | 2 +- src/ts/helpers/DataGrip/components/tasks.ts | 2 +- src/ts/helpers/DataGrip/components/type.ts | 2 +- src/ts/helpers/DataGrip/components/week.ts | 2 +- .../FileGrip/components/FileBuilder/Common.ts | 1 + src/ts/helpers/achievement/byFile.ts | 2 + src/ts/pages/index.tsx | 5 +- 17 files changed, 142 insertions(+), 29 deletions(-) create mode 100644 src/ts/components/LineSVG/helpers/index.ts create mode 100644 src/ts/components/LineSVG/index.module.scss create mode 100644 src/ts/components/LineSVG/index.svg create mode 100644 src/ts/components/LineSVG/index.tsx 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 ( + + {paths} + + ); +} + +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 (