From 926bf2e2799ffb9b55c944d647e17bc16dabb64c Mon Sep 17 00:00:00 2001
From: Qian-Ye_Lin <52944295+0qy@users.noreply.github.com>
Date: Thu, 4 Aug 2022 15:40:25 +1200
Subject: [PATCH] fix group curve chart threshold display error (#78)

* fix group curve chart threshold display error
* fix typo
---
 src/GroupCurveChart/GroupCurveChart.tsx       |  6 +--
 src/GroupCurveChart/groupCurveChart.types.ts  |  1 +
 .../GroupCurveChartResponsive.stories.tsx     | 39 +++++++++++++++++++
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/GroupCurveChart/GroupCurveChart.tsx b/src/GroupCurveChart/GroupCurveChart.tsx
index 112d5df..3d711ec 100644
--- a/src/GroupCurveChart/GroupCurveChart.tsx
+++ b/src/GroupCurveChart/GroupCurveChart.tsx
@@ -18,7 +18,7 @@ import PlotHeadings from '../common/PlotHeadings';
 import { HazardColorScale } from '../types/hazardCharts.types';
 
 const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartProps) => {
-  const { scaleType, yScaleType, xLimits, yLimits, gridColor, backgroundColor, numTickX, numTickY, width, curves, tooltip, crosshair, heading, subHeading, poe, uncertainty } = props;
+  const { spectral, scaleType, yScaleType, xLimits, yLimits, gridColor, backgroundColor, numTickX, numTickY, width, curves, tooltip, crosshair, heading, subHeading, poe, uncertainty } = props;
   const height = width * 0.75;
   const marginLeft = 50;
   const marginRight = 50;
@@ -165,7 +165,7 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
                         />
                       ))}
                       <Threshold<number[]>
-                        id={`uncertianty-area-${index}`}
+                        id={spectral ? `uncertainty-area-spectral-${index}` : `uncertainty-area-${index}`}
                         data={getAreaData(curves[key])}
                         x={(d) => xScale(d[0])}
                         y0={(d) => yScale(d[2])}
@@ -195,7 +195,7 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
                   ))}
                 </>
               )}
-              {poe && <LinePath role="POE" data={poeLine} x={(d) => xScale(d.x)} y={(d) => yScale(d.y)} stroke="#989C9C" />}
+              {poe && !spectral && <LinePath role="POE" data={poeLine} x={(d) => xScale(d.x)} y={(d) => yScale(d.y)} stroke="#989C9C" />}
             </Group>
             {crosshair && tooltipOpen && (
               <g>
diff --git a/src/GroupCurveChart/groupCurveChart.types.ts b/src/GroupCurveChart/groupCurveChart.types.ts
index 6a0f4df..880af07 100644
--- a/src/GroupCurveChart/groupCurveChart.types.ts
+++ b/src/GroupCurveChart/groupCurveChart.types.ts
@@ -1,4 +1,5 @@
 export interface GroupCurveChartProps {
+  spectral?: boolean;
   scaleType: 'log' | 'linear';
   yScaleType?: 'log' | 'linear';
   xLimits: number[];
diff --git a/src/GroupCurveChartResponsive/GroupCurveChartResponsive.stories.tsx b/src/GroupCurveChartResponsive/GroupCurveChartResponsive.stories.tsx
index f64b089..b7fc86e 100644
--- a/src/GroupCurveChartResponsive/GroupCurveChartResponsive.stories.tsx
+++ b/src/GroupCurveChartResponsive/GroupCurveChartResponsive.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import GroupCurveChartResponsive from '.';
 import { curveGroup2, curveGroup1 } from '../__tests__/testData/uncertaintyTestData';
+import spectralAccelUncertaintyTestData from '../__tests__/testData/spectralAccelUncertaintyTestData';
 
 export default {
   title: 'Charts/GroupCurveChartResponsive',
@@ -12,6 +13,8 @@ export default {
 const Template: ComponentStory<typeof GroupCurveChartResponsive> = (args) => <GroupCurveChartResponsive {...args} />;
 
 export const Primary = Template.bind({});
+export const SpectralAccelUncertaintyTrue = Template.bind({});
+export const SpectralAccelUncertaintyFalse = Template.bind({});
 
 Primary.args = {
   scaleType: 'log',
@@ -28,3 +31,39 @@ Primary.args = {
   subHeading: 'WLG 250',
   poe: 0.02,
 };
+
+SpectralAccelUncertaintyTrue.args = {
+  scaleType: 'linear',
+  yScaleType: 'linear',
+  xLimits: [-1, 6],
+  yLimits: [0, 4],
+  gridColor: '#efefef',
+  backgroundColor: '#ffffff',
+  numTickX: 5,
+  numTickY: 5,
+  curves: spectralAccelUncertaintyTestData,
+  tooltip: true,
+  crosshair: true,
+  heading: 'Spectra with Uncertainty',
+  subHeading: 'WLG 400m/s',
+  poe: undefined,
+  uncertainty: true,
+};
+
+SpectralAccelUncertaintyFalse.args = {
+  scaleType: 'linear',
+  yScaleType: 'linear',
+  xLimits: [-1, 6],
+  yLimits: [0, 4],
+  gridColor: '#efefef',
+  backgroundColor: '#ffffff',
+  numTickX: 5,
+  numTickY: 5,
+  curves: spectralAccelUncertaintyTestData,
+  tooltip: true,
+  crosshair: true,
+  heading: 'Sepectra without Uncertainty',
+  subHeading: 'WLG 400m/s',
+  poe: undefined,
+  uncertainty: false,
+};