Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor legend to incorporate gradient legend #407

Merged
merged 6 commits into from
Nov 10, 2022
Merged

Refactor legend to incorporate gradient legend #407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7782d46
Refactor legend to incorporate gradient legend
chowington Nov 4, 2022
9f05fbe
Improve gradient color legend styling
chowington Nov 7, 2022
06bc22c
Clean up
chowington Nov 8, 2022
7ff1cfa
Add padding to story
chowington Nov 8, 2022
60653be
Merge branch 'main' into chowington-gradient-colormap-2
chowington Nov 9, 2022
dae8a2f
v0.19.5
chowington Nov 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@veupathdb/components",
"version": "0.19.4",
"version": "0.19.5",
"license": "Apache-2.0",
"description": "React Components for VEuPathDB Websites",
"repository": {
Expand Down
67 changes: 12 additions & 55 deletions src/components/plotControls/PlotGradientLegend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,55 +10,10 @@ import {
export interface PlotLegendGradientProps {
legendMax: number;
legendMin: number;
gradientColorscaleType?: string;
gradientColorscaleType?: 'sequential' | 'divergent';
nTicks?: number; // MUST be odd!
legendTitle?: string;
showMissingness?: boolean;
}
export default function PlotGradientLegend({
legendMax,
legendMin,
gradientColorscaleType,
legendTitle,
nTicks,
showMissingness,
}: PlotLegendGradientProps) {
// Declare constants
const legendTextSize = '1.0em';

/** Most of below identical to the current custom legend. Hoping that eventually the GradientColorscaleLegend can work within
* the nice custom legend that DK created. */
return (
<>
{
<div
style={{
border: '1px solid #dedede',
boxShadow: '1px 1px 4px #00000066',
padding: '1em',
}}
>
<div
title={legendTitle}
style={{ cursor: 'pointer', fontSize: legendTextSize }}
>
{legendTitle != null
? legendEllipsis(legendTitle, 23)
: legendTitle}
</div>

<GradientColorscaleLegend
legendMax={legendMax}
legendMin={legendMin}
gradientColorscaleType={gradientColorscaleType}
nTicks={nTicks}
showMissingness={showMissingness}
/>
</div>
}
</>
);
}

// legend ellipsis function for legend title and legend items (from custom legend work)
const legendEllipsis = (label: string, ellipsisLength: number) => {
Expand All @@ -68,19 +23,19 @@ const legendEllipsis = (label: string, ellipsisLength: number) => {
};

// make gradient colorscale legend into a component so it can be more easily incorporated into DK's custom legend if we need
function GradientColorscaleLegend({
export default function PlotGradientLegend({
legendMax,
legendMin,
gradientColorscaleType,
nTicks,
showMissingness,
}: PlotLegendGradientProps) {
// Declare constants
const tickFontSize = '0.8em';
const gradientBoxHeight = 150;
const gradientBoxWidth = 20;
const tickLength = 4;
const defaultNTicks = 5;
const tickFontSize = '0.8em';
const legendTextSize = '1.0em';

nTicks = nTicks || defaultNTicks;
Expand Down Expand Up @@ -109,17 +64,17 @@ function GradientColorscaleLegend({
return (
<g className="axisTick" overflow="visible" key={'gradientTick' + a}>
<line
x1={gradientBoxWidth}
x2={gradientBoxWidth + tickLength}
x1={gradientBoxWidth + 1}
x2={gradientBoxWidth + tickLength + 1}
y1={location}
y2={location}
stroke="black"
strokeWidth="1px"
></line>
<text
x={gradientBoxWidth + 3 + tickLength}
x={gradientBoxWidth + 4 + tickLength}
y={location}
alignmentBaseline="middle"
dominantBaseline="middle"
fontSize={tickFontSize}
>
{(a / (nTicks! - 1)) * (legendMax - legendMin) + legendMin}
Expand All @@ -130,17 +85,19 @@ function GradientColorscaleLegend({

return (
<div>
<svg id="gradientLegend" height={gradientBoxHeight + 40} width={150}>
<svg id="gradientLegend" height={gradientBoxHeight + 20} width={150}>
<defs>
<linearGradient id="linearGradient" x1="0" x2="0" y1="1" y2="0">
{stopPoints}
</linearGradient>
</defs>
<g style={{ transform: 'translate(0, 10px)' }}>
<g style={{ transform: 'translate(5px, 10px)' }}>
<rect
width={gradientBoxWidth}
height={gradientBoxHeight}
fill="url(#linearGradient)"
stroke="black"
strokeWidth={1}
></rect>
{ticks}
</g>
Expand All @@ -159,7 +116,6 @@ function GradientColorscaleLegend({
&times;
</div>
</div>
&nbsp;&nbsp;
<label
title={'No data'}
style={{
Expand All @@ -168,6 +124,7 @@ function GradientColorscaleLegend({
alignItems: 'center',
fontSize: legendTextSize,
color: '#999',
margin: 0,
}}
>
<i>{legendEllipsis('No data', 20)}</i>
Expand Down
Loading