add time period to groupCurveChart;

GNS-Science · Oct 10, 2023 · 21fa3f1 · 21fa3f1
1 parent c9db37a
commit 21fa3f1
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 2 deletions.
diff --git a/src/GroupCurveChart/GroupCurveChart.stories.tsx b/src/GroupCurveChart/GroupCurveChart.stories.tsx
@@ -41,6 +41,7 @@ Primary.args = {
   poe: 0.02,
   uncertainty: true,
   spectral: false,
+  timePeriod: 100,
 };
 
 Tooltip.args = {
@@ -62,6 +63,7 @@ Tooltip.args = {
   poe: 0.02,
   uncertainty: true,
   spectral: false,
+  timePeriod: 100,
 };
 
 Crosshair.args = {
@@ -83,6 +85,7 @@ Crosshair.args = {
   poe: 0.02,
   uncertainty: true,
   spectral: false,
+  timePeriod: 100,
 };
 
 TooltipWithCrosshair.args = {
@@ -104,6 +107,7 @@ TooltipWithCrosshair.args = {
   poe: 0.02,
   uncertainty: true,
   spectral: false,
+  timePeriod: 100,
 };
 
 UncertaintyFalse.args = {
@@ -125,6 +129,7 @@ UncertaintyFalse.args = {
   poe: 0.02,
   uncertainty: false,
   spectral: false,
+  timePeriod: 100,
 };
 
 SpectralAccelUncertaintyTrue.args = {
@@ -147,6 +152,7 @@ SpectralAccelUncertaintyTrue.args = {
   poe: 0.1,
   uncertainty: true,
   spectral: true,
+  timePeriod: 100,
 };
 
 SpectralAccelUncertaintyFalse.args = {
@@ -169,6 +175,7 @@ SpectralAccelUncertaintyFalse.args = {
   poe: 0.1,
   uncertainty: false,
   spectral: true,
+  timePeriod: 100,
 };
 
 SpectralAccelLog.args = {
@@ -191,4 +198,5 @@ SpectralAccelLog.args = {
   poe: 0.1,
   uncertainty: true,
   spectral: true,
+  timePeriod: 100,
 };
diff --git a/src/GroupCurveChart/GroupCurveChart.test.tsx b/src/GroupCurveChart/GroupCurveChart.test.tsx
@@ -21,6 +21,7 @@ const props: GroupCurveChartProps = {
   subHeading: 'subHeading',
   poe: 0.02,
   uncertainty: true,
+  timePeriod: 100,
 };
 
 const Wrapper = () => {

diff --git a/src/GroupCurveChart/GroupCurveChart.tsx b/src/GroupCurveChart/GroupCurveChart.tsx
@@ -41,6 +41,7 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
     subHeading,
     poe,
     uncertainty,
+    timePeriod,
   } = props;
   const height = width * 0.75;
   const marginLeft = 50;
@@ -92,7 +93,7 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
   const ordinalColorScale = useMemo(() => {
     if (!spectral) {
       return scaleOrdinal({
-        domain: !poe ? [...curvesDomain.domain] : [...curvesDomain.domain, !spectral && `POE ${poe * 100}% (50 Yrs)`],
+        domain: !poe ? [...curvesDomain.domain] : [...curvesDomain.domain, !spectral && `POE ${poe * 100}% (${timePeriod} Yrs)`],
         range: !poe ? [...curvesDomain.range] : [...curvesDomain.range, !spectral && '#989C9C'],
       });
     } else {
@@ -101,7 +102,7 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
         range: [...curvesDomain.range],
       });
     }
-  }, [curvesDomain, poe, spectral]);
+  }, [curvesDomain, poe, spectral, timePeriod]);
 
   const poeLine = useMemo(() => {
     const getPoE = (poeValue: number) => {

diff --git a/src/GroupCurveChart/groupCurveChart.types.ts b/src/GroupCurveChart/groupCurveChart.types.ts
@@ -21,6 +21,7 @@ export interface GroupCurveChartProps {
   resizeParent?: (state: any) => void;
   poe: number | undefined;
   uncertainty: boolean;
+  timePeriod: number;
 }
 
 export interface Curve {

diff --git a/src/GroupCurveChartResponsive/GroupCurveChartResponsive.stories.tsx b/src/GroupCurveChartResponsive/GroupCurveChartResponsive.stories.tsx
@@ -32,6 +32,7 @@ Primary.args = {
   heading: 'Hazard Chart with Uncertainty',
   subHeading: 'WLG 250',
   poe: 0.02,
+  timePeriod: 100,
 };
 
 SpectralAccelUncertaintyTrue.args = {
@@ -50,6 +51,7 @@ SpectralAccelUncertaintyTrue.args = {
   subHeading: 'WLG 400m/s',
   poe: undefined,
   uncertainty: true,
+  timePeriod: 100,
 };
 
 SpectralAccelUncertaintyFalse.args = {
@@ -68,4 +70,5 @@ SpectralAccelUncertaintyFalse.args = {
   subHeading: 'WLG 400m/s',
   poe: undefined,
   uncertainty: false,
+  timePeriod: 100,
 };
diff --git a/src/GroupCurveChartResponsive/GroupCurveChartResponsive.tsx b/src/GroupCurveChartResponsive/GroupCurveChartResponsive.tsx
@@ -21,6 +21,7 @@ export interface GroupCurveChartResponsiveProps {
   subHeading?: string;
   poe: number | undefined;
   uncertainty: boolean;
+  timePeriod: number;
 }
 
 const GroupCurveChartResponsive: React.FC<GroupCurveChartResponsiveProps> = (props: GroupCurveChartResponsiveProps) => {

diff --git a/src/HazardChart/HazardChart.stories.tsx b/src/HazardChart/HazardChart.stories.tsx
@@ -20,4 +20,5 @@ Primary.args = {
   scalesConfig: hazardChartScalesConfig,
   heading: 'Hazard Chart',
   subHeading: 'PGA',
+  timePeriod: 100,
 };