aboutsummaryrefslogtreecommitdiff
path: root/src/History.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/History.js')
-rw-r--r--src/History.js82
1 files changed, 0 insertions, 82 deletions
diff --git a/src/History.js b/src/History.js
deleted file mode 100644
index 7425b61..0000000
--- a/src/History.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { React, PureComponent } from "react";
-import { DateTime } from "luxon";
-import {
- BarChart,
- Bar,
- LineChart,
- Line,
- CartesianGrid,
- XAxis,
- YAxis,
- Tooltip,
- ResponsiveContainer,
- Label,
-} from "recharts";
-import GoatCounter from "./GoatCounter";
-
-const History = (props) => {
- const offset = DateTime.fromSQL(props.data[0].date, { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds();
- const data = props.data.map((d) => {
- return {
- value: d.value,
- date: DateTime.fromSQL(d.date, { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds(),
- };
- });
-
- return (
- <>
- <h3 className="text-3xl">{props.name}</h3>
- <LineChart
- style={{ marginLeft: "auto", marginRight: "auto" }}
- width={730}
- height={500}
- margin={{ top: 15, right: 30, left: 20, bottom: 5 }}
- data={data}
- >
- <Line type="monotone" dataKey="value" stroke="#CD8508" dot={false} />
- <CartesianGrid strokeDasharray="3 3" />
- <XAxis
- dataKey="date"
- type="number"
- tickCount={14}
- domain={["dataMin", "dataMax"]}
- tick={<CustomizedAxisTick />}
- height={90}
- />
- <YAxis dataKey="value" type="number"></YAxis>
- <Tooltip content={CustomTooltip} />
- </LineChart>
- <GoatCounter />
- </>
- );
-};
-
-class CustomizedAxisTick extends PureComponent {
- render() {
- const { x, y, payload } = this.props;
-
- return (
- <g transform={`translate(${x},${y})`}>
- <text className="Graph-Label" x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-40)">
- {DateTime.fromSeconds(payload.value).toLocaleString()}
- </text>
- </g>
- );
- }
-}
-
-const CustomTooltip = ({ active, payload, label }) => {
- if (active) {
- return (
- <div className="custom-tooltip bg-white border-orange-300 border-2 rounded-lg p-2">
- <p className="label">
- {DateTime.fromSeconds(label).toLocaleString({ weekday: "long", month: "long", day: "2-digit" })}
- </p>
- <p className="desc">{payload[0].value}</p>
- </div>
- );
- }
- return null;
-};
-
-export default History;