namirasoft-site-react 1.4.552 → 1.4.554

package/src/components/NSGauge.module.css

@@ -1,68 +1,68 @@
-.ns_wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    span {
-        margin-top: 0.5rem;
-        font-weight: 500;
-        line-height: 1.25rem;
-        text-align: center;
-        color: #A1A4B0;
-    }
-}
-
-.ns_gauge_and_hand_wrapper {
-    position: relative;
-    height: 5.5rem;
-    width: 11rem;
-
-    svg {
-        position: absolute;
-        bottom: -2px;
-        left: 18px;
-        transform-origin: 70px 2px;
-        transition: transform 0.5s ease-in-out;
-        animation: rotation 0.5s ease-in-out;
-    }
-}
-
-.ns_gauge_wrapper {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
-
-.ns_gauge_progress_wrapper {
-    position: absolute;
-    width: 100%;
-    height: 11rem;
-    transform: rotateZ(45deg);
-}
-
-.ns_gauge_progress {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 2.25rem solid #e9e9e9;
-}
-
-.ns_gauge_progress_bar {
-    position: absolute;
-    top: 0.25rem;
-    left: 0.25rem;
-    width: 10.5rem;
-    height: 10.5rem;
-    border: 1.75rem solid #e9e9e9;
-    border-radius: 50%;
-    transition: transform 0.5s ease-in-out, border-color 0.5s ease-in-out;
-    animation: rotation 0.5s ease-in-out;
-}
-
-@keyframes rotation {
-    from {
-        transform: rotateZ(0);
-    }
+.ns_wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    span {
+        margin-top: 0.5rem;
+        font-weight: 500;
+        line-height: 1.25rem;
+        text-align: center;
+        color: #A1A4B0;
+    }
+}
+
+.ns_gauge_and_hand_wrapper {
+    position: relative;
+    height: 5.5rem;
+    width: 11rem;
+
+    svg {
+        position: absolute;
+        bottom: -2px;
+        left: 18px;
+        transform-origin: 70px 2px;
+        transition: transform 0.5s ease-in-out;
+        animation: rotation 0.5s ease-in-out;
+    }
+}
+
+.ns_gauge_wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.ns_gauge_progress_wrapper {
+    position: absolute;
+    width: 100%;
+    height: 11rem;
+    transform: rotateZ(45deg);
+}
+
+.ns_gauge_progress {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 2.25rem solid #e9e9e9;
+}
+
+.ns_gauge_progress_bar {
+    position: absolute;
+    top: 0.25rem;
+    left: 0.25rem;
+    width: 10.5rem;
+    height: 10.5rem;
+    border: 1.75rem solid #e9e9e9;
+    border-radius: 50%;
+    transition: transform 0.5s ease-in-out, border-color 0.5s ease-in-out;
+    animation: rotation 0.5s ease-in-out;
+}
+
+@keyframes rotation {
+    from {
+        transform: rotateZ(0);
+    }
 }

package/src/components/NSGauge.tsx

@@ -1,53 +1,53 @@
-import Styles from "./NSGauge.module.css";
-
-export interface NSGaugeProps
-{
-    total: number;
-    current: number;
-    showPercent: boolean;
-    colors: NSGaugeColorProps;
-}
-export interface NSGaugeColorProps
-{
-    low: string;
-    medium: string;
-    high: string;
-}
-
-export function NSGauge(props: NSGaugeProps)
-{
-    const progressPercent = Math.max(Math.min((props.current * 100) / props.total, 100), 0);
-    const progressDeg = Math.round(progressPercent) * 1.8;
-    const color = progressPercent <= 25 ? props.colors.low : progressPercent >= 75 ? props.colors.high : props.colors.medium;
-
-    return (
-        <div className={Styles.ns_wrapper}>
-            <div className={Styles.ns_gauge_and_hand_wrapper}>
-                <div className={Styles.ns_gauge_wrapper}>
-                    <div className={Styles.ns_gauge_progress_wrapper}>
-                        <div className={Styles.ns_gauge_progress} />
-                        <div
-                            className={`${Styles.ns_gauge_progress_bar}`}
-                            style={{
-                                transform: `rotateZ(${progressDeg}deg)`,
-                                borderRightColor: color,
-                                borderBottomColor: color
-                            }}
-                        />
-                    </div>
-                </div>
-                <svg
-                    width="72"
-                    height="4"
-                    viewBox="0 0 72 4"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    style={{ transform: `rotateZ(${progressDeg}deg)` }}
-                >
-                    <path d="M70 0L0 2L70 4L72 2L70 0Z" fill="black" fillOpacity="0.6" />
-                </svg>
-            </div>
-            {props.showPercent && <span>{Math.round(progressPercent)}%</span>}
-        </div>
-    );
+import Styles from "./NSGauge.module.css";
+
+export interface NSGaugeProps
+{
+    total: number;
+    current: number;
+    showPercent: boolean;
+    colors: NSGaugeColorProps;
+}
+export interface NSGaugeColorProps
+{
+    low: string;
+    medium: string;
+    high: string;
+}
+
+export function NSGauge(props: NSGaugeProps)
+{
+    const progressPercent = Math.max(Math.min((props.current * 100) / props.total, 100), 0);
+    const progressDeg = Math.round(progressPercent) * 1.8;
+    const color = progressPercent <= 25 ? props.colors.low : progressPercent >= 75 ? props.colors.high : props.colors.medium;
+
+    return (
+        <div className={Styles.ns_wrapper}>
+            <div className={Styles.ns_gauge_and_hand_wrapper}>
+                <div className={Styles.ns_gauge_wrapper}>
+                    <div className={Styles.ns_gauge_progress_wrapper}>
+                        <div className={Styles.ns_gauge_progress} />
+                        <div
+                            className={`${Styles.ns_gauge_progress_bar}`}
+                            style={{
+                                transform: `rotateZ(${progressDeg}deg)`,
+                                borderRightColor: color,
+                                borderBottomColor: color
+                            }}
+                        />
+                    </div>
+                </div>
+                <svg
+                    width="72"
+                    height="4"
+                    viewBox="0 0 72 4"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    style={{ transform: `rotateZ(${progressDeg}deg)` }}
+                >
+                    <path d="M70 0L0 2L70 4L72 2L70 0Z" fill="black" fillOpacity="0.6" />
+                </svg>
+            </div>
+            {props.showPercent && <span>{Math.round(progressPercent)}%</span>}
+        </div>
+    );
 }

package/src/components/NSGaugeDate.module.css

@@ -1,58 +1,58 @@
-.ns_gauge_link {
-    text-decoration: none;
-}
-
-.ns_gauge_link>.ns_gauge_wrapper {
-    height: 100%;
-}
-
-.ns_gauge_wrapper {
-    width: 20rem;
-    margin: 0;
-    padding: 0;
-}
-
-.ns_gauge_header {
-    width: 100%;
-    height: 100%;
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    background-color: #e9e9e9;
-    color: #141b5c;
-
-    .ns_gauge_header_titles {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-    }
-
-    .title {
-        font-size: 1.25rem;
-        line-height: 1.25rem;
-        font-weight: 700;
-    }
-}
-
-.ns_gauge_body {
-    width: 100%;
-    min-height: 13rem;
-    margin-top: auto;
-    padding: 0 1rem 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.ns_gauge_dates {
-    display: flex;
-    gap: 6.5rem;
-    margin-top: 0.5rem;
-
-    span {
-        font-weight: 500;
-        line-height: 1.25rem;
-        color: #a1a4b0;
-    }
+.ns_gauge_link {
+    text-decoration: none;
+}
+
+.ns_gauge_link>.ns_gauge_wrapper {
+    height: 100%;
+}
+
+.ns_gauge_wrapper {
+    width: 20rem;
+    margin: 0;
+    padding: 0;
+}
+
+.ns_gauge_header {
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background-color: #e9e9e9;
+    color: #141b5c;
+
+    .ns_gauge_header_titles {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .title {
+        font-size: 1.25rem;
+        line-height: 1.25rem;
+        font-weight: 700;
+    }
+}
+
+.ns_gauge_body {
+    width: 100%;
+    min-height: 13rem;
+    margin-top: auto;
+    padding: 0 1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ns_gauge_dates {
+    display: flex;
+    gap: 6.5rem;
+    margin-top: 0.5rem;
+
+    span {
+        font-weight: 500;
+        line-height: 1.25rem;
+        color: #a1a4b0;
+    }
 }

package/src/components/NSGaugeDate.tsx

@@ -1,126 +1,126 @@
-import { URLOperation } from "namirasoft-core";
-import { useEffect, useState } from "react";
-import { IBaseComponentProps, NSDownTimer, NSLoading, NSNoData, NSPanel, NSSpace, NSSpaceSizeType } from "../main";
-import { ILinkProps } from "../props/ILinkProps";
-import { NSGauge, NSGaugeColorProps } from "./NSGauge";
-import Styles from "./NSGaugeDate.module.css";
-
-export interface NSGaugeDateProps extends IBaseComponentProps
-{
-    headline?: string;
-    icon?: string;
-    title: string;
-    from: Date;
-    to: Date;
-    colors: NSGaugeColorProps;
-    link?: ILinkProps;
-    loading?: boolean;
-    noData?: boolean | string;
-}
-
-interface NSGaugeDateState
-{
-    current: number;
-}
-
-const getFormattedDate = (date: Date) =>
-{
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-
-    return `${year}-${month}-${day}`;
-};
-
-export function NSGaugeDate(props: NSGaugeDateProps)
-{
-    let [state, setState] = useState<NSGaugeDateState>({ current: new Date().getTime() - props.from.getTime() });
-
-    useEffect(() =>
-    {
-        const interval = setInterval(() =>
-        {
-            setState({ current: new Date().getTime() - props.from.getTime() });
-        }, 1000);
-
-        return () =>
-        {
-            clearInterval(interval);
-        };
-        // eslint-disable-next-line
-    }, [props.to]);
-
-    let total = props.to.getTime() - props.from.getTime();
-
-    let render_gauge_body = () =>
-    {
-        if (props.loading)
-        {
-            return <NSLoading hideTitle style={{ margin: "auto 0", padding: 0 }} />;
-        }
-
-        if (props.noData)
-        {
-            return (
-                <NSNoData
-                    lable={props.noData !== true ? props.noData : "No Data"}
-                    style={{ marginTop: "1.5rem" }}
-                />
-            );
-        }
-
-        return (
-            <>
-                <NSGauge total={total} current={state.current} showPercent={false} colors={props.colors} />
-                <div className={Styles.ns_gauge_dates}>
-                    <span>{getFormattedDate(props.from)}</span>
-                    <span>{getFormattedDate(props.to)}</span>
-                </div>
-                <NSSpace
-                    size={NSSpaceSizeType.MINI}
-                />
-                <NSDownTimer
-                    text="Remained"
-                    date={props.to}
-                />
-            </>
-        );
-    };
-
-    let content = (
-        <NSPanel classList={[Styles.ns_gauge_wrapper]}>
-            <div className={Styles.ns_gauge_header}>
-                {
-                    props.icon &&
-                    <img width="40" height="40" src={props.icon} alt="gauge logo" />
-                }
-                <div className={Styles.ns_gauge_header_titles}>
-                    {
-                        props.headline &&
-                        <span style={{ lineHeight: "1rem" }}>{props.headline}</span>
-                    }
-                    <span className={Styles.title}>{props.title}</span>
-                </div>
-            </div>
-            <div className={Styles.ns_gauge_body}>
-                {render_gauge_body()}
-            </div>
-        </NSPanel>
-    );
-
-    if (props.link && !URLOperation.isEqual(props.link.href, window.location.href))
-    {
-        content = (
-            <a
-                href={props.link.href}
-                target={props.link.target}
-                rel="noreferrer"
-                className={Styles.ns_gauge_link}
-            >
-                {content}
-            </a>
-        );
-    }
-
-    return content;
+import { URLOperation } from "namirasoft-core";
+import { useEffect, useState } from "react";
+import { IBaseComponentProps, NSDownTimer, NSLoading, NSNoData, NSPanel, NSSpace, NSSpaceSizeType } from "../main";
+import { ILinkProps } from "../props/ILinkProps";
+import { NSGauge, NSGaugeColorProps } from "./NSGauge";
+import Styles from "./NSGaugeDate.module.css";
+
+export interface NSGaugeDateProps extends IBaseComponentProps
+{
+    headline?: string;
+    icon?: string;
+    title: string;
+    from: Date;
+    to: Date;
+    colors: NSGaugeColorProps;
+    link?: ILinkProps;
+    loading?: boolean;
+    noData?: boolean | string;
+}
+
+interface NSGaugeDateState
+{
+    current: number;
+}
+
+const getFormattedDate = (date: Date) =>
+{
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+
+    return `${year}-${month}-${day}`;
+};
+
+export function NSGaugeDate(props: NSGaugeDateProps)
+{
+    let [state, setState] = useState<NSGaugeDateState>({ current: new Date().getTime() - props.from.getTime() });
+
+    useEffect(() =>
+    {
+        const interval = setInterval(() =>
+        {
+            setState({ current: new Date().getTime() - props.from.getTime() });
+        }, 1000);
+
+        return () =>
+        {
+            clearInterval(interval);
+        };
+        // eslint-disable-next-line
+    }, [props.to]);
+
+    let total = props.to.getTime() - props.from.getTime();
+
+    let render_gauge_body = () =>
+    {
+        if (props.loading)
+        {
+            return <NSLoading hideTitle style={{ margin: "auto 0", padding: 0 }} />;
+        }
+
+        if (props.noData)
+        {
+            return (
+                <NSNoData
+                    lable={props.noData !== true ? props.noData : "No Data"}
+                    style={{ marginTop: "1.5rem" }}
+                />
+            );
+        }
+
+        return (
+            <>
+                <NSGauge total={total} current={state.current} showPercent={false} colors={props.colors} />
+                <div className={Styles.ns_gauge_dates}>
+                    <span>{getFormattedDate(props.from)}</span>
+                    <span>{getFormattedDate(props.to)}</span>
+                </div>
+                <NSSpace
+                    size={NSSpaceSizeType.MINI}
+                />
+                <NSDownTimer
+                    text="Remained"
+                    date={props.to}
+                />
+            </>
+        );
+    };
+
+    let content = (
+        <NSPanel classList={[Styles.ns_gauge_wrapper]}>
+            <div className={Styles.ns_gauge_header}>
+                {
+                    props.icon &&
+                    <img width="40" height="40" src={props.icon} alt="gauge logo" />
+                }
+                <div className={Styles.ns_gauge_header_titles}>
+                    {
+                        props.headline &&
+                        <span style={{ lineHeight: "1rem" }}>{props.headline}</span>
+                    }
+                    <span className={Styles.title}>{props.title}</span>
+                </div>
+            </div>
+            <div className={Styles.ns_gauge_body}>
+                {render_gauge_body()}
+            </div>
+        </NSPanel>
+    );
+
+    if (props.link && !URLOperation.isEqual(props.link.href, window.location.href))
+    {
+        content = (
+            <a
+                href={props.link.href}
+                target={props.link.target}
+                rel="noreferrer"
+                className={Styles.ns_gauge_link}
+            >
+                {content}
+            </a>
+        );
+    }
+
+    return content;
 }