feat: tenure cost per month #269
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
gabrielegranello
force-pushed
the
gg/how-much-per-month
branch
from
eedfc9b to
0bcddd2
Compare
| /> | ||
| <ChartTooltip content={<ChartTooltipContent hideLabel />} /> | ||
| <ChartLegend content={<ChartLegendContent />} /> | ||
| <Bar dataKey="monthly" strokeWidth={2} activeIndex={2} /> |
There was a problem hiding this comment.
We want to embed the LabelList component here (please see #272)
There was a problem hiding this comment.
Thanks! Not sure if you agree, but I slightly change the format function otherwise it was showing
4k, 2k and 630 when looking at monthly values.
gabrielegranello
force-pushed
the
gg/how-much-per-month
branch
from
0f5f5ef to
05698b8
Compare
app/lib/format.ts
Outdated
There was a problem hiding this comment.
Good call - this makes more sense given the context of the second graph 👍
| import { Drawer } from "../../ui/Drawer"; | ||
| import { Household } from "@/app/models/Household"; | ||
|
|
||
| interface DashboardProps { |
There was a problem hiding this comment.
This looks like a repeated interface - each card that takes in data will be the same. Could we share this or make a common component for our cards?
There was a problem hiding this comment.
Good point! I will have DahsboardProps exported when it is declared, so it can be imported on all the modules
| // Define type for DataInput | ||
| type DataInput = { | ||
| category: string; | ||
| marketPurchase: number; | ||
| marketRent: number; | ||
| socialRent: number; | ||
| fairholdLandPurchase: number; | ||
| fairholdLandRent: number; | ||
| affordabilityMonthly: number; | ||
| [key: string]: string | number; | ||
| }; | ||
|
|
||
| // Define the props type for StackedBarChart | ||
| interface StackedBarChartProps { | ||
| data: DataInput[]; | ||
| } | ||
|
|
||
| // Implementation of the Chart.js Stacked Bar Chart |
There was a problem hiding this comment.
nit: Redundant / noisy comments
| <Card> | ||
| <CardHeader></CardHeader> | ||
| <CardContent> | ||
| <ChartContainer config={{}}> |
There was a problem hiding this comment.
It seems that config is a compulsory variable to pass. We used to pass some properties in terms of colours for the plot. However, the same properties can be passed chartData. Since we actually don't need to pass any other config parameter, but we need to pass something otherwise it flags an error, I thought the solution is to pass an empty objet. Is there perhaps a better way?
There was a problem hiding this comment.
Ah didn't know this - if that's the case then this is great 👌
| import { Household } from "@/app/models/Household"; | ||
| import TenureComparisonBarChart from "./TenureComparisonBarChart"; | ||
|
|
||
| interface TenureComparisonWrapperProps { |
There was a problem hiding this comment.
Are these props correct? We're only passing a household into this wrapper.
There was a problem hiding this comment.
Good point thanks for flagging it
gabrielegranello
force-pushed
the
gg/how-much-per-month
branch
from
7dbf2cd to
55cc99a
Compare
What does this PR do?
Adds the content to the second card. Still work in progress..