fix curve chart lines - dash array and colour now comes from kororaa;

GNS-Science · May 28, 2024 · f48582d · f48582d
1 parent 277850c
commit f48582d
Show file tree

Hide file tree

Showing 5 changed files with 3,197 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gns-science/toshi-nest",
-  "version": "3.9.11",
+  "version": "3.9.12",
   "description": "The toshi-nest is for fledgling work e.g. reusable Node components to share across TUI and other projects",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

diff --git a/src/GroupCurveChart/GroupCurveChart.stories.tsx b/src/GroupCurveChart/GroupCurveChart.stories.tsx
@@ -5,7 +5,7 @@ import GroupCurveChart from './GroupCurveChart';
 import { curveGroup4, curveGroup3, curveGroup2, curveGroup1 } from '../__tests__/testData/uncertaintyTestData';
 import spectralAccelUncertaintyTestData from '../__tests__/testData/spectralAccelUncertaintyTestData';
 import spectralAccelUncertaintyLog from '../__tests__/testData/spectralAccelUncertaintyLog';
-import { multipleImtData, uhsData } from '../__tests__/testData/hazardChartMultipleSATestData';
+import { multipleImtData, uhsData, uhsData2, saData2, newData, newSaData } from '../__tests__/testData/hazardChartMultipleSATestData';
 
 export default {
   title: 'Charts/GroupCurveChart',
@@ -24,6 +24,10 @@ export const SpectralAccelUncertaintyFalse = Template.bind({});
 export const SpectralAccelLog = Template.bind({});
 export const MultipleSA = Template.bind({});
 export const MultipleSAUHS = Template.bind({});
+export const WideSingleSA = Template.bind({});
+export const WideSingleUHS = Template.bind({});
+export const WideDoubleSA = Template.bind({});
+export const WideDoubleUHS = Template.bind({});
 
 Primary.args = {
   scaleType: 'log',
@@ -248,3 +252,93 @@ MultipleSAUHS.args = {
   spectral: true,
   timePeriod: 100,
 };
+
+WideSingleSA.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,
+  numTickY: 5,
+  width: 600,
+  curves: uhsData2,
+  tooltip: false,
+  crosshair: false,
+  heading: 'Group Curve Chart for Hazard',
+  subHeading: 'WLG 250',
+  poe: 0.02,
+  uncertainty: true,
+  spectral: false,
+  timePeriod: 100,
+};
+
+WideSingleUHS.args = {
+  scaleType: 'log',
+  yScaleType: 'linear',
+  xLabel: 'Period [s]',
+  yLabel: 'Shaking Intensity [g]',
+  xLimits: [0.0001, 10],
+  yLimits: [0, 3.690382289232626],
+  gridColor: '#efefef',
+  backgroundColor: '#ffffff',
+  numTickX: 5,
+  numTickY: 5,
+  width: 600,
+  curves: saData2,
+  tooltip: true,
+  crosshair: true,
+  heading: 'Spectra with Log Xscale',
+  subHeading: 'WLG 400m/s',
+  poe: 0.1,
+  uncertainty: true,
+  spectral: true,
+  timePeriod: 100,
+};
+
+WideDoubleSA.args = {
+  scaleType: 'log',
+  xLimits: [1e-2, 10],
+  yLimits: [1e-5, 1],
+  xLabel: 'Acceleration(g)',
+  yLabel: 'Annual Probability of Exceedance',
+  gridColor: '#efefef',
+  backgroundColor: '#f3f6f4',
+  numTickX: 5,
+  numTickY: 5,
+  width: 600,
+  curves: newData,
+  tooltip: false,
+  crosshair: false,
+  heading: 'Group Curve Chart for Hazard',
+  subHeading: 'WLG 250',
+  poe: 0.02,
+  uncertainty: true,
+  spectral: false,
+  timePeriod: 100,
+};
+
+WideDoubleUHS.args = {
+  scaleType: 'log',
+  yScaleType: 'linear',
+  xLabel: 'Period [s]',
+  yLabel: 'Shaking Intensity [g]',
+  xLimits: [0.0001, 10],
+  yLimits: [0, 3.690382289232626],
+  gridColor: '#efefef',
+  backgroundColor: '#ffffff',
+  numTickX: 5,
+  numTickY: 5,
+  width: 600,
+  curves: newSaData,
+  tooltip: true,
+  crosshair: true,
+  heading: 'Spectra with Log Xscale',
+  subHeading: 'WLG 400m/s',
+  poe: 0.1,
+  uncertainty: true,
+  spectral: true,
+  timePeriod: 100,
+};
diff --git a/src/GroupCurveChart/GroupCurveChart.tsx b/src/GroupCurveChart/GroupCurveChart.tsx
@@ -90,6 +90,8 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
     return colorScale;
   }, [curves]);
 
