From bc8dbaf113d9fc6df73765d10ef72962d21b7774 Mon Sep 17 00:00:00 2001 From: ts_salikhov Date: Mon, 5 Sep 2022 17:17:39 +0400 Subject: [PATCH 1/6] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=8E=D1=89=D0=B5?= =?UTF-8?q?=D0=B9=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B5=20?= =?UTF-8?q?=D0=A2=D0=B5=D0=BB=D0=B5=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D1=8F=20?= =?UTF-8?q?-=20=D0=9C=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD?= =?UTF-8?q?=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/monitoring/D3HorizontalCursor.tsx | 45 +++++++++++++++++-- src/pages/Telemetry/TelemetryView/index.jsx | 2 +- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx index af75ff0..2440e63 100644 --- a/src/components/d3/monitoring/D3HorizontalCursor.tsx +++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx @@ -30,6 +30,25 @@ export type D3HorizontalCursorProps = D3HorizontalCursorSettings } +enum FontSize { + inherit = 'inherit', + large = '10px', + medium = '8px', + small = '7px', +} + +enum TooltipWidth { + large = 190, + medium = 160, + small = 140, +} + +enum InnerWidth { + large = 1800, + medium = 1600, + small = 1400, +} + const defaultLineStyle: SVGProps = { stroke: 'black', } @@ -85,6 +104,8 @@ const _D3HorizontalCursor = ({ const [tooltipY, setTooltipY] = useState(0) const [fixed, setFixed] = useState(false) const [lineY, setLineY] = useState(0) + const [tooltipWidth, setTooltipWidth] = useState(width) + const [fontSize, setFontSize] = useState(FontSize.inherit) const lineStyle = usePartialProps(_lineStyle, defaultLineStyle) @@ -170,6 +191,24 @@ const _D3HorizontalCursor = ({ setTooltipBodies(bodies) }, [groups, data, yAxis, lineY, fixed, mouseState.visible]) + useEffect(() => { + const innerWidth = window.innerWidth + + if (innerWidth < InnerWidth.small) { + setTooltipWidth(TooltipWidth.small) + setFontSize(FontSize.small) + } else if (innerWidth < InnerWidth.medium) { + setTooltipWidth(TooltipWidth.medium) + setFontSize(FontSize.medium) + } else if (innerWidth < InnerWidth.large) { + setTooltipWidth(TooltipWidth.large) + setFontSize(FontSize.large) + } else { + setTooltipWidth(width) + setFontSize(FontSize.inherit) + } + }, [window.innerWidth]) + return ( ({ {groups.map((_, i) => ( ({
-
+
{tooltipBodies[i]}
diff --git a/src/pages/Telemetry/TelemetryView/index.jsx b/src/pages/Telemetry/TelemetryView/index.jsx index 884b23c..bb9b144 100755 --- a/src/pages/Telemetry/TelemetryView/index.jsx +++ b/src/pages/Telemetry/TelemetryView/index.jsx @@ -295,7 +295,7 @@ const TelemetryView = memo(() => { plugins={{ menu: { enabled: false }, cursor: { - width: 220, + width: 230, render: cursorRender, }, }} From 2a490243d71441878f0cc949a5ba883d39f95c55 Mon Sep 17 00:00:00 2001 From: ts_salikhov Date: Tue, 6 Sep 2022 10:34:52 +0400 Subject: [PATCH 2/6] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=8E=D1=89=D0=B5?= =?UTF-8?q?=D0=B9=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B5=20?= =?UTF-8?q?=D0=A2=D0=B5=D0=BB=D0=B5=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D1=8F=20?= =?UTF-8?q?-=20=D0=9C=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD?= =?UTF-8?q?=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/monitoring/D3HorizontalCursor.tsx | 44 ++----------------- src/styles/d3.less | 31 +++++++++++++ 2 files changed, 34 insertions(+), 41 deletions(-) diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx index 2440e63..6ab096c 100644 --- a/src/components/d3/monitoring/D3HorizontalCursor.tsx +++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx @@ -30,24 +30,6 @@ export type D3HorizontalCursorProps = D3HorizontalCursorSettings } -enum FontSize { - inherit = 'inherit', - large = '10px', - medium = '8px', - small = '7px', -} - -enum TooltipWidth { - large = 190, - medium = 160, - small = 140, -} - -enum InnerWidth { - large = 1800, - medium = 1600, - small = 1400, -} const defaultLineStyle: SVGProps = { stroke: 'black', @@ -104,8 +86,6 @@ const _D3HorizontalCursor = ({ const [tooltipY, setTooltipY] = useState(0) const [fixed, setFixed] = useState(false) const [lineY, setLineY] = useState(0) - const [tooltipWidth, setTooltipWidth] = useState(width) - const [fontSize, setFontSize] = useState(FontSize.inherit) const lineStyle = usePartialProps(_lineStyle, defaultLineStyle) @@ -191,24 +171,6 @@ const _D3HorizontalCursor = ({ setTooltipBodies(bodies) }, [groups, data, yAxis, lineY, fixed, mouseState.visible]) - useEffect(() => { - const innerWidth = window.innerWidth - - if (innerWidth < InnerWidth.small) { - setTooltipWidth(TooltipWidth.small) - setFontSize(FontSize.small) - } else if (innerWidth < InnerWidth.medium) { - setTooltipWidth(TooltipWidth.medium) - setFontSize(FontSize.medium) - } else if (innerWidth < InnerWidth.large) { - setTooltipWidth(TooltipWidth.large) - setFontSize(FontSize.large) - } else { - setTooltipWidth(width) - setFontSize(FontSize.inherit) - } - }, [window.innerWidth]) - return ( ({ {groups.map((_, i) => ( ({
-
+
{tooltipBodies[i]}
diff --git a/src/styles/d3.less b/src/styles/d3.less index 6ec1bb0..3bc9dc6 100644 --- a/src/styles/d3.less +++ b/src/styles/d3.less @@ -9,6 +9,10 @@ width: 100%; height: 100%; + + left: 0; + right: 0; + margin: 0 auto; font-size: 13px; color: @color; @@ -110,3 +114,30 @@ height: 100%; } } + +@media (max-width: 1800px) { + .asb-d3-chart { + & .tooltip { + width: 190px; + font-size: 10px; + } + } +} + +@media (max-width: 1600px) { + .asb-d3-chart { + & .tooltip { + width: 160px; + font-size: 8px; + } + } +} + +@media (max-width: 1400px) { + .asb-d3-chart { + & .tooltip { + width: 140px; + font-size: 7px; + } + } +} \ No newline at end of file From cc1eb706ea5f408e746304ebe1edd7404c055c34 Mon Sep 17 00:00:00 2001 From: ts_salikhov Date: Tue, 6 Sep 2022 10:37:40 +0400 Subject: [PATCH 3/6] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=8E=D1=89=D0=B5?= =?UTF-8?q?=D0=B9=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B5=20?= =?UTF-8?q?=D0=A2=D0=B5=D0=BB=D0=B5=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D1=8F=20?= =?UTF-8?q?-=20=D0=9C=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD?= =?UTF-8?q?=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/d3/monitoring/D3HorizontalCursor.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx index 6ab096c..af75ff0 100644 --- a/src/components/d3/monitoring/D3HorizontalCursor.tsx +++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx @@ -30,7 +30,6 @@ export type D3HorizontalCursorProps = D3HorizontalCursorSettings } - const defaultLineStyle: SVGProps = { stroke: 'black', } From 0e6a0888d8ecfba98b987073b2ffac617c70a02a Mon Sep 17 00:00:00 2001 From: ts_salikhov Date: Tue, 6 Sep 2022 14:53:44 +0400 Subject: [PATCH 4/6] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=8E=D1=89=D0=B5?= =?UTF-8?q?=D0=B9=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B5=20?= =?UTF-8?q?=D0=A2=D0=B5=D0=BB=D0=B5=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D1=8F=20?= =?UTF-8?q?-=20=D0=9C=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD?= =?UTF-8?q?=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/monitoring/D3HorizontalCursor.tsx | 2 +- src/pages/Telemetry/Archive/index.jsx | 2 +- src/styles/d3.less | 58 ++++++++++++------- 3 files changed, 39 insertions(+), 23 deletions(-) diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx index af75ff0..eb1e7e2 100644 --- a/src/components/d3/monitoring/D3HorizontalCursor.tsx +++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx @@ -186,7 +186,7 @@ const _D3HorizontalCursor = ({ pointerEvents={fixed ? 'all' : 'none'} style={{ transition: 'opacity .1s ease-out', userSelect: fixed ? 'auto' : 'none' }} > -
diff --git a/src/pages/Telemetry/Archive/index.jsx b/src/pages/Telemetry/Archive/index.jsx index 4db24f0..4f27bcc 100755 --- a/src/pages/Telemetry/Archive/index.jsx +++ b/src/pages/Telemetry/Archive/index.jsx @@ -255,7 +255,7 @@ const Archive = memo(() => { plugins={{ menu: { enabled: false }, cursor: { - width: 220, + width: 230, render: cursorRender, } }} diff --git a/src/styles/d3.less b/src/styles/d3.less index 3bc9dc6..62ca5c7 100644 --- a/src/styles/d3.less +++ b/src/styles/d3.less @@ -9,10 +9,6 @@ width: 100%; height: 100%; - - left: 0; - right: 0; - margin: 0 auto; font-size: 13px; color: @color; @@ -113,31 +109,51 @@ width: 100%; height: 100%; } + + & .adaptive-tooltip { + left: 0; + right: 0; + margin: 0 auto; + } } -@media (max-width: 1800px) { - .asb-d3-chart { - & .tooltip { - width: 190px; - font-size: 10px; - } +@media (max-width: 1830px) { + .asb-d3-chart .adaptive-tooltip { + max-width: 190px; + font-size: 10px; } } @media (max-width: 1600px) { - .asb-d3-chart { - & .tooltip { - width: 160px; - font-size: 8px; - } + .asb-d3-chart .adaptive-tooltip { + max-width: 160px; + font-size: 8px; } } -@media (max-width: 1400px) { - .asb-d3-chart { - & .tooltip { - width: 140px; - font-size: 7px; - } +@media (max-width: 1420px) { + .asb-d3-chart .adaptive-tooltip { + max-width: 140px; + font-size: 7px; + padding: 0; + } +} + +@media (max-width: 1300px) { + .asb-d3-chart .adaptive-tooltip { + max-width: 125px; + } +} + +@media (max-width: 1200px) { + .asb-d3-chart .adaptive-tooltip { + max-width: 105px; + font-size: 6px; + } +} + +@media (max-width: 1100px) { + .asb-d3-chart .adaptive-tooltip { + max-width: 90px; } } \ No newline at end of file From 9d0ddc6f2173098368fec30982bea130385e899b Mon Sep 17 00:00:00 2001 From: ts_salikhov Date: Tue, 6 Sep 2022 18:58:20 +0400 Subject: [PATCH 5/6] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=8E=D1=89=D0=B5?= =?UTF-8?q?=D0=B9=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B5=20?= =?UTF-8?q?=D0=A2=D0=B5=D0=BB=D0=B5=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D1=8F=20?= =?UTF-8?q?-=20=D0=9C=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD?= =?UTF-8?q?=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/monitoring/D3HorizontalCursor.tsx | 20 +++++----- .../d3/monitoring/D3MonitoringCharts.tsx | 1 + src/styles/d3.less | 39 +++++++------------ 3 files changed, 26 insertions(+), 34 deletions(-) diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx index eb1e7e2..afae24c 100644 --- a/src/components/d3/monitoring/D3HorizontalCursor.tsx +++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx @@ -13,7 +13,7 @@ import '@styles/d3.less' type D3GroupRenderFunction = (group: ChartGroup, data: DataType[]) => ReactNode export type D3HorizontalCursorSettings = { - width?: number + spaceBetweenGroups?: number height?: number render?: D3GroupRenderFunction position?: D3TooltipPosition @@ -62,7 +62,7 @@ const makeDefaultRender = (): D3GroupRenderFunction => (gro ) const _D3HorizontalCursor = ({ - width = 220, + spaceBetweenGroups = 30, height = 200, render = makeDefaultRender(), position: _position = 'bottom', @@ -178,19 +178,21 @@ const _D3HorizontalCursor = ({ {groups.map((_, i) => ( -
-
- {tooltipBodies[i]} +
+
+
+ {tooltipBodies[i]} +
diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index a0b939e..078cb64 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx @@ -567,6 +567,7 @@ const _D3MonitoringCharts = >({ yAxis={yAxis} groups={groups} sizes={sizes} + spaceBetweenGroups={spaceBetweenGroups} data={data} height={height} /> diff --git a/src/styles/d3.less b/src/styles/d3.less index 62ca5c7..c009c17 100644 --- a/src/styles/d3.less +++ b/src/styles/d3.less @@ -2,12 +2,17 @@ width: 100%; height: 100%; + & .tooltip-wrapper { + display: flex; + justify-content: center; + } + & .tooltip { @color: white; @bg-color: rgba(0, 0, 0, .75); @arrow-size: 8px; - width: 100%; + max-width: 100%; height: 100%; font-size: 13px; @@ -109,51 +114,35 @@ width: 100%; height: 100%; } - - & .adaptive-tooltip { - left: 0; - right: 0; - margin: 0 auto; - } } -@media (max-width: 1830px) { +@media (max-width: 1800px) { .asb-d3-chart .adaptive-tooltip { - max-width: 190px; - font-size: 10px; + font-size: 11px; } } @media (max-width: 1600px) { .asb-d3-chart .adaptive-tooltip { - max-width: 160px; - font-size: 8px; + font-size: 9px; } } -@media (max-width: 1420px) { +@media (max-width: 1440px) { .asb-d3-chart .adaptive-tooltip { - max-width: 140px; - font-size: 7px; + font-size: 8px; padding: 0; } } -@media (max-width: 1300px) { +@media (max-width: 1310px) { .asb-d3-chart .adaptive-tooltip { - max-width: 125px; + font-size: 7px; } } -@media (max-width: 1200px) { +@media (max-width: 1279px) { .asb-d3-chart .adaptive-tooltip { - max-width: 105px; font-size: 6px; } -} - -@media (max-width: 1100px) { - .asb-d3-chart .adaptive-tooltip { - max-width: 90px; - } } \ No newline at end of file From d792f75861f8dd37e4479ed792618bc4a74d86eb Mon Sep 17 00:00:00 2001 From: ts_salikhov Date: Tue, 6 Sep 2022 19:39:26 +0400 Subject: [PATCH 6/6] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=8E=D1=89=D0=B5?= =?UTF-8?q?=D0=B9=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B5=20?= =?UTF-8?q?=D0=A2=D0=B5=D0=BB=D0=B5=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D1=8F=20?= =?UTF-8?q?-=20=D0=9C=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD?= =?UTF-8?q?=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/d3/monitoring/D3HorizontalCursor.tsx | 3 ++- src/pages/Telemetry/Archive/index.jsx | 1 - src/pages/Telemetry/TelemetryView/index.jsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx index afae24c..70ff1c3 100644 --- a/src/components/d3/monitoring/D3HorizontalCursor.tsx +++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx @@ -13,7 +13,7 @@ import '@styles/d3.less' type D3GroupRenderFunction = (group: ChartGroup, data: DataType[]) => ReactNode export type D3HorizontalCursorSettings = { - spaceBetweenGroups?: number + width?: number height?: number render?: D3GroupRenderFunction position?: D3TooltipPosition @@ -28,6 +28,7 @@ export type D3HorizontalCursorProps = D3HorizontalCursorSettings + spaceBetweenGroups?: number } const defaultLineStyle: SVGProps = { diff --git a/src/pages/Telemetry/Archive/index.jsx b/src/pages/Telemetry/Archive/index.jsx index 4f27bcc..7a0d65e 100755 --- a/src/pages/Telemetry/Archive/index.jsx +++ b/src/pages/Telemetry/Archive/index.jsx @@ -255,7 +255,6 @@ const Archive = memo(() => { plugins={{ menu: { enabled: false }, cursor: { - width: 230, render: cursorRender, } }} diff --git a/src/pages/Telemetry/TelemetryView/index.jsx b/src/pages/Telemetry/TelemetryView/index.jsx index bb9b144..9a03fba 100755 --- a/src/pages/Telemetry/TelemetryView/index.jsx +++ b/src/pages/Telemetry/TelemetryView/index.jsx @@ -295,7 +295,6 @@ const TelemetryView = memo(() => { plugins={{ menu: { enabled: false }, cursor: { - width: 230, render: cursorRender, }, }}