Skip to content

Commit

Permalink
Merge branch 'dev' of https://github.com/growthepie/gtp-frontend into…
Browse files Browse the repository at this point in the history 
… dev
  • Loading branch information
@mokelgit
mokelgit committed Sep 16, 2024
2 parents eb801c8 + faf512e commit d43b4c5
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 41 deletions.
59 changes: 44 additions & 15 deletions components/layout/Economics/BreakdownCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -623,7 +623,7 @@ function BreakdownCharts({
backgroundColor={"transparent"}
type="line"
panning={{
enabled: true,
enabled: false,
type: "x",
}}
panKey="shift"
Expand Down Expand Up @@ -707,9 +707,11 @@ function BreakdownCharts({
}}
tickmarkPlacement="on"
zoomEnabled={false}
// startOnTick={true}
// endOnTick={true}
tickWidth={0}
tickLength={20}
ordinal={true}
// ordinal={true}
minorTicks={false}
minorTickLength={2}
minorTickWidth={2}
Expand Down Expand Up @@ -802,14 +804,17 @@ function BreakdownCharts({
x2: 0,
y2: 1,
},

stops: [
/* 50% in hex: 80 */
// [0.33, "#10808C80"],
// [1, "#1DF7EF80"],
[0, "#10808CDD"],
[0.5, "#10808CDD"],
[1, "#1DF7EFDD"],
],
}}
/>

{/* Second line */}
<AreaSeries
name="Costs"
Expand All @@ -831,12 +836,28 @@ function BreakdownCharts({
y2: 1,
},
stops: [
/* 50% in hex: 80 */
// [0.33, "#98323E80"],
// [1, "#FE546880"],
[0, "#98323EDD"],
[0.5, "#98323EDD"],
[1, "#FE5468DD"],
],
}}
/>
{/*
position: absolute;
width: 1182px;
height: 207px;
left: 0px;
top: 42px;
background: linear-gradient(180deg, #10808C 0%, #1DF7EF 100%);
opacity: 0.5;
border-radius: 3px;
*/}

