Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix/chart fixes #333

Open
wants to merge 13 commits into
base: develop
Choose a base branch
from
Open

Bugfix/chart fixes #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
6c5d316
added fixes for donut, added fixes for donut opacity when large numbe…
charliejlin Nov 10, 2024
ccb78b2
minor style changes to donut chart
charliejlin Nov 10, 2024
25c5f53
fixed listed progress bar bugs, added functionality for show number/p…
charliejlin Nov 10, 2024
848bb14
all line fixes, first two of gen issues
charliejlin Nov 16, 2024
46f7d5b
fix for double click in UI
charliejlin Nov 16, 2024
2ab2dc4
fix to auto 0 in donut chart table, fixed some styling for donut chart
charliejlin Nov 16, 2024
19b8965
removed accidental yarn .lock
charliejlin Nov 16, 2024
917b886
quick fix to chart buttons not properly checking link
charliejlin Nov 16, 2024
eb42c2d
added fix for the react-bootstrap TS issues
charliejlin Nov 16, 2024
6e9c46c
Delete yarn.lock
charliejlin Nov 16, 2024
8721652
readded yarn.lock file
charliejlin Nov 16, 2024
9983a09
removed console.log that maybe causing issue?
charliejlin Nov 16, 2024
5b27b79
copied over 'develop' branch yarn.lock and package.json
charliejlin Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/map/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -651,8 +651,7 @@ const Map = (props) => {
style={{ display: "flex", alignItems: "center" }}
>
<div style={{ marginRight: "8px", marginBottom: "6px" }}> </div>
{
console.log((filtersData))}

{Object.entries(filtersData)
.filter(
([key, value]: any[]) =>
Expand Down
33 changes: 17 additions & 16 deletions src/components/subcomponents/ProviderInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const ProviderInfo = (props) => {
case "donut":
return (
<Collapsible
label={type}
label={data.title}
style={{
maxWidth: "1000px",
marginLeft: "auto",
Expand All @@ -56,7 +56,7 @@ const ProviderInfo = (props) => {
case "progress":
return (
<Collapsible
label={type}
label={data.title}
style={{
maxWidth: "1000px",
marginLeft: "auto",
Expand All @@ -69,21 +69,21 @@ const ProviderInfo = (props) => {
units={data.data.units}
buttonLink={data.data.buttonLink}
buttonLabel={data.data.buttonLabel}
showNumber={data.data.showNumber}
></ProgressBar>
</Collapsible>
);
case "line":
return (
<Collapsible
label={type}
label={data.title}
style={{
maxWidth: "1000px",
marginLeft: "auto",
marginRight: "auto",
}}
>
<LineChart
title={data.title}
data={data.data.lineData}
></LineChart>
</Collapsible>
Expand Down Expand Up @@ -123,7 +123,7 @@ const ProviderInfo = (props) => {
const eventInfo = {
title: data.title,
videoUrl: data.embedLink,
}
};
return (
<Collapsible
label={eventInfo.title}
Expand All @@ -146,7 +146,9 @@ const ProviderInfo = (props) => {
marginRight: "auto",
}}
>
<EventInfoComponent description={data.description}></EventInfoComponent>
<EventInfoComponent
description={data.description}
></EventInfoComponent>
</Collapsible>
);
default:
Expand All @@ -161,7 +163,7 @@ const ProviderInfo = (props) => {
try {
const res2 = await fetch(
`https://maps.googleapis.com/maps/api/staticmap?center=${props.item.latitude},${props.item.longitude}&zoom=16&scale=2&size=335x250&maptype=roadmap&key=${GOOGLE_API_KEY}&format=png&visual_refresh=true` +
`&markers=${props.item.latitude},${props.item.longitude}`
`&markers=${props.item.latitude},${props.item.longitude}`
);
setStreetView(res2.url);
setImage(props.item.imageURL);
Expand All @@ -183,14 +185,15 @@ const ProviderInfo = (props) => {

const categoriesToUse = props.categories || [];



return (
<Container fluid className="provider-info-container">
<Row className="mb-3">
<Card style={{ width: "100%" }}>
<LazyLoad debounce={false} offsetVertical={500}>
<Card.Img style={{ maxHeight: "60vh", objectFit: "cover" }} src={image} />
<Card.Img
style={{ maxHeight: "60vh", objectFit: "cover" }}
src={image}
/>
</LazyLoad>
</Card>
</Row>
Expand All @@ -203,7 +206,7 @@ const ProviderInfo = (props) => {
marginLeft: "auto",
marginRight: "auto",
}}
containerStyle={{ placeItems: "flex-start", }}
containerStyle={{ placeItems: "flex-start" }}
>
<GeneralInfo item={props.item} />
</Collapsible>
Expand All @@ -213,9 +216,7 @@ const ProviderInfo = (props) => {
// console.log(component);
return (
<Row className="info-rows">
<Col md={12}>
{renderComponent(component)}
</Col>
<Col md={12}>{renderComponent(component)}</Col>
</Row>
);
})}
Expand All @@ -237,7 +238,7 @@ const ProviderInfo = (props) => {
if (
index !==
props.item[category.id].length -
1
1
) {
return (
<div className="modal-text">
Expand All @@ -262,7 +263,7 @@ const ProviderInfo = (props) => {
</div>
))}
</div>
</Container >
</Container>
);
};

Expand Down
3 changes: 3 additions & 0 deletions src/components/subcomponents/chartcomponents/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import React from "react";

const Button = ({ link, label }) => {
if (link.indexOf(".") === -1 || !label) {
return null;
}
return (
<a href={link} target="_blank">
<button
Expand Down
64 changes: 40 additions & 24 deletions src/components/subcomponents/chartcomponents/ChartComponentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ interface DonutData {
}

interface LineData {
x: string;
x: number;
y: number;
}

Expand All @@ -33,11 +33,7 @@ interface ChartForm {
data: ChartData;
}

const ChartComponentForm = ({
chartState,
setChartState,
deleteComponent,
}) => {
const ChartComponentForm = ({ chartState, setChartState, deleteComponent }) => {
const handleTypeChange = (type: ChartType) => {
setChartState({
type,
Expand All @@ -46,6 +42,8 @@ const ChartComponentForm = ({
});
};

const randomId = Math.random();

const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setChartState({ ...chartState, title: e.target.value });
};
Expand Down Expand Up @@ -80,20 +78,21 @@ const ChartComponentForm = ({
) => {
const newData =
chartState.type === "donut"
? [...(chartState.data.donutData || [])]
: [...(chartState.data.lineData || [])];
newData[index] = { ...newData[index], [key]: value };
? chartState.data.donutData.map((row) => ({ ...row }))
: chartState.data.lineData.map((row) => ({ ...row }));

//handles update to percentage column for DonutData
if (newData.length > 0 && chartState.type === "donut") {
let sum = 0;
newData.forEach((row) => {
sum += row.number;
});
newData[index][key] = value !== "" ? parseFloat(value as string) : "";

if (chartState.type === "donut") {
const total = newData.reduce((sum, row) => sum + row.number, 0);
newData.forEach((row) => {
row.percentage = ((row.number / sum) * 100).toFixed(1) + "%";
row.percentage =
total > 0
? ((row.number / total) * 100).toFixed(1) + "%"
: "0%";
});
}

setChartState({
...chartState,
data: {
Expand Down Expand Up @@ -169,6 +168,17 @@ const ChartComponentForm = ({
parseFloat(e.target.value)
)
}
onBlur={(e) => {
if (e.target.value === "") {
handleArrayDataChange(
index,
"number",
0
);
e.target.value = "0";
}
}}
min={0}
required
/>
</td>
Expand Down Expand Up @@ -205,7 +215,7 @@ const ChartComponentForm = ({
<tr key={index}>
<td>
<input
type="text"
type="number"
value={row.x}
onChange={(e) =>
handleArrayDataChange(
Expand All @@ -225,7 +235,7 @@ const ChartComponentForm = ({
handleArrayDataChange(
index,
"y",
parseFloat(e.target.value)
e.target.value
)
}
required
Expand Down Expand Up @@ -337,14 +347,15 @@ const ChartComponentForm = ({
<input
id="current"
type="number"
value={chartState.data.current || ""}
value={chartState.data.current}
onChange={(e) =>
handleDataChange(
"current",
parseFloat(e.target.value)
)
}
placeholder="ex. 10"
min={0}
/>
</div>
<div className="field" style={{ width: "30%" }}>
Expand All @@ -354,14 +365,15 @@ const ChartComponentForm = ({
<input
id="goal"
type="number"
value={chartState.data.total || ""}
value={chartState.data.total}
onChange={(e) =>
handleDataChange(
"total",
parseFloat(e.target.value)
)
}
placeholder="ex. 1000"
min={0}
/>
</div>
<div className="radio-group">
Expand Down Expand Up @@ -492,7 +504,7 @@ const ChartComponentForm = ({
</div>
);
default:
return <></>
return <></>;
}
};

Expand All @@ -502,7 +514,7 @@ const ChartComponentForm = ({
<label>
<input
type="radio"
name="chartType"
name={`chartType-${randomId}`}
value="donut"
checked={chartState.type === "donut"}
onChange={() => handleTypeChange("donut")}
Expand All @@ -512,7 +524,7 @@ const ChartComponentForm = ({
<label>
<input
type="radio"
name="chartType"
name={`chartType-${randomId}`}
value="progress"
checked={chartState.type === "progress"}
onChange={() => handleTypeChange("progress")}
Expand All @@ -522,7 +534,7 @@ const ChartComponentForm = ({
<label>
<input
type="radio"
name="chartType"
name={`chartType-${randomId}`}
value="line"
checked={chartState.type === "line"}
onChange={() => handleTypeChange("line")}
Expand All @@ -541,6 +553,10 @@ const ChartComponentForm = ({
/>
</div>
{renderFields()}
<div>
<h4>Current Data:</h4>
<pre>{JSON.stringify(chartState, null, 2)}</pre>
</div>
<div className="footer">
<button
type="button"
Expand Down
Loading