Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
survey
Commits
dee8523f
Commit
dee8523f
authored
Jan 03, 2023
by
Yoon, Daeki
😅
Browse files
차트에서 불필요한 파일 정리
parent
133b2de1
Changes
5
Show whitespace changes
Inline
Side-by-side
frontend/src/charts/axes/AxisV0.tsx
deleted
100644 → 0
View file @
133b2de1
import
React
,
{
useMemo
}
from
"
react
"
;
import
{
scaleLinear
}
from
"
d3-scale
"
;
export
const
AxisV0
=
()
=>
{
const
ticks
=
useMemo
(()
=>
{
const
xScale
=
scaleLinear
().
domain
([
0
,
100
]).
range
([
10
,
290
]);
return
xScale
.
ticks
().
map
((
value
)
=>
({
value
,
xOffset
:
xScale
(
value
),
}));
},
[]);
return
(
<
svg
>
<
path
d
=
"M 9.5 0.5 H 290.5"
stroke
=
"currentColor"
/>
{
ticks
.
map
(({
value
,
xOffset
})
=>
(
<
g
key
=
{
value
}
transform
=
{
`translate(
${
xOffset
}
, 0)`
}
>
<
line
y2
=
{
6
}
stroke
=
"currentColor"
/>
<
text
key
=
{
value
}
style
=
{
{
fontSize
:
"
10px
"
,
textAnchor
:
"
middle
"
,
transform
:
"
translateY(20px)
"
,
}
}
>
{
value
}
</
text
>
</
g
>
))
}
</
svg
>
);
};
frontend/src/charts/axes/BottomAxis.tsx
deleted
100644 → 0
View file @
133b2de1
import
React
from
"
react
"
;
import
{
axisBottom
}
from
"
d3-axis
"
;
import
{
scaleLinear
}
from
"
d3-scale
"
;
export
const
BottomAxis
=
()
=>
{
let
scale
=
scaleLinear
().
domain
([
0
,
100
]).
range
([
0
,
500
]);
let
axis
=
axisBottom
(
scale
);
console
.
log
(
"
axis:
"
,
axis
);
return
(
<
div
>
<
h1
>
BottomAxis
</
h1
>
<
svg
width
=
"600"
height
=
"100"
>
<
g
transform
=
"translate(20, 50)"
></
g
>
</
svg
>
</
div
>
);
};
frontend/src/charts/bars/BarChartWithAnimation.tsx
deleted
100644 → 0
View file @
133b2de1
import
React
from
"
react
"
;
import
{
max
,
min
,
range
}
from
"
d3
"
;
import
{
scaleLinear
,
scaleBand
}
from
"
d3-scale
"
;
import
{
BarText
}
from
"
../texts
"
;
import
{
BarWithAnimation
}
from
"
./BarWithAnimation
"
;
type
Props
=
{
dataset
:
number
[];
};
export
const
BarChartWithAnimation
=
({
dataset
}:
Props
)
=>
{
const
margin
=
{
top
:
20
,
right
:
30
,
bottom
:
20
,
left
:
30
};
const
width
=
window
.
innerWidth
-
margin
.
left
-
margin
.
right
;
const
height
=
300
-
margin
.
bottom
-
margin
.
top
;
const
xScale
=
scaleBand
<
number
>
()
.
domain
(
range
(
dataset
.
length
))
.
rangeRound
([
0
,
width
])
.
paddingInner
(
0.05
);
const
yScale
=
scaleLinear
()
.
domain
([
0
,
max
(
dataset
)
||
0
])
.
rangeRound
([
0
,
height
]);
return
(
<
svg
width
=
{
width
+
margin
.
left
+
margin
.
right
}
height
=
{
height
+
margin
.
bottom
+
margin
.
top
}
style
=
{
{
borderWidth
:
"
2px
"
,
borderColor
:
"
black
"
}
}
>
<
BarWithAnimation
dataset
=
{
dataset
}
xScale
=
{
xScale
}
yScale
=
{
yScale
}
height
=
{
height
}
/>
<
BarText
dataset
=
{
dataset
}
xScale
=
{
xScale
}
yScale
=
{
yScale
}
height
=
{
height
}
/>
</
svg
>
);
};
frontend/src/charts/bars/BarWithAnimation.tsx
deleted
100644 → 0
View file @
133b2de1
import
{
ScaleBand
,
ScaleLinear
}
from
"
d3-scale
"
;
import
React
,
{
Fragment
,
useEffect
,
useRef
}
from
"
react
"
;
type
Props
=
{
dataset
:
number
[];
height
:
number
;
xScale
:
ScaleBand
<
number
>
;
yScale
:
ScaleLinear
<
number
,
number
>
;
};
export
const
BarWithAnimation
=
({
dataset
,
height
,
xScale
,
yScale
,
}:
Props
)
=>
{
// console.log("dataset:", dataset);
const
preDataset
=
useRef
(
dataset
);
useEffect
(()
=>
{
preDataset
.
current
=
dataset
;
},
[
dataset
]);
const
getStyle
=
(
i
:
number
)
=>
{
const
style
=
{
// fill: "red",
animationName
:
`inmoveleftright-
${
i
}
`
,
animationDuration
:
"
1s
"
,
// animationDirection: "alternate",
animationIterationCount
:
"
1
"
,
// transformOrigin: "bottom",
};
return
style
;
};
return
(
<
g
transform
=
{
`scale(1, -1) translate(0,
${
-
height
}
)`
}
>
{
dataset
.
map
((
d
,
i
)
=>
{
// console.log("d", d, "i", i, "x:", xScale(i), "y", yScale(d));
return
(
<
Fragment
key
=
{
Math
.
random
()
}
>
<
style
>
{
`
@keyframes inmoveleftright-
${
i
}
{
0% {
height:
${
yScale
(
preDataset
.
current
[
i
])}
px;
}
100% {
height:
${
yScale
(
d
)}
px;
}
}
`
}
</
style
>
<
rect
x
=
{
xScale
(
i
)
}
y
=
{
0
}
width
=
{
xScale
.
bandwidth
()
}
height
=
{
yScale
(
d
)
}
fill
=
{
`rgb(0, 0,
${
Math
.
round
(
d
*
10
)}
)`
}
style
=
{
getStyle
(
i
)
}
></
rect
>
</
Fragment
>
);
})
}
</
g
>
);
};
frontend/src/charts/scatters/CirclesWithG.tsx
deleted
100644 → 0
View file @
133b2de1
import
React
from
"
react
"
;
type
Props
=
{
dataset
:
number
[][];
};
export
const
CirclesWithG
=
({
dataset
}:
Props
)
=>
{
return
(
<
g
>
{
dataset
.
map
((
d
)
=>
(
<
circle
key
=
{
d
[
0
]
}
cx
=
{
d
[
0
]
}
cy
=
{
d
[
1
]
}
r
=
{
3
}
></
circle
>
))
}
</
g
>
);
};
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment