open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chart visual style adjustment (#971)

Browse Source 
* Adjust area fill opacity on line charts

* Light gray border on tooltips
This commit is contained in:
Marshall Polaris 2022-09-30 00:03:31 -07:00 committed by GitHub
parent 95c47aba1a
commit 608ee7b865
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/charts/helpers.tsx
View File

@ -111,7 +111,7 @@ export const AreaWithTopStroke = <P,>(props: {
py1={py1} py1={py1}
curve={curve} curve={curve}
fill={color} fill={color}
opacity={0.3} opacity={0.2}
/> />
<LinePath data={data} px={px} py={py1} curve={curve} stroke={color} /> <LinePath data={data} px={px} py={py1} curve={curve} stroke={color} />
</g> </g>
@ -255,7 +255,7 @@ export const TooltipContainer = (props: {
<div <div
className={clsx( className={clsx(
className, className,
'pointer-events-none absolute z-10 whitespace-pre rounded bg-white/80 p-2 px-4 py-2 text-xs sm:text-sm' 'pointer-events-none absolute z-10 whitespace-pre rounded border border-gray-200 bg-white/80 p-2 px-4 py-2 text-xs sm:text-sm'
)} )}
style={{ margin: MARGIN_STYLE, ...pos }} style={{ margin: MARGIN_STYLE, ...pos }}
> >

2
web/components/portfolio/portfolio-value-graph.tsx
View File

@ -105,7 +105,7 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
sliceTooltip={({ slice }) => { sliceTooltip={({ slice }) => {
handleGraphDisplayChange(slice.points[0].data.yFormatted) handleGraphDisplayChange(slice.points[0].data.yFormatted)
return ( return (
<div className="rounded bg-white px-4 py-2 opacity-80"> <div className="rounded border border-gray-200 bg-white px-4 py-2 opacity-80">
<div <div
key={slice.points[0].id} key={slice.points[0].id}
className="text-xs font-semibold sm:text-sm" className="text-xs font-semibold sm:text-sm"