Skip to content

Commit c34775c

Browse files
guizzetticguizzettic
committed
initial layering in of legend element into History component
1 parent d0e5b3e commit c34775c

File tree

3 files changed

+136
-74
lines changed

3 files changed

+136
-74
lines changed

‎src/app/components/History.tsx

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { Component, useEffect, useState } from 'react';
22
import * as d3 from 'd3';
3-
import Legendary from './legend';
3+
// import Legendary from './legend';
4+
import { scaleOrdinal } from '@visx/scale';
5+
import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
46

57
/**
68
* @var colors: Colors array for the diffrerent node branches, each color is for a different branch
@@ -24,6 +26,102 @@ const colors = [
2426
'#2C4870',
2527
];
2628

29+
/**
30+
*method of creating legend using Visx
31+
**/
32+
// where we set color scale for Legendary
33+
const ordinalColorScale = scaleOrdinal<number, string>({
34+
domain: [1, 2, 3, 4],
35+
// sync in with the snapshot color chosen in history tab already
36+
range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
37+
});
38+
39+
const legendGlyphSize = 12;
40+
41+
function Legendary({ events = false }: { events?: boolean }) {
42+
return (
43+
<div className="legends">
44+
<LegendVisual title="State Snapshots">
45+
<LegendOrdinal scale={ordinalColorScale}>
46+
{(labels) => (
47+
<div style={{ display: 'flex', flexDirection: 'row' }}>
48+
{labels.map((label, i) => (
49+
<LegendItem
50+
key={`legend-quantile-${i}`}
51+
margin="0 5px"
52+
onClick={() => {
53+
if (events) alert(`clicked: ${JSON.stringify(label)}`);
54+
}}
55+
>
56+
<svg width={legendGlyphSize} height={legendGlyphSize}>
57+
<rect
58+
fill={label.value}
59+
width={legendGlyphSize}
60+
height={legendGlyphSize}
61+
/>
62+
</svg>
63+
<LegendLabel align="left" margin="0 0 0 4px">
64+
{label.text}
65+
</LegendLabel>
66+
</LegendItem>
67+
))}
68+
</div>
69+
)}
70+
</LegendOrdinal>
71+
</LegendVisual>
72+
73+
<style jsx="true">
74+
{`
75+
.legends {
76+
font-family: arial;
77+
font-weight: 900;
78+
background-color: black;
79+
border-radius: 14px;
80+
padding: 24px 24px 24px 32px;
81+
overflow-y: auto;
82+
flex-grow: 1;
83+
}
84+
`}
85+
</style>
86+
</div>
87+
);
88+
}
89+
90+
function LegendVisual({
91+
title,
92+
children,
93+
}: {
94+
title: string;
95+
children: React.ReactNode;
96+
}) {
97+
return (
98+
<div className="legend">
99+
<div className="title">{title}</div>
100+
{children}
101+
<style jsx="true">
102+
{`
103+
.legend {
104+
line-height: 0.9em;
105+
color: #efefef;
106+
font-size: 10px;
107+
font-family: arial;
108+
padding: 10px 10px;
109+
float: left;
110+
border: 1px solid rgba(255, 255, 255, 0.3);
111+
border-radius: 8px;
112+
margin: 5px 5px;
113+
}
114+
.title {
115+
font-size: 12px;
116+
margin-bottom: 10px;
117+
font-weight: 100;
118+
}
119+
`}
120+
</style>
121+
</div>
122+
);
123+
}
124+
27125
const filterHooks = (data: any[]) => {
28126
if (data[0].children && data[0].state === 'stateless') {
29127
return filterHooks(data[0].children);
@@ -37,6 +135,7 @@ const filterHooks = (data: any[]) => {
37135

38136
function History(props) {
39137
let { hierarchy } = props;
138+
console.log('hierarchy is', hierarchy);
40139
let root = JSON.parse(JSON.stringify(hierarchy));
41140
let isRecoil = false;
42141
let HistoryRef = React.createRef(root); //React.createRef(root);

‎src/app/components/StateRoute.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ const StateRoute = (props: StateRouteProps) => {
4747
const { snapshot, hierarchy, snapshots, viewIndex } = props;
4848

4949
const isRecoil = snapshot.atomsComponents ? true : false;
50-
console.log(isRecoil);
5150
const [noRenderData, setNoRenderData] = useState(false);
5251

5352
// component map zoom state
@@ -80,11 +79,8 @@ const StateRoute = (props: StateRouteProps) => {
8079
const renderHistory = () => {
8180
if (hierarchy) {
8281
return (
83-
<div>
84-
{/* <History hierarchy={hierarchy}> */}
85-
<Legendary />
86-
{/* </History> */}
87-
</div>
82+
<History hierarchy={hierarchy} />
83+
// <Legendary />
8884
);
8985
}
9086
return <div className="noState">{NO_STATE_MSG}</div>;

‎src/app/components/legend.tsx

Lines changed: 34 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
2-
// import { format } from "d3-format";
32
import { scaleOrdinal } from '@visx/scale';
4-
// import { GlyphStar, GlyphWye, GlyphTriangle, GlyphDiamond } from "@visx/glyph";
53
import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
64

75
// implement algorithm to check snapshot history and their respective colors
@@ -11,39 +9,7 @@ const ordinalColorScale = scaleOrdinal<number, string>({
119
range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
1210
});
1311

14-
// const ordinalColor2Scale = scaleOrdinal<string, string>({
15-
// domain: ["a", "b", "c", "d"],
16-
// range: ["#000", "#f29b38", "#e64357", "#8386f7"]
17-
// });
18-
19-
// const shapeScale = scaleOrdinal<string, React.FC | React.ReactNode>({
20-
// domain: ["a", "b", "c", "d", "e"],
21-
// range: [
22-
// <GlyphStar key="a" size={500} top={50 / 6} left={50 / 6} fill="#dd59b8" />,
23-
// <GlyphWye key="b" size={500} top={50 / 6} left={50 / 6} fill="#fff" />,
24-
// <GlyphTriangle
25-
// key="c"
26-
// size={50}
27-
// top={50 / 6}
28-
// left={50 / 6}
29-
// fill="#de7d7b"
30-
// />,
31-
// <GlyphDiamond
32-
// key="d"
33-
// size={50}
34-
// top={50 / 6}
35-
// left={50 / 6}
36-
// fill="#df905f"
37-
// />,
38-
// () => (
39-
// <text key="e" fontSize="12" dy="1em" dx=".33em" fill="#e0a346">
40-
// $
41-
// </text>
42-
// )
43-
// ]
44-
// });
45-
46-
const legendGlyphSize = 15;
12+
const legendGlyphSize = 12;
4713

4814
export default function Legendary({ events = false }: { events?: boolean }) {
4915
return (
@@ -77,20 +43,19 @@ export default function Legendary({ events = false }: { events?: boolean }) {
7743
</LegendOrdinal>
7844
</LegendVisual>
7945

80-
<style jsx>{`
81-
.legends {
82-
font-family: arial;
83-
font-weight: 900;
84-
background-color: black;
85-
border-radius: 14px;
86-
padding: 24px 24px 24px 32px;
87-
overflow-y: auto;
88-
flex-grow: 1;
89-
}
90-
.chart h2 {
91-
margin-left: 10px;
92-
}
93-
`}</style>
46+
<style jsx>
47+
{`
48+
.legends {
49+
font-family: arial;
50+
font-weight: 900;
51+
background-color: black;
52+
border-radius: 14px;
53+
padding: 24px 24px 24px 32px;
54+
overflow-y: auto;
55+
flex-grow: 1;
56+
}
57+
`}
58+
</style>
9459
</div>
9560
);
9661
}
@@ -106,24 +71,26 @@ function LegendVisual({
10671
<div className="legend">
10772
<div className="title">{title}</div>
10873
{children}
109-
<style jsx>{`
110-
.legend {
111-
line-height: 0.9em;
112-
color: #efefef;
113-
font-size: 10px;
114-
font-family: arial;
115-
padding: 10px 10px;
116-
float: left;
117-
border: 1px solid rgba(255, 255, 255, 0.3);
118-
border-radius: 8px;
119-
margin: 5px 5px;
120-
}
121-
.title {
122-
font-size: 12px;
123-
margin-bottom: 10px;
124-
font-weight: 100;
125-
}
126-
`}</style>
74+
<style jsx>
75+
{`
76+
.legend {
77+
line-height: 0.9em;
78+
color: #efefef;
79+
font-size: 10px;
80+
font-family: arial;
81+
padding: 10px 10px;
82+
float: left;
83+
border: 1px solid rgba(255, 255, 255, 0.3);
84+
border-radius: 8px;
85+
margin: 5px 5px;
86+
}
87+
.title {
88+
font-size: 12px;
89+
margin-bottom: 10px;
90+
font-weight: 100;
91+
}
92+
`}
93+
</style>
12794
</div>
12895
);
12996
}

0 commit comments

Comments
 (0)