From 6c5d31636fa3b4f8410b3a1b13d612e6cabf06c8 Mon Sep 17 00:00:00 2001 From: Charlie Lin Date: Sun, 10 Nov 2024 03:09:26 -0500 Subject: [PATCH 01/14] added fixes for donut, added fixes for donut opacity when large number of items (was inverting) --- .../chartcomponents/ChartComponentForm.tsx | 30 +++++++++---------- .../chartcomponents/DonutChart.tsx | 6 ++-- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx index 989660e..bc2b6f3 100644 --- a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx +++ b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx @@ -33,11 +33,7 @@ interface ChartForm { data: ChartData; } -const ChartComponentForm = ({ - chartState, - setChartState, - deleteComponent, -}) => { +const ChartComponentForm = ({ chartState, setChartState, deleteComponent }) => { const handleTypeChange = (type: ChartType) => { setChartState({ type, @@ -80,20 +76,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; + + 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: { @@ -169,6 +166,7 @@ const ChartComponentForm = ({ parseFloat(e.target.value) ) } + min={0} required /> @@ -492,7 +490,7 @@ const ChartComponentForm = ({ ); default: - return <> + return <>; } }; diff --git a/src/components/subcomponents/chartcomponents/DonutChart.tsx b/src/components/subcomponents/chartcomponents/DonutChart.tsx index 7f9c1fb..6f0256b 100644 --- a/src/components/subcomponents/chartcomponents/DonutChart.tsx +++ b/src/components/subcomponents/chartcomponents/DonutChart.tsx @@ -46,7 +46,7 @@ const DonutChart = ({ data, buttonLink, buttonLabel }) => { const opacityScale = d3 .scaleLinear() .domain([0, data.length - 1]) - .range([1, 0.2]); + .range([1, 0.3]); // Method to process and sort the data const pie = d3 @@ -74,8 +74,8 @@ const DonutChart = ({ data, buttonLink, buttonLabel }) => { .enter() .append("path") .attr("d", arc as any) - .attr("fill", (_, i): any => { - const opacity = opacityScale(i); + .attr("fill", (d): any => { + const opacity = opacityScale(d.index); return d3.rgb(baseColor.r, baseColor.g, baseColor.b, opacity); }) .attr("stroke", "#fff") From ccb78b23c901db52286b22eee7f60806f8bac662 Mon Sep 17 00:00:00 2001 From: Charlie Lin Date: Sun, 10 Nov 2024 04:17:56 -0500 Subject: [PATCH 02/14] minor style changes to donut chart --- src/components/subcomponents/chartcomponents/DonutChart.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/subcomponents/chartcomponents/DonutChart.tsx b/src/components/subcomponents/chartcomponents/DonutChart.tsx index 6f0256b..a114d19 100644 --- a/src/components/subcomponents/chartcomponents/DonutChart.tsx +++ b/src/components/subcomponents/chartcomponents/DonutChart.tsx @@ -107,7 +107,7 @@ const DonutChart = ({ data, buttonLink, buttonLabel }) => { const outerArc = d3 .arc() .innerRadius(radius * 1) - .outerRadius(radius * 1.1); + .outerRadius(radius * 1.3); // Defines outer info label group and controls their positioning const outerLabel = svgGroup @@ -145,7 +145,7 @@ const DonutChart = ({ data, buttonLink, buttonLabel }) => { const leaderArc = d3 .arc() .innerRadius(radius * 0.9) - .outerRadius(radius * 0.8); + .outerRadius(radius * 0.95); // Adds and controls how the lines are generated and positions them between inner and outer label svgGroup @@ -159,7 +159,7 @@ const DonutChart = ({ data, buttonLink, buttonLabel }) => { const posB = outerArc.centroid(d); const posC = outerArc.centroid(d); const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2; - posC[0] = radius * 1.1 * (midAngle < Math.PI ? 1 : -1); + posC[0] = radius * 1.3 * (midAngle < Math.PI ? 1 : -1); return [posA, posB, posC]; }) .style("fill", "none") From 25c5f53c435b59f6009acdac08402da544a453f6 Mon Sep 17 00:00:00 2001 From: Charlie Lin Date: Sun, 10 Nov 2024 04:43:18 -0500 Subject: [PATCH 03/14] fixed listed progress bar bugs, added functionality for show number/percentage lol, removed default dollars value to units --- src/components/subcomponents/ProviderInfo.tsx | 26 +++++++------ .../chartcomponents/ChartComponentForm.tsx | 6 ++- .../chartcomponents/ProgressBar.tsx | 39 ++++++++++--------- 3 files changed, 39 insertions(+), 32 deletions(-) diff --git a/src/components/subcomponents/ProviderInfo.tsx b/src/components/subcomponents/ProviderInfo.tsx index c82befe..81d0509 100644 --- a/src/components/subcomponents/ProviderInfo.tsx +++ b/src/components/subcomponents/ProviderInfo.tsx @@ -69,6 +69,7 @@ const ProviderInfo = (props) => { units={data.data.units} buttonLink={data.data.buttonLink} buttonLabel={data.data.buttonLabel} + showNumber={data.data.showNumber} > ); @@ -123,7 +124,7 @@ const ProviderInfo = (props) => { const eventInfo = { title: data.title, videoUrl: data.embedLink, - } + }; return ( { marginRight: "auto", }} > - + ); default: @@ -161,7 +164,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); @@ -183,14 +186,15 @@ const ProviderInfo = (props) => { const categoriesToUse = props.categories || []; - - return ( - + @@ -203,7 +207,7 @@ const ProviderInfo = (props) => { marginLeft: "auto", marginRight: "auto", }} - containerStyle={{ placeItems: "flex-start", }} + containerStyle={{ placeItems: "flex-start" }} > @@ -213,9 +217,7 @@ const ProviderInfo = (props) => { // console.log(component); return ( - - {renderComponent(component)} - + {renderComponent(component)} ); })} @@ -237,7 +239,7 @@ const ProviderInfo = (props) => { if ( index !== props.item[category.id].length - - 1 + 1 ) { return (
@@ -262,7 +264,7 @@ const ProviderInfo = (props) => {
))} - + ); }; diff --git a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx index bc2b6f3..bdf0164 100644 --- a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx +++ b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx @@ -335,7 +335,7 @@ const ChartComponentForm = ({ chartState, setChartState, deleteComponent }) => { handleDataChange( "current", @@ -343,6 +343,7 @@ const ChartComponentForm = ({ chartState, setChartState, deleteComponent }) => { ) } placeholder="ex. 10" + min={0} />
@@ -352,7 +353,7 @@ const ChartComponentForm = ({ chartState, setChartState, deleteComponent }) => { handleDataChange( "total", @@ -360,6 +361,7 @@ const ChartComponentForm = ({ chartState, setChartState, deleteComponent }) => { ) } placeholder="ex. 1000" + min={0} />
diff --git a/src/components/subcomponents/chartcomponents/ProgressBar.tsx b/src/components/subcomponents/chartcomponents/ProgressBar.tsx index da50b11..e9979f5 100644 --- a/src/components/subcomponents/chartcomponents/ProgressBar.tsx +++ b/src/components/subcomponents/chartcomponents/ProgressBar.tsx @@ -13,9 +13,10 @@ import { Button } from "./Button"; const ProgressBar = ({ current, total, - units = "dollars", + units = "", buttonLink, buttonLabel, + showNumber, }) => { const svgRef = useRef(); const percentage = Math.min((current / total) * 100, 100); @@ -54,25 +55,27 @@ const ProgressBar = ({ alignItems: "center", }} > -

- {`${current} ${units}`} - - {` out of ${total} ${units} total`} - -

+ {`${current} ${units}`} + + {` out of ${total} ${units} total`} + +

+ )}

- {String(percentage) + "%"} + {String(Math.round(percentage)) + "%"}

From 848bb1479c30120e769db43c78fb75e9f5f1eb17 Mon Sep 17 00:00:00 2001 From: Charlie Lin Date: Fri, 15 Nov 2024 22:37:42 -0500 Subject: [PATCH 04/14] all line fixes, first two of gen issues --- src/components/subcomponents/ProviderInfo.tsx | 7 +- .../subcomponents/chartcomponents/Button.tsx | 3 + .../chartcomponents/ChartComponentForm.tsx | 12 +- .../chartcomponents/LineChart.tsx | 106 ++++++++---------- 4 files changed, 62 insertions(+), 66 deletions(-) diff --git a/src/components/subcomponents/ProviderInfo.tsx b/src/components/subcomponents/ProviderInfo.tsx index 81d0509..7d3910c 100644 --- a/src/components/subcomponents/ProviderInfo.tsx +++ b/src/components/subcomponents/ProviderInfo.tsx @@ -39,7 +39,7 @@ const ProviderInfo = (props) => { case "donut": return ( { case "progress": return ( { case "line": return ( { }} > diff --git a/src/components/subcomponents/chartcomponents/Button.tsx b/src/components/subcomponents/chartcomponents/Button.tsx index a8ea79c..4995987 100644 --- a/src/components/subcomponents/chartcomponents/Button.tsx +++ b/src/components/subcomponents/chartcomponents/Button.tsx @@ -1,6 +1,9 @@ import React from "react"; const Button = ({ link, label }) => { + if (!link || !label) { + return null; + } return (