Skip to content

Commit ac4f4ad

Browse files
corwintinescorwintines
committed
push up changes for EnergyConsumptionChart
1 parent 5460bd3 commit ac4f4ad

File tree

1 file changed

+132
-67
lines changed

1 file changed

+132
-67
lines changed

‎src/components/EnergyConsumptionChart.tsx

Lines changed: 132 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from "react"
2-
import { Box, Center, useToken } from "@chakra-ui/react"
2+
import { Box, Center, useBreakpointValue, useToken } from "@chakra-ui/react"
33
import {
44
BarChart,
55
Bar,
66
Cell,
77
XAxis,
8-
YAxis,
98
Text,
109
LabelList,
1110
ResponsiveContainer,
@@ -21,6 +20,12 @@ interface ITickProps {
2120
payload: { value: number | string }
2221
}
2322

23+
type Data = Array<{
24+
name: string
25+
amount: number
26+
color: string
27+
}>
28+
2429
const CustomTick: React.FC<ITickProps> = ({ x, y, payload }) => {
2530
const textColor = useToken("colors", "text")
2631

@@ -47,77 +52,137 @@ const EnergyConsumptionChart: React.FC = () => {
4752

4853
const textColor = useToken("colors", "text")
4954

50-
const data = [
51-
{
52-
name: "Global data centers",
53-
amount: 190,
54-
color: "#C1B6F5",
55-
},
56-
{
57-
name: "Bitcoin",
58-
amount: 149,
59-
color: "#C1B6F5",
60-
},
61-
{
62-
name: "Gold mining",
63-
amount: 131,
64-
color: "#C1B6F5",
65-
},
66-
{
67-
name: "Gaming in USA",
68-
amount: 34,
69-
color: "#C1B6F5",
70-
},
71-
{
72-
name: "PoW Ethereum",
73-
amount: 21,
74-
color: "#C1B6F5",
75-
},
76-
{
77-
name: "Google",
78-
amount: 19,
79-
color: "#C1B6F5",
80-
},
81-
{
82-
name: "Netflix",
83-
amount: 0.457,
84-
color: "#C1B6F5",
85-
},
86-
{
87-
name: "PayPal",
88-
amount: 0.26,
89-
color: "#C1B6F5",
90-
},
91-
{
92-
name: "Airbnb",
93-
amount: 0.02,
94-
color: "#C1B6F5",
95-
},
96-
{
97-
name: "PoS Ethereum",
98-
amount: 0.0026,
99-
color: "#C1B6F5",
100-
},
101-
]
55+
const data = useBreakpointValue<Data>({
56+
base: [
57+
{
58+
name: t("energy-consumption-chart-global-data-centers-label"),
59+
amount: 190,
60+
color: "#FF0000",
61+
},
62+
{
63+
name: t("energy-consumption-chart-btc-pow-label"),
64+
amount: 149,
65+
color: "#F2A900",
66+
},
67+
{
68+
name: t("energy-consumption-chart-gaming-us-label"),
69+
amount: 34,
70+
color: "#71BB8A",
71+
},
72+
{
73+
name: t("energy-consumption-chart-eth-pow-label"),
74+
amount: 21,
75+
color: "#C1B6F5",
76+
},
77+
{
78+
name: t("energy-consumption-chart-eth-pos-label"),
79+
amount: 0.0026,
80+
color: "#C1B6F5",
81+
},
82+
],
83+
sm: [
84+
{
85+
name: t("energy-consumption-chart-global-data-centers-label"),
86+
amount: 190,
87+
color: "#FF0000",
88+
},
89+
{
90+
name: t("energy-consumption-chart-btc-pow-label"),
91+
amount: 149,
92+
color: "#D7B14A",
93+
},
94+
{
95+
name: t("energy-consumption-gold-mining-cbeci-label"),
96+
amount: 131,
97+
color: "#F2A900",
98+
},
99+
{
100+
name: t("energy-consumption-chart-eth-pow-label"),
101+
amount: 21,
102+
color: "#C1B6F5",
103+
},
104+
{
105+
name: t("energy-consumption-chart-netflix-label"),
106+
amount: 0.457,
107+
color: "#E50914",
108+
},
109+
{
110+
name: t("energy-consumption-chart-eth-pos-label"),
111+
amount: 0.0026,
112+
color: "#C1B6F5",
113+
},
114+
],
115+
md: [
116+
{
117+
name: t("energy-consumption-chart-global-data-centers-label"),
118+
amount: 190,
119+
color: "#FF0000",
120+
},
121+
{
122+
name: t("energy-consumption-chart-btc-pow-label"),
123+
amount: 149,
124+
color: "#D7B14A",
125+
},
126+
{
127+
name: t("energy-consumption-gold-mining-cbeci-label"),
128+
amount: 131,
129+
color: "#D7B14A",
130+
},
131+
{
132+
name: t("energy-consumption-chart-gaming-us-label"),
133+
amount: 34,
134+
color: "#71BB8A",
135+
},
136+
{
137+
name: t("energy-consumption-chart-eth-pow-label"),
138+
amount: 21,
139+
color: "#C1B6F5",
140+
},
141+
{
142+
name: "Google",
143+
amount: 19,
144+
color: "#E50914",
145+
},
146+
{
147+
name: t("energy-consumption-chart-netflix-label"),
148+
amount: 0.457,
149+
color: "#E50914",
150+
},
151+
{
152+
name: t("energy-consumption-chart-paypal-label"),
153+
amount: 0.26,
154+
color: "#C1B6F5",
155+
},
156+
{
157+
name: "AirBnB",
158+
amount: 0.02,
159+
color: "#E50914",
160+
},
161+
{
162+
name: t("energy-consumption-chart-eth-pos-label"),
163+
amount: 0.0026,
164+
color: "#C1B6F5",
165+
},
166+
],
167+
})
102168

103169
return (
104170
<Center w="full">
105171
<Box maxW="500px" w="full">
106-
<ResponsiveContainer height={550}>
172+
<ResponsiveContainer height={500}>
107173
<BarChart
108-
margin={{ top: 30, right: 40, bottom: 30, left: 20 }}
174+
margin={{ top: 30, right: 30, bottom: 30, left: 30 }}
175+
barGap={15}
176+
barSize={38}
109177
data={data}
110-
barGap={20}
111-
barSize={30}
112-
layout={"vertical"}
113178
>
114-
<XAxis type={"number"} orientation={"bottom"} />
115-
<YAxis
116-
type={"category"}
117-
orientation={"left"}
118-
dataKey={"name"}
119-
tick={{ fontSize: 14 }}
120-
width={120}
179+
<XAxis
180+
dataKey="name"
181+
tickLine={false}
182+
axisLine={false}
183+
// @ts-ignore
184+
tick={<CustomTick />}
185+
interval={0}
121186
/>
122187
<Legend
123188
content={
@@ -133,7 +198,7 @@ const EnergyConsumptionChart: React.FC = () => {
133198
isAnimationActive={false}
134199
>
135200
<LabelList
136-
position="right"
201+
position="top"
137202
fill={textColor}
138203
fontSize={14}
139204
offset={10}

0 commit comments

Comments
 (0)