StatsHouse UI: full legend for dashboard

VKCOM · Nov 30, 2022 · 12ec540 · 12ec540
1 parent ba3d05c
commit 12ec540
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 15 deletions.
diff --git a/statshouse-ui/.editorconfig b/statshouse-ui/.editorconfig
@@ -0,0 +1,9 @@
+
+[**.{js,ts,jsx,tsx,css,scss}]
+indent_style = space
+indent_size = 2
+
+# uPlot lib no change
+[src/view/lib/uPlot/*.{js,ts,css}]
+indent_style = tab
+indent_size = 4
diff --git a/statshouse-ui/package-lock.json b/statshouse-ui/package-lock.json
diff --git a/statshouse-ui/src/components/Dashboard/Dashboard.tsx b/statshouse-ui/src/components/Dashboard/Dashboard.tsx
@@ -239,7 +239,7 @@ export const Dashboard: React.FC<DashboardProps> = ({ embed = false, yAxisSize =
                   <div
                     key={value.indexPlot}
                     className={cn(
-                      'col-6 p-1',
+                      'plot-item col-6 p-1',
                       select === value.indexPlot && 'opacity-50',
                       dashboardLayoutEdit && css.cursorMove
                     )}

diff --git a/statshouse-ui/src/components/Plot/PlotHeader.tsx b/statshouse-ui/src/components/Plot/PlotHeader.tsx
@@ -5,7 +5,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import React, { Dispatch, memo, SetStateAction, useMemo } from 'react';
-import { metricMeta, querySelector, whatToWhatDesc } from '../../view/api';
+import { formatTagValue, metricMeta, querySelector, whatToWhatDesc } from '../../view/api';
 import { PlotNavigate } from './PlotNavigate';
 import { SetTimeRangeValue } from '../../common/TimeRange';
 import { lockRange } from '../../view/url';
@@ -48,8 +48,12 @@ export const _PlotHeader: React.FC<PlotHeaderProps> = ({
       (meta.tags || [])
         .map((t, index) => ({
           title: t.description,
-          in: (sel.filterIn[`key${index}`] || []).join(', '),
-          notIn: (sel.filterNotIn[`key${index}`] || []).join(', '),
+          in: (sel.filterIn[`key${index}`] || [])
+            .map((value) => formatTagValue(value, t?.value_comments?.[value], t.raw, t.raw_kind))
+            .join(', '),
+          notIn: (sel.filterNotIn[`key${index}`] || [])
+            .map((value) => formatTagValue(value, t?.value_comments?.[value], t.raw, t.raw_kind))
+            .join(', '),
         }))
         .filter((f, index) => (f.in || f.notIn) && !syncTag.some((group) => group[indexPlot] === index)),
     [indexPlot, meta.tags, sel.filterIn, sel.filterNotIn, syncTag]
@@ -58,8 +62,12 @@ export const _PlotHeader: React.FC<PlotHeaderProps> = ({
     const sTags = (meta.tags || [])
       .map((t, index) => ({
         title: t.description,
-        in: (sel.filterIn[`key${index}`] || []).join(', '),
-        notIn: (sel.filterNotIn[`key${index}`] || []).join(', '),
+        in: (sel.filterIn[`key${index}`] || [])
+          .map((value) => formatTagValue(value, t?.value_comments?.[value], t.raw, t.raw_kind))
+          .join(', '),
+        notIn: (sel.filterNotIn[`key${index}`] || [])
+          .map((value) => formatTagValue(value, t?.value_comments?.[value], t.raw, t.raw_kind))
+          .join(', '),
       }))
       .filter((f, index) => (f.in || f.notIn) && syncTag.some((group) => group[indexPlot] === index));
     return {

diff --git a/statshouse-ui/src/index.scss b/statshouse-ui/src/index.scss
@@ -103,11 +103,13 @@ html {
 }
 
 .plot-compact {
-  max-width: calc(min(100vw, 100vh * 1.61803398875 /* golden ratio */
-  ));
+  max-width: calc(min(100vw, 100vh * 1.61803398875 /* golden ratio */));
 
-  .u-legend {
+  .plot-legend {
     padding-left: 54px !important; // must be synced with yAxisSize
+  }
+
+  .u-legend {
     text-align: right !important;
     font-size: 12px;
 
@@ -134,16 +136,56 @@ html {
   }
 }
 
-.plot-compact.plot-dash {
+.plot-compact.plot-dash .plot-legend {
+  height: 2em;
+}
+
+.plot-item:hover {
+  z-index: 1000;
+
+  .plot-compact.plot-dash .plot-legend .u-legend {
+    padding-left: 4px;
+    background-color: rgb(255, 255, 255);
+    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.plot-compact:not(.plot-dash),
+.plot-compact.plot-dash:not(:hover) {
+  .plot-legend {
+    overflow: hidden;
+  }
+
   tr {
     margin-right: 4px;
     max-width: calc(100% - 4px);
   }
+
+  .u-value {
+    display: none;
+  }
+
+  th::after {
+    display: none;
+    content: '';
+  }
+
+  tr:first-child {
+    display: none;
+  }
 }
 
-.plot-full .u-legend {
+.plot-full .plot-legend {
   padding-top: 16px !important;
+}
+
+.plot-full .plot-legend,
+.plot-compact.plot-dash:hover .plot-legend {
   padding-left: 54px !important; // must be synced with yAxisSize
+}
+
+.plot-full .u-legend,
+.plot-compact.plot-dash:hover .u-legend {
   text-align: left !important;
   column-width: calc(var(--legend-name-width) + var(--legend-value-width) + 16px) !important;
   column-count: auto !important;
@@ -287,7 +329,6 @@ input.form-control-safari-fix::-webkit-datetime-edit-meridiem-field {
   z-index: 10;
 }
 
-
 @keyframes show-delay {
   from {
     opacity: 0;

diff --git a/statshouse-ui/src/view/PlotView.tsx b/statshouse-ui/src/view/PlotView.tsx
@@ -37,6 +37,7 @@ import { xAxisValues, xAxisValuesCompact } from '../common/axisValues';
 import { useRefState } from '../hooks';
 import cn from 'classnames';
 
+const unFocusAlfa = 1.1;
 const rightPad = 16;
 const font =
   '12px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif'; // keep in sync with $font-family-sans-serif
@@ -196,7 +197,7 @@ const PlotView = memo(function PlotView_(props: {
         dataIdx: dataIdxNearest,
       },
       focus: {
-        alpha: 1.1, // avoid redrawing unfocused series
+        alpha: unFocusAlfa, // avoid redrawing unfocused series
       },
       axes: [
         {
@@ -234,7 +235,7 @@ const PlotView = memo(function PlotView_(props: {
         },
       ],
       legend: {
-        live: !compact,
+        live: true, //!compact,
         markers: {
           width: devicePixelRatio > 1 ? 1.5 : 1,
         },