From a2f94efcc797005dcc100c2907bbb61cda96ce03 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sun, 8 May 2022 00:12:31 +0400 Subject: [PATCH] feat: full legend items name on hover --- package-lock.json | 68 +++++++++++++++ package.json | 1 + .../components/HistoryChart/InnerChart.tsx | 1 - .../components/HistoryChart/Legend.tsx | 85 +++++++++++++++++++ .../components/HistoryChart/index.tsx | 25 +----- 5 files changed, 155 insertions(+), 25 deletions(-) create mode 100644 src/web/questions/components/HistoryChart/Legend.tsx diff --git a/package-lock.json b/package-lock.json index 1be62b7..1ae8f10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "2.0.0", "license": "MIT", "dependencies": { + "@floating-ui/react-dom": "^0.7.0", "@graphql-yoga/node": "^2.1.0", "@pothos/core": "^3.5.1", "@pothos/plugin-prisma": "^3.4.0", @@ -1468,6 +1469,32 @@ "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.0.tgz", + "integrity": "sha512-W7+i5Suhhvv97WDTW//KqUA43f/2a4abprM1rWqtLM9lIlJ29tbFI8h232SvqunXon0WmKNEKVjbOsgBhTnbLw==" + }, + "node_modules/@floating-ui/dom": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.0.tgz", + "integrity": "sha512-PS75dnMg4GdWjDFOiOs15cDzYJpukRNHqQn0ugrBlsrpk2n+y8bwZ24XrsdLSL7kxshmxxr2nTNycLnmRIvV7g==", + "dependencies": { + "@floating-ui/core": "^0.7.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.0.tgz", + "integrity": "sha512-mpYGykTqwtBYT+ZTQQ2OfZ6wXJNuUgmqqD9ooCgbMRgvul6InFOTtWYvtujps439hmOFiVPm4PoBkEEn5imidg==", + "dependencies": { + "@floating-ui/dom": "^0.5.0", + "use-isomorphic-layout-effect": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@glennsl/bs-json": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@glennsl%2fbs-json/-/bs-json-5.0.4.tgz", @@ -39293,6 +39320,19 @@ "node": ">= 10.x" } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-subscription": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", @@ -41182,6 +41222,28 @@ "tiny-lru": "7.0.6" } }, + "@floating-ui/core": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.0.tgz", + "integrity": "sha512-W7+i5Suhhvv97WDTW//KqUA43f/2a4abprM1rWqtLM9lIlJ29tbFI8h232SvqunXon0WmKNEKVjbOsgBhTnbLw==" + }, + "@floating-ui/dom": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.0.tgz", + "integrity": "sha512-PS75dnMg4GdWjDFOiOs15cDzYJpukRNHqQn0ugrBlsrpk2n+y8bwZ24XrsdLSL7kxshmxxr2nTNycLnmRIvV7g==", + "requires": { + "@floating-ui/core": "^0.7.0" + } + }, + "@floating-ui/react-dom": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.0.tgz", + "integrity": "sha512-mpYGykTqwtBYT+ZTQQ2OfZ6wXJNuUgmqqD9ooCgbMRgvul6InFOTtWYvtujps439hmOFiVPm4PoBkEEn5imidg==", + "requires": { + "@floating-ui/dom": "^0.5.0", + "use-isomorphic-layout-effect": "^1.1.1" + } + }, "@glennsl/bs-json": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@glennsl%2fbs-json/-/bs-json-5.0.4.tgz", @@ -69331,6 +69393,12 @@ } } }, + "use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "requires": {} + }, "use-subscription": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", diff --git a/package.json b/package.json index f5898ca..07dbc88 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "dbshell": ". .env && psql $DIGITALOCEAN_POSTGRES" }, "dependencies": { + "@floating-ui/react-dom": "^0.7.0", "@graphql-yoga/node": "^2.1.0", "@pothos/core": "^3.5.1", "@pothos/plugin-prisma": "^3.4.0", diff --git a/src/web/questions/components/HistoryChart/InnerChart.tsx b/src/web/questions/components/HistoryChart/InnerChart.tsx index 0b7ac73..09cd2c1 100644 --- a/src/web/questions/components/HistoryChart/InnerChart.tsx +++ b/src/web/questions/components/HistoryChart/InnerChart.tsx @@ -16,7 +16,6 @@ const getVictoryGroup = ({ i: number; highlight?: boolean; }) => { - console.log(i, data, highlight, data.length); return ( void }> = ({ + item, + onHighlight, +}) => { + const { x, y, reference, floating, strategy } = useFloating({ + // placement: "right", + middleware: [shift()], + }); + + const [showTooltip, setShowTooltip] = useState(false); + const textRef = useRef(); + + const onHover = () => { + if (textRef.current.scrollWidth > textRef.current.clientWidth) { + setShowTooltip(true); + } + onHighlight(); + }; + + return ( + <> +
setShowTooltip(false)} + ref={reference} + > + + + +
+ {item.name} +
+
+ {showTooltip + ? (() => { + return ( +
+ {item.name} +
+ ); + })() + : null} + + ); +}; + +export const Legend: React.FC<{ + items: { name: string; color: string }[]; + setHighlight: (i: number | undefined) => void; +}> = ({ items, setHighlight }) => { + return ( +
setHighlight(undefined)}> + {items.map((item, i) => ( + setHighlight(i)} + /> + ))} +
+ ); +}; diff --git a/src/web/questions/components/HistoryChart/index.tsx b/src/web/questions/components/HistoryChart/index.tsx index 3c2365b..a6a847f 100644 --- a/src/web/questions/components/HistoryChart/index.tsx +++ b/src/web/questions/components/HistoryChart/index.tsx @@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react"; import { QuestionWithHistoryFragment } from "../../../fragments.generated"; import { InnerChartPlaceholder } from "./InnerChartPlaceholder"; +import { Legend } from "./Legend"; import { buildChartData, chartColors } from "./utils"; const InnerChart = dynamic( @@ -14,30 +15,6 @@ interface Props { question: QuestionWithHistoryFragment; } -const Legend: React.FC<{ - items: { name: string; color: string }[]; - setHighlight: (i: number | undefined) => void; -}> = ({ items, setHighlight }) => { - return ( -
setHighlight(undefined)}> - {items.map((item, i) => ( -
setHighlight(i)} - > - - - - - {item.name} - -
- ))} -
- ); -}; - export const HistoryChart: React.FC = ({ question }) => { // maybe use context instead? const [highlight, setHighlight] = useState(undefined);