+  console.log(curvesDomain);
+
   const legendGlyphSize = 15;
 
   const ordinalColorScale = useMemo(() => {
@@ -139,17 +141,17 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
       .map((d, i) => {
         switch (d.length) {
           case 1:
-            return [<rect key={'a' + i} fill={curvesDomain.range[i]} width={legendGlyphSize} height={legendGlyphSize / 5} y={7} />];
+            return [<rect key={'a' + i} fill={curvesDomain.range[i * imts.length]} width={legendGlyphSize} height={legendGlyphSize / 5} y={7} />];
           case 2:
             return [
-              <rect key={'a' + i} fill={curvesDomain.range[i]} width={legendGlyphSize} height={legendGlyphSize / 5} y={7} />,
-              <line key={'b' + i} stroke={curvesDomain.range[i]} x1="0" y1="10" x2="250" y2="10" strokeDasharray="4,5" y={7} strokeWidth={legendGlyphSize / 5} />,
+              <rect key={'a' + i} fill={curvesDomain.range[i * imts.length]} width={legendGlyphSize} height={legendGlyphSize / 5} y={7} />,
+              <line key={'b' + i} stroke={curvesDomain.range[i * imts.length]} x1="0" y1="10" x2="250" y2="10" strokeDasharray="4,5" y={7} strokeWidth={legendGlyphSize / 5} />,
             ];
           case 3:
             return [
-              <rect key={'a' + i} fill={curvesDomain.range[i]} width={legendGlyphSize} height={legendGlyphSize / 5} y={7} />,
-              <line key={'b' + i} stroke={curvesDomain.range[i]} x1="0" y1="10" x2="250" y2="10" strokeDasharray="4,5" y={7} strokeWidth={legendGlyphSize / 5} />,
-              <line key={'c' + i} stroke={curvesDomain.range[i]} x1="0" y1="10" x2="250" y2="10" strokeDasharray="1,3" y={7} strokeWidth={legendGlyphSize / 5} />,
+              <rect key={'a' + i} fill={curvesDomain.range[i * imts.length]} width={legendGlyphSize} height={legendGlyphSize / 5} y={7} />,
+              <line key={'b' + i} stroke={curvesDomain.range[i * imts.length]} x1="0" y1="10" x2="250" y2="10" strokeDasharray="4,5" y={7} strokeWidth={legendGlyphSize / 5} />,
+              <line key={'c' + i} stroke={curvesDomain.range[i * imts.length]} x1="0" y1="10" x2="250" y2="10" strokeDasharray="1,3" y={7} strokeWidth={legendGlyphSize / 5} />,
             ];
           default:
             return [];
@@ -158,30 +160,6 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
       .flat();
   };
 
-  const strokeDashArray = (index: number) => {
-    const values = ['0', '4,5', '1,3'];
-    const repeatCount = imts.length === 1 ? 1 : imts.length === 2 ? 2 : imts.length === 3 ? 3 : 1;
-    const valuesIndex = (index % repeatCount) % values.length;
-
-    return values[valuesIndex];
-  };
-
-  function generateColorArray(length: number, interval: number) {
-    const array: string[] = [];
-    let valuesIndex = 0;
-    for (let i = 0; i < length; i++) {
-      if (i % interval === 0) {
-        array.push(curvesDomain.range[valuesIndex]);
-        valuesIndex = (valuesIndex + 1) % curvesDomain.range.length;
-      } else {
-        array.push(array[i - 1]);
-      }
-    }
-    return array;
-  }
-
-  const strokeColorArray = generateColorArray(Object.keys(curves).length, imts.length);
-
   const legendRange = generateLegendRange();
 
   const legendDomain = locationsWithVs30.flat(2);
@@ -299,6 +277,7 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
                           y={(d) => yScale(d[1])}
                           stroke={curves[key]['upper1'].strokeColor}
                           strokeOpacity={curves[key][curveType].strokeOpacity ?? 1}
+                          strokeDasharray={curves[key][curveType].strokeDashArray ?? '0'}
                           defined={(d, index) => {
                             if (scaleType === 'log' && index === 0) {
                               return false;
@@ -317,7 +296,7 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
                         clipBelowTo={yMax}
                         aboveAreaProps={{
                           fill: curves[key]['upper1'].strokeColor,
-                          fillOpacity: 0.4,
+                          fillOpacity: 0.2,
                         }}
                         defined={(d, index) => {
                           if (scaleType === 'log' && index === 0) {
@@ -343,9 +322,9 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
                         x={(d) => xScale(d[0])}
                         y={(d) => yScale(d[1])}
                         markerMid="url(#marker-x)"
-                        stroke={spectral ? curves[key]['upper1'].strokeColor : strokeColorArray[index]}
+                        stroke={curves[key]['upper1'].strokeColor}
                         strokeOpacity={curves[key]['mean'].strokeOpacity ?? 1}
-                        strokeDasharray={spectral ? '0' : strokeDashArray(index)}
+                        strokeDasharray={spectral ? '0' : curves[key]['mean'].strokeDashArray}
                         defined={(d, index) => {
                           if (scaleType === 'log' && index === 0) {
                             return false;
@@ -393,7 +372,7 @@ const GroupCurveChart: React.FC<GroupCurveChartProps> = (props: GroupCurveChartP
           </Group>
         </svg>
         <div style={{ width: width * 0.24, position: 'absolute', top: marginTop, left: width * 0.8, display: 'flex' }}>
-          {uncertainty || spectral ? (
+          {spectral ? (
             <LegendOrdinal direction="column" scale={ordinalColorScale} shape="line" style={{ fontSize: width * 0.016 <= 13 ? 13 : width * 0.015 }} shapeHeight={width * 0.02} />
           ) : (
             <Legend scale={shapeScale}>

diff --git a/src/GroupCurveChart/groupCurveChart.types.ts b/src/GroupCurveChart/groupCurveChart.types.ts
@@ -25,6 +25,7 @@ export interface GroupCurveChartProps {
 }
 
 export interface Curve {
+  strokeDashArray?: string;
   strokeSize?: number;
   strokeOpacity?: number;
   strokeColor?: string;