add customizable axis labelt to GroupCurveChart (#80)

GNS-Science · Aug 7, 2022 · 47fd706 · 47fd706
1 parent 0135319
commit 47fd706
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/src/GroupCurveChart/GroupCurveChart.stories.tsx b/src/GroupCurveChart/GroupCurveChart.stories.tsx
@@ -24,6 +24,8 @@ Primary.args = {
   scaleType: 'log',
   xLimits: [1e-2, 10],
   yLimits: [1e-6, 1],
+  xLabel: 'Acceleration(g)',
+  yLabel: 'Annual Probability of Exceedance',
   gridColor: '#efefef',
   backgroundColor: '#f3f6f4',
   numTickX: 5,
@@ -42,6 +44,8 @@ Tooltip.args = {
   scaleType: 'log',
   xLimits: [1e-2, 10],
   yLimits: [1e-6, 1],
+  xLabel: 'Acceleration(g)',
+  yLabel: 'Annual Probability of Exceedance',
   gridColor: '#efefef',
   backgroundColor: '#f3f6f4',
   numTickX: 5,
@@ -60,6 +64,8 @@ Crosshair.args = {
   scaleType: 'log',
   xLimits: [1e-2, 10],
   yLimits: [1e-6, 1],
+  xLabel: 'Acceleration(g)',
+  yLabel: 'Annual Probability of Exceedance',
   gridColor: '#efefef',
   backgroundColor: '#f3f6f4',
   numTickX: 5,
@@ -78,6 +84,8 @@ TooltipWithCrosshair.args = {
   scaleType: 'log',
   xLimits: [1e-2, 10],
   yLimits: [1e-6, 1],
+  xLabel: 'Acceleration(g)',
+  yLabel: 'Annual Probability of Exceedance',
   gridColor: '#efefef',
   backgroundColor: '#ffffff',
   numTickX: 5,
@@ -96,6 +104,8 @@ UncertaintyFalse.args = {
   scaleType: 'log',
   xLimits: [1e-2, 10],
   yLimits: [1e-6, 1],
+  xLabel: 'Acceleration(g)',
+  yLabel: 'Annual Probability of Exceedance',
   gridColor: '#efefef',
   backgroundColor: '#ffffff',
   numTickX: 5,
@@ -113,6 +123,8 @@ UncertaintyFalse.args = {
 SpectralAccelUncertaintyTrue.args = {
   scaleType: 'linear',
   yScaleType: 'linear',
+  xLabel: 'Period [s]',
+  yLabel: 'Shaking Intensity [g]',
   xLimits: [-1, 6],
   yLimits: [0, 4],
   gridColor: '#efefef',
@@ -132,6 +144,8 @@ SpectralAccelUncertaintyTrue.args = {
 SpectralAccelUncertaintyFalse.args = {
   scaleType: 'linear',
   yScaleType: 'linear',
+  xLabel: 'Period [s]',
+  yLabel: 'Shaking Intensity [g]',
   xLimits: [-1, 6],
   yLimits: [0, 4],
   gridColor: '#efefef',

diff --git a/src/GroupCurveChart/GroupCurveChart.tsx b/src/GroupCurveChart/GroupCurveChart.tsx
@@ -18,7 +18,27 @@ import PlotHeadings from '../common/PlotHeadings';
 import { HazardColorScale } from '../types/hazardCharts.types';
 
 const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartProps) => {
-  const { spectral, scaleType, yScaleType, xLimits, yLimits, gridColor, backgroundColor, numTickX, numTickY, width, curves, tooltip, crosshair, heading, subHeading, poe, uncertainty } = props;
+  const {
+    spectral,
+    scaleType,
+    yScaleType,
+    xLabel,
+    yLabel,
+    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;
@@ -138,10 +158,10 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
           <rect x={0} y={0} width={width} height={height} fill={backgroundColor ?? '#ffffff'} rx={14} />
           <PlotHeadings heading={heading} subHeading={subHeading} width={width} />
           <text y={height - 15} x={xMax / 2} fontSize={10}>
-            Acceleration (g)
+            {xLabel}
           </text>
           <text y={15} x={-width / 2} transform="rotate(-90)" fontSize={10}>
-            Annual Probability of Exceedance
+            {yLabel}
           </text>
           <Group left={marginLeft} top={marginTop}>
             <AxisBottom top={yMax} scale={xScale} numTicks={numTickX ?? 5} stroke={gridColor} tickLength={3} tickStroke={gridColor} />

diff --git a/src/GroupCurveChart/groupCurveChart.types.ts b/src/GroupCurveChart/groupCurveChart.types.ts
@@ -2,6 +2,8 @@ export interface GroupCurveChartProps {
   spectral?: boolean;
   scaleType: 'log' | 'linear';
   yScaleType?: 'log' | 'linear';
+  xLabel?: string;
+  yLabel?: string;
   xLimits: number[];
   yLimits: number[];
   gridColor?: string;

diff --git a/src/GroupCurveChartResponsive/GroupCurveChartResponsive.tsx b/src/GroupCurveChartResponsive/GroupCurveChartResponsive.tsx
@@ -8,6 +8,8 @@ export interface GroupCurveChartResponsiveProps {
   yScaleType?: 'log' | 'linear';
   xLimits: number[];
   yLimits: number[];
+  xLabel?: string;
+  yLabel?: string;
   gridColor?: string;
   backgroundColor?: string;
   numTickX?: number;