{/* Area between the lines */}
</YAxis>
Expand Down Expand Up @@ -896,17 +917,10 @@ function BreakdownCharts({
backgroundColor={"transparent"}
type="column"
panning={{
enabled: true,
enabled: false,
type: "x",
}}
panKey="shift"
// zooming={{
// type: "x",
// mouseWheel: {
// enabled: false,
// type: "xy",
// },
// }}
zooming={{
mouseWheel: {
enabled: false,
Expand Down Expand Up @@ -969,11 +983,22 @@ function BreakdownCharts({
title={undefined}
type="datetime"
labels={{
align: undefined,
rotation: 0,
// allowOverlap: false,
// staggerLines: 1,
// reserveSpace: true,
overflow: "justify",
useHTML: true,
distance: -14,
style: {
color: COLORS.LABEL,
fontSize: "10px",
fontWeight: "550",
fontVariant: "small-caps",
textTransform: "lowercase",
fontFamily: "var(--font-raleway), sans-serif",
// fontVariant: "all-small-caps",
zIndex: 1000,
},
enabled: true,
Expand Down Expand Up @@ -1008,10 +1033,14 @@ function BreakdownCharts({
snap: false,
}}
zoomEnabled={false}
lineWidth={0}
offset={24}
// startOnTick={true}
// endOnTick={true}
tickAmount={0}
tickLength={20}
tickWidth={0}
ordinal={true}
tickLength={5}
tickWidth={1}
// ordinal={true}
minorTicks={false}
minorTickLength={2}
minorTickWidth={2}
Expand Down Expand Up @@ -1086,6 +1115,7 @@ function BreakdownCharts({
{" "}
<ColumnSeries
name="Profit"
borderRadius="8%"
zones={[
{
value: 0, // Values up to 0 (exclusive)
Expand All @@ -1098,7 +1128,6 @@ function BreakdownCharts({
},
stops: [
[0, "#FFE761DD"],

[1, "#C7AE24DD"],
],
},
Expand Down
67 changes: 45 additions & 22 deletions components/layout/Economics/ChainBreakdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import {
TooltipTrigger,
} from "@/components/layout/Tooltip";
import { useMaster } from "@/contexts/MasterContext";

const regularMetrics = ["profit", "revenue", "costs", "size", "profit_margin"];
interface DAvailability {
icon: string;
label: string;
Expand Down Expand Up @@ -146,8 +148,32 @@ export default function ChainBreakdown({
}
};

const dataTimestampExtremes = useMemo(() => {
let xMin = Infinity;
let xMax = -Infinity;

Object.keys(data).forEach((chain) => {
regularMetrics.forEach((metric) => {
if (!data[chain].daily[metric]) return;
const min = data[chain].daily[metric].data[0][0];
const max =
data[chain].daily[metric].data[
data[chain].daily[metric].data.length - 1
][0];

xMin = Math.min(min, xMin);
xMax = Math.max(max, xMax);
});
});

return { xMin, xMax };
}, [data]);

//Handles opening of each chain section
const timespans = useMemo(() => {
let xMin = dataTimestampExtremes.xMin;
let xMax = dataTimestampExtremes.xMax;

if (!isMonthly) {
return {
"1d": {
Expand All @@ -159,36 +185,37 @@ export default function ChainBreakdown({
shortLabel: "7d",
label: "7 days",
value: 7,
xMin: Date.now() - 7 * 24 * 60 * 60 * 1000,
xMax: Date.now(),
xMin: xMax - 7 * 24 * 60 * 60 * 1000,
xMax: xMax,
},
"30d": {
shortLabel: "30d",
label: "30 days",
value: 30,
xMin: Date.now() - 30 * 24 * 60 * 60 * 1000,
xMax: Date.now(),
xMin: xMax - 30 * 24 * 60 * 60 * 1000,
xMax: xMax,
},
"90d": {
shortLabel: "90d",
label: "90 days",
value: 90,
xMin: Date.now() - 90 * 24 * 60 * 60 * 1000,
xMax: Date.now(),
xMin: xMax - 90 * 24 * 60 * 60 * 1000,
xMax: xMax,
},
"365d": {
shortLabel: "1y",
label: "1 year",
value: 365,
xMin: Date.now() - 365 * 24 * 60 * 60 * 1000,
xMax: Date.now(),
xMin: xMax - 365 * 24 * 60 * 60 * 1000,
xMax: xMax,
},

max: {
shortLabel: "Max",
label: "Max",
value: 0,
xMax: Date.now(),
xMin: xMin,
xMax: xMax,
},
};
} else {
Expand All @@ -197,26 +224,27 @@ export default function ChainBreakdown({
shortLabel: "6m",
label: "6 months",
value: 90,
xMin: Date.now() - 180 * 24 * 60 * 60 * 1000,
xMax: Date.now(),
xMin: xMax - 180 * 24 * 60 * 60 * 1000,
xMax: xMax,
},
"365d": {
shortLabel: "1y",
label: "1 year",
value: 365,
xMin: Date.now() - 365 * 24 * 60 * 60 * 1000,
xMax: Date.now(),
xMin: xMax - 365 * 24 * 60 * 60 * 1000,
xMax: xMax,
},

max: {
shortLabel: "Max",
label: "Max",
value: 0,
xMax: Date.now(),
xMin: xMin,
xMax: xMax,
},
};
}
}, [isMonthly]);
}, [dataTimestampExtremes.xMax, dataTimestampExtremes.xMin, isMonthly]);

const totalRevenue = useMemo(() => {
let retValue = 0;
Expand Down Expand Up @@ -303,13 +331,6 @@ export default function ChainBreakdown({
const sortedChainData = useMemo(() => {
let retData: string[];
if (metricSort !== "chain") {
const regularMetrics = [
"profit",
"revenue",
"costs",
"size",
"profit_margin",
];
if (regularMetrics.includes(metricSort)) {
retData = Object.keys(data).sort((a, b) => {
const dataIndex =
Expand Down Expand Up @@ -459,6 +480,8 @@ export default function ChainBreakdown({

return (
<div className="h-full">
{/* <div>xMax {new Date(timespans[selectedTimespan].xMax).toDateString()}</div>
<div>xMin {new Date(timespans[selectedTimespan].xMin).toDateString()}</div> */}
{sortedChainData && (
<div className="flex flex-col gap-y-[15px]">
<Container className="flex flex-col gap-y-[15px]">
Expand Down
23 changes: 19 additions & 4 deletions components/layout/LandingChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,8 +239,18 @@ export default function LandingChart({
const { isSidebarOpen, setEmbedData, embedData } = useUIContext();

const loadHighchartsWrappers = () => {
// on hover, show the /cursors/zoom.svg cursor
Highcharts.wrap(Highcharts.Pointer.prototype, "reset", function (p) {
this.chart.container.style.cursor = "url(/cursors/zoom.svg) 14.5 14.5, auto";
p.call(this);
});


// on drag start
Highcharts.wrap(Highcharts.Pointer.prototype, "dragStart", function (p, e) {
// invisible cursor
this.chart.container.style.cursor = "none";

// place vertical dotted line on click
if (this.chart.series.length > 0) {
const x = e.chartX;
Expand Down Expand Up @@ -379,6 +389,8 @@ export default function LandingChart({
});

Highcharts.wrap(Highcharts.Pointer.prototype, "drag", function (p, e) {
// invisible cursor
this.chart.container.style.cursor = "none";
setIsDragging(true);

// update vertical dotted line on drag
Expand Down Expand Up @@ -516,6 +528,8 @@ export default function LandingChart({
});

Highcharts.wrap(Highcharts.Pointer.prototype, "drop", function (p, e) {
// set cursor back to default
this.chart.container.style.cursor = "url(/cursors/zoom.svg) 14.5 14.5, auto";
setIsDragging(false);

const elements = [
Expand Down Expand Up @@ -560,7 +574,7 @@ export default function LandingChart({
highchartsRoundedCorners(Highcharts);
highchartsAnnotations(Highcharts);

// loadHighchartsWrappers();
loadHighchartsWrappers();

// update x-axis label sizes if it is a 4 digit number
Highcharts.wrap(
Expand Down Expand Up @@ -1889,7 +1903,7 @@ export default function LandingChart({
) : (
<>
<button
className={`rounded-full flex items-center justify-center space-x-3 px-4 py-1.5 xl:py-4 text-md w-full xl:w-auto xl:px-4 xl:text-md font-medium border-[1px] border-forest-800`}
className={`rounded-full flex items-center justify-center space-x-3 px-4 py-1.5 2xl:py-4 text-md w-full 2xl:w-auto 2xl:px-4 2xl:text-md font-medium border-[1px] border-forest-800`}
onClick={() => {
// chartComponent?.current?.xAxis[0].setExtremes(
// timespans[selectedTimespan].xMin,
Expand All @@ -1900,12 +1914,12 @@ export default function LandingChart({
>
<Icon
icon="feather:zoom-out"
className="h-4 w-4 xl:w-6 xl:h-6"
className="h-4 w-4 2xl:w-6 2xl:h-6"
/>
<div>Reset Zoom</div>
</button>
<button
className={`rounded-full text-md w-full xl:w-auto px-4 py-1.5 xl:py-4 xl:px-4 font-medium bg-forest-100 dark:bg-forest-1000`}
className={`rounded-full text-md w-full 2xl:w-auto px-4 py-1.5 2xl:py-4 2xl:px-4 font-medium bg-forest-100 dark:bg-forest-1000`}
>
{intervalShown?.label}
</button>
Expand All @@ -1921,6 +1935,7 @@ export default function LandingChart({
>
{highchartsLoaded ? (
<HighchartsReact
// containerProps={{ style: { cursor: "url('cursors/zoom.svg') 14.5 14.5, pointer" } }}
highcharts={Highcharts}
options={options}
constructorType={"stockChart"}
Expand Down

0 comments on commit d43b4c5

Please sign in to comment.