@mtdt/observeops-ds-spec 0.1.0

package/components/registry/data-viz-tooltips.json

@@ -0,0 +1,409 @@
+{
+  "name": "data-viz-tooltips",
+  "display": "Data-Viz Tooltips",
+  "tier": "molecule",
+  "family": "Popover & Tooltip",
+  "status": "stable",
+  "summary": "The product's chart & widget hover tooltips — a distinct family from MTooltip, owned by the chart layer (Highcharts TooltipBuilder, graph canvases, widget Vue components), not DS components. ~28 reference reproductions cover every mechanism.",
+  "variants": [
+    {
+      "name": "bar-series",
+      "what": "Highcharts series",
+      "usage": ""
+    },
+    {
+      "name": "donut-pie",
+      "what": "donut/pie",
+      "usage": ""
+    },
+    {
+      "name": "bubble",
+      "what": "packed-bubble",
+      "usage": ""
+    },
+    {
+      "name": "map-geo",
+      "what": "geo map",
+      "usage": ""
+    },
+    {
+      "name": "radar",
+      "what": "radar",
+      "usage": ""
+    },
+    {
+      "name": "timeline-xrange",
+      "what": "SLO timeline",
+      "usage": ""
+    },
+    {
+      "name": "gauge",
+      "what": "gauge",
+      "usage": ""
+    },
+    {
+      "name": "sankey",
+      "what": "sankey",
+      "usage": ""
+    },
+    {
+      "name": "treemap",
+      "what": "treemap",
+      "usage": ""
+    },
+    {
+      "name": "scatter",
+      "what": "scatter",
+      "usage": ""
+    },
+    {
+      "name": "anomaly-band",
+      "what": "actual vs expected",
+      "usage": ""
+    },
+    {
+      "name": "rum-waterfall",
+      "what": "RUM resource timing",
+      "usage": ""
+    },
+    {
+      "name": "geo-marker",
+      "what": "RUM apdex marker",
+      "usage": ""
+    },
+    {
+      "name": "log-pattern",
+      "what": "log distribution",
+      "usage": ""
+    },
+    {
+      "name": "sparkline",
+      "what": "inline mini-trend",
+      "usage": ""
+    },
+    {
+      "name": "heatmap",
+      "what": "heatmap cell",
+      "usage": ""
+    },
+    {
+      "name": "availability-segment",
+      "what": "segmented cell",
+      "usage": ""
+    },
+    {
+      "name": "availability-bar",
+      "what": "Up/Down bar",
+      "usage": ""
+    },
+    {
+      "name": "live-graph-node",
+      "what": "topology node",
+      "usage": ""
+    },
+    {
+      "name": "live-graph-edge",
+      "what": "link/interface edge",
+      "usage": ""
+    },
+    {
+      "name": "apm-service-node",
+      "what": "APM service map node",
+      "usage": ""
+    },
+    {
+      "name": "sdn-tunnel-edge",
+      "what": "SD-WAN tunnel",
+      "usage": ""
+    },
+    {
+      "name": "cisco-aci-endpoint",
+      "what": "ACI endpoint",
+      "usage": ""
+    },
+    {
+      "name": "cisco-aci-link",
+      "what": "ACI fabric link",
+      "usage": ""
+    },
+    {
+      "name": "network-interface-edge",
+      "what": "interface edge",
+      "usage": ""
+    },
+    {
+      "name": "netroute-node",
+      "what": "netroute hop",
+      "usage": ""
+    },
+    {
+      "name": "netroute-edge",
+      "what": "netroute transit",
+      "usage": ""
+    },
+    {
+      "name": "flame-graph-span",
+      "what": "trace flame span",
+      "usage": ""
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "visible",
+      "what": "on hover (canvas/SVG)"
+    }
+  ],
+  "renders": "REFERENCE REPRODUCTIONS — styling is owned by Highcharts / vis-network / d3 / widget components, not a DS Vue component. Built with real tokens (--chart-tooltip-background, --topology-graph-tooltip-bg, --severity-*).",
+  "mechanisms": {
+    "HighchartsTooltipBuilder": {
+      "source": "src/components/chart/options/tooltip-builder.js + .hc-tooltip-bg / .highcharts-tooltip-container-class",
+      "surface": "--chart-tooltip-background + blur(15px)",
+      "tooltips": [
+        "bar/series",
+        "donut/pie",
+        "bubble",
+        "map/geo",
+        "radar",
+        "timeline/x-range (SLO)",
+        "gauge",
+        "sankey",
+        "treemap",
+        "scatter",
+        "anomaly/forecast band",
+        "RUM resource waterfall",
+        "geo map marker (RUM apdex)",
+        "log pattern distribution",
+        "sparkline"
+      ]
+    },
+    "VueWidget": {
+      "source": "heatmap-tooltip.vue + segmented-cell + availability bar",
+      "tooltips": [
+        "heatmap",
+        "alert/availability segment",
+        "availability bar segment"
+      ]
+    },
+    "GraphCanvas": {
+      "source": "vis-network / d3 graph canvases",
+      "surface": "--topology-graph-tooltip-bg (fixed-dark both themes), --tooltip-text-color",
+      "tooltips": [
+        "live graph node (topology/netroute)",
+        "live graph edge",
+        "APM service-map node",
+        "SDN tunnel edge",
+        "Cisco ACI endpoint",
+        "Cisco ACI fabric link",
+        "network interface edge",
+        "netroute hop node",
+        "netroute edge (transit)"
+      ]
+    },
+    "FlameGraph": {
+      "source": "d3 flame graph (APM / RUM traces)",
+      "surface": "hc-tooltip-bg",
+      "tooltips": [
+        "flame graph span"
+      ]
+    }
+  },
+  "whichTooltipWhere": [
+    {
+      "tooltip": "Bar / series",
+      "where": "severity/metric stacked columns & line charts",
+      "renderer": "Highcharts TooltipBuilder"
+    },
+    {
+      "tooltip": "Donut / pie",
+      "where": "status/distribution donuts",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Bubble",
+      "where": "grouped-count packed-bubble widgets",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Map / geo",
+      "where": "geo-distribution maps",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Radar",
+      "where": "multi-axis comparison",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Timeline / x-range",
+      "where": "SLO / availability timelines",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Gauge",
+      "where": "KPI gauges / circular progress",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Sankey",
+      "where": "flow / traffic sankey",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Treemap",
+      "where": "capacity / hierarchy treemaps",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Scatter",
+      "where": "correlation scatter (x/y)",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Anomaly / forecast band",
+      "where": "anomaly & forecast charts (actual vs expected)",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "RUM resource waterfall",
+      "where": "RUM page resource timing",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Geo map marker",
+      "where": "RUM geo apdex map",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Log pattern distribution",
+      "where": "log pattern value distribution",
+      "renderer": "Highcharts"
+    },
+    {
+      "tooltip": "Sparkline",
+      "where": "inline mini-trends (grid cells, KPIs)",
+      "renderer": "Highcharts (mini)"
+    },
+    {
+      "tooltip": "Heatmap",
+      "where": "heatmap widgets",
+      "renderer": "heatmap-tooltip.vue"
+    },
+    {
+      "tooltip": "Alert / availability segment",
+      "where": "segmented availability cells",
+      "renderer": "Vue (segmented-cell)"
+    },
+    {
+      "tooltip": "Availability bar segment",
+      "where": "Up/Down % bars",
+      "renderer": "Vue"
+    },
+    {
+      "tooltip": "Live graph node",
+      "where": "topology / netroute maps",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "Live graph edge",
+      "where": "link / interface edges",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "APM service-map node",
+      "where": "APM service map",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "SDN tunnel edge",
+      "where": "SD-WAN tunnels",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "Cisco ACI endpoint",
+      "where": "ACI endpoint edges",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "Cisco ACI fabric link",
+      "where": "ACI fabric links",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "Network interface edge",
+      "where": "interface topology",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "Netroute hop node",
+      "where": "netroute path hops",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "Netroute edge",
+      "where": "netroute transit edges",
+      "renderer": "graph canvas"
+    },
+    {
+      "tooltip": "Flame graph span",
+      "where": "APM / RUM trace flame graphs",
+      "renderer": "d3 flame graph"
+    }
+  ],
+  "knownIssues": {
+    "F1": {
+      "severity": "Low",
+      "issue": "Owned by the chart layer, not DS components -> catalogued as reference reproductions (real tokens)."
+    },
+    "F2": {
+      "severity": "Low",
+      "a11y": true,
+      "issue": "Hover-only, canvas/SVG-rendered -> not keyboard-reachable / not in the a11y tree; ensure data also exists in a table/legend."
+    }
+  },
+  "tokensUsed": [
+    "--chart-tooltip-background",
+    "--topology-graph-tooltip-bg",
+    "--tooltip-text-color",
+    "--severity-down",
+    "--severity-unreachable",
+    "--severity-critical",
+    "--severity-major",
+    "--severity-warning",
+    "--severity-up",
+    "--page-text-color",
+    "--border-color"
+  ],
+  "storybook": "Molecules/Data-Viz Tooltips",
+  "related": [
+    "tooltip",
+    "table"
+  ],
+  "figma": {
+    "status": "todo"
+  },
+  "decisionFlow": [
+    "Hover detail on a CHART/graph/canvas mark? -> data-viz tooltip (owned by the chart layer, not MTooltip).",
+    "A UI element/text hint? -> MTooltip (Molecules/Tooltip).",
+    "Which one: match the chart/widget type in whichTooltipWhere."
+  ],
+  "do": [
+    "Use the chart layer's TooltipBuilder / widget tooltip; don't build a DS component.",
+    "Convey severity by token + label, not colour alone.",
+    "Provide the same data in a table/legend (a11y F2)."
+  ],
+  "dont": [
+    "Don't reach for MTooltip on a chart mark.",
+    "Don't rely on hover-only data for accessibility.",
+    "Don't hardcode tooltip colours — use --chart-tooltip-background / --severity-*."
+  ],
+  "a11y": {
+    "summary": "Hover-only over SVG/canvas marks — not keyboard-reachable, not in the a11y tree (canvas tooltips). Colour isn't the only signal (swatch + label).",
+    "issues": [
+      "Not keyboard-reachable / not in the a11y tree.",
+      "Verify translucent tooltip-bg contrast."
+    ],
+    "doc": "Molecules/Data-Viz Tooltips/Accessibility",
+    "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
+  }
+}